/* 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}
a{color:var(--flame)}
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)}
button.continueBtn{width:100%;min-height:40px;padding:8px 16px;
  background:transparent;border:1px solid var(--flame);color:var(--flame);
  font:700 13px/1.1 var(--disp);letter-spacing:.06em;text-align:left;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;gap:7px}
button.continueBtn::after{content:'▸';font-size:11px}
.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)}
  button.continueBtn:hover{background:rgba(255,138,77,.14);color:var(--chrome);border-color:var(--flame);transform:translateY(-1px)}
}

/* 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)}
/* every .overlay panel enters like a .ui sheet (screens.css ux-in): 280 ms ease-out, no exit */
.overlay>.sheet{animation:ux-in var(--dur-3) var(--ease-out)}
.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}
.sheet::-webkit-scrollbar{width:4px}
.sheet::-webkit-scrollbar-thumb{background:#5b666f}
.row{margin:0 0 16px;min-width:0}
.row .lbl{display:flex;align-items:center;gap:9px;margin-bottom:7px;color:#b4bbc1;
  font:600 11px/1 var(--disp);letter-spacing:.19em;text-transform:uppercase}
.row .lbl::before{content:'';width:10px;height:3px;flex-shrink:0;background:var(--flame);transform:skewX(-25deg)}
.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:7px;
  padding:9px 5px;white-space:nowrap;font-size:13px;letter-spacing:.04em;border-radius:3px}
.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)}
/* the Controls sheet (app/controls.js): a picture, a name and one line per gesture */
.ctList{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:8px}
.ctList li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;padding:8px 10px;border-radius:12px;background:rgba(214,226,250,.06);box-shadow:inset 0 0 0 1px rgba(214,226,250,.1)}
.ctList .ctPic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--amber,#ffad47);background:linear-gradient(180deg,#25344d,#172235);box-shadow:inset 0 0 0 1px rgba(214,226,250,.2)}
.ctList .ctPic svg{width:26px;height:26px}
.ctList .ctBody{display:grid;gap:2px;min-width:0;font-size:13px;line-height:1.35;color:#c4cbd3}
.ctList .ctBody b{font:800 italic 14px/1.2 var(--disp,inherit);letter-spacing:.02em;text-transform:uppercase;color:#f5f1e8}
.ctList .ctPic.cream svg{width:38px;height:38px}
.ctList .ctPic.cream{background:#fff3d2;box-shadow:inset 0 0 0 1px rgba(20,23,29,.3)}
.ctKeys{display:flex;gap:2px}
.ctKeys i{display:grid;place-items:center;width:10px;height:20px;border-radius:3px;font:800 11px/1 var(--disp,inherit);font-style:normal;color:#172235;background:var(--amber,#ffad47)}
#loadmsg{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:600 10px/1.4 var(--disp);letter-spacing:.06em;color:#7d8992;text-align:left}
#loadmsg::before{content:'';display:inline-block;width:5px;height:5px;background:#9ee0b2;border-radius:50%;margin:0 7px 1px 0}

/* 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);
  /* the band behind the scoreboard takes the shooter's colour (app/hud.js sets --turn) */
  background:linear-gradient(color-mix(in srgb,var(--turn,#090d12) 55%,#090d12e0) 0%,color-mix(in srgb,var(--turn,#090d12) 22%,transparent) 60%,transparent);
  transition:background .3s}
.top.over{background:linear-gradient(#090d12cf,transparent)}
.plate{--player:var(--p1);--ink:#0a1017;position:relative;min-width:0;justify-self:start;width:min(250px,100%);
  padding:11px 17px 11px 20px;border-left:4px solid var(--player);
  /* the side's own colour washes the plate (owner, 2026-10-08: the header in each player's profile colour) */
  background:linear-gradient(115deg,#101720ee,#101720a0);
  background:linear-gradient(115deg,color-mix(in srgb,var(--player) 34%,var(--ink)) 0%,color-mix(in srgb,var(--player) 12%,var(--ink)) 58%,#0a1017b0 100%);
  opacity:.55;filter:saturate(.45) brightness(.85);transform:scale(.94);transform-origin:top left;transition:opacity .25s,transform .25s,filter .25s,background .25s;clip-path:var(--cut)}
.plate::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--player),transparent 80%)}
.plate.p2{--player:var(--p2);justify-self:end;text-align:right;border-left:0;border-right:4px solid var(--player);
  padding:11px 20px 11px 17px;clip-path:polygon(0 0,100% 0,100% 100%,12px 100%,0 calc(100% - 12px));
  background:linear-gradient(245deg,#101720ee,#101720a0);
  background:linear-gradient(245deg,color-mix(in srgb,var(--player) 34%,var(--ink)) 0%,color-mix(in srgb,var(--player) 12%,var(--ink)) 58%,#0a1017b0 100%)}
.plate.p2::after{background:linear-gradient(270deg,var(--player),transparent 80%)}
.plate.p2{transform-origin:top right}
.plate.active{opacity:1;filter:none;transform:none;box-shadow:inset 0 0 0 2px var(--player);
  background:linear-gradient(115deg,color-mix(in srgb,var(--player) 58%,var(--ink)) 0%,color-mix(in srgb,var(--player) 22%,var(--ink)) 62%,#0a1017c8 100%)}
.plate.p2.active{background:linear-gradient(245deg,color-mix(in srgb,var(--player) 58%,var(--ink)) 0%,color-mix(in srgb,var(--player) 22%,var(--ink)) 62%,#0a1017c8 100%)}
.plate .who{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:700 12px/1.2 var(--disp);text-transform:uppercase;letter-spacing:.17em;color:#eef1f3;text-shadow:0 1px 2px #0009}
.plate .num{font:800 italic 45px/.95 var(--disp);letter-spacing:-.035em;display:block;margin-top:3px;color:#e3e7ea;text-shadow:2px 2px 0 #0007}
.plate.active .num{color:#fff;text-shadow:2px 2px 0 #0009,0 0 18px var(--player)}
/* a two-sided mode's car: big, beside the score, the side's identity at a glance */
.badge-car{display:none;position:absolute;right:6px;bottom:0;width:120px;height:72px;object-fit:contain;
  /* the thumbnail frames the car loosely (view/cars.js carThumbnail): zoom in on it */
  transform:scale(1.9);transform-origin:50% 62%;
  filter:drop-shadow(0 3px 3px #000a) drop-shadow(0 0 6px #ffffff40);pointer-events:none;z-index:0}
/* on a narrow plate the car sits behind the score rather than shrinking */
.plate .who,.plate .num,.plate .profile-avatar{position:relative;z-index:1}
/* a pointer from the shooter's plate toward the banner */
.plate.active .who::after{content:' \25B6';color:var(--player);text-shadow:0 0 6px var(--player)}
.plate.p2.active .who::after{content:none}.plate.p2.active .who::before{content:'\25C0  ';color:var(--player);text-shadow:0 0 6px var(--player)}
.plate.showcar .badge-car{display:block}.plate.p2 .badge-car{right:auto;left:6px}
#banner{align-self:start;max-width:min(320px,45vw);text-align:center;padding:11px 20px 13px;color:var(--turn-ink,#fff);
  background:var(--turn,#18212c);
  background:linear-gradient(color-mix(in srgb,var(--turn,#18212c) 82%,#fff),var(--turn,#18212c) 55%,color-mix(in srgb,var(--turn,#18212c) 78%,#000));
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);box-shadow:inset 0 -4px #0005,inset 0 1px #ffffff40;transition:background .3s,color .3s}
.top.over #banner{background:#18212c;color:var(--chrome)}
#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;opacity:.78}
#banner .b3{font:600 11px/1.3 var(--disp);margin-top:3px}
/* football's shot clock (main.js tickShotClock) -- red for the last three seconds */
#bannerClock{font-variant-numeric:tabular-nums}#bannerClock.urgent{color:#fff;background:#e5372b;padding:1px 5px}
.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)}
/* In-game menu (2026-10-03 mobile pass): one round pause button in the
   corner instead of a row of text buttons; the toggles and the way out live
   on the pause sheet. Left by default, right when the controls hug the left. */
#bPause{position:fixed;z-index:4;left:max(14px,env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom));
  width:48px;height:48px;min-height:0;padding:0;border-radius:50%;display:grid;place-items:center;
  background:#101722e6;border:2px solid #f5f1e85c;box-shadow:0 6px 16px #0008,inset 0 1px #ffffff26;
  transition:transform .12s,background .12s}
#bPause svg{width:22px;height:22px;fill:var(--chrome)}
#bPause:active{transform:scale(.92);background:var(--flame)}
.derby-controls-left #bPause{left:auto;right:max(14px,env(safe-area-inset-right))}
/* Camera mode (app/cameraMode.js): whole table / follow car, per player. Sits
   just above the pause button; lit when following. */
#bCamMode{position:fixed;z-index:4;left:max(14px,env(safe-area-inset-left));bottom:calc(72px + env(safe-area-inset-bottom));
  width:48px;height:48px;min-height:0;padding:0;border-radius:50%;display:grid;place-items:center;
  background:#101722e6;border:2px solid #f5f1e85c;box-shadow:0 6px 16px #0008,inset 0 1px #ffffff26;transition:transform .12s,background .12s}
#bCamMode svg{width:22px;height:22px;fill:var(--chrome)}
#bCamMode.on{background:var(--flame);border-color:#fff8}
#bCamMode.aimlock{box-shadow:0 6px 16px #0008,inset 0 0 0 3px #101722,inset 0 0 0 5px #fff}
#bCamMode:active{transform:scale(.92)}
.derby-controls-left #bCamMode{left:auto;right:max(14px,env(safe-area-inset-right))}
/* Car picker (app/bowlingPick.js), every map: two slim arrows on the screen's
   edges, in the round HUD buttons' own look, with no label in between -- the
   ring under the picked car says which one it is (owner, 2026-10-07: "remove
   the car nr and so on, it took much of the screen"). Fades in only while
   there is a choice to make. */
#carPick{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .2s}
#carPick.show{opacity:1}
#carPick button{position:absolute;top:56%;width:46px;height:46px;min-height:0;padding:0;margin-top:-23px;
  border-radius:50%;display:grid;place-items:center;pointer-events:none;
  background:#101722b3;border:2px solid #f5f1e84d;box-shadow:0 6px 16px #0007,inset 0 1px #ffffff26;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);touch-action:manipulation;
  transition:transform .12s,background .12s,border-color .12s}
#carPick.show button{pointer-events:auto}
#carPick button svg{width:20px;height:20px;fill:none;stroke:var(--chrome);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#carPick button:active{transform:scale(.9);background:var(--flame);border-color:#fff8}
#carPick .prev{left:max(10px,env(safe-area-inset-left))}
#carPick .next{right:max(10px,env(safe-area-inset-right))}
#pauseOverlay .sheet{border-top:3px solid var(--flame)}
.pauseTiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.pauseTile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:74px;
  font:700 13px/1.1 var(--disp);letter-spacing:.08em;text-transform:uppercase;background:#1b242de6;
  border:1px solid var(--line);box-shadow:inset 0 -3px var(--p2)}
.pauseTile::before{content:"";width:26px;height:26px;background:var(--p2);
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.pauseTile.off,.pauseTile.tileSound.on{color:var(--dim);box-shadow:inset 0 -3px #ffffff1f}
.pauseTile.off::before,.pauseTile.tileSound.on::before{background:var(--dim)}
.pauseTile.tileSound.on{background:#1b242de6;border-color:var(--line)}
.tileAim{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M12 2v5M12 17v5M2 12h5M17 12h5'/%3E%3C/svg%3E")}
.tileSound{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7M19 6a8.5 8.5 0 0 1 0 12'/%3E%3C/svg%3E")}
.pauseQuit{background:transparent;color:var(--dim);border-color:#ef453e66}
@media(max-height:480px){#pauseOverlay h1{font-size:30px}#pauseOverlay .desc{display:none}
  .pauseTile{min-height:46px;flex-direction:row;gap:10px}.pauseTile::before{width:20px;height:20px}}
/* First-time card (app/hazardIntro.js: Bowling's threats, a new table, a new
   mode): under the banner, never modal; only the card itself takes taps.
   Where it sits lives here; how it looks is the design language, in hud.css. */
#hazardIntro{position:fixed;z-index:6;left:50%;top:calc(env(safe-area-inset-top) + 122px);width:min(380px,calc(100vw - 32px));
  box-sizing:border-box;transform:translate(-50%,-12px);opacity:0;transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
#hazardIntro.show{opacity:1;transform:translate(-50%,0)}
@media(max-height:480px){#hazardIntro{top:auto;bottom:calc(env(safe-area-inset-bottom) + 12px);left:calc(env(safe-area-inset-left) + 74px);
    width:min(620px,calc(100vw - 260px));transform:translate(0,12px)}
  #hazardIntro.show{transform:none}#hazardIntro ul{grid-template-columns:1fr 1fr;gap:8px 14px}}
@media(prefers-reduced-motion:reduce){#hazardIntro{transition:none}}
/* Bowling pin pops (app/bowlingPinPops.js) and the score punch (hud.js). */
#pinPops{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.pinPop{position:absolute;transform:translate(-50%,-50%);font:800 italic 32px/1 var(--disp);color:#fff4d6;
  -webkit-text-stroke:6px #2a0716;paint-order:stroke fill;text-shadow:0 3px 0 #c22a52,0 0 14px #ff8b42cc;animation:pin-pop 1s cubic-bezier(.2,.9,.3,1) forwards}
.pinPop.bonus{color:#aefaff;-webkit-text-stroke-color:#06303a;text-shadow:0 3px 0 #1d6f78,0 0 14px #33bbccaa;font-size:36px}
.pinPop.gold{color:#ffd95a;-webkit-text-stroke-color:#3a2404;text-shadow:0 3px 0 #8a5a10,0 0 16px #ffcc3daa;font-size:36px}
@keyframes pin-pop{0%{opacity:0;transform:translate(-50%,-30%) scale(.4)}18%{opacity:1;transform:translate(-50%,-70%) scale(1.25)}
  70%{opacity:1}100%{opacity:0;transform:translate(-50%,-220%) scale(.9)}}
.score-stars{font-size:15px;letter-spacing:1px;color:#ffd95a;text-shadow:0 1px 0 #6a4408;white-space:nowrap}
.scoreToken{position:fixed;left:0;top:0;z-index:6;pointer-events:none;opacity:0;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--tok,#ffd95a);color:#fff;font:800 italic 16px/1 var(--disp);border:2px solid #fff;box-shadow:0 2px 6px #0008;
  text-shadow:0 1px 2px #000a;will-change:transform,opacity}
.plate .num.tokenPop{animation:token-pop .2s ease-out}
@keyframes token-pop{50%{transform:scale(1.18)}}
.plate .num.bump{animation:score-bump .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes score-bump{0%{transform:scale(1)}30%{transform:scale(1.45);color:#ffe9a6}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.pinPop{animation:none;opacity:1}.plate .num.bump,.plate .num.tokenPop{animation:none}}
/* keep the centred stack clear of the corner button on both sides */
.bottom{padding-left:max(74px,env(safe-area-inset-left));padding-right:max(74px,env(safe-area-inset-right))}
/* The how-to-shoot line steps aside once a shot is in flight, and for good
   once the player has learned it (hud.js). */
.hint{transition:opacity .3s,max-height .3s;max-height:3em;overflow:hidden}
body.hintAway .bottom .hint{opacity:0;max-height:0}
#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.show.tappable{pointer-events:auto;cursor:pointer}
#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. */
.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 */
.hlTitle{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 92px);transform:translateX(-50%);z-index:24;max-width:calc(100vw - 24px);padding:6px 16px;border-radius:999px;background:rgba(16,24,38,.86);box-shadow:0 0 0 1px rgba(255,255,255,.14);color:#fff;font:800 italic 15px/1.2 var(--font-disp,system-ui);letter-spacing:.04em;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the pass-the-phone card (app/handoff.js): never blocks input, slides in unless reduced motion */
.handoff{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 24%);transform:translateX(-50%);z-index:23;display:flex;align-items:center;gap:10px;padding:10px 22px;border-radius:16px;background:var(--hand,#4b8bf5);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.45);pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.35);font:800 italic 22px/1.1 var(--font-disp,system-ui);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;max-width:calc(100vw - 24px)}
.handoff.hide{display:none}
.handoff img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.handoff small{display:block;font:700 12px/1.2 var(--font-disp,system-ui);letter-spacing:.08em;opacity:.92;margin-left:6px}
.handoff.in{animation:handoffIn .35s cubic-bezier(.16,.9,.22,1) both}
@keyframes handoffIn{from{opacity:0;transform:translateX(-50%) translateY(18px)}to{opacity:1;transform:translateX(-50%)}}
.derby-reduced-motion .handoff.in{animation:none}
@media (prefers-reduced-motion:reduce){.handoff.in{animation:none}}
.hlTitle.hide{display:none}
.aiSkip{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 92px);transform:translateX(-50%);z-index:24;padding:5px 16px;border-radius:999px;background:rgba(16,24,38,.86);box-shadow:0 0 0 1px rgba(255,255,255,.18);color:#fff;font:800 italic 14px/1.2 var(--font-disp,system-ui);letter-spacing:.04em;cursor:pointer}
.aiSkip.hide{display:none}
.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}


@media(max-width:760px){
  .row{margin-bottom:12px}
  #loadmsg{font-size:9px}button.big{min-height:48px;font-size:20px;padding:12px 18px}
  .row .lbl{font-size:10px;margin-bottom:5px}.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:84px;height:52px;right:2px;bottom:0}.plate.p2 .badge-car{left:2px}
  .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)}
  .hlSkipBar{top:calc(env(safe-area-inset-top) + 98px)}
}
@media(max-width:370px){
  .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:68px;height:44px}.btns button{padding:8px;font-size:10px}
}
@media(max-height:620px) and (min-width:761px){
  button.big{min-height:48px;padding:12px 20px}
}
@media(max-height:500px) and (min-width:560px) and (orientation:landscape){
  #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}.hlSkipBar{top:82px}
}
@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"],[data-hall]{--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")}
/* Hot Potato never got its own icon (built 2026-09-26; open "menu art"
   question in project notes) -- .opts .btnIcon masks every mode/map icon
   from this custom property, so the emoji actually in the button's markup
   is inert markup, never what a player sees; with no rule for this mode it
   fell back to whatever the browser's mask default is, not a bomb at all
   (owner report, 2026-09-27: "please change the menu button icon for hot
   potato"). A round bomb with a lit, sparking fuse, same line-art style and
   stroke weight as every other mode icon here. */
[data-mode="towervs"]{--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%226%22%20y%3D%2216%22%20width%3D%2212%22%20height%3D%225%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2210%22%20width%3D%228%22%20height%3D%225%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%224%22%20width%3D%224%22%20height%3D%225%22%2F%3E%3C%2Fsvg%3E")}
[data-mode="hotpotato"]{--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%2211%22%20cy%3D%2214%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22M13%208c0-3%202-5%205-5%22%2F%3E%3Cpath%20d%3D%22M17%202l1%201.5M19.5%201l.5%202M21%203l-2%20.5%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")}
[data-skill="0"]{--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%2021c0-9%205-14%2014-14%200%209-5%2014-14%2014Z%22%2F%3E%3Cpath%20d%3D%22M5%2021c3-4%207-8%2011-11%22%2F%3E%3C%2Fsvg%3E")}
[data-skill="1"]{--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%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.4%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E")}
[data-skill="2"]{--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%22M8%204h8v4a4%204%200%200%201-8%200Z%22%2F%3E%3Cpath%20d%3D%22M6%205H4v2a4%204%200%200%200%204%204M18%205h2v2a4%204%200%200%201-4%204%22%2F%3E%3Cpath%20d%3D%22M10%2015h4v3h-4zM8%2021h8%22%2F%3E%3C%2Fsvg%3E")}
[data-foe="online"]{--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%22M3%209h18M3%2015h18M12%203a15%2015%200%200%201%200%2018%2015%2015%200%200%201%200-18Z%22%2F%3E%3C%2Fsvg%3E")}
[data-map="pinball"]{--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%225%22%20y%3D%222%22%20width%3D%2214%22%20height%3D%2220%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%221.6%22%2F%3E%3Cpath%20d%3D%22m7%2017%203-3%202%202%205-5m0%200v3m0-3h-3%22%2F%3E%3C%2Fsvg%3E")}
[data-map="slime"]{--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%202s7%208%207%2013a7%207%200%200%201-14%200c0-5%207-13%207-13Z%22%2F%3E%3Cpath%20d%3D%22M9%2015a3%203%200%200%200%203%203%22%2F%3E%3C%2Fsvg%3E")}
[data-map="arcade"]{--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%223%22%20y%3D%224%22%20width%3D%225%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%224%22%20width%3D%225%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%2217%22%20y%3D%224%22%20width%3D%224%22%20height%3D%223%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M6%2020h12%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}

/* 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. */
/* The start menu scales its own whole type scale (src/view/menu.css, --ts),
   so its layouts still fit without scrolling; these are for the rest. */
.derby-large-text .desc:not(#menu *){font-size:14px!important;line-height:1.7!important}
.derby-large-text .lbl:not(#menu *){font-size:13px!important}
.derby-large-text button:not(#menu *){font-size:17px!important}
.derby-large-text button.big:not(#menu *){font-size:26px!important}
.derby-large-text h1:not(#menu *){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, the Showboard (view/threatMachine.js; owner, 2026-10-11: "F & B (Garage)
   + Bang and more animation bang"). The alley's roller door slams over the lane, a split-flap board
   drops in front of it, and the door rolls back up over the new lane.
   The cover is load-bearing (tableViews.js threatSlotRenderAllowed: the next stage is warmed behind
   it). It is no longer instant: the 3D view stops drawing the moment .show is set, so the lane stays
   a still while the door falls, and the warm-up waits for .sealed (the door's bar on the floor). The
   backstop goes solid at .sealed, and by CSS alone 2.2 s after .show if the page is stalled (later than
   the door takes to come down, so it never blanks the lane behind a door still rolling). While
   the door rolls back up the root is .opening (not .show): the lane draws again under it. */
#slotMachine{position:fixed;inset:0;z-index:2200;visibility:hidden;pointer-events:none;overflow:hidden;
  color:#f5f1e8;font-family:var(--disp);text-align:center;-webkit-user-select:none;user-select:none;
  --tm-amber:#ffad47;--tm-amber-hi:#ffd27a;--tm-amber-edge:#b0560f;--tm-on-amber:#2a1406;
  --tm-plate-hi:#1e2b40;--tm-plate-lo:#121b2b;--tm-edge:#04070c;--tm-inset:#090e17;
  --tm-text-2:#bcc7d8;--tm-text-3:#8f9fb6;--tm-ease:cubic-bezier(.2,.8,.2,1)}
#slotMachine.show,#slotMachine.opening{visibility:visible;pointer-events:auto}
#slotMachine .tmBackstop{position:absolute;inset:0;background:#05080d;opacity:0}
#slotMachine.show .tmBackstop{animation:tm-backstop 1ms linear 2.2s forwards}
#slotMachine.sealed .tmBackstop{opacity:1;animation:none}
@keyframes tm-backstop{to{opacity:1}}
#slotMachine .tmRig{position:absolute;inset:0}
#slotMachine .tmFx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;visibility:hidden}
#slotMachine .slotSub,#slotMachine .slotLabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* the garage door: a lit sign bar, a roller drum, a slatted shutter (B's) */
#slotMachine .tmGarage{position:absolute;inset:0;overflow:hidden;z-index:0}   /* its own stacking context: the sign bar stays under the board */
#slotMachine .tmDrum{position:absolute;left:-2%;right:-2%;top:0;height:calc(var(--dr) * 2);
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 5px,rgba(0,0,0,.35) 5px 6px),
    linear-gradient(180deg,#05080e 0%,#22324b 22%,#3f5577 44%,#2a3b57 62%,#101826 84%,#05080e 100%)}
#slotMachine .tmShutter{position:absolute;inset:0}
#slotMachine .tmGarage.moving .tmShutter{perspective:900px;transform-style:preserve-3d}
#slotMachine .tmSlat{position:absolute;left:-3%;width:106%;top:0;transform-origin:50% 0;overflow:hidden;visibility:hidden;
  background:repeating-linear-gradient(115deg,transparent 0 46px,rgba(179,197,232,.06) 47px 48px,transparent 49px 94px),
    linear-gradient(180deg,#34486a 0%,#26374f 9%,#1d2b40 40%,#152033 70%,#0d1522 86%,#04070c 93%,#3a4d6e 95%,#101826 100%)}
#slotMachine .tmGarage.moving .tmSlat{-webkit-backface-visibility:hidden;backface-visibility:hidden}
#slotMachine .tmSd{position:absolute;inset:0;background:#02040a;opacity:0}
#slotMachine .tmPt{position:absolute;left:3%;right:3%;top:0}
#slotMachine .tmBar{background:linear-gradient(180deg,#5d7193 0%,#3a4c6a 14%,#22314a 46%,#141e30 80%,#04070c 100%);overflow:visible}
#slotMachine .tmBar::before{content:"";position:absolute;left:0;right:0;top:34%;height:14%;
  background:repeating-linear-gradient(90deg,var(--tm-amber) 0 22px,#2a1406 22px 30px);opacity:.85;box-shadow:0 0 12px rgba(255,173,71,.35)}
#slotMachine .tmBar::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:8px;background:#030509;border-radius:0 0 4px 4px}
#slotMachine .tmBar i{position:absolute;top:58%;width:clamp(40px,8vw,90px);height:28%;border-radius:0 0 10px 10px;
  background:linear-gradient(180deg,#8696b2,#3c4c68);box-shadow:inset 0 -2px 0 rgba(0,0,0,.4),0 3px 0 #04070c}
#slotMachine .tmBrand{position:absolute;left:0;right:0;line-height:1;white-space:nowrap}
#slotMachine .tmSpot{position:absolute;left:50%;top:50%;width:min(92vw,820px);height:150%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,173,71,.2),rgba(255,173,71,.06) 60%,rgba(255,173,71,0))}
#slotMachine .tmB1{position:relative;display:block;font:800 italic var(--brand1,90px)/.9 var(--disp);letter-spacing:.02em;color:transparent;-webkit-text-stroke:2px rgba(255,173,71,.55);transition:color .6s var(--ease-out),text-shadow .6s var(--ease-out)}
#slotMachine .tmB2{position:relative;display:block;margin-top:.25em;font:800 var(--brand2,26px)/1 var(--disp);letter-spacing:.34em;padding-left:.34em;color:rgba(245,241,232,.38);transition:color .6s var(--ease-out),text-shadow .6s var(--ease-out)}
#slotMachine.lit .tmB1{-webkit-text-stroke:2px var(--tm-amber);color:rgba(255,173,71,.1);text-shadow:0 0 22px rgba(255,140,40,.55)}
#slotMachine.lit .tmB2{color:var(--tm-amber-hi);text-shadow:0 0 14px rgba(255,173,71,.55)}
#slotMachine .tmHousing{position:absolute;left:0;right:0;top:0;height:var(--hf);z-index:4}
#slotMachine .tmFascia{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-top:var(--sat,0px);overflow:hidden;
  background:radial-gradient(60% 120% at 50% 0%,rgba(255,173,71,.1),transparent 70%),linear-gradient(180deg,#27384f,#18233a 58%,#0f1727);
  box-shadow:inset 0 -1px 0 rgba(214,226,250,.2),inset 0 3px 0 var(--tm-amber),0 5px 0 var(--tm-edge),0 14px 26px rgba(0,0,0,.55)}
#slotMachine .tmSign{font:600 var(--hk,13px)/1 var(--disp);letter-spacing:.3em;text-transform:uppercase;color:#7d6a52;transition:color .6s,text-shadow .6s}
#slotMachine.lit .tmSign{color:var(--tm-amber);text-shadow:0 0 10px rgba(255,173,71,.6)}
#slotMachine .tmBulbs{position:absolute;left:10px;right:10px;bottom:3px;height:10px;opacity:.28;
  background:radial-gradient(circle,#fff6cf 0 1.8px,#ffbf4d 2.8px,rgba(255,191,77,0) 4.8px) 0 50%/16px 10px repeat-x,
    radial-gradient(circle,#5a3a14 0 1.8px,rgba(0,0,0,0) 2.8px) 8px 50%/16px 10px repeat-x}
/* the marquee bulbs and the board's rails are lit, never chasing: a row of bulbs blinking on and
   off is the glitter the owner asked to be rid of */
#slotMachine.lit .tmBulbs{opacity:1;transition:opacity .6s}
#slotMachine .tmDim{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s ease-out;
  background:radial-gradient(70% 45% at 50% 112%,rgba(255,150,60,.16),transparent 72%),
    radial-gradient(ellipse at 50% 45%,rgba(4,7,12,.25),rgba(4,7,12,.72) 70%,rgba(3,5,9,.9))}

/* the stage and the showboard (a big toy key from the menus' materials) */
#slotMachine .tmStage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;visibility:hidden;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
}
#slotMachine.on .tmStage{visibility:visible}
#slotMachine.on .tmDim{opacity:1}
#slotMachine.live .tmGlow{opacity:.45}
#slotMachine.rev .tmGlow{opacity:.8}
#slotMachine.leaving .tmDim,#slotMachine.leaving .tmGlow{opacity:0;transition-duration:.4s;transition-delay:.2s}
#slotMachine .tmPop{transform-origin:50% 100%;opacity:0}
#slotMachine .tmFloat{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:calc(var(--tabh) * .58)}
#slotMachine .tmGlow{position:absolute;left:-12%;right:-12%;top:-10%;bottom:-8%;z-index:-1;opacity:0;pointer-events:none;transition:opacity 1s ease-out;
  background:radial-gradient(closest-side,rgba(255,196,110,.5),rgba(255,130,60,.18) 60%,rgba(255,110,50,0) 100%)}
#slotMachine .tmBoard{position:relative;width:var(--bw);box-sizing:border-box;border-radius:22px;
  padding:calc(var(--tabh) * .55 + var(--pv) * .6) var(--pad) var(--pv);
  background:linear-gradient(180deg,#24344d,var(--tm-plate-hi) 22%,var(--tm-plate-lo));
  box-shadow:inset 0 0 0 1px rgba(214,226,250,.16),inset 0 3px 0 rgba(255,173,71,.85),inset 0 5px 0 rgba(255,255,255,.08),inset 0 -2px 0 rgba(0,0,0,.25),
    0 9px 0 var(--tm-edge),0 26px 50px rgba(0,0,0,.62)}
#slotMachine .tmBflash{position:absolute;inset:0;border-radius:22px;pointer-events:none;opacity:0;z-index:7;
  background:radial-gradient(70% 60% at 50% 30%,rgba(255,246,226,.55),rgba(255,173,71,.18) 60%,rgba(255,173,71,0))}
#slotMachine .tmTab{position:absolute;left:50%;top:0;transform:translate(-50%,-58%);height:var(--tabh);display:flex;align-items:center;gap:.55em;white-space:nowrap;
  padding:0 1.15em;border-radius:12px;font:600 var(--tabf)/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--tm-text-2);
  background:linear-gradient(180deg,#2a3b57,#172235);
  box-shadow:inset 0 0 0 1px rgba(214,226,250,.18),inset 0 2px 0 rgba(255,255,255,.2),0 4px 0 var(--tm-edge),0 9px 16px rgba(0,0,0,.45)}
#slotMachine .tmTab em{font-style:normal;color:var(--tm-text-3)}
#slotMachine .tmTab b{font-weight:800;color:var(--tm-amber)}
#slotMachine .tmRail{height:var(--railh);margin:0 3% var(--rm);border-radius:99px;background-color:var(--tm-inset);opacity:.35;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.06);
  background-image:radial-gradient(circle,rgba(255,210,122,.9) 0 1.6px,rgba(255,173,71,0) 3.4px),radial-gradient(circle,#3a4458 0 1.5px,transparent 2px);
  background-size:calc(var(--railh) * 2.4) 100%;background-position:0 50%,calc(var(--railh) * 1.2) 50%}
#slotMachine .tmRailB{margin:var(--rm) 3% 0}
#slotMachine.live .tmRail{opacity:1;transition:opacity .6s}
#slotMachine .tmTsw{position:relative}
#slotMachine .tmTs{display:grid;grid-template-columns:repeat(var(--cols),var(--cw));gap:var(--tg);justify-content:center;padding:var(--tsp);border-radius:14px;
  background:var(--tm-inset);box-shadow:inset 0 2px 8px rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.07)}
#slotMachine .tmStamp{position:absolute;left:50%;top:50%;z-index:6;white-space:nowrap;opacity:0;pointer-events:none;
  font:800 italic var(--stf,36px)/1 var(--disp);text-transform:uppercase;letter-spacing:.01em;color:var(--tm-on-amber);
  padding:.16em .55em .2em;border-radius:16px;background:linear-gradient(180deg,#ffd781,#ff9b3d);text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:inset 0 0 0 1px rgba(255,236,190,.6),inset 0 2px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.14),0 6px 0 var(--tm-amber-edge),0 14px 26px rgba(0,0,0,.5);
  transform:translate(-50%,-50%) rotate(-2deg)}

/* a split-flap unit: two static halves and a hinged leaf with a front and a back */
#slotMachine .tmFu{position:relative}
#slotMachine .tmH{position:absolute;left:0;right:0;height:50%;box-sizing:border-box;overflow:hidden}
#slotMachine .tmTop{top:0}#slotMachine .tmBot{top:50%}
#slotMachine .tmF{z-index:1;transform-origin:50% 100%}
#slotMachine .tmK{z-index:1;transform-origin:50% 0;transform:scaleY(0)}
#slotMachine .tmH::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--d,0);pointer-events:none}
#slotMachine .ic .tmH::after{background:#2b1a08}
#slotMachine .tmFu::after{content:"";position:absolute;left:-1px;right:-1px;top:50%;height:2px;margin-top:-1px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,#66748c 0 2px,rgba(3,5,9,.85) 2px calc(100% - 2px),#66748c calc(100% - 2px))}
#slotMachine .tmFu.g{width:var(--cw);height:var(--ch)}
#slotMachine .g .tmH{color:#f5f1e8;font:800 italic var(--gf)/var(--ch) var(--disp);white-space:pre}
#slotMachine .g .tmTop{background:linear-gradient(180deg,#2b3b56,#1f2c42);border-radius:5px 5px 1px 1px}
#slotMachine .g .tmBot{background:linear-gradient(180deg,#18233a,#111a2a);border-radius:1px 1px 5px 5px;line-height:0}
#slotMachine .g.hot .tmH{color:var(--tm-amber-hi)}
#slotMachine .tmFu.ic{width:100%;height:var(--mh)}
#slotMachine .ic .tmTop{background:var(--img) 50% calc(var(--mh) / 2 - var(--is) / 2) / var(--is) var(--is) no-repeat,linear-gradient(180deg,#fffaf0,#f7e8c8 80%,#ecd8ae);
  border-radius:9px 9px 2px 2px}
#slotMachine .ic .tmBot{background:var(--img) 50% calc(var(--is) / -2) / var(--is) var(--is) no-repeat,linear-gradient(180deg,#dcc391,#efd8aa 22%,#f0d7a6);
  border-radius:2px 2px 9px 9px}
#slotMachine .tmFu.nm{width:100%;height:var(--nh);margin-top:6px}
#slotMachine .nm .tmTop{background:linear-gradient(180deg,#2b3b56,#1f2c42);border-radius:7px 7px 1px 1px}
#slotMachine .nm .tmBot{background:linear-gradient(180deg,#18233a,#111a2a);border-radius:1px 1px 7px 7px}
#slotMachine .nm .tmH b{position:absolute;left:0;right:0;height:var(--nh);display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 4px;
  font:800 italic var(--nf)/1.02 var(--disp);letter-spacing:.02em;text-transform:uppercase;color:var(--tm-text-3)}
#slotMachine .nm .tmTop b{top:0}#slotMachine .nm .tmBot b{top:calc(var(--nh) / -2)}
#slotMachine .nm.on .tmH b{color:var(--tm-amber-hi)}
#slotMachine .tmFu.nm::after{height:1px;margin-top:-.5px;background:linear-gradient(90deg,#66748c 0 2px,rgba(3,5,9,.55) 2px calc(100% - 2px),#66748c calc(100% - 2px))}

/* the reels: a lamp, a window (the card jumps out of it), a name flap */
#slotMachine .tmReels{display:flex;justify-content:center;gap:var(--mg);margin-top:var(--g1)}
#slotMachine .slotColumn{position:relative;width:var(--mw);display:flex;flex-direction:column;align-items:center}
#slotMachine .slotColumn.popping{z-index:4}
#slotMachine .tmLamp{position:relative;display:block;width:42%;height:var(--lh);margin-bottom:6px;border-radius:99px;background:#273247;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
#slotMachine .tmLamp::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;
  background:linear-gradient(180deg,#fff0c4,var(--tm-amber));box-shadow:0 0 10px rgba(255,173,71,.85),0 0 2px #fff3}
#slotMachine.live .tmLamp::after{opacity:.16}
#slotMachine .slotColumn.on .tmLamp::after{opacity:1}
#slotMachine .slotColumn.tease .tmLamp::after{opacity:.55;transition:opacity .4s}
#slotMachine .slotReel{position:relative;width:100%;box-sizing:border-box;padding:var(--wp);border-radius:calc(var(--wp) + 9px);background:var(--tm-inset);
  box-shadow:inset 0 2px 7px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.08)}
#slotMachine .tmRing{position:absolute;inset:-3px;border-radius:calc(var(--wp) + 12px);border:2px solid var(--tm-amber);opacity:0;pointer-events:none;
  box-shadow:0 0 18px rgba(255,173,71,.6),inset 0 0 10px rgba(255,173,71,.4);transition:opacity .22s}
#slotMachine .slotColumn.lit .tmRing{opacity:1}
#slotMachine .tmSheen{position:absolute;inset:var(--wp);z-index:4;border-radius:9px;pointer-events:none;
  background:linear-gradient(162deg,rgba(255,255,255,.22) 0 14%,rgba(255,255,255,0) 26%)}
#slotMachine .tmZap{position:absolute;inset:0;z-index:6;border-radius:inherit;opacity:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,250,235,.95),rgba(255,196,110,.55) 55%,rgba(255,173,71,0))}
/* the blur: a reel spinning too fast to read (A's drums). Low contrast on purpose: its moving lines
   change the light by well under a tenth, so however fast it goes it never flickers */
#slotMachine .tmBlur{position:absolute;inset:var(--wp);z-index:3;border-radius:9px;opacity:0;pointer-events:none;transition:opacity .3s ease-out;
  background:
    linear-gradient(90deg,rgba(240,215,166,0) 16%,rgba(232,90,82,.3) 28%,rgba(240,215,166,0) 40%,rgba(240,215,166,0) 48%,rgba(38,52,71,.24) 57%,rgba(240,215,166,0) 66%,rgba(100,203,228,.26) 76%,rgba(240,215,166,0) 88%),
    repeating-linear-gradient(180deg,rgba(38,52,71,0) 0 7px,rgba(38,52,71,.08) 7px 14px),
    linear-gradient(180deg,#f6e7c8,#ecd6a8 50%,#f6e7c8);
  background-size:100% 100%,100% 28px,100% 100%;
  animation:tm-whirl .2s linear infinite;animation-play-state:paused}
#slotMachine .tmBlur::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(3,5,9,.6)}
#slotMachine .slotColumn.blur .tmBlur{opacity:1;transition:none;animation-play-state:running}
@keyframes tm-whirl{to{background-position:0 0,0 28px,0 0}}
/* the bang behind a card slamming back into its window: an amber starburst */
#slotMachine .tmPow{position:absolute;left:50%;top:50%;z-index:0;width:calc(var(--mw) * 1.7);height:calc(var(--mw) * 1.7);margin:calc(var(--mw) * -.85) 0 0 calc(var(--mw) * -.85);opacity:0;pointer-events:none;
  clip-path:polygon(50% 0,61% 30%,93% 18%,72% 45%,100% 60%,68% 66%,78% 98%,50% 76%,22% 98%,32% 66%,0 60%,28% 45%,7% 18%,39% 30%);
  background:radial-gradient(closest-side,#ffe2a0,#ffad47 58%,#d8701c)}
#slotMachine .tmCard{position:absolute;inset:var(--wp);z-index:5;visibility:hidden}
#slotMachine .tmCard i{position:absolute;inset:0;border-radius:10px;overflow:hidden}
#slotMachine .tmCard .tmBk,#slotMachine .tmCard.back .tmFc{visibility:hidden}
#slotMachine .tmCard.back .tmBk{visibility:visible}
#slotMachine .tmFc{background:var(--img) 50% 36%/calc(var(--is) * .86) calc(var(--is) * .86) no-repeat,linear-gradient(180deg,#fff6e2,#f0d7a6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65),inset 0 2px 0 #fff,inset 0 -3px 0 rgba(120,80,30,.22),0 0 34px rgba(255,190,110,.6)}
#slotMachine .tmFc b{position:absolute;left:4%;right:4%;bottom:8%;font:800 italic clamp(9px,calc(var(--mw) * .13),18px)/1 var(--disp);text-transform:uppercase;color:var(--tm-on-amber)}
#slotMachine .tmBk{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%232a1406' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 7c-5 0-5 7-2 10l-1 6c-7 10-6 19 6 19s13-9 6-19l-1-6c3-3 3-10-2-10Z'/%3E%3Cpath d='M18 23h12'/%3E%3C/svg%3E") 50% 50%/46% auto no-repeat,linear-gradient(180deg,#fff1cc,#ffd88f);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),inset 0 2px 0 rgba(255,255,255,.6),0 0 34px rgba(255,190,110,.6)}
/* the drumroll: the other columns go dark under a sheet (never opacity: that flattens a flipping flap) */
#slotMachine .tmShade{position:absolute;inset:-4px;z-index:7;border-radius:14px;background:rgba(5,8,13,.62);opacity:0;pointer-events:none;transition:opacity .6s}
#slotMachine.drum .slotColumn:not(.last) .tmShade{opacity:1}
#slotMachine.drum .slotColumn.last .tmLamp::after{opacity:1}
#slotMachine.drum .slotColumn.last .tmRing{opacity:1;animation:tm-pulse .9s ease-in-out infinite alternate}
@keyframes tm-pulse{to{opacity:.45}}

/* the result area */
#slotMachine .tmRes{position:relative;height:var(--resh);margin-top:var(--g2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--sf) * .55)}
#slotMachine .tmStatus{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.1em;
  font:600 var(--sf)/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--tm-text-3)}
#slotMachine .tmStatus i{font-style:normal;animation:tm-dot 1.2s infinite both}
#slotMachine .tmStatus i:nth-child(2){animation-delay:.2s}#slotMachine .tmStatus i:nth-child(3){animation-delay:.4s}
@keyframes tm-dot{0%,100%{opacity:.2}40%{opacity:1}}
#slotMachine .tmR1{max-width:100%;font:800 italic var(--rf)/1.06 var(--disp);letter-spacing:.01em;text-transform:uppercase;transform-origin:50% 0;opacity:0;text-shadow:0 2px 0 rgba(0,0,0,.35)}
#slotMachine .tmR1 i{display:inline-block;font-style:inherit;color:var(--tm-amber)}
#slotMachine .tmR1 span{display:inline-block;white-space:nowrap}
#slotMachine .tmR2{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:calc(var(--sf) * .5) calc(var(--sf) * .9);transform-origin:50% 0;opacity:0}
#slotMachine .tmR2 span{font:600 var(--sf)/1.1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--tm-text-2)}
#slotMachine .tmR2 span b{font-weight:600;color:#f5f1e8}
#slotMachine .tmChip{display:inline-flex;align-items:center;height:calc(var(--sf) * 1.9);padding:0 .8em;border-radius:10px;
  font:800 italic calc(var(--sf) * 1.08)/1 var(--disp);letter-spacing:.04em;text-transform:uppercase;color:var(--tm-on-amber);
  background:linear-gradient(180deg,var(--tm-amber-hi),var(--tm-amber));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),inset 0 2px 0 rgba(255,255,255,.5),0 4px 0 var(--tm-amber-edge),0 7px 12px rgba(0,0,0,.4)}
#slotMachine .tmFoot{margin-top:calc(var(--fm) + var(--ff) * .7);font:600 var(--ff)/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--tm-text-3);white-space:nowrap}
#slotMachine.rev .tmFoot{color:var(--tm-text-2)}
@media(prefers-reduced-motion:reduce){
  #slotMachine .tmStatus i,#slotMachine.drum .slotColumn.last .tmRing,#slotMachine .tmBlur{animation:none}}

#toast .reaction svg{display:block;width:1em;height:1em;filter:drop-shadow(0 3px 2px #0008)}


/* "Who's playing?" (app/whoPlaying.js): one chip per player on this device;
   a seated chip is filled in its colour and shows P1/P2 (T1/T2 in teams). */
.whoChips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.whoChip{--c:#ff6741;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:4px 12px 4px 4px;border-radius:999px;
  font:600 14px/1 var(--disp);letter-spacing:.03em;background:#1b242de6;border:1px solid var(--line)}
.whoChip .whoDot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#120f0d;font:800 15px/1 var(--disp)}
.whoChip.seated{background:color-mix(in srgb,var(--c) 26%,#121a22);border-color:var(--c);box-shadow:inset 0 0 0 1px var(--c)}
.whoChip .whoSeat{font:800 11px/1 var(--disp);letter-spacing:.08em;padding:4px 6px;border-radius:6px;background:var(--c);color:#120f0d}
.whoChip.editing{border-style:dashed;border-color:var(--c)}
.whoChip .whoPencil{color:var(--c);font-size:16px}
.whoHint{margin:-2px 0 8px}
.whoChip.whoAdd,.whoChip.whoEdit{padding:4px 14px;color:var(--dim)}
.whoChip.whoEdit.on{color:var(--chrome);border-color:var(--chrome)}
.whoEditor{display:grid;gap:8px;padding:10px;margin-bottom:8px;border:1px solid var(--line);border-radius:10px;background:#121a22}
.whoNameRow{display:flex;gap:6px}
.whoNameRow input{flex:1;min-width:0;background:var(--ink2);border:1px solid var(--line);color:var(--chrome);padding:9px 12px;border-radius:6px;font:15px var(--body)}
.whoRoll{min-width:46px;font-size:20px;padding:4px}
.whoKid.on{background:var(--chrome);color:var(--ink)}
.whoSwatches{display:flex;flex-wrap:wrap;gap:6px}
.whoSwatch{--c:#fff;width:32px;height:32px;min-height:0;padding:0;border-radius:50%;background:var(--c);border:2px solid transparent}
.whoSwatch.on{border-color:var(--chrome);box-shadow:0 0 0 2px var(--ink)}
.whoAvatars{display:flex;flex-wrap:wrap;gap:6px}
.whoAvatar{width:38px;height:38px;min-height:0;padding:0;border-radius:10px;font-size:20px;line-height:1;background:#1b242de6;border:2px solid transparent}
.whoAvatar.on{border-color:var(--chrome)}
.whoChip .whoDot{font-size:17px}
.whoActions{display:flex;gap:6px}.whoActions button{flex:1}
.whoDelete{color:#ff8a7a;border-color:#ef453e66}
.whoError{color:#ff8a7a}

/* "More options" fold on the menu (app/modeChrome.js) */
.moreOpts{margin:4px 0 10px;border:1px solid var(--line);border-radius:8px;padding:0 12px}
.moreOpts>summary{cursor:pointer;list-style:none;padding:12px 0;font:700 12px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.moreOpts>summary::-webkit-details-marker{display:none}
.moreOpts>summary::after{content:" +";color:var(--flame)}
.moreOpts[open]>summary::after{content:" \2212"}
.moreOpts[open]{padding-bottom:6px}

/* Bowling HUD (app/bowlingHud.js): the pin rack in the banner, the scorecard */
body.bowlHud #banner{position:relative;padding-right:62px;cursor:pointer}
#pinRack{display:none;position:absolute;right:10px;top:50%;transform:translateY(-50%);gap:2px;flex-direction:column;align-items:center}
body.bowlHud #pinRack{display:flex}
#pinRack .prRow{display:flex;gap:3px}
#pinRack i{width:8px;height:8px;border-radius:50%;box-sizing:border-box;border:1.5px solid currentColor;background:transparent;opacity:.45;transition:background .15s,opacity .15s}
#pinRack i.up{background:currentColor;opacity:1}
#pinRack i.gold{opacity:1;border-color:#d4a017;box-shadow:0 0 0 1.5px #d4a01766}
#pinRack i.gold.up{background:#d4a017}
#scoreCardSheet{position:fixed;z-index:30;left:50%;top:calc(env(safe-area-inset-top) + 120px);transform:translateX(-50%);
  width:min(360px,calc(100vw - 32px));max-height:calc(100vh - 180px);overflow:auto;box-sizing:border-box;padding:12px;
  background:#101722f5;border:1px solid var(--line);border-top:3px solid var(--flame);box-shadow:0 18px 40px #000b}
.scTitle{font:800 italic 22px/1 var(--disp);text-transform:uppercase;margin-bottom:8px}
.scorecard{width:100%;border-collapse:collapse;font:600 15px/1.1 var(--disp);text-align:center}
.scorecard th,.scorecard td{border:1px solid #ffffff1f;padding:5px 4px}
.scorecard thead th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);overflow:hidden;text-overflow:ellipsis;max-width:120px}
.scorecard td small{display:block;font-size:10px;color:var(--dim);margin-top:2px}
.scorecard td.mX{color:#ffd95a}.scorecard td.ms{color:#7ff0f2}.scorecard td.mG{color:#ff8a7a}
.scorecard tfoot td{font-size:18px;color:var(--chrome)}
#scoreCardSheet .scClose{width:100%;margin-top:10px}
/* short landscape: compact score plates (mobile audit A4) */
@media(max-height:480px) and (orientation:landscape){
  .plate{padding:5px 10px!important;width:min(190px,100%)}
  .plate .who{font-size:9px!important;letter-spacing:.06em}
  .plate .num{font-size:26px!important;margin-top:0}
  .plate.showcar .badge-car{width:60px;height:38px;bottom:0}
  #banner{padding:6px 14px 7px}#banner .b1{font-size:15px}#banner .b2{font-size:10px;margin-top:2px}
  body.bowlHud #banner{padding-right:54px}
  #scoreCardSheet{top:calc(env(safe-area-inset-top) + 62px);max-height:calc(100vh - 76px)}
}

/* results panel (app/gameOver.js) */
.overStats{width:100%;margin-top:14px;border-collapse:collapse;font:600 15px/1.2 var(--disp)}
.overStats th,.overStats td{padding:6px 8px;border-bottom:1px solid #ffffff14;text-align:center}
.overAwards{margin-top:12px;display:grid;gap:6px}
.overAward{font:600 14px/1.25 var(--disp);padding:7px 10px;border-radius:10px;background:#ffffff0d;border-left:3px solid var(--amber,#ffb13b);text-align:left}
.overAward[data-side="1"]{border-left-color:#6ec6ff}
.overAward .star{color:var(--amber,#ffb13b)}
.overAward .why{opacity:.7;font-weight:500;margin-left:4px}
.overStats tbody th{text-align:left;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600}
.overStats thead th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);max-width:130px;overflow:hidden;text-overflow:ellipsis}
.overStats thead th.win{color:var(--flame)}
.overStats td{font-size:18px}
.overCard{margin-top:10px}

/* live rack-clear stamp (app/bowlingPinPops.js) */
.rackStamp{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%) rotate(-6deg);pointer-events:none;white-space:nowrap;
  font:800 italic clamp(48px,14vw,96px)/1 var(--disp);color:#fff4d6;-webkit-text-stroke:8px #2a0716;paint-order:stroke fill;
  text-shadow:0 6px 0 #c22a52,0 0 30px #ff8b42cc;animation:rack-stamp 1.6s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes rack-stamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-6deg) scale(2.4)}12%{opacity:1;transform:translate(-50%,-50%) rotate(-6deg) scale(.92)}
  20%{transform:translate(-50%,-50%) rotate(-6deg) scale(1.05)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%) rotate(-6deg) scale(1)}}
@media(prefers-reduced-motion:reduce){.rackStamp{animation:none;opacity:1}}

/* Bowling's Warm-up (app/bowlingWarmup.js): the banner with its Skip key, the prompt, a hand and a dotted line from the car to the
   pins, a glowing ring on the head pin, the pin counter and the comic stamps. Screen furniture over the canvas; only the Skip key takes taps. */
#warmup{position:fixed;inset:0;z-index:7;pointer-events:none;opacity:0;transition:opacity .25s}
#warmup.show{opacity:1}
body.warmup #hudTop,body.warmup #carPick,body.warmup .hint{visibility:hidden}
#warmup .wuBar{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 10px);transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  padding:6px 8px 6px 16px;border-radius:999px;background:linear-gradient(180deg,rgba(29,42,63,.96),rgba(16,24,38,.96));
  box-shadow:inset 0 0 0 1.5px rgba(255,173,71,.7),0 4px 0 #04070c,0 10px 22px rgba(0,0,0,.5);white-space:nowrap}
#warmup .wuTag{font:900 italic 16px/1 var(--disp);letter-spacing:.08em;color:#ffad47}
#warmup .wuStep{font:800 13px/1 var(--disp);color:#b3c5e8;letter-spacing:.04em}
#warmup .wuSkip{pointer-events:auto;min-height:36px;min-width:56px;padding:0 14px;border:0;border-radius:999px;background:#33425e;color:#fff;
  font:800 13px/1 var(--disp);letter-spacing:.04em;cursor:pointer}
#warmup .wuSkip:active{background:#4a5c80}
#warmup .wuPrompt{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 64px);transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);
  padding:9px 18px;border-radius:999px;background:rgba(14,17,26,.88);border:1px solid rgba(255,214,90,.55);color:#fff;
  font:800 italic 17px/1.2 var(--disp);letter-spacing:.02em;text-align:center}
#warmup .wuHint{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 108px);transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);
  color:#fff;font:700 13px/1.2 var(--disp);letter-spacing:.04em;text-shadow:0 2px 0 #04070c,0 0 10px rgba(0,0,0,.7);text-align:center}
#warmup .wuLine{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .2s}
#warmup .wuLine line{stroke:rgba(255,214,90,.95);stroke-width:4;stroke-linecap:round;stroke-dasharray:2 11;animation:wuDash 1s linear infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
#warmup .wuHand{position:absolute;left:var(--hx,50%);top:var(--hy,50%);width:44px;height:44px;margin:-6px 0 0 -18px;opacity:0;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
#warmup.guide .wuHand{animation:wuDrag 2.2s cubic-bezier(.4,0,.2,1) infinite}
#warmup.guide .wuLine{opacity:1}
#warmup.guide.still .wuHand{animation:none;opacity:1;transform:translateY(60px)}
#warmup.still .wuLine line{animation:none}
#warmup .wuRing{position:absolute;transform:translate(-50%,-50%);border-radius:50%;border:5px solid #ffd23f;opacity:0;
  box-shadow:0 0 18px 4px rgba(255,210,63,.85),inset 0 0 14px rgba(255,210,63,.7)}
#warmup.ringOn .wuRing{opacity:1;animation:wuRing 1.1s ease-in-out infinite}
#warmup.ringOn.still .wuRing{animation:none}
#warmup .wuCount{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 150px);transform:translateX(-50%) scale(.6);opacity:0;
  font:900 italic 38px/1 var(--disp);color:#fff4d6;-webkit-text-stroke:6px #2a0716;paint-order:stroke fill;text-shadow:0 4px 0 #c22a52;white-space:nowrap}
#warmup .wuCount.show{opacity:1;transform:translateX(-50%) scale(1);animation:wuPop .3s cubic-bezier(.2,1.5,.4,1)}
#warmup .wuStamp{top:42%}
#warmup .wuStamp.small{font-size:clamp(30px,9vw,54px);-webkit-text-stroke-width:6px;white-space:normal;width:min(92vw,520px);text-align:center}
#warmup .wuStamp.big{font-size:clamp(60px,18vw,120px)}
@keyframes wuDrag{0%{transform:translateY(0) scale(1.15);opacity:0}12%{transform:translateY(0) scale(1);opacity:1}
  70%{transform:translateY(90px);opacity:1}82%,100%{transform:translateY(90px);opacity:0}}
@keyframes wuDash{to{stroke-dashoffset:-26}}
@keyframes wuRing{0%,100%{transform:translate(-50%,-50%) scale(.9);opacity:.75}50%{transform:translate(-50%,-50%) scale(1.12);opacity:1}}
@keyframes wuPop{0%{transform:translateX(-50%) scale(1.5)}100%{transform:translateX(-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){#warmup .wuCount.show{animation:none}#warmup.ringOn .wuRing{animation:none}}

/* Quick chat (app/quickChat.js): online matches only. A round button above
   the pause button, a sheet of stickers and preset phrases, and a bubble
   under the sender's score plate. */
#qcBtn{display:none;position:fixed;z-index:4;left:max(14px,env(safe-area-inset-left));bottom:calc(72px + env(safe-area-inset-bottom));
  width:48px;height:48px;min-height:0;padding:0;border-radius:50%;place-items:center;color:var(--chrome);
  background:#101722e6;border:2px solid #f5f1e85c;box-shadow:0 6px 16px #0008,inset 0 1px #ffffff26}
.qcOn #qcBtn{display:grid}
.derby-controls-left #qcBtn{left:auto;right:max(14px,env(safe-area-inset-right))}
#qcSheet{position:fixed;z-index:8;left:max(14px,env(safe-area-inset-left));bottom:calc(130px + env(safe-area-inset-bottom));
  width:min(340px,calc(100vw - 28px));max-height:min(60vh,420px);overflow:auto;padding:12px;border-radius:18px;
  background:rgba(14,17,26,.95);border:1px solid #f5f1e833;box-shadow:0 12px 30px #000a;
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .18s,transform .18s}
#qcSheet.show{opacity:1;transform:none;pointer-events:auto}
.derby-controls-left #qcSheet{left:auto;right:max(14px,env(safe-area-inset-right))}
#qcSheet .qcStickers{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-bottom:10px}
#qcSheet .qcStickers button{font-size:22px;padding:6px 0;min-height:40px;background:none;border:0}
#qcSheet .qcPhrases{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#qcSheet .qcPhrases button{min-height:40px;padding:6px 4px;font:700 12px/1.15 var(--disp);letter-spacing:.02em}
#qcSheet .qcMute{width:100%;margin-top:10px;min-height:40px}
.qcBubble{position:fixed;z-index:6;top:calc(env(safe-area-inset-top) + 108px);max-width:46vw;padding:8px 14px;border-radius:16px;
  background:#fff;color:#14171d;font:700 15px/1.2 var(--disp);box-shadow:0 6px 16px #0007;
  opacity:0;transform:scale(.7);transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1);pointer-events:none}
.qcBubble.show{opacity:1;transform:none}
.qcBubble small{display:block;font:700 10px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:3px}
.qcBubble.qcSide0{left:max(16px,env(safe-area-inset-left));border-top-left-radius:4px;border:3px solid #ff6741}
.qcBubble.qcSide1{right:max(16px,env(safe-area-inset-right));border-top-right-radius:4px;border:3px solid #49cbea}
.qcBubble.qcSticker{font-size:34px;padding:6px 12px}
@media (prefers-reduced-motion:reduce){.qcBubble{transition:opacity .2s}}

/* The daily challenge card is the start menu's (app/daily.js; src/view/menu.css) */
#overDaily{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:10px}
#overDaily.hide{display:none}
#overDaily button{min-height:40px;padding:0 16px}

/* Community sheet (app/community.js): leaderboard, friends, comments */
#communitySheet{z-index:40}
#communitySheet .sheet{max-width:520px;width:calc(100vw - 24px);max-height:calc(100dvh - 32px);display:flex;flex-direction:column}
#communitySheet .cmHead{display:flex;justify-content:space-between;align-items:center;gap:12px}
#communitySheet .cmHead h2{margin:0;font:700 22px/1.1 var(--disp)}
#communitySheet .cmTabs,#communitySheet .cmViews{display:flex;gap:6px;margin:12px 0 4px;flex-wrap:wrap}
#communitySheet .cmTabs button,#communitySheet .cmViews button{flex:1 1 auto;min-height:40px}
#communitySheet .cmTabs button.on,#communitySheet .cmViews button.on{background:#ffb020;color:#14171d;border-color:#ffb020}
#communitySheet .cmBody{overflow:auto;padding-bottom:6px}
#communitySheet .cmMsg{min-height:18px;font-size:12px;color:#ffcf6a}
#communitySheet .cmSub{font:700 11px/1.2 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:10px 0 6px}
#communitySheet .cmNote{font-size:13px;line-height:1.4;color:var(--dim);margin:8px 0}
#communitySheet .cmEmpty{color:var(--dim);font-size:13px;list-style:none;padding:10px 0}
#communitySheet ol.cmBoard,#communitySheet ul.cmFriends,#communitySheet ul.cmComments{list-style:none;margin:0;padding:0;display:grid;gap:4px}
#communitySheet .cmBoard li{display:grid;grid-template-columns:36px 1fr auto;gap:8px;align-items:center;padding:8px 10px;border-radius:10px;background:#ffffff0d}
#communitySheet .cmBoard li.me{background:#ffb02033;outline:1px solid #ffb02088}
#communitySheet .cmBoard .rk{font:700 15px/1 var(--disp);color:#ffcf6a;text-align:right}
#communitySheet .cmBoard .pt{font:700 15px/1 var(--disp)}
#communitySheet .cmCode{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px 12px;border-radius:12px;background:#ffffff0d}
#communitySheet .cmCode b{font:700 20px/1 var(--disp);letter-spacing:.08em;white-space:nowrap}
#communitySheet .cmCode span{font-size:12px;color:var(--dim);min-width:0}
#communitySheet .cmAdd,#communitySheet .cmWrite{display:flex;gap:8px;margin-top:10px}
#communitySheet .cmAdd input,#communitySheet .cmWrite textarea{flex:1;min-width:0;font:inherit;padding:8px 10px;border-radius:10px;border:1px solid #f5f1e833;background:#0b0f17;color:#fff}
#communitySheet .cmFriends li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;background:#ffffff0d}
#communitySheet .cmFriends .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#communitySheet .dot{width:9px;height:9px;border-radius:50%;background:#5b6475;flex:none}
#communitySheet .dot.on{background:#3ddc84}
#communitySheet .cmSmall{min-height:34px;padding:0 10px;font-size:12px}
#communitySheet .cmGhost{background:transparent}
#communitySheet .cmReacts{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
#communitySheet .cmReacts button{min-height:36px;padding:0 10px}
#communitySheet .cmReacts button.on{background:#49cbea33;border-color:#49cbea}
#communitySheet .cmComments li{padding:8px 10px;border-radius:10px;background:#ffffff0d;display:grid;grid-template-columns:1fr auto;gap:2px 8px}
#communitySheet .cmComments .who{font:700 11px/1.2 var(--disp);letter-spacing:.08em;color:var(--dim)}
#communitySheet .cmComments .txt{grid-column:1;font-size:14px;line-height:1.35;white-space:pre-wrap;overflow-wrap:anywhere}
#communitySheet .cmComments button{grid-column:2;grid-row:1 / span 2;align-self:center}
.cmInvite{position:fixed;z-index:45;left:50%;top:calc(env(safe-area-inset-top) + 16px);transform:translateX(-50%);width:min(380px,calc(100vw - 24px));
  display:flex;gap:8px;align-items:center;padding:12px 14px;border-radius:16px;background:#101722f2;border:1px solid #49cbea88;box-shadow:0 10px 26px #000a}
.cmInvite div{flex:1;font-size:14px}
.cmInvite button{min-height:40px;padding:0 12px}
/* friends with accounts: a request's or friend's second line, the Family badge, the record */
#communitySheet .cmFriends li{flex-wrap:wrap}
#communitySheet .cmFriends .who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#communitySheet .cmFriends .who .nm{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
#communitySheet .cmFriends .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--dim)}
#communitySheet .cmBadge{font:700 10px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;border-radius:999px;border:1px solid #fff4}
#communitySheet .cmBadge.family{background:#49cbea33;border-color:#49cbea;color:var(--chrome)}
#communitySheet .cmOpenAccount{width:100%;min-height:44px;margin-top:6px}
#communitySheet .cmFriendsOff{padding:10px 12px;border-radius:10px;background:#ffffff0d}
/* online play with accounts (net/lobby.js, app/onlineResult.js): the game-over additions and the friend-request card */
#overOnline{display:flex;flex-direction:column;gap:8px;margin-top:10px}
#overOnline.hide{display:none}
#overOnline .ovSaved,#overOnline .ovUnsaved,#overOnline .ovFriend{font-size:13px;line-height:1.35;color:var(--dim)}
#overOnline .ovSaved::before{content:"✓ ";color:#3ddc84;font-weight:700}
#overOnline .ovFriend.ok{color:#3ddc84}
#overOnline .ovAddFriend{width:100%;min-height:44px}
.pvpAsk{position:fixed;z-index:60;left:50%;top:calc(env(safe-area-inset-top) + 16px);transform:translateX(-50%);width:min(380px,calc(100vw - 24px));
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 14px;border-radius:16px;background:#101722f2;border:1px solid #49cbea88;box-shadow:0 10px 26px #000a;color:var(--chrome)}
.pvpAsk .pvpAskText{flex:1 1 100%;font-size:14px;line-height:1.35}
.pvpAsk button{flex:1;min-height:40px;padding:0 12px}

/* Lane Tour sheet (app/tour.js) and achievements (app/achievements.js);
   shares the Community sheet's head and tabs */
#tourSheet{z-index:40}
#tourSheet .sheet{max-width:520px;width:calc(100vw - 24px);max-height:calc(100dvh - 32px);display:flex;flex-direction:column}
#tourSheet .cmHead{display:flex;justify-content:space-between;align-items:center;gap:12px}
#tourSheet .cmHead h2{margin:0;font:700 22px/1.1 var(--disp)}
#tourSheet .cmTabs{display:flex;gap:6px;margin:12px 0 8px}
#tourSheet .cmTabs button{flex:1;min-height:40px}
#tourSheet .cmTabs button.on{background:#ffb020;color:#14171d;border-color:#ffb020}
#tourSheet .cmGhost{background:transparent}
#tourSheet .tvBody{overflow:auto}
#tourSheet .tvHead{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0 8px;font:700 15px/1.2 var(--disp)}
#tourSheet .tvHead span{color:#ffcf6a}
#tourSheet ol.tvLanes{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#tourSheet .tvLanes li{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:#ffffff0d}
#tourSheet .tvLanes li.locked{opacity:.5}
#tourSheet .tvInfo{flex:1;min-width:0}
#tourSheet .tvName{font:700 14px/1.2 var(--disp)}
#tourSheet .tvVs{font-size:12px;color:var(--dim);margin-top:2px}
#tourSheet .tvGoal{font-size:11px;color:#ffcf6a;margin-top:4px}
#tourSheet .tvRight{display:grid;gap:6px;justify-items:end}
#tourSheet .tvStars{color:#ffcf6a;letter-spacing:.1em;white-space:nowrap}
#tourSheet .tvRight button{min-height:38px;min-width:76px}
#tourSheet .cmSub{font:700 11px/1.2 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:4px 0 8px}
.achList{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.achList li{display:flex;gap:12px;align-items:center;padding:8px 10px;border-radius:12px;background:#ffffff0a;opacity:.55}
.achList li.got{opacity:1;background:#ffb0201f;outline:1px solid #ffb02055}
.achList .ai{font-size:24px;width:32px;text-align:center}
.achList b{display:block;font:700 14px/1.2 var(--disp)}
.achList small{color:var(--dim);font-size:12px}
#overTour{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:space-between;margin-top:10px}
#overTour.hide{display:none}
#overNewTable{margin-top:10px}
#overNewTable.hide{display:none}
#overNewTable .newTable{display:flex;gap:10px;align-items:center;color:#ffcf6a;font:700 15px/1.3 var(--disp)}
#overNewTable .newTable img{width:96px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.5)}
#overNewTable .newTable.slide{animation:newTableIn .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes newTableIn{from{transform:translateX(-40px);opacity:0}to{transform:none;opacity:1}}
#overTour div{flex:1 1 100%;color:#ffcf6a;font:700 15px/1.3 var(--disp)}
#overTour button{min-height:40px;padding:0 16px}

/* Transparent portraits keep their raised heads; never clip them to circles. */
.whoAvatars{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px;max-height:260px;overflow-y:auto;padding:5px}
.whoAvatar{width:100%;height:66px;border-radius:12px;display:grid;place-items:center}
.whoAvatar img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.whoAvatar.on{background:#334350;border-color:var(--chrome);box-shadow:0 0 0 1px var(--chrome)}
.whoChip .whoDot.hasAvatar{width:36px;height:36px;background:transparent}
.whoDot img{width:100%;height:100%;object-fit:contain}
.profile-avatar{width:36px;height:36px;object-fit:contain;float:left;margin:0 7px 0 0}
.profile-avatar[hidden]{display:none}
.plate.p2 .profile-avatar{float:right;margin:0 0 0 7px}
@media(max-width:600px){.profile-avatar{width:27px;height:27px;margin-right:4px}.plate.p2 .profile-avatar{margin-left:4px}}

/* Low graphics (html.derby-gfx-low, app/prefs.js applyGraphicsQuality): UI entrances are opacity-only, no translate or scale
   (reduced motion already removes them entirely). */
@keyframes ux-fade{from{opacity:0}}
html.derby-gfx-low .overlay>.sheet,html.derby-gfx-low :is(#ui,.ui)>:is(.sheet,.challengeSheet),html.derby-gfx-low :is(#menu,.ui) .sheet-layer .sheet{animation-name:ux-fade}
@media(max-width:599px){html.derby-gfx-low :is(#ui,.ui):not(#over)>:is(.sheet,.challengeSheet){animation-name:ux-fade}}   /* the phones' rise-from-the-bottom sheets (screens.css ux-up) */
@media(min-height:481px){html.derby-gfx-low #hazardIntro{transform:translate(-50%,0)}}
@media(max-height:480px){html.derby-gfx-low #hazardIntro{transform:none}}
html.derby-gfx-low #coach .ccText{transform:translateX(-50%)}
html.derby-reduced-motion .overlay>.sheet,html.derby-reduced-motion #coach,html.derby-reduced-motion #coach .ccText,html.derby-reduced-motion #hazardIntro{animation:none;transition:none}

/* Co-op sheet (app/coop.js): the scenario list, the table pick and the three ways to play; shares the Lane Tour sheet's head */
#coopSheet{z-index:40;--sheet-w:520px}
#coopSheet .sheet{max-width:520px;width:calc(100vw - 24px);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;overflow:hidden}
#coopSheet .cmHead{display:flex;justify-content:space-between;align-items:center;gap:12px}
#coopSheet .coopHeadL{display:flex;align-items:center;gap:10px;min-width:0}
#coopSheet .cmHead h2{margin:0;font:700 22px/1.1 var(--disp)}
#coopSheet .cmGhost{background:transparent;min-height:38px}
#coopSheet .tvBody{overflow:auto}
#coopSheet .cmSub{font:700 11px/1.2 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:12px 0 8px}
#coopSheet ol.coopList{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#coopSheet .coopCard{display:grid;gap:4px;width:100%;text-align:left;padding:12px 14px;border-radius:12px;background:#ffffff0d;border:1px solid #ffffff1a;color:inherit;min-height:44px}
#coopSheet .coopName{font:700 16px/1.2 var(--disp)}
#coopSheet .coopBlurb{font-size:13px;color:var(--dim)}
#coopSheet .coopLines{font-size:11px;color:#ffcf6a}
#coopSheet .tvStars{color:#ffcf6a;letter-spacing:.1em;white-space:nowrap}
#coopSheet .coopMaps{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
#coopSheet .coopMap{min-height:48px;padding:8px 12px;border-radius:12px;background:#ffffff0d;border:1px solid #ffffff1a;color:inherit}
#coopSheet .coopPlays{display:grid;gap:8px}
#coopSheet .coopPlay{display:grid;gap:2px;justify-items:start;text-align:left;padding:12px 16px;min-height:56px}
#coopSheet .coopPlay span{font-size:12px;opacity:.7}
#coopSheet .coopOnline{display:grid;gap:12px;justify-items:start}
#coopSheet .coopOnline p{margin:0}
#coopSheet .coopCode{font:800 34px/1 var(--disp);letter-spacing:.18em}

/* Co-op "how to play" (app/coopHowTo.js): the block in the Co-op sheet and the card at the start of a match, plus the round ? button */
.coopHowTo{display:grid;gap:8px;margin:12px 0 4px;padding:0}
.coopHowRow{display:grid;gap:2px;padding:9px 12px;border-radius:10px;background:#ffffff0d;border:1px solid #ffffff14}
.coopHowRow dt{font:700 11px/1.2 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0}
.coopHowRow dd{margin:0;font-size:14px;line-height:1.35}
.coopHowRow.win dt{color:#7be08a}
.coopHowRow.lose dt{color:#ff8a80}
.coopHowRow.stars dd{font-size:12px;color:#ffcf6a}
.coopHowRow.tip dt{color:#ffcf6a}
#coopHowToCard{z-index:41}
#coopHowToCard .sheet{max-width:440px;width:calc(100vw - 24px);max-height:calc(100dvh - 32px);overflow:auto;display:grid;gap:6px}
#coopHowToCard .cmSub{margin:0}
#coopHowToCard .coopHowName{margin:0 0 4px;font:700 22px/1.1 var(--disp)}
#coopHowToCard .btn{margin-top:8px;justify-self:stretch;min-height:48px}
.coopHelp{position:fixed;right:12px;top:calc(env(safe-area-inset-top) + 74px);z-index:9;width:40px;height:40px;border-radius:50%;border:2px solid #ffffff55;background:#0b1118cc;color:#fff;font:800 20px/1 var(--disp);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.coopHelp.hide{display:none!important}

/* The boss health bar (app/bossBar.js): a reusable top-of-screen bar for any boss fight */
.bossBar{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top) + 76px);z-index:8;width:min(440px,calc(100vw - 116px));pointer-events:none;
  padding:6px 10px 8px;border-radius:12px;background:#0b1118d9;border:2px solid #ffffff40;box-shadow:0 4px 16px #0008}
.bossBar.hide{display:none!important}
.bossBar .bbHead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px}
.bossBar .bbName{font:800 italic 16px/1.1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:#fff;text-shadow:0 2px 0 #000a}
.bossBar .bbPct{font:800 15px/1.1 var(--disp);color:#fff}
.bossBar .bbTrack{position:relative;height:16px;border-radius:8px;background:#2a1010;overflow:hidden;border:1px solid #0008}
.bossBar .bbTrack i{position:absolute;left:0;top:0;bottom:0;display:block;width:100%;border-radius:8px}
.bossBar .bbGhost{background:var(--bbGhost,#ffd9a0);transition:width .7s ease-out .35s}
.bossBar .bbFill{background:linear-gradient(var(--bbHi,#ff5a4e),var(--bb,#d4231a));box-shadow:0 0 8px var(--bbGlow,transparent);transition:width .18s ease-out}
.bossBar.low .bbFill{background:linear-gradient(var(--bbHiLow,#ff7a6e),var(--bbLow,#ff2a1f))}
.bossBar.hit{animation:bbHit .42s ease-out}
@keyframes bbHit{0%{box-shadow:0 0 0 0 #fff,0 4px 16px #0008;border-color:#fff;transform:translateX(-50%) scale(1.04)}100%{box-shadow:0 0 0 10px #fff0,0 4px 16px #0008;border-color:#ffffff40;transform:translateX(-50%) scale(1)}}
html.derby-reduced-motion .bossBar,html.derby-reduced-motion .bossBar i{transition:none}
html.derby-reduced-motion .bossBar.hit{animation:none;border-color:#fff}

/* The garage reveal (app/garageReveal.js): a full-screen canvas with the plates and the buttons over it. While the result sheet is
   waiting for its Continue (#over.reveal-due) the ways off the sheet are tucked away, so the reveal plays before the next match. */
#over.reveal-due #bRematch,#over.reveal-due #bChange,#over.reveal-due #overOnboard,#over.reveal-due #bMatchReel,#over.reveal-due #bReelClip{display:none!important}
#garageReveal{padding:0!important;background:#0b0f14!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;z-index:40;flex-direction:column;align-items:stretch!important;justify-content:flex-end!important}
#grCanvas{position:absolute;left:0;right:0;top:0;bottom:calc(172px + env(safe-area-inset-bottom));width:100%;height:calc(100% - 172px - env(safe-area-inset-bottom));display:block}
.grVig{position:absolute;left:0;right:0;top:0;bottom:calc(172px + env(safe-area-inset-bottom));pointer-events:none;background:radial-gradient(ellipse at 50% 46%,transparent 45%,rgba(0,0,0,.55) 100%)}
.grTop{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
.grTop h1{flex:1;margin:0;font-size:clamp(20px,5vw,30px);text-align:center;text-shadow:0 2px 12px #000}
.grWho{display:flex;align-items:center;gap:8px;font:700 14px/1 var(--disp);color:var(--chrome)}
.grWho img{width:34px;height:34px;border-radius:50%}
#grSkip{min-height:40px;padding:8px 16px}
#garageReveal[data-phase=closed] #grSkip{visibility:hidden}
.grPlates{position:relative;display:flex;gap:10px;justify-content:center;padding:0 12px;min-height:84px;pointer-events:none}
.grPlate{flex:1 1 0;max-width:260px;padding:10px 14px;border-radius:10px;text-align:center;color:#120f0d;background:linear-gradient(145deg,#f3d27a,#e0a63a);box-shadow:0 6px 24px #000a;border:2px solid #fff3c4}
.grPlate b{display:block;font:800 clamp(15px,4vw,20px)/1.15 var(--disp)}
.grPlate small{display:block;margin-top:2px;font:700 12px/1.2 var(--disp);letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.grPlate.slide{animation:grPlateIn .5s cubic-bezier(.2,.9,.25,1.1) both}
.grPlate.fade{animation:grPlateFade .5s ease-out both}
@keyframes grPlateIn{from{transform:translateX(-120%);opacity:0}to{transform:none;opacity:1}}
@keyframes grPlateFade{from{opacity:0}to{opacity:1}}
.grPlate em{display:block;margin-top:3px;font:700 11px/1.2 var(--disp);letter-spacing:.06em;opacity:.7;font-style:normal}
.grPlate.big{background:linear-gradient(145deg,#ffe9a0,#ffb320 55%,#e08a10);border-color:#fffbe6;box-shadow:0 6px 28px #000a,0 0 22px #ffc23aaa}
/* the name slam (garageReveal.js showStamp): a comic stamp over the picture, above the car; fades away after about 2.6 s */
.grStamps{position:absolute;left:0;right:0;top:calc(max(14px,env(safe-area-inset-top)) + 58px);display:flex;justify-content:center;pointer-events:none;z-index:2}
.grStamp{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:94vw;transform:rotate(-4deg);font-family:var(--disp)}
.grStamp .grKick{font:800 italic clamp(15px,4.4vw,24px)/1 var(--disp);letter-spacing:.14em;color:#ffcf6a;-webkit-text-stroke:5px #2a0716;paint-order:stroke fill;text-shadow:0 3px 0 #c22a52}
.grStamp .grName{margin-top:2px;font:800 italic clamp(30px,9.4vw,76px)/1 var(--disp);color:#fff4d6;-webkit-text-stroke:8px #2a0716;paint-order:stroke fill;text-shadow:0 6px 0 #c22a52,0 0 30px #ff8b42cc}
.grStamp .grSub{margin-top:8px;padding:3px 12px;border-radius:99px;background:#000a;border:1px solid #fff4;font:700 clamp(11px,3vw,14px)/1.3 var(--disp);letter-spacing:.1em;text-transform:uppercase;color:#fff}
.grStamp.big .grName{color:#fff3b8;text-shadow:0 6px 0 #a35a00,0 0 36px #ffc23a}
.grStamp.big .grKick{color:#fff;text-shadow:0 3px 0 #b36b00}
.grStamp.slam{animation:grStampSlam 2.9s cubic-bezier(.2,.9,.25,1) both}
.grStamp.fade{animation:grStampFade 2.9s ease-out both}
@keyframes grStampSlam{0%{opacity:0;transform:rotate(-9deg) scale(3.2)}9%{opacity:1;transform:rotate(-4deg) scale(.88)}15%{transform:rotate(-4deg) scale(1.07)}21%{transform:rotate(-4deg) scale(1)}84%{opacity:1;transform:rotate(-4deg) scale(1)}100%{opacity:0;transform:rotate(-4deg) translateY(-10px) scale(1)}}
@keyframes grStampFade{0%{opacity:0}15%{opacity:1}84%{opacity:1}100%{opacity:0}}
html.derby-reduced-motion .grStamp.slam{animation:grStampFade 2.9s ease-out both}
@media(prefers-reduced-motion:reduce){.grStamp.slam{animation:grStampFade 2.9s ease-out both}}
.grBtns{position:relative;display:flex;gap:10px;justify-content:center;padding:12px 16px max(16px,env(safe-area-inset-bottom));min-height:76px}
.grBtns button{flex:1 1 0;max-width:260px;min-height:52px;white-space:nowrap;padding:10px 12px;font-size:clamp(15px,4.4vw,20px)}
.grPlates,.grBtns{background:#0b0f14}
.grPlates{padding-top:10px}

/* The Garage's car viewer (app/garageCars.js): the reveal's garage scene as a turntable, with the facts under it. */
#carViewer{z-index:42;padding:0!important;flex-direction:column;align-items:stretch!important;justify-content:flex-start!important;background:#0b0f14!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#carViewer .cvStage{position:relative;flex:1 1 0;min-height:0}
#cvCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#carViewer .cvClose{position:absolute;left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));min-height:44px;padding:8px 16px;z-index:2}
#carViewer .cvHint{position:absolute;left:0;right:0;bottom:8px;text-align:center;font:700 12px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:#fff9;pointer-events:none}
#carViewer .cvSpin,#carViewer .cvBad{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff;font:700 15px/1.3 var(--disp);background:#0b0f14}
#carViewer .cvBad.hide,#carViewer .cvSpin.hide{display:none}
#carViewer .cvRing{width:38px;height:38px;border-radius:50%;border:4px solid #ffffff30;border-top-color:#ffcf6a;animation:cvSpin .9s linear infinite}
@keyframes cvSpin{to{transform:rotate(360deg)}}
html.derby-reduced-motion #carViewer .cvRing{animation-duration:2.4s}
#carViewer .cvPanel{flex:0 0 auto;padding:12px 16px max(16px,env(safe-area-inset-bottom));background:#0b0f14;border-top:1px solid #ffffff22;max-height:46vh;overflow:auto}
#carViewer .cvPanel h2{margin:0;font:800 clamp(20px,6vw,28px)/1.1 var(--disp)}
#carViewer .cvClass{margin-top:4px;font:700 12px/1.2 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:#ffcf6a}
#carViewer .cvFacts{display:flex;gap:18px;margin:10px 0 0;padding:0}
#carViewer .cvFacts dt{font:700 11px/1.2 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:#fff9}
#carViewer .cvFacts dd{margin:2px 0 0;font:700 16px/1.2 var(--disp);font-variant-numeric:tabular-nums}
#carViewer .cvPlay,#carViewer .cvUnlock{margin-top:10px;font-size:15px;line-height:1.4;color:#e8eef7}
#carViewer .cvPlay:empty,#carViewer .cvUnlock:empty{display:none}

/* XP on the result sheet (app/xpSheet.js): one card per human profile, side by side when there are two. */
#overXp{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px;width:100%}
#overXp .xpCard{flex:1 1 0;min-width:150px;max-width:300px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);transition:box-shadow .3s,border-color .3s}
#overXp .xpWho{font:700 13px/1.2 var(--disp);color:var(--chrome,#ddd);margin-bottom:6px;text-align:center}
.xpLine{display:flex;justify-content:space-between;gap:10px;font:600 14px/1.5 var(--disp);opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}
.xpLine.in{opacity:1;transform:none}
.xpLine .xpVal{color:#ffcf6a}
.xpTotal{border-top:1px solid rgba(255,255,255,.18);margin-top:4px;padding-top:4px;font-weight:800}
.xpLevelRow{position:relative;display:flex;align-items:center;justify-content:space-between;margin-top:8px;font:800 15px/1.2 var(--disp)}
.xpPop{position:absolute;right:0;top:-4px;padding:2px 10px;border-radius:999px;background:#ffcf6a;color:#1b1407;font:900 16px/1.4 var(--disp);letter-spacing:.06em;opacity:0;transform:scale(.4)}
.xpPop.show{animation:xpPop .6s cubic-bezier(.2,1.6,.4,1) forwards}
.xpPop.still{animation:none;opacity:1;transform:none}
.xpBar{height:10px;margin-top:6px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.xpFill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#ffb938,#ffe27a)}
.xpNum{margin-top:4px;font:700 13px/1.2 var(--disp);text-align:center;font-variant-numeric:tabular-nums;color:var(--chrome,#ddd)}
.xpCard.flash{border-color:#ffcf6a;animation:xpFlash .7s ease-out}
@keyframes xpPop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.25)}100%{opacity:1;transform:scale(1)}}
@keyframes xpFlash{0%{box-shadow:0 0 0 0 rgba(255,207,106,.9)}100%{box-shadow:0 0 0 16px rgba(255,207,106,0)}}
html.derby-reduced-motion .xpLine,html.derby-reduced-motion .xpFill{transition:none}
html.derby-reduced-motion .xpPop.show,html.derby-reduced-motion .xpCard.flash{animation:none;opacity:1;transform:none}

/* The home level chip and the level road page (app/levelRoad.js). */
.levelWrap{position:relative;display:inline-flex}
.levelChip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:4px 12px 4px 4px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:inherit;font:700 13px/1.1 var(--disp);cursor:pointer}
.levelChip .lcAv{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#2b3442;overflow:hidden;font:800 15px/1 var(--disp)}
.levelChip .lcAv img{width:100%;height:100%;object-fit:cover}
.levelChip .lcText{display:flex;flex-direction:column;gap:4px;min-width:64px}
.levelChip .lcBar{display:block;height:4px;border-radius:99px;background:rgba(255,255,255,.2);overflow:hidden}
.levelChip .lcBar u{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffb938,#ffe27a);text-decoration:none}
.levelHint{position:absolute;top:calc(100% + 10px);right:0;z-index:5;width:max-content;max-width:min(240px,70vw);padding:8px 12px;border-radius:10px;background:#ffcf6a;color:#1b1407;font:700 13px/1.3 var(--disp);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.levelHint::before{content:'';position:absolute;top:-6px;right:24px;border:6px solid transparent;border-top:0;border-bottom-color:#ffcf6a}
.roadTrack{list-style:none;margin:12px 0;padding:8px 4px 12px;display:flex;align-items:flex-start;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;position:relative}
.roadTrack::before{content:'';position:absolute;left:0;right:0;top:40px;height:4px;background:rgba(255,255,255,.18);z-index:0}
.roadStop{position:relative;z-index:1;flex:0 0 112px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 6px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);text-align:center}
.roadStop.done{opacity:.6}
.roadStop.now{border-color:#ffcf6a;background:rgba(255,207,106,.14);box-shadow:0 0 0 2px rgba(255,207,106,.4)}
.roadHead{font:800 13px/1.2 var(--disp)}
.roadGives{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center}
.roadStop.empty{flex-basis:60px;padding:8px 4px}
.roadDoor{display:grid;place-items:center;width:44px;height:44px;border-radius:6px 6px 2px 2px;background:repeating-linear-gradient(#5b6573 0 5px,#4a5360 5px 6px);border:2px solid #8b95a3;font:900 20px/1 var(--disp);color:#fff}
.xpAll,.roadTotal{display:block;margin-top:2px;font:600 11px/1.2 var(--disp);text-align:center;opacity:.7;font-variant-numeric:tabular-nums}
.roadRest{display:block;font:700 11px/1.2 var(--disp);text-align:center}
.roadDoor.bigDoor{width:62px;height:56px;font-size:26px;border-color:#ffcf6a}
.roadMap{display:flex;flex-direction:column;align-items:center;gap:2px}
.roadMap img{width:76px;border-radius:6px}
.roadMap small{font:700 11px/1.2 var(--disp)}
.roadNone{opacity:.4}
.roadTick{font-style:normal;color:#6fe08a;font:900 16px/1 var(--disp);min-height:16px}
.roadBarWrap{max-width:420px;margin:0 auto}
.roadLevel{display:block;text-align:center;font:800 16px/1.2 var(--disp)}
/* phone width: the chip is just the level and its bar (the app bar has no room for the avatar next to Log in and Sign up) */
@media (max-width:480px){
  .levelChip{padding:4px 10px;min-height:36px;gap:0}
  .levelChip .lcAv{display:none}
  .levelChip .lcText{min-width:48px}
}