/* ==========================================================================
   네온 드라이브 (neon-drive)
   무대 위 머리 표시: 왼쪽 점수와 오브·아슬아슬, 가운데 남은 시간, 아래 속도와 거리(휴대폰 고정 화면에서는 --xg-bottom-gap 만큼 위로).
   효과 글자: 카운트다운, 알림 띠(부스트·체크포인트·TIME OVER), 한 줄 완주 띠(.nd-line), 떠오르는 판정.
   게임 공통 모양(games.css)을 그대로 쓰고, 이 게임에만 있는 것만 더한다.
   ========================================================================== */

.nd-stage { background: #05080C; }

/* ---------- 머리 표시 ---------- */
.nd-hud {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start;
  height: auto; padding: 16px 16px 0 22px; gap: 12px;
}
.nd-hud .xg-score { text-shadow: 0 1px 14px rgba(0,0,0,.6); transform-origin: 0 50%; }
.nd-hud .xg-score.is-bump { animation: nd-bump 560ms var(--ease-out); }   /* 한 줄 완주 보너스가 더해질 때 */
.nd-hud .xg-right { justify-self: end; margin-left: 0; }
.nd-sub { gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.nd-orbs { display: inline-flex; gap: 4px; align-items: center; height: 14px; }
.nd-orbs i { width: 6px; height: 6px; border-radius: 50%; background: rgba(148,170,197,.24); transition: background var(--d-1), box-shadow var(--d-1); }
.nd-orbs i.is-on { background: var(--ether); box-shadow: 0 0 7px rgba(99,242,210,.75); }
.nd-orbs.is-boost i { background: #fff; box-shadow: 0 0 9px rgba(99,242,210,.95); }
.nd-chain { white-space: nowrap; }
.nd-boost {
  font-size: .78rem; font-weight: 700; line-height: 1.5; color: var(--ether-ink); background: var(--ether);
  padding: 0 8px; border-radius: var(--r-pill); box-shadow: 0 0 14px rgba(99,242,210,.45);
}
/* 자석이 켜진 동안 남은 초 */
.nd-magnet {
  font-family: var(--f-mono); font-size: .78rem; font-weight: 500; line-height: 1.5; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--xync-2); background: var(--xync-dim); border: 1px solid rgba(255,138,102,.45);
  padding: 0 8px; border-radius: var(--r-pill); box-shadow: 0 0 12px rgba(255,138,102,.3);
}

/* ---------- 아이템 칸(한 칸): 방패를 들고 있으면 민트로 켜진다. 받을 때 튀고, 깨질 때 흔들리며 꺼진다 ---------- */
.nd-slot {
  width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center;
  border: 1px dashed rgba(148,170,197,.3); color: rgba(148,170,197,.32); background: rgba(10,14,20,.35);
  transition: color var(--d-3), border-color var(--d-3), background var(--d-3), box-shadow var(--d-3);
}
.nd-slot svg { display: block; }
.nd-slot.is-on {
  border: 1px solid rgba(99,242,210,.75); color: var(--ether); background: rgba(99,242,210,.14);
  box-shadow: 0 0 16px rgba(99,242,210,.45), inset 0 0 10px rgba(99,242,210,.2);
}
.nd-slot.is-gain { animation: nd-slot-gain 700ms var(--ease-out); }
.nd-slot.is-break { animation: nd-slot-break 700ms var(--ease-out); }
@keyframes nd-slot-gain {
  0% { transform: scale(.7); }
  35% { transform: scale(1.3); box-shadow: 0 0 26px rgba(99,242,210,.8); }
  100% { transform: scale(1); }
}
@keyframes nd-slot-break {
  0% { transform: scale(1.15); color: #fff; border-color: #fff; box-shadow: 0 0 24px rgba(255,255,255,.7); }
  20% { transform: translateX(-3px) scale(1.05); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  100% { transform: none; }
}

.nd-clock { display: grid; justify-items: center; gap: 7px; }
.nd-time {
  font-family: var(--f-mono); font-weight: 500; font-size: 2.6rem; line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align: center; color: var(--text);
  text-shadow: 0 2px 18px rgba(0,0,0,.65);
  transition: font-size var(--d-3) var(--ease-out), color var(--d-2);
}
/* 10초 아래: 붉어지고 커진다(심장 박동마다 한 번씩 뛴다), 5초 아래는 더 크게 */
.nd-time.is-low { color: var(--xync); font-size: 3.3rem; text-shadow: 0 0 22px rgba(255,138,102,.4), 0 2px 18px rgba(0,0,0,.65); }
.nd-time.is-low5 { font-size: 3.7rem; }
.nd-time.is-beat { animation: nd-beat 320ms var(--ease-out); }
.nd-time.is-bump { animation: nd-bump 560ms var(--ease-out); }
/* 부딪혀 시간이 깎이면 붉게, 시간이 늘면 초록으로 한 번 번쩍인다 */
.nd-time.is-hit { animation: nd-hit 700ms var(--ease-out); }
.nd-time.is-plus { animation: nd-plus 700ms var(--ease-out); }
@keyframes nd-bump {
  0% { transform: scale(1); }
  30% { transform: scale(1.22); color: var(--ether); }
  100% { transform: scale(1); }
}
@keyframes nd-beat {
  0% { transform: scale(1); }
  30% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes nd-hit {
  0% { color: #FF5A4E; text-shadow: 0 0 26px rgba(255,90,78,.9), 0 2px 18px rgba(0,0,0,.65); transform: scale(1.1) translateY(2px); }
  25% { color: #FF5A4E; transform: scale(1) translateY(0); }
  55% { color: #FF5A4E; text-shadow: 0 0 22px rgba(255,90,78,.6), 0 2px 18px rgba(0,0,0,.65); }
  100% { text-shadow: 0 2px 18px rgba(0,0,0,.65); }
}
@keyframes nd-plus {
  0% { color: #7DF7D2; text-shadow: 0 0 26px rgba(99,242,210,.9), 0 2px 18px rgba(0,0,0,.65); transform: scale(1.14); }
  30% { color: #7DF7D2; transform: scale(1); }
  60% { color: #7DF7D2; }
  100% { text-shadow: 0 2px 18px rgba(0,0,0,.65); }
}
/* 시계 옆의 작은 팝: "-3초" 는 붉게 떨어지고 "+3초" 는 초록으로 떠오른다 */
.nd-cpop {
  position: absolute; z-index: 5; transform: translate(0, -50%); white-space: nowrap;
  font-family: var(--f-mono); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 10px rgba(0,0,0,.7);
}
.nd-cpop.is-hit { color: #FF6A5E; animation: nd-cpop-fall 1000ms var(--ease-out) forwards; }
.nd-cpop.is-plus { color: var(--ether); animation: nd-cpop-rise 1000ms var(--ease-out) forwards; }
@keyframes nd-cpop-fall {
  0% { opacity: 0; transform: translate(0, -80%) scale(.8); }
  15% { opacity: 1; transform: translate(0, -50%) scale(1.1); }
  30% { transform: translate(0, -50%) scale(1); }
  70% { opacity: 1; transform: translate(0, 20%); }
  100% { opacity: 0; transform: translate(0, 60%); }
}
@keyframes nd-cpop-rise {
  0% { opacity: 0; transform: translate(0, -20%) scale(.8); }
  15% { opacity: 1; transform: translate(0, -50%) scale(1.1); }
  30% { transform: translate(0, -50%) scale(1); }
  70% { opacity: 1; transform: translate(0, -110%); }
  100% { opacity: 0; transform: translate(0, -150%); }
}
/* 좁은 화면: 시계 아래 가운데에서, "-3초" 는 아래로 떨어지고 "+3초" 는 제자리에서 살짝 떠오른다 */
.nd-cpop.is-below { transform: translate(-50%, 0); }
.nd-cpop.is-below.is-hit { animation-name: nd-cpop-fall-b; }
.nd-cpop.is-below.is-plus { animation-name: nd-cpop-rise-b; }
@keyframes nd-cpop-fall-b {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(.8); }
  15% { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
  30% { transform: translate(-50%, 0) scale(1); }
  70% { opacity: 1; transform: translate(-50%, 70%); }
  100% { opacity: 0; transform: translate(-50%, 110%); }
}
@keyframes nd-cpop-rise-b {
  0% { opacity: 0; transform: translate(-50%, 40%) scale(.8); }
  15% { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
  30% { transform: translate(-50%, 0) scale(1); }
  70% { opacity: 1; transform: translate(-50%, -30%); }
  100% { opacity: 0; transform: translate(-50%, -60%); }
}
.nd-next { width: 64px; height: 2px; border-radius: 2px; background: rgba(148,170,197,.2); overflow: hidden; }
.nd-next i { display: block; height: 100%; background: linear-gradient(90deg, var(--ether), #fff); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- 아래: 속도와 달린 거리 ----------
   휴대폰 고정 화면에서는 공용 CSS 가 .xg-stage 에 --xg-bottom-gap(호스팅 배지 높이, 52px)을 두므로 그만큼 위로 올린다 */
.nd-dash {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: var(--xg-bottom-gap, 0px);
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 24px 18px; pointer-events: none; opacity: 0; transition: opacity var(--d-3);
}
.xg-stage.is-playing .nd-dash, .xg-stage.is-paused .nd-dash { opacity: 1; }
.nd-dash > div { display: flex; align-items: baseline; gap: 6px; text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.nd-dash b { font-family: var(--f-mono); font-weight: 500; font-size: 2rem; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.nd-dash span { font-size: .82rem; color: var(--text-2); }
.nd-speed b { min-width: 3ch; text-align: right; }

/* ---------- 효과 글자: 카운트다운, 알림 띠, 떠오르는 판정 ---------- */
.nd-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.nd-count {
  position: absolute; left: 50%; top: 22%; transform: translate(-50%, -50%);
  font-family: var(--f-mono); font-weight: 500; font-size: clamp(4.5rem, 11vw, 7.5rem); line-height: 1;
  color: #fff; text-shadow: 0 0 34px rgba(99,242,210,.35), 0 4px 26px rgba(0,0,0,.6); opacity: 0;
}
.nd-count::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 260%; height: 190%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(5,8,12,.5), rgba(5,8,12,0));
}
.nd-count.is-on { animation: nd-count 760ms var(--ease-out) forwards; }
.nd-count.is-go { color: var(--ether); letter-spacing: 0.02em; }
@keyframes nd-count {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  74% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
}

.nd-banner {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  text-align: center; white-space: nowrap; animation: nd-banner 1500ms var(--ease-out) forwards;
}
/* 해나 관문 위에 겹쳐도 읽히도록 뒤에 옅은 어둠을 깐다 */
.nd-banner::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 150%; height: 230%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(5,8,12,.66), rgba(5,8,12,.34) 55%, rgba(5,8,12,0));
}
.nd-banner b {
  display: block; font-weight: 820; font-size: clamp(2rem, 5.2vw, 3.3rem); letter-spacing: .08em; line-height: 1.05;
  background: linear-gradient(90deg, #8AF6DF, #fff 50%, #FFA98C); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px rgba(99,242,210,.35));
}
.nd-banner span { display: block; margin-top: 8px; font-family: var(--f-mono); font-weight: 500; font-size: clamp(1.2rem, 2.6vw, 1.6rem); color: var(--ether); text-shadow: 0 0 16px rgba(99,242,210,.4); }
.nd-banner.is-boost b { font-size: clamp(1.6rem, 3.8vw, 2.3rem); letter-spacing: 0; background: none; color: var(--ether); -webkit-text-fill-color: currentColor; }
.nd-banner.is-over { animation: nd-banner-in 600ms var(--ease-out) forwards; }
.nd-banner.is-over b { background: none; color: var(--xync); -webkit-text-fill-color: currentColor; filter: drop-shadow(0 0 18px rgba(255,138,102,.45)); }
@keyframes nd-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.86); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  24% { transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60%); }
}
@keyframes nd-banner-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.nd-pop { position: absolute; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; animation: nd-pop 900ms var(--ease-out) forwards; }
.nd-pop b { display: block; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; color: #fff; text-shadow: 0 0 14px rgba(255,255,255,.3), 0 2px 10px rgba(0,0,0,.55); }
.nd-pop span { display: block; margin-top: 2px; font-family: var(--f-mono); font-size: .92rem; color: var(--xync-2); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.nd-pop.is-chain b { color: var(--xync-2); }
.nd-pop.is-shield b { color: var(--ether); text-shadow: 0 0 16px rgba(99,242,210,.5), 0 2px 10px rgba(0,0,0,.55); }
.nd-pop.is-shield span { color: var(--text); }
.nd-pop.is-rebound b { color: var(--ether); text-shadow: 0 0 16px rgba(99,242,210,.5), 0 2px 10px rgba(0,0,0,.55); }
.nd-pop.is-rebound span { color: var(--ether); }
@keyframes nd-pop {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.8); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  70% { opacity: 1; transform: translate(-50%, -72%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -92%); }
}
/* ---------- 한 줄 완주 띠: 화면을 가로지르는 어두운 띠 위에 굵은 문구와 보너스, 잇단 완주 꼬리표 ---------- */
.nd-line {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  text-align: center; white-space: nowrap; animation: nd-line 1700ms var(--ease-out) forwards;
  --nd-line-c: 99,242,210; --nd-line-a: #8AF6DF; --nd-line-b: #DFFFF7;
}
.nd-line.is-coral { --nd-line-c: 255,138,102; --nd-line-a: #FFA98C; --nd-line-b: #FFE3D6; }
.nd-line::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 360%; height: 150%; transform: translate(-50%, -50%);
  background:
    linear-gradient(90deg, rgba(var(--nd-line-c), 0) 0%, rgba(var(--nd-line-c), .1) 30%, rgba(var(--nd-line-c), .1) 70%, rgba(var(--nd-line-c), 0) 100%),
    linear-gradient(90deg, rgba(5,8,12,0) 0%, rgba(5,8,12,.68) 22%, rgba(5,8,12,.68) 78%, rgba(5,8,12,0) 100%);
  border-top: 1px solid rgba(var(--nd-line-c), .28); border-bottom: 1px solid rgba(var(--nd-line-c), .28);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.nd-line i {
  display: block; margin-bottom: 6px; font-style: normal; font-weight: 700; font-size: clamp(1rem, 1.8vw, 1.25rem); letter-spacing: .14em;
  color: var(--nd-line-b); text-shadow: 0 0 12px rgba(var(--nd-line-c), .5);
}
.nd-line b {
  display: block; font-weight: 820; font-size: clamp(2.2rem, 5.6vw, 3.6rem); letter-spacing: .06em; line-height: 1.05;
  background: linear-gradient(90deg, var(--nd-line-a), #fff 50%, var(--nd-line-a)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(var(--nd-line-c), .45));
}
.nd-line span {
  display: block; margin-top: 8px; font-family: var(--f-mono); font-weight: 500; font-size: clamp(1.3rem, 2.8vw, 1.8rem); font-variant-numeric: tabular-nums;
  color: var(--nd-line-b); text-shadow: 0 0 16px rgba(var(--nd-line-c), .55);
}
/* 받은 아이템: "방패 획득", "+3초", "자석 6초" */
.nd-line em {
  display: inline-block; margin-top: 10px; padding: 3px 12px; border-radius: var(--r-pill); font-style: normal; font-weight: 700; font-size: clamp(.86rem, 1.5vw, 1rem);
  color: #fff; background: rgba(var(--nd-line-c), .18); border: 1px solid rgba(var(--nd-line-c), .5); text-shadow: 0 0 10px rgba(var(--nd-line-c), .5);
}
@keyframes nd-line {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  22% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, -64%); }
}
/* 완주 띠가 떠 있는 동안 부스트·체크포인트 띠는 그 아래에 */
.nd-banner { transition: top var(--d-2); }
.nd-fx.has-line .nd-banner.is-boost, .nd-fx.has-line .nd-banner.is-cp { top: 66%; }
/* 움직임 줄이기: 제자리에 잠깐 보였다가 사라진다(시간은 스크립트가 잰다) */
.nd-banner.is-static, .nd-pop.is-static, .nd-count.is-static, .nd-line.is-static, .nd-cpop.is-static { animation: none !important; opacity: 1; }

/* ---------- 손가락 안내: 처음 몇 초 동안 화면 양쪽 아래에 ---------- */
.nd-touch {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: calc(17% + var(--xg-bottom-gap, 0px));
  display: flex; justify-content: space-between; padding: 0 16px; pointer-events: none;
  opacity: 0; transition: opacity var(--d-3);
}
.nd-touch.is-on { opacity: 1; }
.nd-touch span {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); background: rgba(7,10,15,.45); color: var(--text-2);
  transition: background var(--d-1), border-color var(--d-1), color var(--d-1);
}
.nd-touch.is-l .l, .nd-touch.is-r .r { background: rgba(99,242,210,.16); border-color: rgba(99,242,210,.55); color: var(--ether); }
.nd-hint { bottom: auto; top: 44%; }


@media (max-aspect-ratio: 4/5) {
  .nd-banner { top: 58%; }
  .nd-line { top: 54%; }
  .nd-fx.has-line .nd-banner.is-boost, .nd-fx.has-line .nd-banner.is-cp { top: 71%; }
}
@media (max-width: 860px) {
  .nd-hud { padding: 12px 12px 0 16px; gap: 8px; }
  .nd-time { font-size: 2.2rem; }
  .nd-time.is-low { font-size: 2.8rem; }
  .nd-time.is-low5 { font-size: 3.1rem; }
  .nd-sub { margin-top: 7px; }
  .nd-dash { padding: 0 16px 14px; }
  .nd-dash b { font-size: 1.6rem; }
  .nd-dash span { font-size: .78rem; }
  .nd-cpop { font-size: 1rem; }
}
@media (max-width: 420px) {
  .nd-orbs { gap: 3px; }
  .nd-orbs i { width: 5px; height: 5px; }
  .nd-time { font-size: 2rem; }
  .nd-time.is-low { font-size: 2.6rem; }
  .nd-time.is-low5 { font-size: 2.9rem; }
  .nd-slot { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  /* 번쩍임 대신 조용한 표시: 색만 바뀌고 크기는 부드럽게 */
  .nd-time.is-bump, .nd-hud .xg-score.is-bump, .nd-time.is-beat, .nd-slot.is-gain, .nd-slot.is-break { animation: none; }
  .nd-time.is-hit { animation: none; color: #FF5A4E; }
  .nd-time.is-plus { animation: none; color: #7DF7D2; }
  .nd-time { transition: color var(--d-3), font-size var(--d-4); }
  .nd-banner { transition: none; }
}