/* SAPIO Game System v2 — common immersive shell */
:root{
  --sapio-accent:#72b8ff;
  --sapio-accent-2:#8bd8c6;
  --sapio-glow:rgba(114,184,255,.24);
  --sapio-panel:rgba(9,24,43,.68);
  --sapio-line:rgba(255,255,255,.12);
  --sapio-text:#f8fbff;
  --sapio-muted:#a9bdd1;
}
html,body{background:
  radial-gradient(900px 500px at 8% 0%,color-mix(in srgb,var(--sapio-accent) 14%,transparent),transparent 64%),
  radial-gradient(700px 500px at 92% 88%,color-mix(in srgb,var(--sapio-accent-2) 10%,transparent),transparent 68%),
  linear-gradient(150deg,#07111d 0%,#0a1a2a 46%,#07121f 100%) !important;
  color:var(--sapio-text)!important;
}
body{isolation:isolate;}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;background-image:
  linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,black,transparent 80%)}
body::after{content:"";position:fixed;inset:-20%;pointer-events:none;z-index:-1;background:radial-gradient(circle at 50% 50%,transparent 0 30%,rgba(2,8,16,.16) 70%);}
.back-btn{top:18px!important;left:18px!important;width:44px!important;height:44px!important;background:rgba(8,20,35,.72)!important;border:1px solid var(--sapio-line)!important;box-shadow:0 12px 40px rgba(0,0,0,.22);backdrop-filter:blur(16px)!important;transition:.2s ease!important}
.back-btn:hover{transform:translateX(-2px);border-color:color-mix(in srgb,var(--sapio-accent) 55%,white 0%)!important}
.brand{margin-top:24px!important;font-family:Inter,Helvetica,Arial,sans-serif!important;text-transform:uppercase;letter-spacing:.16em!important;font-size:.76rem!important;color:var(--sapio-muted)!important}
.brand strong{color:var(--sapio-text)!important;letter-spacing:.08em}
.screen,.setup,.stage{position:relative;z-index:1}
.screen,.setup{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.018));border:1px solid var(--sapio-line);box-shadow:0 24px 80px rgba(0,0,0,.18);backdrop-filter:blur(10px);border-radius:28px;padding:28px!important;margin:18px auto;max-width:500px!important}
h1{font-family:Georgia,'Times New Roman',serif!important;letter-spacing:-.02em!important;color:var(--sapio-text)!important}
p.copy,.prompt-copy{color:var(--sapio-muted)!important}
.primary-btn,#startBtn,#toPredict,#toReveal,#registerBtn,#nextBtn,#restartBtn,.dur-btn.selected{background:linear-gradient(135deg,var(--sapio-accent),var(--sapio-accent-2))!important;color:#061321!important;border:none!important;box-shadow:0 12px 34px var(--sapio-glow)!important;font-weight:700!important;transition:transform .18s ease,box-shadow .18s ease!important}
.primary-btn:hover,#startBtn:hover,#toPredict:hover,#toReveal:hover,#registerBtn:hover,#nextBtn:hover,#restartBtn:hover{transform:translateY(-2px)!important;box-shadow:0 16px 44px var(--sapio-glow)!important}
.secondary-btn,.dur-btn,.toggle-btn{border-color:var(--sapio-line)!important;background:rgba(255,255,255,.035)!important;color:var(--sapio-text)!important;backdrop-filter:blur(8px)}
.thought-card,.info-panel,.habit-chip{background:rgba(255,255,255,.045)!important;border-color:var(--sapio-line)!important;box-shadow:inset 0 1px rgba(255,255,255,.025)}
.sapio-friend{display:none!important}
.sapio-guide{position:fixed;right:18px;bottom:18px;z-index:1000;display:flex;align-items:flex-end;gap:12px;max-width:min(92vw,430px);font-family:Inter,Helvetica,Arial,sans-serif;filter:drop-shadow(0 16px 28px rgba(0,0,0,.24))}
.sapio-guide__bubble{width:270px;max-width:calc(100vw - 118px);padding:15px 16px 14px;border-radius:22px 22px 6px 22px;background:rgba(246,250,255,.96);color:#0b2340;border:1px solid rgba(255,255,255,.8);box-shadow:0 12px 38px rgba(0,0,0,.18);transform-origin:bottom right;transition:.28s cubic-bezier(.2,.75,.25,1);backdrop-filter:blur(12px)}
.sapio-guide.is-collapsed .sapio-guide__bubble{opacity:0;transform:translateY(10px) scale(.94);pointer-events:none}
.sapio-guide__title{display:block;font-weight:800;font-size:.87rem;margin-bottom:4px;color:#0b2e62}.sapio-guide__text{font-size:.81rem;line-height:1.45;color:#34516f}
.sapio-guide__portrait{width:84px;height:84px;border:none;background:transparent;padding:0;cursor:pointer;position:relative;transition:transform .25s ease}.sapio-guide__portrait:hover{transform:translateY(-3px) rotate(-2deg)}
.sapio-guide__portrait img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 9px 10px rgba(0,0,0,.22));transition:.3s ease}
.sapio-guide[data-mood="breathe"] img{animation:sapioBreathe 4s ease-in-out infinite}.sapio-guide[data-mood="celebrate"] img{animation:sapioCelebrate .65s ease 2}.sapio-guide[data-mood="think"] img{transform:rotate(-4deg)}
@keyframes sapioBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}@keyframes sapioCelebrate{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(5deg)}}
.sapio-guide__dot{position:absolute;right:4px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--sapio-accent-2);box-shadow:0 0 0 4px rgba(255,255,255,.8),0 0 18px var(--sapio-accent-2)}
.sapio-mode-tag{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:900;padding:9px 14px;border-radius:999px;background:rgba(8,20,35,.58);border:1px solid var(--sapio-line);backdrop-filter:blur(14px);font:700 .68rem/1 Inter,Helvetica,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--sapio-muted);pointer-events:none}
.sapio-mode-tag b{color:var(--sapio-accent);font-weight:800}
/* individual themes */
body[data-game="respira"]{--sapio-accent:#78d9c5;--sapio-accent-2:#8fb9ff;--sapio-glow:rgba(120,217,197,.26)}
body[data-game="jardin"]{--sapio-accent:#9bd07f;--sapio-accent-2:#e4c978;--sapio-glow:rgba(155,208,127,.25)}
body[data-game="desarmalo"]{--sapio-accent:#f0c46e;--sapio-accent-2:#86c9bd;--sapio-glow:rgba(240,196,110,.22)}
body[data-game="curva"]{--sapio-accent:#f4a77e;--sapio-accent-2:#77c7c2;--sapio-glow:rgba(244,167,126,.24)}
body[data-game="cuerpo"]{--sapio-accent:#f2a87d;--sapio-accent-2:#8fc8a8;--sapio-glow:rgba(242,168,125,.22)}
body[data-game="sueno"]{--sapio-accent:#92a9ff;--sapio-accent-2:#8ed2d0;--sapio-glow:rgba(146,169,255,.22)}
body[data-game="gravedad"]{--sapio-accent:#c3a7ef;--sapio-accent-2:#8fb9d7;--sapio-glow:rgba(195,167,239,.24)}
body[data-game="sueno"] .sapio-guide__bubble{background:rgba(10,20,38,.88);color:#eef3ff;border-color:rgba(168,185,255,.18)}body[data-game="sueno"] .sapio-guide__title{color:#b9c6ff}body[data-game="sueno"] .sapio-guide__text{color:#bac6db}
@media(max-width:600px){.sapio-guide{right:10px;bottom:10px}.sapio-guide__portrait{width:70px;height:70px}.sapio-guide__bubble{width:235px;padding:13px 14px}.sapio-mode-tag{top:18px;max-width:56vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.screen,.setup{margin:72px 12px 12px!important;padding:22px!important;border-radius:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}