/* Presentation only. Local fonts and artwork also ship in the offline app. */
@font-face{font-family:Barlow;src:url('../../../assets/fonts/barlow-condensed/BarlowCondensed-SemiBold.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Barlow;src:url('../../../assets/fonts/barlow-condensed/BarlowCondensed-ExtraBold.ttf') format('truetype');font-style:normal;font-weight:800;font-display:swap}
@font-face{font-family:Barlow;src:url('../../../assets/fonts/barlow-condensed/BarlowCondensed-ExtraBoldItalic.ttf') format('truetype');font-style:italic;font-weight:800;font-display:swap}
@font-face{font-family:Bangers;src:url('../../../assets/fonts/bangers/Bangers-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}

:root{
  --ink:#0b0e12;--ink2:#171d23;--chrome:#f5f1e8;--dim:#a1a7ac;
  --p1:#ff6741;--p2:#49cbea;--line:rgba(235,240,244,.15);--card:#ef453e;--flame:#ff6839;
  --disp:Barlow,'Arial Narrow',Impact,sans-serif;--body:system-ui,-apple-system,'Segoe UI',sans-serif;
  --cut:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
}
/* Settings > Accessibility > High contrast. Nearly everything in the UI
   already keys its secondary text/borders off --dim/--line, so brightening
   those two custom properties (plus a stronger flame for the accent) carries
   through the whole overlay stack for free -- menus, HUD, toasts, modals --
   without a second copy of every rule that uses them. Scoped to :root so it
   never touches the 3D scene's own colours (team paint, hazards, tracks). */
:root.derby-high-contrast{
  --dim:#e4e7ea;--line:rgba(245,241,232,.55);--flame:#ff8a4d;
}
:root.derby-high-contrast button{border-width:2px}
:root.derby-high-contrast .desc{color:var(--chrome)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink);overflow:hidden}
body{font-family:var(--body);color:var(--chrome);-webkit-user-select:none;user-select:none;touch-action:none}
canvas{display:block;width:100%;height:100%}
button,a.btn{position:relative;min-height:40px;border:1px solid var(--line);border-radius:0;
  padding:9px 15px;background:rgba(28,35,42,.88);color:var(--chrome);font:600 15px/1.1 var(--disp);
  letter-spacing:.075em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:color .16s,background .16s,border-color .16s,box-shadow .16s,transform .16s}
button.on{background:var(--chrome);border-color:var(--chrome);color:var(--ink);box-shadow:inset 3px 0 var(--flame)}
button:active{transform:translateY(1px)}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--p2);outline-offset:3px}
button:disabled{cursor:default;opacity:.45}
button.big{width:100%;min-height:58px;padding:15px 26px;background:var(--flame);color:#120f0d;
  border:0;font-size:24px;font-weight:800;font-style:italic;letter-spacing:.1em;text-align:left;
  clip-path:var(--cut);box-shadow:inset 0 1px rgba(255,255,255,.3)}
button.big::after{content:'';position:absolute;right:26px;top:50%;width:15px;height:15px;
  border-top:3px solid currentColor;border-right:3px solid currentColor;transform:translateY(-50%) rotate(45deg)}
button.big::before{content:'';position:absolute;right:40px;top:0;bottom:0;width:60px;
  background:repeating-linear-gradient(115deg,transparent 0 11px,rgba(0,0,0,.055) 11px 21px)}
.btnIcon{font-style:normal;display:inline-block;flex-shrink:0;font-size:15px;line-height:1;filter:grayscale(1);opacity:.8}
.hide{display:none!important}.overlay.hidden{display:none}
@media(hover:hover){
  button:hover:not(:disabled){background:#303a43;border-color:#9da3a7;transform:translateY(-1px)}
  button.on:hover{background:#fff;color:var(--ink)}
  button.big:hover{background:#ff8256;border-color:transparent;box-shadow:inset 0 1px rgba(255,255,255,.5)}
}

/* Main menu: full-bleed key art and a separate, scrollable setup console. */
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
  background:rgba(5,9,13,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.sheet{position:relative;width:min(540px,100%);max-height:90vh;max-height:90dvh;overflow:auto;
  border:1px solid rgba(246,239,223,.18);border-top:3px solid var(--flame);padding:32px;
  background:linear-gradient(145deg,#20282f,#0e1319 75%);box-shadow:0 28px 90px #0009;
  scrollbar-width:thin;scrollbar-color:#657079 transparent;touch-action:pan-y}
.kicker{display:flex;align-items:center;gap:10px;font:600 12px/1.5 var(--disp);letter-spacing:.21em;
  text-transform:uppercase;color:var(--chrome)}
.kicker::before{content:'';width:22px;height:4px;background:var(--flame);transform:skewX(-25deg)}
.badge{display:inline-block;padding:3px 7px;border:1px solid #ffffff40;font:600 10px/1 var(--disp);
  letter-spacing:.12em;color:var(--chrome);vertical-align:middle}
h1{margin:16px 0 22px;font:800 italic clamp(40px,5vw,64px)/.9 var(--disp);letter-spacing:-.015em;text-transform:uppercase}
h1 em{font-style:inherit;color:var(--flame)}
.desc{font-size:12px;line-height:1.65;color:var(--dim);margin-top:9px}
#menu{isolation:isolate;padding:32px;background:#11151a;backdrop-filter:none;-webkit-backdrop-filter:none}
.menu-backdrops{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.menu-backdrop{position:absolute;inset:0;background-position:40% 50%;background-size:cover;background-repeat:no-repeat;
  opacity:0;transform:scale(1.015);transition:opacity .55s ease,transform .85s ease}
.menu-backdrop:first-child{background-image:url('../../../assets/ui/ignition/menu-collision.png')}
.menu-backdrop.is-active{opacity:1;transform:scale(1)}
#menu[data-mode="teams"]{--flame:#68caff}
#menu[data-mode="outbreak"]{--flame:#b9ed59}
#menu[data-mode="capture"]{--flame:#ffc666}
#menu[data-mode="football"]{--flame:#87e6ae}
#menu[data-mode="bowling"]{--flame:#ff8fb8}
#menu::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,10,13,.18),rgba(7,10,13,.03) 36%,rgba(7,10,13,.74) 65%,#090d12 100%),
    linear-gradient(180deg,rgba(8,12,17,.5),transparent 40%,rgba(6,9,12,.75))}
#menu .menu-shell{width:min(1440px,100%);height:100%;max-height:940px;display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(430px,1fr);gap:clamp(28px,5vw,88px);
  overflow:visible;border:0;padding:0;background:none;box-shadow:none}
.menu-hero{position:relative;min-width:0;padding:20px 0 0 12px;pointer-events:none}
.menu-title{animation:menu-title-in .65s .08s both}
#menu h1{margin:20px 0 0;filter:drop-shadow(0 4px 18px #0006)}
.title-prefix{display:block;font:600 clamp(21px,2.5vw,34px)/1.1 var(--disp);letter-spacing:.36em;margin:0 0 15px 5px}
#menu h1 em{display:block;color:var(--chrome);font-size:clamp(76px,7.7vw,122px);line-height:.81;letter-spacing:-.025em}
.title-line{display:block}
#menu h1 .title-line:last-child{color:var(--flame);margin-top:6px}
.menu-hero::after{content:'';position:absolute;left:18px;bottom:24px;width:128px;height:8px;
  background:repeating-linear-gradient(115deg,var(--chrome) 0 19px,transparent 19px 27px);opacity:.5}
.menu-setup{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;
  background:linear-gradient(145deg,rgba(20,27,34,.96),rgba(10,15,20,.98));
  border:1px solid #ffffff24;border-top:3px solid var(--flame);box-shadow:0 24px 80px #0005;
  animation:setup-in .6s .13s both}
.setup-scroll{min-height:0;overflow-y:auto;overflow-x:hidden;padding:23px 26px 8px;
  scrollbar-width:thin;scrollbar-color:#5b666f transparent;overscroll-behavior:contain;overflow-anchor:none;touch-action:pan-y}
.setup-scroll::-webkit-scrollbar,.sheet::-webkit-scrollbar{width:4px}
.setup-scroll::-webkit-scrollbar-thumb,.sheet::-webkit-scrollbar-thumb{background:#5b666f}
.row{margin:0 0 23px;min-width:0}
.row .lbl{display:flex;align-items:center;gap:12px;margin-bottom:9px;color:#b4bbc1;
  font:600 12px/1 var(--disp);letter-spacing:.19em;text-transform:uppercase}
.row .lbl::after{content:'';height:1px;flex:1;background:var(--line)}
.row .opts{display:grid;gap:6px}
.row .opts button{min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 5px;white-space:nowrap;font-size:14px;letter-spacing:.045em}
#modeOpts{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
/* six modes: two rows of three where six labels would not fit across */
@media(max-width:760px){#modeOpts{grid-template-columns:repeat(3,minmax(0,1fr))}}
#modeOpts button{flex-direction:column;gap:9px;min-height:74px;padding:12px 3px;font-weight:800}
#modeOpts button .btnIcon{font-size:21px}
#modeOpts button.on{background:var(--flame);border-color:var(--flame);box-shadow:inset 0 3px #ffc4a5}
#mapOpts{grid-template-columns:repeat(3,minmax(0,1fr))}
#mapOpts button{justify-content:flex-start;padding:10px 10px;gap:8px;font-size:14px;white-space:normal;line-height:1.15;text-align:left}
#mapOpts button.on{box-shadow:inset 3px 0 var(--flame)}
#mapDesc{min-height:39px;border-left:2px solid var(--flame);padding-left:10px;font-size:11px;margin-top:12px;color:#b4b9bf}
#countOpts,#winGoalsOpts,#roundsOpts{grid-template-columns:repeat(4,minmax(0,1fr))}
#countOpts button,#winGoalsOpts button,#roundsOpts button{font-size:21px;font-weight:800;min-height:42px;padding:7px}
#foeOpts{grid-template-columns:repeat(2,minmax(0,1fr))}
#skillOpts,#seriesOpts{grid-template-columns:repeat(3,minmax(0,1fr))}
.names input{min-width:0;width:0;flex:1;border-radius:0!important;background:#080d12!important;
  border:1px solid var(--line)!important;border-bottom:2px solid var(--p1)!important;
  min-height:44px;padding:10px 12px!important;color:var(--chrome)}
.names input:last-child{border-bottom-color:var(--p2)!important}
.names input::placeholder{color:#9ba4ac}.names input:disabled{opacity:.45}
.menu-rules{border-top:1px solid var(--line);margin-top:6px;padding-top:12px}
.rules{list-style:none;padding:0;margin:0 0 12px;color:#aeb5bd;font-size:11px;line-height:1.65}
.rules li{position:relative;padding:5px 0 5px 15px}
.rules li::before{content:'';position:absolute;left:0;top:12px;width:5px;height:3px;background:var(--flame);transform:skewX(-25deg)}
.menu-footer{padding:12px 26px 18px;background:#10171e;border-top:1px solid var(--line);
  box-shadow:0 -12px 24px #080c1145}
#loadmsg{margin:0 0 10px!important;font:600 11px/1.4 var(--disp);letter-spacing:.08em;color:#a6b0b8}
#loadmsg::before{content:'';display:inline-block;width:5px;height:5px;background:#9ee0b2;border-radius:50%;margin:0 8px 1px 0}
.footerLinks{display:flex;gap:4px;margin-top:7px}
.footerLinks button{flex:1;min-height:28px;padding:5px;background:none;border:0;font-size:12px;color:#9ba6b1}
.footerLinks button:hover{color:var(--chrome);background:none;transform:none}

/* Scoreboard: brighter active player, crisp scores, quieter supporting info. */
.top{position:fixed;z-index:3;left:0;right:0;top:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(144px,auto) minmax(0,1fr);
  gap:7px;padding:calc(env(safe-area-inset-top) + 18px) max(24px,env(safe-area-inset-right)) 35px max(24px,env(safe-area-inset-left));
  pointer-events:none;background:linear-gradient(#090d12cf,transparent)}
.plate{--player:var(--p1);position:relative;min-width:0;justify-self:start;width:min(250px,100%);
  padding:11px 17px 11px 20px;background:linear-gradient(115deg,#101720ed,#10172090);border-left:3px solid var(--player);
  opacity:.6;transition:opacity .25s,transform .25s,background .25s;clip-path:var(--cut)}
.plate::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--player),transparent)}
.plate.p2{--player:var(--p2);justify-self:end;text-align:right;border-left:0;border-right:3px solid var(--player);
  padding:11px 20px 11px 17px;clip-path:polygon(0 0,100% 0,100% 100%,12px 100%,0 calc(100% - 12px))}
.plate.p2::after{background:linear-gradient(270deg,var(--player),transparent)}
.plate.active{opacity:1;background:linear-gradient(115deg,#28313be8,#151d26e6);transform:translateY(-2px)}
.plate .who{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:600 12px/1.2 var(--disp);text-transform:uppercase;letter-spacing:.17em;color:#c9ced2}
.plate .num{font:800 italic 45px/.95 var(--disp);letter-spacing:-.035em;display:block;margin-top:3px}
.plate.active .num{color:var(--chrome);text-shadow:2px 2px 0 #0008}
.badge-car{display:none;width:64px;height:38px;object-fit:contain;float:right;margin-top:10px}
.plate.showcar .badge-car{display:block}.plate.p2 .badge-car{float:left}
#banner{align-self:start;max-width:min(320px,45vw);text-align:center;padding:11px 20px 13px;background:var(--chrome);color:#171b20;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);box-shadow:inset 0 -3px var(--p1)}
#banner.p2{box-shadow:inset 0 -3px var(--p2)}
#banner .b1{font:800 italic 18px/1.1 var(--disp);text-transform:uppercase;letter-spacing:.04em;overflow-wrap:anywhere}
#banner .b2{font:600 12px/1.2 var(--disp);text-transform:uppercase;letter-spacing:.16em;margin-top:4px;color:#56616b}
#banner .b3{font:600 11px/1.3 var(--disp);margin-top:3px}
.bottom{position:fixed;z-index:3;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:32px max(16px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:linear-gradient(transparent,#090e14d9);pointer-events:none}
#powerWrap{position:relative;width:min(360px,75vw);height:9px;overflow:hidden;background:#090d14b3;
  border:1px solid #ffffff40;transform:skewX(-15deg)}
#power{height:100%;width:0;background:linear-gradient(90deg,#f7e7a2,#ffb14d 45%,#ff6741 75%,#ef453e);
  background-size:min(360px,75vw) 100%;box-shadow:0 0 14px #ff683970}
#power.full{filter:brightness(1.25);box-shadow:0 0 8px #fff8,0 0 24px #ffd454}
#powerWrap.full{border-color:#fff2a3;box-shadow:0 0 18px #ffd454aa;animation:power-ready .42s ease-in-out infinite alternate}
@keyframes power-ready{from{transform:skewX(-15deg) scaleX(1)}to{transform:skewX(-15deg) scaleX(1.025)}}
@media(prefers-reduced-motion:reduce){#powerWrap.full{animation:none}}
#cancelZone{position:absolute;inset:0 auto 0 0;background:repeating-linear-gradient(115deg,#ffffff35 0 3px,transparent 3px 7px)}
.hint,#perf{font:600 11px/1.4 var(--disp);color:#c6cbd1;letter-spacing:.08em;text-align:center;text-transform:uppercase}
#perf{font-size:10px;color:#8f99a5}.hint{max-width:760px}
.btns{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;pointer-events:auto}
.btns button{min-height:34px;padding:8px 14px;font-size:12px;background:#151d26e6;box-shadow:none}
.btns button.off{color:var(--dim)}
#bPause{border-color:#f5f1e854}#bMenu{border-bottom-color:var(--flame)}
#hitflash{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:screen;will-change:opacity;transition:opacity .05s linear}
#vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 78% 68% at 50% 46%,transparent 40%,#0000004d 78%,#0009 100%)}

/* Comic reactions: a big emoji, a bouncy paper burst, and a joke about the shot. */
#toast{--event:#88defa;--event-light:#d8f8ff;position:fixed;left:50%;top:36%;width:max-content;max-width:calc(100vw - 64px);
  transform:translate(-50%,-50%);z-index:4;pointer-events:none;opacity:0;text-align:center;transition:opacity .18s}
#toast.good{--event:#ffd454;--event-light:#fff6a3}#toast.bad{--event:#ff92b1;--event-light:#ffd0de}
#toast.show{opacity:1;transition:none}
#toast .reaction{position:relative;z-index:3;display:table;margin:0 auto -4px;font:84px/1 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  transform:rotate(-9deg);filter:drop-shadow(0 3px 0 white) drop-shadow(0 -2px 0 white) drop-shadow(4px 6px 0 #171b2b)}
#toast .stack{position:relative;isolation:isolate;min-width:200px;padding:18px 30px 22px;
  filter:drop-shadow(4px 6px 0 #171b2b) drop-shadow(0 5px 13px #0004)}
#toast .slash,#toast .stack::before{position:absolute;inset:-2px -8px;z-index:-1;transform:rotate(-2deg);
  clip-path:polygon(3% 5%,18% 7%,25% 0,42% 6%,68% 0,72% 7%,98% 3%,96% 29%,100% 35%,96% 66%,99% 93%,79% 90%,72% 100%,53% 93%,30% 100%,25% 93%,0 97%,3% 70%,0 58%,4% 37%)}
#toast .slash{background:radial-gradient(circle,#ffffff60 1.5px,transparent 2px) 0 0/9px 9px,
  linear-gradient(145deg,var(--event-light),var(--event))}
#toast .stack::before{content:'';inset:-6px -12px;z-index:-2;background:#fffdf1}
#toast .t1{position:relative;max-width:15ch;margin:auto;font:400 var(--shout-size,clamp(44px,6.2vw,86px))/1.03 Bangers,Impact,sans-serif;
  letter-spacing:.025em;text-transform:uppercase;white-space:normal;text-wrap:balance;color:#fffdf0;
  -webkit-text-stroke:5px #1c2033;paint-order:stroke fill;text-shadow:3px 4px 0 #1c2033}
#toast .rays{position:absolute;inset:-35px -50px;z-index:-3;opacity:0;
  background:repeating-conic-gradient(from 8deg,var(--event) 0deg 3deg,transparent 3deg 24deg);
  -webkit-mask-image:radial-gradient(ellipse,transparent 20%,#000 30%,transparent 70%);
  mask-image:radial-gradient(ellipse,transparent 20%,#000 30%,transparent 70%)}
#toast .t2{position:relative;display:table;max-width:min(580px,calc(100vw - 60px));margin:15px auto 0;padding:9px 16px;
  font:600 13px/1.45 var(--body);text-transform:none;letter-spacing:0;color:#202433;background:#fffdf1;
  border:2px solid #202433;border-radius:10px;box-shadow:3px 4px 0 #202433;text-wrap:balance;transform:rotate(1deg)}
#toast .t2:empty{display:none}
#toast.show .stack{animation:sticker-pop .5s cubic-bezier(.2,.85,.3,1) both}
#toast.bad.show .stack{animation:roast-wobble .62s ease-out both}
#toast.show .reaction{animation:reaction-bounce .65s cubic-bezier(.2,.8,.3,1) both}
#toast.show .rays{animation:comic-burst .65s ease-out both}
#toast.show .t2{animation:joke-caption .32s .15s ease-out both}
@keyframes sticker-pop{0%{opacity:0;transform:scale(.55) rotate(-8deg)}55%{opacity:1;transform:scale(1.06) rotate(2deg)}80%{transform:scale(.98) rotate(-1deg)}100%{opacity:1;transform:none}}
@keyframes roast-wobble{0%{opacity:0;transform:scale(.6) rotate(8deg)}45%{opacity:1;transform:scale(1.04) rotate(-4deg)}65%{transform:rotate(3deg)}82%{transform:rotate(-1.5deg)}100%{opacity:1;transform:none}}
@keyframes reaction-bounce{0%{opacity:0;transform:translateY(30px) rotate(20deg) scale(.3)}48%{opacity:1;transform:translateY(-9px) rotate(-15deg) scale(1.16)}70%{transform:translateY(2px) rotate(-4deg) scale(.94)}100%{opacity:1;transform:rotate(-9deg)}}
@keyframes comic-burst{0%{opacity:0;transform:scale(.6) rotate(-10deg)}35%{opacity:.9}100%{opacity:0;transform:scale(1.28) rotate(5deg)}}
@keyframes joke-caption{from{opacity:0;transform:translateY(9px) rotate(-2deg)}to{opacity:1;transform:rotate(1deg)}}
@keyframes menu-title-in{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}
@keyframes setup-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Replay and secondary sheets use the same typography and materials. */
.hlPrompt{position:fixed;left:50%;bottom:152px;transform:translateX(-50%);z-index:10;display:flex;align-items:center;gap:8px;
  max-width:92vw;padding:9px 12px;background:#0e1720f5;border:1px solid #ffffff2e;border-left:3px solid var(--flame);
  box-shadow:0 8px 25px #0005;pointer-events:auto}
.hlPrompt span{min-width:0;font:800 italic 15px/1.2 var(--disp);letter-spacing:.035em;text-transform:uppercase;
  color:var(--chrome);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.hlPrompt button{flex-shrink:0;min-height:34px;font-size:12px;padding:8px 11px}
#bHighlightWatch{background:var(--chrome);color:var(--ink);border-color:var(--chrome)}
#bHighlightSkip{background:transparent}
.hlSkipBar{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 116px);transform:translateX(-50%);z-index:10}
.hlSkipBar button{background:#101923ed;border-bottom:2px solid var(--flame)}

/* Full replay video player bar */
.hlPlayerBar{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 16px);transform:translateX(-50%);z-index:25;
  display:flex;flex-direction:column;gap:8px;width:min(580px,94vw);padding:10px 14px;background:#0e1720eb;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.18);
  border-bottom:3px solid var(--flame);border-radius:10px;box-shadow:0 12px 35px rgba(0,0,0,0.65);pointer-events:auto;user-select:none}
.hlScrubRow{display:flex;align-items:center;gap:10px;width:100%}
.hlTime{font:700 12px/1 var(--disp);color:var(--chrome);min-width:36px;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.05em}
.hlSliderWrap{flex:1;display:flex;align-items:center;position:relative;height:22px}
.hlSlider{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:rgba(255,255,255,0.18);border-radius:3px;outline:none;cursor:pointer;transition:background .15s ease}
.hlSlider:hover{background:rgba(255,255,255,0.28)}
.hlSlider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--flame);box-shadow:0 0 8px rgba(255,107,43,0.6);cursor:grab;border:2px solid #fff}
.hlSlider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.15)}
.hlSlider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--flame);box-shadow:0 0 8px rgba(255,107,43,0.6);cursor:grab;border:2px solid #fff}
.hlControlsRow{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
.hlGroup{display:flex;align-items:center;gap:6px}
.hlBtn{min-height:32px;padding:5px 10px;font:700 12px var(--disp);letter-spacing:.03em;background:#18232d;color:var(--chrome);border:1px solid rgba(255,255,255,0.16);border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;transition:background .15s,color .15s,border-color .15s}
.hlBtn:hover{background:#253544;color:#fff;border-color:rgba(255,255,255,0.3)}
.hlPlayBtn{min-width:36px;background:var(--chrome);color:var(--ink);font-weight:800}
.hlPlayBtn:hover{background:#fff;color:#000}
.hlSpeedBtn{min-width:34px;font-size:11px}
.hlCamBtn.on{background:#2b3f52;color:#fff;border-color:var(--flame)}
.hlCloseBtn{background:rgba(230,57,70,0.2);color:#ff9e9e;border-color:rgba(230,57,70,0.4)}
.hlCloseBtn:hover{background:rgba(230,57,70,0.4);color:#fff;border-color:rgba(230,57,70,0.7)}
@media(max-width:480px){
  .hlPlayerBar{padding:8px 10px;gap:6px;bottom:calc(env(safe-area-inset-bottom) + 8px)}
  .hlBtn{min-height:28px;padding:4px 6px;font-size:11px}
  .hlControlsRow{gap:4px}
  .hlGroup{gap:4px}
}
#over .sheet{border-top-color:var(--flame);background:radial-gradient(ellipse at 100% 0,#74381765,transparent 65%),#111920}
#overTitle{color:#ff9b54;font-size:clamp(42px,6vw,70px);overflow-wrap:anywhere}
#overSub{font-size:16px;color:var(--chrome)}
#pauseOverlay h1{font-size:clamp(38px,6vw,64px)}
.changelogGroup{margin-bottom:18px}.changelogDate{font:800 13px var(--disp);letter-spacing:.12em;color:var(--flame);text-transform:uppercase;margin-bottom:5px}
.changelogListItems{margin:0;padding-left:18px}.changelogListItems li{margin-bottom:5px}

/* Settings modal: two volume sliders plus the usual .row/.lbl/button vocabulary. */
#settingsModal .row button{margin-bottom:0}
.settingsSlider{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.settingsSlider span:first-child{flex:0 0 100px;font:600 12px var(--disp);letter-spacing:.03em;color:var(--dim)}
.settingsSlider span:last-child{flex:0 0 38px;text-align:right;font:700 12px var(--disp);color:var(--chrome);font-variant-numeric:tabular-nums}
.settingsSlider input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:6px;margin:0;
  background:rgba(255,255,255,.18);border-radius:3px;outline:none;cursor:pointer}
.settingsSlider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;
  border-radius:50%;background:var(--flame);box-shadow:0 0 8px rgba(255,107,43,.6);cursor:grab;border:2px solid #fff}
.settingsSlider input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--flame);
  box-shadow:0 0 8px rgba(255,107,43,.6);cursor:grab;border:2px solid #fff}
#settingsAbout{margin-top:4px}

/* Existing vehicle showcase, framed as a garage bay. */
.showcaseHeader{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.showcaseControls{display:flex;min-width:0;align-items:center;gap:6px}
#teamCarTabs{display:flex;min-width:0;gap:3px;padding:3px;border:1px solid var(--line);background:#0a1016}
.teamTab{display:flex;min-width:0;align-items:center;gap:6px;min-height:30px;padding:6px 9px;font-size:12px;letter-spacing:.03em;background:transparent;border:0}
.teamTab span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.showcaseHeader>.lbl{flex-shrink:0}
.teamTab.on{background:#33404b;color:var(--chrome);box-shadow:none}
.carRandomBtn{flex-shrink:0;width:30px;min-height:30px;padding:0;font-size:15px;line-height:1;border:1px solid var(--line);background:#0a1016}
.carRandomBtn:hover{background:#33404b}
.teamDot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0}.teamDot.p1{background:var(--p1)}.teamDot.p2{background:var(--p2)}
#carShowcaseViewport{position:relative;width:100%;height:220px;overflow:hidden;cursor:grab;touch-action:none;
  background:radial-gradient(ellipse at 50% 60%,#273742,#090e15 75%);border:1px solid var(--line);border-top:2px solid #68737b}
#carShowcaseViewport:active{cursor:grabbing}
#carShowcaseCanvas{position:absolute;inset:0;width:100%!important;height:100%!important}
#carInfoOverlay{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;pointer-events:none}
#carShowcaseName{font:800 italic 21px/1 var(--disp);text-transform:uppercase;color:#fff;text-shadow:0 2px 8px #000}
#carShowcaseWeight{margin-top:5px;font:600 12px var(--disp);color:#fff;text-shadow:0 2px 8px #000}
#carSpinHint{font:600 10px var(--disp);color:#b6c1cb;padding:4px 6px;background:#0008;white-space:nowrap}
#carSliderContainer{display:flex;align-items:center;gap:5px;width:100%;margin-top:7px}
.sliderNavBtn{width:26px;min-width:26px;height:76px;padding:0;display:flex;align-items:center;justify-content:center}
#carSliderTrack{display:flex;gap:6px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#657079 transparent;
  padding:4px 2px 8px;flex:1;min-width:0;touch-action:pan-x}
.carCard{flex:0 0 83px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 3px;border:1px solid var(--line);
  background:#1a242e;cursor:pointer;text-align:center}
.carCard.on{background:#33251f;border-color:var(--flame);box-shadow:inset 0 -2px var(--flame)}
.carCard.taken{opacity:.32;cursor:not-allowed;filter:grayscale(.9)}
.carCard img{width:74px;height:42px;object-fit:contain;background:#0003;pointer-events:none;display:block}
.carCard span{font:600 11px var(--disp);color:#e0e3e6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:75px}
.carCard .takenTag{font-size:10px;color:var(--p1)}

@media(min-width:1600px){#menu{padding:48px}.menu-hero{padding-top:30px}.setup-scroll{padding:30px 32px 8px}.menu-footer{padding:14px 32px 22px}.row{margin-bottom:27px}}
@media(max-width:1100px) and (min-width:761px){
  #menu{padding:22px}#menu .menu-shell{grid-template-columns:minmax(0,1fr) minmax(390px,1fr);gap:20px}
  #menu h1 em{font-size:clamp(60px,7.8vw,86px)}.menu-hero{padding:16px 0 0}.kicker{font-size:10px;letter-spacing:.12em}
  .setup-scroll{padding:20px 18px 8px}.menu-footer{padding:12px 18px 15px}
}
@media(max-width:760px){
  #menu{padding:0;background:#0b1016}#menu::before,#menu::after{display:none}
  .menu-backdrops{bottom:auto;height:205px}.menu-backdrop{background-position:65% 50%}
  #menu .menu-shell{width:100%;height:100%;max-height:none;display:flex;flex-direction:column;gap:0}
  .menu-hero{flex:0 0 205px;padding:calc(env(safe-area-inset-top) + 16px) 22px 14px;
    background:linear-gradient(90deg,#070d14a6,transparent 70%),linear-gradient(0deg,#111820,transparent 35%)}
  .menu-hero::after{left:auto;right:18px;bottom:22px;width:49px;height:5px;opacity:.65}
  .menu-hero .kicker{font-size:10px;letter-spacing:.12em;gap:7px}.menu-hero .kicker::before{width:15px;height:3px}
  .menu-hero .badge{font-size:9px;padding:2px 4px}
  #menu h1{margin:12px 0 0}.title-prefix{font-size:16px;letter-spacing:.28em;margin:0 0 8px 2px}
  #menu h1 em{font-size:56px;line-height:.82}.menu-setup{flex:1;min-height:0;border:0;background:#111820;box-shadow:none}
  .setup-scroll{padding:12px 20px 8px}.row{margin-bottom:20px}
  .menu-footer{padding:9px 20px calc(8px + env(safe-area-inset-bottom));background:#0c1219}
  #loadmsg{font-size:10px;margin-bottom:7px!important}button.big{min-height:51px;font-size:22px;padding:13px 18px}
  .footerLinks button{min-height:25px;font-size:11px}
  #modeOpts button{min-height:63px;gap:7px;font-size:13px}#modeOpts button .btnIcon{font-size:18px}
  #mapOpts button{font-size:13px;padding:10px 7px;gap:5px;min-height:44px}
  #foeOpts button,#skillOpts button,#seriesOpts button{min-height:44px}
  .names input{font-size:16px!important}
  .row .lbl{font-size:11px}.row .opts button{letter-spacing:.025em}
  .sheet{padding:25px;max-height:92dvh}.overlay:not(#menu){padding:16px}
  .top{grid-template-columns:minmax(0,1fr) minmax(128px,auto) minmax(0,1fr);gap:4px;
    padding:calc(env(safe-area-inset-top) + 10px) 10px 25px}
  .plate,.plate.p2{padding:9px 10px}.plate .num{font-size:35px}.plate .who{font-size:10px;letter-spacing:.07em}
  #banner{padding:10px 12px 11px}#banner .b1{font-size:15px}#banner .b2{font-size:10px}#banner .b3{font-size:9px}
  .badge-car{width:37px;height:25px;margin-top:5px}
  .bottom{gap:6px;padding-top:25px}.hint{font-size:10px;letter-spacing:.03em;max-width:460px}
  .btns{gap:4px}.btns button{font-size:11px;padding:8px 10px;min-height:34px}
  #toast{max-width:calc(100vw - 54px)}#toast .stack{padding:13px 18px 17px;min-width:160px}
  #toast .reaction{font-size:65px;margin-bottom:0}
  #toast .t1{font-size:var(--shout-size,clamp(34px,10vw,54px));-webkit-text-stroke-width:3.5px;text-shadow:2px 3px 0 #1c2033}
  #toast .t2{font-size:11px;padding:7px 10px;margin-top:12px;max-width:calc(100vw - 64px)}
  .hlPrompt{bottom:154px;padding:7px 8px;gap:6px}.hlPrompt span{font-size:13px}
  .hlPrompt button{font-size:11px;padding:7px 9px}.hlSkipBar{top:calc(env(safe-area-inset-top) + 98px)}
  #carShowcaseViewport{height:195px}.showcaseHeader>.lbl{max-width:80px;line-height:1.2}
  #carSpinHint{font-size:9px}
}
@media(max-width:370px){
  .setup-scroll{padding:12px 14px 8px}.menu-footer{padding-left:14px;padding-right:14px}
  #mapOpts{grid-template-columns:repeat(2,minmax(0,1fr))}#modeOpts button{font-size:12px}
  .top{grid-template-columns:minmax(0,1fr) 116px minmax(0,1fr);padding-left:6px;padding-right:6px}
  .plate,.plate.p2{padding:8px}.plate .who{font-size:9px}#banner .b1{font-size:13px}
  .plate.showcar .badge-car{width:25px;height:18px}.btns button{padding:8px;font-size:10px}
}
@media(max-height:620px) and (min-width:761px){
  #menu{padding:14px 22px}.setup-scroll{padding-top:15px}.menu-hero{padding-top:4px}
  #menu h1 em{font-size:74px}.row{margin-bottom:18px}.menu-footer{padding-top:8px;padding-bottom:10px}
  button.big{min-height:48px;padding:12px 20px}.hlPrompt{bottom:132px}
}
@media(max-height:500px) and (min-width:560px) and (orientation:landscape){
  .menu-backdrops{height:100%}.menu-backdrop{background-position:40% 50%}
  #menu .menu-shell{display:grid;grid-template-columns:minmax(200px,.9fr) minmax(350px,1.2fr);gap:0}
  #menu{padding:0}.menu-hero{height:100%;padding:22px 18px;background-size:auto 100%;background-position:30% center}
  #menu h1 em{font-size:52px}.title-prefix{font-size:16px}.menu-hero .kicker{font-size:9px;letter-spacing:.04em}
  .menu-setup{height:100%;border-left:1px solid var(--line)}.setup-scroll{padding:14px 18px 6px}
  .menu-footer{padding:7px 18px 6px}.footerLinks button{min-height:20px}#loadmsg{margin-bottom:5px!important}
  #toast{top:43%;display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:0 10px}
  #toast .reaction{font-size:52px;grid-column:1;grid-row:1;margin:0}
  #toast .stack{grid-column:2;grid-row:1;padding:10px 20px 13px}
  #toast .t1{font-size:var(--shout-size,38px);max-width:22ch}
  #toast .t2{grid-column:1/-1;margin-top:10px;padding:5px 10px;font-size:11px}
  .top{padding-top:8px}.plate .num{font-size:29px}.plate .who{font-size:10px}#banner .b1{font-size:15px}
  .bottom{gap:4px;padding-top:14px;padding-bottom:6px}.hint{font-size:9px}#perf{font-size:9px}
  .btns button{min-height:28px;padding:6px 10px}.hlPrompt{bottom:112px}.hlSkipBar{top:82px}
}
/* Keep name entry usable when a phone keyboard reduces the viewport. */
@media(max-height:500px) and (max-width:559px){.menu-hero,.menu-backdrops{display:none}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  #toast .rays{display:none}#toast.show .stack,#toast.show .reaction,#toast.show .t2{opacity:1;transform:none}
}

#scoreFeedback{position:fixed;inset:0;z-index:5;pointer-events:none}
.score-chip{position:absolute;display:flex;align-items:center;gap:7px;padding:6px 10px;
  color:var(--chrome);background:#0b121ce8;border-left:3px solid var(--feedback-colour);
  box-shadow:0 3px 12px #0005;transform:translate(-50%,-50%);animation:score-chip 1.25s both}
.score-chip b{font:800 italic 29px/1 var(--disp);color:var(--feedback-colour)}
.score-chip small{font:800 11px/1 var(--disp);letter-spacing:.08em}
.plate.score-pulse .num{animation:score-pulse .45s ease-out}
@keyframes score-chip{0%{opacity:0;transform:translate(-50%,-30%) scale(.85)}18%,65%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-90%)}}
@keyframes score-pulse{35%{transform:scale(1.18);color:#fff;text-shadow:0 0 15px currentColor}100%{transform:scale(1)}}

/* Monochrome pictograms replace the emoji rendering, preserving the labels in the DOM. */
[data-mode="derby"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m13%202-2%207%208-5-4%208%207%202-8%202%203%206-7-5-6%204%202-7-5-3%207-1Z%22%2F%3E%3C%2Fsvg%3E")}
[data-mode="teams"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%202%208%203v7c0%205-8%2010-8%2010S4%2017%204%2012V5Z%22%2F%3E%3Cpath%20d%3D%22m8%2011%203%203%205-6%22%2F%3E%3C%2Fsvg%3E")}
[data-mode="outbreak"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M9%204a5%205%200%200%200-5%208m11-8a5%205%200%200%201%205%208M8%2020a5%205%200%200%200%208%200M12%202v7M3%2017l7-4m11%204-7-4%22%2F%3E%3C%2Fsvg%3E")}
[data-mode="capture"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2022V3l14%202-3%204%203%204-14-2%22%2F%3E%3C%2Fsvg%3E")}
[data-mode="football"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m12%207%205%204-2%206H9l-2-6Zm0%200V3m5%208%204-2m-6%208%202%203m-8-3-2%203m0-9L3%209%22%2F%3E%3C%2Fsvg%3E")}
[data-mode="bowling"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%202c-1.3%200-2%201.1-2%202.4%200%201.1.5%201.9.5%203%200%201-2.2%202.8-2.2%206%200%203%201.3%205.4%202%207.6h3.4c.7-2.2%202-4.6%202-7.6%200-3.2-2.2-5-2.2-6%200-1.1.5-1.9.5-3C12%203.1%2011.3%202%2010%202Z%22%2F%3E%3Cpath%20d%3D%22M8.4%208.6h3.2%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%223.2%22%2F%3E%3C%2Fsvg%3E")}
[data-foe="human"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M2%2021v-3a7%207%200%200%201%2014%200v3m0-17a3%203%200%200%201%200%206m3%2011v-3a7%207%200%200%200-2-5%22%2F%3E%3C%2Fsvg%3E")}
[data-foe="ai"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%204h18v13H3Zm5%2017h8m-4-4v4M7%208h1m8%200h1m-9%205h8%22%2F%3E%3C%2Fsvg%3E")}
[data-map="classic"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2021V3m0%201h13v10H5m4-10v10m5-10v10M5%209h13%22%2F%3E%3C%2Fsvg%3E")}
[data-map="dinner"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2212%22%20r%3D%226%22%2F%3E%3Cpath%20d%3D%22M3%203v7m3-7v7m-3%200h3m-1.5%200v11M22%203v18%22%2F%3E%3C%2Fsvg%3E")}
[data-map="castle"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%202%206%207h-3l6%207h-7v6h-4v-6H3l6-7H6Z%22%2F%3E%3C%2Fsvg%3E")}
[data-map="sidewalls"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%204h6v16H2m20-16h-6v16h6M2%209h6m-6%206h6m8-6h6m-6%206h6%22%2F%3E%3C%2Fsvg%3E")}
[data-map="king"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%205%204%205%205-7%205%207%204-5-2%2013H5ZM5%2022h14%22%2F%3E%3C%2Fsvg%3E")}
[data-map="portal"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%228%22%20cy%3D%2212%22%20rx%3D%225%22%20ry%3D%229%22%2F%3E%3Cpath%20d%3D%22M17%203c6%200%206%2018%200%2018M8%2012h13m-4-4%204%204-4%204%22%2F%3E%3C%2Fsvg%3E")}
[data-map="tornado"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%203h20M4%207h16M6%2011h12M9%2015h7m-5%204h3l-1%203%22%2F%3E%3C%2Fsvg%3E")}
[data-map="obduction"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2211%22%20rx%3D%2210%22%20ry%3D%223%22%2F%3E%3Cpath%20d%3D%22M7%209a5%205%200%200%201%2010%200M6%2017l-2%204m8-4v5m6-5%202%204%22%2F%3E%3C%2Fsvg%3E")}
[data-map="arena"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%228%22%20rx%3D%2210%22%20ry%3D%225%22%2F%3E%3Cpath%20d%3D%22M2%208v8c0%206%2020%206%2020%200V8M6%2012v6m12-6v6m-6-5v7%22%2F%3E%3C%2Fsvg%3E")}
[data-map="bomber"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%202h2l1%207%208%205v3l-8-3v5l3%202H7l3-2v-5l-8%203v-3l8-5Z%22%2F%3E%3C%2Fsvg%3E")}
[data-map="bastion"],[data-map="stronghold"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203h4v4h3V3h4v4h3V3h4v18H3Zm7%2018v-6h4v6%22%2F%3E%3C%2Fsvg%3E")}
[data-map="water"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%208q3-5%206%200t6%200%206%200M2%2014q3-5%206%200t6%200%206%200M2%2020q3-5%206%200t6%200%206%200%22%2F%3E%3C%2Fsvg%3E")}
[data-map="blackhole"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2212%22%20rx%3D%2210%22%20ry%3D%227%22%2F%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2212%22%20rx%3D%226%22%20ry%3D%224%22%2F%3E%3Cpath%20d%3D%22M10%2012h4%22%2F%3E%3C%2Fsvg%3E")}
[data-map="snack"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2012a8%208%200%201%201-8-8%204%204%200%200%200%204%204%204%204%200%200%200%204%204Z%22%2F%3E%3Cpath%20d%3D%22M8%2010h1m-2%205h1m5%202h1%22%2F%3E%3C%2Fsvg%3E")}
[data-map="dino"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%204%207%203%207-3%205%203-2%206-8%201-3%207H5l1-7-4-3m14-3h1m-4%209%205%203%22%2F%3E%3C%2Fsvg%3E")}
[data-map="western"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2016h18M7%2016l2-12%203%202%203-2%202%2012M3%2016v3c6%203%2012%203%2018%200v-3%22%2F%3E%3C%2Fsvg%3E")}
[data-map="snake"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021h12a4%204%200%200%200%200-8H8a4%204%200%200%201%200-8h10m0-3v6m3-5v4%22%2F%3E%3C%2Fsvg%3E")}
[data-map="rlgl"]{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%2210%22%20height%3D%2220%22%20rx%3D%223%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2217%22%20r%3D%221.6%22%2F%3E%3C%2Fsvg%3E")}
.opts .btnIcon{font-size:0!important;width:17px;height:17px;background:currentColor;filter:none;opacity:1;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
#modeOpts .btnIcon{width:25px;height:25px}
@media(max-width:760px){#modeOpts .btnIcon{width:21px;height:21px}#mapOpts .btnIcon{width:15px;height:15px}}

/* Short, optional match-win scene. Results and next-match controls stay usable. */
/* Result screen: the sheet parks in the corner with a clear backdrop -- the
   winning cars celebrate on the table itself, so the wood must stay in view. */
#over{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  align-items:flex-start;justify-content:flex-start;pointer-events:none}
#over .sheet{pointer-events:auto;width:min(340px,calc(100vw - 48px));padding:20px 22px}
#over h1{margin:10px 0 12px;font-size:clamp(30px,4vw,40px)}
.victory-stage{position:relative;margin-top:12px}
.victory-stage[hidden]{display:none}
.victory-caption{color:#ffe1a0;text-transform:uppercase;letter-spacing:1.8px;font-size:11px;font-weight:800}
.victory-stage[data-finished] .victory-caption{color:var(--dim)}
@media(max-height:600px){#over .sheet{padding:16px}#over h1{font-size:26px}}
/* On a phone, a corner card sized like the desktop one is most of the
   screen's width and (via the generic .sheet/max-width:760px max-height
   below) up to 92dvh tall -- on a portrait phone that buries the whole
   tabletop the winning cars are dancing on, which is the one thing this
   screen exists to show off. Drop it into a compact bottom sheet instead:
   pinned low, capped well under half the viewport, so the table and the
   celebration on it stay in view above it. Overflow still scrolls inside
   the sheet rather than growing it, for a long series line on a short
   phone. */
@media(max-width:760px){
  #over{align-items:flex-end;justify-content:center;padding:0 14px max(14px,env(safe-area-inset-bottom))}
  #over .sheet{width:min(420px,100%);max-height:min(340px,42dvh);padding:16px 18px}
  #over h1{margin:8px 0 8px;font-size:clamp(22px,7vw,30px)}
  #over .desc{margin-top:6px}
  #over .victory-stage{margin-top:8px}
  #over button.big{min-height:46px;margin-top:12px!important}
  #over #bChange{margin-top:8px!important}
}

/* Settings > Accessibility > Larger text. Almost every rule in this file sets
   its own fixed px font-size rather than inheriting one, so a single root
   font-size bump would do nothing for most of the UI -- this instead targets
   the run of text people actually read (menu/settings body copy, result and
   toast text, the score plates) with !important, generous enough headroom
   (buttons/plates already size for their largest normal label) to not need a
   layout pass of its own. The 3D scene has no text to scale. */
.derby-large-text .desc{font-size:14px!important;line-height:1.7!important}
.derby-large-text .lbl{font-size:13px!important}
.derby-large-text button{font-size:17px!important}
.derby-large-text button.big{font-size:26px!important}
.derby-large-text h1{font-size:clamp(46px,5.6vw,70px)!important}
.derby-large-text #overTitle{font-size:clamp(48px,7vw,78px)!important}
.derby-large-text #overSub{font-size:18px!important}
.derby-large-text .plate .num{font-size:52px!important}
.derby-large-text .plate .who{font-size:12px!important}
.derby-large-text #toast .t1{font-size:calc(var(--shout-size,clamp(38px,11vw,60px)) * 1.12)!important}
.derby-large-text #toast .t2{font-size:14px!important}
.derby-large-text .hint{font-size:13px!important}

/* Settings > Gameplay > Controls side. The bottom HUD cluster (power bar,
   hint, perf readout, utility buttons) is a centred column by default;
   shifting align-items moves the whole stack to hug one edge instead, for a
   one-handed thumb reach on a big phone. Each child keeps its own internal
   centring (.hint text, .btns wrapping) -- only where the STACK sits moves. */
.derby-controls-left .bottom{align-items:flex-start}
.derby-controls-right .bottom{align-items:flex-end}

/* Bowling's threat machine (main.js showThreatSlot): three reels that spin and
   stop on the next two rounds' threats. Below the toast, so the round banner
   and the machine can both be read. */
#slotMachine{position:fixed;left:50%;top:58%;transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;
  z-index:40;padding:12px 18px 14px;border-radius:14px;background:linear-gradient(#2b1d4f,#170f2e);
  border:3px solid #f2c200;box-shadow:0 10px 30px rgba(0,0,0,.55),inset 0 0 0 2px rgba(255,255,255,.08);
  text-align:center;color:#fff;transition:opacity .25s,transform .25s}
#slotMachine.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#slotMachine .slotTitle{font:800 13px/1.2 system-ui,sans-serif;letter-spacing:.18em;color:#f2c200;margin-bottom:8px}
#slotMachine .slotReels{display:flex;gap:8px;justify-content:center}
#slotMachine .slotReel{width:64px;height:64px;overflow:hidden;border-radius:8px;background:#fdfbf4;
  box-shadow:inset 0 6px 8px rgba(0,0,0,.35),inset 0 -6px 8px rgba(0,0,0,.35)}
#slotMachine .slotCell{height:64px;display:flex;align-items:center;justify-content:center;font-size:38px;line-height:1}
#slotMachine .slotSub{margin-top:9px;font:800 14px/1.25 system-ui,sans-serif;letter-spacing:.06em;min-height:18px}