/* ===========================================================================
   SL TOTOMATOR — retro pixel / CRT arcade theme
   =========================================================================== */
:root{
  --bg:#070710; --bg2:#0d0d1c; --panel:#0a0a18;
  --grid:#15152c;
  /* map backdrop (water / void): the same blue-violet family as the UI, a shade DARKER than the
     panel/grid blue so the map reads as a deeper version of the app rather than a black hole */
  --mapbg:#0e0e24;
  --green:#39ff14; --amber:#ffb000; --magenta:#ff2e88;
  --cyan:#00e5ff; --red:#ff3b3b; --gold:#ffd23f;
  --ink:#c8f7d0; --dim:#5b6a78; --line:#243244;
}
*{box-sizing:border-box}
html,body{height:100%}
/* native-app feel: kill the browser's double-tap-to-zoom on the UI (touch-action:manipulation).
   The Leaflet map sets its own touch-action, so its pinch/two-finger zoom is unaffected. Page
   pinch-zoom is blocked separately in JS (gesturestart) on iOS. */
html{touch-action:manipulation}
body{
  margin:0; background:var(--bg);
  color:var(--ink);
  font-family:'VT323',monospace;
  font-size:20px; line-height:1.05;
  image-rendering:pixelated;
  overflow:hidden;
}
/* faint pixel grid background */
.crt{
  height:100vh; display:flex; flex-direction:column;
  background:
    linear-gradient(transparent 0, transparent 23px, var(--grid) 24px) 0 0/24px 24px,
    linear-gradient(90deg, transparent 0, transparent 23px, var(--grid) 24px) 0 0/24px 24px,
    radial-gradient(120% 90% at 50% 0%, #11112a 0%, var(--bg) 70%);
  position:relative;
}
/* scanlines + flicker + vignette overlays */
.crt::before{
  content:""; position:fixed; inset:0; z-index:9000; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
.crt::after{
  content:""; position:fixed; inset:0; z-index:9001; pointer-events:none;
  background:radial-gradient(130% 110% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
  opacity:.9;   /* was an infinite `flicker` opacity animation — it re-painted the whole
                   viewport ~10x/s (5fps + jank, GPU never idle). Static vignette looks the same. */
}
/* darken the iOS status-bar (top) and home-indicator (bottom) safe areas so the system clock /
   battery / home indicator stay legible over the bright neon content — same idea as the menu's
   edge fade. Only the INSTALLED PWA draws under the system UI, so this is off in a normal browser. */
#safe-top,#safe-bottom{display:none}
@media (display-mode:standalone){
  #safe-top,#safe-bottom{display:block;position:fixed;left:0;right:0;z-index:8500;pointer-events:none}
  #safe-top{top:0;height:calc(env(safe-area-inset-top,0px) + 10px);
    background:linear-gradient(180deg,rgba(3,3,10,.92),rgba(3,3,10,0))}
  #safe-bottom{bottom:0;height:calc(env(safe-area-inset-bottom,0px) + 12px);
    background:linear-gradient(0deg,rgba(3,3,10,.92),rgba(3,3,10,0))}
}

/* in fullscreen only the map renders, so re-add the scanlines onto it. NOTE: keep these
   as SEPARATE rules — grouping :fullscreen with :-webkit-full-screen makes Firefox treat
   the whole selector as invalid and drop it, so the scanlines vanish in fullscreen. */
#map-col:fullscreen::after{
  content:""; position:fixed; inset:0; z-index:9000; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
#map-col:-webkit-full-screen::after{
  content:""; position:fixed; inset:0; z-index:9000; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
/* CSS-fallback fullscreen for browsers without the Fullscreen API (iOS Safari):
   pin the map column over the whole viewport and lock body scroll behind it. */
body.fs-lock{overflow:hidden}
#map-col.fs-fake{position:fixed!important; inset:0; z-index:9999;
  width:100vw!important; height:100vh!important; height:100dvh!important; margin:0!important; background:var(--mapbg)}
#map-col.fs-fake::after{
  content:""; position:fixed; inset:0; z-index:9000; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
/* push the header (and its absolutely-placed buttons) below the iOS status bar /
   notch so the fullscreen-exit and GPS buttons stay tappable, not behind it */
#map-col.fs-fake>.panel-h{margin-top:env(safe-area-inset-top,0px)}

h2,.title,.badge,.stat-label,.panel-h,.pos,.route{
  font-family:'Press Start 2P',monospace;
}

/* ---------------------------------------------------------------- top bar */
#topbar{
  flex:0 0 auto;
  /* drop the header below the iOS notch / Dynamic Island when the installed PWA draws under the
     translucent status bar. env(safe-area-inset-top) is 0 on devices without a notch and in the
     normal browser, so the extra space only appears when it's actually needed. The header's own
     gradient fills the inset area, so it reads as one bar up to the screen edge. */
  padding:calc(10px + env(safe-area-inset-top,0px)) 18px 8px;
  border-bottom:3px solid var(--line);
  background:linear-gradient(180deg,#13132c,#08081a);
  display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto;
  column-gap:16px; align-items:center;
}
.title{
  grid-row:1; grid-column:1;
  font-size:26px; letter-spacing:3px; color:var(--green);
  white-space:nowrap; word-spacing:-0.5em;   /* tighten the wide Press Start 2P space to ~half */
  /* glow in em so it scales with the font size (looks right on mobile too) */
  text-shadow:0 0 .22em var(--green),0 0 .6em rgba(57,255,20,.55),.12em .12em 0 #064d00;
}
.title .logo{color:var(--magenta);text-shadow:0 0 .3em var(--magenta)}
.subtitle{
  grid-row:2; grid-column:1; color:var(--cyan); font-size:15px; letter-spacing:1px;
  text-shadow:0 0 6px rgba(0,229,255,.5); margin-top:6px;
}
.status{grid-row:1/3; grid-column:2; display:flex; align-items:center; gap:12px}
.badge{
  font-size:11px; padding:7px 10px; border:2px solid currentColor; border-radius:2px;
  display:inline-flex; align-items:center; gap:.4em;
}
.badge .bdot{width:.62em;height:.62em;border-radius:50%;background:currentColor;flex:0 0 auto}
.badge.live{color:var(--red); text-shadow:0 0 8px var(--red); animation:blink 1.1s steps(2) infinite}
.badge.replay{color:var(--amber); text-shadow:0 0 8px var(--amber)}
@keyframes blink{50%{opacity:.25}}
.clock{font-size:30px;color:var(--amber);text-shadow:0 0 8px var(--amber);min-width:130px;text-align:right}
.poll{font-size:16px;color:var(--dim)}
.poll.ok{color:var(--green);text-shadow:0 0 6px var(--green)}
.poll.err{color:var(--red);text-shadow:0 0 6px var(--red)}

/* ---------------------------------------------------------------- menu / views */
/* the tab strip scrolls horizontally when it can't fit (tight mobile layouts):
   drag/swipe sideways; #menu-wrap shows a right-edge fade while there's more
   off-screen (.more is toggled by JS from the scroll position). */
#menu-wrap{position:relative;flex:0 0 auto;border-bottom:3px solid var(--line);
  background:linear-gradient(180deg,#0c0c1c,#08081a)}
#menu-wrap::after{content:'';position:absolute;top:0;right:0;bottom:0;width:38px;z-index:1;
  pointer-events:none;opacity:0;transition:opacity .2s;
  background:linear-gradient(90deg,rgba(8,8,26,0),#08081a)}
#menu-wrap.more::after{opacity:1}
#menu{display:flex;gap:8px;padding:8px 12px 0;flex-wrap:nowrap;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain}
#menu::-webkit-scrollbar{display:none}
#menu button{font-family:'Press Start 2P';font-size:12px;color:var(--dim);cursor:pointer;
  flex:0 0 auto;white-space:nowrap;
  background:#0a0a18;border:2px solid var(--line);border-bottom:none;padding:9px 14px 8px}
#menu button:hover{color:var(--ink)}
#menu button.active{color:var(--green);border-color:var(--green);text-shadow:0 0 7px rgba(57,255,20,.6);
  background:#0d160d}
/* opt-in OS notifications: lives in the status bar next to LIVE so it's always visible
   (incl. small screens); hidden by JS once permission is granted. Amber = utility action. */
/* same chip treatment as the wallet/balance + LIVE badge: gold pixel pill in the status bar */
.status .notif-btn{font-family:'Press Start 2P',monospace;font-size:11px;color:var(--gold);cursor:pointer;
  padding:7px 10px;border:2px solid var(--gold);border-radius:2px;background:#161024;
  display:inline-flex;align-items:center;gap:.4em;line-height:1;white-space:nowrap;
  text-shadow:0 0 7px rgba(255,210,63,.55);box-shadow:0 0 9px rgba(255,210,63,.16)}
.status .notif-btn:hover{background:#1f1730;box-shadow:0 0 13px rgba(255,210,63,.4)}
.status .notif-btn[hidden]{display:none}
@media (max-width:560px){ .status .wallet, .status .badge, .status .notif-btn{font-size:9px; height:28px; padding:0 8px} }
#tote[hidden],#grid[hidden],#howto[hidden],#leaderboard[hidden],#stats[hidden]{display:none!important}

/* ---------------------------------------------------------------- layout */
#grid{
  flex:1 1 auto; min-height:0;
  display:grid; grid-template-columns:minmax(360px,38%) 1fr; gap:12px;
  padding:12px;
}
.panel{
  background:linear-gradient(180deg,var(--panel),#06060f);
  border:3px solid var(--line);
  box-shadow:0 0 0 3px #000 inset, 0 0 18px rgba(0,0,0,.6);
  display:flex; flex-direction:column; min-height:0; position:relative;
}
.panel-h{
  flex:0 0 auto; margin:0; padding:9px 12px; font-size:13px; letter-spacing:1px;
  color:var(--dim);   /* base grey so any ellipsis is grey, not lime */
  border-bottom:2px solid var(--line);
  background:linear-gradient(180deg,#101028,#0a0a18);
}
.panel-h .pn{color:var(--green); text-shadow:none; vertical-align:middle}   /* the heading word — no glow */
/* subtitle: VT323 (terminal font), UPPERCASE — Press Start lowercase read badly next to the title.
   vertical-align:middle + line-height:1 centres it on the title instead of dropping below the baseline */
.panel-h .dim{color:var(--dim); font-family:'VT323',monospace; font-size:16px; text-transform:uppercase;
  letter-spacing:1px; text-shadow:none; font-weight:normal; vertical-align:middle; line-height:1}
#fs-btn{position:absolute;right:8px;top:6px;background:#0a0a18;color:var(--green);border:2px solid var(--line);
  font-size:10px;line-height:1;padding:3px 6px;cursor:pointer;z-index:2}
#fs-btn:hover{border-color:var(--green);text-shadow:0 0 6px var(--green)}
#dbg-btn{position:absolute;right:40px;top:6px;background:#0a0a18;color:var(--dim);border:2px solid var(--line);
  font-size:10px;line-height:1;padding:3px 6px;cursor:pointer;z-index:2;letter-spacing:1px}
#dbg-btn:hover{border-color:#ff5a5a;color:#ff5a5a}
#dbg-btn.on{border-color:#ff5a5a;color:#ff5a5a;text-shadow:0 0 6px #ff5a5a}
#map-col>.panel-h{position:relative;padding-right:92px}   /* room for the debug + fullscreen buttons */

/* ---- debug GPS-truth overlay ------------------------------------------------ */
/* the red ring marking the last REAL VehiclePosition fix is an SVG circleMarker (drawn by
   the route renderer so it can't drift from the routes on zoom); only its label is styled */
.gps-tip{background:transparent!important;border:none!important;box-shadow:none!important;
  color:#ff8a8a;font:700 11px 'VT323',monospace;text-shadow:0 0 3px #000;padding:0;margin:0;white-space:nowrap}
.gps-tip::before{display:none!important}   /* kill the leaflet tooltip pointer */
/* HUD panel pinned bottom-left of the map */
#dbg-hud{position:absolute;left:8px;bottom:8px;z-index:1000;max-width:340px;max-height:46%;overflow:auto;
  background:rgba(8,8,22,.9);border:1px solid #ff5a5a55;border-radius:3px;padding:5px 6px;
  font:12px/1.25 'VT323',monospace;color:#cfe;pointer-events:auto;box-shadow:0 0 12px rgba(0,0,0,.6)}
#dbg-hud .dh-top{color:#ff8a8a;font-size:12px;margin-bottom:3px;letter-spacing:.5px}
#dbg-hud .dh-empty{color:var(--dim)}
#dbg-hud .dh-row{display:grid;grid-template-columns:18px 52px 70px 48px 56px 1fr;gap:3px;
  padding:1px 2px;align-items:center;white-space:nowrap}
#dbg-hud .dh-head{color:var(--dim);font-size:11px;border-bottom:1px solid #ffffff22;border-left:3px solid transparent!important}
#dbg-hud .dh-stale{background:rgba(255,176,0,.12)}
#dbg-hud .dh-warn{background:rgba(255,46,46,.18);color:#ffb3b3}
#dbg-hud .dh-bigdrift span:nth-child(4){color:#ffd23f;font-weight:700}
.dim{color:var(--dim)}

/* ---------------------------------------------------------------- left column */
#left-col{display:flex;flex-direction:column;gap:12px;min-height:0}
#paddock-col{flex:1 1 40%;min-height:0;overflow:hidden}
#races-col{flex:1 1 60%;min-height:0;overflow:hidden}
#paddock{flex:1 1 auto;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:8px}
#paddock::-webkit-scrollbar{width:10px}
#paddock::-webkit-scrollbar-thumb{background:var(--line);border:2px solid #000}
#races{flex:1 1 auto; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:11px}
#races::-webkit-scrollbar{width:10px}
#races::-webkit-scrollbar-thumb{background:var(--line);border:2px solid #000}
.empty{padding:24px;text-align:center;color:var(--dim);font-size:22px}
.empty .dots{display:inline-block;width:1.6em;text-align:left}   /* reserve space so text doesn't shift */
.empty .dots::after{content:"";animation:dots 1.5s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

.race{
  border:2px solid var(--line); background:#08091a;
  box-shadow:3px 3px 0 #000; cursor:pointer;
}
.race:hover{border-color:#3a567a}
.race.selected{border-color:var(--green); box-shadow:3px 3px 0 #000,0 0 14px rgba(57,255,20,.45)}
.race.selected .banner{background:linear-gradient(90deg,#16331a,#0c0c22)}
.race.finished{border-color:var(--green); box-shadow:3px 3px 0 #000,0 0 12px rgba(57,255,20,.3)}
.race.winphoto{border-color:var(--gold)}
.winrow{padding:6px 9px;font-size:18px;color:var(--gold);text-shadow:0 0 8px rgba(255,210,63,.6);
  background:linear-gradient(90deg,#2a2208,#0c0c22);border-bottom:2px solid var(--line)}
.winrow b{color:#fff}
.winrow .ph{color:var(--red);text-shadow:0 0 8px var(--red)}
.winrow .won{color:var(--green);text-shadow:0 0 8px rgba(57,255,20,.6)}
.winrow .lost{color:var(--red);text-shadow:0 0 8px rgba(255,46,136,.5)}
.winrow .even{color:var(--amber);text-shadow:0 0 8px rgba(255,176,0,.45)}
.runner.win{background:rgba(255,210,63,.08)}
.runner.win .rid{color:var(--gold);text-shadow:0 0 6px rgba(255,210,63,.6)}
.race .banner{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  /* VT323 18px so the hub name matches the PADDOCK's title bar exactly (was the small Press Start
     pixel font, which sat differently in the line box and read as off-centre). */
  padding:7px 9px; font-size:18px; letter-spacing:.5px; overflow:hidden;
  background:linear-gradient(90deg,#1a1140,#0c0c22);
  border-bottom:2px solid var(--line); color:var(--cyan);
  text-shadow:0 0 6px rgba(0,229,255,.5);
}
/* keep the status pill ("5 RUNNING" / "FINISHED") in the small pixel font it had */
.race .pill{font-family:'Press Start 2P',monospace}
/* VT323 sits a hair high in its line box and the bordered pill makes this bar a touch taller than
   the paddock's, so the name read as too high — nudge it down to sit centred on the bar. */
.race .banner>span:first-child{position:relative;top:2px}
/* card titles: one line, clip overflow (hub name truncates, status stays) */
.banner>span:first-child,.pbanner>span:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--dim)}
/* "· POT: N" sits next to the hub name but reads muted/grey, not the bright hub colour */
.pot{color:var(--dim);text-shadow:none}
.banner>span:last-child,.pbanner>span:last-child{white-space:nowrap;flex:0 0 auto}
.panel-h{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.race .pill{font-size:9px; padding:4px 6px; border:2px solid currentColor;
  display:inline-flex; align-items:center; gap:3px}
.race .pill .fg{font-size:11px; line-height:1}
.race .pin{font-size:9px;color:var(--gold);text-shadow:0 0 6px rgba(255,210,63,.6)}
.pill.live{color:var(--green)}
.pill.photo{color:var(--red); text-shadow:0 0 8px var(--red)}
.pill.done{color:var(--gold); text-shadow:0 0 7px rgba(255,210,63,.5)}
.pill.settled{color:var(--dim)}
.race .field{padding:6px 8px; display:flex; flex-direction:column; gap:4px}

.runner{
  display:grid; grid-template-columns:46px 1fr 78px 56px; align-items:center;
  gap:7px; padding:3px 4px; font-size:19px; position:relative;
}
.runner .pos{
  font-size:11px; text-align:center; color:var(--dim);
}
.runner.p1 .pos{color:var(--ink)}
.runner .route{
  font-size:9px; color:#001; border:2px solid #000; line-height:1;  /* bg set inline */
  align-self:stretch; display:flex; align-items:center; justify-content:center; margin-right:5px;
}
.runner .route.fav{box-shadow:0 0 0 2px #fff,0 0 7px rgba(255,255,255,.6)}
.runner .name{display:flex;flex-direction:column;min-width:0}
.runner .rid{color:var(--ink);letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.runner.fin .rid{color:var(--green)}
.runner.dq{opacity:.62}
.runner.dq .rid{text-decoration:line-through;color:#ff8a8a}
.brow.dq{opacity:.62}
.brow.dq .bid{text-decoration:line-through;color:#ff8a8a}
.runner .bar{
  height:9px; margin-top:3px; background:#05050d; border:1px solid var(--line);
  position:relative; overflow:hidden;
}
.runner .bar .fill{
  position:absolute; left:0; top:0; bottom:0;   /* anchored left -> the bar advances to the RIGHT */
  background:repeating-linear-gradient(90deg,var(--cyan) 0 6px, #0a3a44 6px 8px);
  transition:width .9s linear; box-shadow:0 0 8px rgba(0,229,255,.6);
}
.runner.fin .bar .fill{width:100%!important;background:var(--green);box-shadow:0 0 8px var(--green)}
.runner .eta{font-variant-numeric:tabular-nums;text-align:right;color:var(--amber);text-shadow:0 0 6px rgba(255,176,0,.5)}
.runner.fin .eta{color:var(--green);text-shadow:0 0 6px var(--green)}
.runner .odds{text-align:right;color:var(--magenta);text-shadow:0 0 6px rgba(255,46,136,.5);font-size:16px}
.runner .gps{position:absolute;left:-2px;top:2px;font-size:9px}

/* paddock (upcoming / betting) cards */
.pad{border:2px solid var(--line);background:#0a0a1c;box-shadow:3px 3px 0 #000;cursor:pointer}
.pad:hover{border-color:#3a567a}
.pad.selected{border-color:var(--green);box-shadow:3px 3px 0 #000,0 0 13px rgba(57,255,20,.45)}
.pad .pbanner{display:flex;justify-content:space-between;align-items:center;gap:8px;overflow:hidden;padding:7px 9px;font-size:18px;
  letter-spacing:.5px;background:linear-gradient(90deg,#241640,#0c0c22);border-bottom:2px solid var(--line)}
.pad .off{color:var(--gold);text-shadow:0 0 7px rgba(255,210,63,.6);font-size:19px;display:inline-flex;align-items:center;gap:.3em}
#map-sel b{font-weight:inherit}
#map-sel .t-off{color:var(--amber)} #map-sel .t-run{color:var(--green)} #map-sel .t-fin{color:var(--gold)}
/* checkered finish flag via an SVG checkerboard (conic-gradient fails on some Firefox) */
.pill .fg.flag{width:.95em;height:.72em;border:1px solid currentColor;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='2' height='2' fill='%23000'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23000'/%3E%3C/svg%3E") 0/4px 4px}
.pad .off.atpost{color:var(--red);text-shadow:0 0 8px var(--red);animation:blink 1s steps(2) infinite}
.pad .pfield{padding:6px 8px;display:flex;flex-direction:column;gap:4px}
.brow{display:grid;grid-template-columns:46px 1fr 70px 52px;gap:8px;align-items:center;font-size:21px;padding:2px 0 2px 3px}
.brow .route{font-size:11px;text-align:center;padding:5px 0;color:#001;border:2px solid #000;line-height:1}
.brow .route.fav{box-shadow:0 0 0 2px #fff,0 0 7px rgba(255,255,255,.6)}
.brow .bid{color:var(--ink);letter-spacing:1px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow .bodds{text-align:right;color:var(--magenta);text-shadow:0 0 7px rgba(255,46,136,.5);font-size:23px}
.brow .bwin{text-align:right;color:#8aa6b8;font-size:17px}

/* ---------------------------------------------------------------- map */
#map-col{overflow:hidden}
#map{flex:1 1 auto;min-height:0;background:var(--mapbg);position:relative}
/* 3..2..1..GO! overlay when the followed race starts */
#mapcount{display:none;position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:500;
  pointer-events:none;font-family:'Press Start 2P';font-size:13px;color:var(--amber);
  background:rgba(8,8,20,.7);border:2px solid var(--line);padding:6px 10px;
  text-shadow:0 0 7px rgba(255,176,0,.6)}
#gocount{display:none;position:absolute;inset:0;z-index:500;pointer-events:none;
  align-items:center;justify-content:center;font-family:'Press Start 2P';
  color:var(--amber);text-shadow:0 0 18px var(--amber),4px 4px 0 #000;}
#gocount.go-show{font-size:120px;animation:gopop .9s ease-out}
#gocount.go-go{color:var(--green);text-shadow:0 0 22px var(--green),4px 4px 0 #000;font-size:96px}
@keyframes gopop{0%{transform:scale(2.2);opacity:0}25%{opacity:1}100%{transform:scale(1);opacity:.95}}
/* deep-linked race that's already over: a quiet full-map notice instead of a stale map */
#race-ended{position:absolute;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;
  pointer-events:none;background:rgba(6,6,15,.82);font-family:'Press Start 2P';font-size:26px;
  color:var(--dim);text-align:center;letter-spacing:1px;text-shadow:3px 3px 0 #000}
#race-ended[hidden]{display:none}
/* backend unreachable / mid-deploy: a calm notice instead of letting the map thrash between
   the divergent states two backend containers serve during a rolling deploy */
#backend-msg{position:absolute;inset:0;z-index:650;display:flex;align-items:center;justify-content:center;
  pointer-events:none;background:rgba(6,6,15,.8);font-family:'Press Start 2P';font-size:15px;line-height:1.6;
  text-align:center;color:var(--amber);text-shadow:3px 3px 0 #000;padding:0 18px}
#backend-msg.offline{color:var(--red)}
#backend-msg[hidden]{display:none}
.leaflet-container{background:var(--mapbg);font-family:'VT323',monospace}
/* single dark basemap, brightened + higher contrast so roads/edges and the
   street labels read clearly without crushing to black */
.leaflet-tile{filter:brightness(2.25) contrast(1.55) saturate(1.4) hue-rotate(-6deg)}
.leaflet-control-attribution{background:rgba(0,0,0,.5)!important;color:#456!important;font-size:10px}
.leaflet-control-attribution a{color:#69c!important}
.leaflet-bar a{background:#0a0a18;color:var(--green);border-color:var(--line)}
/* default Leaflet turns the +/- buttons white on hover — just lighten them a touch instead */
.leaflet-bar a:hover,.leaflet-bar a:focus{background:#1c1c38;color:var(--green);border-color:var(--line)}
.leaflet-bar a.leaflet-disabled{background:#0a0a18;color:#2a2a3a}

.legend{
  flex:0 0 auto; display:flex; gap:14px; flex-wrap:wrap; padding:6px 10px;
  font-size:14px; color:var(--dim); border-top:2px solid var(--line); background:#08081a;
}
.legend .sw{display:inline-block;width:11px;height:11px;margin-right:5px;vertical-align:-1px;border:1px solid #000}
.sw.hub{background:repeating-conic-gradient(#fff 0 25%, #000 0 50%) 0/8px 8px}
.sw.lead{background:var(--gold);box-shadow:0 0 6px var(--gold)}
.sw.run{background:var(--cyan)}
.sw.eta{background:transparent;border:1px dashed var(--cyan)}

/* map markers (DivIcons) */
.hub-marker{position:relative;transition:opacity .3s}
.hub-marker.dim{opacity:.32;filter:grayscale(.55)}
.hub-marker.dim .hub-ring{display:none}
.hub-flag{
  width:14px;height:14px;border:2px solid #fff;
  background:repeating-conic-gradient(#fff 0 25%, #000 0 50%) 0/7px 7px;
  box-shadow:0 0 0 2px #000,0 0 12px rgba(255,255,255,.5);
}
.hub-dot{width:11px;height:11px;border:2px solid #fff;border-radius:50%}
/* each route's own solid finish dot, in the runner's colour, at the end of its route */
.fin-dot{border:2px solid #000;border-radius:50%}
/* checkered finish flag at the top of the finish hull */
.fin-flag .pole{position:absolute;left:0;bottom:0;width:3px;height:30px;background:#fff;box-shadow:0 0 2px #000}
.fin-flag .cloth{position:absolute;left:3px;top:0;width:21px;height:15px;border:1px solid #000;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='2' height='2' fill='%23000'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23000'/%3E%3C/svg%3E") 0/7px 7px;box-shadow:0 0 6px rgba(0,0,0,.7)}
.hub-ring{
  position:absolute; left:50%; top:50%; width:16px;height:16px;
  border:3px solid var(--green); border-radius:50%;
  transform:translate(-50%,-50%); animation:ring 2s ease-out infinite; opacity:0;
  box-shadow:0 0 12px currentColor;
}
@keyframes ring{0%{width:16px;height:16px;opacity:1}70%{opacity:.45}100%{width:170px;height:170px;opacity:0}}
.hub-label{
  position:absolute; left:16px; top:-4px; white-space:nowrap;
  font-family:'Press Start 2P'; font-size:11px; color:#eaf2ff;
  text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000,0 0 6px rgba(0,0,0,.9);
}
/* a centred pill that grows to fit the line number (1-3 digits) */
.run-dot{position:absolute;left:12px;top:12px;transform:translate(-50%,-50%);
  min-width:22px;height:22px;padding:0 5px;border:2px solid #000;box-shadow:0 0 8px rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;border-radius:4px;white-space:nowrap}
.run-dot b{font-family:'Press Start 2P';font-size:11px;color:#001;line-height:1}
.run-dot.lead{min-width:26px;height:28px;border:2px solid #fff;box-shadow:0 0 11px rgba(255,255,255,.55)}
.run-dot.lead b{font-size:13px}
.run-dot.eta{border-style:dashed;border-color:#fff;opacity:.82}
.run-dot.fin{box-shadow:0 0 0 3px var(--green)}
/* clearly STOPPED (fresh GPS but ~0 speed: red light / boarding) — amber border so the user knows
   the bus is actually halted, not just missing GPS. After .lead/.eta so it overrides their borders. */
.run-dot.stopped{border:2px solid #ffd23f;box-shadow:0 0 11px rgba(255,210,63,.7)}
.run-tip.stopped{color:#ffd23f!important;border-color:#ffd23f!important}
/* disqualified (GPS down ≥20 s): dim, red-dashed, struck-through name — stays for the race */
.run-dot.dq{border-style:dashed;border-color:#ff5a5a;opacity:.5}
.run-marker .dot-label.dq{text-decoration:line-through;color:#ff8a8a;opacity:.7}
/* GPS-down warning tag (amber, seconds counting up) — pulses to flag the disqual risk */
.run-marker .gps-tag{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  white-space:nowrap;font-family:'VT323';font-size:13px;line-height:1;color:#001;
  background:#ffd24a;border:1px solid #000;padding:2px 5px;border-radius:3px;
  box-shadow:1px 1px 0 #000;pointer-events:none;letter-spacing:.02em;
  animation:gps-pulse 1s ease-in-out infinite}
@keyframes gps-pulse{0%,100%{opacity:1}50%{opacity:.55}}
/* the DISQUALIFIED stamp shown for 4 s when the break is called (red, steady) */
.run-marker .gps-tag.dq{background:#ff3b3b;color:#fff;font-weight:bold;animation:none;
  border-color:#000;box-shadow:1px 1px 0 #000,0 0 8px rgba(255,59,59,.7)}
.run-marker .dot-label{position:absolute;top:30px;left:50%;transform:translateX(-50%);
  white-space:nowrap;font-family:'VT323';font-size:14px;line-height:1;color:#dfe9f2;
  text-shadow:0 0 4px #000,1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;
  pointer-events:none}
.run-tip{background:#0a0a18!important;border:2px solid var(--line)!important;color:var(--ink)!important;
  font-family:'VT323'!important;font-size:15px!important;box-shadow:2px 2px 0 #000!important;border-radius:0!important}
.run-tip::before{display:none!important}

/* ---------------------------------------------------------------- tote board (own page) */
#tote{flex:1 1 auto; min-height:0; margin:12px}
/* ---- balance-history sparkline (top of the STATS page) ---------------------- */
#bal-card{margin:12px 12px 0;border:2px solid var(--line);background:#08091a;
  padding:10px 12px;box-shadow:2px 2px 0 #000}
.bal-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.bal-top .stat-label{margin:0}
.bal-delta{font-size:12px;letter-spacing:1px;margin-left:auto}
.bal-delta.up{color:var(--green);text-shadow:0 0 6px rgba(57,255,20,.5)}
.bal-delta.down{color:var(--red);text-shadow:0 0 6px rgba(255,59,59,.5)}
.bal-chart{width:100%}
.bal-svg{width:100%;height:auto;display:block;overflow:visible}
.bal-line{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.bal-svg.up .bal-line{stroke:var(--green);filter:drop-shadow(0 0 3px rgba(57,255,20,.6))}
.bal-svg.down .bal-line{stroke:var(--red);filter:drop-shadow(0 0 3px rgba(255,59,59,.6))}
.bal-area{stroke:none;opacity:.13}
.bal-svg.up .bal-area{fill:var(--green)}
.bal-svg.down .bal-area{fill:var(--red)}
.bal-base{stroke:var(--dim);stroke-width:1;stroke-dasharray:4 4;opacity:.7}
.bal-dot{stroke:#08091a;stroke-width:2}
.bal-svg.up .bal-dot{fill:var(--green)}
.bal-svg.down .bal-dot{fill:var(--red)}
.bal-empty{color:var(--dim);font-size:12px;padding:14px 2px;text-align:center}

#tote-grid{
  flex:1 1 auto; display:grid;
  grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(130px,1fr);
  gap:12px; padding:12px; min-height:0;
}
.stat.wide{grid-column:1 / -1}   /* RECENT RESULTS spans the full width on its own row */
.stat{border:2px solid var(--line);background:#08091a;padding:8px;display:flex;flex-direction:column;min-height:0;box-shadow:2px 2px 0 #000}
.stat-label{font-size:9px;color:var(--cyan);letter-spacing:1px;margin-bottom:6px;text-shadow:0 0 6px rgba(0,229,255,.4)}
.stat-num{font-family:'Press Start 2P';font-size:32px;color:var(--green);text-shadow:0 0 10px var(--green);margin-top:2px}
.stat-num.sm{font-size:24px}
.stat-sub{font-size:15px;color:var(--dim);margin-top:auto}
.chart{display:flex;flex-direction:column;gap:3px;justify-content:center;flex:1}
.chart .row{display:grid;grid-template-columns:34px 1fr 30px;gap:6px;align-items:center;font-size:15px}
.chart .row .k{color:var(--amber);text-align:right}
.chart .row .b{height:13px;background:#05050d;border:1px solid var(--line);position:relative}
.chart .row .b i{position:absolute;left:0;top:0;bottom:0;background:repeating-linear-gradient(90deg,var(--magenta) 0 5px,#4a0d29 5px 7px);box-shadow:0 0 6px rgba(255,46,136,.5)}
.chart .row.hot .b i{background:repeating-linear-gradient(90deg,var(--gold) 0 5px,#5a4400 5px 7px)}
.chart .row .v{color:var(--dim);font-size:13px}
.recent{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px;font-size:16px}
.recent .r{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;border-bottom:1px dotted var(--line);padding:3px 0;align-items:baseline}
.recent .r .hub{color:var(--cyan)}
.recent .rwin{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.recent .rt{font-style:normal;font-family:'Press Start 2P',monospace;font-size:8px;margin-left:6px}
.recent .rt.fav{color:var(--dim)}
.recent .rt.up{color:var(--amber);text-shadow:0 0 6px rgba(255,176,0,.5)}
.recent .rt.void{color:var(--magenta)}
.recent .rbet{text-align:right;white-space:nowrap}
.recent .rmoney{color:var(--gold)}
.recent .rodds{color:var(--green)}
.recent .rtaker{color:var(--cyan);font-size:14px}
.recent .r.flash{animation:rflash 1.2s steps(2) 2}
@keyframes rflash{50%{background:rgba(57,255,20,.18)}}

@media(max-width:1100px){
  /* stacked cards-over-map: minmax(0,…) lets the rows SHRINK to the viewport instead of
     overflowing it (plain 1fr keeps each row at its min-content height -> too tall). The
     map gets a slightly smaller share so the pair fits comfortably. */
  #grid{grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) minmax(0,0.9fr); overflow:hidden}
  /* no live-races card (just the paddock left up top) -> shrink the cards row, let the map have
     most of the height instead of the paddock ballooning to fill it */
  body.no-live #grid{grid-template-rows:minmax(0,0.42fr) minmax(0,1fr)}
  #tote-grid{grid-auto-rows:minmax(120px,auto)}
  #tote{height:auto}
}

/* ---- mobile: let the whole page scroll, stack the panels, give them real height */
@media(max-width:760px){
  body{overflow:auto}
  .crt{height:auto; min-height:100vh}
  #topbar{grid-template-columns:1fr; row-gap:4px}
  .title{font-size:20px} .subtitle{font-size:13px}
  .status{grid-row:auto; grid-column:1; justify-content:flex-start}
  #grid{display:block; padding:8px}
  #left-col{display:block}
  #paddock-col,#races-col,#map-col{overflow:visible; margin-bottom:10px}
  #paddock,#races{overflow:visible}
  #map-col{height:72vh;min-height:340px;display:flex;flex-direction:column}
  body.no-live #map-col{height:88vh}   /* no live-races card -> map takes the freed space */
  #map{flex:1 1 auto;height:auto;min-height:0}
  .panel{display:block}
  #tote{margin:8px}
  #tote-grid{grid-template-columns:1fr; grid-auto-rows:auto}
  .stat{min-height:120px}
}

/* =====================================================================
   BETTING — wallet chip, paddock bet buttons, bet-slip modal, toasts,
   HOW-TO page, standings. Same retro-CRT palette as the rest of the UI.
   ===================================================================== */
.wallet{
  font-family:'Press Start 2P',monospace; font-size:11px; cursor:pointer;   /* match the LIVE badge */
  display:inline-flex; align-items:center; gap:.4em; color:var(--gold);
  background:#161024; border:2px solid var(--gold); border-radius:2px; padding:7px 10px;
  text-shadow:0 0 7px rgba(255,210,63,.55); box-shadow:0 0 9px rgba(255,210,63,.16);
}
/* keep the LIVE badge, the wallet and the notify/install button the SAME box in the status bar —
   pin one height + line-height so the notify button's color emoji (🔔/📱) can't make it taller */
.status .wallet, .status .badge, .status .notif-btn{ box-sizing:border-box; height:32px; line-height:1 }
.wallet:hover{ background:#1f1730; box-shadow:0 0 13px rgba(255,210,63,.4) }
.wallet .coin{ color:var(--gold) }
.wallet.debt{ color:var(--red); border-color:var(--red); text-shadow:0 0 7px rgba(255,59,59,.6); box-shadow:0 0 9px rgba(255,59,59,.2) }
.wallet.debt .coin{ color:var(--red) }

/* paddock bet cell: BET button (hover-revealed) or your-stake chip */
.brow{ grid-template-columns:46px 1fr 64px 62px }   /* widen the action column */
.bbet{ text-align:center; font-size:14px; padding:5px 0; border-radius:2px; line-height:1 }
.betbtn{
  font-family:'VT323',monospace; letter-spacing:1px; cursor:pointer;
  color:var(--green); background:#0c2114; border:2px solid #1f5c33;
  opacity:.45; transition:opacity .12s, box-shadow .12s, background .12s;
}
.brow:hover .betbtn{ opacity:1 }
.betbtn:hover{ background:#10381f; border-color:var(--green); box-shadow:0 0 9px rgba(57,255,20,.5); color:#eaffea }
.bbet.mine{ color:var(--gold); border:2px solid var(--gold); background:#1b1606;
  text-shadow:0 0 6px rgba(255,210,63,.5); font-size:15px; white-space:nowrap }
/* a heating-up push pre-selects the favourite: light up its row + BET button so it's the obvious tap */
.brow.picked{ background:rgba(57,255,20,.07); box-shadow:inset 0 0 0 1px rgba(57,255,20,.35) }
.betbtn.picked{ opacity:1; color:#eaffea; background:#10381f; border-color:var(--green);
  animation:betpulse 1.1s ease-in-out infinite }
@keyframes betpulse{ 0%,100%{ box-shadow:0 0 6px rgba(57,255,20,.4) } 50%{ box-shadow:0 0 16px rgba(57,255,20,.85) } }

/* ---- bet-slip modal ---- */
.modal{ position:fixed; inset:0; z-index:12000; display:flex; align-items:center; justify-content:center;
  background:rgba(4,4,14,.78); backdrop-filter:blur(2px); padding:18px }
.modal[hidden]{ display:none }
.modal-card{ width:min(420px,94vw); background:linear-gradient(180deg,#11112a,#0a0a18);
  border:3px solid var(--green); box-shadow:0 0 0 3px #000,0 0 26px rgba(57,255,20,.3);
  padding:16px 16px 14px; image-rendering:pixelated }
/* race went off while the slip was open: flash the whole popup red, then it auto-dismisses */
.modal-card.closing{ border-color:var(--red); animation:bmclose 1.6s ease-out forwards }
@keyframes bmclose{
  0%{ box-shadow:0 0 0 3px #000,0 0 30px rgba(255,59,59,.85); transform:scale(1) }
  12%{ transform:scale(1.015) }
  70%{ box-shadow:0 0 0 3px #000,0 0 22px rgba(255,59,59,.5); opacity:1 }
  100%{ box-shadow:0 0 0 3px #000,0 0 10px rgba(255,59,59,.2); opacity:0; transform:scale(.97) } }
.bm-head{ display:flex; align-items:center; gap:10px }
.bm-route{ font-family:'Press Start 2P'; font-size:13px; color:#001; padding:8px 10px; border:2px solid #000; min-width:42px; text-align:center }
.bm-name{ flex:1; font-size:26px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* bigger touch target: the glyph stays put (negative margins absorb the padding) but the
   tappable box grows ~28px wider and ~24px taller so it's easy to hit */
.bm-x{ background:none; border:none; color:var(--dim); font-size:30px; cursor:pointer; line-height:1;
  padding:12px 14px; margin:-12px -10px -12px 0; -webkit-tap-highlight-color:transparent }
.bm-x:hover{ color:var(--red) }
.bm-sub{ color:var(--dim); font-size:18px; margin:6px 2px 8px }
.bm-sub b{ color:var(--magenta); text-shadow:0 0 7px rgba(255,46,136,.5) }
/* live "betting closes in" countdown — nudges you to hurry before the race goes off */
.bm-off{ font-family:'Press Start 2P'; font-size:11px; letter-spacing:.5px; color:var(--dim);
  border:2px solid rgba(57,255,20,.35); border-radius:4px; padding:8px 10px; margin:0 2px 12px;
  text-align:center }
.bm-off b{ color:var(--green); text-shadow:0 0 7px rgba(57,255,20,.55) }
.bm-off.urgent{ color:var(--red); border-color:var(--red); animation:bmoffpulse 1s steps(2) infinite }
.bm-off.urgent b{ color:var(--red); text-shadow:0 0 8px rgba(255,59,59,.6) }
.bm-off.closed{ color:var(--red); border-color:var(--red); animation:none }
@keyframes bmoffpulse{ 50%{ box-shadow:0 0 13px rgba(255,59,59,.55); border-color:#ff7a7a } }
.bm-amt{ display:flex; gap:8px; align-items:stretch }
.bm-step{ width:48px; font-family:'Press Start 2P'; font-size:16px; cursor:pointer;
  background:#0c2114; color:var(--green); border:2px solid #1f5c33 }
.bm-step:hover{ background:#10381f; border-color:var(--green) }
/* display-only stake readout (a <div>, not an <input>, so iOS never shows a keyboard for it) */
.bm-input{ flex:1; display:flex; align-items:center; justify-content:center; min-width:0;
  font-family:'VT323',monospace; font-size:40px; line-height:1;
  background:#06060f; color:var(--gold); border:2px solid var(--line);
  text-shadow:0 0 9px rgba(255,210,63,.5);
  user-select:none; -webkit-user-select:none }
.bm-chips{ display:flex; gap:8px; margin:10px 0 }
.bm-chip{ flex:1; font-family:'VT323',monospace; font-size:22px; cursor:pointer;
  background:#12121f; color:var(--cyan); border:2px solid var(--line); padding:6px 0 }
.bm-chip:hover{ border-color:var(--cyan); color:#dffaff; box-shadow:0 0 8px rgba(0,229,255,.35) }
.bm-payout{ color:var(--dim); font-size:19px; margin:4px 2px 0 }
.bm-payout b{ color:var(--green); text-shadow:0 0 7px rgba(57,255,20,.5) }
.bm-err{ color:var(--red); font-size:18px; margin:9px 2px 0; text-shadow:0 0 6px rgba(255,59,59,.4) }
.bm-actions{ display:flex; gap:10px; margin-top:14px }
.bm-cancel,.bm-go{ flex:1; font-family:'Press Start 2P'; font-size:13px; padding:13px 0; cursor:pointer; border:2px solid }
.bm-cancel{ background:#15151f; color:var(--dim); border-color:var(--line) }
.bm-cancel:hover{ color:var(--ink) }
.bm-go{ background:#0c2114; color:var(--green); border-color:var(--green); text-shadow:0 0 8px rgba(57,255,20,.6) }
.bm-go:hover{ background:#10481f; box-shadow:0 0 14px rgba(57,255,20,.5) }
.bm-go:disabled{ opacity:.5; cursor:default }

/* ---- toasts ---- */
#toast-host{ position:fixed; left:0; right:0; bottom:18px; z-index:13000; display:flex; flex-direction:column;
  align-items:center; gap:9px; pointer-events:none }
.toast{ font-family:'VT323',monospace; font-size:21px; color:var(--ink);
  background:linear-gradient(180deg,#141430,#0b0b1c); border:2px solid var(--cyan);
  box-shadow:0 0 0 2px #000,0 0 16px rgba(0,229,255,.3); padding:11px 18px; border-radius:2px;
  opacity:0; transform:translateY(14px); transition:opacity .3s, transform .3s; max-width:92vw }
.toast.in{ opacity:1; transform:translateY(0) }
.toast b{ color:var(--cyan) }
.toast.ok{ border-color:var(--green); box-shadow:0 0 0 2px #000,0 0 16px rgba(57,255,20,.3) }
.toast.ok b{ color:var(--green) }
.toast.win{ border-color:var(--gold); box-shadow:0 0 0 2px #000,0 0 22px rgba(255,210,63,.5); font-size:24px }
.toast.win b{ color:var(--gold); text-shadow:0 0 8px rgba(255,210,63,.6) }
.toast.lose{ border-color:var(--red); box-shadow:0 0 0 2px #000,0 0 16px rgba(255,59,59,.3) }
.toast.lose b{ color:var(--red) }
.toast.warn{ border-color:var(--amber); box-shadow:0 0 0 2px #000,0 0 16px rgba(255,176,0,.3) }
.toast.warn b{ color:var(--amber) }

/* ---- HOW TO page ---- */
.howto{ overflow:auto }
.howto-body{ padding:14px; display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px; align-content:start }
.ht-card{ border:2px solid var(--line); background:#0a0a1c; box-shadow:3px 3px 0 #000; padding:14px 16px 16px }
.ht-card h3{ font-family:'Press Start 2P'; font-size:13px; color:var(--cyan); margin:0 0 11px;
  text-shadow:0 0 7px rgba(0,229,255,.45); line-height:1.5 }
.ht-card p{ font-size:20px; line-height:1.32; color:var(--ink); margin:0 }
.ht-card b{ color:#fff } .ht-card b.g{ color:var(--green); text-shadow:0 0 7px rgba(57,255,20,.5) }
.ht-hero{ grid-column:1/-1; border-color:var(--gold); box-shadow:3px 3px 0 #000,0 0 16px rgba(255,210,63,.16) }
.ht-hero h3{ color:var(--gold); font-size:16px; text-shadow:0 0 8px rgba(255,210,63,.5) }
.ht-hero p{ font-size:22px }
.ht-board h3{ color:var(--gold); text-shadow:0 0 7px rgba(255,210,63,.45) }
.lb-list{ display:flex; flex-direction:column; gap:5px }
.lb-row{ display:grid; grid-template-columns:30px 1fr auto auto; gap:10px; align-items:baseline;
  font-size:20px; padding:4px 6px; border-bottom:1px solid var(--grid) }
.lb-row.me{ background:#161024; border:2px solid var(--gold); border-radius:2px }
.lb-rank{ color:var(--dim) } .lb-uid{ color:var(--ink) }
.lb-row.me .lb-uid{ color:var(--gold); text-shadow:0 0 6px rgba(255,210,63,.5) }
.lb-bets{ color:var(--dim); font-size:16px }
.lb-net{ font-size:22px; text-align:right }
/* font-family:inherit cancels the global `.pos` pixel-font rule so +N matches -N's size, green */
.lb-net.pos{ color:var(--green); text-shadow:0 0 6px rgba(57,255,20,.45); font-family:inherit }
.lb-net.neg{ color:var(--red); text-shadow:0 0 6px rgba(255,59,59,.4) }

/* ---- LEADERBOARD tab (recent + all-time + your name) ------------------------- */
#leaderboard{ flex:1 1 auto; min-height:0; margin:12px; overflow:auto }
.lb-body{ padding:14px; display:flex; flex-direction:column; gap:16px }
.lb-you{ border:2px solid var(--gold); background:#161024; box-shadow:3px 3px 0 #000;
  padding:12px 14px; display:flex; flex-direction:column; gap:10px;
  box-shadow:3px 3px 0 #000,0 0 14px rgba(255,210,63,.14) }
.lb-you-line{ font-size:20px; color:var(--ink) }
.lb-you-name{ color:var(--gold); text-shadow:0 0 7px rgba(255,210,63,.5); font-weight:bold }
.lb-you-stat{ font-size:16px; margin-left:8px }
.lb-you-stat .pos{ color:var(--green); font-family:inherit } .lb-you-stat .neg{ color:var(--red) }
.lb-name-edit{ display:flex; gap:8px; flex-wrap:wrap }
.lb-name-input{ flex:1 1 200px; min-width:140px; font-family:'VT323',monospace; font-size:22px;
  background:#0a0a18; color:var(--ink); border:2px solid var(--line); padding:6px 10px; outline:none }
.lb-name-input:focus{ border-color:var(--gold); box-shadow:0 0 8px rgba(255,210,63,.3) }
.lb-name-save{ font-family:'Press Start 2P'; font-size:12px; cursor:pointer; color:#07071a;
  background:var(--gold); border:2px solid var(--gold); padding:0 16px; letter-spacing:1px }
.lb-name-save:hover{ box-shadow:0 0 10px rgba(255,210,63,.6) }
.lb-name-save:disabled{ opacity:.5; cursor:default; box-shadow:none }
.lb-name-msg{ font-size:17px; color:var(--green) }
.lb-name-msg.err{ color:var(--red) }
.lb-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:16px; align-items:start }
.lb-col{ border:2px solid var(--line); background:#0a0a1c; box-shadow:3px 3px 0 #000; padding:12px 14px }
.lb-col-h{ font-family:'Press Start 2P'; font-size:11px; margin:0 0 12px; line-height:1.5 }
.lb-col-h.recent{ color:var(--amber); text-shadow:0 0 7px rgba(255,176,0,.4) }
.lb-col-h.day{ color:var(--gold); text-shadow:0 0 7px rgba(255,210,63,.4) }
.lb-col-h.day2{ color:#ff8a4c; text-shadow:0 0 7px rgba(255,138,76,.4) }
.lb-col-h.week{ color:var(--magenta); text-shadow:0 0 7px rgba(255,46,136,.4) }
.lb-col-h.month{ color:var(--green); text-shadow:0 0 7px rgba(57,255,20,.4) }
.lb-col-h.alltime{ color:var(--cyan); text-shadow:0 0 7px rgba(0,229,255,.4) }
.lb-row.top1 .lb-uid{ color:var(--gold) } .lb-row.top1 .lb-rank{ color:var(--gold) }
@media (max-width:1080px){ .lb-cols{ grid-template-columns:1fr 1fr } }
@media (max-width:760px){ #leaderboard{ margin:8px } }
@media (max-width:480px){ .lb-cols{ grid-template-columns:1fr } }

/* odds price tick: fade the cell out then back in whenever its value changes (added by oddsFlash) */
@keyframes oddsfade{ 0%{opacity:1} 38%{opacity:0} 100%{opacity:1} }
.odds.flash,.bodds.flash{ animation:oddsfade .5s ease }

/* =====================================================================
   BET HIGHLIGHTS — wallet change animation, live-table + map markers
   ===================================================================== */
/* wallet: colour-coded pulse + a floating +N / -N that rises out of the chip */
.wallet{ position:relative }
@keyframes wpulse{ 0%{transform:scale(1)} 28%{transform:scale(1.16)} 100%{transform:scale(1)} }
.wallet.w-up{ animation:wpulse .55s ease; color:var(--green); border-color:var(--green);
  text-shadow:0 0 9px rgba(57,255,20,.7); box-shadow:0 0 18px rgba(57,255,20,.55) }
.wallet.w-up .coin{ color:var(--green) }
.wallet.w-down{ animation:wpulse .55s ease; color:var(--red); border-color:var(--red);
  text-shadow:0 0 9px rgba(255,59,59,.6); box-shadow:0 0 18px rgba(255,59,59,.5) }
.wallet.w-down .coin{ color:var(--red) }
.wfly{ position:absolute; left:50%; top:0; transform:translate(-50%,0); z-index:6; pointer-events:none;
  font-family:'Press Start 2P'; font-size:13px; white-space:nowrap; opacity:1;
  transition:transform .9s cubic-bezier(.2,.8,.3,1), opacity .9s ease }
.wfly.up{ color:var(--green); text-shadow:0 0 8px rgba(57,255,20,.8) }
.wfly.down{ color:var(--red); text-shadow:0 0 8px rgba(255,59,59,.7) }
.wfly.go{ opacity:0; transform:translate(-50%,-32px) }

/* live-race table: gold accent bar + a stake chip on the runner you backed */
.runner.bet{ background:rgba(255,210,63,.07) }
.runner.bet::before{ content:''; position:absolute; left:0; top:3px; bottom:3px; width:3px;
  background:var(--gold); box-shadow:0 0 8px rgba(255,210,63,.75) }
.runner .name .nrow{ display:flex; align-items:center; gap:7px; min-width:0 }
.runner .name .nrow .rid{ min-width:0 }
.mybet{ flex:0 0 auto; font-size:14px; color:var(--gold); background:#1b1606;
  border:1px solid var(--gold); border-radius:2px; padding:0 5px; line-height:1.5;
  text-shadow:0 0 6px rgba(255,210,63,.5); white-space:nowrap }

/* map dot: gold ring + a coin badge at the corner, gold name label, stake in the tooltip */
.run-dot.bet-on{ box-shadow:0 0 0 3px var(--gold),0 0 13px rgba(255,210,63,.85) }
.run-dot.bet-on.lead{ box-shadow:0 0 0 3px var(--gold),0 0 0 5px #fff,0 0 13px rgba(255,210,63,.85) }
.run-dot.bet-on.fin{ box-shadow:0 0 0 3px var(--green),0 0 0 6px var(--gold) }   /* your bet WON */
.run-dot.bet-on::after{ content:''; position:absolute; right:-10px; top:-10px; width:11px; height:11px;
  border-radius:50%; background:var(--gold); border:2px solid #1a1405; box-shadow:0 0 7px rgba(255,210,63,.95) }
.run-marker .dot-label.bet{ color:var(--gold); text-shadow:0 0 7px rgba(255,210,63,.75) }
.run-tip.bet{ border-color:var(--gold)!important }
.run-tip .tip-coin{ color:var(--gold)!important; text-shadow:0 0 6px rgba(255,210,63,.6) }

/* ============================ THE STABLE — bus/line form guide ===================== */
#stats{ flex:1 1 auto; min-height:0; margin:12px; overflow:hidden }
@media (max-width:560px){ #stats{ margin:8px } }
.stats-body{ display:flex; flex-direction:column; min-height:0; flex:1; padding:12px 14px 14px; gap:10px }
.stats-controls{ display:flex; flex-wrap:wrap; align-items:center; gap:10px }
.stats-tabs{ display:flex; gap:6px }
.stats-tabs button{ font-family:'Press Start 2P',monospace; font-size:11px; color:var(--dim);
  cursor:pointer; background:#0a0a18; border:2px solid var(--line); border-radius:2px; padding:8px 12px }
.stats-tabs button:hover{ color:var(--ink) }
.stats-tabs button.active{ color:var(--green); border-color:var(--green);
  text-shadow:0 0 7px rgba(57,255,20,.6); background:#0d160d }
.stats-search-wrap{ position:relative; flex:1 1 200px; min-width:140px; display:flex }
.stats-search{ flex:1 1 auto; min-width:0; font-family:'VT323',monospace; font-size:20px;
  color:var(--ink); background:#0a0a18; border:2px solid var(--line); border-radius:2px; padding:5px 30px 5px 10px }
.stats-search:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 9px rgba(0,229,255,.25) }
.stats-search::placeholder{ color:var(--dim) }
.stats-search-x{ position:absolute; right:4px; top:50%; transform:translateY(-50%); background:none;
  border:none; color:var(--dim); font-size:24px; line-height:1; cursor:pointer; padding:0 6px }
.stats-search-x:hover{ color:var(--red) }
.stats-sortl{ font-family:'Press Start 2P',monospace; font-size:9px; color:var(--dim);
  display:inline-flex; align-items:center; gap:7px }
select.stats-sort{ font-family:'VT323',monospace; font-size:18px; color:var(--amber);
  background:#0a0a18; border:2px solid var(--line); border-radius:2px; padding:5px 8px; cursor:pointer }
select.stats-sort:focus{ outline:none; border-color:var(--amber) }
.stats-meta{ font-family:'VT323',monospace; font-size:17px }

.stats-row{ display:grid; grid-template-columns:minmax(0,2.4fr) .8fr 1.1fr 1.1fr .9fr 1fr;
  align-items:center; gap:8px; padding:8px 10px; font-family:'VT323',monospace; font-size:20px;
  color:var(--ink); border:2px solid transparent; border-bottom:1px solid var(--line) }
.stats-head{ font-family:'Press Start 2P',monospace; font-size:9px; color:var(--dim);
  border-bottom:2px solid var(--line); padding-bottom:9px;
  background:var(--panel) }
/* the list is its own scroller below the header, so the header never needs to stick — and a
   sticky header inside the overflow:hidden panel was getting yanked up + clipped on focus-scroll */
.stats-list{ overflow-y:auto; min-height:0; flex:1 }
.stats-row.line, .stats-row.bus{ cursor:pointer }
.stats-row.line:hover, .stats-row.bus:hover{ border-color:var(--green); background:#0c150c;
  border-bottom-color:var(--green) }
.st-c{ text-align:right; white-space:nowrap }
.stats-head .st-c{ text-align:right }
.st-name{ display:flex; align-items:center; gap:8px; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap }
.st-sub{ font-size:15px }
.st-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:24px;
  padding:0 6px; font-family:'Press Start 2P',monospace; font-size:11px; color:#06110a;
  background:var(--green); border-radius:3px; box-shadow:0 0 8px rgba(57,255,20,.4) }
.st-badge.sm{ min-width:20px; height:19px; font-size:8px; background:var(--cyan); color:#04121a;
  box-shadow:0 0 7px rgba(0,229,255,.4) }
.st-more{ font-family:'VT323',monospace; font-size:16px; text-align:center; padding:12px }

/* detail modal */
.modal-card.stat-card{ width:min(760px,96vw); max-height:90vh; overflow-y:auto; position:relative;
  border-color:var(--cyan); box-shadow:0 0 0 3px #000,0 0 26px rgba(0,229,255,.3) }
.stat-card .bm-x{ position:absolute; right:4px; top:2px; z-index:3; margin:0 }
.sd-head{ border-bottom:2px solid var(--line); padding-bottom:10px; margin-bottom:12px; padding-right:30px }
.sd-title{ display:flex; align-items:center; gap:10px; font-family:'Press Start 2P',monospace;
  font-size:16px; color:var(--green); text-shadow:0 0 .25em rgba(57,255,20,.5); line-height:1.4 }
.sd-sub{ font-family:'VT323',monospace; font-size:18px; color:var(--dim); margin-top:7px;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.st-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; margin-bottom:14px }
.st-tile{ background:#0a0a18; border:2px solid var(--line); border-radius:3px; padding:9px 10px }
.st-tile.good{ border-color:var(--green) } .st-tile.bad{ border-color:var(--red) }
.stt-l{ font-family:'Press Start 2P',monospace; font-size:8px; color:var(--dim); margin-bottom:7px; line-height:1.4 }
.stt-v{ font-family:'VT323',monospace; font-size:26px; color:var(--ink); line-height:1 }
.st-tile.good .stt-v{ color:var(--green) } .st-tile.bad .stt-v{ color:#ff8a8a }
.sd-cols{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px }
@media (max-width:620px){ .sd-cols{ grid-template-columns:1fr } }
.sd-box{ background:#080812; border:2px solid var(--line); border-radius:3px; padding:10px 12px }
.sd-h{ font-family:'Press Start 2P',monospace; font-size:9px; color:var(--amber); margin-bottom:10px }

/* hub split bars */
.hb-row{ display:grid; grid-template-columns:auto 1fr 70px 28px; align-items:center; gap:7px;
  font-family:'VT323',monospace; font-size:17px; color:var(--ink); margin-bottom:6px }
.st-hubdot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 5px currentColor }
.hb-name{ color:var(--ink) } .hb-bar{ height:10px; background:#11111f; border-radius:2px; overflow:hidden }
.hb-bar i{ display:block; height:100%; border-radius:2px } .hb-n{ text-align:right; color:var(--dim) }

/* hour-of-day chart */
.hc{ display:flex; align-items:flex-end; gap:2px; height:74px; padding-bottom:14px; position:relative }
.hc-bar{ flex:1; height:100%; display:flex; align-items:flex-end; position:relative }
.hc-bar i{ display:block; width:100%; min-height:0; background:var(--cyan); border-radius:1px 1px 0 0;
  box-shadow:0 0 5px rgba(0,229,255,.5) }
.hc-bar .hc-x{ position:absolute; bottom:-14px; left:0; font-family:'VT323',monospace;
  font-size:13px; color:var(--dim) }

/* recent races + star runners */
.rr-list{ display:flex; flex-direction:column; gap:4px }
.rr{ display:flex; align-items:center; gap:8px; white-space:nowrap; overflow:hidden;
  font-family:'VT323',monospace; font-size:17px; color:var(--ink); padding:4px 0;
  border-bottom:1px solid #161624 }
.rr .st-hubdot{ flex:0 0 auto }
.rr-main{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis }
.rr-tag{ flex:0 0 auto; font-size:14px }
.rr-tag.win{ color:var(--green) } .rr-tag.lose{ color:var(--dim) } .rr-tag.void{ color:var(--amber) }
.rr-meta{ flex:0 0 auto; color:var(--cyan); font-size:15px }
.rr-t{ flex:0 0 auto; min-width:50px; text-align:right; font-size:15px }
.tb-list{ display:flex; flex-direction:column; gap:4px }
.tb-row{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:9px; cursor:pointer;
  font-family:'VT323',monospace; font-size:18px; color:var(--ink); padding:4px 6px; border-radius:2px }
.tb-row:hover{ background:#0c150c; color:var(--green) }
.tb-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tb-rec{ color:var(--dim) } .tb-pct{ color:var(--green); min-width:40px; text-align:right }
@media (max-width:560px){
  /* BY LINE only — busmode (the Garage) keeps all columns and scrolls horizontally instead */
  #stats:not(.busmode) .stats-row{ grid-template-columns:minmax(0,2fr) .7fr 1fr 1fr; font-size:17px }
  #stats:not(.busmode) .stats-row .st-c:nth-child(5),
  #stats:not(.busmode) .stats-row .st-c:nth-child(6){ display:none }
}

/* ===== THE GARAGE (bus ownership / style / trade) ============================== */
/* the owned-bus emoji that rides in front of the line number on the map dot + chips */
.bem{ font-style:normal; margin-right:1px }
.run-dot .bem{ font-size:.82em; margin-right:0 }
.garage{ overflow-y:auto }
.garage-wallet{ font-family:'Press Start 2P'; font-size:13px; color:var(--amber);
  text-shadow:0 0 8px rgba(255,176,0,.4); margin:10px 12px 4px }
.garage-wallet b{ color:var(--gold) }
.gar-block{ margin:14px 12px; }
.gar-h{ font-family:'Press Start 2P'; font-size:12px; color:var(--green);
  text-shadow:0 0 7px rgba(57,255,20,.45); margin-bottom:8px; letter-spacing:1px }
#gar-shop, #gar-mine, #gar-offers-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px }
#gar-offers-list{ grid-template-columns:1fr }
.bus-row{ display:flex; align-items:center; gap:9px; text-align:left; cursor:pointer;
  background:#0c0c1e; border:2px solid var(--line); box-shadow:2px 2px 0 #000; padding:7px 9px;
  font-family:'VT323',monospace; color:var(--ink); font-size:17px }
.bus-row:hover{ border-color:var(--green) }
.bus-chip{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:26px;
  padding:0 6px; border:2px solid #000; color:#001; font-family:'Press Start 2P'; font-size:11px;
  box-shadow:0 0 8px rgba(255,255,255,.25) }
.bus-chip.big{ min-width:56px; height:40px; font-size:15px }
.bus-line{ color:var(--dim); font-size:15px }
.bus-sub{ margin-left:auto; color:var(--ink); font-size:16px }
.gar-price{ color:var(--gold) }
.offer-row{ display:flex; align-items:center; gap:9px; background:#0c0c1e; border:2px solid var(--gold);
  box-shadow:2px 2px 0 #000; padding:7px 9px; font-family:'VT323'; font-size:17px; color:var(--ink) }
.offer-txt{ flex:1 1 auto }
.offer-btns{ display:flex; gap:6px }
.mini{ font-family:'Press Start 2P'; font-size:10px; padding:6px 8px; cursor:pointer; line-height:1;
  background:#161024; color:var(--ink); border:2px solid var(--line); border-radius:2px }
.mini:hover{ border-color:var(--green) }
.mini.ok{ color:var(--green); border-color:var(--green) }
.mini.no{ color:var(--red); border-color:var(--red) }
.mini.big{ font-size:13px; padding:11px 14px; width:100% }
/* bus modal */
.bus-mhead{ display:flex; align-items:center; gap:10px; margin-bottom:12px; position:relative }
.bus-mtitle{ font-family:'Press Start 2P'; font-size:13px; color:var(--green); line-height:1.5 }
.bus-mname{ font-family:'VT323'; font-size:18px; color:var(--gold); text-shadow:none }
.bus-mbody .bus-l{ display:block; font-family:'Press Start 2P'; font-size:10px; color:var(--amber);
  margin:12px 0 5px; letter-spacing:1px }
.bus-name-row,.bus-color-row,.bus-offer-row{ display:flex; gap:8px; align-items:center }
.bus-name-row input,.bus-offer-row input{ flex:1 1 auto; font-family:'VT323'; font-size:20px;
  background:#05050d; color:var(--ink); border:2px solid var(--line); padding:5px 8px }
#bus-color{ width:48px; height:34px; background:#05050d; border:2px solid var(--line); padding:2px; cursor:pointer }
.tiers{ display:flex; flex-direction:column; gap:8px; max-height:46vh; overflow-y:auto }
.tier-h{ font-family:'VT323'; font-size:16px; color:var(--dim); margin-bottom:3px }
.tier-h b{ color:var(--gold) }
.tier-em{ display:flex; flex-wrap:wrap; gap:5px }
.em-chip{ font-size:20px; line-height:1; padding:4px 5px; cursor:pointer; background:#0c0c1e;
  border:2px solid var(--line); border-radius:2px }
.em-chip:hover{ border-color:var(--green) }
.em-chip.on{ border-color:var(--gold); box-shadow:0 0 8px rgba(255,210,63,.5) }
.bus-owner{ font-family:'VT323'; font-size:18px; color:var(--ink) }
.sm{ font-size:14px } .dim.sm{ margin-top:8px }

/* garage sub-nav (MY FLEET / FORM GUIDE) */
.subnav{ display:flex; gap:8px; padding:8px 12px 0; }
.subnav button{ font-family:'Press Start 2P'; font-size:11px; padding:8px 12px; cursor:pointer;
  background:#0c0c1e; color:var(--dim); border:2px solid var(--line); border-radius:2px }
.subnav button.active{ color:var(--green); border-color:var(--green); text-shadow:0 0 7px rgba(57,255,20,.5) }
.subnav[hidden]{ display:none }
/* styled confirm */
#confirm-card{ width:min(360px,92vw) }
.cf-msg{ font-family:'VT323',monospace; font-size:20px; color:var(--ink); line-height:1.35; margin-bottom:16px }
.cf-msg b{ color:var(--gold) }
.cf-btns{ display:flex; gap:10px; justify-content:flex-end }
.cf-btns .mini{ font-size:11px; padding:9px 14px }

/* ===== Garage rework: customs everywhere, emoji alignment, modal polish ============ */
/* emoji that rides in front of a number/name — center it so it never sits low */
.bem{ font-style:normal; display:inline-flex; align-items:center; line-height:1; vertical-align:middle }
.run-dot b{ display:inline-flex; align-items:center; justify-content:center; gap:1px; line-height:1 }
.run-dot .bem{ font-size:.82em }
.rnm{ font-weight:inherit }                     /* owner colour applied inline */
.rid .bem,.bid .bem,.bnm .bem{ margin-right:2px; font-size:.95em }
/* scanlines on every modal card + let tall cards scroll */
.modal-card{ position:relative; overflow:hidden }
.modal-card::after{ content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); mix-blend-mode:multiply }
#bus-card{ width:min(440px,95vw); max-height:90vh; overflow-y:auto }
/* garage wallet + offers bar (atop the form table) */
#garage-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:8px 12px 0 }
#garage-bar[hidden]{ display:none }   /* empty (no offers) -> collapse, no stray padding */
.gb-h{ font-family:'Press Start 2P'; font-size:9px; color:var(--green); letter-spacing:1px; display:block; margin-bottom:5px }
#gar-offers{ flex:1 1 100%; margin-top:4px }
#gar-offers[hidden]{ display:none }
/* ownership tag in the form rows */
.own-tag{ font-family:'Press Start 2P'; font-size:8px; padding:3px 5px; margin-left:7px; border:1px solid var(--dim);
  color:var(--dim); border-radius:2px; vertical-align:middle; white-space:nowrap }
.own-tag.mine{ color:var(--gold); border-color:var(--gold); text-shadow:0 0 6px rgba(255,210,63,.5) }
.own-tag.buy{ color:var(--green); border-color:var(--green) }
.st-name .bnm{ font-weight:inherit }
/* the stats block embedded under the buy/style actions in the unified bus card */
.bus-stats{ margin-top:14px; border-top:2px solid var(--line); padding-top:12px }
.bus-stats .sd-head{ margin-bottom:8px }

/* bus card header dot — the racing-style badge, but flowing in the header (not map-absolute) */
.hdr-dot{ position:static!important; left:auto!important; top:auto!important; transform:none!important;
  flex:0 0 auto; min-width:40px; height:32px; padding:0 8px }
.hdr-dot b{ font-size:13px }
.bus-mname{ font-size:20px }

/* ===== bus card body — styled to match the bet slip (VT323 fields, big green actions) ===== */
.bus-body{ margin-top:10px }
.bs-field{ margin:14px 0 }
.bs-l{ font-family:'VT323',monospace; font-size:18px; color:var(--ink); margin-bottom:6px }
.bs-l .dim{ font-size:16px }
.bs-row{ display:flex; gap:8px; align-items:stretch }
.bs-input{ flex:1; min-width:0; font-family:'VT323',monospace; font-size:24px; line-height:1;
  background:#06060f; color:var(--gold); border:2px solid var(--line); padding:5px 10px;
  text-shadow:0 0 8px rgba(255,210,63,.4) }
/* trade-a-bus picker: your buses as selectable chips in their own custom colour/emoji form */
.bs-tradehdr{ margin:10px 0 6px; font-size:13px; letter-spacing:1px; text-align:center }
/* one horizontally-scrollable row (don't wrap) — swipe sideways through your fleet. The wrapper
   carries an edge fade on whichever side has more (toggled by .fade-l/.fade-r from JS scroll pos). */
.bs-trade-wrap{ position:relative }
.bs-trade-pick{ display:flex; flex-wrap:nowrap; gap:6px; overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; padding-bottom:4px;
  scrollbar-width:none }
.bs-trade-pick::-webkit-scrollbar{ display:none }
/* fade the chips into transparency on whichever side has more (mask = no bg-colour guess needed) */
.bs-trade-wrap.fade-r:not(.fade-l) #bus-trade-pick{ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent) }
.bs-trade-wrap.fade-l:not(.fade-r) #bus-trade-pick{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 30px); mask-image:linear-gradient(90deg,transparent,#000 30px) }
.bs-trade-wrap.fade-l.fade-r #bus-trade-pick{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent); mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent) }
.bs-tradechip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:#06060f; border:2px solid var(--line); padding:4px 9px 4px 5px;
  font-family:'VT323',monospace; font-size:18px; color:var(--ink) }
.bs-tradechip .run-dot{ position:static; transform:none; margin:0 }
.bs-tradechip.on{ border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan),0 0 12px rgba(0,229,255,.4);
  color:var(--cyan); text-shadow:0 0 8px rgba(0,229,255,.4) }
.bs-tradenm{ max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* hide the number-input spinner arrows on the offer field (Firefox + WebKit/Blink) */
.bs-input[type=number]{ -moz-appearance:textfield; appearance:textfield }
.bs-input::-webkit-outer-spin-button,
.bs-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.bs-color{ width:56px; padding:3px; background:#06060f; border:2px solid var(--line); cursor:pointer }
.bs-mini{ font-family:'Press Start 2P'; font-size:11px; padding:0 14px; cursor:pointer; white-space:nowrap;
  background:#0c2114; color:var(--green); border:2px solid #1f5c33 }
.bs-mini:hover{ background:#10381f; border-color:var(--green) }
.bs-mini.ghost{ background:#12121f; color:var(--dim); border-color:var(--line) }
.bs-mini.ghost:hover{ color:var(--ink); border-color:var(--ink) }
.bm-go.wide{ width:100%; flex:none; margin-top:6px }
.bs-you{ color:var(--gold); text-shadow:0 0 7px rgba(255,210,63,.5) }
/* emoji tier picker */
.bs-tiers{ display:flex; flex-direction:column; gap:9px }
.bs-tier-h{ font-family:'VT323',monospace; font-size:16px; color:var(--dim); text-transform:uppercase; letter-spacing:1px }
.bs-tier-h b{ color:var(--gold) }
.bs-tier-em{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px }
.bs-em{ font-size:23px; line-height:1; padding:5px 6px; cursor:pointer; background:#0c0c1e;
  border:2px solid var(--line); border-radius:2px }
.bs-em:hover{ border-color:var(--green) }
.bs-em.on{ border-color:var(--gold); box-shadow:0 0 9px rgba(255,210,63,.5) }
.bs-nostats{ font-family:'VT323',monospace; font-size:18px; margin-top:14px; border-top:2px solid var(--line); padding-top:12px }

/* ===== Garage BY-BUS / MY-BUSES column cells ===== */
.st-own{ text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); min-width:0 }
.stats-head .st-own{ color:var(--dim) }
.st-own-you{ color:var(--gold); text-shadow:0 0 6px rgba(255,210,63,.5) }
/* clickable owner name -> their player profile */
.st-own-link{ background:none; border:0; padding:0; font:inherit; color:var(--cyan); cursor:pointer;
  text-decoration:underline; text-decoration-style:dotted; text-shadow:0 0 6px rgba(0,229,255,.35);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.st-own-link:hover{ text-decoration-style:solid }
/* ---- player profile modal (wallet graph + their buses) ---- */
#player-card{ width:min(440px,95vw); max-height:90vh; overflow-y:auto }
.pl-bal{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:10px 0 6px }
.pl-now{ font-family:'Press Start 2P',monospace; font-size:20px; color:var(--gold); text-shadow:0 0 10px rgba(255,210,63,.5) }
.pl-bal .bal-delta{ margin-left:auto }
.pl-l{ font-size:11px; letter-spacing:1px; color:var(--cyan); text-shadow:0 0 6px rgba(0,229,255,.4); margin:12px 0 6px }
.pl-buses{ display:flex; flex-direction:column; gap:6px }
.pl-bus{ display:flex; align-items:center; gap:9px; cursor:pointer; text-align:left;
  background:#06060f; border:2px solid var(--line); padding:5px 9px;
  font-family:'VT323',monospace; font-size:18px; color:var(--ink) }
.pl-bus:hover{ border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan),0 0 12px rgba(0,229,255,.3) }
.pl-bus .run-dot{ position:static; transform:none; margin:0 }
.pl-bnm{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pl-bwon{ color:var(--gold); font-size:15px; white-space:nowrap }
/* emoji sits on the text baseline of the VT323 name (was floating) */
.st-name .bnm{ display:inline-flex; align-items:baseline; gap:3px; min-width:0; overflow:hidden; text-overflow:ellipsis }
.st-name .bem{ align-self:center; transform:translateY(.02em) }

/* tappable line badge (opens the bus card) in paddock + live races */
.route.tapbus{ cursor:pointer }
.route.tapbus:hover{ box-shadow:0 0 0 2px #fff, 0 0 8px rgba(255,255,255,.5) }

/* ===== batch fixes: columns, scrollbars, clear-X, alignment ===== */
/* BY BUS / MY BUSES: BUS | OWNER | WON | LATEST PRICE | WIN% | BACKED — ALL columns always shown.
   On a tight layout the table scrolls/drags HORIZONTALLY instead of dropping columns. */
#stats.busmode .stats-row{ grid-template-columns:minmax(0,1.8fr) 1fr .9fr .9fr .7fr .8fr }
/* the header + list share one horizontal scroller. Desktop: passthrough (header fixed, list
   scrolls vertically). Tight: the table scrolls sideways so every column is reachable. */
.stats-scroll{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column }
@media (max-width:760px), (max-height:600px){
  .stats-scroll{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch }
  #stats-list{ flex:none; overflow:visible }
  #stats.busmode .stats-scroll .stats-row{ min-width:560px; font-size:17px }
  #stats:not(.busmode) .stats-scroll .stats-row{ min-width:560px }
}
/* keep the column-title row at the small wide size on every layout — the per-row mobile/busmode
   font-size was bleeding onto the header row and blowing the titles up. Higher specificity + late
   in the file so it always wins over .stats-row{font-size:17px} and #stats.busmode .stats-row. */
#stats.busmode .stats-scroll .stats-row.stats-head,
#stats .stats-scroll .stats-row.stats-head,
#stats .stats-row.stats-head{ font-size:9px; letter-spacing:0 }
/* clear-✕ tucked into a text input */
.bs-inwrap{ position:relative; flex:1; display:flex; min-width:0 }
.bs-inwrap .bs-input{ flex:1; padding-right:30px }
.bs-clear{ position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none;
  color:var(--dim); font-size:22px; line-height:1; cursor:pointer; padding:0 4px }
.bs-clear:hover{ color:var(--red) }
/* popup badge: emoji + number truly centered together */
.run-dot.hdr-dot b{ display:inline-flex; align-items:center; justify-content:center; gap:2px; line-height:1 }
.run-dot.hdr-dot .bem{ font-size:.95em; line-height:1; display:inline-flex; align-items:center; transform:translateY(-.08em) }
.offer-row .hdr-dot{ flex:0 0 auto }
/* style EVERY scrollbar like the races list (popups, stats, howto, garage…) */
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-thumb{ background:var(--line); border:2px solid #000 }
*::-webkit-scrollbar-thumb:hover{ background:#34465c }
*::-webkit-scrollbar-track{ background:#05050d }
html{ scrollbar-color:var(--line) #05050d }
/* "SEARCHING FOR RACES" etc. vertically centered in its panel */
.empty{ flex:1 1 auto; display:flex; align-items:center; justify-content:center }
@media(max-width:760px){ .clock{ margin-left:auto } }   /* right-align the clock when tight */

/* the form stats embedded in the (narrow) bus card must fit it — stack the wide 2-col blocks */
.bus-stats .sd-cols{ grid-template-columns:1fr }
.bus-stats .st-tiles{ grid-template-columns:repeat(3,1fr) }
.bus-stats .sd-box{ min-width:0 }

/* the ⬤ coin glyph, used wherever coins are shown — sized down to a tidy dot and optically
   centered with the text beside it (it renders large + low by default in most fonts) */
.coin, .cdot{ font-size:.6em; vertical-align:middle; position:relative; top:-0.06em; line-height:1 }

/* garage/stats: only the LIST scrolls — pin the bar, controls, meta and column header so the
   header row never gets shrunk/clipped at the top when vertical space is tight */
#garage-bar, .stats-controls, #stats-meta, #stats-head{ flex:0 0 auto }

/* SHORT viewports (landscape phones are >760px wide, so the mobile rules miss them): the panel's
   fixed header would swallow all the height and collapse the scrollable list. Shrink the column
   titles and let the WHOLE stats panel scroll so you never lose the ability to scroll the table. */
@media (max-height:600px){
  #stats{ overflow-y:auto; -webkit-overflow-scrolling:touch }
  #stats .stats-body{ min-height:0 }
  #stats .stats-list{ overflow:visible; flex:0 0 auto }   /* grow with content; the panel scrolls */
  #garage-bar, .stats-controls{ position:static }
}

/* short LANDSCAPE (phones are wide here, so the portrait ≤760 rules miss them): the stacked
   1fr grid rows crush the paddock / live-races / map cards flat. Switch to page-scroll with real
   min-heights so every card stays usable. Tablets/desktops are taller than 600px, so untouched. */
@media (max-height:600px) and (max-width:1100px){
  body{ overflow:auto }
  .crt{ height:auto; min-height:100vh }
  #grid{ display:block; padding:8px; overflow:visible }
  #left-col{ display:block }
  #paddock-col, #races-col, #map-col{ overflow:visible; margin-bottom:10px }
  #paddock, #races{ overflow:visible }
  #paddock-col{ min-height:190px }
  #races-col{ min-height:230px }
  #map-col{ height:80vh; min-height:300px; display:flex; flex-direction:column }
  #map{ flex:1 1 auto; min-height:0 }
}

/* when the notify/INSTALL-APP button is showing it widens the status bar — drop the clock on
   narrow screens so the topbar doesn't overflow (the clock returns once push is enabled/hidden) */
@media (max-width:760px){
  .status:has(.notif-btn:not([hidden])) .clock{ display:none }
}

/* tighten the gap between a panel title and its sub-text (the id-less subtitle dim only, so the
   "(N)" count keeps its space). */
.panel-h .dim:not([id]){ margin-left:-0.35em }