/* TAECHORA WEB v2 · MERGE — 사탕 구슬 병 시안 톤(짙은 초록 밤·민트 빛·연한 민트 병 테두리·사탕 구슬).
   공통 틀은 ../shell.css. 여기서는 색 변수와 머지 전용 HUD만 정한다. */
:root{
  --void:#05060b;
  --acc:#3ddc97;--acc2:#48e0c8;--accGlow:rgba(61,220,151,.24);
  --panelA:rgba(10,44,34,.94);--panelB:rgba(5,10,12,.96);--chip:rgba(6,26,22,.7);
  --line:rgba(223,248,238,.14);--line2:rgba(223,248,238,.28);
  --logoA:#ffffff;--logoB:#dff8ee;--logoC:#3ddc97;
  --mute:#9fc4b6;--dim:#5f8577;
}
.screen.title{background:linear-gradient(180deg,rgba(5,6,11,.12) 0%,rgba(5,6,11,.2) 34%,rgba(5,6,11,.62) 50%,rgba(5,6,11,.66) 76%,rgba(5,6,11,.4) 100%)}
.screen.title .ko,.screen.title .tag,.screen.title .keys{text-shadow:0 1px 10px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.9)}

/* 다음 구슬 */
.next{display:flex;align-items:center;gap:6px;height:46px;padding:0 10px 0 12px;border-radius:12px;background:var(--chip);border:1px solid var(--line)}
.next small{font-size:11px;color:var(--mute);letter-spacing:.1em}
.next canvas{width:38px;height:38px}

.score{font-size:34px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.6);line-height:1}
.score.pop{animation:scorePop .22s ease-out}
@keyframes scorePop{from{transform:scale(1.18)}}
.best{margin-top:5px;font-size:12px;color:var(--mute);letter-spacing:.08em}
.best i{font-style:normal;color:var(--gold2)}

.hint{position:absolute;left:50%;top:calc(76px + env(safe-area-inset-top));transform:translate(-50%,-6px);padding:9px 16px;border-radius:999px;background:rgba(5,16,14,.78);border:1px solid var(--line2);font:700 14px/1.3 var(--f-ui);color:#fff;opacity:0;transition:opacity .2s,transform .2s;white-space:nowrap}
.hint.on{opacity:1;transform:translate(-50%,0)}
.hint b{color:var(--gold2);font-weight:700}
.banner{top:calc(var(--bannerY,34vh));font-size:clamp(30px,8vw,56px)}
.banner small{text-shadow:0 2px 10px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.9)}

.gauge .val{stroke:var(--acc)}
.gauge.ready{color:var(--ink);background:radial-gradient(circle at 50% 42%,#f4fffb,#9ff5d2 55%,#3ddc97);animation:gaugeReady 1s ease-in-out infinite;box-shadow:0 0 0 4px rgba(61,220,151,.35),0 0 40px rgba(61,220,151,.6)}
.gauge.armed{color:#fff;background:conic-gradient(from 0deg,#ff9ecb,#ffd166,#3ddc97,#5cc6ff,#b08cff,#ff9ecb);box-shadow:0 0 0 3px rgba(255,255,255,.5),0 0 34px rgba(255,255,255,.45)}
.gauge.armed span,.gauge.armed small{text-shadow:0 1px 6px rgba(0,0,0,.6)}
@media (min-width:900px){
  .score{font-size:40px}
}
@media (max-height:520px){
  .banner{font-size:34px}
  .hint{top:auto;bottom:calc(12px + env(safe-area-inset-bottom));transform:translate(-50%,6px)}
}