/* TAECHORA WEB v2 · INWARD — 동심원 시안 톤(짙은 보라 밤 · 라벤더/보랏빛 고리 · 흰 공과 꼬리 · 흰 코어).
   공통 틀은 ../shell.css. 여기서는 색 변수와 인워드 전용 HUD만 정한다. */
:root{
  --void:#05060b;
  --acc:#9a7bff;--acc2:#d9ccff;--accGlow:rgba(154,123,255,.26);
  --panelA:rgba(30,16,66,.95);--panelB:rgba(8,5,18,.97);--chip:rgba(20,10,44,.7);
  --line:rgba(226,214,255,.14);--line2:rgba(226,214,255,.28);
  --logoA:#ffffff;--logoB:#e6dcff;--logoC:#9a7bff;
  --mute:#b3a6d6;--dim:#76689c;
}
.screen.title{background:linear-gradient(180deg,rgba(5,6,11,.08) 0%,rgba(5,6,11,.16) 30%,rgba(5,6,11,.6) 48%,rgba(5,6,11,.66) 76%,rgba(5,6,11,.42) 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)}

/* 코어 칩: 친 횟수 + 점수 배율(코어마다 +1, 최대 ×10) */
.cchip{display:flex;align-items:center;gap:7px;height:50px;padding:0 12px;border-radius:12px;background:var(--chip);border:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
.cchip small{font-size:11px;color:var(--mute);letter-spacing:.1em}
.cchip b{font-size:26px;line-height:1;color:#fff}
.cchip em{font-style:normal;font-size:15px;line-height:1;padding:4px 7px 3px;border-radius:8px;background:rgba(154,123,255,.22);color:var(--acc2)}
.cchip.hot{border-color:var(--acc);box-shadow:0 0 0 2px rgba(154,123,255,.25),0 0 22px rgba(154,123,255,.35)}
.cchip.hot em{background:var(--acc);color:#fff}
.cchip.pop b,.cchip.pop em{animation:cPop .32s cubic-bezier(.2,1.6,.4,1)}
@keyframes cPop{from{transform:scale(1.6);color:#fff}}
.slab{font-size:10px;letter-spacing:.24em;color:var(--mute);margin-bottom:3px}
.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.15)}}
.bline{margin-top:5px;font-size:12px;color:var(--mute);letter-spacing:.08em;white-space:nowrap}
.bline.near{color:var(--acc2)}
.bline.new{color:var(--gold2);text-shadow:0 0 12px rgba(255,220,143,.55)}
.zone{position:absolute;left:50%;top:calc(96px + env(safe-area-inset-top));transform:translateX(-50%);font-size:12px;letter-spacing:.3em;color:var(--acc2);opacity:.75;text-shadow:0 0 12px var(--accGlow)}
.gap{margin:2px 0 0;font:700 14px var(--f-ui);color:var(--acc2)}
.gap:empty{display:none}
.hint{position:absolute;left:50%;bottom:calc(132px + env(safe-area-inset-bottom));transform:translate(-50%,6px);max-width:calc(100vw - 28px);padding:9px 16px;border-radius:999px;background:rgba(14,7,32,.84);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;text-align:center;pointer-events:none}
.hint.on{opacity:1;transform:translate(-50%,0)}
.hint b{color:var(--gold2);font-weight:700}
.banner{top:calc(var(--bannerY,26vh))}
.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%,#ffffff,#e2d8ff 50%,#9a7bff);animation:gaugeReadyV 1s ease-in-out infinite;box-shadow:0 0 0 4px rgba(154,123,255,.35),0 0 40px rgba(154,123,255,.6)}
.gauge.ready small{color:rgba(7,8,14,.6)}
@keyframes gaugeReadyV{50%{box-shadow:0 0 0 10px rgba(154,123,255,.12),0 0 60px rgba(217,204,255,.85)}}
.gauge.busy{opacity:.5}
@media (min-width:900px){
  .score{font-size:40px}
  .zone{top:calc(104px + env(safe-area-inset-top))}
}
@media (max-width:360px){.cchip{padding:0 9px;gap:5px}.cchip b{font-size:22px}.cchip em{font-size:13px}}
@media (max-height:520px){
  .zone{display:none}
  .banner{font-size:34px}
  .hint{bottom:calc(12px + env(safe-area-inset-bottom))}
}