:root{
  --sky:#4aa8ff; --aqua:#3fd4e8; --lime:#8bdc3d; --deep:#0b3a4a; --ink:#06303f; --glass:rgba(255,255,255,.34);
  --edge:rgba(255,255,255,.75); --font:'Nunito','Segoe UI','Trebuchet MS','Helvetica Neue',Arial,sans-serif;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#9fd8ff;font-family:var(--font);color:var(--ink);overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none}
#stage,#game{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none}
.hidden{display:none!important}

.glass{background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.26) 48%,rgba(190,240,255,.30) 100%);
  border:1.5px solid var(--edge);border-radius:22px;box-shadow:0 8px 28px rgba(8,70,110,.28),inset 0 1.5px 0 rgba(255,255,255,.9),inset 0 -10px 18px rgba(80,200,240,.18);
  backdrop-filter:blur(12px) saturate(1.5);-webkit-backdrop-filter:blur(12px) saturate(1.5);color:var(--ink)}
.pill{border-radius:999px;padding:.55rem 1.1rem;font-weight:800;font-size:.98rem}
.round{width:46px;height:46px;border-radius:50%;font-size:1.2rem;cursor:pointer;display:grid;place-items:center;font-family:var(--font);font-weight:900}
.round:active,.gel:active{transform:translateY(1px) scale(.98)}

#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#hud>*{pointer-events:auto}
#objective{position:absolute;left:calc(14px + var(--safe-l));top:calc(14px + var(--safe-t));display:flex;gap:.6rem;align-items:center;max-width:min(520px,62vw);pointer-events:none}
.orb{width:18px;height:18px;border-radius:50%;flex:none;background:radial-gradient(circle at 32% 28%,#fff 0 14%,#b9fff0 26%,#3fd4e8 62%,#1a8fb8 100%);box-shadow:0 0 12px #6ff3ff,inset 0 -3px 5px rgba(0,80,120,.4);animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-2px) scale(1.06)}}
.topr{position:absolute;right:calc(14px + var(--safe-r));top:calc(14px + var(--safe-t));display:flex;gap:10px}
.topr button{border:1.5px solid var(--edge);color:var(--ink)}

#signal{position:absolute;right:calc(18px + var(--safe-r));bottom:calc(158px + var(--safe-b));display:flex;gap:.7rem;align-items:center;padding:.5rem .9rem;font-weight:800;font-size:.85rem;border-radius:999px}
#sigBar{width:140px;height:12px;border-radius:99px;background:rgba(6,48,63,.22);overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,40,60,.35)}
#sigFill{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#ffe86b,#8bdc3d 60%,#3fd4e8);box-shadow:0 0 10px #9ff}

#dials{position:absolute;right:calc(14px + var(--safe-r));bottom:calc(14px + var(--safe-b));display:flex;gap:14px}
.dial{display:flex;flex-direction:column;align-items:center;gap:2px;width:104px;padding:10px 6px 8px;border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.22) 55%,rgba(170,235,255,.3));border:1.5px solid var(--edge);
  box-shadow:0 8px 24px rgba(8,70,110,.3),inset 0 1.5px 0 #fff;backdrop-filter:blur(12px) saturate(1.5);-webkit-backdrop-filter:blur(12px) saturate(1.5);transition:filter .4s,opacity .4s}
.dial b{font-size:.92rem;font-weight:900;letter-spacing:.01em}
.dial span{font-size:.74rem;font-weight:700;opacity:.8;min-height:1.1em;text-align:center;line-height:1.1}
.knob{position:relative;width:70px;height:70px;border-radius:50%;cursor:grab;touch-action:none;
  background:radial-gradient(circle at 50% 38%,#f7fdff 0 30%,#bfeaff 62%,#6cc3ea 100%);
  box-shadow:0 5px 10px rgba(0,60,100,.35),inset 0 -6px 10px rgba(30,130,190,.35),inset 0 3px 4px #fff,0 0 0 4px rgba(255,255,255,.55),0 0 0 5px rgba(80,190,230,.5)}
.knob:active{cursor:grabbing}
.knob .needle{position:absolute;left:50%;top:7px;width:6px;height:24px;margin-left:-3px;border-radius:4px;background:linear-gradient(#ff6b9a,#ff3b72);box-shadow:0 0 8px rgba(255,80,140,.7)}
.knob .gloss{position:absolute;left:12%;top:5%;width:76%;height:46%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0));pointer-events:none}
.dial.locked{filter:grayscale(.85) brightness(.9);opacity:.72}
#dials.locked-sky #dialSky,#dials.locked-layer #dialLayer{filter:grayscale(.85) brightness(.9);opacity:.72}
.dial.shake{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

#prompt{position:absolute;left:50%;bottom:calc(86px + var(--safe-b));transform:translateX(-50%);display:flex;gap:.7rem;align-items:center;cursor:pointer;font-family:var(--font);color:var(--ink);border:1.5px solid var(--edge)}
#prompt kbd{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:9px;font:900 .9rem var(--font);color:#fff;background:linear-gradient(#a6ec5d,#4fb819);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 2px 4px rgba(0,60,0,.35)}
#say{position:absolute;left:50%;bottom:calc(28px + var(--safe-b));transform:translateX(-50%);width:min(640px,calc(100vw - 32px));padding:1rem 1.3rem 1.1rem;cursor:pointer}
#say b{display:block;font-size:.95rem;font-weight:900;margin-bottom:.15rem}
#say p{margin:0;font-size:1.12rem;font-weight:600;line-height:1.4;min-height:2.8em}
#say small{display:block;text-align:right;opacity:.6;font-weight:700;font-size:.75rem}
#toast{position:absolute;left:50%;top:calc(74px + var(--safe-t));transform:translate(-50%,-14px);opacity:0;padding:.55rem 1.2rem;border-radius:999px;font-weight:800;pointer-events:none;transition:opacity .45s,transform .45s;white-space:nowrap}
#toast.on{opacity:1;transform:translate(-50%,0)}
#keys{position:absolute;left:calc(14px + var(--safe-l));bottom:calc(14px + var(--safe-b));margin:0;font-size:.78rem;font-weight:800;color:#fff;text-shadow:0 1px 6px rgba(0,50,80,.7);pointer-events:none}

#joy{position:absolute;left:calc(26px + var(--safe-l));bottom:calc(38px + var(--safe-b));width:128px;height:128px;border-radius:50%;display:none;
  background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,.34));border:2px solid rgba(255,255,255,.7);backdrop-filter:blur(6px)}
#joy #knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#fff,#bfeaff 60%,#6cc3ea);box-shadow:0 3px 8px rgba(0,60,100,.4)}
#touchBtns{position:absolute;right:calc(14px + var(--safe-r));bottom:calc(168px + var(--safe-b));display:none;flex-direction:column;gap:10px;align-items:flex-end}
#touchBtns button{width:64px;height:64px;border-radius:50%;border:2px solid #fff;font:900 .95rem var(--font);color:#fff;background:linear-gradient(#a6ec5d,#4fb819);box-shadow:0 4px 10px rgba(0,60,0,.35),inset 0 2px 0 rgba(255,255,255,.6)}
#touchBtns button.on{filter:brightness(1.2) saturate(1.3)}
.touch #joy{display:block}.touch #touchBtns{display:flex}.touch #keys{display:none}
.touch #dials{bottom:calc(14px + var(--safe-b))}
@media (max-width:640px){
  .dial{width:84px;padding:8px 4px 6px;border-radius:22px}.knob{width:56px;height:56px}.knob .needle{top:6px;height:19px}
  #say p{font-size:1rem}#objective{max-width:58vw;font-size:.85rem}#signal{bottom:calc(138px + var(--safe-b))}
}
@media (max-height:520px) and (orientation:landscape){#say{bottom:calc(10px + var(--safe-b))}#prompt{bottom:calc(64px + var(--safe-b))}}

.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px}
#menu{background:rgba(120,200,240,.32);backdrop-filter:blur(6px)}
.card{padding:1.6rem 1.8rem;width:min(430px,100%);display:grid;gap:.9rem}
.card h2{margin:0;font-size:1.7rem;font-weight:900}
.row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.small{margin:0;font-size:.82rem;font-weight:700;opacity:.75;line-height:1.5}
.gel{font:800 1rem var(--font);color:var(--ink);cursor:pointer;padding:.7rem 1rem;border-radius:999px;border:1.5px solid #fff;
  background:linear-gradient(180deg,#fff 0%,#d8f6ff 45%,#8fdcf5 52%,#c4f1ff 100%);box-shadow:0 5px 14px rgba(0,80,120,.28),inset 0 2px 0 #fff}
.gel.lime{background:linear-gradient(180deg,#eaffc9 0%,#b6f36a 45%,#6fcf24 52%,#a8ec55 100%);color:#103a05}
.gel.big{font-size:1.4rem;padding:.9rem 3.4rem;margin-top:.4rem}
.gel:focus-visible,.round:focus-visible,.knob:focus-visible,#prompt:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px rgba(20,120,200,.6)}

#boot{background:radial-gradient(120% 90% at 50% 105%,#c7ffe5 0%,rgba(199,255,229,0) 55%),linear-gradient(180deg,#1f7ce8 0%,#58b9ff 45%,#c9f0ff 100%);overflow:hidden}
.boot-card{position:relative;text-align:center;display:grid;gap:.6rem;justify-items:center}
.boot-card h1{margin:0;font-size:clamp(3rem,11vw,6.4rem);font-weight:900;letter-spacing:-.02em;line-height:1;color:#fff;
  text-shadow:0 2px 0 #7fd3f5,0 6px 0 #3aa7d6,0 14px 30px rgba(0,60,120,.45),0 0 40px rgba(180,255,255,.7);-webkit-text-stroke:2px rgba(255,255,255,.55)}
.boot-card .sub{margin:0 0 .6rem;font-size:1.05rem;font-weight:800;color:#0a4b66;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.boot-card .small{color:#0a4b66}
.bubbles{position:absolute;inset:0;pointer-events:none;background:
 radial-gradient(circle at 18% 78%,rgba(255,255,255,.55) 0 2.2%,rgba(255,255,255,.1) 2.4% 3.2%,transparent 3.4%),
 radial-gradient(circle at 80% 66%,rgba(255,255,255,.5) 0 3.4%,rgba(255,255,255,.1) 3.6% 4.6%,transparent 4.8%),
 radial-gradient(circle at 62% 24%,rgba(255,255,255,.45) 0 1.6%,rgba(255,255,255,.1) 1.8% 2.4%,transparent 2.6%),
 radial-gradient(circle at 30% 30%,rgba(255,255,255,.4) 0 1.1%,transparent 1.3%),
 radial-gradient(circle at 90% 18%,rgba(255,255,255,.4) 0 2.4%,rgba(255,255,255,.08) 2.6% 3.4%,transparent 3.6%);animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateY(-3%) scale(1.03)}}

#flash{position:fixed;inset:0;z-index:15;background:#fff;opacity:0;pointer-events:none}
#flare{position:fixed;left:0;top:0;width:340px;height:340px;margin:-170px;z-index:4;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,255,255,.85) 0 3%,rgba(255,244,200,.35) 8%,transparent 28%),
  radial-gradient(circle at 78% 62%,rgba(120,255,230,.25) 0 5%,transparent 6%),radial-gradient(circle at 24% 38%,rgba(255,160,230,.22) 0 7%,transparent 8%)}
#loading{position:fixed;inset:0;z-index:25;display:grid;place-items:center;background:linear-gradient(180deg,#58b9ff,#c9f0ff);font-weight:900;font-size:1.4rem;color:#fff;text-shadow:0 2px 12px rgba(0,80,140,.5)}
body.photo #hud>*:not(#toast){display:none!important}
@media (prefers-reduced-motion:reduce){.orb,.bubbles{animation:none}}

body.talking #dials,body.talking #signal{opacity:0;pointer-events:none;transition:opacity .3s}
#dials{transition:opacity .3s}