/* Trail Tracker — styles. "trail" theme is the pixel-accurate default. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #0b0c0f; }
body {
  font-family: var(--font-body);
  min-height: 100vh;
}

:root {
  /* ---- trail theme tokens (default, pixel-accurate) ---- */
  --sky:#a9d6dd; --sky2:#e7f1ec; --ground:#83a05c; --ground2:#6b854b; --hill:#9fb77e;
  --mtn:#9aa6a8; --mtn2:#7b8688; --snow:#f2f5f1;
  --panel:#f4ecde; --panel2:#e8ddc9;
  --ink:#3a3327; --ink-dim:#8a7c63; --edge:#c3b396;
  --bevel-l:#ffffff; --bevel-d:#d8c7a8;
  --accent:#c06a3e; --accent2:#4e7a5e;
  --gold:#c99a45;
  --hud:#efe7d8; --hud-ink:#3a3327; --hud-soft:rgba(0,0,0,.05);
  --good:#5e8e4e; --warn:#c08a3a; --bad:#b4523f;
  --sun:#f6c64a;
  --font-head:'Press Start 2P'; --font-body:'VT323';

  /* ---- scene palette defaults (plains biome; overridden per-frame in JS) ---- */
  --scsky1:#cfeaf5; --scsky2:#7cc4e6; --scg1:#6bbf3f; --scg2:#4e8f2a; --schill:#6fa24a;
  --scmtn:#8fa0b6; --scmtn2:#64708a; --scsnow:#8fa0b6; --scpine:#2f6b2f;

  /* ---- per-frame scene animation vars (set by app.js) ---- */
  --wdur:.4s; --far:60s; --mid:38s; --near:16s; --tilt:0deg; --worldtf:scale(1.25);
  --play:running; --cols:1.55fr 1fr; --sceneH:304px;
}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes scrollX{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pulse{0%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}50%{opacity:.45;transform:translate(-50%,-50%) scale(1.25)}}
@keyframes fall{to{transform:translateY(340px)}}
@keyframes shimmer{0%,100%{opacity:.10}50%{opacity:.28}}
@keyframes pedL{0%,100%{transform:rotate(20deg)}50%{transform:rotate(-16deg)}}
@keyframes pedR{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(20deg)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes campFade{0%{opacity:0}12%{opacity:1}88%{opacity:1}100%{opacity:0}}
@keyframes campStars{0%{opacity:0}25%{opacity:1}100%{opacity:1}}
@keyframes campWalk{0%{left:8%;opacity:1}38%{left:40%;opacity:1}52%{left:44%;opacity:1}64%{opacity:0}100%{opacity:0}}
@keyframes campTent{0%{transform:scale(.15);opacity:0}40%{transform:scale(.15);opacity:0}62%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes campFire{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}
@keyframes campZzz{0%{opacity:0;transform:translateY(0)}55%{opacity:0}68%{opacity:1}100%{opacity:0;transform:translateY(-26px)}}

input[type=range]{-webkit-appearance:none;appearance:none;height:14px;background:var(--hud);border:2px solid var(--edge);border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:20px;background:var(--accent2);border:2px solid #fff;cursor:pointer}
input[type=range]::-moz-range-thumb{width:16px;height:20px;background:var(--accent2);border:2px solid #fff;cursor:pointer}

.hidden { display: none !important; }

/* ---- app shell ---- */
#page {
  min-height: 100vh; display: flex; align-items: flex-start; justify-content: center;
  background: #0b0c0f; padding: 16px;
}
#app {
  width: 100%; max-width: 1180px; font-family: var(--font-body);
}

/* ---- header ---- */
.header-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 10px 14px;
  background: var(--hud); border: 3px solid var(--edge);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.08), inset -2px -2px 0 rgba(0,0,0,.35);
}
.header-titles { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.route-name { font-family: var(--font-head); font-size: 15px; color: var(--gold); letter-spacing: 1px; line-height: 1.35; white-space: nowrap; }
.route-meta { font-family: var(--font-body); font-size: 17px; color: var(--hud-ink); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spacer { flex: 1; }
.badge-hardcore { font-family: var(--font-head); font-size: 9px; color: #fff; background: var(--bad); padding: 7px 9px; border: 2px solid var(--edge); cursor: pointer; }
.badge-live { display: flex; align-items: center; gap: 7px; font-family: var(--font-head); font-size: 10px; color: #ff5a4d; }
.badge-live .dot { width: 11px; height: 11px; border-radius: 50%; background: #ff5a4d; animation: blink 1s infinite; }
.seg-tabs { display: flex; border: 2px solid var(--edge); border-radius: 3px; overflow: hidden; }
.seg-tabs button { font-family: var(--font-head); font-size: 9px; letter-spacing: 1px; padding: 8px 11px; border: none; cursor: pointer; background: transparent; color: var(--hud-ink); }
.seg-tabs button.active { background: var(--accent2); color: #fff; }
.btn-icon { font-family: var(--font-head); font-size: 9px; letter-spacing: 1px; padding: 8px 11px; cursor: pointer; color: var(--hud-ink); background: transparent; border: 2px solid var(--edge); border-radius: 3px; }
.btn-icon.active { color: #fff; background: var(--accent2); }

/* ---- grid ---- */
.grid { display: grid; grid-template-columns: var(--cols, 1.55fr 1fr); gap: 12px; margin-top: 12px; }
@media (max-width: 880px) { .grid { grid-template-columns: 1fr !important; } }
.col { display: flex; flex-direction: column; gap: 12px; }

/* ---- panel recipe ---- */
.panel {
  background: var(--panel2); border: 3px solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--bevel-l), inset -2px -2px 0 var(--bevel-d);
  padding: 10px;
}
.panel-title { font-family: var(--font-head); font-size: 9px; color: var(--ink-dim); letter-spacing: 1px; margin-bottom: 8px; }

/* ---- buttons ---- */
.btn-play {
  font-family: var(--font-head); font-size: 10px; letter-spacing: 1px; padding: 11px 14px; cursor: pointer;
  color: #fff; background: var(--accent2); border: 2px solid var(--edge);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.28), inset -2px -2px 0 rgba(0,0,0,.28);
}
.btn-ghost {
  font-family: var(--font-head); font-size: 9px; letter-spacing: 1px; padding: 11px 12px; cursor: pointer;
  color: var(--ink); background: var(--panel); border: 2px solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--bevel-l), inset -2px -2px 0 var(--bevel-d);
}

/* ---- scene ---- */
.scene {
  position: relative; height: var(--sceneH, 304px); overflow: hidden;
  border: 3px solid var(--edge);
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.22), inset -3px -3px 0 rgba(0,0,0,.28);
  background: linear-gradient(var(--scsky1) 0%, var(--scsky2) 70%);
  transition: background .6s ease;
}
.sun { position: absolute; top: 26px; right: 70px; width: 50px; height: 50px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 26px var(--sun); animation: bob 5s ease-in-out infinite; z-index: 1; }
.moon { position: absolute; top: 26px; right: 80px; width: 40px; height: 40px; border-radius: 50%; background: #e6ecf6; box-shadow: 0 0 18px #cdd7ea, -13px 3px 0 -4px var(--sky) inset; z-index: 10; }

.cloud-row { position: absolute; top: 24px; left: 0; width: max-content; display: flex; gap: 130px; animation: scrollX var(--far, 60s) linear infinite; animation-play-state: var(--play, running); z-index: 1; opacity: .95; }
.cloud { position: relative; width: 120px; height: 40px; flex: 0 0 auto; }
.cloud .c1 { position: absolute; top: 8px; left: 0; width: 96px; height: 24px; background: #fff; border-radius: 20px; opacity: .92; }
.cloud .c2 { position: absolute; top: 0; left: 26px; width: 48px; height: 34px; background: #fff; border-radius: 50%; opacity: .92; }

.world { position: absolute; inset: 0; transform: var(--worldtf, scale(1.25)); transform-origin: 26% 90%; transition: transform .45s ease; will-change: transform; }

.mtn-row { position: absolute; bottom: 23%; left: 0; width: max-content; display: flex; align-items: flex-end; animation: scrollX var(--far, 60s) linear infinite; animation-play-state: var(--play, running); z-index: 3; }
.mtn-group { display: flex; align-items: flex-end; padding-right: 34px; }
.mtn-a { width: 86px; height: 76px; background: linear-gradient(var(--scmtn) 42%, var(--scmtn2)); clip-path: polygon(50% 0,100% 100%,0 100%); }
.mtn-b { width: 120px; height: 124px; margin-left: -26px; background: linear-gradient(var(--scsnow) 0 15%, var(--scmtn) 15% 56%, var(--scmtn2)); clip-path: polygon(50% 0,100% 100%,0 100%); }
.mtn-c { width: 76px; height: 62px; margin-left: -20px; background: linear-gradient(var(--scmtn) 42%, var(--scmtn2)); clip-path: polygon(50% 0,100% 100%,0 100%); }

.hill-row { position: absolute; bottom: 21%; left: 0; width: max-content; display: flex; align-items: flex-end; animation: scrollX var(--mid, 38s) linear infinite; animation-play-state: var(--play, running); z-index: 3; }
.hill-group { display: flex; align-items: flex-end; padding-right: 16px; }
.hill-a { width: 196px; height: 86px; background: var(--schill); border-radius: 52% 52% 0 0; }
.hill-b { width: 150px; height: 62px; margin-left: -46px; background: var(--schill); filter: brightness(.9); border-radius: 52% 52% 0 0; }

.ground-band { position: absolute; bottom: 0; left: 0; right: 0; height: 24%; background: linear-gradient(var(--scg1), var(--scg2)); border-top: 4px solid var(--scg2); z-index: 4; transition: background .6s ease; }
.ground-strip { position: absolute; bottom: 5.5%; left: 0; right: 0; height: 20px; background: var(--scg2); opacity: .55; z-index: 5; }

.near-row { position: absolute; bottom: 18%; left: 0; width: max-content; display: flex; animation: scrollX var(--near, 16s) linear infinite; animation-play-state: var(--play, running); z-index: 5; }
.near-item { position: relative; width: 250px; height: 80px; flex: 0 0 auto; }
/* forest */
.forest .trunk { position: absolute; bottom: 0; left: 40px; width: 8px; height: 22px; background: #5a3f24; }
.forest .p1 { position: absolute; bottom: 14px; left: 24px; width: 40px; height: 36px; background: var(--scpine); filter: brightness(.85); clip-path: polygon(50% 0,100% 100%,0 100%); }
.forest .p2 { position: absolute; bottom: 32px; left: 28px; width: 32px; height: 30px; background: var(--scpine); clip-path: polygon(50% 0,100% 100%,0 100%); }
.forest .p3 { position: absolute; bottom: 48px; left: 31px; width: 26px; height: 22px; background: var(--scpine); filter: brightness(1.1); clip-path: polygon(50% 0,100% 100%,0 100%); }
.forest .rock { position: absolute; bottom: 0; left: 132px; width: 40px; height: 22px; background: var(--scmtn2); border-radius: 16px 18px 4px 4px; }
.forest .trunk2 { position: absolute; bottom: 0; left: 192px; width: 9px; height: 24px; background: #5a3f24; }
.forest .p4 { position: absolute; bottom: 18px; left: 183px; width: 28px; height: 26px; background: var(--scpine); clip-path: polygon(50% 0,100% 100%,0 100%); }
/* desert */
.desert-scenery .cactus1 { position: absolute; bottom: 0; left: 44px; width: 12px; height: 52px; background: #3f7a3a; border-radius: 6px; }
.desert-scenery .arm1 { position: absolute; bottom: 30px; left: 31px; width: 15px; height: 9px; background: #3f7a3a; border-radius: 6px; }
.desert-scenery .arm1b { position: absolute; bottom: 30px; left: 31px; width: 8px; height: 22px; background: #3f7a3a; border-radius: 6px; }
.desert-scenery .arm2 { position: absolute; bottom: 37px; left: 56px; width: 15px; height: 9px; background: #3f7a3a; border-radius: 6px; }
.desert-scenery .arm2b { position: absolute; bottom: 37px; left: 63px; width: 8px; height: 19px; background: #3f7a3a; border-radius: 6px; }
.desert-scenery .mesa1 { position: absolute; bottom: 0; left: 120px; width: 46px; height: 21px; background: #a9855a; border-radius: 16px 20px 4px 4px; }
.desert-scenery .mesa2 { position: absolute; bottom: 0; left: 152px; width: 26px; height: 13px; background: #8c6a42; border-radius: 12px 12px 3px 3px; }
.desert-scenery .dune { position: absolute; bottom: 0; left: 206px; width: 24px; height: 12px; background: #b9a15a; border-radius: 50% 50% 0 0; }
/* plains */
.plains-scenery .post1 { position: absolute; bottom: 0; left: 20px; width: 6px; height: 26px; background: #7a5a34; }
.plains-scenery .post2 { position: absolute; bottom: 0; left: 60px; width: 6px; height: 26px; background: #7a5a34; }
.plains-scenery .wire1 { position: absolute; bottom: 19px; left: 20px; width: 46px; height: 5px; background: #8a6a40; }
.plains-scenery .wire2 { position: absolute; bottom: 7px; left: 20px; width: 46px; height: 5px; background: #8a6a40; }
.plains-scenery .scrub1 { position: absolute; bottom: 0; left: 110px; width: 5px; height: 16px; background: var(--scpine); border-radius: 3px 3px 0 0; }
.plains-scenery .scrub2 { position: absolute; bottom: 0; left: 116px; width: 5px; height: 23px; background: var(--scpine); border-radius: 3px 3px 0 0; }
.plains-scenery .scrub3 { position: absolute; bottom: 0; left: 122px; width: 5px; height: 14px; background: var(--scpine); border-radius: 3px 3px 0 0; }
.plains-scenery .bush { position: absolute; bottom: 0; left: 182px; width: 42px; height: 25px; background: var(--scpine); filter: brightness(.95); border-radius: 50% 50% 0 0; }

.headlight-glow { position: absolute; left: 20%; bottom: 19%; width: 260px; height: 140px; z-index: 6; pointer-events: none; background: radial-gradient(150px 70px at 0% 55%, rgba(255,240,175,.55), rgba(255,240,175,0) 72%); }

/* ---- rider + bike ---- */
.bike-wrap { position: absolute; left: 14%; bottom: 16%; width: 140px; height: 108px; z-index: 6; transform: scale(0.8); transform-origin: center bottom; }
.bike-bob { position: absolute; inset: 0; animation: bob .5s ease-in-out infinite; animation-play-state: var(--play, running); }
.bike-shadow { position: absolute; bottom: 2px; left: 10px; width: 120px; height: 8px; background: rgba(0,0,0,.16); border-radius: 50%; filter: blur(1px); }
.wheel { position: absolute; bottom: 0; width: 50px; height: 50px; border: 6px solid var(--ink); border-radius: 50%; }
.wheel.rear { left: 6px; }
.wheel.front { left: 84px; }
.wheel .rim { position: absolute; inset: 0; border: 3px solid #b98b52; border-radius: 50%; }
.wheel .spokes { position: absolute; inset: 7px; border-radius: 50%; animation: spin var(--wdur, .4s) linear infinite; animation-play-state: var(--play, running); }
.wheel .spokes span { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--ink-dim); transform: translateX(-50%); }
.wheel .spokes span.s2 { top: 50%; bottom: auto; left: 0; right: 0; height: 2px; width: auto; transform: translateY(-50%); }
.wheel .spokes span.s3 { transform: translateX(-50%) rotate(45deg); }
.wheel .spokes span.s4 { transform: translateX(-50%) rotate(-45deg); }
.wheel .hub { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; background: var(--ink); border-radius: 50%; transform: translate(-50%,-50%); }

.frame-part { position: absolute; background: #17171b; border-radius: 2px; }
.fp1 { left: 31px; bottom: 25px; width: 36px; height: 5px; transform: rotate(11deg); transform-origin: left bottom; }
.fp2 { left: 66px; bottom: 18px; width: 44px; height: 5px; transform: rotate(-39.5deg); transform-origin: left bottom; }
.fp3 { left: 66px; bottom: 18px; width: 44px; height: 5px; transform: rotate(-114deg); transform-origin: left bottom; }
.fp4 { left: 48px; bottom: 58px; width: 52px; height: 5px; transform: rotate(6.6deg); transform-origin: left bottom; }
.fp5 { left: 48px; bottom: 58px; width: 37px; height: 5px; transform: rotate(117deg); transform-origin: left bottom; }
.fp6 { left: 99px; bottom: 46px; width: 5px; height: 16px; }
.fp-fork1 { left: 96px; bottom: 44px; width: 14px; height: 6px; transform: rotate(-7deg); transform-origin: left bottom; }
.fp-fork2 { left: 104px; bottom: 24px; width: 4px; height: 25px; border-radius: 3px; transform: rotate(-20deg); transform-origin: bottom; }
.fp-fork3 { left: 107px; bottom: 24px; width: 4px; height: 24px; background: #26262c; border-radius: 3px; transform: rotate(-27deg); transform-origin: bottom; }
.bottle1 { position: absolute; left: 76px; bottom: 26px; width: 8px; height: 18px; background: #c9c2a8; border-radius: 3px; transform: rotate(-40deg); transform-origin: left bottom; }
.bottle1cap { position: absolute; left: 74px; bottom: 24px; width: 8px; height: 4px; background: #8a8468; border-radius: 2px; transform: rotate(-40deg); transform-origin: left bottom; }
.seatpack { position: absolute; left: 6px; bottom: 40px; width: 48px; height: 21px; background: #6e6a44; border: 2px solid #45412a; border-radius: 8px 14px 13px 9px; transform: rotate(-7deg); }
.seatpack-strap1 { position: absolute; left: 20px; bottom: 40px; width: 3px; height: 20px; background: #45412a; transform: rotate(-7deg); transform-origin: bottom; }
.seatpack-strap2 { position: absolute; left: 34px; bottom: 40px; width: 3px; height: 19px; background: #45412a; transform: rotate(-7deg); transform-origin: bottom; }
.framebag { position: absolute; left: 52px; bottom: 42px; width: 45px; height: 15px; background: #6e6a44; clip-path: polygon(2px 2px,43px 9px,43px 15px,2px 12px); }
.framebag-line { position: absolute; left: 56px; bottom: 49px; width: 30px; height: 2px; background: #4f4a2e; transform: rotate(7deg); transform-origin: left; }
.bottle2 { position: absolute; left: 58px; bottom: 28px; width: 8px; height: 17px; background: #c9c2a8; border-radius: 3px; transform: rotate(23deg); transform-origin: left bottom; }
.bottle2cap { position: absolute; left: 58px; bottom: 41px; width: 8px; height: 4px; background: #8a8468; border-radius: 2px; transform: rotate(23deg); transform-origin: left bottom; }
.aerobar1 { position: absolute; left: 104px; bottom: 60px; width: 23px; height: 3px; background: #17171b; border-radius: 2px; transform: rotate(-7deg); transform-origin: left; }
.aerobar2 { position: absolute; left: 123px; bottom: 60px; width: 4px; height: 8px; background: #17171b; border-radius: 2px; transform: rotate(-7deg); transform-origin: left bottom; }
.aeropad { position: absolute; left: 102px; bottom: 63px; width: 13px; height: 4px; background: #2a2a30; border-radius: 2px; transform: rotate(-4deg); }
.dropbar1 { position: absolute; left: 99px; bottom: 60px; width: 18px; height: 4px; background: var(--ink); border-radius: 2px; transform: rotate(-6deg); transform-origin: left; }
.dropbar2 { position: absolute; left: 114px; bottom: 48px; width: 4px; height: 14px; background: var(--ink); border-radius: 0 0 4px 4px; }
.handlebar-dot { position: absolute; left: 113px; bottom: 57px; width: 3px; height: 3px; background: #fff8dc; border-radius: 50%; box-shadow: 0 0 5px 2px #fff2c0; z-index: 7; }
.handlebar-glow { position: absolute; left: 116px; bottom: 44px; width: 120px; height: 44px; pointer-events: none; z-index: 6; background: radial-gradient(55px 20px at 0% 40%, rgba(255,255,235,.7), rgba(255,255,235,0) 70%); }
.crank { position: absolute; left: 58px; bottom: 10px; width: 16px; height: 16px; animation: spin var(--wdur, .4s) linear infinite; animation-play-state: var(--play, running); }
.crank .ring { position: absolute; inset: 2px; border: 2px solid var(--ink); border-radius: 50%; }
.crank .arm { position: absolute; top: 50%; left: 50%; width: 20px; height: 3px; background: var(--ink); transform: translate(-50%,-50%); }
.crank .pedalL { position: absolute; top: 50%; left: -4px; width: 7px; height: 4px; background: #222; transform: translateY(-50%); }
.crank .pedalR { position: absolute; top: 50%; right: -4px; width: 7px; height: 4px; background: #222; transform: translateY(-50%); }
.leg-far { position: absolute; left: 60px; bottom: 16px; width: 6px; height: 42px; background: linear-gradient(#33333a 0 42%,#e0c199 42%); border-radius: 3px; filter: brightness(.82); transform-origin: top; animation: pedL .5s linear infinite; animation-play-state: var(--play, running); }
.leg-near { position: absolute; left: 64px; bottom: 16px; width: 6px; height: 42px; background: linear-gradient(#3a3a42 0 42%,#e8c9a0 42%); border-radius: 3px; transform-origin: top; animation: pedR .5s linear infinite; animation-play-state: var(--play, running); }
.foot { position: absolute; bottom: -2px; left: -2px; width: 11px; height: 5px; background: #2a2a2f; border-radius: 2px; }

.rider-torso { position: absolute; left: 52px; bottom: 56px; width: 30px; height: 12px; background: var(--accent2); border-radius: 6px; transform: rotate(-46deg); transform-origin: left bottom; }
.rider-arm { position: absolute; left: 70px; bottom: 78px; width: 48px; height: 4px; background: var(--accent2); filter: brightness(.8); border-radius: 2px; transform: rotate(27deg); transform-origin: left; }
.rider-head { position: absolute; left: 63px; bottom: 78px; width: 15px; height: 15px; background: #e8c9a0; border-radius: 50%; }
.rider-helmet { position: absolute; left: 60px; bottom: 85px; width: 24px; height: 11px; background: #dfe3e8; border-radius: 11px 11px 3px 3px; transform: rotate(-4deg); }
.rider-stripe { position: absolute; left: 63px; bottom: 90px; width: 18px; height: 3px; background: var(--accent); transform: rotate(-4deg); }
.rider-visor { position: absolute; left: 71px; bottom: 81px; width: 9px; height: 3px; background: #2a2620; }
.rider-lamp-dot { position: absolute; left: 76px; bottom: 83px; width: 2px; height: 2px; background: #fff8dc; border-radius: 50%; box-shadow: 0 0 4px 2px #fff2c0; z-index: 7; }
.rider-lamp-glow { position: absolute; left: 78px; bottom: 76px; width: 150px; height: 60px; pointer-events: none; z-index: 6; background: radial-gradient(70px 26px at 0% 45%, rgba(255,244,200,.55), rgba(255,244,200,0) 72%); }

#riderAero .rider-torso { left: 52px; bottom: 56px; width: 38px; height: 12px; transform: rotate(-20deg); transform-origin: left bottom; }
#riderAero .rider-arm { left: 86px; bottom: 70px; width: 30px; height: 4px; transform: rotate(7deg); transform-origin: left; }
#riderAero .rider-head { left: 84px; bottom: 66px; width: 15px; height: 14px; }
#riderAero .rider-helmet { left: 82px; bottom: 72px; width: 24px; height: 10px; transform: rotate(-9deg); }
#riderAero .rider-stripe { left: 85px; bottom: 77px; width: 18px; height: 3px; transform: rotate(-9deg); }
#riderAero .rider-visor { left: 93px; bottom: 68px; width: 9px; height: 3px; }
#riderAero .rider-lamp-dot { left: 97px; bottom: 71px; }
#riderAero .rider-lamp-glow { left: 99px; bottom: 64px; width: 150px; height: 56px; background: radial-gradient(70px 24px at 0% 45%, rgba(255,244,200,.55), rgba(255,244,200,0) 72%); }

/* weather overlays */
.flake { position: absolute; top: -10px; width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: .85; animation: fall linear infinite; }
.heat-shimmer { position: absolute; inset: 0; z-index: 9; pointer-events: none; background: linear-gradient(0deg,rgba(255,210,120,.5),transparent 42%); animation: shimmer 2.4s ease-in-out infinite; }
.cloud-tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(rgba(180,190,200,.30),transparent 46%); }
.tint-overlay { position: absolute; inset: 0; z-index: 8; pointer-events: none; transition: opacity .6s ease, background .6s ease; }

/* camp sequence */
.camp-overlay { position: absolute; inset: 0; z-index: 15; background: linear-gradient(180deg,#0c1226 0%,#1b2743 55%,#0f1a10 55%,#16260f 100%); animation: campFade 5.4s ease forwards; }
.camp-stars { position: absolute; top: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 60px; animation: campStars 5.4s ease forwards; }
.camp-stars .star { width: 3px; height: 3px; background: #fff; border-radius: 50%; box-shadow: 60px 30px #fff,120px 8px #fff,-40px 22px #fff,-90px 12px #fff,20px 44px #fff,160px 40px #fff; }
.camp-moon { position: absolute; top: 16px; right: 14%; width: 34px; height: 34px; border-radius: 50%; background: #e6ecf6; box-shadow: 0 0 16px #cdd7ea; animation: campStars 5.4s ease forwards; }
.camp-walker { position: absolute; bottom: 16%; left: 8%; width: 26px; height: 26px; z-index: 2; animation: campWalk 5.4s ease forwards; }
.camp-walker .head { position: absolute; bottom: 9px; left: 6px; width: 9px; height: 9px; border-radius: 50%; background: #e8c9a0; }
.camp-walker .body { position: absolute; bottom: 0; left: 2px; width: 16px; height: 11px; background: var(--accent2); border-radius: 4px 4px 2px 2px; }
.camp-tent { position: absolute; bottom: 15%; left: 42%; width: 100px; height: 74px; z-index: 3; transform-origin: bottom center; animation: campTent 5.4s ease forwards; }
.camp-tent .body1 { position: absolute; bottom: 0; left: 0; width: 100px; height: 58px; background: #b9793f; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.camp-tent .body2 { position: absolute; bottom: 0; left: 36px; width: 28px; height: 58px; background: #8f5a2c; clip-path: polygon(50% 4%, 100% 100%, 0 100%); }
.camp-tent .door { position: absolute; bottom: 0; left: 44px; width: 12px; height: 34px; background: #3a2412; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.camp-tent .shadow { position: absolute; bottom: -4px; left: -6px; width: 112px; height: 8px; background: rgba(0,0,0,.28); border-radius: 50%; filter: blur(2px); }
.camp-fire { position: absolute; bottom: 15%; left: 62%; width: 16px; height: 16px; z-index: 4; }
.camp-fire .glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle,#ffcf5e,#ff8a3d 55%,transparent 75%); animation: campFire 0.9s ease-in-out infinite; box-shadow: 0 0 18px 6px rgba(255,150,60,.5); }
.camp-fire-log { position: absolute; bottom: 15%; left: 60%; width: 20px; height: 6px; background: #3a2412; border-radius: 3px; z-index: 3; }
.camp-zzz { position: absolute; bottom: 38%; left: 48%; font-family: var(--font-head); font-size: 11px; color: #f3e7c4; letter-spacing: 2px; z-index: 5; animation: campZzz 5.4s ease forwards; }
.camp-label { position: absolute; top: 12px; left: 0; right: 0; text-align: center; font-family: var(--font-head); font-size: 11px; letter-spacing: 1px; color: var(--gold); z-index: 6; }

/* info strip */
.info-strip {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px;
  padding: 5px 12px; background: rgba(10,10,12,.72); border-top: 2px solid var(--edge); z-index: 11;
  font-family: var(--font-body); font-size: 18px; color: #f3e7c4;
}
.info-strip .day-clock { color: var(--gold); }
.info-strip .sep { opacity: .5; }
.info-strip .next { color: #9fe6b0; }

/* ---- transport bar ---- */
.transport { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--panel2); border: 3px solid var(--edge); box-shadow: inset 2px 2px 0 var(--bevel-l), inset -2px -2px 0 var(--bevel-d); }
.transport .seek-wrap { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.transport .seek-wrap input[type=range] { width: 100%; }
.seek-labels { display: flex; justify-content: space-between; font-family: var(--font-body); font-size: 15px; color: var(--ink-dim); }
.live-status { display: flex; align-items: center; gap: 7px; font-family: var(--font-head); font-size: 9px; color: var(--accent); white-space: nowrap; }
.live-status .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: blink 1s infinite; }

/* ---- journal ---- */
.journal-list { display: flex; flex-direction: column; gap: 6px; max-height: 108px; overflow: auto; }
.journal-row { display: flex; gap: 8px; font-family: var(--font-body); font-size: 17px; line-height: 1.15; color: var(--ink); }
.journal-row .km { color: var(--gold); flex: 0 0 auto; }

/* ---- map / elevation ---- */
.map-box { position: relative; width: 100%; height: 166px; background: var(--hud-soft); border: 2px solid var(--edge); }
.elev-box { position: relative; width: 100%; height: 72px; }
.wp-marker { position: absolute; width: 11px; height: 11px; transform: translate(-50%,-50%) rotate(45deg); border: 2px solid var(--edge); background: var(--panel); z-index: 3; cursor: pointer; }
.wp-marker.reached { background: var(--gold); }
.rider-map-dot { position: absolute; width: 15px; height: 15px; border-radius: 50%; transform: translate(-50%,-50%); background: var(--accent2); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--accent2), 0 0 10px var(--accent2); z-index: 6; animation: pulse 1.2s infinite; }
.map-tooltip { position: absolute; background: var(--hud); border: 2px solid var(--edge); padding: 6px 8px; z-index: 20; pointer-events: none; white-space: nowrap; }
.map-tooltip .tip-name { font-family: var(--font-head); font-size: 8px; color: var(--gold); white-space: nowrap; }
.map-tooltip .tip-detail { font-family: var(--font-body); font-size: 15px; color: var(--hud-ink); white-space: nowrap; }

/* ---- stat grid ---- */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.stat-box { background: var(--hud); border: 2px solid var(--edge); padding: 6px 9px; display: flex; flex-direction: column; gap: 1px; min-height: 48px; justify-content: center; }
.stat-lbl { font-family: var(--font-head); font-size: 8px; letter-spacing: 1px; color: var(--gold); }
.stat-val { font-family: var(--font-body); font-size: 23px; line-height: .95; color: var(--hud-ink); }
.stat-sub { font-family: var(--font-body); font-size: 13px; color: var(--hud-ink); opacity: .7; }
.stat-sub.flash { opacity: 1; color: var(--accent); font-weight: bold; transition: color .3s ease; }

/* ---- supplies ---- */
.supply-row { display: flex; align-items: center; gap: 9px; }
.supply-label { width: 92px; font-family: var(--font-head); font-size: 8px; color: var(--ink); }
.supply-track { flex: 1; height: 13px; background: var(--hud); border: 2px solid var(--edge); overflow: hidden; }
.supply-fill { height: 100%; transition: width .25s linear; }
.supply-val { width: 28px; text-align: right; font-family: var(--font-body); font-size: 18px; color: var(--ink); }

/* ---- modals ---- */
.modal-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8,10,14,.72); padding: 20px; }
.modal-overlay.recap { background: rgba(8,10,14,.78); z-index: 52; }
.modal-overlay.source { z-index: 55; }
.modal-overlay.event { z-index: 50; }
.modal-card {
  width: 100%; background: var(--panel); border: 4px solid var(--edge);
  box-shadow: inset 3px 3px 0 var(--bevel-l), inset -3px -3px 0 var(--bevel-d), 0 14px 0 rgba(0,0,0,.4);
}
.modal-card.source { max-width: 520px; }
.modal-card.event { max-width: 520px; }
.modal-card.recap { max-width: 600px; max-height: 88vh; overflow: auto; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 13px 15px; background: var(--hud); border-bottom: 3px solid var(--edge); }
.modal-head.recap { padding: 14px 16px; }
.modal-title { font-family: var(--font-head); font-size: 13px; color: var(--gold); letter-spacing: 1px; flex: 1; }
.modal-title.recap { font-size: 14px; }
.modal-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.tag-chip { font-family: var(--font-head); font-size: 9px; color: #fff; background: var(--accent); padding: 7px 8px; border: 2px solid var(--edge); }
.tag-chip.done { background: var(--accent2); }

.src-tabs { display: flex; border: 2px solid var(--edge); border-radius: 3px; overflow: hidden; }
.src-tabs button { flex: 1; font-family: var(--font-head); font-size: 8px; letter-spacing: 1px; padding: 10px 8px; border: none; cursor: pointer; background: var(--panel2); color: var(--ink); }
.src-tabs button.active { background: var(--accent2); color: #fff; }
.src-body-text { font-family: var(--font-body); font-size: 18px; line-height: 1.25; color: var(--ink); }
.drop-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 22px; cursor: pointer; background: var(--panel2); border: 2px dashed var(--edge); text-align: center; }
.drop-zone.drag-over { background: var(--panel); border-color: var(--accent); }
.drop-zone .dz-title { font-family: var(--font-head); font-size: 9px; color: var(--ink); }
.drop-zone .dz-sub { font-family: var(--font-body); font-size: 16px; color: var(--ink-dim); }
.feed-input { font-family: var(--font-body); font-size: 18px; padding: 9px 11px; color: var(--ink); background: var(--panel2); border: 2px solid var(--edge); outline: none; width: 100%; }
.feed-msg { font-family: var(--font-body); font-size: 16px; line-height: 1.25; padding: 9px 11px; border: 2px solid var(--edge); background: var(--hud); color: var(--hud-ink); }
.feed-msg.error { color: var(--bad); }
.feed-msg.connected { color: var(--good); }

.event-text { font-family: var(--font-body); font-size: 22px; line-height: 1.25; color: var(--ink); margin-bottom: 14px; }
.choice-list { display: flex; flex-direction: column; gap: 9px; }
.choice-btn {
  text-align: left; cursor: pointer; padding: 11px 13px; background: var(--panel2); border: 2px solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--bevel-l), inset -2px -2px 0 var(--bevel-d);
  display: flex; flex-direction: column; gap: 3px; width: 100%; font: inherit;
}
.choice-btn:hover { background: var(--panel); }
.choice-btn .c-label { font-family: var(--font-head); font-size: 10px; color: var(--ink); }
.choice-btn .c-sub { font-family: var(--font-body); font-size: 16px; color: var(--ink-dim); }

.decisions-list { display: flex; flex-direction: column; gap: 5px; max-height: 150px; overflow: auto; }
.decision-row { display: flex; gap: 8px; align-items: baseline; font-family: var(--font-body); font-size: 16px; color: var(--ink); }
.decision-row .dtag { font-family: var(--font-head); font-size: 7px; color: #fff; background: var(--accent); padding: 3px 5px; border: 1px solid var(--edge); flex: 0 0 auto; }
.decision-row .dtitle { flex: 1; }
.decision-row .dmins { color: var(--ink-dim); flex: 0 0 auto; }