/* ===============================================================
   The Nickel Tour — Mustang Walkaround
   Tokens borrowed from Dynasty Plays front door for seamless feel.
   =============================================================== */

:root {
  /* --- Palette (matches live dynasty-stadium.netlify.app) --- */
  --bg:          #0B0D13;
  --bg-2:        #10131c;
  --text:        #F2EDE2;
  --text-muted:  #8A867D;
  --text-faint:  #2C2A26;
  --gold:        #C49A2A;
  --gold-bright: #E8B93E;
  --gold-dark:   #8A6818;
  --gold-hi:     rgba(196,154,42,0.10);
  --gold-glow:   rgba(196,154,42,0.22);
  --gold-border: rgba(196,154,42,0.30);
  --teal:        #00C896;
  --teal-dark:   #009970;
  --teal-hi:     rgba(0,200,150,0.10);
  --teal-glow:   rgba(0,200,150,0.24);
  --teal-border: rgba(0,200,150,0.30);

  /* --- Fonts --- */
  --font-d: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-b: 'Barlow', 'Inter', system-ui, sans-serif;

  /* --- Type --- */
  --text-xs:   clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
  --text-sm:   clamp(0.88rem, 0.82rem + 0.3vw, 1rem);
  --text-base: clamp(1rem,    0.96rem + 0.25vw, 1.12rem);
  --text-lg:   clamp(1.15rem, 1.05rem + 0.6vw,  1.45rem);
  --text-xl:   clamp(1.5rem,  1.2rem  + 1.3vw,  2.2rem);
  --text-2xl:  clamp(2rem,    1.2rem  + 2.8vw,  3.6rem);
  --text-3xl:  clamp(2.8rem,  1.5rem  + 4.5vw,  5.5rem);
  --text-hero: clamp(3.2rem,  1rem    + 7.2vw,  8rem);

  /* --- Rhythm --- */
  --ease-glide: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Reset & base ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Disable page scroll while overlay is up */
body.nt-locked { overflow: hidden; }

a { color: inherit; }
em { font-style: italic; color: var(--gold-bright); font-weight: inherit; }

/* =============================================================
   HEADER
   ============================================================= */
.nt-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: linear-gradient(to bottom, rgba(11,13,19,0.85) 0%, rgba(11,13,19,0.0) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none; /* only inner chrome captures */
}
.nt-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: auto;
}
.nt-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-d);
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
  text-transform: uppercase;
}
.nt-logo em {
  color: var(--gold);
  font-style: normal;
  font-weight: 800;
}
.nt-nav {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.nt-mute, .nt-exit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-d);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.25s var(--ease-out), background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.nt-mute { border-color: transparent; width: 40px; height: 40px; padding: 0; }
.nt-mute:hover, .nt-exit:hover { color: var(--gold); border-color: var(--gold-border); background: var(--gold-hi); }
.nt-mute-off { display: none; }
body.nt-muted .nt-mute-on  { display: none; }
body.nt-muted .nt-mute-off { display: block; }

/* --- Progress rail --- */
.nt-progress {
  position: relative;
  height: 2px;
  margin: 0 24px;
  background: var(--text-faint);
  border-radius: 2px;
  max-width: calc(1400px - 48px);
  margin: 0 auto;
  pointer-events: auto;
}
.nt-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-bright), var(--gold));
  border-radius: inherit;
  transition: width 0.9s var(--ease-glide);
  box-shadow: 0 0 12px var(--gold-glow);
}

/* =============================================================
   OVERLAY (autoplay gesture)
   ============================================================= */
.nt-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background:
    radial-gradient(80% 60% at 50% 50%, rgba(11,13,19,0.0) 0%, rgba(11,13,19,0.92) 70%),
    linear-gradient(180deg, #07080c 0%, #0B0D13 100%);
  opacity: 1;
  transition: opacity 0.6s var(--ease-glide), visibility 0.6s var(--ease-glide);
}
.nt-overlay[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.nt-overlay-card {
  max-width: 560px;
  padding: 48px 32px;
  text-align: center;
}
.nt-overlay-eyebrow {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 20px;
}
.nt-overlay-title {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--text);
  text-transform: uppercase;
}
.nt-overlay-title em {
  color: var(--gold-bright);
  font-style: italic;
  font-weight: 800;
}
.nt-overlay-sub {
  color: var(--text-muted);
  font-size: var(--text-lg);
  margin: 0 0 28px;
}
.nt-overlay-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.nt-overlay-note {
  margin-top: 22px;
  color: var(--text-muted);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
}
.nt-overlay-dot { color: var(--gold); padding: 0 6px; }

/* =============================================================
   BUTTONS
   ============================================================= */
.nt-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #062019;
  background: linear-gradient(180deg, var(--teal) 0%, var(--teal-dark) 100%);
  border: 1px solid var(--teal);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s var(--ease-out), box-shadow 0.25s var(--ease-out), filter 0.25s var(--ease-out);
  box-shadow: 0 0 0 rgba(0,200,150,0);
}
.nt-btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 10px 32px var(--teal-glow);
}
.nt-btn-primary .nt-btn-arrow {
  display: inline-block;
  transform: translateX(0);
  transition: transform 0.25s var(--ease-out);
}
.nt-btn-primary:hover .nt-btn-arrow { transform: translateX(4px); }
.nt-btn-lg { padding: 18px 32px; font-size: 1.05rem; }

.nt-btn-ghost {
  padding: 14px 22px;
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.nt-btn-ghost:hover {
  color: var(--gold-bright);
  border-color: var(--gold-border);
  background: var(--gold-hi);
}

/* =============================================================
   SCENES — scroll snap, full viewport
   ============================================================= */
.nt-scenes {
  scroll-snap-type: y mandatory;
  overflow-y: auto;
  height: 100vh;
  scroll-behavior: smooth;
}
.nt-scene {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.nt-stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 96px 24px 72px;
}
.nt-stage-inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
  width: 100%;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease-glide) 0.15s, transform 1s var(--ease-glide) 0.15s;
}
.nt-scene.is-active .nt-stage-inner {
  opacity: 1;
  transform: translateY(0);
}

/* --- Shared text --- */
.nt-eyebrow {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 24px;
}
.nt-eyebrow-dot { color: var(--text-muted); padding: 0 8px; }
.nt-title {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: var(--text-hero);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0 0 24px;
  text-transform: uppercase;
  color: var(--text);
}
.nt-title em {
  color: var(--gold-bright);
  font-style: italic;
  font-weight: 800;
}
.nt-sub {
  font-family: var(--font-b);
  font-weight: 400;
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  color: var(--text-muted);
  margin: 0 0 40px;
  letter-spacing: 0.005em;
}
.nt-sub-mute { color: var(--text-faint); }
.nt-whisper {
  font-family: var(--font-b);
  font-size: var(--text-base);
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin: 28px 0 40px;
  line-height: 1.7;
}
.nt-whisper strong { color: var(--gold); font-weight: 600; }

/* --- Advance button (kept understated; silent signal) --- */
.nt-advance {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--gold-border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), background 0.3s var(--ease-out), transform 0.2s var(--ease-out);
  margin-top: 12px;
}
.nt-advance:hover {
  color: var(--gold-bright);
  border-color: var(--gold);
  background: var(--gold-hi);
  transform: translateY(-1px);
}
.nt-advance svg {
  display: inline-block;
  transform: translateY(1px);
  transition: transform 0.25s var(--ease-out);
}
.nt-advance:hover svg { transform: translate(0, 4px); }

/* =============================================================
   SCENE 1 — APPROACH
   ============================================================= */
.nt-bg-approach {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 70%, rgba(196,154,42,0.12) 0%, transparent 70%),
    linear-gradient(180deg, #06070b 0%, #0B0D13 100%);
}
.nt-horizon {
  position: absolute;
  left: 0; right: 0; bottom: 32vh;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-dark) 20%, var(--gold) 50%, var(--gold-dark) 80%, transparent 100%);
  box-shadow: 0 0 40px var(--gold-glow);
  opacity: 0.55;
}
.nt-silhouette {
  position: absolute;
  left: 50%; bottom: 32vh;
  transform: translateX(-50%);
  width: min(1100px, 92vw);
  height: 180px;
  background:
    radial-gradient(ellipse 50% 100% at 50% 100%, rgba(196,154,42,0.26) 0%, transparent 70%),
    linear-gradient(180deg, rgba(196,154,42,0.14) 0%, rgba(11,13,19,0.5) 30%, rgba(11,13,19,0.98) 100%);
  clip-path: polygon(
    0% 100%, 0% 40%, 8% 35%, 14% 38%, 18% 24%, 26% 22%, 32% 28%,
    38% 18%, 48% 14%, 52% 14%, 62% 18%, 68% 28%, 74% 22%, 82% 24%,
    86% 38%, 92% 35%, 100% 40%, 100% 100%
  );
  opacity: 1;
}
.nt-stars {
  position: absolute;
  inset: 0 0 40vh 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(242,237,226,0.9), transparent 50%),
    radial-gradient(1px 1px at 28% 18%, rgba(242,237,226,0.7), transparent 50%),
    radial-gradient(1.5px 1.5px at 42% 26%, rgba(242,237,226,0.95), transparent 50%),
    radial-gradient(1px 1px at 58% 14%, rgba(242,237,226,0.6), transparent 50%),
    radial-gradient(1.5px 1.5px at 71% 28%, rgba(242,237,226,0.8), transparent 50%),
    radial-gradient(1px 1px at 85% 19%, rgba(242,237,226,0.9), transparent 50%),
    radial-gradient(1px 1px at 92% 30%, rgba(242,237,226,0.55), transparent 50%),
    radial-gradient(1px 1px at 20% 10%, rgba(242,237,226,0.75), transparent 50%),
    radial-gradient(1.5px 1.5px at 65% 7%, rgba(242,237,226,0.85), transparent 50%),
    radial-gradient(1px 1px at 35% 40%, rgba(242,237,226,0.45), transparent 50%);
  animation: nt-twinkle 6s ease-in-out infinite alternate;
  opacity: 1;
}
@keyframes nt-twinkle {
  0%   { opacity: 0.45; }
  50%  { opacity: 0.75; }
  100% { opacity: 0.55; }
}

/* --- Hold ticks --- */
.nt-hold {
  display: flex;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin: 24px 0 36px;
}
.nt-hold-tick {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.2;
  animation: nt-pulse 1.8s var(--ease-glide) infinite;
}
.nt-hold-tick:nth-child(2) { animation-delay: 0.25s; }
.nt-hold-tick:nth-child(3) { animation-delay: 0.5s; }
@keyframes nt-pulse {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.4); box-shadow: 0 0 14px var(--gold-glow); }
}

/* =============================================================
   SCENE 2 — THE GATE
   ============================================================= */
.nt-bg-gate {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(196,154,42,0.10) 0%, transparent 70%),
    linear-gradient(180deg, #08090e 0%, #0B0D13 100%);
}
.nt-gate-frame {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 80vw);
  height: min(620px, 72vh);
  pointer-events: none;
}
.nt-gate-post {
  position: absolute;
  top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, transparent 0%, var(--gold) 15%, var(--gold) 85%, transparent 100%);
  box-shadow: 0 0 18px var(--gold-glow);
  opacity: 0.55;
}
.nt-gate-post-l { left: 0; }
.nt-gate-post-r { right: 0; }
.nt-gate-arch {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 15%, var(--gold) 85%, transparent 100%);
  box-shadow: 0 0 18px var(--gold-glow);
  opacity: 0.55;
}
.nt-gate-lights {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  z-index: 2;
}
.nt-gate-light {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.12;
  transform: scale(1);
  animation: nt-light-on 2.8s var(--ease-glide) var(--d, 0s) infinite;
}
@keyframes nt-light-on {
  0%, 10%  { opacity: 0.12; box-shadow: none; transform: scale(1); }
  20%, 70% { opacity: 1; box-shadow: 0 0 18px var(--gold-glow), 0 0 6px var(--gold); transform: scale(1.15); }
  100%     { opacity: 0.12; box-shadow: none; transform: scale(1); }
}

/* --- Five-question list (pure visual anchors) --- */
.nt-gate-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
}
.nt-gate-list li {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 18px;
  border: 1px solid var(--gold-border);
  border-radius: 999px;
  background: var(--gold-hi);
}

/* =============================================================
   SCENE 3 — THE LOBBY
   ============================================================= */
.nt-bg-lobby {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 30% at 50% 100%, rgba(196,154,42,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 50%, rgba(196,154,42,0.06) 0%, transparent 70%),
    linear-gradient(180deg, #0a0c12 0%, #0B0D13 60%, #0e1118 100%);
}
.nt-lobby-wash {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 60%; height: 45%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(196,154,42,0.07) 60%, rgba(196,154,42,0.14) 100%);
  filter: blur(24px);
}
.nt-lobby-vanish {
  position: absolute;
  left: 50%; bottom: 15%;
  transform: translateX(-50%);
  width: 2px; height: 40%;
  background: linear-gradient(180deg, transparent 0%, var(--gold) 100%);
  opacity: 0.35;
  box-shadow: 0 0 24px var(--gold-glow);
}

/* --- 8 door grid (4 + 4 dimmed) --- */
.nt-lobby-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: 640px;
  width: 100%;
  margin: 12px auto 28px;
}
.nt-door {
  padding: 18px 8px;
  font-family: var(--font-d);
  font-weight: 800;
  font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  letter-spacing: 0.06em;
  color: var(--gold);
  background: var(--gold-hi);
  border: 1px solid var(--gold-border);
  border-radius: 4px;
  text-align: center;
  opacity: 0;
  animation: nt-door-in 0.9s var(--ease-glide) var(--d, 0s) forwards;
}
.nt-scene.is-active .nt-door { animation-play-state: running; }
.nt-door-dim {
  color: var(--text-faint);
  background: transparent;
  border-color: var(--text-faint);
}
@keyframes nt-door-in {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* Dim doors: always animate in once scene loads so they never get stuck invisible */
.nt-door-dim {
  animation-name: nt-door-in-dim;
}
@keyframes nt-door-in-dim {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0.55; transform: translateY(0); }
}

/* =============================================================
   SCENE 4 — THE ROOMS
   ============================================================= */
.nt-bg-rooms {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 60% at 85% 50%, rgba(196,154,42,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 15% 50%, rgba(0,200,150,0.06) 0%, transparent 70%),
    linear-gradient(180deg, #0a0c12 0%, #0B0D13 100%);
}
/* Scene 4 title must shrink — four-room list + whisper + CTA need to fit */
.nt-scene-rooms .nt-title {
  font-size: clamp(2.2rem, 1.1rem + 3.6vw, 4rem);
  margin: 0 0 14px;
}
.nt-scene-rooms .nt-eyebrow { margin: 0 0 14px; }
.nt-scene-rooms .nt-whisper { margin: 14px 0 20px; }
.nt-rooms-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-width: 640px;
  margin: 6px auto 8px;
}
.nt-room {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 10px 20px;
  text-align: left;
  background: rgba(255,255,255,0.015);
  border: 1px solid var(--gold-border);
  border-radius: 6px;
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.25s var(--ease-out);
}
.nt-room:hover {
  background: var(--gold-hi);
  border-color: var(--gold);
  transform: translateX(2px);
}
.nt-room-num {
  font-family: var(--font-d);
  font-weight: 900;
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  min-width: 72px;
}
.nt-room-name {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.nt-room-tag {
  font-family: var(--font-b);
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}
.nt-room-hero {
  background: linear-gradient(90deg, var(--gold-hi), transparent 70%);
  border-color: var(--gold);
}
.nt-room-hero .nt-room-num {
  color: var(--gold-bright);
  text-shadow: 0 0 14px var(--gold-glow);
}

/* =============================================================
   SCENE 5 — THE SCOREBOARD
   ============================================================= */
.nt-bg-scoreboard {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, rgba(196,154,42,0.18) 0%, transparent 70%),
    linear-gradient(180deg, #07080c 0%, #0B0D13 80%);
}
.nt-sb-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 90vw);
  height: 50vh;
  background: radial-gradient(ellipse at center, rgba(196,154,42,0.20) 0%, transparent 60%);
  filter: blur(40px);
  animation: nt-sb-flicker 4s var(--ease-glide) infinite;
}
@keyframes nt-sb-flicker {
  0%, 100% { opacity: 0.85; }
  48%      { opacity: 0.92; }
  50%      { opacity: 0.65; }
  52%      { opacity: 0.90; }
}

.nt-scoreboard {
  max-width: 720px;
  margin: 8px auto 24px;
  padding: 20px 24px;
  background: rgba(7,8,12,0.7);
  border: 1px solid var(--gold-border);
  border-radius: 8px;
  box-shadow: 0 0 64px var(--gold-glow), inset 0 0 0 1px rgba(196,154,42,0.08);
}
.nt-sb-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--text-faint);
}
.nt-sb-row:last-child { border-bottom: none; }
.nt-sb-label {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.nt-sb-digits {
  font-family: var(--font-d);
  font-weight: 900;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  letter-spacing: 0.08em;
  color: var(--gold-bright);
  text-shadow: 0 0 20px var(--gold-glow);
  font-variant-numeric: tabular-nums;
}
.nt-sb-pending {
  color: var(--text-muted);
  text-shadow: none;
  font-size: clamp(1rem, 0.8rem + 0.7vw, 1.3rem);
  font-style: italic;
}
.nt-sb-row-sub .nt-sb-label { font-size: 0.76rem; letter-spacing: 0.2em; }

.nt-finale {
  margin-top: 16px;
}
.nt-finale-note {
  margin-top: 22px;
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.nt-finale-note em {
  color: var(--gold-bright);
  font-style: italic;
}

/* =============================================================
   A11Y
   ============================================================= */
.nt-skip {
  position: fixed;
  left: 50%; bottom: 8px;
  transform: translateX(-50%) translateY(200%);
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 16px;
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--gold-border);
  border-radius: 999px;
  text-decoration: none;
  z-index: 200;
  transition: transform 0.2s var(--ease-out);
}
.nt-skip:focus-visible {
  transform: translateX(-50%) translateY(0);
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

button:focus-visible, a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* =============================================================
   REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nt-scenes { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
  }
  .nt-hold-tick, .nt-gate-light, .nt-sb-glow, .nt-stars { animation: none; opacity: 0.6; }
  .nt-door-dim { opacity: 0.55; }
  .nt-stage-inner { opacity: 1; transform: none; }
}

/* =============================================================
   MOBILE
   ============================================================= */
@media (max-width: 720px) {
  .nt-stage { padding: 92px 18px 60px; }
  .nt-header-inner { padding: 14px 16px; }
  .nt-progress { margin: 0 16px; }
  .nt-logo span { font-size: 0.85rem; }
  .nt-exit { padding: 6px 12px; font-size: 0.75rem; }

  .nt-overlay-card { padding: 36px 22px; }
  .nt-overlay-title { font-size: clamp(2.1rem, 1.4rem + 4vw, 3rem); }
  .nt-overlay-actions { flex-direction: column; }
  .nt-overlay-actions .nt-btn-primary,
  .nt-overlay-actions .nt-btn-ghost { width: 100%; justify-content: center; }

  .nt-title { font-size: clamp(2.4rem, 1.4rem + 6vw, 3.8rem); }

  .nt-lobby-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .nt-door { padding: 14px 4px; font-size: 1.25rem; }

  .nt-room { grid-template-columns: auto 1fr; row-gap: 2px; }
  .nt-room-tag { grid-column: 1 / -1; padding-left: 90px; }

  .nt-gate-list li { font-size: 0.75rem; padding: 6px 14px; }

  .nt-scoreboard { padding: 14px 16px; }
  .nt-sb-row { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }
  .nt-sb-digits { font-size: 1.4rem; }

  .nt-skip { bottom: 8px; top: auto; }
}

/* Tablet tune */
@media (min-width: 721px) and (max-width: 1024px) {
  .nt-stage { padding: 108px 32px 80px; }
}