/* TAECHORA WEB v2 · SHATTER — 밤의 유리 정원(빛 코어 = 금빛·청록, 그림자 핵 = 보라).
   공통 틀은 ../shell.css. 여기서는 색 변수와 이 게임의 DOM(HUD·스테이지 고르기·결과)만 정한다. 손으로 쓴 원본. */
:root{
  --void:#05060f;
  --acc:#5ce1ff;--acc2:#b48cff;--accGlow:rgba(92,225,255,.22);
  --panelA:rgba(16,22,48,.95);--panelB:rgba(6,7,18,.97);--chip:rgba(10,14,32,.7);
  --line:rgba(200,230,255,.14);--line2:rgba(200,230,255,.28);
  --logoA:#ffffff;--logoB:#a9f6ff;--logoC:#b48cff;
  --mute:#a9b3cf;--dim:#6f7894;
}
.screen.title{background:linear-gradient(180deg,rgba(5,6,15,.05) 0%,rgba(5,6,15,.15) 30%,rgba(5,6,15,.62) 50%,rgba(5,6,15,.72) 82%,rgba(5,6,15,.5) 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)}
.linkbtn{border:0;background:none;padding:6px 8px;font:600 13px var(--f-ui);color:var(--mute);text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:#fff}

/* HUD: 위 띠(스테이지 · 점수 · 남은 그림자 핵 · 다시 · 일시정지) */
.stg{pointer-events:none;display:flex;flex-direction:column;line-height:1.1;min-width:84px}
.stg b{font-size:22px;color:#fff;letter-spacing:.04em}
.stg span{font:600 12px var(--f-ui);color:var(--mute);white-space:nowrap;max-width:34vw;overflow:hidden;text-overflow:ellipsis}
.hud .score{font-size:30px;color:#fff;text-shadow:0 0 18px rgba(92,225,255,.35)}
.tgt{display:flex;gap:5px;margin-top:5px;min-height:10px}
.tgt i{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#d9b8ff,#6b3fc0 60%,#2a1050);box-shadow:0 0 8px rgba(180,140,255,.7)}
.tgt i.off{background:rgba(255,255,255,.12);box-shadow:none}
.hint{position:absolute;left:12px;right:12px;bottom:calc(18px + env(safe-area-inset-bottom));text-align:center;font:600 13.5px var(--f-ui);color:#e8f6ff;text-shadow:0 2px 10px rgba(0,0,0,.9);opacity:0;transition:opacity .25s}
.hint.on{opacity:1}
.hint b{color:var(--acc)}
.combo{top:calc(78px + env(safe-area-inset-top))}
.banner{top:15%;font-size:clamp(30px,7vw,56px)}

/* 스테이지 고르기 */
.panel-in.wide{width:min(720px,100%)}
.chs{display:flex;flex-direction:column;gap:12px;margin:14px 0 18px;text-align:left}
.ch{padding:12px 12px 10px;border-radius:14px;background:var(--chip);border:1px solid var(--line)}
.ch h3{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 8px;font:700 14px var(--f-ui);color:#fff}
.ch h3 small{font:400 13px var(--f-disp);letter-spacing:.06em;color:var(--gold2)}
.ch .row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.sb{position:relative;height:58px;border-radius:10px;border:1px solid var(--line2);background:rgba(255,255,255,.04);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#fff;padding:0}
.sb b{font:400 17px var(--f-disp);letter-spacing:.04em}
.sb .st3{font-size:11px;letter-spacing:1px;color:var(--gold)}
.sb .st3 .no{color:rgba(255,255,255,.18)}
.sb.boss{border-color:rgba(180,140,255,.6);background:rgba(120,80,200,.14)}
.sb.cur{box-shadow:0 0 0 2px var(--acc)}
.sb[disabled]{opacity:.32;cursor:default}

/* 결과 */
.stars{display:flex;justify-content:center;gap:10px;margin:8px 0 2px;height:44px}
.stars i{width:40px;height:40px;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:rgba(255,255,255,.14);transform:scale(.6);transition:transform .25s cubic-bezier(.2,1.6,.4,1),background .2s}
.stars i.on{background:linear-gradient(160deg,#fff4c2,var(--gold) 55%,#d98a12);transform:scale(1);filter:drop-shadow(0 0 10px rgba(245,185,63,.7))}
.stars.hide{display:none}
.grade{margin:2px 0 0;font:700 14px var(--f-ui);color:var(--acc)}
.grade:empty{display:none}
.over .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
#nextBtn{overflow:hidden}
#nextBtn .auto{position:absolute;left:8%;right:8%;bottom:7px;height:3px;border-radius:2px;background:rgba(7,8,14,.25);transform-origin:left center;transform:scaleX(0)}
@media (max-height:520px){.hint{bottom:auto;top:calc(66px + env(safe-area-inset-top))}}   /* 가로로 눕힌 휴대폰: 안내는 위로(아래는 기다리는 코어) */
@media (max-height:560px){
  .over .panel-in{padding:14px 14px 12px}
  .stars{height:32px;margin:2px 0 0}.stars i{width:30px;height:30px}
  .over .stats{margin:8px 0 6px}
  .st.big{padding:8px}.st.big b{font-size:30px}
  .over .stats{grid-template-columns:repeat(5,minmax(0,1fr))}.over .st.big{grid-column:auto}
  .sb{height:46px}
}