/* The motion tokens (one motion language, goal-polish U2): ease-out for entrances and fades, a spring for presses, three
   durations. On :root so the overlays, intro cards and the coach in interface.css / hud.css share them with the menu. */
:root{--ease-out:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.25,1.35,.45,1);--dur-1:90ms;--dur-2:180ms;--dur-3:280ms}
/* The start menu (2026-10-11): home -> mode -> table -> setup, and the online
   room. One root, #menu; src/app/menuFlow.js switches #menu[data-screen] and
   shows one .mx-screen at a time. Owner's two rules shape every layout here:
   a tap that chooses also moves on, and nothing ever scrolls -- every screen
   fits the viewport at 390x844, 844x390, 1366x657 and 1920x1080 alike; the
   grids are sized to their box by menuFlow.js (fitGrid).

   Everything is scoped to #menu and built on the tokens below, which the
   Settings' High contrast and Larger text re-tune (end of file). The look
   carries on from the boot screen: navy radial, 115-degree hairlines, cream
   type, amber keys. Chunky "key" buttons with a visible bottom edge. */

:is(#menu,.ui){
  --ts:1;
  --font-disp:Barlow,'Arial Narrow',Impact,sans-serif;
  --font-body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* one type scale (px x --ts); fs-1 only for tracked uppercase labels */
  --fs-1:calc(11px*var(--ts));--fs-2:calc(12px*var(--ts));--fs-3:calc(13.5px*var(--ts));--fs-4:calc(15px*var(--ts));
  --fs-5:calc(18px*var(--ts));--fs-6:calc(22px*var(--ts));--fs-7:calc(28px*var(--ts));--fs-8:calc(36px*var(--ts));
  /* one spacing scale */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
  --gutter:24px;--pad-y:16px;--maxw:1480px;--appbar-h:60px;
  --r-1:8px;--r-2:12px;--r-3:16px;--r-4:22px;--r-pill:999px;
  --bg-0:#1c2739;--bg-1:#2a3a54;--bg-2:#405679;   /* owner 2026-11-04: "the background is too dark" (was #080c13 / #111927 / #243147) */
  --plate-hi:#1e2b40;--plate-lo:#121b2b;--plate-edge:#04070c;--inset:#090e17;
  --line:rgba(179,197,232,.15);--line-hi:rgba(214,226,250,.28);
  --text:#f5f1e8;--text-2:#bcc7d8;--text-3:#8f9fb6;
  --amber:#ffad47;--amber-hi:#ffd27a;--amber-edge:#b0560f;--on-amber:#2a1406;
  --flame:#ff6839;
  --p1:#ff6741;--p1-glow:rgba(255,103,65,.26);--p2:#49cbea;--p2-glow:rgba(73,203,234,.24);
  --cpu:#a990ff;--cpu-glow:rgba(169,144,255,.30);--live:#52e0a2;--live-glow:rgba(82,224,162,.24);
  --danger:#ff7a6b;--focus:#ffe58f;
  --select-hi:#fff6e2;--select-lo:#f0d7a6;--select-edge:#a77a3c;--on-select:#2a1406;
  --depth:5px;--tap:44px;--seg-h:44px;
}

/* ---------- root: the whole viewport, safe areas padded, never scrolls ---------- */
#menu.overlay{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
  padding:max(var(--pad-y),env(safe-area-inset-top)) max(var(--gutter),env(safe-area-inset-right)) max(var(--pad-y),env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left));
  overflow:hidden;isolation:isolate;color:var(--text);font:400 var(--fs-3)/1.4 var(--font-body);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background:radial-gradient(70% 45% at 50% 112%,rgba(255,150,60,.16),transparent 72%),
             radial-gradient(ellipse at 50% 38%,var(--bg-2) 0,var(--bg-1) 46%,var(--bg-0) 82%)}
#menu.overlay.hidden{display:none}
#menu::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;
  background:repeating-linear-gradient(115deg,transparent 0 46px,#b3c5e8 47px 48px,transparent 49px 94px)}
:is(#menu,.ui) .menu-backdrops,:is(#menu,.ui) .mx-sprite{display:none}
:is(#menu,.ui) .mx-screen{flex:1;min-height:0;width:100%;max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:var(--sp-4)}
:is(#menu,.ui) .mx-screen[hidden]{display:none!important}
:is(#menu,.ui) [hidden]{display:none!important}
:is(#menu,.ui) .hide{display:none!important}
:is(#menu,.ui) p,:is(#menu,.ui) h1,:is(#menu,.ui) h2,:is(#menu,.ui) h3{margin:0}
:is(#menu,.ui) img{display:block}
:is(#menu,.ui) .i{width:1.15em;height:1.15em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
:is(#menu,.ui) .kicker{display:block;font:600 var(--fs-1)/1.1 var(--font-disp);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
:is(#menu,.ui) .kicker::before{display:none}
:is(#menu,.ui) .btnIcon{display:inline-block;width:1.05em;height:1.05em;flex:0 0 auto;background:currentColor;filter:none;opacity:1;font-size:0;
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
:is(#menu,.ui) .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* every button in the menu starts from nothing (the HUD's own button look stays out) */
:is(#menu,.ui) button{min-height:0;min-width:0;margin:0;border:0;border-radius:0;padding:0;background:none;box-shadow:none;clip-path:none;
  color:inherit;font:inherit;letter-spacing:inherit;text-transform:none;text-align:inherit;cursor:pointer;transform:none}
:is(#menu,.ui) button::before,:is(#menu,.ui) button::after{content:none}
:is(#menu,.ui) button:disabled{cursor:default}
:is(#menu,.ui) input{-webkit-user-select:text;user-select:text}
:is(#menu,.ui) :focus{outline:none}
:is(#menu,.ui) :focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* ---------- the "key" button: a chunky toy key with a visible bottom edge ---------- */
:is(#menu,.ui) .btn{--b-top:var(--plate-hi);--b-bot:var(--plate-lo);--b-edge:var(--plate-edge);--b-text:var(--text);--b-ring:rgba(214,226,250,.16);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--tap);min-width:var(--tap);padding:0 var(--sp-4);border-radius:var(--r-2);
  font:800 italic var(--fs-5)/1 var(--font-disp);letter-spacing:.02em;text-transform:uppercase;color:var(--b-text);white-space:nowrap;
  background:linear-gradient(180deg,var(--b-top),var(--b-bot));text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--b-ring),inset 0 2px 0 rgba(255,255,255,.2),inset 0 -2px 0 rgba(0,0,0,.18),
             0 var(--depth) 0 var(--b-edge),0 calc(var(--depth) + 5px) 14px rgba(0,0,0,.42);
  transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),filter var(--dur-2)}
:is(#menu,.ui) .btn:active:not(:disabled){transform:translateY(calc(var(--depth) - 1px));
  box-shadow:inset 0 0 0 1px var(--b-ring),inset 0 2px 0 rgba(255,255,255,.2),0 1px 0 var(--b-edge),0 2px 6px rgba(0,0,0,.4)}
:is(#menu,.ui) .btn small{display:block;font:600 var(--fs-2)/1.1 var(--font-body);letter-spacing:0;text-transform:none;opacity:.78;margin-top:3px}
:is(#menu,.ui) .btn .lbl2{display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-width:0}
:is(#menu,.ui) .btn--play{--b-top:#ffd781;--b-bot:#ff9b3d;--b-edge:var(--amber-edge);--b-text:var(--on-amber);--b-ring:rgba(255,236,190,.55);text-shadow:0 1px 0 rgba(255,255,255,.35)}
:is(#menu,.ui) .btn--plate{--b-top:#25344d;--b-bot:#172235}
:is(#menu,.ui) .btn--ghost{--b-edge:transparent;background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-hi)}
:is(#menu,.ui) .btn--ghost:active:not(:disabled){box-shadow:inset 0 0 0 1.5px var(--line-hi)}
:is(#menu,.ui) .btn--s{min-height:40px;padding:0 var(--sp-3);font-size:var(--fs-4);--depth:4px}
:is(#menu,.ui) .btn--icon{padding:0;width:var(--tap);font-size:var(--fs-5)}
:is(#menu,.ui) .btn .i{width:1.1em;height:1.1em}
:is(#menu,.ui) .btn--play .i{stroke-width:2.4}
:is(#menu,.ui) .btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 7px rgba(8,12,19,.85)}
:is(#menu,.ui) .linkbtn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 2px;color:var(--amber);
  font:700 var(--fs-3)/1 var(--font-body);text-decoration:underline;text-underline-offset:3px}
:is(#menu,.ui) .linkbtn .i{width:16px;height:16px}
@media(hover:hover){
  :is(#menu,.ui) .btn:hover:not(:disabled){filter:brightness(1.1) saturate(1.05)}
  :is(#menu,.ui) .linkbtn:hover{color:var(--amber-hi)}
}
/* the dice turn when a random pick fires */
:is(#menu,.ui) .i-dice{transition:transform var(--dur-3) var(--ease-spring)}
:is(#menu,.ui) .is-rolling .i-dice,:is(#menu,.ui) .is-rolling .art img{animation:mx-roll .55s var(--ease-out)}
@keyframes mx-roll{0%{transform:rotate(0) scale(1)}40%{transform:rotate(200deg) scale(1.2)}100%{transform:rotate(360deg) scale(1)}}

/* ---------- app bar ---------- */
:is(#menu,.ui) .appbar{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-3);min-height:var(--appbar-h)}
:is(#menu,.ui) .appbar .titles{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
:is(#menu,.ui) .crumb{font:600 var(--fs-1)/1.15 var(--font-disp);letter-spacing:.16em;text-transform:uppercase;color:var(--amber);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#menu,.ui) .crumb .sep{color:var(--text-3);padding:0 .4em}
:is(#menu,.ui) .appbar h1{margin:0;filter:none;font:800 italic var(--fs-8)/.95 var(--font-disp);text-transform:uppercase;letter-spacing:.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 0 rgba(0,0,0,.35)}
:is(#menu,.ui) .appbar h1:focus{outline:none}
:is(#menu,.ui) .appbar-actions{display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto;margin-left:auto}
:is(#menu,.ui) .back{border-radius:50%;width:var(--tap);padding:0}
:is(#menu,.ui) .back .i{width:22px;height:22px;stroke-width:2.6}
:is(#menu,.ui) .back--label{border-radius:var(--r-2);width:auto;padding:0 var(--sp-3) 0 var(--sp-2);font-size:var(--fs-4)}
:is(#menu,.ui) .brand{display:flex;align-items:center;gap:10px;min-height:var(--tap);color:inherit;text-decoration:none;border-radius:var(--r-2);flex:0 0 auto}
:is(#menu,.ui) .brand img{width:46px;height:46px;border-radius:13px;box-shadow:0 0 0 2px rgba(255,255,255,.14),0 6px 14px rgba(0,0,0,.55)}
:is(#menu,.ui) .wordmark{display:flex;flex-direction:column}
:is(#menu,.ui) .wordmark span{font:800 italic var(--fs-7)/.9 var(--font-disp);text-transform:uppercase;letter-spacing:-.01em;text-shadow:0 2px 0 rgba(0,0,0,.4)}
:is(#menu,.ui) .wordmark strong{font:800 italic var(--fs-3)/1 var(--font-disp);text-transform:uppercase;letter-spacing:.13em;color:var(--amber);margin-top:3px}
:is(#menu,.ui) .launch-status{min-width:0;flex:0 1 auto}
:is(#menu,.ui) .launch-status #loadmsg{display:inline-flex;align-items:center;gap:6px;max-width:260px;margin:0;font:600 var(--fs-2)/1.2 var(--font-body);
  color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#menu,.ui) .launch-status #loadmsg::before{content:'';flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px rgba(82,224,162,.18)}
/* the account: "Log in" + "Sign up", or the signed-in player's chip */
:is(#menu,.ui) .accountBtn.acSigned{padding:3px var(--sp-3) 3px 3px;border-radius:var(--r-pill);gap:var(--sp-2);text-transform:none;font:800 var(--fs-4)/1 var(--font-disp);
  --b-top:#25344d;--b-bot:#172235;--b-edge:var(--plate-edge);background:linear-gradient(180deg,var(--b-top),var(--b-bot));
  box-shadow:inset 0 0 0 1px var(--line-hi),0 3px 0 var(--plate-edge)}
:is(#menu,.ui) .accountBtn .acChipPic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;overflow:hidden;flex:0 0 auto;
  background:var(--acc,#ff6741);color:#120f0d;font:800 var(--fs-4)/1 var(--font-disp)}
:is(#menu,.ui) .accountBtn .acChipPic.hasImg{background:rgba(255,255,255,.08)}
:is(#menu,.ui) .accountBtn .acChipPic img{width:100%;height:100%;object-fit:contain}
:is(#menu,.ui) .accountBtn .acChipName{max-width:12em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(#menu,.ui) .accountBtn .acChipIcon{display:none}

/* ---------- avatars ---------- */
:is(#menu,.ui) .av{aspect-ratio:1;object-fit:contain;flex:0 0 auto}
:is(#menu,.ui) .av--ghost{display:block;border-radius:50%;background:radial-gradient(circle at 50% 40%,#1f2c41,#0d141f);box-shadow:inset 0 0 0 2px rgba(179,197,232,.25)}

/* ==========================================================================
   HOME: who you play (computer, two players, online), each with the same
   two verbs: a pick (mode, table, Start) or Again.
   ========================================================================== */
:is(#menu,.ui) .home-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--sp-4)}
:is(#menu,.ui) .home-q{display:flex;align-items:baseline;gap:var(--sp-3);flex:0 0 auto}
:is(#menu,.ui) .home-q h2{font:800 italic var(--fs-6)/1 var(--font-disp);text-transform:uppercase;letter-spacing:.01em}
:is(#menu,.ui) .home-q p{color:var(--text-3);font-size:var(--fs-3)}
:is(#menu,.ui) .home-q b{color:var(--text-2)}
:is(#menu,.ui) .home-grid{flex:1;min-height:0;display:grid;gap:var(--sp-4);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.14fr) minmax(0,1.04fr);grid-template-rows:minmax(0,1fr);
  grid-template-areas:"cpu duo online rail"}
:is(#menu,.ui) .lane--cpu{grid-area:cpu}:is(#menu,.ui) .lane--duo{grid-area:duo}:is(#menu,.ui) .lane--online{grid-area:online}:is(#menu,.ui) .rail{grid-area:rail}
:is(#menu,.ui) .lane{--acc:var(--cpu);--acc-glow:var(--cpu-glow);position:relative;isolation:isolate;display:flex;flex-direction:column;gap:var(--sp-3);
  min-width:0;min-height:0;padding:var(--sp-4);border-radius:var(--r-4);
  background:radial-gradient(130% 62% at 50% 0%,var(--acc-glow),transparent 68%),linear-gradient(180deg,#1b283c,#0f1726);
  box-shadow:inset 0 0 0 1px rgba(179,197,232,.13),inset 0 3px 0 var(--acc),0 6px 0 var(--plate-edge),0 18px 34px rgba(0,0,0,.42)}
:is(#menu,.ui) .lane::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(115deg,transparent 0 20px,rgba(255,255,255,.03) 20px 22px);
  -webkit-mask:linear-gradient(180deg,#000,transparent 60%);mask:linear-gradient(180deg,#000,transparent 60%)}
:is(#menu,.ui) .lane--duo{--acc:var(--p1);--acc-glow:var(--p1-glow);
  background:radial-gradient(90% 60% at 18% 0%,var(--p1-glow),transparent 66%),radial-gradient(90% 60% at 82% 0%,var(--p2-glow),transparent 66%),linear-gradient(180deg,#1b283c,#0f1726);
  box-shadow:inset 0 0 0 1px rgba(179,197,232,.13),0 6px 0 var(--plate-edge),0 18px 34px rgba(0,0,0,.42)}
:is(#menu,.ui) .lane--duo::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;border-radius:var(--r-4) var(--r-4) 0 0;background:linear-gradient(90deg,var(--p1) 0 50%,var(--p2) 50%)}
:is(#menu,.ui) .lane--online{--acc:var(--live);--acc-glow:var(--live-glow)}
/* the art grows into whatever height the card has (no empty top half on a tall desktop) */
:is(#menu,.ui) .lane-art{flex:1 1 0;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;container-type:size}
@container (max-height:44px){:is(#menu,.ui) .lane-art>*{display:none}}
:is(#menu,.ui) .lane-art::after{content:'';position:absolute;left:50%;bottom:6%;width:min(78%,260px);height:20px;transform:translateX(-50%);z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,var(--acc-glow),transparent)}
:is(#menu,.ui) .lane-art .av{width:auto;height:min(92cqh,92cqw,420px);max-width:100%;filter:drop-shadow(0 10px 12px rgba(0,0,0,.5))}
:is(#menu,.ui) .lane-art--duo .av{height:min(84cqh,52cqw,360px)}
/* a soft spotlight behind the art, so a tall card's top is lit, not empty */
:is(#menu,.ui) .lane-art::before{content:'';position:absolute;left:50%;top:50%;width:min(110cqw,110cqh);aspect-ratio:1;transform:translate(-50%,-52%);z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,var(--acc-glow),transparent 72%);opacity:.9;pointer-events:none}
:is(#menu,.ui) .lane-art--duo .av + .vs + .av{margin-left:-6%}
:is(#menu,.ui) .lane-art--duo .vs{position:relative;z-index:2;align-self:center;margin:0 -3%;transform:rotate(-8deg);
  font:800 italic var(--fs-6)/1 var(--font-disp);color:#fff;padding:6px 10px 5px;border-radius:10px;
  background:linear-gradient(180deg,#ff8a52,#e6452a);box-shadow:0 3px 0 #8e2410,0 6px 12px rgba(0,0,0,.45);text-shadow:0 1px 0 rgba(0,0,0,.3)}
:is(#menu,.ui) .lane-head{display:flex;flex-direction:column;gap:5px;flex:0 0 auto}
:is(#menu,.ui) .lane-title{font:800 italic var(--fs-8)/.92 var(--font-disp);text-transform:uppercase;letter-spacing:.005em;text-shadow:0 2px 0 rgba(0,0,0,.35)}
:is(#menu,.ui) .lane-sub{color:var(--text-2);font-size:var(--fs-3);line-height:1.3}
:is(#menu,.ui) .lane-actions{display:flex;flex-direction:column;gap:calc(var(--sp-3) + 2px);flex:0 0 auto;padding-bottom:var(--depth)}
:is(#menu,.ui) .btn--pick{justify-content:space-between;font-size:var(--fs-4);min-height:48px}
:is(#menu,.ui) .btn--pick .i{color:var(--acc)}
:is(#menu,.ui) .globe{position:relative;height:min(92cqh,92cqw,330px);aspect-ratio:1;display:grid;place-items:center}
:is(#menu,.ui) .globe .core{width:58%;aspect-ratio:1;min-height:0;border-radius:50%;display:grid;place-items:center;color:var(--live);
  background:radial-gradient(circle at 40% 35%,#1d4a3f,#0d2420 70%);box-shadow:inset 0 0 0 3px rgba(82,224,162,.5),0 0 0 10px rgba(82,224,162,.08),0 0 40px rgba(82,224,162,.25)}
:is(#menu,.ui) .globe .core .i{width:58%;height:auto;aspect-ratio:1;stroke-width:1.5}
:is(#menu,.ui) .globe .av{position:absolute;width:34%;height:auto;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
:is(#menu,.ui) .globe .av:nth-of-type(1){left:0;top:8%}:is(#menu,.ui) .globe .av:nth-of-type(2){right:0;top:2%}:is(#menu,.ui) .globe .av:nth-of-type(3){right:6%;bottom:0}

/* online lane: net/lobby.js renders into #onlineRow */
:is(#menu,.ui) .online-box{display:flex;flex-direction:column;gap:var(--sp-3);flex:0 0 auto;min-width:0;padding-bottom:var(--depth)}
:is(#menu,.ui) .playing-as{display:flex;align-items:center;gap:var(--sp-2);color:var(--text-2);font-size:var(--fs-3);min-height:28px;flex-wrap:wrap}
:is(#menu,.ui) .playing-as .pvpAv{width:28px;height:28px}
:is(#menu,.ui) .playing-as b{color:var(--text);font-weight:700}
:is(#menu,.ui) .pvpAv{--c:#ff6741;flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:var(--c);color:#120f0d;font:800 15px/1 var(--font-disp)}
:is(#menu,.ui) .pvpAv img{width:100%;height:100%;object-fit:contain}
:is(#menu,.ui) .pvpAv.img{background:rgba(255,255,255,.08)}
:is(#menu,.ui) .pvpTag{color:var(--text-3);font-weight:600}
:is(#menu,.ui) .pvpBadge{display:inline-flex;align-items:center;padding:3px 7px 2px;border-radius:6px;font:800 var(--fs-1)/1 var(--font-disp);letter-spacing:.12em;text-transform:uppercase;
  background:rgba(255,255,255,.1);color:var(--text-2)}
:is(#menu,.ui) .pvpBadge.friend{background:rgba(82,224,162,.18);color:#b8f5d9;box-shadow:inset 0 0 0 1px rgba(82,224,162,.5)}
:is(#menu,.ui) .pvpBadge.family{background:rgba(73,203,234,.18);color:#c6f1fb;box-shadow:inset 0 0 0 1px rgba(73,203,234,.5)}
:is(#menu,.ui) .pvpBadge.host{background:var(--amber);color:var(--on-amber)}
:is(#menu,.ui) .locked{display:flex;align-items:flex-start;gap:var(--sp-2);color:var(--text-3);font-size:var(--fs-2);line-height:1.35;padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-2);background:rgba(9,14,23,.55);box-shadow:inset 0 0 0 1px var(--line)}
:is(#menu,.ui) .locked .i{margin-top:1px;color:var(--text-3)}
:is(#menu,.ui) .locked .linkbtn{min-height:0;font-size:var(--fs-2)}
:is(#menu,.ui) .join-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-3);align-items:stretch}
:is(#menu,.ui) .code-field{position:relative;display:flex;align-items:center;min-height:52px;border-radius:var(--r-2);background:var(--inset);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(82,224,162,.35);cursor:text}
:is(#menu,.ui) .code-field .cf-lbl{position:absolute;left:12px;top:7px;font:600 var(--fs-1)/1 var(--font-disp);letter-spacing:.16em;text-transform:uppercase;color:var(--live);pointer-events:none}
:is(#menu,.ui) .code-field input{width:100%;height:100%;min-height:52px;border:0;background:transparent;color:var(--text);padding:16px 10px 2px 12px;border-radius:var(--r-2);
  font:800 italic calc(22px*var(--ts))/1 var(--font-disp);letter-spacing:.32em;text-transform:uppercase;outline:none}
:is(#menu,.ui) .code-field input::placeholder{color:#4d5d75;letter-spacing:.32em}
:is(#menu,.ui) .code-field:focus-within{box-shadow:inset 0 2px 5px rgba(0,0,0,.6),inset 0 0 0 2px var(--live),0 0 0 3px var(--focus)}
:is(#menu,.ui) .code-field .code-go{position:absolute;right:5px;top:50%;transform:translateY(-50%);min-height:40px;padding:0 12px;border-radius:9px;
  font:800 italic var(--fs-4)/1 var(--font-disp);text-transform:uppercase;color:var(--on-amber);background:linear-gradient(180deg,#ffd781,#ff9b3d);
  box-shadow:0 3px 0 var(--amber-edge)}
:is(#menu,.ui) .code-field .code-go[hidden]{display:none}
:is(#menu,.ui) .err{color:var(--danger);font-size:var(--fs-2);font-weight:700;line-height:1.35}
:is(#menu,.ui) .note{color:var(--text-3);font-size:var(--fs-2);line-height:1.35}
:is(#menu,.ui) .spin{flex:none;width:16px;height:16px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:var(--live);animation:mx-spin .9s linear infinite}
@keyframes mx-spin{to{transform:rotate(360deg)}}
:is(#menu,.ui) .in-room{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-2) var(--sp-3);align-items:center;padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-2);background:rgba(82,224,162,.08);box-shadow:inset 0 0 0 1px rgba(82,224,162,.35)}
:is(#menu,.ui) .in-room .code{font:800 italic var(--fs-6)/1 var(--font-disp);letter-spacing:.2em;color:var(--live)}
:is(#menu,.ui) .in-room .note{grid-column:1/-1}
:is(#menu,.ui) .in-room .acts{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}

/* rail: the daily challenge (app/daily.js) */
:is(#menu,.ui) .rail{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;min-height:0}
:is(#menu,.ui) .card{border-radius:var(--r-4);background:linear-gradient(180deg,#1b283c,#111a29);
  box-shadow:inset 0 0 0 1px rgba(179,197,232,.13),inset 0 2px 0 rgba(255,255,255,.07),0 5px 0 var(--plate-edge),0 14px 28px rgba(0,0,0,.38)}
:is(#menu,.ui) .daily{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-3);padding:var(--sp-4);margin:0;border:0;
  background:radial-gradient(110% 60% at 100% 0%,rgba(255,104,57,.2),transparent 60%),linear-gradient(180deg,#1b283c,#111a29)}
:is(#menu,.ui) .daily:empty{display:none}
:is(#menu,.ui) .dcHead{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);flex:0 0 auto}
:is(#menu,.ui) .dcKick{font:600 var(--fs-1)/1.1 var(--font-disp);letter-spacing:.16em;text-transform:uppercase;color:var(--flame)}
:is(#menu,.ui) .dcStreak{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:var(--r-pill);background:rgba(255,104,57,.16);
  box-shadow:inset 0 0 0 1px rgba(255,104,57,.45);font:800 var(--fs-4)/1 var(--font-disp);color:#ffd1bd}
:is(#menu,.ui) .dcArt{flex:1 1 0;min-height:0;container-type:size;display:flex}
/* up to square in a tall rail (cropped at the sides), the whole 16:9 table in a short one */
:is(#menu,.ui) .dcArt .frame{width:min(100cqw,calc(100cqh*16/9));height:min(100cqh,100cqw);margin:auto;border-radius:var(--r-2);overflow:hidden;background:#05080d;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 6px 14px rgba(0,0,0,.45)}
:is(#menu,.ui) .dcArt img{width:100%;height:100%;object-fit:cover}
:is(#menu,.ui) .dcBody{flex:0 0 auto;font-size:var(--fs-3);color:var(--text-2);line-height:1.35}
:is(#menu,.ui) .dcBody b{display:block;color:var(--text);font:800 var(--fs-5)/1.1 var(--font-disp);letter-spacing:.01em;margin-bottom:2px}
:is(#menu,.ui) .daily .btn{flex:0 0 auto}
:is(#menu,.ui) .dcPlay{--b-text:#ffcfa6}
:is(#menu,.ui) .totmCard{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);margin:0;background:linear-gradient(180deg,#1b283c,#111a29)}
:is(#menu,.ui) .totmCard.hide{display:none}
:is(#menu,.ui) .totmArt{width:100%;max-height:110px;object-fit:cover;border-radius:var(--r-2)}
:is(#menu,.ui) .totmBtns{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
:is(#menu,.ui) .totmCosmetic{font-size:var(--fs-2);color:var(--text-2)}
:is(#menu,.ui) .goalsCard{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);margin:0;background:linear-gradient(180deg,#1b283c,#111a29)}
:is(#menu,.ui) .goalList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
:is(#menu,.ui) .goalList li{display:flex;flex-direction:column;gap:4px}
:is(#menu,.ui) .goalText{font-size:var(--fs-3);color:var(--text-2);line-height:1.25}
:is(#menu,.ui) .goalList .done .goalText{color:var(--text)}
:is(#menu,.ui) .goalBar{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
:is(#menu,.ui) .goalBar i{display:block;height:100%;background:var(--flame);border-radius:3px}
:is(#menu,.ui) .dcPlay .i{color:var(--flame)}

/* the dock: everything else, one row */
:is(#menu,.ui) .dock{flex:0 0 auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-3);padding-bottom:var(--depth)}
:is(#menu,.ui) .xtile{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:var(--sp-3);align-items:center;justify-items:start;
  min-height:54px;padding:6px var(--sp-3);text-align:left;font-style:normal;--depth:4px;white-space:normal}
:is(#menu,.ui) .xtile .xi{grid-row:1/3;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--amber)}
:is(#menu,.ui) .xtile .xi .i{width:20px;height:20px}
:is(#menu,.ui) .xtile .xt{font:800 var(--fs-4)/1 var(--font-disp);font-style:normal;align-self:end;white-space:nowrap}
:is(#menu,.ui) .xtile .xs{font:600 var(--fs-2)/1.15 var(--font-body);text-transform:none;letter-spacing:0;color:var(--text-3);align-self:start;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* continue banner (features/recovery.js's #bContinue inside) */
:is(#menu,.ui) .continue{flex:0 0 auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-4);padding:var(--sp-3);border-radius:var(--r-4);
  background:linear-gradient(90deg,rgba(255,173,71,.2),rgba(255,173,71,.03) 55%),linear-gradient(180deg,#1d2a3f,#121b2b);
  box-shadow:inset 0 0 0 1.5px rgba(255,173,71,.5),0 5px 0 var(--plate-edge),0 14px 28px rgba(0,0,0,.4)}
:is(#menu,.ui) .continue:has(#bContinue.hide){display:none}
:is(#menu,.ui) .cont-art{width:132px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#05080d;box-shadow:0 4px 10px rgba(0,0,0,.5)}
:is(#menu,.ui) .cont-art img{width:100%;height:100%;object-fit:contain}
:is(#menu,.ui) .cont-text{min-width:0;display:flex;flex-direction:column;gap:4px}
:is(#menu,.ui) .cont-text .kicker{color:var(--amber)}
:is(#menu,.ui) .cont-title{font:800 italic var(--fs-6)/1 var(--font-disp);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#menu,.ui) .cont-score{font-size:var(--fs-3);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#menu,.ui) #bContinue{--b-top:#ffd781;--b-bot:#ff9b3d;--b-edge:var(--amber-edge);--b-text:var(--on-amber);--b-ring:rgba(255,236,190,.55);--depth:5px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);width:auto;min-height:56px;padding:0 var(--sp-5);border-radius:var(--r-2);
  font:800 italic var(--fs-6)/1 var(--font-disp);text-transform:uppercase;letter-spacing:.02em;color:var(--b-text);white-space:nowrap;
  background:linear-gradient(180deg,var(--b-top),var(--b-bot));text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:inset 0 0 0 1px var(--b-ring),inset 0 2px 0 rgba(255,255,255,.2),0 var(--depth) 0 var(--b-edge),0 calc(var(--depth) + 5px) 14px rgba(0,0,0,.42)}
:is(#menu,.ui) #bContinue::after{content:'';width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent currentColor}

/* ==========================================================================
   PICK SCREENS (mode, table): one tap picks and moves on. Random fills out
   the grid's last row, outside #modeOpts / #mapOpts. Sized by fitGrid.
   ========================================================================== */
:is(#menu,.ui) .roombar-slot:empty{display:none}
:is(#menu,.ui) .pick-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--sp-3)}
:is(#menu,.ui) .fit-box{flex:1 1 0;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;position:relative}
:is(#menu,.ui) .pick-grid{position:relative;display:grid;gap:var(--gap,14px);grid-template-columns:repeat(var(--cols,4),var(--tile-w,200px));justify-content:center;align-content:center}
:is(#menu,.ui) .contents{display:contents}
:is(#menu,.ui) .tile.mapLocked{cursor:not-allowed}
:is(#menu,.ui) .tile.mapLocked .art img{filter:grayscale(1) brightness(.55)}
:is(#menu,.ui) .mapLockTag{position:absolute;left:8px;top:8px;padding:3px 9px;border-radius:999px;background:rgba(10,12,18,.82);color:#ffcf6a;font:700 13px/1.2 var(--disp);letter-spacing:.02em}
:is(#menu,.ui) .tile{--tp:6px;position:relative;width:var(--tile-w,200px);display:flex;flex-direction:column;padding:var(--tp);border-radius:var(--r-3);text-align:left;color:var(--text);
  background:linear-gradient(180deg,#1f2c41,#131c2c);
  box-shadow:inset 0 0 0 1px rgba(179,197,232,.14),inset 0 2px 0 rgba(255,255,255,.08),0 4px 0 var(--plate-edge),0 10px 20px rgba(0,0,0,.4);
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
:is(#menu,.ui) .tile:active{transform:translateY(2px);box-shadow:inset 0 0 0 1.5px rgba(255,173,71,.8),0 1px 0 var(--plate-edge),0 4px 10px rgba(0,0,0,.4)}
:is(#menu,.ui) .tile.on{box-shadow:inset 0 0 0 2.5px var(--amber),0 4px 0 var(--plate-edge),0 10px 20px rgba(0,0,0,.4)}
:is(#menu,.ui) .tile:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(hover:hover){
  :is(#menu,.ui) .tile:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1.5px rgba(255,173,71,.65),inset 0 2px 0 rgba(255,255,255,.1),0 7px 0 var(--plate-edge),0 16px 26px rgba(0,0,0,.45)}
}
:is(#menu,.ui) .tile .art{position:relative;display:block;width:100%;aspect-ratio:var(--art-ar,3/2);border-radius:calc(var(--r-3) - var(--tp) + 2px);overflow:hidden;background:#05080d;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
:is(#menu,.ui) .tile .art img{width:100%;height:100%;object-fit:contain}
:is(#menu,.ui) .tile .art--letterbox{background:#2a1a12}
:is(#menu,.ui) .tile .art--letterbox .lb{position:absolute;left:-10%;top:-10%;width:120%;height:120%;object-fit:cover;filter:blur(14px) brightness(.55) saturate(1.2)}
:is(#menu,.ui) .tile .art--letterbox img:not(.lb){position:relative}
:is(#menu,.ui) .tile .strip{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:var(--strip-h,40px);padding:6px 4px 2px}
:is(#menu,.ui) .tname{display:flex;align-items:center;gap:7px;font:800 var(--tname-fs,var(--fs-5))/1.02 var(--font-disp);text-transform:uppercase;letter-spacing:.01em;min-width:0}
:is(#menu,.ui) .tname .btnIcon{width:1em;height:1em;color:var(--amber)}
:is(#menu,.ui) .tblurb{display:none;font-size:var(--fs-2);line-height:1.32;color:var(--text-2)}
:is(#menu,.ui) .pick-grid.show-blurb .tblurb{display:block}
:is(#menu,.ui) #modeGrid.show-blurb .tname{padding-right:44px}
:is(#menu,.ui) .tile--random{background:linear-gradient(180deg,#2b2350,#171334);box-shadow:inset 0 0 0 1.5px rgba(255,173,71,.55),inset 0 2px 0 rgba(255,255,255,.1),0 4px 0 #0a0717,0 10px 20px rgba(0,0,0,.4)}
:is(#menu,.ui) .tile--random .art{background:radial-gradient(circle at 50% 55%,#4b3a8f,#1d1640 70%)}
:is(#menu,.ui) .tile--random .art img{object-fit:contain;transition:transform var(--dur-3) var(--ease-spring)}
:is(#menu,.ui) .tile--random .tname{color:var(--amber)}
@media(hover:hover){:is(#menu,.ui) .tile--random:hover .art img{transform:rotate(-8deg) scale(1.06)}}
/* a wide Random: it spans the rest of the last row, its art fills the height */
:is(#menu,.ui) .tile--random.is-wide .art{aspect-ratio:auto;height:var(--art-h,auto);flex:0 0 auto}
:is(#menu,.ui) .info-layer{position:absolute;inset:0;pointer-events:none}
:is(#menu,.ui) .info-btn{position:absolute;z-index:3;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;pointer-events:auto;color:var(--text);
  background:linear-gradient(180deg,#2c3c57,#1b2639);box-shadow:inset 0 0 0 1px var(--line-hi),0 3px 0 var(--plate-edge)}
:is(#menu,.ui) .info-btn .i{width:20px;height:20px;stroke-width:2.8}
@media(hover:hover){:is(#menu,.ui) .info-btn:hover{color:var(--amber)}}
:is(#menu,.ui) .detail-line{flex:0 0 auto;min-height:46px;display:flex;align-items:center;justify-content:center;gap:var(--sp-3);padding:0 var(--sp-4);text-align:center;
  border-radius:var(--r-pill);background:rgba(9,14,23,.55);box-shadow:inset 0 0 0 1px var(--line);color:var(--text-2);font-size:var(--fs-3)}
:is(#menu,.ui) .detail-line b{font:800 var(--fs-5)/1 var(--font-disp);color:var(--text);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
:is(#menu,.ui) .detail-line:empty::before{content:'Point at a table to read what it does. Tap one to play on it.';color:var(--text-3)}
:is(#menu,.ui) #hallHover:empty::before{content:'Point at a hall to read about it. Tap one to bowl in it.'}

/* ==========================================================================
   SETUP: the matchup, the car picker (one live pedestal + every car),
   the rules, ONE Start. Areas move per viewport; nothing scrolls.
   ========================================================================== */
:is(#menu,.ui) .garage{flex:1;min-height:0;display:grid;gap:var(--sp-4);
  grid-template-columns:minmax(250px,300px) minmax(0,1fr) minmax(270px,330px);
  grid-template-rows:auto minmax(0,1fr) minmax(0,1.3fr) auto;
  grid-template-areas:"seats stage rules" "who stage rules" "who roster rules" "who roster start"}
:is(#menu,.ui) .garage[data-cars="0"]{grid-template-areas:"seats table rules" "who table rules" "who table rules" "who table start"}
:is(#menu,.ui) .g-seats{grid-area:seats}:is(#menu,.ui) .g-who{grid-area:who}:is(#menu,.ui) .g-stage{grid-area:stage}:is(#menu,.ui) .g-roster{grid-area:roster}
:is(#menu,.ui) .g-table{grid-area:table}:is(#menu,.ui) .g-rules{grid-area:rules}:is(#menu,.ui) .g-start{grid-area:start}
:is(#menu,.ui) .g-stage,:is(#menu,.ui) .g-roster,:is(#menu,.ui) .g-table,:is(#menu,.ui) .g-rules,:is(#menu,.ui) .g-who,:is(#menu,.ui) .g-seats{min-width:0;min-height:0}
:is(#menu,.ui) .garage[data-cars="0"] .g-stage,:is(#menu,.ui) .garage[data-cars="0"] .g-roster{display:none}
:is(#menu,.ui) .garage[data-cars="1"] .g-table{display:none}
/* online: the names come from the room, so no who panel; on a desktop the
   seats head the right-hand column and the picker takes the width */
:is(#menu,.ui) .garage[data-online="1"] .g-who{display:none}
@media (min-width:900px) and (min-height:541px){
  :is(#menu,.ui) .garage[data-online="1"]{grid-template-columns:minmax(0,1fr) minmax(270px,330px);grid-template-areas:"stage seats" "stage rules" "roster rules" "roster start"}
  :is(#menu,.ui) .garage[data-online="1"][data-cars="0"]{grid-template-areas:"table seats" "table rules" "table rules" "table start"}
}
/* narrow desktops and landscape tablets (900-1199 wide) the same two columns:
   three left the car picker 18-23 px cards at 900-960; who's playing is the
   seat's pencil away (the players sheet) */
@media (min-width:900px) and (max-width:1199px) and (min-height:541px){
  :is(#menu,.ui) .garage{grid-template-columns:minmax(0,1fr) minmax(260px,320px);grid-template-areas:"stage seats" "stage rules" "roster rules" "roster start"}
  :is(#menu,.ui) .garage[data-cars="0"]{grid-template-areas:"table seats" "table rules" "table rules" "table start"}
  :is(#menu,.ui) .garage .g-who{display:none}
}
/* ...and short as well (1100x600): the seats give the rules their room (their
   third line is the pedestal's car or the skill row's pick, both in view) */
@media (min-width:900px) and (max-width:1199px) and (min-height:541px) and (max-height:700px){
  :is(#menu,.ui) .garage .g-seats{gap:4px}
  :is(#menu,.ui) .garage .seat-main{min-height:52px;padding:6px}
  :is(#menu,.ui) .garage .seat .av{width:40px;height:40px}
  :is(#menu,.ui) .garage .seat-name{font-size:var(--fs-5)}
  :is(#menu,.ui) .garage .seat-meta{display:none}
}
:is(#menu,.ui) .panel{border-radius:var(--r-4);padding:var(--sp-4);background:linear-gradient(180deg,rgba(27,40,60,.92),rgba(15,23,38,.92));
  box-shadow:inset 0 0 0 1px rgba(179,197,232,.12),0 5px 0 var(--plate-edge),0 14px 28px rgba(0,0,0,.35)}
:is(#menu,.ui) .g-start{display:flex;align-items:flex-end;padding-bottom:var(--depth)}
:is(#menu,.ui) .btn--start{width:100%;min-height:68px;font-size:var(--fs-7);justify-content:center;gap:var(--sp-3);border-radius:var(--r-3);--depth:6px;text-align:center;white-space:normal}
:is(#menu,.ui) .btn--start .start-ico{width:26px;height:26px}
:is(#menu,.ui) .btn--start:disabled{--b-top:#27354c;--b-bot:#1a2537;--b-edge:#070b12;--b-text:var(--text-2);--b-ring:rgba(214,226,250,.18);text-shadow:none;font-size:var(--fs-5);
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 14px,transparent 14px 28px),linear-gradient(180deg,var(--b-top),var(--b-bot));
  background-size:40px 100%,100% 100%;animation:mx-barber 1.4s linear infinite;opacity:1}
:is(#menu,.ui) .btn--start:disabled .start-ico{display:none}
@keyframes mx-barber{to{background-position:40px 0,0 0}}

/* seats: the matchup AND the car picker's side tabs */
:is(#menu,.ui) .g-seats{display:flex;flex-direction:column;gap:var(--sp-2)}
:is(#menu,.ui) .seat{--side:var(--p1);--side-glow:var(--p1-glow);position:relative;display:flex;align-items:stretch;border-radius:var(--r-3);
  background:radial-gradient(90% 120% at 0% 50%,var(--side-glow),transparent 60%),linear-gradient(180deg,#1d2a3f,#121b2b);
  box-shadow:inset 0 0 0 1px rgba(179,197,232,.14),0 4px 0 var(--plate-edge),0 10px 20px rgba(0,0,0,.35);transition:box-shadow var(--dur-2)}
:is(#menu,.ui) .seat--p2{--side:var(--p2);--side-glow:var(--p2-glow)}
:is(#menu,.ui) .garage[data-cars="1"] .seat:has(.teamTab.on){box-shadow:inset 0 0 0 2.5px var(--side),0 0 0 4px var(--side-glow),0 4px 0 var(--plate-edge),0 10px 20px rgba(0,0,0,.35)}
:is(#menu,.ui) .seat-main{flex:1;min-width:0;display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2);text-align:left;border-radius:inherit;min-height:64px}
:is(#menu,.ui) .seat-main:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
:is(#menu,.ui) .seat .av{width:52px;height:52px}
:is(#menu,.ui) .seat-text{min-width:0;display:flex;flex-direction:column;gap:3px}
:is(#menu,.ui) .seat-tag{display:flex;align-items:center;gap:6px;font:600 var(--fs-1)/1 var(--font-disp);letter-spacing:.15em;text-transform:uppercase;color:var(--side);white-space:nowrap}
:is(#menu,.ui) .seat-tag .teamDot{display:none}
:is(#menu,.ui) .seat-name{font:800 italic var(--fs-6)/1 var(--font-disp);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#menu,.ui) .seat-meta{font-size:var(--fs-2);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#menu,.ui) .seat-meta:empty{display:none}
:is(#menu,.ui) .seat-edit{flex:0 0 auto;align-self:center;margin-right:6px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--text-2);
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line)}
:is(#menu,.ui) .seat-edit .i{width:18px;height:18px}
@media(hover:hover){:is(#menu,.ui) .seat-edit:hover{color:var(--amber)}}
:is(#menu,.ui) .seat.is-cpu .seat-edit,:is(#menu,.ui) .seat.is-net .seat-edit{display:none}
:is(#menu,.ui) .picking{display:none;align-items:center;font:800 var(--fs-1)/1 var(--font-disp);letter-spacing:.12em;text-transform:uppercase;color:#14100a;background:var(--side);padding:3px 6px;border-radius:5px}
:is(#menu,.ui) .garage[data-cars="1"] .teamTab.on .picking{display:inline-flex}
:is(#menu,.ui) .vs-line{display:flex;align-items:center;gap:var(--sp-2);color:var(--flame);font:800 italic var(--fs-4)/1 var(--font-disp);text-transform:uppercase}
:is(#menu,.ui) .vs-line::before,:is(#menu,.ui) .vs-line::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line-hi),transparent)}
:is(#menu,.ui) .seat.is-waiting .seat-main{cursor:default}
:is(#menu,.ui) .seat.is-waiting{background:rgba(9,14,23,.45)}
:is(#menu,.ui) .seat.is-waiting::before{content:'';position:absolute;inset:0;border-radius:inherit;border:2px dashed rgba(73,203,234,.55);animation:mx-breathe 1.8s ease-in-out infinite;pointer-events:none}
@keyframes mx-breathe{50%{border-color:rgba(73,203,234,.95);box-shadow:0 0 18px rgba(73,203,234,.25)}}

/* who's playing: app/whoPlaying.js's chips and editor, the names, head to head */
:is(#menu,.ui) .g-who{display:flex;flex-direction:column;gap:var(--sp-3);overflow:hidden}
:is(#menu,.ui) .whoChips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
:is(#menu,.ui) .whoChip{--c:var(--line-hi);display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:2px 12px 2px 2px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,#25344d,#172235);box-shadow:inset 0 0 0 1px var(--line-hi),0 3px 0 var(--plate-edge);
  font:800 var(--fs-4)/1 var(--font-disp);letter-spacing:.02em;color:var(--text)}
:is(#menu,.ui) .whoChip.seated{box-shadow:inset 0 0 0 2.5px var(--c),0 3px 0 var(--plate-edge)}
:is(#menu,.ui) .whoDot{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;overflow:hidden;flex:0 0 auto;background:var(--c);color:#120f0d;font:800 var(--fs-4)/1 var(--font-disp)}
:is(#menu,.ui) .whoDot.hasAvatar{background:rgba(255,255,255,.06)}
:is(#menu,.ui) .whoDot img{width:100%;height:100%;object-fit:contain}
:is(#menu,.ui) .whoSeat{font:800 var(--fs-1)/1 var(--font-disp);letter-spacing:.08em;color:#14100a;background:var(--c);padding:3px 5px;border-radius:5px}
:is(#menu,.ui) .whoPencil{color:var(--amber)}
:is(#menu,.ui) .whoAdd,:is(#menu,.ui) .whoEdit{padding:0 14px;color:var(--text-2)}
:is(#menu,.ui) .whoEdit.on{color:var(--on-select);background:linear-gradient(180deg,var(--select-hi),var(--select-lo))}
:is(#menu,.ui) .whoHint,:is(#menu,.ui) .whoStats{font-size:var(--fs-2);color:var(--text-3)}
:is(#menu,.ui) .whoError{color:var(--danger);font-size:var(--fs-2);font-weight:700}
:is(#menu,.ui) .whoEditor{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-3);background:rgba(9,14,23,.55);box-shadow:inset 0 0 0 1px var(--line)}
:is(#menu,.ui) .whoNameRow{display:flex;gap:var(--sp-2)}
:is(#menu,.ui) .whoNameRow input,:is(#menu,.ui) .field input{flex:1;min-width:0;width:100%;border:0;outline:none;background:transparent;color:var(--text);font:700 calc(16px*var(--ts))/1.2 var(--font-body)}
:is(#menu,.ui) .whoNameRow input{min-height:44px;padding:0 12px;border-radius:var(--r-2);background:var(--inset);box-shadow:inset 0 2px 5px rgba(0,0,0,.55),inset 0 0 0 1px var(--line)}
:is(#menu,.ui) .whoNameRow input:focus{box-shadow:inset 0 2px 5px rgba(0,0,0,.55),inset 0 0 0 2px var(--focus)}
:is(#menu,.ui) .whoRoll,:is(#menu,.ui) .whoKid,:is(#menu,.ui) .whoActions button{min-height:40px;padding:0 14px;border-radius:var(--r-2);font:800 var(--fs-4)/1 var(--font-disp);text-transform:uppercase;
  background:linear-gradient(180deg,#25344d,#172235);box-shadow:inset 0 0 0 1px var(--line-hi),0 3px 0 var(--plate-edge)}
:is(#menu,.ui) .whoKid{align-self:flex-start}
:is(#menu,.ui) .whoKid.on,:is(#menu,.ui) .whoActions button.on{color:var(--on-amber);background:linear-gradient(180deg,#ffd781,#ff9b3d);box-shadow:0 3px 0 var(--amber-edge)}
:is(#menu,.ui) .whoActions{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
:is(#menu,.ui) .whoActions .whoDelete{color:var(--danger)}
:is(#menu,.ui) .whoSwatches{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
:is(#menu,.ui) .whoSwatch{width:36px;height:36px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 3px rgba(0,0,0,.25)}
:is(#menu,.ui) .whoSwatch.on{box-shadow:0 0 0 3px var(--bg-0),0 0 0 6px var(--text)}
/* all 33 portraits in a grid that fits (never the old scrolling box) */
:is(#menu,.ui) .whoAvatars{display:grid;grid-template-columns:repeat(var(--acols,11),minmax(0,1fr));gap:6px;max-height:none;overflow:visible}
/* height:auto: interface.css's fixed 66px beat aspect-ratio (tall ovals); not clipped: the portraits' raised heads */
:is(#menu,.ui) .whoAvatar{width:100%;height:auto;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;overflow:visible;min-height:0;
  background:radial-gradient(circle at 50% 40%,#2a3a56,#141e2f);font:800 var(--fs-4)/1 var(--font-disp);color:var(--text-2)}
:is(#menu,.ui) .whoAvatar img{width:100%;height:100%;object-fit:contain}
:is(#menu,.ui) .whoAvatar.on{box-shadow:0 0 0 3px var(--amber)}
:is(#menu,.ui) .names{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
:is(#menu,.ui) .field{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:52px;border-radius:var(--r-2);background:var(--inset);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.55),inset 0 0 0 1px var(--line);padding:6px 12px}
:is(#menu,.ui) .field>span{font:600 var(--fs-1)/1 var(--font-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--side,var(--text-3))}
:is(#menu,.ui) .field--p1{--side:var(--p1)}:is(#menu,.ui) .field--p2{--side:var(--p2)}
:is(#menu,.ui) .field input{padding:4px 0 0}
:is(#menu,.ui) .field input:disabled{color:var(--text-3)}
:is(#menu,.ui) .field:focus-within{box-shadow:inset 0 2px 5px rgba(0,0,0,.55),inset 0 0 0 2px var(--focus)}
:is(#menu,.ui) .h2h{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-3);color:var(--text-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-2);
  background:rgba(255,173,71,.08);box-shadow:inset 0 0 0 1px rgba(255,173,71,.25)}

/* options: segmented keys */
:is(#menu,.ui) .opt{display:flex;flex-direction:column;gap:7px;min-width:0;margin:0}
:is(#menu,.ui) .opt-label{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);margin:0;
  font:600 var(--fs-1)/1 var(--font-disp);letter-spacing:.15em;text-transform:uppercase;color:var(--text-3)}
:is(#menu,.ui) .opt-label::before,:is(#menu,.ui) .opt-label::after{display:none}
:is(#menu,.ui) .seg{display:flex;gap:4px;padding:4px;border-radius:var(--r-2);background:var(--inset);box-shadow:inset 0 2px 5px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.05)}
:is(#menu,.ui) .seg button{flex:1 1 0;min-width:0;min-height:calc(var(--seg-h) - 8px);display:flex;align-items:center;justify-content:center;gap:5px;padding:0 6px;border-radius:calc(var(--r-2) - 4px);
  color:var(--text-2);font:800 var(--fs-4)/1 var(--font-disp);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;
  transition:background var(--dur-2),color var(--dur-2),transform var(--dur-1)}
:is(#menu,.ui) .seg button.on{color:var(--on-select);background:linear-gradient(180deg,var(--select-hi),var(--select-lo));transform:translateY(-1px);
  box-shadow:inset 0 1px 0 #fff,0 3px 0 var(--select-edge),0 4px 8px rgba(0,0,0,.4)}
:is(#menu,.ui) .seg button .btnIcon{width:16px;height:16px}
:is(#menu,.ui) .seg button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media(hover:hover){:is(#menu,.ui) .seg button:not(.on):hover{color:var(--text);background:rgba(255,255,255,.05)}}
:is(#menu,.ui) .g-rules{display:flex;flex-direction:column;gap:var(--sp-4);overflow:hidden}
:is(#menu,.ui) .more-rows,:is(#menu,.ui) .moreOpts{display:contents}
:is(#menu,.ui) .g-rules.collapsed [data-ph="sheet"]{display:none!important}
:is(#menu,.ui) .g-rules.squeezed [data-squeeze]{display:none!important}
/* a portrait phone: the count went too, the panel is its More options key alone */
:is(#menu,.ui) .g-rules.chip-only{padding:0;background:none;box-shadow:none;gap:0}
:is(#menu,.ui) .g-rules.chip-only #fleetCountRow{display:none!important}
:is(#menu,.ui) .g-rules.chip-only .rules-chip{width:100%;min-height:48px}
:is(#menu,.ui) .rules-chip{justify-content:flex-start;gap:var(--sp-3);min-height:52px;font-size:var(--fs-4);text-align:left;white-space:normal}
:is(#menu,.ui) .rules-chip small{white-space:normal}
:is(#menu,.ui) .rules-chip .i{color:var(--amber);width:22px;height:22px}

/* match ticket: mode + table, each changeable */
:is(#menu,.ui) .ticket{display:flex;flex-direction:column;gap:var(--sp-2);flex:0 0 auto}
:is(#menu,.ui) .tk-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-3);min-height:60px;padding:6px;border-radius:var(--r-3);text-align:left;
  background:rgba(9,14,23,.5);box-shadow:inset 0 0 0 1px var(--line)}
@media(hover:hover){:is(#menu,.ui) .tk-row:hover{box-shadow:inset 0 0 0 1.5px rgba(255,173,71,.6)}}
:is(#menu,.ui) .tk-art{width:84px;border-radius:9px;overflow:hidden;background:#05080d}
:is(#menu,.ui) .tk-art img{width:100%;height:100%;object-fit:contain}
:is(#menu,.ui) .tk-art--mode{aspect-ratio:3/2}:is(#menu,.ui) .tk-art--map{aspect-ratio:16/9}
:is(#menu,.ui) .tk-text{min-width:0;display:flex;flex-direction:column;gap:4px}
:is(#menu,.ui) .tk-text b{font:800 italic var(--fs-5)/1 var(--font-disp);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#menu,.ui) .tk-change{font:800 var(--fs-2)/1 var(--font-disp);letter-spacing:.1em;text-transform:uppercase;color:var(--amber);padding-right:6px}
:is(#menu,.ui) .tk-rules{align-self:flex-start}
/* a rules panel still too tall once collapsed (menuFlow.js fitRules) */
:is(#menu,.ui) .g-rules.snug{gap:var(--sp-2)}
:is(#menu,.ui) .g-rules.snug .ticket{gap:6px}
:is(#menu,.ui) .g-rules.snug .tk-row{grid-template-columns:minmax(0,1fr) auto;min-height:44px;padding:4px 6px 4px 12px}
:is(#menu,.ui) .g-rules.snug .tk-art{display:none}
:is(#menu,.ui) .g-rules.snug .tk-text{flex-direction:row;align-items:baseline;gap:8px}
:is(#menu,.ui) .g-rules.snug .rules-chip{min-height:44px}
:is(#menu,.ui) .g-rules.tight .tk-rules,:is(#menu,.ui) .g-rules.tighter .ticket{display:none}

/* the car stage (view/showcase.js draws into #carShowcaseCanvas) */
:is(#menu,.ui) .g-stage{position:relative;display:flex}
:is(#menu,.ui) .stage{position:relative;flex:1;min-height:0;min-width:0;width:auto;height:auto;border:0;border-radius:var(--r-4);isolation:isolate;overflow:hidden;cursor:grab;touch-action:none;
  background:radial-gradient(ellipse 70% 60% at 50% 42%,#2e4566 0%,#172440 50%,#0a1120 100%);
  box-shadow:inset 0 0 0 1px rgba(179,197,232,.16),inset 0 -40px 60px rgba(0,0,0,.35),0 5px 0 var(--plate-edge),0 14px 28px rgba(0,0,0,.4)}
:is(#menu,.ui) .stage:active{cursor:grabbing}
:is(#menu,.ui) .stage::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:.6;
  background:conic-gradient(from 200deg at 50% -10%,transparent 0deg,rgba(255,226,170,.16) 18deg,transparent 36deg)}
:is(#menu,.ui) #carShowcaseCanvas{position:absolute;inset:0;width:100%!important;height:100%!important}
:is(#menu,.ui) .stage-info{position:absolute;left:14px;right:72px;bottom:12px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;z-index:2;pointer-events:none}
:is(#menu,.ui) #carShowcaseName{font:800 italic var(--fs-6)/1 var(--font-disp);text-transform:uppercase;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
:is(#menu,.ui) #carShowcaseWeight{margin:0;font:400 var(--fs-2)/1.2 var(--font-body);color:var(--text-2);text-shadow:0 1px 4px rgba(0,0,0,.7)}
:is(#menu,.ui) .stage-dice{position:absolute;right:12px;bottom:calc(12px + var(--depth));z-index:2}
:is(#menu,.ui) .stage-dice .i{width:24px;height:24px}
:is(#menu,.ui) .spin-hint{position:absolute;right:12px;top:12px;display:inline-flex;align-items:center;gap:5px;padding:0;background:none;
  font:600 var(--fs-2)/1 var(--font-body);color:var(--text-3);z-index:1;pointer-events:none}

/* the roster: every car, always visible, sized to the box by fitGrid */
:is(#menu,.ui) .g-roster{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3)}
:is(#menu,.ui) .roster-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:22px}
:is(#menu,.ui) .roster-head .kicker b{color:var(--side,var(--p1))}
:is(#menu,.ui) .legend{display:flex;gap:var(--sp-3);font-size:var(--fs-2);color:var(--text-3)}
:is(#menu,.ui) .legend span{display:inline-flex;align-items:center;gap:5px}
:is(#menu,.ui) .legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
:is(#menu,.ui) .legend .lg-taken{box-shadow:inset 0 0 0 2px var(--side-other,var(--p2))}
:is(#menu,.ui) .legend .lg-same{background:repeating-linear-gradient(135deg,rgba(255,255,255,.25) 0 2px,transparent 2px 4px)}
:is(#menu,.ui) .roster{display:grid;gap:var(--gap,6px);grid-template-columns:repeat(var(--cols,8),var(--tile-w,48px));justify-content:center;align-content:center;
  overflow:visible;padding:0;flex:none;touch-action:auto}
:is(#menu,.ui) .carCard{position:relative;display:block;width:var(--tile-w,48px);aspect-ratio:var(--car-ar,1.3);padding:0;border:0;border-radius:10px;cursor:pointer;overflow:hidden;
  background:radial-gradient(ellipse 80% 70% at 50% 70%,#2a3a56,#141e2f 75%);
  box-shadow:inset 0 0 0 1px rgba(179,197,232,.12),inset 0 1px 0 rgba(255,255,255,.08),0 3px 0 var(--plate-edge);transition:transform var(--dur-1)}
@media(hover:hover){:is(#menu,.ui) .carCard:not(.taken):hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4),0 5px 0 var(--plate-edge)}}
:is(#menu,.ui) .carCard img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transform:scale(1.75);background:none;pointer-events:none;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.45))}
:is(#menu,.ui) .carCard>span{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:is(#menu,.ui) .carCard.on{box-shadow:inset 0 0 0 3px var(--side,var(--p1)),0 0 0 3px var(--side-glow,var(--p1-glow)),0 3px 0 var(--plate-edge)}
:is(#menu,.ui) .carCard.taken{cursor:not-allowed;opacity:1;filter:none}
:is(#menu,.ui) .carCard.taken img{opacity:.32;filter:grayscale(.7)}
:is(#menu,.ui) .carCard[data-why="taken"]{box-shadow:inset 0 0 0 3px var(--side-other,var(--p2)),0 3px 0 var(--plate-edge)}
:is(#menu,.ui) .carCard[data-why="taken"] img{opacity:.85;filter:none}
:is(#menu,.ui) .carCard[data-why="same"]{background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 5px,transparent 5px 10px),radial-gradient(ellipse 80% 70% at 50% 70%,#212c40,#121a28 75%)}
:is(#menu,.ui) .carCard .takenTag{position:absolute;left:3px;top:3px;max-width:calc(100% - 6px);font:800 var(--fs-1)/1 var(--font-disp);letter-spacing:.06em;padding:2px 4px 1px;border-radius:4px;
  color:var(--text-2);background:rgba(9,14,23,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#menu,.ui) .carCard[data-why="taken"] .takenTag{color:#14100a;background:var(--side-other,var(--p2));max-width:none;overflow:visible;text-overflow:clip}
:is(#menu,.ui) .roster:not(.wide-cards) .carCard:not([data-why="taken"]) .takenTag{font-size:0;padding:0;width:13px;height:13px;border-radius:50%;left:auto;right:3px;
  background:none;box-shadow:inset 0 0 0 2px var(--text-3)}
:is(#menu,.ui) .roster:not(.wide-cards) .carCard:not([data-why="taken"]) .takenTag::after{content:'';position:absolute;left:50%;top:50%;width:9px;height:2px;background:var(--text-3);transform:translate(-50%,-50%) rotate(-45deg)}
:is(#menu,.ui) .carCard[data-pick]::before{content:'P' attr(data-pick-label);position:absolute;left:3px;top:3px;z-index:1;font:800 var(--fs-1)/1 var(--font-disp);letter-spacing:.06em;
  padding:2px 4px 1px;border-radius:4px;color:#14100a;background:var(--side,var(--p1))}
:is(#menu,.ui) .carCard:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* the table (a mode with no car pick) */
:is(#menu,.ui) .g-table{display:flex;flex-direction:column;gap:var(--sp-3)}
:is(#menu,.ui) .fitart{flex:1 1 0;min-height:0;container-type:size;display:flex}
:is(#menu,.ui) .fitart .frame{width:min(100cqw,calc(100cqh*16/9));aspect-ratio:16/9;margin:auto;border-radius:var(--r-4);overflow:hidden;background:#05080d;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 6px 0 var(--plate-edge),0 18px 34px rgba(0,0,0,.45)}
:is(#menu,.ui) .fitart img{width:100%;height:100%;object-fit:contain}
:is(#menu,.ui) .table-cap{flex:0 0 auto;display:flex;flex-direction:column;gap:6px}
:is(#menu,.ui) .table-cap h2{display:flex;align-items:center;gap:var(--sp-2);font:800 italic var(--fs-7)/1 var(--font-disp);text-transform:uppercase}
:is(#menu,.ui) .table-cap h2 .btnIcon{color:var(--amber)}
:is(#menu,.ui) .table-cap p{color:var(--text-2);font-size:var(--fs-3);line-height:1.4;margin:0;padding:0;border:0;background:none;min-height:0}
:is(#menu,.ui) .mixed{flex:0 0 auto;display:block;padding:var(--sp-3);border-radius:var(--r-3);background:rgba(9,14,23,.55);box-shadow:inset 0 0 0 1px var(--line);
  font-size:var(--fs-3);color:var(--text-2);line-height:1.38;max-width:none;margin:0;border:0}
:is(#menu,.ui) .mixed b{color:var(--text);font:inherit;font-weight:700}

/* ==========================================================================
   ONLINE: the host's room bar, the room screen (finding a player, a guest)
   ========================================================================== */
:is(#menu,.ui) .roombar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-3);
  background:radial-gradient(100% 140% at 0% 50%,rgba(82,224,162,.16),transparent 70%),linear-gradient(180deg,#1b283c,#111a29);
  box-shadow:inset 0 0 0 1.5px rgba(82,224,162,.4),0 4px 0 var(--plate-edge)}
:is(#menu,.ui) .roombar .kicker{color:var(--live)}
:is(#menu,.ui) .roombar .code{font:800 italic var(--fs-7)/1 var(--font-disp);letter-spacing:.24em;color:var(--text)}
:is(#menu,.ui) .roombar .rb-status{flex:1 1 180px;min-width:0;display:flex;align-items:center;gap:var(--sp-2);color:var(--text-2);font-size:var(--fs-3)}
:is(#menu,.ui) .roombar .rb-status .pvpPerson{display:inline-flex;align-items:center;gap:6px;min-width:0}
:is(#menu,.ui) .roombar .rb-acts{display:flex;gap:var(--sp-2);flex-wrap:wrap}
:is(#menu,.ui) .roombar .btn{font-size:var(--fs-4)}
:is(#menu,.ui) .dots::after{content:'';display:inline-block;width:1.2em;text-align:left;animation:mx-dots 1.4s steps(4,end) infinite}
@keyframes mx-dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
:is(#menu,.ui) .room-view{flex:1;min-height:0;display:flex;flex-direction:column}
:is(#menu,.ui) .guest{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;justify-items:center;align-items:center;gap:var(--sp-4)}
:is(#menu,.ui) .faceoff{display:flex;align-items:center;justify-content:center;gap:var(--sp-5);width:100%;height:100%;min-height:0;container-type:size}
:is(#menu,.ui) .fo-card{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);text-align:center;min-width:0}
:is(#menu,.ui) .fo-card .pvpAv{width:min(46cqh,30cqw,200px);height:auto;aspect-ratio:1;font-size:calc(56px*var(--ts));box-shadow:0 10px 24px rgba(0,0,0,.45)}
:is(#menu,.ui) .fo-card--you .pvpAv{width:min(34cqh,22cqw,150px);font-size:calc(42px*var(--ts))}
:is(#menu,.ui) .fo-name{font:800 italic var(--fs-7)/1 var(--font-disp);text-transform:uppercase}
:is(#menu,.ui) .fo-name .pvpTag{font-style:normal}
:is(#menu,.ui) .fo-badges{display:flex;gap:6px;justify-content:center}
:is(#menu,.ui) .fo-vs{font:800 italic var(--fs-8)/1 var(--font-disp);color:var(--flame);text-shadow:0 3px 0 rgba(0,0,0,.4)}
:is(#menu,.ui) .guest-msg{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);text-align:center}
:is(#menu,.ui) .guest-msg p{font-size:var(--fs-4);color:var(--text)}
:is(#menu,.ui) .guest-msg .wait{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--text-2);font-size:var(--fs-3)}
:is(#menu,.ui) .room-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-pill);background:rgba(9,14,23,.6);
  box-shadow:inset 0 0 0 1px rgba(82,224,162,.4);font:800 var(--fs-4)/1 var(--font-disp);letter-spacing:.1em}
:is(#menu,.ui) .room-pill span{color:var(--live);font-size:var(--fs-1);letter-spacing:.16em}

/* ==========================================================================
   SHEETS: How to play, the players, More options. The content is borrowed
   from the screen and handed back on close. X, a tap outside or Escape
   closes; never an OK.
   ========================================================================== */
:is(#menu,.ui) .sheet-layer{position:fixed;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
:is(#menu,.ui) .sheet-layer.hidden{display:none}
:is(#menu,.ui) .scrim{position:absolute;inset:0;background:rgba(3,6,11,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
:is(#menu,.ui) .sheet-layer .sheet{position:relative;width:min(var(--sheet-w,640px),100%);max-height:100%;overflow:hidden;display:flex;flex-direction:column;gap:var(--sp-3);
  padding:var(--sp-5);border:0;border-radius:var(--r-4);touch-action:auto;
  background:linear-gradient(180deg,#1d2a3f,#101826);box-shadow:inset 0 0 0 1px rgba(179,197,232,.16),inset 0 3px 0 var(--amber),0 8px 0 var(--plate-edge),0 30px 60px rgba(0,0,0,.6);
  animation:mx-sheet var(--dur-3) var(--ease-out)}
@keyframes mx-sheet{from{transform:translateY(18px) scale(.98);opacity:0}}
:is(#menu,.ui) .sheet-head{display:flex;align-items:flex-start;gap:var(--sp-3);flex:0 0 auto}
:is(#menu,.ui) .sheet-head .titles{flex:1;min-width:0}
:is(#menu,.ui) .sheet-head h2{font:800 italic var(--fs-7)/1 var(--font-disp);text-transform:uppercase;margin-top:4px}
:is(#menu,.ui) .sheet-body{min-height:0;display:flex;flex-direction:column;gap:var(--sp-4)}
:is(#menu,.ui) .sheet-body .g-who{overflow:visible;padding:0;background:none;box-shadow:none}
:is(#menu,.ui) .sheet-body:has(#moreRows){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--sp-3) var(--sp-4);align-content:start}
:is(#menu,.ui) .sheet-body #moreRows .field input{font-size:calc(16px*var(--ts))}
:is(#menu,.ui) .rules-sheet{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:var(--sp-4);align-items:start}
:is(#menu,.ui) .rules-sheet .r-art{border-radius:var(--r-2);overflow:hidden;background:#05080d;aspect-ratio:3/2}
:is(#menu,.ui) .rules-sheet .r-art img{width:100%;height:100%;object-fit:contain}
:is(#menu,.ui) .rules-sheet .r-blurb{font:800 var(--fs-5)/1.15 var(--font-disp);color:var(--text);margin-bottom:8px}
:is(#menu,.ui) .rules{margin:0;padding:0;display:grid;gap:5px;font-size:var(--rf,var(--fs-3));line-height:1.36;color:var(--text-2)}
:is(#menu,.ui) .rules li{padding:0 0 0 15px}
:is(#menu,.ui) .rules li::before{top:.55em;background:var(--amber)}
:is(#menu,.ui) .rules.tight{gap:2px;line-height:1.28}
:is(#menu,.ui) .rules.two{display:block;columns:var(--cols,2);column-gap:var(--sp-5)}
:is(#menu,.ui) .rules.two li{break-inside:avoid;margin-bottom:6px}

/* screen changes inside the menu (the first paint is instant) */
:is(#menu,.ui) .mx-screen.enter-fwd{animation:mx-fwd var(--dur-3) var(--ease-out)}
:is(#menu,.ui) .mx-screen.enter-back{animation:mx-backward var(--dur-3) var(--ease-out)}
@keyframes mx-fwd{from{opacity:0;transform:translateX(26px)}}
@keyframes mx-backward{from{opacity:0;transform:translateX(-26px)}}
:is(#menu,.ui) .mx-screen.enter-fwd .tile{animation:mx-pop var(--dur-3) var(--ease-spring) both;animation-delay:calc(var(--i,0)*18ms)}
@keyframes mx-pop{from{opacity:0;transform:translateY(10px) scale(.97)}}

/* ==========================================================================
   VIEWPORT CLASSES
   ========================================================================== */

/* --- short desktops and laptops (1366x657) --- */
@media (min-width:900px) and (max-height:780px){
  :is(#menu,.ui){--appbar-h:52px;--pad-y:12px;--fs-8:calc(30px*var(--ts))}
  :is(#menu,.ui) .mx-screen{gap:var(--sp-3)}
  :is(#menu,.ui) .home-body,:is(#menu,.ui) .home-grid{gap:var(--sp-3)}
  :is(#menu,.ui) .lane{padding:var(--sp-3);gap:var(--sp-2)}
  :is(#menu,.ui) .home-q{display:none}
  :is(#menu,.ui) .garage{gap:var(--sp-3)}
  :is(#menu,.ui) .g-who,:is(#menu,.ui) .g-rules{gap:var(--sp-3)}
  :is(#menu,.ui) .panel{padding:var(--sp-3)}
  :is(#menu,.ui) .btn--start{min-height:60px;font-size:var(--fs-6)}
  :is(#menu,.ui) .tk-row{min-height:52px}
  :is(#menu,.ui) .tk-art{width:72px}
  :is(#menu,.ui) .continue{padding:var(--sp-2)}
  :is(#menu,.ui) .cont-art{width:104px}
  :is(#menu,.ui) .detail-line{min-height:40px}
}

/* --- tablet portrait and narrow windows (600-899) --- */
@media (min-width:600px) and (max-width:899px) and (orientation:portrait){
  :is(#menu,.ui) .home-grid{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1.2fr) auto auto;grid-template-areas:"cpu duo" "online online" "rail rail"}
  :is(#menu,.ui) .lane--online .lane-art{display:none}
  :is(#menu,.ui) .daily{flex-direction:row;align-items:center;flex-wrap:wrap}
  :is(#menu,.ui) .daily .dcArt{display:none}
  :is(#menu,.ui) .dock{grid-template-columns:repeat(6,minmax(0,1fr))}
  :is(#menu,.ui) .xtile{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;text-align:center}
  :is(#menu,.ui) .xtile .xi{background:none;width:auto;height:auto}
  :is(#menu,.ui) .xtile .xt{align-self:center}
  :is(#menu,.ui) .xtile .xs{display:none}
  :is(#menu,.ui) .garage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) minmax(0,1.2fr) auto auto;
    grid-template-areas:"seats seats" "stage stage" "roster roster" "rules rules" "start start"}
  :is(#menu,.ui) .garage[data-cars="0"]{grid-template-areas:"seats seats" "who who" "table table" "rules rules" "start start"}
  :is(#menu,.ui) .garage[data-cars="1"] .g-who{display:none}
  :is(#menu,.ui) .g-seats{flex-direction:row}
  :is(#menu,.ui) .g-seats .vs-line{display:none}
  :is(#menu,.ui) .g-seats .seat{flex:1}
  :is(#menu,.ui) .ticket{display:none}
  :is(#menu,.ui) .g-rules{flex-direction:row;flex-wrap:wrap}
  :is(#menu,.ui) .g-rules .opt{flex:1 1 240px}
}

/* --- phone portrait (390x844, 360x640) --- */
@media (max-width:599px){
  :is(#menu,.ui){--gutter:16px;--pad-y:12px;--appbar-h:48px;--fs-8:calc(26px*var(--ts));--fs-7:calc(24px*var(--ts));--fs-6:calc(20px*var(--ts))}
  :is(#menu,.ui) .mx-screen{gap:var(--sp-3)}
  :is(#menu,.ui) .appbar{gap:var(--sp-2)}
  :is(#menu,.ui) .appbar h1{font-size:var(--fs-7)}
  :is(#menu,.ui) .brand img{width:40px;height:40px;border-radius:11px}
  :is(#menu,.ui) .wordmark span{font-size:calc(21px*var(--ts))}
  :is(#menu,.ui) .wordmark strong{font-size:calc(11.5px*var(--ts));letter-spacing:.1em}
  :is(#menu,.ui) .launch-status{display:none}
  :is(#menu,.ui) .appbar-actions .btn--s{padding:0 12px}
  :is(#menu,.ui) .accountBtn .acChipName{max-width:7em}
  :is(#menu,.ui) .home-body{gap:var(--sp-3)}
  :is(#menu,.ui) .home-q{display:none}
  /* the two lanes keep a floor (170-246px by height, never a sliver): with minmax(0,..) the Online, Daily and Goals cards squeezed them to a sliver.
     When the screen is too short for everything the page scrolls instead (home-body) */
  :is(#menu,.ui) .home-body{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  :is(#menu,.ui) .home-grid{gap:var(--sp-3);grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(clamp(170px,29svh,246px),1fr) auto auto;flex:1 0 auto;min-height:auto;
    grid-template-areas:"cpu duo" "online online" "rail rail"}
  :is(#menu,.ui) .lane--cpu,:is(#menu,.ui) .lane--duo{min-height:clamp(170px,29svh,246px)}
  :is(#menu,.ui) .lane:not(.lane--online) .lane-sub{display:none}   /* the pictures need that room */
  :is(#menu,.ui) .dock{flex:0 0 auto}
  :is(#menu,.ui) .lane{padding:var(--sp-3);gap:var(--sp-2);border-radius:var(--r-3)}
  :is(#menu,.ui) .lane-title{font-size:calc(23px*var(--ts))}
  :is(#menu,.ui) .lane-sub{font-size:var(--fs-2)}
  :is(#menu,.ui) .lane-actions{gap:var(--sp-3)}
  :is(#menu,.ui) .btn--pick{font-size:var(--fs-3);min-height:44px;padding:0 10px}
  :is(#menu,.ui) .lane-art--duo .vs{font-size:var(--fs-4);padding:4px 7px 3px}
  :is(#menu,.ui) .lane--online{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-areas:"title as" "qm qm" "create join" "err err";
    gap:var(--sp-3);align-items:center}
  :is(#menu,.ui) .lane--online .lane-art{display:none}
  :is(#menu,.ui) .lane--online .lane-head{grid-area:title}
  :is(#menu,.ui) .lane--online .lane-title{font-size:calc(23px*var(--ts))}
  :is(#menu,.ui) .lane--online .lane-sub{display:none}
  :is(#menu,.ui) .lane--online .online-box{display:contents}
  :is(#menu,.ui) .online-box .playing-as{grid-area:as;justify-self:end;font-size:var(--fs-2);text-align:right}
  :is(#menu,.ui) .online-box .in-room{grid-area:qm}
  :is(#menu,.ui) .online-box .create{grid-area:create}
  :is(#menu,.ui) .online-box .code-field{grid-area:join}
  :is(#menu,.ui) .online-box .err,:is(#menu,.ui) .online-box .note{grid-area:err}
  :is(#menu,.ui) .online-box .join-row{display:contents}
  /* net/lobby.js draws the card in three boxes; their insides are the grid's items */
  :is(#menu,.ui) .online-box .onlineMain,:is(#menu,.ui) .online-box .onlineStatus{display:contents}
  :is(#menu,.ui) .code-field,:is(#menu,.ui) .code-field input{min-height:48px}
  :is(#menu,.ui) .rail{gap:var(--sp-3)}
  :is(#menu,.ui) .daily{flex:0 0 auto;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"art top" "art text" "btn btn";column-gap:var(--sp-3);row-gap:var(--sp-2);padding:var(--sp-3);border-radius:var(--r-3)}
  :is(#menu,.ui) .daily .dcArt{grid-area:art;flex:none;width:92px;height:auto;container-type:normal;align-self:start}
  :is(#menu,.ui) .daily .dcArt .frame{width:92px;height:auto;aspect-ratio:16/9}
  :is(#menu,.ui) .dcHead{grid-area:top}
  :is(#menu,.ui) .dcBody{grid-area:text;font-size:var(--fs-2)}
  :is(#menu,.ui) .dcBody b{font-size:var(--fs-4)}
  :is(#menu,.ui) .daily .btn{grid-area:btn;min-height:44px}
  :is(#menu,.ui) .dock{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-2)}
  :is(#menu,.ui) .xtile{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-height:52px;padding:4px 2px;text-align:center}
  :is(#menu,.ui) .xtile .xi{width:auto;height:auto;background:none}
  :is(#menu,.ui) .xtile .xi .i{width:20px;height:20px}
  :is(#menu,.ui) .xtile .xt{font-size:var(--fs-2);letter-spacing:.02em;align-self:center}
  :is(#menu,.ui) .xtile .xs{display:none}
  /* Continue on one row (no picture), and while it shows the two lanes drop
     their second line: stacked, it pushed their buttons out over the Online
     card. Their pictures shrink to what is left (see .lane-art's @container) */
  :is(#menu,.ui) .continue{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"text btn";gap:var(--sp-3);padding:10px 10px 10px var(--sp-3);border-radius:var(--r-3)}
  :is(#menu,.ui) .cont-art{display:none}
  :is(#menu,.ui) .cont-text{grid-area:text}
  :is(#menu,.ui) .cont-go{grid-area:btn}
  :is(#menu,.ui) #bContinue{width:auto;min-height:48px;padding:0 14px;font-size:var(--fs-5)}
  :is(#menu,.ui) .home-body:has(#continueBanner:not(.hide) #bContinue:not(.hide)) .lane:not(.lane--online) .lane-sub{display:none}
  :is(#menu,.ui) .cont-title{font-size:var(--fs-5)}
  :is(#menu,.ui) .cont-score{font-size:var(--fs-2)}

  :is(#menu,.ui) .tile{--tp:4px;border-radius:var(--r-2)}
  :is(#menu,.ui) .tile .art{border-radius:9px}
  :is(#menu,.ui) .detail-line{display:none}

  /* who's playing is the seat's pencil away (the players sheet): on its own
     here it was an empty "+ Add player" box */
  :is(#menu,.ui) .garage[data-cars="0"]{grid-template-rows:auto minmax(0,1fr) auto auto !important;grid-template-areas:"seats" "table" "rules" "start" !important}
  :is(#menu,.ui) .garage[data-cars="0"] .g-who{display:none}
  /* the seats are a row of their own: laid over the pedestal they hid the car */
  :is(#menu,.ui) .garage{gap:var(--sp-2) var(--sp-3);grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(118px,.8fr) minmax(0,1.2fr) auto auto;
    grid-template-areas:"seats" "stage" "roster" "rules" "start"}
  :is(#menu,.ui) .garage[data-cars="0"]{grid-template-rows:auto auto minmax(0,1fr) auto auto;grid-template-areas:"seats" "who" "table" "rules" "start"}
  :is(#menu,.ui) .garage[data-cars="1"] .g-who{display:none}
  :is(#menu,.ui) .g-seats{flex-direction:row;gap:var(--sp-2)}
  :is(#menu,.ui) .g-seats .vs-line{display:none}
  :is(#menu,.ui) .g-seats .seat{flex:1 1 0;min-width:0}
  :is(#menu,.ui) .seat-main{min-height:52px;padding:4px;gap:8px}
  :is(#menu,.ui) .seat .av{width:40px;height:40px}
  :is(#menu,.ui) .seat-name{font-size:var(--fs-5)}
  :is(#menu,.ui) .seat-tag{font-size:var(--fs-1);letter-spacing:.1em}
  :is(#menu,.ui) .seat-meta{display:none}
  :is(#menu,.ui) .seat-edit{width:40px;height:40px;margin-right:4px}
  :is(#menu,.ui) .picking{display:none!important}
  :is(#menu,.ui) .stage-info{bottom:10px}
  :is(#menu,.ui) #carShowcaseName{font-size:var(--fs-5)}
  :is(#menu,.ui) .spin-hint{display:none}
  :is(#menu,.ui) .roster-head{display:none}
  :is(#menu,.ui) .g-roster{padding:var(--sp-2)}
  :is(#menu,.ui) .g-rules{gap:var(--sp-3);padding:var(--sp-3)}
  :is(#menu,.ui) .g-rules .opt{flex-direction:row;align-items:center;gap:var(--sp-3)}
  :is(#menu,.ui) .g-rules .opt-label{flex:0 0 74px;flex-direction:column;align-items:flex-start;gap:3px;line-height:1.15;white-space:normal}
  :is(#menu,.ui) .g-rules .opt .seg,:is(#menu,.ui) .g-rules .opt .field{flex:1}
  /* More options, the same way: a phone's sheet holds the count, the skill and
     a two-sided mode's goals as well (fitRules' squeeze) */
  :is(#menu,.ui) .sheet-body:has(#moreRows){gap:10px}
  :is(#menu,.ui) .sheet-body .opt{flex-direction:row;align-items:center;gap:var(--sp-3)}
  :is(#menu,.ui) .sheet-body .opt-label{flex:0 0 78px;flex-direction:column;align-items:flex-start;gap:3px;line-height:1.15;white-space:normal}
  :is(#menu,.ui) .sheet-body .opt .seg,:is(#menu,.ui) .sheet-body .opt .field{flex:1;min-width:0}
  :is(#menu,.ui) .ticket{display:none}
  :is(#menu,.ui) .btn--start{min-height:58px;font-size:var(--fs-6)}
  :is(#menu,.ui) .g-who{gap:var(--sp-2);padding:var(--sp-3)}
  :is(#menu,.ui) .g-who .who-head,:is(#menu,.ui) .garage .g-who .names{display:none}
  :is(#menu,.ui) .whoChips{flex-wrap:nowrap;gap:6px;overflow:hidden}
  :is(#menu,.ui) .whoChip{padding-right:10px;font-size:var(--fs-3)}
  :is(#menu,.ui) .whoDot{width:34px;height:34px}
  :is(#menu,.ui) .h2h{font-size:var(--fs-2);padding:6px 10px}
  :is(#menu,.ui) .table-cap h2{font-size:var(--fs-6)}
  :is(#menu,.ui) .table-cap p{font-size:var(--fs-2)}
  :is(#menu,.ui) .mixed{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-2)}

  :is(#menu,.ui) .roombar{gap:var(--sp-2);padding:var(--sp-2)}
  :is(#menu,.ui) .roombar .code{font-size:var(--fs-6)}
  :is(#menu,.ui) .roombar .rb-status{flex-basis:100%;order:3;font-size:var(--fs-2)}
  :is(#menu,.ui) .guest{gap:var(--sp-3)}
  :is(#menu,.ui) .faceoff{flex-direction:column;gap:var(--sp-2)}
  :is(#menu,.ui) .fo-card .pvpAv{width:min(30cqh,48cqw,180px)}
  :is(#menu,.ui) .fo-card--you .pvpAv{width:min(22cqh,36cqw,130px)}
  :is(#menu,.ui) .fo-vs{font-size:var(--fs-6)}

  :is(#menu,.ui) .sheet-layer{align-items:flex-end;padding:0}
  :is(#menu,.ui) .sheet-layer .sheet{width:100%;border-radius:var(--r-4) var(--r-4) 0 0;padding:var(--sp-4) var(--sp-4) max(var(--sp-4),env(safe-area-inset-bottom))}
  :is(#menu,.ui) .rules-sheet{grid-template-columns:1fr}
  :is(#menu,.ui) .rules-sheet .r-art{display:none}
  :is(#menu,.ui) .sheet-body .opt-grid{grid-template-columns:1fr}
  :is(#menu,.ui) .whoAvatars{--acols:9;gap:5px}
}

/* --- short phone portrait (360x640, a PWA under a notch) --- */
@media (max-width:599px) and (max-height:760px){
  :is(#menu,.ui){--appbar-h:44px;--seg-h:44px;--pad-y:10px}
  :is(#menu,.ui) .mx-screen{gap:10px}
  :is(#menu,.ui) .home-body,:is(#menu,.ui) .home-grid,:is(#menu,.ui) .rail{gap:10px}
  :is(#menu,.ui) .lane-sub{display:none}
  /* the week's family goals step aside on a short phone: kept at 360x640 the card squeezed the lanes until the Online card sat on top of the lane keys */
  :is(#menu,.ui) .goalsCard{display:none}
  :is(#menu,.ui) .btn--pick{min-height:42px}
  :is(#menu,.ui) .lane--online{gap:10px}
  :is(#menu,.ui) .daily .dcArt,:is(#menu,.ui) .daily .dcArt .frame{width:76px}
  :is(#menu,.ui) .xtile{min-height:48px}
  :is(#menu,.ui) .garage{grid-template-rows:auto minmax(104px,.7fr) minmax(0,1.3fr) auto auto}
  :is(#menu,.ui) .btn--start{min-height:52px}
}
@media (max-width:599px) and (max-height:680px){
  /* the lane pictures stay: they shrink to the room left (.lane-art's @container
     drops a picture too small for its badges). Hiding them left the two cards
     half empty on most phones, whose visible height is under 680 */
  /* an unfinished match waiting: the daily challenge steps aside for it, and the
     Online card's guest note too (at 375x553 the lanes' keys ran under the card) */
  :is(#menu,.ui) .home-body:has(#continueBanner:not(.hide) #bContinue:not(.hide)) .rail{display:none}
  :is(#menu,.ui) .home-body:has(#continueBanner:not(.hide) #bContinue:not(.hide)) .online-box .locked{display:none}
  :is(#menu,.ui) .dcBody{display:none}
  :is(#menu,.ui) .daily{grid-template-areas:"art top" "art btn";align-items:center}
  :is(#menu,.ui) .daily .btn{min-height:42px}
  :is(#menu,.ui) .continue{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"text btn"}
  :is(#menu,.ui) .cont-art{display:none}
  :is(#menu,.ui) #bContinue{padding:0 14px;width:auto}
  :is(#menu,.ui) .g-who .h2h{display:none}
  :is(#menu,.ui) .mixed{display:none}
  :is(#menu,.ui) .table-cap p{display:none}
}

/* the same on any phone when Larger text is on or a match is waiting to continue: the card is the first thing to give way */
@media (max-width:599px){
  :is(html.derby-large-text) :is(#menu,.ui) .goalsCard{display:none}
  :is(#menu,.ui) .home-body:has(#continueBanner:not(.hide) #bContinue:not(.hide)) .goalsCard{display:none}
}
/* a short phone: the goals card shows its first goal only (the rest are in the Goals screen) so the dock stays on screen */
@media (max-width:599px) and (max-height:900px){
  :is(#menu,.ui) .goalList li:nth-child(n+2){display:none}
  :is(#menu,.ui) .home-body:has(#continueBanner:not(.hide) #bContinue:not(.hide)) .online-box .locked{display:none}
}
/* and on 700 or less the Online card's guest note goes too (Larger text at 360x640 ran the dock off screen) */
@media (max-width:599px) and (max-height:700px){
  :is(#menu,.ui) .online-box .locked{display:none}
}
/* a split-screen window (412x430): the daily card goes above the Online card so Play is in the first screen; the home scrolls for the rest */
@media (max-width:599px) and (max-height:520px){
  :is(#menu,.ui) .home-grid{grid-template-areas:"cpu duo" "rail rail" "online online";grid-template-rows:minmax(clamp(170px,29svh,246px),1fr) auto auto}
}

/* --- phone landscape (844x390 and friends) --- */
@media (orientation:landscape) and (max-height:540px){
  :is(#menu,.ui){--gutter:20px;--pad-y:10px;--appbar-h:44px;--fs-8:calc(24px*var(--ts));--fs-7:calc(22px*var(--ts));--fs-6:calc(19px*var(--ts));--seg-h:44px}
  :is(#menu,.ui) .mx-screen{gap:10px}
  :is(#menu,.ui) .appbar{gap:var(--sp-2)}
  :is(#menu,.ui) .appbar .titles{flex-direction:row;align-items:baseline;gap:var(--sp-3)}
  :is(#menu,.ui) .appbar h1{font-size:var(--fs-7);order:-1;flex:0 1 auto}
  :is(#menu,.ui) .brand img{width:38px;height:38px;border-radius:10px}
  :is(#menu,.ui) .wordmark span{font-size:calc(19px*var(--ts))}
  :is(#menu,.ui) .wordmark strong{font-size:calc(11px*var(--ts))}
  :is(#menu,.ui) .home-q{display:none}
  :is(#menu,.ui) .home-body{gap:10px}
  :is(#menu,.ui) .home-grid{gap:10px;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.18fr)}
  :is(#menu,.ui) .lane{padding:10px;gap:8px;border-radius:var(--r-3)}
  :is(#menu,.ui) .lane-title{font-size:calc(21px*var(--ts))}
  :is(#menu,.ui) .lane-sub{display:none}
  :is(#menu,.ui) .lane-actions{gap:10px}
  :is(#menu,.ui) .btn--pick{font-size:var(--fs-2);min-height:42px;padding:0 8px}
  :is(#menu,.ui) .lane-art--duo .vs{font-size:var(--fs-3);padding:3px 6px 2px}
  :is(#menu,.ui) .lane--online .lane-art{display:none}
  :is(#menu,.ui) .lane--online{gap:8px}
  :is(#menu,.ui) .lane--online .lane-sub{display:none}
  :is(#menu,.ui) .online-box{gap:8px}
  :is(#menu,.ui) .playing-as{font-size:var(--fs-2);min-height:20px}
  :is(#menu,.ui) .locked{font-size:var(--fs-2);padding:6px 8px}
  :is(#menu,.ui) .join-row{grid-template-columns:minmax(0,1fr);gap:8px}
  :is(#menu,.ui) .code-field,:is(#menu,.ui) .code-field input{min-height:44px}
  :is(#menu,.ui) .code-field .cf-lbl{display:none}
  :is(#menu,.ui) .code-field input{padding:2px 10px;font-size:var(--fs-5)}
  :is(#menu,.ui) .daily{padding:10px;gap:8px;border-radius:var(--r-3)}
  :is(#menu,.ui) .dcBody{font-size:var(--fs-2)}
  :is(#menu,.ui) .dcBody b{font-size:var(--fs-4)}
  :is(#menu,.ui) .daily .btn{min-height:42px}
  :is(#menu,.ui) .dock{gap:8px}
  :is(#menu,.ui) .xtile{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:6px;min-height:44px;padding:4px 6px;text-align:center}
  :is(#menu,.ui) .xtile .xi{width:auto;height:auto;background:none}
  :is(#menu,.ui) .xtile .xi .i{width:18px;height:18px}
  :is(#menu,.ui) .xtile .xt{font-size:var(--fs-3);align-self:center}
  :is(#menu,.ui) .xtile .xs{display:none}
  :is(#menu,.ui) .continue{padding:6px 8px;gap:var(--sp-3);border-radius:var(--r-3)}
  :is(#menu,.ui) .cont-art{width:72px}
  :is(#menu,.ui) .cont-title{font-size:var(--fs-5)}
  :is(#menu,.ui) .cont-score{font-size:var(--fs-2)}
  /* an unfinished match waiting: the daily challenge steps aside, and the
     Online card takes its room laid out in rows (Create beside Join), its
     guest note and "Playing as" line gone (the app bar's chip says who you
     are): the banner took the height they needed */
  :is(#menu,.ui) .home-body:has(#continueBanner:not(.hide) #bContinue:not(.hide)) .home-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.7fr);grid-template-areas:"cpu duo online"}
  :is(#menu,.ui) .home-body:has(#continueBanner:not(.hide) #bContinue:not(.hide)) .rail{display:none}
  :is(#menu,.ui) .home-body:has(#continueBanner:not(.hide) #bContinue:not(.hide)) .locked{display:none}
  :is(#menu,.ui) .home-body:has(#continueBanner:not(.hide) #bContinue:not(.hide)) .lane--online{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"title title" "qm qm" "create join" "err err";align-content:start;gap:8px 10px}
  :is(#menu,.ui) .home-body:has(#continueBanner:not(.hide) #bContinue:not(.hide)) .lane--online .lane-head{grid-area:title}
  :is(#menu,.ui) .home-body:has(#continueBanner:not(.hide) #bContinue:not(.hide)) .lane--online .online-box,:is(#menu,.ui) .home-body:has(#continueBanner:not(.hide) #bContinue:not(.hide)) .lane--online .onlineMain,
  :is(#menu,.ui) .home-body:has(#continueBanner:not(.hide) #bContinue:not(.hide)) .lane--online .onlineStatus,:is(#menu,.ui) .home-body:has(#continueBanner:not(.hide) #bContinue:not(.hide)) .lane--online .join-row{display:contents}
  :is(#menu,.ui) .home-body:has(#continueBanner:not(.hide) #bContinue:not(.hide)) .online-box .playing-as{display:none}
  :is(#menu,.ui) .home-body:has(#continueBanner:not(.hide) #bContinue:not(.hide)) .online-box .in-room{grid-area:qm}
  :is(#menu,.ui) .home-body:has(#continueBanner:not(.hide) #bContinue:not(.hide)) .online-box .create{grid-area:create}
  :is(#menu,.ui) .home-body:has(#continueBanner:not(.hide) #bContinue:not(.hide)) .online-box .code-field{grid-area:join}
  :is(#menu,.ui) .home-body:has(#continueBanner:not(.hide) #bContinue:not(.hide)) .online-box .err,:is(#menu,.ui) .home-body:has(#continueBanner:not(.hide) #bContinue:not(.hide)) .online-box .note{grid-area:err}
  :is(#menu,.ui) #bContinue{min-height:44px;font-size:var(--fs-5);padding:0 var(--sp-4)}

  :is(#menu,.ui) .tile{--tp:4px;border-radius:var(--r-2)}
  :is(#menu,.ui) .tile .art{border-radius:9px}
  :is(#menu,.ui) .detail-line{display:none}

  :is(#menu,.ui) .garage{gap:8px 10px;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"seats roster" "stage roster" "rules start"}
  :is(#menu,.ui) .garage[data-cars="0"]{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"table seats" "table who" "rules start"}
  /* the who strip needs a whole chip (44px) but its 1fr row is what the rules leave over (about 37px): it spans the rules row too, top-aligned, and the Start button stays at that row's foot */
  :is(#menu,.ui) .garage[data-cars="0"] .g-who{grid-area:2 / 2 / 4 / 3;align-self:start;overflow:visible;padding:8px 10px}
  :is(#menu,.ui) .garage[data-cars="0"] .g-start{align-self:end}
  :is(#menu,.ui) .garage[data-cars="1"] .g-who{display:none}
  :is(#menu,.ui) .g-seats{flex-direction:row;gap:8px}
  :is(#menu,.ui) .g-seats .vs-line{display:none}
  :is(#menu,.ui) .g-seats .seat{flex:1 1 0;min-width:0}
  :is(#menu,.ui) .seat-main{min-height:46px;padding:3px;gap:6px}
  :is(#menu,.ui) .seat .av{width:36px;height:36px}
  :is(#menu,.ui) .seat-name{font-size:var(--fs-4)}
  :is(#menu,.ui) .seat-tag{font-size:var(--fs-1);letter-spacing:.08em}
  :is(#menu,.ui) .seat-meta{display:none}
  :is(#menu,.ui) .seat-edit{width:40px;height:40px;margin-right:3px}
  :is(#menu,.ui) .picking{display:none!important}
  :is(#menu,.ui) .stage-info{left:10px;bottom:8px}
  :is(#menu,.ui) #carShowcaseName{font-size:var(--fs-4)}
  :is(#menu,.ui) .stage-dice{right:8px;bottom:calc(8px + var(--depth))}
  :is(#menu,.ui) .spin-hint{display:none}
  :is(#menu,.ui) .roster-head{display:none}
  :is(#menu,.ui) .g-roster{padding:var(--sp-2)}
  :is(#menu,.ui) .g-rules{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:8px 10px;padding:10px}
  :is(#menu,.ui) .g-rules .opt{flex:1 1 190px;gap:5px}
  :is(#menu,.ui) .g-rules .opt-label em{display:none}
  :is(#menu,.ui) .g-rules .rules-chip{flex:0 0 auto;min-height:44px;padding:0 10px}
  :is(#menu,.ui) .g-rules .rules-chip .lbl2 small{display:none}
  :is(#menu,.ui) .ticket{display:none}
  :is(#menu,.ui) .btn--start{min-height:50px;font-size:var(--fs-6)}
  :is(#menu,.ui) .g-who{gap:8px;padding:10px}
  :is(#menu,.ui) .g-who .who-head,:is(#menu,.ui) .g-who .h2h{display:none}
  :is(#menu,.ui) .garage .g-who .names{display:none}
  :is(#menu,.ui) .names .field{min-height:44px}
  :is(#menu,.ui) .whoChips{gap:6px}
  :is(#menu,.ui) .whoChip{min-height:44px;font-size:var(--fs-3);padding-right:9px}
  :is(#menu,.ui) .whoDot{width:32px;height:32px}
  :is(#menu,.ui) .g-table .table-cap p{display:none}
  :is(#menu,.ui) .g-table .mixed{display:none}
  :is(#menu,.ui) .table-cap h2{font-size:var(--fs-6)}

  :is(#menu,.ui) .roombar{padding:6px 10px;gap:var(--sp-2)}
  :is(#menu,.ui) .roombar .code{font-size:var(--fs-6)}
  :is(#menu,.ui) .roombar .btn{min-height:36px;font-size:var(--fs-3);--depth:3px}
  :is(#menu,.ui) .guest{grid-template-rows:minmax(0,1fr) auto;gap:10px}
  :is(#menu,.ui) .faceoff{gap:var(--sp-4)}
  :is(#menu,.ui) .guest-msg{gap:6px}
  :is(#menu,.ui) .guest-msg p{font-size:var(--fs-3)}

  :is(#menu,.ui) .sheet-layer .sheet{padding:var(--sp-4);gap:10px}
  :is(#menu,.ui) .sheet-head h2{font-size:var(--fs-6)}
  :is(#menu,.ui) .rules-sheet{grid-template-columns:minmax(0,1fr)}
  :is(#menu,.ui) .rules-sheet .r-art{display:none}
  :is(#menu,.ui) .whoAvatars{--acols:17;gap:4px}
  :is(#menu,.ui) .sheet-body:has(#moreRows){grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px 14px}
  /* the editor in two columns, the pictures on the right; the chips and the
     names step aside while it is open */
  :is(#menu,.ui) .whoEditor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);align-content:start;gap:8px 14px;padding:10px;
    grid-template-areas:"name av" "kid av" "sw av" "stats av" "act av" "err err"}
  :is(#menu,.ui) .whoNameRow{grid-area:name}
  :is(#menu,.ui) .whoKid{grid-area:kid;min-height:36px}
  :is(#menu,.ui) .whoSwatches{grid-area:sw;gap:6px}
  :is(#menu,.ui) .whoSwatch{width:28px;height:28px}
  :is(#menu,.ui) .whoEditor .whoAvatars{grid-area:av;--acols:9;align-self:start}
  :is(#menu,.ui) .whoStats{grid-area:stats}
  :is(#menu,.ui) .whoActions{grid-area:act}
  :is(#menu,.ui) .whoActions button{min-height:38px}
  :is(#menu,.ui) .whoError{grid-area:err}
  :is(#menu,.ui) .g-who:has(.whoEditor) .whoChips,:is(#menu,.ui) .g-who:has(.whoEditor) .names{display:none}
}

/* ---------- motion and the Settings' accessibility switches ---------- */
@media (prefers-reduced-motion:reduce){
  :is(#menu,.ui) *,:is(#menu,.ui) *::before,:is(#menu,.ui) *::after{animation:none!important;transition:none!important}
}
html.derby-reduced-motion :is(#menu,.ui) *,html.derby-reduced-motion :is(#menu,.ui) *::before,html.derby-reduced-motion :is(#menu,.ui) *::after{animation:none!important;transition:none!important}
/* High contrast: stronger hairlines, brighter secondary text, opaque plates */
:root.derby-high-contrast :is(#menu,.ui){--text-2:#e8eef7;--text-3:#cfd8e6;--line:rgba(225,235,255,.55);--line-hi:rgba(255,255,255,.8);--plate-hi:#121c2c;--plate-lo:#0b111c;--focus:#ffffff}
:root.derby-high-contrast #menu::before{display:none}
:root.derby-high-contrast :is(#menu,.ui) :focus-visible{outline-width:4px}
/* Larger text: the whole type scale is built on --ts */
:root.derby-large-text :is(#menu,.ui){--ts:1.14}
/* The app bar on a narrow phone: logo + wordmark + level chip + Log in + Sign up is wider than the bar at 360px (Sign up ended at 360 in
   a 328px bar; with Larger text at 387, which also pushed #menu 27px wider than the screen, 2026-11-07 menu-flow). The logo stays, and
   is the link's name (aria-label), so the wordmark gives way to the account keys. */
@media (max-width:380px){:is(#menu,.ui) .brand .wordmark{display:none}}
@media (max-width:599px){:root.derby-large-text :is(#menu,.ui) .brand .wordmark{display:none}}
@keyframes dcPulse{0%{box-shadow:0 0 0 0 rgba(255,214,102,.0)}30%{box-shadow:0 0 0 8px rgba(255,214,102,.55)}100%{box-shadow:0 0 0 0 rgba(255,214,102,0)}}
#dailyCard.dcPulse{animation:dcPulse 1.4s ease-out 1}
@media (prefers-reduced-motion:reduce){#dailyCard.dcPulse{animation:none}}
:is(#menu,.ui) .goalFamily{font-size:var(--fs-2);color:var(--flame)}
:is(#menu,.ui) .colGrid{list-style:none;margin:0 0 var(--sp-3);padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
:is(#menu,.ui) .colGrid li{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-3);background:rgba(255,255,255,.05)}
:is(#menu,.ui) .colGrid li.locked{opacity:.78}
:is(#menu,.ui) .colSwatch{flex:0 0 44px;height:44px;border-radius:10px;background:#1b283c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
:is(#menu,.ui) .colSwatch{position:relative;display:grid;place-items:center;font-size:20px;line-height:1}
/* The name-plate previews: the same ring each frame puts on the HUD plate (view/hud.css #plate0.plateFx-*), drawn on the swatch. Without
   these the sheet showed an empty square for every plate (the HUD rules only match #plate0 and #plate1). */
:is(#menu,.ui) .colSwatch.plateFx-checker{box-shadow:inset 0 0 0 2px #e9eef5;background-image:repeating-conic-gradient(rgba(255,255,255,.18) 0 25%,transparent 0 50%);background-size:12px 12px}
:is(#menu,.ui) .colSwatch.plateFx-flame{box-shadow:inset 0 0 0 2px #ff7a3c,0 0 12px rgba(255,104,57,.55)}
:is(#menu,.ui) .colSwatch.plateFx-flame::after{content:"\1F525"}
:is(#menu,.ui) .colSwatch.plateFx-crown{box-shadow:inset 0 0 0 2px #b8c4d6,0 0 10px rgba(170,200,255,.45)}
:is(#menu,.ui) .colSwatch.plateFx-crown::after{content:"\1F451"}
:is(#menu,.ui) .colSwatch.plateFx-family{box-shadow:inset 0 0 0 2px #6fd6a0,0 0 10px rgba(111,214,160,.4)}
:is(#menu,.ui) .colSwatch.plateFx-family::after{content:"\1F3E0"}
:is(#menu,.ui) .colSwatch.plateFx-heart{box-shadow:inset 0 0 0 2px #ff6f9c}
:is(#menu,.ui) .colSwatch.plateFx-heart::after{content:"\2764\FE0F"}
:is(#menu,.ui) .colSwatch.plateFx-puddle{box-shadow:inset 0 0 0 2px #5aa9e6}
:is(#menu,.ui) .colSwatch.plateFx-puddle::after{content:"\1F4A7"}
:is(#menu,.ui) .colSwatch.plateFx-sun{box-shadow:inset 0 0 0 2px #ff9a3c}
:is(#menu,.ui) .colSwatch.plateFx-sun::after{content:"\2600\FE0F"}
:is(#menu,.ui) .colSwatch.plateFx-wave{box-shadow:inset 0 0 0 2px #2fc4d6}
:is(#menu,.ui) .colSwatch.plateFx-wave::after{content:"\1F30A"}
:is(#menu,.ui) .colSwatch.plateFx-trophy{box-shadow:inset 0 0 0 2px #c3ccd8}
:is(#menu,.ui) .colSwatch.plateFx-trophy::after{content:"\1F3C6"}
:is(#menu,.ui) .colSwatch.plateFx-plain{box-shadow:inset 0 0 0 2px rgba(255,255,255,.28)}
:is(#menu,.ui) .colInfo{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
:is(#menu,.ui) .colInfo small{color:var(--text-2)}
:is(#menu,.ui) .colN{font-variant-numeric:tabular-nums}

/* Tournament (app/tournament.js): the setup row's Pick tables key and the line-up sheet. The sheet is an .overlay.ui outside #menu,
   so it borrows the tile, fit-box and pick-grid looks above and menuFlow.js fitBox sizes its grid to the box. */
:is(#menu,.ui) #tournamentEdit{flex:1 1 auto;width:100%}
:is(#menu,.ui) #tournamentEdit:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
#tournamentSheet{z-index:40}
#tournamentSheet{--sheet-w:1180px}
#tournamentSheet.ui>.tourney-sheet{width:min(var(--sheet-w),100%);height:min(100%,860px);max-height:100%;display:flex;flex-direction:column;gap:8px;padding:16px 18px;overflow:hidden}
#tournamentSheet .tourney-sheet h1{margin:2px 0 0;font-size:clamp(22px,3.4vw,38px)}
#tournamentSheet .kicker{justify-content:flex-start;gap:12px;width:100%}
#tournamentSheet .kicker::before{display:none}
#tournamentSheet .tcount{font-weight:700;color:var(--amber);letter-spacing:.08em}
#tournamentSheet .tourney-slots{display:flex;flex-wrap:wrap;gap:6px;flex:0 0 auto}
#tournamentSheet .tslot{position:relative;display:flex;align-items:center;gap:6px;min-width:0;height:38px;padding:3px 10px 3px 3px;border-radius:10px;color:var(--text);
  background:var(--inset);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14);font:700 13px/1 var(--font-disp)}
#tournamentSheet .tslot.is-filled{box-shadow:inset 0 0 0 1.5px rgba(255,173,71,.7)}
#tournamentSheet .tslot img{height:100%;aspect-ratio:16/9;object-fit:cover;border-radius:7px}
#tournamentSheet .tslot .tn{display:grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:var(--amber);color:#14181d;font-weight:800}
#tournamentSheet .tslot .tq{opacity:.55;padding:0 8px}
#tournamentSheet .tslot .tname-s{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tournamentSheet .tslot.is-compact .tname-s{display:none}
#tournamentSheet .tslot.is-compact{height:30px;padding-right:4px}
#tournamentSheet .tslot.is-compact .tq{display:none}
#tournamentSheet .tslot:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
#tournamentSheet .fit-box{flex:1 1 0;min-height:0;align-items:flex-start}
#tournamentSheet .pick-grid{align-content:start}
#tournamentSheet .tbadge{position:absolute;top:10px;left:10px;display:grid;place-items:center;min-width:26px;height:26px;border-radius:50%;background:var(--amber);color:#14181d;font:800 14px/1 var(--font-disp);box-shadow:0 2px 6px rgba(0,0,0,.5)}
#tournamentSheet .tbadge[hidden]{display:none}
#tournamentSheet .tourney-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;flex:0 0 auto}
#tournamentSheet .tourney-actions button{min-height:42px;padding:0 16px;border-radius:var(--r-2);font:800 14px/1 var(--font-disp);letter-spacing:.04em;text-transform:uppercase;color:var(--text);background:var(--inset);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16)}
#tournamentSheet .tourney-actions button:disabled{opacity:.4}
#tournamentSheet .tourney-actions .big{margin:0;width:auto;min-width:120px;color:var(--on-select);background:linear-gradient(180deg,var(--select-hi),var(--select-lo))}
#overTournament .tourney-head{display:block;font-size:14px;color:var(--text)}
#overTournament .tourney-total{margin-top:3px}
#overTournament .tourney-list{margin:6px 0 0;padding-left:20px;text-align:left;font-size:12px;line-height:1.5}
/* fitPick (menuFlow.js) sizes a tile as padding + picture + strip; the tile's own 8px row gap is not in its sum, so the sheet's tiles
   keep that space as the strip's top padding instead and the grid fits its box */
#tournamentGrid .tile{row-gap:0}
#tournamentGrid .tile .strip{padding-top:13px}
#tournamentSheet .tcount{margin-left:10px}
/* the dock is six tiles since Tower and Co-op moved up into the mode cards (homeModes.css) */

/* The Garage sheet's tabs and the Cars tab (app/collection.js, app/garageCars.js). Phone first: two tiles across at 390 px. */
:is(#menu,.ui) .garTabs{display:flex;gap:var(--sp-2);margin:0 0 var(--sp-2)}
:is(#menu,.ui) .garTabs button{flex:1 1 0;min-height:44px;padding:8px 6px;border-radius:var(--r-3);border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text-2);font:700 var(--fs-3)/1.1 var(--font-disp)}
:is(#menu,.ui) .garTabs button.on{background:var(--amber);color:#17110a;border-color:transparent}
:is(#menu,.ui) .carGrid{list-style:none;margin:0 0 var(--sp-3);padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
:is(#menu,.ui) .carTile{width:100%;display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:8px;border-radius:var(--r-3);border:1px solid var(--line);background:rgba(255,255,255,.06);color:inherit;text-align:left;min-height:44px}
:is(#menu,.ui) .carTile .carPic{position:relative;display:block;aspect-ratio:8/5;border-radius:8px;background:radial-gradient(ellipse at 50% 70%,#2a3a52,#141c2a);overflow:hidden}
:is(#menu,.ui) .carTile img{width:100%;height:100%;object-fit:contain;display:block}
:is(#menu,.ui) .carTile .carName{font:700 var(--fs-3)/1.2 var(--font-disp);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(#menu,.ui) .carTile small{color:var(--text-2);font-size:var(--fs-2);line-height:1.25}
:is(#menu,.ui) .carGrid li.lockedCar .carTile{background:rgba(255,255,255,.03)}
:is(#menu,.ui) .carGrid li.lockedCar img{filter:brightness(0) contrast(1.2);opacity:.85}
:is(#menu,.ui) .carGrid li.lockedCar .carPic{background:radial-gradient(ellipse at 50% 70%,#1b2535,#0b1018)}
:is(#menu,.ui) .carLock{position:absolute;right:6px;top:4px;font-size:16px;line-height:1;opacity:.9}
/* The Garage's pin and plate previews (app/collection.js): a drawn pin in the theme's colours; the plate with the player's name in its frame. */
:is(#menu,.ui) .colSwatch.pinSw{flex:0 0 44px;height:64px;background:radial-gradient(ellipse at 50% 80%,#2a3a52,#141c2a)}
:is(#menu,.ui) .colSwatch.pinSw .pinSvg{height:56px;width:auto;display:block}
:is(#menu,.ui) .colSwatch.plateSw{flex:0 0 112px;width:112px;height:44px;background:none;box-shadow:none;overflow:visible;display:flex;align-items:center;justify-content:center}
:is(#menu,.ui) .colSwatch.plateSw .plateChip{font-size:13px;max-width:112px}
:is(#menu,.ui) .colSwatch.plateSw::after{content:none!important}