/* ============================================================================
   RUNNER.CSS — ENGINE (generic, shared by every content pack).
   Every rule below is structural (layout, sizing, animation) and reads its
   colors from custom properties defined here in :root as Lane Dash's own
   defaults. A reskin overrides a handful of these in its own index.html
   (see that file's <style> block for the pattern) to rebrand without
   touching this file — page background, the title/button gradient, and the
   two accent colors used for "new high score" / the multiplier badge.
   Everything else (overlay scrims, the coin icon, the hit-flash red, the
   loading screen) is engine chrome, deliberately left fixed.
============================================================================ */
:root {
  --rd-bg: #0a0a14;
  --rd-gold-1: #ffe259;
  --rd-gold-2: #ffa751;
  --rd-accent-3: #ff5f8f;
  --rd-accent-4: #7c4dff;
  --rd-highlight: #ffd166;
  --rd-mult-color: #7CFF9E;
  /* HTML HUD/bank-line dot for the collectible. Kept independent of the
     gold-* vars above (even though they match by default) because this one
     is also driven live by RunnerBrand.collectibleColor — see brand.js. */
  --rd-collectible-color: #ffcf33;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html, body { width:100%; height:100%; overflow:hidden; background:var(--rd-bg); font-family: 'Segoe UI', Verdana, sans-serif; }
#game-canvas { display:block; width:100%; height:100%; touch-action:none; }

#hud {
  position:fixed; top:0; left:0; width:100%;
  /* env(safe-area-inset-*) keeps the HUD clear of a notch/pill camera on
     phones that report one; 0px fallback is a no-op on everything else. */
  padding:calc(env(safe-area-inset-top, 0px) + 14px) calc(env(safe-area-inset-right, 0px) + 14px)
          0 calc(env(safe-area-inset-left, 0px) + 14px);
  display:flex; justify-content:space-between; align-items:flex-start;
  pointer-events:none; z-index:5; color:#fff;
}
/* Score reads as bold outlined game typography sitting directly on the
   scene — no card/background behind it — rather than a UI dashboard
   number. -webkit-text-stroke is the same technique mobile runners
   (Subway Surfers etc.) use for HUD numbers; well supported on both iOS
   Safari and Chrome/Android, the two browsers that actually matter here. */
#hud .score-block {
  font-size:clamp(30px,8.5vw,44px); font-weight:900; letter-spacing:.5px; line-height:1;
  color:#fff; -webkit-text-stroke:2px #1a1224; paint-order:stroke fill;
  text-shadow:0 4px 0 rgba(0,0,0,.22), 0 8px 16px rgba(0,0,0,.35);
}
#hud .hud-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
#hud .hud-stats { position:relative; }
/* Coins and best: identical outlined/stroked number treatment and size —
   one consistent "HUD numbers live directly on the scene" language for
   everything under the score, so the score alone stands out. Best moved
   below coins (it's the least time-critical of the three) and swapped its
   text label for a star icon, matching the coin's icon+number pattern
   instead of being the one item with spelled-out text. The pause button
   (below) is the only HUD element that still gets a solid card/pill — it's
   the one thing here that's actually a button. */
#hud .coin-block,
#hud .best-block {
  font-size:clamp(14px,3.8vw,18px); font-weight:800; display:flex; align-items:center; gap:6px;
  color:#fff; -webkit-text-stroke:1.5px #1a1224; paint-order:stroke fill;
  text-shadow:0 3px 0 rgba(0,0,0,.22), 0 6px 12px rgba(0,0,0,.35);
  margin-top:6px;
}
#hud .best-icon { color:var(--rd-highlight); flex:none; }
/* "+N" pop shown at pickup, anchored to the top-left stats stack (same
   spot the score sits) so the cause (coin) and effect (score climbing)
   read as one moment — additive to the persistent coin count below, not a
   replacement for it. */
.coin-pop-layer {
  position:absolute; left:0; top:0; width:100%; height:100%;
  pointer-events:none; overflow:visible;
}
.coin-pop {
  position:absolute; left:6px; top:2px;
  font-size:22px; font-weight:900; color:var(--rd-collectible-color);
  -webkit-text-stroke:1.5px #1a1224; paint-order:stroke fill;
  text-shadow:0 3px 0 rgba(0,0,0,.25), 0 6px 14px rgba(0,0,0,.4);
  animation:coin-pop-rise .7s ease-out forwards;
}
@keyframes coin-pop-rise {
  0% { transform:translateY(0); opacity:0; }
  15% { opacity:1; }
  100% { transform:translateY(-34px); opacity:0; }
}
#hud .coin-dot { width:16px; height:16px; border-radius:50%; flex:none; background:radial-gradient(circle at 35% 30%, #fff6c0, var(--rd-collectible-color) 55%, #cf9600); box-shadow:0 0 6px var(--rd-collectible-color); }

/* #hud itself is pointer-events:none (score/coins shouldn't eat swipes), so
   the pause button opts itself back in and is the one HUD element sized
   for a fingertip — 44px is the standard minimum comfortable touch target.
   Solid gold gradient, matching .big-btn below, rather than a dark glass
   circle — the pause button is a real, tappable, on-brand control, not
   passive HUD chrome. */
#hud-pause-btn {
  pointer-events:auto; width:44px; height:44px; min-width:44px; min-height:44px;
  border-radius:50%; border:none; color:#1a1224;
  background:linear-gradient(155deg, var(--rd-gold-1), var(--rd-gold-2));
  box-shadow:0 6px 14px rgba(255,150,60,.4);
  font-size:16px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .12s ease;
}
#hud-pause-btn:active { transform:scale(.9); }

.overlay {
  position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(20,10,40,.55), rgba(5,5,15,.85));
  color:#fff; text-align:center; z-index:10; padding:20px;
}

/* Pre-run countdown (3-2-1-GO) — sits over the live scene (start line/
   flags already visible, world already scrolling-still) between tapping
   "run" and gameplay actually starting. No scrim behind it (unlike
   .overlay above) — the point is to show off the world, not hide it.
   Text uses the SAME gradient-clip treatment as .title-logo rather than a
   plain color or another translucent card, so it reads as this game's own
   branding rather than a generic UI kit. */
#countdown {
  position:fixed; inset:0; z-index:15; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
#countdown.hidden { display:none; }
#countdown-text {
  font-size:clamp(70px,24vw,170px); font-weight:900; letter-spacing:2px;
  background:linear-gradient(90deg, var(--rd-gold-1), var(--rd-gold-2), var(--rd-accent-3), var(--rd-accent-4));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.45));
}
#countdown-text.go { background:none; color:var(--rd-mult-color); }
#countdown-text.pop { animation:countdown-pop .65s cubic-bezier(.24,1.5,.4,1); }
@keyframes countdown-pop {
  0% { transform:scale(.35); opacity:0; }
  35% { transform:scale(1.16); opacity:1; }
  60% { transform:scale(.95); }
  100% { transform:scale(1); opacity:1; }
}
.overlay.hidden { display:none; }
/* Sponsor logo slot, sits above .title-logo on every overlay screen
   (loading/start/game-over/pause) — hidden (inline style, index.html) until
   RunnerBrand.sponsorLogoUrl is set, so a reskin with no sponsor logo shows
   no empty gap. Generously sized on purpose (this is the guaranteed-seen
   branding surface — every player sees these screens, unlike billboards)
   but capped so an unusually wide/tall source image can't dominate the
   screen or push the title/buttons off a short viewport. */
.sponsor-logo {
  display:block; max-width:min(360px, 78vw); max-height:min(140px, 22vh);
  width:auto; height:auto; object-fit:contain; margin:0 auto 20px;
}
.title-logo {
  font-size:clamp(38px,8vw,64px); font-weight:900; letter-spacing:2px;
  background:linear-gradient(90deg, var(--rd-gold-1), var(--rd-gold-2), var(--rd-accent-3), var(--rd-accent-4));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 4px 18px rgba(0,0,0,.35); margin-bottom:6px;
}
.subtitle { font-size:15px; opacity:.85; margin-bottom:26px; }
.name-input {
  padding:14px 16px; font-size:18px; border-radius:10px; border:2px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#fff; text-align:center; width:min(280px,80vw);
  margin-bottom:22px; outline:none; font-family:inherit;
}
.name-input::placeholder { color:rgba(255,255,255,.4); }
.name-input:focus { border-color:var(--rd-highlight); }
.big-btn {
  font-size:20px; font-weight:800; letter-spacing:.5px; color:#1a1a1a;
  background:linear-gradient(90deg, var(--rd-gold-1), var(--rd-gold-2)); border:none; padding:16px 46px;
  border-radius:50px; cursor:pointer; box-shadow:0 8px 20px rgba(255,150,60,.4);
  transition:transform .12s ease;
  /* .big-btn is also used on <a> tags (e.g. the promoted VIEW LEADERBOARD
     link below) — text-decoration is a no-op on <button> so this is safe
     either way, and display:inline-flex centers a wrapped/short label
     identically on both element types. */
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
}
.big-btn:active { transform:scale(.94); }
.big-btn:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }
.big-btn:disabled:active { transform:none; }

/* Quiet status label above the score — was a full-size gradient .title-logo
   competing with the score for "biggest thing on screen"; the score is now
   the only hero element here. */
.go-eyebrow {
  font-size:13px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:2px;
}
/* .go-score itself (below) stays the modest size .pause-score also uses;
   #go-score (game-over's specific instance, ID beats class) is the one
   made into this screen's hero number — reuses the same brand gradient as
   .title-logo/#countdown-text rather than a new color, just applied to the
   number instead of a title. */
.go-score { font-size:52px; font-weight:900; margin:6px 0 2px; }
#go-score {
  font-size:clamp(56px,17vw,84px); line-height:1; margin:6px 0 10px;
  background:linear-gradient(90deg, var(--rd-gold-1), var(--rd-gold-2), var(--rd-accent-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.4));
}
.go-sub { font-size:13px; font-weight:600; opacity:.6; margin-bottom:28px; }
/* Plain "Best: N" case — quiet comparison text, not a competing headline.
   .new-high (below) is the ONLY state that gets visual weight here, because
   it's the one genuinely newsworthy thing besides the score itself. */
.go-high { font-size:13px; color:rgba(255,255,255,.55); font-weight:700; margin-bottom:8px; }
/* "New best" badge: an actual pill (background/border/glow) instead of just
   bolder text, so the one moment worth celebrating reads as an event, not
   a slightly-different-colored line of copy. Star via ::before rather than
   flex+gap, so it can't misbehave when mixed with the plain text node JS
   already sets as this span's content (see runner.js's endGame()). */
.new-high {
  display:inline-block; font-size:14px; font-weight:900; letter-spacing:.4px;
  text-transform:uppercase; color:var(--rd-mult-color);
  background:rgba(124,255,158,.14); border:1px solid rgba(124,255,158,.5);
  border-radius:50px; padding:7px 18px 7px 15px;
}
.new-high::before { content:'\2605\00A0'; }

.big-btn.secondary {
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.28);
  box-shadow:none; font-size:16px; padding:14px 34px; margin-top:14px;
}

/* Game-over's one primary action: name + SAVE fused into a single pill
   (border/glow reuse the gold brand gradient — the same visual language as
   .big-btn) so it reads as ONE control to complete, not an input sitting
   above an unrelated button. This is the only path that pushes a score to
   the shared leaderboard (see runner.js's saveScore()) — it's meant to be
   unmistakably the primary thing on this screen, ahead of PLAY AGAIN. */
.save-unit { display:flex; flex-direction:column; align-items:center; width:100%; }
.save-unit.hidden { display:none; }
.save-capsule {
  display:flex; align-items:stretch; width:min(320px,86vw); height:56px;
  background:rgba(255,255,255,.07); border:2px solid var(--rd-gold-1);
  border-radius:50px; overflow:hidden; margin-bottom:10px;
  box-shadow:0 10px 24px rgba(255,167,81,.28);
  transition:box-shadow .15s ease;
}
.save-capsule:focus-within {
  box-shadow:0 0 0 4px rgba(255,209,102,.25), 0 10px 24px rgba(255,167,81,.35);
}
.save-input {
  flex:1 1 auto; min-width:0; border:none; background:transparent; color:#fff;
  font-size:16px; font-weight:600; font-family:inherit; padding:0 6px 0 22px; outline:none;
}
.save-input::placeholder { color:rgba(255,255,255,.42); font-weight:500; }
/* 16px font-size on .save-input (above) is deliberate, not just "reads
   fine" — anything smaller and iOS Safari auto-zooms the page on focus,
   which would shove this whole capsule out of view under the keyboard. */
.save-btn {
  flex:none; border:none; cursor:pointer; font-weight:900; font-size:14px; letter-spacing:.6px;
  padding:0 26px; color:#1a1224;
  background:linear-gradient(90deg, var(--rd-gold-1), var(--rd-gold-2));
  transition:opacity .15s ease, transform .12s ease;
}
.save-btn:disabled { opacity:.32; cursor:not-allowed; }
.save-btn:active:not(:disabled) { transform:scale(.94); }
.save-hint { font-size:12px; font-weight:600; color:rgba(255,255,255,.42); margin-bottom:22px; }
/* Same width/height/pill shape as .save-capsule above — this replaces that
   control once saveScore() fires (see runner.js), so it reads as "that
   control finished," not as an unrelated confirmation banner appearing. */
.go-saved-msg {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:min(320px,86vw); height:56px; margin:0 auto 22px;
  font-size:16px; font-weight:800; color:#0a1a10;
  background:linear-gradient(90deg, var(--rd-mult-color), #5fe085);
  border:none; border-radius:50px;
  box-shadow:0 8px 20px rgba(124,255,158,.35);
}
.go-saved-msg.hidden { display:none; }
.saved-check {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:22px; height:22px; border-radius:50%; font-size:13px; font-weight:900;
  background:#0a1a10; color:var(--rd-mult-color);
}
/* Pinned to the safe-area bottom (position:absolute inside .overlay, same
   trick as .start-footer below) so this never adds height to the centered
   score/save/action stack above. Whichever of the two swappable pairs (see
   index.html) is demoted to "quiet link" lives here — used on both an <a>
   (View Leaderboard) and a <button> (Play Again), hence the reset rules
   below stripping the button's default chrome down to plain text. */
.go-footer {
  position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom, 0px) + 18px);
  display:flex; flex-direction:column; align-items:center; gap:10px; z-index:2;
}
.go-footer-link {
  display:inline-block; font-size:13px; font-weight:700;
  color:rgba(255,255,255,.6); text-decoration:underline; text-underline-offset:3px;
  background:none; border:none; padding:4px; font-family:inherit; cursor:pointer;
}
.go-footer-link:active { color:#fff; }
.go-footer-link.hidden { display:none; }
.big-btn.hidden { display:none; }
.bank-line {
  display:flex; align-items:center; gap:8px; justify-content:center;
  font-size:16px; font-weight:700; margin-bottom:18px; opacity:.92;
}
.bank-line.hidden { display:none; }
.coin-dot { width:18px; height:18px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 35% 30%, #fff6c0, var(--rd-collectible-color) 55%, #cf9600); box-shadow:0 0 6px var(--rd-collectible-color); }
/* Start screen's one-row control reference — small pill chips, same visual
   language as .new-high/.go-footer-link elsewhere, read at a glance rather
   than a paragraph of tutorial copy. */
.controls-strip {
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:24px; flex-wrap:wrap;
}
.controls-strip.hidden { display:none; }
.control-chip {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:20px; padding:7px 14px;
}
.control-icon { font-size:14px; font-weight:900; color:var(--rd-highlight); line-height:1; }
#flash-overlay {
  position:fixed; inset:0; background:#ff2b4d; opacity:0; pointer-events:none; z-index:8; transition:opacity .05s linear;
}
#vignette {
  position:fixed; inset:0; pointer-events:none; z-index:4;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
}

.pause-line {
  font-size:16px; font-weight:700; opacity:.85; margin-bottom:6px;
}

/* ============================================================================
   LANE DASH AAA CINEMATIC LOADING SCREEN
   Futuristic, dark-themed canvas preloader featuring 3D perspective highway,
   floating game objects, metallic neon title, energy wave loading, andwarp fly-through.
   ============================================================================ */
#loading-screen {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #08080c;
  color: #fff; text-align: center; overflow: hidden;
  user-select: none; -webkit-user-select: none;
}
#loading-screen.hidden { display: none !important; }

/* 2D Canvas covering full screen */
#loading-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}

/* Centered UI Overlay Stack */
.loading-overlay-content {
  position: relative; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; pointer-events: none;
  padding: 20px;
}

.loading-logo-box {
  min-height: 48px; display: flex; align-items: center; justify-content: center;
}
.loading-logo-box .sponsor-logo {
  max-width: min(240px, 60vw); max-height: 60px;
  object-fit: contain; margin: 0 0 10px;
  filter: drop-shadow(0 0 16px rgba(0, 240, 255, 0.4));
}

/* Metallic Neon Title */
.loading-title {
  font-size: clamp(48px, 11vw, 84px); font-weight: 900; letter-spacing: 6px;
  line-height: 1.1; margin: 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--rd-gold-1, #ffe259) 45%, var(--rd-gold-2, #ffa751) 75%, var(--rd-accent-3, #ff5f8f) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(255, 209, 102, 0.5)) drop-shadow(0 8px 32px rgba(0, 0, 0, 0.8));
  font-family: 'Inter Tight', 'Segoe UI', system-ui, sans-serif;
  text-transform: uppercase;
}

/* Minimalist Percentage Counter */
.loading-pct-container {
  font-size: clamp(40px, 8vw, 64px); font-weight: 900; line-height: 1;
  letter-spacing: -1px; margin-top: 4px;
  color: #ffffff;
  font-family: 'Inter Tight', 'Segoe UI', system-ui, sans-serif;
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.6), 0 4px 16px rgba(0,0,0,0.8);
}
.loading-pct-container .pct-sign {
  font-size: clamp(20px, 4vw, 32px); font-weight: 800;
  color: var(--rd-gold-1, #ffe259); opacity: 0.9;
}

/* Warp Speed Fly-Through Camera Exit Animation */
#loading-screen.loading-screen-warp {
  animation: loading-screen-warp-exit 0.75s cubic-bezier(0.7, 0, 0.2, 1) forwards;
  pointer-events: none;
}
@keyframes loading-screen-warp-exit {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }
  60% {
    opacity: 0.8;
    filter: blur(6px);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
    filter: blur(18px);
  }
}

/* Start screen: sponsor logo big and first (same generic .sponsor-logo
   hero placement as loading/pause), then the game's own title-logo — same
   branded treatment the loading screen already uses, so the identity is
   consistent across loading -> start -> (countdown reuses this gradient
   too) rather than a plain "Ready To Run?" label competing with it. */

/* "Already played" lock state (runner.js's hasAlreadyPlayed()) — replaces
   the caption + TAP TO RUN with a plain explanation and the same VIEW
   LEADERBOARD treatment the game-over screen promotes to after a save. */
.start-locked.hidden { display:none; }
.start-locked-msg {
  font-size:15px; font-weight:700; color:rgba(255,255,255,.75);
  max-width:280px; margin-bottom:20px; line-height:1.4;
}