/* TAECHORA WEB v2 · RUNNER — 노을 원근 도로 시안 톤(남보라 하늘·주황 지평선·주황 원근 격자·흰 공).
   공통 틀은 ../shell.css. 여기서는 색 변수와 러너 전용 HUD만 정한다. */
:root{
  --void:#07060e;
  --acc:#ff9a3c;--acc2:#ff5f8a;--accGlow:rgba(255,128,70,.26);
  --panelA:rgba(42,16,56,.94);--panelB:rgba(10,6,18,.96);--chip:rgba(18,10,32,.66);
  --line:rgba(255,212,186,.14);--line2:rgba(255,212,186,.28);
  --logoA:#fff6e0;--logoB:#ffd28a;--logoC:#ff5f8a;
  --mute:#bba6c6;--dim:#7c6a8c;
}
.screen.title{background:linear-gradient(180deg,rgba(7,6,14,.1) 0%,rgba(7,6,14,.18) 36%,rgba(7,6,14,.6) 52%,rgba(7,6,14,.62) 74%,rgba(7,6,14,.35) 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)}
.screen.title .logo{transform:skewX(-10deg)}

/* 다음 구간까지 남은 거리 */
.prog{position:absolute;left:0;right:0;top:0;height:calc(4px + env(safe-area-inset-top));background:rgba(255,255,255,.06)}
.prog i{position:absolute;left:0;bottom:0;height:4px;width:0;background:linear-gradient(90deg,var(--acc2),var(--acc));box-shadow:0 0 12px var(--acc);transition:width .2s linear}

/* 실드 칩: 켜지면 민트로 빛난다. 숫자는 모은 보석 */
.shield{display:flex;align-items:center;gap:6px;height:42px;padding:0 12px 0 9px;border-radius:12px;background:var(--chip);border:1px solid var(--line)}
.shield svg{width:22px;height:22px;fill:none;stroke:var(--dim);stroke-width:2;transition:stroke .2s,filter .2s}
.shield span{font-size:17px;color:var(--gold2);min-width:1.4em}
.shield.on{border-color:rgba(111,240,184,.6);box-shadow:0 0 18px rgba(111,240,184,.25)}
.shield.on svg{stroke:var(--mint);fill:rgba(111,240,184,.22);filter:drop-shadow(0 0 6px rgba(111,240,184,.8))}
.shield.pop{animation:shPop .4s ease-out}
@keyframes shPop{30%{transform:scale(1.18)}}

.dist{font-size:32px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.6);line-height:1}
.dist small{font-size:15px;margin-left:3px;color:var(--mute)}
.score{margin-top:4px;font-size:14px;color:var(--gold2);letter-spacing:.04em}
.zone{position:absolute;left:50%;top:calc(76px + env(safe-area-inset-top));transform:translateX(-50%);font-size:12px;letter-spacing:.3em;color:var(--zc,var(--acc));opacity:.85;text-shadow:0 0 12px var(--zc,var(--acc));transition:color .6s}

/* 처음 만나는 장애물 안내 */
.hint{position:absolute;left:50%;top:calc(146px + env(safe-area-inset-top));transform:translate(-50%,-6px);padding:9px 16px;border-radius:999px;background:rgba(10,6,18,.74);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(--hz,26vh) + 3.2vh)}
.banner small{text-shadow:0 2px 10px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.9)}
.combo b{color:var(--cc)}
@media (min-width:900px){
  .dist{font-size:38px}
  .zone{top:calc(84px + env(safe-area-inset-top))}
  .hint{top:calc(150px + env(safe-area-inset-top))}
}
.gauge.cool{color:#fff;background:radial-gradient(circle at 50% 42%,rgba(90,35,80,.95),rgba(12,6,18,.94) 70%)}
.gauge.cool .val{stroke:var(--acc2)}
@media (max-height:520px){   /* 가로로 눕힌 휴대폰: 안내는 아래쪽 가운데로 */
  .hint{top:auto;bottom:calc(12px + env(safe-area-inset-bottom));transform:translate(-50%,6px)}
  .zone{display:none}
}
.course{margin:2px 0 6px;font:600 13px/1.6 var(--f-ui);color:var(--acc2)}
.course:empty{display:none}