/* Highway Fun loading screen (markup is built by js/loader.js).
   Everything that moves forever is a transform animation, so it runs on the compositor and stays
   smooth while the game keeps the main thread busy building the world. */

#loader {
  /* scene geometry: S = street scene height, u = 1% of the car's length */
  --H: clamp(176px, 52vh, 480px);
  --carW: min(calc(var(--H) * 0.74), 36vw);
  --S: min(var(--H), calc(var(--carW) * 2.4));
  --u: calc(var(--carW) / 100);
  --K: calc(var(--S) - var(--u) * 60);               /* skyline height; the road starts here */
  --st: max(3vw, calc(env(safe-area-inset-left) + 10px));   /* where the car starts */
  --finR: max(6vw, calc(env(safe-area-inset-right) + 24px)); /* finish line, from the right edge */
  --speed: 0.5s;                                     /* time for one street lamp to pass */

  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(90% 55% at 50% 22%, rgba(10, 132, 255, 0.10), transparent 70%),
    linear-gradient(180deg, #02040a 0%, #050814 30%, #0a0e22 55%, #15132f 75%, #23142c 100%);
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
@supports (height: 1dvh) {
  #loader { --H: clamp(176px, 52dvh, 480px); }
}
#loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
#loader.ld-off, #loader.ld-off * { animation: none !important; }
#loader i { display: block; font-style: normal; }

/* ---------- sky ---------- */
.ld-sky { position: absolute; inset: 0; pointer-events: none; }
.ld-stars { position: absolute; inset: 0 0 35% 0; background-size: 600px 360px; opacity: 0.9;
  -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.ld-moon { position: absolute; right: max(9vw, 40px); top: max(7vh, calc(env(safe-area-inset-top) + 16px));
  width: clamp(26px, 4.4vw, 54px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fffaf0 0%, #f3ead6 45%, #cdbfa6 100%);
  box-shadow: 0 0 24px 6px rgba(255, 236, 200, 0.18), 0 0 90px 30px rgba(140, 170, 255, 0.10); }

/* ---------- logo ---------- */
.ld-head {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top) + 18px) 16px 6px;
}
.ld-head::before { /* warm glow behind the logo */
  content: ""; position: absolute; left: 50%; top: 52%; width: min(760px, 110vw); height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 110, 30, 0.16), transparent);
  pointer-events: none;
}
.ld-head .hf-logo {
  position: relative;
  display: block;
  width: min(540px, 86vw);
  height: auto;
  max-height: 100%;
  overflow: visible;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.55));
  animation: ld-logo-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes ld-logo-in { from { opacity: 0; transform: translateX(-24px) scale(0.97); } }

/* ---------- street scene ---------- */
.ld-scene { position: relative; flex: none; height: var(--S); }
.ld-scene > *, .ld-city > *, .ld-road > * { position: absolute; }

.ld-city { left: 0; right: 0; top: 0; height: calc(var(--K) + var(--u) * 2); overflow: hidden; }
.ld-haze { left: -10%; right: -10%; bottom: 0; height: 90%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 106, 42, 0.30), rgba(191, 60, 120, 0.10) 55%, transparent 80%); }

/* parallax layers: a strip one tile wider than the screen slides left by exactly one tile */
.ld-scroll {
  left: 0;
  width: calc(100% + var(--tw));
  background-repeat: repeat-x;
  background-size: var(--tw) 100%;
  will-change: transform;
  animation: ld-scroll var(--dur) linear infinite;
}
@keyframes ld-scroll { to { transform: translate3d(calc(var(--tw) * -1), 0, 0); } }

.ld-far { bottom: 0; height: 100%; --tw: calc(var(--K) * 3); --dur: 70s; opacity: 0.95; }
.ld-mid { bottom: 0; height: 78%; --tw: calc(var(--K) * 0.78 * 3.3333); --dur: 16s; }

/* the road: far kerb 8u, asphalt 46u, near kerb 6u */
.ld-road { left: 0; right: 0; top: var(--K); height: calc(var(--u) * 60); }
.ld-kerb { left: 0; right: 0; top: 0; height: calc(var(--u) * 8);
  background: linear-gradient(#232836, #151923 40%, #0e1118); }
.ld-kerb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: max(1px, calc(var(--u) * 0.6)); background: #3b4252; }
.ld-asphalt { left: 0; right: 0; top: calc(var(--u) * 8); height: calc(var(--u) * 46);
  background:
    linear-gradient(90deg, transparent, rgba(255, 140, 60, 0.05) 50%, transparent),
    linear-gradient(#0d0f15, #12141c 45%, #0b0c11); }
.ld-asphalt::before, .ld-asphalt::after { /* solid edge lines */
  content: ""; position: absolute; left: 0; right: 0; height: max(1px, calc(var(--u) * 0.7)); background: rgba(235, 240, 255, 0.28); }
.ld-asphalt::before { top: calc(var(--u) * 2.5); }
.ld-asphalt::after { bottom: calc(var(--u) * 2.5); }
.ld-dash { top: calc(var(--u) * 27); height: max(2px, calc(var(--u) * 1.6));
  --tw: calc(var(--u) * 120); --dur: calc(var(--speed) * 0.4);
  background-image: linear-gradient(90deg, rgba(255, 250, 235, 0.62) 0 40%, transparent 40%); }
.ld-nearkerb { left: 0; right: 0; bottom: 0; height: calc(var(--u) * 6);
  background: linear-gradient(#2c3240, #171b24 30%, #090a0e); }

.ld-lamps { top: calc(var(--K) - var(--u) * 104); height: calc(var(--u) * 158);
  --tw: calc(var(--u) * 300); --dur: calc(var(--speed) * 1); }

/* finish line on the right */
.ld-finish { left: calc(100% - var(--finR)); top: 0; bottom: 0; width: 0; }
.ld-finish > * { position: absolute; }
.ld-checker { left: 0; top: calc(var(--K) + var(--u) * 8); height: calc(var(--u) * 46); width: calc(var(--u) * 6);
  background: repeating-conic-gradient(#f2f4f8 0 25%, #15171d 0 50%) 0 0 / calc(var(--u) * 3) calc(var(--u) * 3);
  transform: skewX(-24deg); transform-origin: 0 100%; opacity: 0.8; }
.ld-flagpole { left: calc(var(--u) * 4); top: calc(var(--K) - var(--u) * 78); height: calc(var(--u) * 84); width: max(2px, calc(var(--u) * 1.3));
  background: linear-gradient(90deg, #4a5264, #12151c); border-radius: 2px; }
.ld-flagpole b { position: absolute; right: 100%; top: calc(var(--u) * 3); width: calc(var(--u) * 20); height: calc(var(--u) * 12);
  background: repeating-conic-gradient(#f2f4f8 0 25%, #15171d 0 50%) 0 0 / calc(var(--u) * 4) calc(var(--u) * 4);
  transform: skewY(6deg); transform-origin: 100% 0; border-radius: 1px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.ld-flagpole em { position: absolute; left: 50%; top: calc(var(--u) * -2.6); width: calc(var(--u) * 3.4); aspect-ratio: 1; border-radius: 50%;
  transform: translateX(-50%); background: #ffb340;
  box-shadow: 0 0 calc(var(--u) * 3) calc(var(--u) * 1) rgba(255, 159, 10, 0.75), 0 0 calc(var(--u) * 12) calc(var(--u) * 4) rgba(255, 110, 20, 0.30);
  animation: ld-pulse 1.4s ease-in-out infinite; }
.ld-finglow { left: calc(var(--u) * -30); top: calc(var(--K) + var(--u) * 6); width: calc(var(--u) * 60); height: calc(var(--u) * 50);
  background: radial-gradient(closest-side, rgba(255, 150, 40, 0.20), transparent); opacity: 0.6; transition: opacity 0.6s; }
#loader.ld-ready .ld-finglow { opacity: 1; }
#loader.ld-ready .ld-flagpole em { animation-duration: 0.45s; background: #fff2d6; }

/* the car's rail: x = 0 is the car's rear at 0 %, x = 100 % is the car's rear at 100 % */
.ld-rail { left: var(--st); right: calc(var(--finR) + var(--carW)); top: calc(var(--K) + var(--u) * 11.2); height: calc(var(--u) * 43.5); }
.ld-rail > * { position: absolute; }
.ld-track, .ld-fill { left: calc(var(--carW) * 0.5); top: calc(var(--u) * 40.6); height: max(2px, calc(var(--u) * 0.8)); border-radius: 9px; }
.ld-track { width: calc(100% + var(--carW) * 0.5); background: rgba(255, 255, 255, 0.10); }
.ld-fill {
  width: 100%;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(255, 90, 31, 0.15), #ff5a1f 40%, #ff9f0a 85%, #ffd27a);
  box-shadow: 0 0 calc(var(--u) * 2) rgba(255, 120, 30, 0.8), 0 0 calc(var(--u) * 6) rgba(255, 90, 31, 0.45);
  transition: transform 1.1s cubic-bezier(0.25, 0.7, 0.3, 1);
  will-change: transform;
}
.ld-fill[hidden] { display: block; }
.ld-streak { /* long-exposure tail-light trail */
  left: 0; width: 100%; top: calc(var(--u) * 19.4); height: max(1.5px, calc(var(--u) * 0.9));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(255, 40, 40, 0), rgba(255, 40, 40, 0.08) 50%, rgba(255, 60, 45, 0.55));
  border-radius: 9px;
  filter: none;
  box-shadow: 0 0 calc(var(--u) * 2.5) rgba(255, 40, 40, 0.22);
  transition: transform 1.1s cubic-bezier(0.25, 0.7, 0.3, 1);
  will-change: transform;
}
.ld-runner { left: 0; top: 0; width: 100%; height: 100%; transition: transform 1.1s cubic-bezier(0.25, 0.7, 0.3, 1); will-change: transform; }
.ld-car { position: absolute; left: 0; top: 0; width: var(--carW); height: 100%; transition: transform 0.8s cubic-bezier(0.55, 0, 0.9, 0.45); }
.ld-car > * { position: absolute; }
#loader.done .ld-car { transform: translate3d(70vw, 0, 0); }

.ld-bob { left: 0; top: 0; width: 100%; height: 100%; animation: ld-bob 0.62s ease-in-out infinite; will-change: transform; }
.ld-carsvg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.ld-beam { /* headlight cone, angled down onto the road */
  position: absolute; left: 96.5%; top: 53%; width: 135%; height: 30%;
  background: linear-gradient(90deg, rgba(210, 232, 255, 0.42), rgba(210, 232, 255, 0.14) 45%, rgba(210, 232, 255, 0) 92%);
  clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 14%);
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
}
.ld-pool { left: 104%; top: 72%; width: 110%; height: 17%;
  background: radial-gradient(closest-side, rgba(215, 235, 255, 0.24), rgba(215, 235, 255, 0.08) 60%, transparent); }

.ld-wheel { top: 47%; width: 14.35%; aspect-ratio: 1; border-radius: 50%; }
.ld-wr { left: 16.3%; }
.ld-wf { left: 70.65%; }
.ld-spin { position: absolute; inset: 0; animation: ld-spin 0.3s linear infinite; will-change: transform; }
.ld-spin svg { display: block; width: 100%; height: 100%; }
.ld-wheel::after { /* fixed lighting + a touch of motion blur over the spinning rim */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle, rgba(170, 176, 186, 0.22) 30%, rgba(170, 176, 186, 0.08) 66%, transparent 68%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.16), transparent 45%, rgba(0, 0, 0, 0.45));
}

@keyframes ld-spin { to { transform: rotate(360deg); } }
@keyframes ld-bob { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, calc(var(--u) * -0.45), 0); } }
@keyframes ld-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

/* ---------- info under the street ---------- */
.ld-info {
  position: relative;
  flex: none;
  width: 100%;
  padding: 14px max(20px, calc(env(safe-area-inset-right) + 12px)) calc(env(safe-area-inset-bottom) + 18px) max(20px, calc(env(safe-area-inset-left) + 12px));
  background: linear-gradient(#08090e, #040508);
}
.ld-info > * { max-width: 1080px; margin: 0 auto; }
.ld-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ld-stat { display: flex; align-items: center; gap: 10px; min-width: 0; padding-bottom: 6px; }
.ld-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #ff9f0a;
  box-shadow: 0 0 10px #ff9f0a; animation: ld-pulse 1.1s ease-in-out infinite; }
#ldStatus { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ldStatus.err { color: #ff8a7d; white-space: pre-line; overflow: visible; font-size: 15px; line-height: 1.4; max-width: 62ch; }
.ld-pct { flex: none; font-style: italic; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  transform: skewX(-4deg); }
.ld-pct b { font-size: 44px; font-weight: 800;
  background: linear-gradient(180deg, #ffffff 30%, #c9d1dc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ld-pct span { font-size: 20px; margin-left: 2px; color: #ff9f0a; }
.ld-tiprow { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08); }
.ld-tiplbl { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; color: #0b0d11;
  background: linear-gradient(90deg, #ffb340, #ff9f0a 45%, #ff5e3a); padding: 3px 7px 2px; border-radius: 4px; transform: skewX(-10deg); }
#ldTip { font-size: 13.5px; line-height: 1.4; color: rgba(235, 240, 248, 0.68); transition: opacity 0.35s; }
#ldTip.ld-out { opacity: 0; }

/* error: the car stops, hazard lights blink, the message gets room */
#loader:has(#ldStatus.err) .ld-pct, #loader:has(#ldStatus.err) .ld-tiprow { display: none; }
#loader:has(#ldStatus.err) .ld-dot { background: #ff453a; box-shadow: 0 0 10px #ff453a; }
#loader:has(#ldStatus.err) .ld-scroll, #loader:has(#ldStatus.err) .ld-spin, #loader:has(#ldStatus.err) .ld-bob { animation-play-state: paused; }
#loader:has(#ldStatus.err) .ld-stat { align-items: flex-start; }
#loader:has(#ldStatus.err) .ld-dot { margin-top: 6px; }

.ld-vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55)); }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  #ldStatus { font-size: 13.5px; }
  .ld-pct b { font-size: 34px; }
  .ld-pct span { font-size: 16px; }
  #ldTip { font-size: 12.5px; }
}
@media (min-width: 1600px) and (min-height: 900px) {
  #ldStatus, #ldStatus.err { font-size: 17px; }
  .ld-pct b { font-size: 54px; }
  .ld-pct span { font-size: 24px; }
  #ldTip { font-size: 15px; }
  .ld-info > * { max-width: 1240px; }
}
@media (max-aspect-ratio: 4/5) { /* tall phones: logo sits just above the skyline, poster style */
  .ld-head { align-items: flex-end; padding-bottom: 4.5vh; }
  .ld-head::before { top: auto; bottom: 0; }
}
@media (max-height: 500px) { /* phones in landscape */
  .ld-head { padding-top: calc(env(safe-area-inset-top) + 8px); padding-bottom: 2px; }
  .ld-head .hf-logo { width: min(300px, 50vw); }
  .ld-info { padding-top: 8px; padding-bottom: calc(env(safe-area-inset-bottom) + 10px); }
  .ld-tiprow { margin-top: 6px; padding-top: 6px; }
  #ldStatus { font-size: 13px; }
  .ld-pct b { font-size: 30px; }
  #ldTip { font-size: 12px; }
}

/* ---------- reduced motion: the street stands still, the car still drives to the finish ---------- */
@media (prefers-reduced-motion: reduce) {
  #loader .ld-scroll, #loader .ld-spin, #loader .ld-bob, #loader .hf-logo, #loader .ld-dot, #loader .ld-flagpole em { animation: none; }
  .ld-runner, .ld-fill, .ld-streak { transition-duration: 0.5s; }
  #loader.done .ld-car { transform: none; }
}