/* Random Duck Race — the game's own styles (css/room.css adds the Rooms UI). */
:root{
  --night:#05090E;
  --panel:#0B131C;
  --ink:#E9F2F0;
  --dim:rgba(233,242,240,.52);
  --line:rgba(233,242,240,.14);
  --amber:#F1C40F;
  --amber-bd:#F39C12;
  --amber-sh:#D68910;
  --river:#4FD0E8;
  --river-bd:#159AB8;
  --river-sh:#0E7A92;
  --card-bg:#26323F;
  --wood:#8D6E63;
  --wood-card:#795548;
  --wood-dk:#5D4037;
  --wood-darkest:#3E2723;
  --parchment:#F5F5DC;
  --danger:#E74C3C;
  --danger-bd:#A6382C;
  --danger-sh:#7A281D;
  --disp: 'Nunito',ui-monospace,Menlo,monospace;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --radius:0px;
  /* Reserved ad-frame offsets — how much of the true viewport's left/right/
     bottom edges are set aside for ad slots at the current screen tier.
     Zero by default (full-bleed, today's behaviour); updateAdFrame() in the
     script sets real values once the page loads and on every resize. Every
     fixed-position game/UI element adds these into its own inset so the
     whole app shrinks to fit the space left over, rather than sitting under
     the ad slots. */
  --adL:0px; --adR:0px; --adB:0px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--night)}
body{font-family:var(--disp);color:var(--ink);-webkit-tap-highlight-color:transparent}
/* Square by default; every rounded surface sets its own radius. */
button,input,textarea,select,#volumePopup{border-radius:var(--radius)}
/* Keeps exactly one real <h1> on the page for screen readers/SEO now that
   the wordmark itself lives on the far-bank flags instead of as a DOM
   image — offscreen rather than display:none so it still reads out. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* LOADING SCREEN.
   Three.js loads from a CDN as a blocking script tag — on a slow
   connection that's a real, silent stall before anything else on the page
   can run. This has to be the first thing in <body> and styled here, above
   the fold of the stylesheet, so it paints before the browser even reaches
   that script tag, not after.
   The signature move is a photo-finish scan light sweeping the wordmark —
   borrowed directly from the game's own photo-finish mechanic rather than
   a generic spinner, so the wait already looks like part of the broadcast
   rather than a placeholder for it. */
/* the lobby's indigo, painted by CSS alone, so it is there on the first frame */
#loadingScreen,#setupLoading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:radial-gradient(ellipse at 50% 30%,#2A2270 0%,#19154A 35%,#0E1030 70%,#080A1C 100%)}
#loadingScreen{position:fixed;inset:0;z-index:2147483647;transition:opacity .5s ease}
.ld-logo{width:min(380px,74vw);height:auto;margin-bottom:10px;
  filter:drop-shadow(0 6px 0 rgba(0,0,0,.35)) drop-shadow(0 0 30px rgba(241,196,15,.18));animation:ldBob 3s ease-in-out infinite}
@keyframes ldBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
#loadingScreen.hide{opacity:0;pointer-events:none}
.ld-status-row{width:min(320px,72vw);display:flex;justify-content:space-between;align-items:center;padding:0 2px}
.ld-status-text{font:900 17px var(--disp);color:#fff;text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.ld-status-pct{font:900 17px var(--mono);color:var(--amber);text-shadow:0 2px 8px rgba(0,0,0,.5)}
.ld-track{--cut:12px;--bw:2px;--bd:rgba(196,178,255,.5);
  --bg:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 9px,rgba(255,255,255,0) 9px 18px),rgba(20,16,60,.94);
  width:min(320px,72vw);height:32px;position:relative;overflow:hidden;
  filter:drop-shadow(0 6px 0 rgba(8,6,30,.65)) drop-shadow(0 14px 22px rgba(0,0,0,.35))}
/* THE BAR. .ld-fill is a window that slides in from the left (translateX)
   over its striped strip, which slides the other way by the same amount, so
   the strip stays still while more of it shows: the stripes never squash,
   and every movement is a transform the compositor keeps running even while
   the main thread is busy building the course. LdBar (index.html) drives it. */
.ld-fill{--cut:8px;--cut-b:0px;position:absolute;top:5px;left:5px;right:5px;bottom:5px;overflow:hidden;
  transform:translateX(-100%);will-change:transform}
.ld-fill > i{position:absolute;inset:0;overflow:hidden;transform:translateX(100%);will-change:transform;
  background:linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 45%,rgba(0,0,0,.12) 100%),var(--amber)}
.ld-fill > i::after{content:'';position:absolute;top:0;bottom:0;left:-25.46px;right:0;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.3) 0 9px,rgba(255,255,255,0) 9px 18px);
  animation:ldStripe .8s linear infinite}
@keyframes ldStripe{to{transform:translateX(25.46px)}}
@media(prefers-reduced-motion:reduce){.ld-fill > i::after{animation:none}}
.ld-caption{font:800 12.5px var(--disp);letter-spacing:.14em;text-transform:uppercase;color:rgba(236,234,255,.7);
  text-shadow:0 2px 8px rgba(0,0,0,.5)}
.ld-caption .ld-retry{color:var(--amber);text-decoration:underline;letter-spacing:.04em;text-transform:none}
/* width/height are NOT redundant with inset:0. For an absolutely positioned
   REPLACED element (and a canvas is one) a computed width of `auto` resolves
   to the element's own intrinsic size — its width/height attributes — instead
   of stretching between left and right the way a plain div would. So once
   renderer.setSize() started being called with updateStyle=false, nothing was
   left to set the CSS size, and the canvas rendered at the size of the drawing
   buffer: on a phone at renderScale 0.62 that is a picture 62% of the screen,
   pinned to the top-left, with white underneath it. These two lines are what
   makes the buffer-scaling trick safe. */
canvas#c{position:fixed;inset:0;display:block;width:100%;height:100%}

.layer{position:fixed;inset:0;pointer-events:none;z-index:6}
.layer.act{pointer-events:auto}
.off{opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s}
.on{opacity:1;visibility:visible;transition:opacity .32s ease}
/* A hidden screen's animations (the shine on Set The Race, the room's live
   dot, the lobby's glows...) wait until it is shown again: left running they
   are invisible but still cost a style pass on every frame of the race. */
.layer.off,.layer.off::before,.layer.off::after,.layer.off *,.layer.off *::before,.layer.off *::after{animation-play-state:paused!important}

/* ─────────── AD SLOTS ───────────
   Reserved space for display ads (side rails on wide desktop, a bottom bar
   at every tier down to mobile). Purely functional, zero visual footprint
   by design: the 3D game canvas renders full-bleed underneath these
   regions (see canvas#c above), so the game is what actually shows through
   here, not an empty placeholder box — these divs exist only to (a) keep
   the other UI elements clear of wherever an ad ends up, via the
   --adL/--adR/--adB variables updateAdFrame() drives them from, and (b)
   give a real element to drop actual ad code into later, at exactly the
   right position/size, without touching layout again. Hidden by default
   (display:none) since a given tier might not use one or more of them;
   updateAdFrame() shows/sizes exactly the ones the current tier needs. */
.ad-rail,.ad-bar-bottom{position:fixed;display:none;z-index:3;pointer-events:none}
.ad-rail{top:0;bottom:0}
.ad-rail.left{left:0}
.ad-rail.right{right:0}
.ad-bar-bottom{bottom:0}

/* ─────────── THE UI: SETUP, SETTINGS AND EVERY MODAL ───────────
   Indigo glass panels, white type, amber for "selected" and "go", purple
   for rooms, and the arcade button's cut corners on everything (the frame
   itself is drawn by css/kit.css; these rules only pick its colours). */
[hidden]{display:none!important}

/* ── the Setup screen ── */
#config{top:var(--hdr-h,64px);display:flex;align-items:center;align-items:safe center;justify-content:center;
  padding:14px 16px 20px;overflow-y:auto;overflow-x:hidden}
/* the dimming reaches the whole screen, not just the part below the header
   (#configDim, the element right after #config, shown while Setup is) */
#configDim{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s;
  background:radial-gradient(ellipse at 50% 45%,rgba(10,8,40,.28),rgba(6,5,24,.58))}
#config.on:not(.field-hidden) + #configDim{opacity:1;visibility:visible;transition:opacity .32s ease}
#config.field-hidden{visibility:hidden}
.config-wrap{width:min(1020px,100%)}
/* the setup fills the first screen as it always has; what the site is about
   (.home-info) waits below it, for anyone who scrolls */
.config-wrap:has(> .home-info){display:grid;grid-template-rows:minmax(calc(100dvh - var(--hdr-h,64px) - 34px),auto) auto}
.config-wrap:has(> .home-info) > .cfg{align-self:center}
.cfg{--bg:var(--u-panel);--bd:var(--u-edge);position:relative}
.cfg-hd{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px 0}
.cfg-ttl{min-width:0;flex:1}
.cfg-kicker{display:block;font:800 11px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--amber)}
/* the race's own name is the title, and it is edited in place */
#raceNameRow{display:flex;align-items:center;gap:10px;margin-top:4px;min-width:0}
#raceNameLabel{min-width:0;cursor:text;font:900 clamp(22px,2.8vw,30px)/1.15 var(--disp);color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#raceNameEditBtn{--cut:7px;--bg:var(--u-soft2);flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  padding:0;cursor:pointer;color:#fff;transition:transform .12s}
#raceNameEditBtn:hover{--bg:var(--amber);color:#2C1F0A;transform:translateY(-1px)}
#raceNameInput{--cut:8px;--bw:2px;--bd:var(--amber);--bg:rgba(0,0,0,.35);flex:1;min-width:0;max-width:440px;height:42px;
  padding:0 12px;outline:none;color:#fff;font:900 clamp(18px,2.4vw,24px) var(--disp)}
.cfg-tabs{display:none}
.cfg-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;padding:18px 26px 4px;position:relative}
/* Duck Theme folded away (a computer only): the arrow sits in the gap
   between the two cards, at their middle; folded, the card is a slim tab */
.tp-fold,.tp-open{display:none}
@media(min-width:861px){
  .tp-fold{display:flex;position:absolute;z-index:3;top:50%;left:calc(26px + (100% - 68px)*.6 + 8px);width:30px;height:30px;margin:-15px 0 0 -15px;
    align-items:center;justify-content:center;border:0;border-radius:50%;cursor:pointer;color:#2C1F0A;background:var(--amber);
    box-shadow:0 0 0 4px rgba(14,12,46,.9),0 6px 14px rgba(0,0,0,.4);transition:transform .15s}
  .tp-fold:hover{transform:scale(1.12)}
  .tp-fold:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .cfg.tp-shut .tp-fold{display:none}
  .cfg.tp-shut .cfg-body{grid-template-columns:minmax(0,1fr) 76px}
  .cfg.tp-shut .cfg-theme{padding:0}
  .cfg.tp-shut .cfg-theme > :not(.tp-open){display:none}
  .cfg.tp-shut .tp-open{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;height:100%;min-height:220px;padding:14px 6px;border:0;cursor:pointer;
    background:linear-gradient(180deg,rgba(241,196,15,.14),rgba(241,196,15,.04));color:#fff;transition:background .15s}
  .cfg.tp-shut .tp-open:hover{background:linear-gradient(180deg,rgba(241,196,15,.24),rgba(241,196,15,.08))}
  .tp-open-chev{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;font-style:normal;
    background:var(--amber);color:#2C1F0A;box-shadow:0 0 0 0 rgba(241,196,15,.5);animation:tpCall 2.2s ease-out infinite}
  @keyframes tpCall{0%{box-shadow:0 0 0 0 rgba(241,196,15,.55)}70%,100%{box-shadow:0 0 0 12px rgba(241,196,15,0)}}
  .tp-open-ducks{display:flex;flex-direction:column;align-items:center}
  .tp-open-ducks img{width:44px;height:44px;object-fit:contain;margin:-6px 0;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
  .tp-open b{writing-mode:vertical-rl;transform:rotate(180deg);font:900 13px var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
  @media (prefers-reduced-motion:reduce){.tp-open-chev{animation:none}}
}
.cfg-card{--cut:16px;--bg:var(--u-well);--bd:var(--u-line);min-width:0;padding:16px}
.cfg-card-hd{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 14px;
  min-height:40px;margin-bottom:14px}
.cfg-card-hd h3{font:900 18px var(--disp);color:#fff}
.cfg-hint{font:700 12px var(--disp);color:var(--u-faint)}

/* History / Save / Share */
.field-roster-actions{display:flex;gap:8px;flex:none}
.field-icon-btn{--cut:9px;--bg:rgba(0,0,0,.34);--bd:transparent;display:flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 15px;cursor:pointer;color:#fff;font:900 13px var(--disp);transition:transform .12s}
.field-icon-btn svg{color:var(--ic,#fff);flex:none}
.field-icon-btn:hover{--bg:rgba(0,0,0,.52);transform:translateY(-1px)}
.field-icon-btn:active{transform:translateY(1px)}
#navHistoryBtn{--ic:#FFA24C}
#rosterSaveBtn{--ic:var(--amber)}
#shareBtn{--ic:#6CB8FF}
/* Load has nothing saved yet: Save glows gently */
.field-icon-btn.hint-pulse{--bd:rgba(241,196,15,.7);animation:rosterSaveHint 1.8s ease-in-out infinite}
@keyframes rosterSaveHint{0%,100%{filter:drop-shadow(0 3px 0 rgba(8,6,30,.6)) drop-shadow(0 0 0 rgba(241,196,15,0))}
  50%{filter:drop-shadow(0 3px 0 rgba(8,6,30,.6)) drop-shadow(0 0 8px rgba(241,196,15,.7))}}
@media(prefers-reduced-motion:reduce){.field-icon-btn.hint-pulse{animation:none}}

/* segmented control: Paste / Import / Load, and every choice in Settings */
.seg{--cut:11px;--bg:rgba(0,0,0,.32);--bd:var(--u-line);display:flex;gap:4px;padding:4px}
.seg button{--cut:8px;flex:1;min-width:0;padding:8px 10px;cursor:pointer;font:800 13px var(--disp);color:var(--u-dim);
  white-space:nowrap;transition:color .15s}
.seg button:hover{--bg:rgba(255,255,255,.07);color:#fff}
.seg button[aria-pressed="true"]{--bg:#fff;color:#1B1A40}
.cfg-runners #oFieldMode{flex:0 1 300px}

/* the three ways in share one height (as tall as the theme list beside
   them), so switching never jumps the panel */
.cfg-runners{display:flex;flex-direction:column}
#pasteHost,#importHost,#savedHost{flex:1 0 250px;min-height:0}
#listView{height:100%;display:flex;flex-direction:column;gap:12px}
.paste-area-wrap{position:relative;flex:1;min-height:0}
#pasteArea{--cut:14px;--bw:2px;--bd:var(--u-line);--bg:rgba(0,0,0,.32);width:100%;height:100%;resize:none;display:block;outline:none;
  color:#fff;font:700 14px/1.65 var(--mono);padding:12px 46px 12px 14px}
#pasteArea::placeholder{color:var(--u-faint)}
#pasteArea:focus{--bd:var(--amber)}
#pasteArea.shake{animation:pasteShake .4s ease}
@keyframes pasteShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}
  60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.paste-clear{--cut:7px;--bg:var(--u-soft2);position:absolute;top:10px;right:10px;width:28px;height:28px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff}
.paste-clear:hover{--bg:var(--danger)}
.field-actions-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}
.dk-group{display:flex;gap:6px}
.dk-add{--cut:9px;--bg:var(--u-soft2);--bd:rgba(255,255,255,.08);width:42px;height:42px;flex:none;display:flex;align-items:center;
  justify-content:center;padding:0;cursor:pointer;color:#fff;filter:drop-shadow(0 3px 0 rgba(8,6,30,.6));transition:transform .12s,filter .12s}
.dk-add:hover{--bg:var(--u-soft3);transform:translateY(-2px);filter:drop-shadow(0 5px 0 rgba(8,6,30,.6))}
.dk-add:active{transform:translateY(1px);filter:drop-shadow(0 1px 0 rgba(8,6,30,.6))}
.dk-add:disabled{opacity:.35;cursor:default;transform:none}
.dk-add.tint-danger{--bg:rgba(231,76,60,.24);--bd:rgba(231,76,60,.35);color:#FF8F84}
.dk-add.tint-danger:hover{--bg:var(--danger);color:#fff}
.big.quick-fill-btn{--chamfer:10px;display:inline-flex;align-items:center;gap:7px;font-size:14px;padding:11px 16px;
  background-color:#277F76;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.25);filter:drop-shadow(0 4px 0 #1B5B54)}
.big.quick-fill-btn::before{background-color:#38A99E}
.big.quick-fill-btn:hover{filter:brightness(1.08) drop-shadow(0 6px 0 #1B5B54)}
.big.quick-fill-btn:active{filter:drop-shadow(0 1px 0 #1B5B54)}

/* Import */
#importHost{display:flex;flex-direction:column;gap:8px}
.import-drop{--cut:14px;--bw:2px;--bd:rgba(255,255,255,.18);--bg:rgba(0,0,0,.24);flex:1;min-height:0;display:flex;flex-direction:column;
  overflow:hidden;text-align:center;cursor:pointer;transition:transform .15s}
.import-drop:hover{--bd:rgba(241,196,15,.6);--bg:rgba(241,196,15,.05)}
.import-drop.drag{--bd:var(--amber);--bg:rgba(241,196,15,.12);transform:scale(1.015);animation:importDropPulse 1.1s ease-in-out infinite}
@keyframes importDropPulse{0%,100%{filter:drop-shadow(0 0 0 rgba(241,196,15,0))}50%{filter:drop-shadow(0 0 14px rgba(241,196,15,.45))}}
@media(prefers-reduced-motion:reduce){.import-drop.drag{animation:none}}
.import-drop-body{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 16px}
.import-drop-icon{width:36px;height:36px;margin-bottom:6px;color:var(--amber);transition:transform .2s}
.import-drop.drag .import-drop-icon{transform:translateY(-4px) scale(1.15)}
.import-drop-t{font:900 17px var(--disp);color:#fff}
.import-drop-s{font:700 12px var(--disp);color:var(--u-faint);margin:2px 0 10px}
#importPick{font-size:14px;padding:9px 20px}
#importStatus{flex:none}
#importStatus:empty{display:none}

/* Load: the saved rosters, and the same rows as Race history */
#savedRosterList{height:100%}
.history-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding-right:2px}
#historyList{height:min(340px,52vh)}
.history-row{--cut:10px;--bg:var(--u-soft);position:relative;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;
  cursor:pointer;flex:none}
.history-row:hover{--bg:var(--u-soft2);--bd:rgba(241,196,15,.45)}
.history-row .h-w{flex:1;min-width:0}
.history-row .h-name{font:900 16px var(--disp);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-row .h-meta{font:700 12px var(--disp);color:var(--u-dim);margin-top:2px}
.history-row .h-time{flex:none;font:800 14px var(--mono);color:var(--amber)}
.history-row .h-x,.history-row .h-edit{--cut:6px;flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--u-dim);font-size:15px}
.history-row .h-x:hover{--bg:var(--danger);color:#fff}
.history-row .h-edit:hover{--bg:var(--amber);color:#2C1F0A}
.history-row .h-name-edit{--cut:6px;--bw:2px;--bd:var(--amber);--bg:rgba(0,0,0,.35);width:100%;outline:none;
  color:#fff;font:900 16px var(--disp);padding:3px 8px}
.history-row.just-saved{--bd:rgba(241,196,15,.6);animation:justSavedPulse 1.4s ease}
@keyframes justSavedPulse{0%{filter:brightness(1.6)}100%{filter:none}}
.just-saved-tag{color:var(--amber);font-weight:900}
.history-empty{margin:auto;padding:28px 12px;text-align:center;font:700 14px/1.55 var(--disp);color:var(--u-faint)}
#savedRosterList > .note{margin:0 0 4px!important}

/* Duck theme */
.tp-list{position:relative;display:flex;flex-direction:column;gap:8px}
.tp-opt{--cut:12px;--bw:2px;--bg:var(--u-soft);position:relative;display:grid;grid-template-columns:68px minmax(0,1fr) 20px;
  align-items:center;gap:12px;padding:6px 14px 6px 6px;color:#fff;cursor:pointer;text-align:left;font:inherit;transition:transform .12s}
.tp-opt:hover{--bg:var(--u-soft2)}
.tp-opt:active{transform:scale(.98)}
.tp-opt:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.tp-opt[aria-checked="true"]{--bd:var(--amber);--bg:rgba(241,196,15,.13)}
.tp-opt .tp-tick{--cut:5px;--bw:2px;--bd:rgba(255,255,255,.35);width:20px;height:20px;justify-self:end;
  display:flex;align-items:center;justify-content:center}
.tp-opt[aria-checked="true"] .tp-tick{--bd:var(--amber);--bg:var(--amber)}
.tp-opt[aria-checked="true"] .tp-tick::after{content:'';width:8px;height:4px;margin-top:-2px;
  border-left:2.5px solid #2C1F0A;border-bottom:2.5px solid #2C1F0A;transform:rotate(-45deg)}
.tp-pics{--cut:8px;--bg:rgba(0,0,0,.28);height:48px;display:flex;align-items:center;justify-content:center}
.tp-pics img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45));transition:transform .2s}
.tp-opt:hover .tp-pics img{transform:translateY(-2px) rotate(-5deg)}
.tp-pics.stack img{width:28px;height:28px}
.tp-pics.stack img + img{margin-left:-12px}
.tp-pics.stack img:nth-child(2){position:relative;z-index:1;width:36px;height:36px}
.tp-pics.empty{border:2px dashed rgba(255,255,255,.22)}
.tp-pics.empty b{font:900 26px/1 var(--disp);color:var(--amber)}
.tp-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.tp-txt b{font:900 16px var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-txt small{font:700 12px var(--disp);color:var(--u-dim);min-height:14px}
.tp-opt[aria-checked="true"] .tp-txt small{color:rgba(255,226,140,.85)}

/* the two calls to action at the foot of the card; on a short screen they
   stay pinned to the bottom edge while the rest scrolls */
.golive{position:sticky;bottom:0;z-index:5;display:flex;gap:14px;align-items:stretch;padding:16px 26px 26px;
  background:linear-gradient(180deg,rgba(14,14,46,0),var(--u-end) 30%)}
#start{flex:1.7;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.start-count-badge{--cut:6px;--bg:rgba(44,31,10,.9);font:900 14px/1.2 var(--mono);color:var(--amber);padding:3px 9px}
/* ROOM, in its own colour so it never reads as a secondary button */
.big.room-cta{--rc:#8E5CF0;--rc-bd:#6A3FD0;--rc-sh:#43258F;flex:1;min-width:0;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 18px;
  background-color:var(--rc-bd);color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.3);filter:drop-shadow(0 5px 0 var(--rc-sh))}
.big.room-cta::before{background-color:var(--rc)}
.big.room-cta:hover{filter:brightness(1.08) drop-shadow(0 7px 0 var(--rc-sh))}
.big.room-cta:active{filter:brightness(.97) drop-shadow(0 2px 0 var(--rc-sh))}
.room-cta svg{flex:none}
.room-cta-t{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.room-cta-t small{font:800 9.5px var(--mono);letter-spacing:.14em;margin-top:4px;opacity:.85}
/* on a phone the button is just "Room", with the live dot right after it */
@media(max-width:860px){
  .room-cta-t small{display:none}
  .room-cta-t{flex-direction:row;align-items:center}
  .room-cta-t::after{content:'';width:8px;height:8px;margin-left:9px;border-radius:50%;background:#4ADE80;flex:none;
    box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:roomLive 1.8s ease-out infinite}
  .big.room-cta::after{display:none}
}
.big.room-cta::after{content:'';position:absolute;top:9px;right:22px;width:8px;height:8px;border-radius:50%;background:#4ADE80;
  box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:roomLive 1.8s ease-out infinite}
@keyframes roomLive{0%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}80%,100%{box-shadow:0 0 0 8px rgba(74,222,128,0)}}

/* one column: Entry and Duck theme become two tabs, so the card stays short */
@media(max-width:860px){
  .cfg-tabs{--cut:12px;--bg:rgba(0,0,0,.32);--bd:var(--u-line);display:flex;gap:4px;padding:4px;margin:16px 16px 0}
  .cfg-tabs button{--cut:9px;flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 10px;
    cursor:pointer;color:var(--u-dim);font:900 14px var(--disp);transition:color .15s}
  .cfg-tabs button:hover{--bg:rgba(255,255,255,.07);color:#fff}
  .cfg-tabs button[aria-selected="true"]{--bg:#fff;color:#1B1A40}
  .cfg-tabs img{width:22px;height:22px;object-fit:contain}
  .cfg-tabs small{font:800 11px var(--disp);opacity:.7;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* a plain underlined tab bar: the Paste / Import / Load switch just below
     keeps the button look, so the two don't read as the same control */
  .cfg-tabs{--bg:transparent;--bd:transparent;clip-path:none;padding:0;gap:0;box-shadow:inset 0 -1px 0 var(--u-line)}
  .cfg-tabs button{--bg:transparent;clip-path:none;padding:12px 8px 13px;box-shadow:none;transition:color .15s,box-shadow .15s}
  .cfg-tabs button:hover{--bg:transparent}
  .cfg-tabs button[aria-selected="true"]{--bg:transparent;color:#fff;box-shadow:inset 0 -3px 0 var(--u-amber)}
  .cfg-tabs button:focus{outline:none}
  .cfg-tabs button:focus-visible{--bg:rgba(255,255,255,.08)}
  /* Duck Theme as tall as Entry was (set by showCfgTab), its list scrolling */
  .cfg[data-tab="theme"] .cfg-theme{height:var(--entry-h,auto);display:flex;flex-direction:column}
  .cfg[data-tab="theme"] .cfg-theme > :not(.tp-list){flex:none}
  .cfg[data-tab="theme"] .cfg-theme .tp-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:4px;
    scrollbar-width:thin;scrollbar-color:rgba(241,196,15,.45) transparent}
  body.room-on .cfg-tabs{display:none}
  .cfg-body{grid-template-columns:1fr;padding:14px 16px 4px}
  .cfg[data-tab="entry"] .cfg-theme,.cfg[data-tab="theme"] .cfg-runners{display:none}
  .cfg-card-hd h3{display:none}
  .cfg-card-hd{min-height:0}
}
@media(max-width:640px){
  #config{padding:6px 10px 12px;align-items:flex-start}
  /* the kicker and the three icons share the top row; the race name gets
     the whole second row */
  .cfg-hd{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 12px;padding:16px 16px 0}
  .cfg-ttl{display:contents}
  .cfg-kicker{grid-row:1;grid-column:1}
  .field-roster-actions{grid-row:1;grid-column:2}
  #raceNameRow{display:none}
  #raceNameLabel{font-size:24px}
  .cfg-tabs{margin:14px 12px 0}
  .cfg-body{padding:12px 12px 4px;gap:12px}
  .cfg-card{padding:14px;--cut:14px}
  .cfg-runners .cfg-card-hd{flex-direction:column;align-items:stretch}
  .cfg-runners #oFieldMode{flex:none}
  .field-icon-btn{width:40px;padding:0}
  .field-icon-btn span{display:none}
  #pasteHost,#importHost,#savedHost{flex-basis:220px}
  /* iOS zooms into any field under 16px when it gets focus */
  #pasteArea,.u-input,#raceNameInput{font-size:16px}
  /* Quick fill: the lightning bolt alone (its name stays for screen readers) */
  .big.quick-fill-btn{padding:10px 13px}
  .big.quick-fill-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .big.quick-fill-btn svg{width:18px;height:18px}
  /* side by side, Continue a little wider */
  .golive{gap:10px;padding:16px 12px max(14px,env(safe-area-inset-bottom))}
  #start{flex:1.35;font-size:17px;padding:12px 10px;gap:7px;white-space:nowrap}
  #start > svg{display:none}
  .big.room-cta{flex:1;font-size:17px;padding:9px 10px;gap:8px}
  .room-cta svg{width:19px;height:19px}
  /* the header stays in view while the card scrolls */
  .cfg-hd{position:sticky;top:0;z-index:6;padding-bottom:12px;margin-bottom:-12px;
    background:linear-gradient(180deg,#221D5E 82%,rgba(34,29,94,0))}
}

/* THE ARCADE BUTTON. A hexagon cut at the top-right and bottom-left corners.
   The button's own background is the border colour; ::before, inset by
   --bw with the same shape, carries the surface, so the border follows the
   cut too. filter:drop-shadow gives the chunky drop (box-shadow would be
   clipped away). */
.big{--chamfer:16px;--bw:3px;position:relative;font-family:var(--disp);font-size:22px;font-weight:900;letter-spacing:.01em;text-transform:uppercase;
  clip-path:polygon(0 0,calc(100% - calc(var(--chamfer) * var(--cut-k))) 0,100% calc(var(--chamfer) * var(--cut-k)),100% 100%,calc(var(--chamfer) * var(--cut-k)) 100%,0 calc(100% - calc(var(--chamfer) * var(--cut-k))));
  padding:14px 30px;background-color:var(--amber-bd);
  color:#2C1F0A;cursor:pointer;
  filter:drop-shadow(0 5px 0 var(--amber-sh));text-shadow:1px 1px 0 rgba(255,255,255,.25);
  transition:filter .12s,transform .12s}
.big::before{content:'';position:absolute;inset:var(--bw);z-index:-1;
  clip-path:polygon(0 0,calc(100% - (calc(var(--chamfer) * var(--cut-k)) - var(--bw))) 0,100% calc(calc(var(--chamfer) * var(--cut-k)) - var(--bw)),
    100% 100%,calc(calc(var(--chamfer) * var(--cut-k)) - var(--bw)) 100%,0 calc(100% - (calc(var(--chamfer) * var(--cut-k)) - var(--bw))));
  background-color:var(--amber);
  background-image:linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 45%,rgba(0,0,0,.1) 100%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 9px,rgba(255,255,255,0) 9px 18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.big:hover{transform:translateY(-2px);
  filter:brightness(1.08) drop-shadow(0 7px 0 var(--amber-sh))}
.big:active{transform:translateY(3px);
  filter:brightness(.97) drop-shadow(0 2px 0 var(--amber-sh))}
.big.ghost{--chamfer:12px;--bw:3px;background-color:rgba(196,178,255,.34);
  clip-path:polygon(0 0,calc(100% - calc(var(--chamfer) * var(--cut-k))) 0,100% calc(var(--chamfer) * var(--cut-k)),100% 100%,calc(var(--chamfer) * var(--cut-k)) 100%,0 calc(100% - calc(var(--chamfer) * var(--cut-k))));
  color:#fff;font-size:17px;padding:10px 20px;
  filter:drop-shadow(0 4px 0 rgba(8,6,30,.6));text-shadow:none}
.big.ghost::before{background-color:rgba(28,24,80,.92);
  background-image:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 45%,rgba(0,0,0,.12) 100%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 9px,rgba(255,255,255,0) 9px 18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.big.ghost:hover{transform:translateY(-2px);filter:drop-shadow(0 6px 0 rgba(8,6,30,.6))}
.big.ghost:hover::before{background-color:rgba(46,40,120,.96)}
.big.ghost:active{transform:translateY(2px);filter:drop-shadow(0 1px 0 rgba(8,6,30,.6))}
.big.ghost:active::before{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
/* the shine sweep, only on the headline calls to action */
#start::after,#isGo::after,#champAgain::after{
  content:'';position:absolute;top:-30%;left:0;width:26%;height:160%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75) 45%,rgba(255,255,255,.75) 55%,transparent);
  transform:translateX(-220%) skewX(-22deg);
  animation:btnMirrorShine 3.4s cubic-bezier(.3,0,.2,1) infinite;
  pointer-events:none}
@keyframes btnMirrorShine{
  0%{transform:translateX(-220%) skewX(-22deg)}
  32%{transform:translateX(480%) skewX(-22deg)}
  100%{transform:translateX(480%) skewX(-22deg)}
}
.note{font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.06em}

/* ─────────── RACE BUG ───────────
   Clock, top three, and the river itself drawn flat: the strip IS the course,
   left to right, with every runner on it. On a straight river that map is the
   honest picture of the race, so it replaces the progress bar entirely. */
/* The race HUD changes a few times a second: each panel is its own
   compositor layer with contained layout and paint, so a new number only
   repaints that panel, and no filter has to be recomputed over it. */
#bug,#ladder,#raceCtl{will-change:transform;contain:layout paint}
#bug{--cut:14px;--bg:var(--u-hud);--bd:var(--u-edge);position:fixed;top:max(12px,env(safe-area-inset-top));left:50%;
  transform:translateX(-50%);z-index:10;width:min(470px,92vw);overflow:hidden;transition:top .3s ease}
#bug::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--amber),#FF9A3D)}
#bug.cine{top:calc(max(12px,env(safe-area-inset-top)) + 7.5vh)}
.bg-hd{display:flex;align-items:stretch;border-bottom:1px solid var(--u-line)}
.bg-clk{display:flex;align-items:center;gap:8px;padding:0 14px;min-height:40px;font:800 18px var(--mono);color:#fff;
  font-variant-numeric:tabular-nums;background:rgba(0,0,0,.22);border-right:1px solid var(--u-line)}
.bg-ttl{display:flex;align-items:center;padding:0 14px;flex:1;font:900 12px var(--disp);letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);white-space:nowrap;overflow:hidden;position:relative}
/* a new leader: the text alone pulses bright three times (no background
   flashing behind it, which pulled the eye off the race) */
.bg-ttl.flash{animation:leadFlash 1.4s ease-out}
@keyframes leadFlash{
  0%,30%,60%{color:#FFF6C8;text-shadow:0 0 6px rgba(255,214,10,.95),0 0 16px rgba(241,196,15,.8)}
  15%,45%{color:var(--amber);text-shadow:none}
  100%{color:var(--amber);text-shadow:none}}
@media(prefers-reduced-motion:reduce){.bg-ttl.flash{animation:leadFlashCalm 1.4s ease-out}}
@keyframes leadFlashCalm{0%,60%{color:#fff}100%{color:var(--amber)}}
.bg-togo{display:flex;align-items:center;padding:0 14px;border-left:1px solid var(--u-line);
  font:700 11px var(--mono);color:var(--u-dim);white-space:nowrap}
#mini{display:block;width:100%;height:52px}

/* ─────────── THE LADDER ───────────
   Every runner, all the time. A race where you can only see the top three is
   a race for three people; the point of a duck race is that four hundred
   strangers each own one of them. Rows are ordered with flex `order` rather
   than by moving nodes, so a place change costs nothing. */
/* the ladder and the race controls under it, as one column on the right */
#hudR{position:fixed;right:calc(var(--adR) + max(10px,env(safe-area-inset-right)));top:50%;transform:translateY(-50%);
  z-index:11;width:200px;display:flex;flex-direction:column;gap:8px;pointer-events:none;transition:top .3s ease,bottom .3s ease}
#hudR>*{pointer-events:auto}
#hudR>.off{pointer-events:none}
#ladder{position:relative;overflow:hidden;
  --ldHd:24px;--ldRow:24px;
  /* MINIMAL: a quiet dark sheet with a hairline edge — no glows, badges or
     gradients. Rank, a colour tick, the name and the gap are all it says.
     (No backdrop-filter: over the live 3D canvas a blur would have to be
     recomputed every frame.) */
  --cut:12px;--bg:rgba(18,16,54,.86);--bd:var(--u-edge);
  transition:top .3s ease,bottom .3s ease}
.ld-hd{position:absolute;left:0;right:0;top:0;height:var(--ldHd);box-sizing:border-box;
  display:flex;align-items:center;gap:7px;padding:0 12px;
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--u-dim);border-bottom:1px solid var(--u-line)}
.ld-hd i{width:6px;height:6px;border-radius:50%;background:#FF5A5A;flex:none;animation:ldLive 1.6s ease-in-out infinite}
.ld-hd span{flex:1;white-space:nowrap;overflow:hidden;color:rgba(233,242,240,.78)}
.ld-hd u{text-decoration:none;letter-spacing:.06em;white-space:nowrap}
/* opacity only: the compositor runs it without repainting the panel */
@keyframes ldLive{0%,100%{opacity:1}50%{opacity:.3}}
/* Rows are absolutely positioned and moved with transform (animatable), so
   a place change is seen as a slide; both sit below the header. */
.ld-more{position:absolute;left:0;right:0;top:var(--ldHd);height:var(--ldRow);box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  transition:transform .38s cubic-bezier(.22,.8,.32,1)}
.ld{position:absolute;left:0;right:0;top:var(--ldHd);height:var(--ldRow);box-sizing:border-box;overflow:hidden;contain:layout style paint;
  display:flex;align-items:center;gap:8px;padding:0 12px 0 10px;cursor:pointer;
  transition:background .2s ease,transform .38s cubic-bezier(.22,.8,.32,1)}
/* the gap to the leader, as a hairline under the row in the runner's
   colour: full width for the leader, shrinking as they fall away.
   No transition — see the note in updateLadder's history: animated, ten of
   these kept the panel repainting every frame. */
.ld em,.ld b,.ld s,.ld q{position:relative;z-index:1}
.ld:hover{background:rgba(255,255,255,.05)}
.ld em{font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:700;width:18px;text-align:right;
  flex:none;color:rgba(233,242,240,.45);font-variant-numeric:tabular-nums}
/* the runner's colour, as a small upright tick */
.ld q{width:3px;height:12px;border-radius:2px;flex:none;background:var(--c,#F1C40F);quotes:none}
.ld q::before,.ld q::after{content:none}
.ld b{font-family:var(--disp);font-size:13.5px;font-weight:800;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(233,242,240,.92)}
.ld s{text-decoration:none;font-family:var(--mono);font-size:10px;color:rgba(233,242,240,.45);flex:none;
  font-variant-numeric:tabular-nums}
/* podium: the numbers take the medal colours; the leader's row stands out:
   taller, lit gold with a gold edge, its place in a gold badge, the name
   larger, and its metres to go in amber */
.ld.rk1 em{color:#FFC94A}.ld.rk2 em{color:#D4DCE4}.ld.rk3 em{color:#E0955A}
.ld.p1{background:linear-gradient(90deg,rgba(255,201,74,.34),rgba(255,201,74,.12) 62%,rgba(255,201,74,.05));
  height:calc(var(--ldRow) + 6px);box-shadow:inset 3px 0 0 #FFC94A}
.ld.rk1 em{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;background:#FFC94A;color:#2C1F0A;font-weight:800}
.ld.rk1 b{color:#FFFFFF;font-size:15px;font-weight:900;text-shadow:0 0 12px rgba(255,201,74,.5)}
.ld.rk1 s{color:#FFD84A;font-weight:700}
.ld.foc{background:rgba(79,208,232,.14);box-shadow:inset 2px 0 0 var(--river)}
.ld.foc b{color:var(--river)}
.ld.home s{color:var(--amber)}
.ld.home s::before{content:'\2713\00a0'}
.ld-fx{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:0}
.ld-fx.up{background:linear-gradient(90deg,rgba(74,222,128,.22),transparent 70%)}
.ld-fx.dn{background:linear-gradient(90deg,rgba(248,90,90,.18),transparent 70%)}
@media(max-width:900px){.ld b{font-size:12.5px}.ld.rk1 b{font-size:13.5px}}
@media(max-width:640px){#hudR{width:136px}#ladder{--ldHd:20px;--ldRow:20px;--cut:9px}
  .ld.rk1 em{width:15px;height:15px;font-size:9px}
  .ld{padding:0 8px 0 6px;gap:5px}
  .ld-hd{font-size:8px;letter-spacing:.12em;padding:0 8px;gap:5px}.ld-hd u{display:none}
  .ld em{width:14px;font-size:9px}.ld q{height:10px}
  .ld b{font-size:11px}.ld.rk1 b{font-size:11.5px}.ld s{display:none}}


/* ─────────── RACE CONTROLS ───────────
   Every keyboard shortcut as a button, for touch screens; wired to the
   same ACTS map the keys use. */
#raceCtl{--cut:12px;--bg:var(--u-hud);--bd:var(--u-edge);position:relative;display:flex;align-items:stretch;overflow:hidden}
#raceCtl button{flex:1 1 0;min-width:0;height:46px;display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:0;cursor:pointer;color:#fff;font:800 17px/1 var(--disp);
  -webkit-tap-highlight-color:transparent;transition:background .15s}
#raceCtl button:hover{background:rgba(255,255,255,.07)}
#raceCtl button+button{border-left:1px solid var(--u-line)}
#raceCtl button:active{background:rgba(241,196,15,.2)}
#raceCtl button.rc-on{color:var(--amber)}
#raceCtl button[disabled]{opacity:.28;pointer-events:none}
#raceCtl button .rc-lbl{font:800 9px var(--disp);letter-spacing:.04em;white-space:nowrap;overflow:hidden;max-width:100%;color:var(--u-dim)}
#volumePopup{--cut:12px;--bg:var(--u-hud);--bd:var(--u-edge);position:fixed;z-index:20;display:flex;flex-direction:column;
  align-items:center;gap:10px;padding:16px 12px;filter:drop-shadow(0 10px 24px rgba(3,2,20,.5));
  opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .15s ease,transform .15s ease}
#volumePopup.on{opacity:1;pointer-events:auto;transform:translateY(0)}
#volumeSliderWrap{width:28px;height:100px;display:flex;align-items:center;justify-content:center;overflow:hidden}
#volumeSlider{width:100px;height:28px;transform:rotate(-90deg);accent-color:var(--amber);cursor:pointer;margin:0}
#volumeMuteBtn,#musicBtn{--cut:7px;--bg:var(--u-soft2);width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;
  color:#fff;cursor:pointer;transition:color .15s}
#volumeMuteBtn:hover,#musicBtn:hover{--bg:var(--u-soft3);color:var(--amber)}
#volumeMuteBtn.rc-on,#musicBtn.rc-on{--bg:rgba(231,76,60,.25);color:#FF8F84}
@media(max-width:640px){#raceCtl button{height:44px}
  #raceCtl button .rc-lbl{font-size:8px}}
@media(max-width:380px){#raceCtl button .rc-lbl{display:none}}

#cine{position:fixed;inset:0;pointer-events:none;z-index:7}
#cine i{position:absolute;left:0;right:0;height:7.5vh;background:#06051A;display:block;
  border-color:rgba(196,178,255,.14);border-style:solid;border-width:0}
#cine i:first-child{top:0;border-bottom-width:1px}
#cine i:last-child{bottom:0;border-top-width:1px}

#count{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:9;pointer-events:none}
/* Same "Barlow Condensed, Impact" fallback the canvas-drawn medal numerals
   use — neither is a loaded webfont, so on most systems this is really
   Impact doing the work, which is what gave this its condensed, sporty
   scoreboard read in the first place. A brief detour through Nunito was
   tried instead and reverted — it lost that read entirely. font-weight
   700 (down from 900) and a lighter glow are the actual levers here: they
   don't change Impact's own single fixed weight, but they do keep it from
   reading as heavier than it needs to, and cover systems where the chain
   falls through to Barlow Condensed itself, which does have real weights. */
#count span{font-family:'Barlow Condensed',Impact,var(--disp),sans-serif;
  font-size:min(21vw,210px);font-weight:700;line-height:.8;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--ink);opacity:0;text-align:center;
  text-shadow:0 4px 30px rgba(3,6,10,.85),0 0 70px rgba(3,6,10,.75)}
#count.go span{animation:cbeat var(--cd,.7s) cubic-bezier(.15,1.3,.3,1) forwards}
@keyframes cbeat{0%{transform:scale(1.55);opacity:0}16%{transform:scale(1);opacity:1}
  76%{transform:scale(1);opacity:1}100%{transform:scale(.92);opacity:0}}
@media(prefers-reduced-motion:reduce){#count.go span{animation-duration:.01s;opacity:1}}

#announce{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:6;pointer-events:none;opacity:0;visibility:hidden}
#announce.on{opacity:1;visibility:visible}
.an{display:flex;flex-direction:column;align-items:center;gap:min(1.6vw,16px);
  padding:min(3vw,32px) min(6vw,70px);
  background:linear-gradient(180deg,rgba(14,12,46,0),rgba(14,12,46,.86),rgba(14,12,46,0));
  transform:scale(.94);opacity:0}
#announce.go .an{animation:anIn 2.1s cubic-bezier(.16,1,.3,1) forwards}
@keyframes anIn{0%{transform:scale(.94) translateY(14px);opacity:0}
  12%{transform:none;opacity:1}78%{transform:none;opacity:1}100%{transform:scale(1.03);opacity:0}}
.an-rule{width:min(34vw,340px);height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--amber),transparent)}
.an-t{font-size:min(9vw,96px);font-weight:900;line-height:.9;letter-spacing:-.02em;
  text-transform:uppercase;text-align:center;
  text-shadow:0 0 44px rgba(255,201,74,.30),0 10px 30px rgba(0,0,0,.85)}
.an-s{font:900 min(1.5vw,13px) var(--mono);letter-spacing:.4em;text-transform:uppercase;color:var(--u-dim);text-align:center}

#paused{display:flex;align-items:center;justify-content:center;padding:20px;z-index:20;
  background:rgba(6,5,24,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pz{--cut:24px;--bg:var(--u-panel);--bd:var(--u-edge);display:flex;flex-direction:column;align-items:center;text-align:center;
  width:min(380px,100%);padding:34px 28px 28px}
.pz-bars{display:flex;gap:9px;margin-bottom:20px}
.pz-bars i{display:block;width:14px;height:46px;background:var(--amber);clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px))}
.pz-k{font:800 12px var(--mono);letter-spacing:.4em;text-transform:uppercase;color:var(--amber)}
.pz-sc{font-size:clamp(30px,7vw,52px);font-weight:900;line-height:1;margin-top:12px;text-transform:uppercase}
.pz-t{font:700 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--u-dim);margin-top:10px}
.pz .big{margin-top:28px}
.pz-hint{font:700 11px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--u-faint);margin-top:14px}

/* Set The Race's loading screen: the same bar and photo as the first load,
   opaque so the world rebuild behind it never shows, and switched on
   instantly (no fade) because the rebuild blocks the main thread. */

#setupLoading.off,#setupLoading.on{transition:none}

/* the start line: centred on a wide screen, at the bottom on a phone */
#introStart{display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 55% 60% at 50% 50%,rgba(14,12,46,.55),rgba(14,12,46,.26) 60%,rgba(14,12,46,.1))}
@media(max-width:700px){
  #introStart{justify-content:flex-end;
    background:linear-gradient(0deg,rgba(14,12,46,.66) 0%,rgba(14,12,46,.3) 45%,rgba(14,12,46,.04) 75%);
    padding-bottom:calc(var(--adB) + max(28px,env(safe-area-inset-bottom) + 14px))}
}
#isGo{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:19px;padding:16px 56px;pointer-events:auto;
  box-shadow:0 6px 0 var(--amber-sh),0 16px 40px rgba(241,196,15,.35),0 8px 20px rgba(0,0,0,.4)}
#isGo:hover{box-shadow:0 8px 0 var(--amber-sh),0 18px 46px rgba(241,196,15,.4),0 8px 20px rgba(0,0,0,.4)}
#isGo:active{box-shadow:0 2px 0 var(--amber-sh),0 10px 30px rgba(241,196,15,.3),0 6px 16px rgba(0,0,0,.4)}
.is-hint{font:700 11px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:rgba(236,234,255,.7);margin-top:16px;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.is-acts{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;justify-content:center;max-width:340px}
#isShuffle,#isBackToSetup{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13px;padding:9px 16px}


#isShuffle.is-busy{opacity:.6;cursor:wait}

/* ─────────── WINNER ─────────── */
#champ{display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto;z-index:16;
  background:radial-gradient(ellipse at 50% 42%,rgba(14,12,46,.05) 0%,rgba(10,8,34,.22) 46%,rgba(6,5,24,.46) 100%)}
.ch{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  animation:chIn .78s cubic-bezier(.16,1,.3,1) both}
@keyframes chIn{0%{transform:translateY(30px) scale(.92);opacity:0}100%{transform:none;opacity:1}}
/* the wordmark drops in above the card */
.ch-logo{width:min(512px,73.6vw);height:auto;display:block;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.7)) drop-shadow(0 0 34px rgba(255,201,74,.4));
  animation:chDrop .9s cubic-bezier(.2,1.7,.4,1) .1s both;margin-bottom:14px;position:relative;z-index:2;will-change:transform}
@keyframes chDrop{0%{transform:translateY(-40px) scale(.4) rotate(-14deg);opacity:0}
  58%{transform:translateY(7px) scale(1.13) rotate(3deg);opacity:1}100%{transform:none;opacity:1}}
.ch-frame{--cut:30px;--bw:2px;--bd:rgba(255,201,74,.6);
  --bg:radial-gradient(120% 70% at 50% 0%,rgba(255,201,74,.16),transparent 60%),linear-gradient(180deg,rgba(36,30,98,.82),rgba(14,14,46,.88));
  width:min(640px,92vw);display:flex;flex-direction:column;align-items:center;position:relative;
  padding:clamp(34px,4.6vw,54px) clamp(30px,6.4vw,78px) clamp(22px,3.2vw,34px);
  backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15)}
.ch-disc{position:relative;width:clamp(150px,23vw,215px);aspect-ratio:1;border-radius:50%;
  overflow:hidden;background:rgba(14,12,46,.55);border:4px solid rgba(255,246,216,.95);
  /* no blur of its own: the card around it already blurs the scene, and a
     second backdrop blur nested inside the first was paid again every frame */
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 8px rgba(255,201,74,.18),0 14px 42px rgba(0,0,0,.65),0 0 70px rgba(255,201,74,.35)}
/* the disc pops in with its glow; the glow breathes by fading a ring of its
   own in and out (opacity runs on the GPU). It used to animate the disc's
   own large blurred box-shadow, repainted every frame under two backdrop
   blurs, which was enough to drop frames on a laptop. */
.ch-disc-wrap{position:relative;animation:chPop .62s cubic-bezier(.2,1.5,.4,1) .06s both}
.ch-glow{position:absolute;inset:0;border-radius:50%;pointer-events:none;will-change:opacity;opacity:0;
  box-shadow:0 0 0 15px rgba(255,201,74,.2),0 0 100px rgba(255,201,74,.4);animation:chRing 2.2s ease-in-out infinite}
@keyframes chPop{0%{transform:scale(.42);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes chRing{0%,100%{opacity:0}50%{opacity:1}}
.ch-disc svg,.ch-disc canvas{width:100%;height:100%;display:block}
.ch-shine{position:absolute;top:0;left:-150%;width:56%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.85),transparent);
  transform:skewX(-20deg);animation:chShine 3s ease-in-out .6s infinite}
@keyframes chShine{0%{left:-150%}38%{left:170%}100%{left:170%}}
.ch-k{font:800 16px var(--mono);letter-spacing:.44em;text-transform:uppercase;color:var(--amber);margin-top:22px}
.ch-nm{font-size:clamp(40px,8.4vw,80px);font-weight:900;line-height:.94;letter-spacing:-.03em;
  text-transform:uppercase;margin-top:8px;
  text-shadow:0 0 44px rgba(255,201,74,.38),0 8px 26px rgba(0,0,0,.8)}
.ch-msg{max-width:min(520px,80vw);margin:16px 0 0;font:800 clamp(16px,2.2vw,21px)/1.4 var(--disp);color:#FFE9A8;text-align:center;
  overflow-wrap:anywhere;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.ch-msg[hidden]{display:none}
.ch-line{width:min(30vw,260px);height:1px;margin-top:18px;
  background:linear-gradient(90deg,transparent,rgba(255,201,74,.75),transparent)}
.ch-sc{font:800 clamp(18px,3.4vw,28px) var(--mono);letter-spacing:.1em;color:#fff;opacity:.92;margin-top:14px}
/* Race again, then Setup / Share / Result */
.ch-acts{width:min(640px,92vw);margin-top:28px;display:flex;flex-direction:column;gap:10px}
.ch-acts #champAgain{width:100%;font-size:17px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.ch-acts-row2{display:flex;flex-wrap:wrap;gap:10px}
.ch-acts-row2 button{flex:1 0 auto;font-size:11px;padding:10px;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:7px}
@media(prefers-reduced-motion:reduce){
  .ch,.ch-disc,.ch-disc-wrap,.ch-glow{animation:none}.ch-shine{display:none}}

/* ── modals: a centred card on a wide screen, a bottom sheet on a phone ── */
.modal{display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto;z-index:17;
  background:rgba(6,5,24,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#settingInfoPanel{z-index:21}
.m-card{--cut:24px;--bg:var(--u-panel);--bd:var(--u-edge);position:relative;width:min(560px,100%);max-height:calc(100dvh - 40px);
  overflow-y:auto;margin:auto;padding:24px 26px 26px;color:#fff;
  transform:translateY(14px) scale(.97);transition:transform .34s cubic-bezier(.2,.9,.3,1.15)}
.modal.on .m-card{transform:none}
.m-card.sm{width:min(430px,100%)}
.m-card.lg{width:min(820px,100%)}
.m-hd{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.m-title{font:900 24px/1.15 var(--disp);color:#fff}
.m-x{--cut:9px;--bg:var(--u-soft2);flex:none;width:40px;height:40px;cursor:pointer;color:#fff;
  display:flex;align-items:center;justify-content:center;transition:transform .15s}
.m-x svg{width:12px;height:16px}
.m-x:hover{--bg:var(--danger);transform:translateY(-1px)}
.m-sub,.m-text{margin:0 0 16px;font:600 14px/1.55 var(--disp);color:var(--u-dim)}
.m-note{font:600 12.5px/1.55 var(--disp);color:var(--u-faint)}
.m-actions{display:flex;gap:10px;margin-top:20px}
.m-actions > .big{flex:1;min-width:0;font-size:16px;padding:12px 14px}
/* confirm dialogs: an icon, a question, two answers */
.m-confirm{text-align:center}
.m-ico{--cut:14px;--bw:2px;--bd:rgba(241,196,15,.45);--bg:rgba(241,196,15,.14);width:64px;height:64px;margin:2px auto 14px;
  display:flex;align-items:center;justify-content:center;color:var(--amber)}
.m-ico.warn{--bd:rgba(231,76,60,.5);--bg:rgba(231,76,60,.16);color:#FF8F84}
.m-confirm .m-title{font-size:22px;margin-bottom:8px}
.m-confirm .m-text{margin-bottom:0}
.m-confirm .u-input{margin-top:14px}

/* form bits */
.u-input{--cut:10px;--bw:2px;--bd:var(--u-line);--bg:rgba(0,0,0,.32);width:100%;height:50px;outline:none;
  color:#fff;font:800 16px var(--disp);padding:0 14px}
.u-input::placeholder{color:var(--u-faint)}
.u-input:focus{--bd:var(--amber)}
.u-row{display:flex;gap:10px}
.u-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.u-field.grow{flex:1}
.u-label{font:800 11px var(--disp);letter-spacing:.1em;text-transform:uppercase;color:var(--u-dim)}
.u-wrap{position:relative}
.u-wrap .u-input{padding-right:48px}
.u-wrap .paste-clear{top:50%;transform:translateY(-50%)}
.u-search{position:relative;display:block;margin-bottom:16px}
.u-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--u-faint);pointer-events:none}
.u-search .u-input{padding-left:42px}

/* Quick fill */
.qa-num{width:110px}
.qa-chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px}
.qa-chip{--cut:7px;--bg:var(--u-soft2);min-width:52px;padding:8px 14px;cursor:pointer;color:#fff;font:800 14px var(--mono);
  transition:transform .12s}
.qa-chip:hover{--bg:var(--u-soft3);transform:translateY(-1px)}
.qa-chip.active{--bg:var(--amber);color:#2C1F0A}
#qaGo,#rosterSaveConfirm{width:100%;font-size:18px;padding:13px}

/* Settings */
.settings-card{display:flex;flex-direction:column;overflow:hidden;padding:0}
.settings-card .m-hd{padding:24px 26px 0;margin-bottom:16px}
/* Reset to defaults, beside the close button */
.set-reset{--cut:9px;--bg:rgba(255,255,255,.08);--bd:rgba(255,255,255,.14);margin-left:auto;height:40px;padding:0 14px;display:flex;align-items:center;gap:8px;
  cursor:pointer;color:rgba(226,224,255,.85);font:800 13px var(--disp);white-space:nowrap;transition:transform .15s}
.set-reset svg{color:#FF9C92;flex:none}
.set-reset:hover{--bg:rgba(231,76,60,.2);--bd:rgba(231,76,60,.55);color:#fff;transform:translateY(-1px)}
@media(max-width:420px){.set-reset span{display:none}.set-reset{width:40px;padding:0;justify-content:center}}
/* Settings: a tab per section, only that section below */
.set-tabs{--cut:12px;--bg:rgba(0,0,0,.28);--bd:var(--u-line);display:flex;gap:4px;padding:4px;margin:0 26px 14px;flex:none}
.set-tabs button{--cut:9px;--bg:transparent;flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 8px;
  border:0;cursor:pointer;color:var(--u-dim);font:800 14px var(--disp);white-space:nowrap}
.set-tabs button span{overflow:hidden;text-overflow:ellipsis}
.set-tabs button:hover{--bg:rgba(255,255,255,.07);color:#fff}
.set-tabs button[aria-selected="true"]{--bg:#fff;color:#1B1A33}
.set-tabs button[aria-selected="true"] svg{color:#C98E00}
.settings-bd > .grp[hidden]{display:none}
/* with tabs, a section's own fold header is not needed */
.settings-bd > .grp > .grp-t{display:none}
.settings-bd > .grp.shut .opts,.settings-bd > .grp.shut .keys,.settings-bd > .grp.shut .grp-h{display:revert}
/* on a phone the tabs are their icons alone (the name is still read out) */
@media(max-width:640px){.set-tabs{margin:0 14px 12px}
  .set-tabs button{flex:1 1 0;padding:11px 6px}
  .set-tabs button svg{width:20px;height:20px}
  .set-tabs button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* Time of day: three pictures of the river */
.opt:has(> #oEnv){grid-column:1/-1}
#oEnv.env-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0;--bg:transparent;--bd:transparent;clip-path:none;box-shadow:none}
#oEnv.env-pick button{--cut:12px;--bg:rgba(0,0,0,.32);--bd:var(--u-line);display:flex;flex-direction:column;padding:0;overflow:hidden;
  transition:transform .15s,color .15s}
#oEnv.env-pick button:hover{--bd:rgba(255,255,255,.4);transform:translateY(-2px)}
#oEnv.env-pick img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;opacity:.82;transition:opacity .15s}
#oEnv.env-pick button:hover img,#oEnv.env-pick button[aria-pressed="true"] img{opacity:1}
#oEnv.env-pick span{padding:9px 6px 10px;font:900 14px var(--disp);text-align:center}
#oEnv.env-pick button[aria-pressed="true"]{--bg:rgba(241,196,15,.16);--bd:var(--u-amber);--bw:2px;color:#fff}
#oEnv.env-pick button[aria-pressed="true"] span{color:#FFD84A}
@media(max-width:640px){#oEnv.env-pick{gap:8px}#oEnv.env-pick span{font-size:12.5px;padding:7px 4px 8px}}
.settings-bd{flex:1;min-height:0;overflow-y:auto;padding:0 26px 26px;display:flex;flex-direction:column;gap:12px}
.grp{--cut:16px;--bg:var(--u-well);--bd:var(--u-line);padding:14px 16px}
.grp-t{margin:0 0 14px}
.grp-b{display:flex;align-items:center;gap:10px;width:100%;padding:2px 0;border:0;background:none;cursor:pointer;
  color:#fff;font:900 17px var(--disp);text-align:left}
.grp-b:hover{color:var(--amber)}
.grp-num{--cut:5px;--bg:var(--amber);font:800 11px var(--mono);color:#2C1F0A;padding:3px 7px}
.grp-b .chev{width:9px;height:9px;margin-left:auto;flex:none;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s}
.grp.shut .grp-b .chev{transform:rotate(-45deg)}
.grp.shut .grp-t{margin-bottom:0}
.grp.shut .opts,.grp.shut .keys,.grp.shut .grp-h{display:none}
.grp-h{margin:12px 0 0;font:600 12.5px/1.5 var(--disp);color:var(--u-faint)}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.opt-wide{grid-column:1/-1}
.wm-row{display:flex;gap:8px}
.wm-row .u-input{flex:1;min-width:0;height:46px;padding:0 14px;font:700 15px var(--disp)}
.wm-name{--cut:8px;--bg:rgba(255,255,255,.1);flex:none;height:46px;padding:0 14px;border:0;cursor:pointer;color:var(--amber);font:800 13px var(--mono)}
.wm-name:hover{--bg:rgba(255,255,255,.18)}
.wm-def{color:#fff;font:800 13px var(--disp)}
.wm-hint{display:block;margin-top:8px;font:600 12.5px/1.45 var(--disp);color:var(--u-faint)}
.wm-prev{--cut:18px;--bw:2px;--bd:rgba(255,201,74,.6);display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:14px;padding:20px 16px 18px;text-align:center;
  --bg:radial-gradient(120% 70% at 50% 0%,rgba(255,201,74,.16),transparent 60%),linear-gradient(180deg,rgba(36,30,98,.92),rgba(14,14,46,.96))}
.wm-prev-disc{width:108px;height:108px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:4px;
  background:radial-gradient(circle at 50% 40%,#2C2470,#120F3A 70%);box-shadow:0 0 0 4px rgba(255,201,74,.55),0 0 28px rgba(255,201,74,.35)}
.wm-prev-disc img{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
.wm-prev-line{display:block;width:min(200px,60%);height:1px;margin-top:6px;background:linear-gradient(90deg,transparent,rgba(255,201,74,.7),transparent)}
.wm-prev-sc{font:800 14px var(--mono);letter-spacing:.1em;color:#fff;opacity:.9}
.wm-prev-wrap{position:relative}
.wm-nav{position:absolute;top:50%;width:38px;height:38px;margin-top:-12px;border:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:rgba(10,8,34,.72);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 4px 12px rgba(0,0,0,.35);transition:transform .12s,background .15s}
.wm-nav:hover{background:rgba(10,8,34,.92);transform:scale(1.08)}
.wm-nav:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.wm-nav.prev{left:10px}.wm-nav.next{right:10px}
.wm-style{position:absolute;left:12px;top:24px;display:flex;gap:8px;padding:4px 9px;border-radius:6px;background:rgba(10,8,34,.72);color:#fff;font:800 11px var(--mono);letter-spacing:.06em}
.wm-style b{color:var(--amber);font-weight:800}
/* THE WINNER'S CARD, THREE LOOKS: the same parts dressed differently, on
   the winner's screen (#champ[data-style]) and in the preview (.wm-prev).
   0 Classic: midnight and gold. 1 Party: pink to violet with confetti.
   2 Champion: cream and gold, dark lettering. */
#champ[data-style="1"] .ch-frame,.wm-prev[data-style="1"]{--bd:rgba(255,255,255,.75);
  --bg:radial-gradient(circle at 18% 24%,rgba(255,216,74,.7) 0 3px,transparent 4px) 0 0/92px 92px,radial-gradient(circle at 64% 58%,rgba(92,240,160,.6) 0 2.5px,transparent 3.5px) 0 0/74px 74px,
    radial-gradient(circle at 38% 82%,rgba(255,255,255,.55) 0 2.5px,transparent 3.5px) 0 0/116px 116px,radial-gradient(circle at 82% 12%,rgba(127,211,255,.6) 0 2.5px,transparent 3.5px) 0 0/128px 128px,
    linear-gradient(160deg,rgba(255,79,163,.92),rgba(142,92,240,.92) 55%,rgba(74,43,216,.94))}
#champ[data-style="1"] .ch-k,.wm-prev[data-style="1"] .wm-prev-k{color:#fff}
#champ[data-style="1"] .ch-nm,.wm-prev[data-style="1"] .wm-prev-nm{color:#fff;text-shadow:0 0 30px rgba(255,120,200,.6),0 6px 18px rgba(60,0,60,.5)}
#champ[data-style="1"] .ch-msg,.wm-prev[data-style="1"] .wm-prev-msg{display:inline-block;padding:8px 18px;border-radius:999px;background:#fff;color:#5A1E8C;text-shadow:none}
.wm-prev[data-style="1"] .wm-prev-msg.empty{color:#8C6AAE}
#champ[data-style="1"] .ch-msg[hidden]{display:none}
#champ[data-style="1"] .ch-line,.wm-prev[data-style="1"] .wm-prev-line{background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent)}
#champ[data-style="1"] .ch-disc{border-color:#fff;box-shadow:0 0 0 8px rgba(255,255,255,.25),0 14px 42px rgba(60,0,80,.55),0 0 70px rgba(255,120,200,.45)}
.wm-prev[data-style="1"] .wm-prev-disc{box-shadow:0 0 0 4px #fff,0 0 28px rgba(255,120,200,.55)}
#champ[data-style="2"] .ch-frame,.wm-prev[data-style="2"]{--bd:#C9971C;
  --bg:radial-gradient(120% 60% at 50% 0%,rgba(255,255,255,.9),transparent 60%),linear-gradient(180deg,rgba(255,252,240,.97),rgba(244,226,170,.97))}
#champ[data-style="2"] .ch-k,.wm-prev[data-style="2"] .wm-prev-k{color:#A06A00}
#champ[data-style="2"] .ch-nm,.wm-prev[data-style="2"] .wm-prev-nm{color:#2C1F0A;text-shadow:0 2px 0 rgba(255,255,255,.7)}
#champ[data-style="2"] .ch-msg,.wm-prev[data-style="2"] .wm-prev-msg{color:#6A4300;text-shadow:none}
.wm-prev[data-style="2"] .wm-prev-msg.empty{color:#A08A60}
#champ[data-style="2"] .ch-sc,.wm-prev[data-style="2"] .wm-prev-sc{color:#2C1F0A}
#champ[data-style="2"] .ch-line,.wm-prev[data-style="2"] .wm-prev-line{background:linear-gradient(90deg,transparent,#C9971C,transparent)}
#champ[data-style="2"] .ch-disc{border-color:#C9971C;box-shadow:0 0 0 8px rgba(201,151,28,.25),0 14px 42px rgba(0,0,0,.45)}
.wm-prev[data-style="2"] .wm-prev-disc{box-shadow:0 0 0 4px #C9971C,0 0 24px rgba(201,151,28,.4)}
/* the five further looks: a frame colour, a background, the kicker, the name, the message, the line */
#champ[data-style="3"] .ch-frame,.wm-prev[data-style="3"]{--bd:rgba(150,230,255,.7);--bg:radial-gradient(circle at 20% 80%,rgba(255,255,255,.18) 0 3px,transparent 4px) 0 0/40px 40px,radial-gradient(120% 70% at 50% 0%,rgba(120,230,255,.3),transparent 60%),linear-gradient(180deg,rgba(14,96,150,.94),rgba(6,40,80,.96))}
#champ[data-style="3"] .ch-k,.wm-prev[data-style="3"] .wm-prev-k{color:#BFF2FF}
#champ[data-style="3"] .ch-nm,.wm-prev[data-style="3"] .wm-prev-nm{color:#fff;text-shadow:0 0 28px rgba(150,230,255,.85),0 6px 18px rgba(0,0,0,.5)}
#champ[data-style="3"] .ch-msg,.wm-prev[data-style="3"] .wm-prev-msg{color:#E3FAFF}
#champ[data-style="3"] .ch-line,.wm-prev[data-style="3"] .wm-prev-line{background:linear-gradient(90deg,transparent,rgba(150,230,255,.85),transparent)}
#champ[data-style="3"] .ch-disc{border-color:rgba(150,230,255,.7);box-shadow:0 0 0 8px rgba(255,255,255,.12),0 14px 42px rgba(0,0,0,.55),0 0 70px rgba(150,230,255,.85)}
.wm-prev[data-style="3"] .wm-prev-disc{box-shadow:0 0 0 4px rgba(150,230,255,.7),0 0 26px rgba(150,230,255,.85)}
#champ[data-style="4"] .ch-frame,.wm-prev[data-style="4"]{--bd:rgba(255,200,140,.75);--bg:radial-gradient(120% 70% at 50% 100%,rgba(255,200,90,.35),transparent 60%),linear-gradient(180deg,rgba(120,40,110,.94),rgba(220,90,70,.95) 70%,rgba(245,150,70,.96))}
#champ[data-style="4"] .ch-k,.wm-prev[data-style="4"] .wm-prev-k{color:#FFE2A8}
#champ[data-style="4"] .ch-nm,.wm-prev[data-style="4"] .wm-prev-nm{color:#fff;text-shadow:0 0 28px rgba(255,220,160,.85),0 6px 18px rgba(0,0,0,.5)}
#champ[data-style="4"] .ch-msg,.wm-prev[data-style="4"] .wm-prev-msg{color:#FFF1D6}
#champ[data-style="4"] .ch-line,.wm-prev[data-style="4"] .wm-prev-line{background:linear-gradient(90deg,transparent,rgba(255,220,160,.85),transparent)}
#champ[data-style="4"] .ch-disc{border-color:rgba(255,200,140,.75);box-shadow:0 0 0 8px rgba(255,255,255,.12),0 14px 42px rgba(0,0,0,.55),0 0 70px rgba(255,220,160,.85)}
.wm-prev[data-style="4"] .wm-prev-disc{box-shadow:0 0 0 4px rgba(255,200,140,.75),0 0 26px rgba(255,220,160,.85)}
#champ[data-style="5"] .ch-frame,.wm-prev[data-style="5"]{--bd:#22D3EE;--bg:repeating-linear-gradient(0deg,rgba(255,60,200,.08) 0 1px,transparent 1px 22px),linear-gradient(180deg,rgba(14,8,40,.96),rgba(30,12,62,.97))}
#champ[data-style="5"] .ch-k,.wm-prev[data-style="5"] .wm-prev-k{color:#FF5CD6}
#champ[data-style="5"] .ch-nm,.wm-prev[data-style="5"] .wm-prev-nm{color:#8AF0FF;text-shadow:0 0 28px rgba(34,211,238,.9),0 6px 18px rgba(0,0,0,.5)}
#champ[data-style="5"] .ch-msg,.wm-prev[data-style="5"] .wm-prev-msg{color:#FFB8EE}
#champ[data-style="5"] .ch-line,.wm-prev[data-style="5"] .wm-prev-line{background:linear-gradient(90deg,transparent,rgba(34,211,238,.9),transparent)}
#champ[data-style="5"] .ch-disc{border-color:#22D3EE;box-shadow:0 0 0 8px rgba(255,255,255,.12),0 14px 42px rgba(0,0,0,.55),0 0 70px rgba(34,211,238,.9)}
.wm-prev[data-style="5"] .wm-prev-disc{box-shadow:0 0 0 4px #22D3EE,0 0 26px rgba(34,211,238,.9)}
#champ[data-style="6"] .ch-frame,.wm-prev[data-style="6"]{--bd:rgba(170,240,140,.7);--bg:radial-gradient(120% 70% at 50% 0%,rgba(180,255,140,.22),transparent 60%),linear-gradient(180deg,rgba(32,92,46,.95),rgba(14,48,26,.97))}
#champ[data-style="6"] .ch-k,.wm-prev[data-style="6"] .wm-prev-k{color:#C8F7A0}
#champ[data-style="6"] .ch-nm,.wm-prev[data-style="6"] .wm-prev-nm{color:#fff;text-shadow:0 0 28px rgba(190,255,150,.85),0 6px 18px rgba(0,0,0,.5)}
#champ[data-style="6"] .ch-msg,.wm-prev[data-style="6"] .wm-prev-msg{color:#E8FFD6}
#champ[data-style="6"] .ch-line,.wm-prev[data-style="6"] .wm-prev-line{background:linear-gradient(90deg,transparent,rgba(190,255,150,.85),transparent)}
#champ[data-style="6"] .ch-disc{border-color:rgba(170,240,140,.7);box-shadow:0 0 0 8px rgba(255,255,255,.12),0 14px 42px rgba(0,0,0,.55),0 0 70px rgba(190,255,150,.85)}
.wm-prev[data-style="6"] .wm-prev-disc{box-shadow:0 0 0 4px rgba(170,240,140,.7),0 0 26px rgba(190,255,150,.85)}
#champ[data-style="7"] .ch-frame,.wm-prev[data-style="7"]{--bd:rgba(200,170,255,.7);--bg:radial-gradient(circle,rgba(255,255,255,.8) 0 1px,transparent 1.6px) 0 0/53px 47px,radial-gradient(circle,rgba(255,255,255,.5) 0 1px,transparent 1.6px) 20px 30px/71px 61px,radial-gradient(ellipse at 70% 20%,rgba(150,80,230,.4),transparent 60%),linear-gradient(180deg,rgba(14,10,42,.96),rgba(8,6,24,.98))}
#champ[data-style="7"] .ch-k,.wm-prev[data-style="7"] .wm-prev-k{color:#D8C4FF}
#champ[data-style="7"] .ch-nm,.wm-prev[data-style="7"] .wm-prev-nm{color:#fff;text-shadow:0 0 28px rgba(200,170,255,.9),0 6px 18px rgba(0,0,0,.5)}
#champ[data-style="7"] .ch-msg,.wm-prev[data-style="7"] .wm-prev-msg{color:#EDE4FF}
#champ[data-style="7"] .ch-line,.wm-prev[data-style="7"] .wm-prev-line{background:linear-gradient(90deg,transparent,rgba(200,170,255,.9),transparent)}
#champ[data-style="7"] .ch-disc{border-color:rgba(200,170,255,.7);box-shadow:0 0 0 8px rgba(255,255,255,.12),0 14px 42px rgba(0,0,0,.55),0 0 70px rgba(200,170,255,.9)}
.wm-prev[data-style="7"] .wm-prev-disc{box-shadow:0 0 0 4px rgba(200,170,255,.7),0 0 26px rgba(200,170,255,.9)}
.wm-prev-k{font:800 11px var(--mono);letter-spacing:.44em;text-transform:uppercase;color:var(--amber)}
.wm-prev-nm{max-width:100%;font:900 30px/1 var(--disp);letter-spacing:-.02em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.wm-prev-msg{max-width:440px;margin:4px 0 0;font:800 15px/1.4 var(--disp);color:#FFE9A8;overflow-wrap:anywhere}
.wm-prev-msg.empty{color:var(--u-faint);font-weight:700;font-style:italic}
.opt label{display:flex;align-items:center;gap:4px;margin-bottom:8px;font:800 12px var(--disp);letter-spacing:.08em;
  text-transform:uppercase;color:var(--u-dim)}
.info-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;
  background:transparent;color:var(--u-faint);cursor:pointer;transition:color .15s}
.info-btn:hover,.info-btn:focus-visible{color:var(--amber)}
.keys{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kb{--cut:9px;--bw:2px;--bg:var(--u-soft);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;
  cursor:pointer;color:var(--u-dim);font:700 14px var(--disp);text-align:left;transition:color .15s}
.kb:hover{--bg:var(--u-soft2);color:#fff}
.kb kbd{--cut:5px;--bg:#fff;min-width:40px;padding:4px 9px;text-align:center;flex:none;font:800 12px var(--mono);color:#1B1A40}
.kb.listen{--bd:var(--amber);color:var(--amber)}
.kb.listen kbd{--bg:var(--amber);color:#2C1F0A}
.settings-scroll-hint{position:absolute;left:0;right:0;bottom:0;height:60px;pointer-events:none;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;
  background:linear-gradient(180deg,transparent,var(--u-end) 70%);color:var(--amber);opacity:0;transition:opacity .3s}
.settings-scroll-hint.show{opacity:1}
.settings-scroll-hint svg{animation:settingsScrollBounce 1.6s ease-in-out infinite}
@keyframes settingsScrollBounce{0%,100%{transform:translateY(0);opacity:.65}50%{transform:translateY(6px);opacity:1}}
@media(prefers-reduced-motion:reduce){.settings-scroll-hint svg{animation:none}}

/* Language */
/* a fixed height, so the sheet never shrinks under the keyboard while typing */
.lang-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;height:min(330px,46vh);overflow-y:auto;align-content:start;padding-right:2px}
.lang-sec{grid-column:1/-1;margin:6px 0 0;font:800 11px var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--u-dim)}
.lang-sec:first-child{margin-top:0}
.lang-card{--cut:10px;--bw:2px;--bg:var(--u-soft);display:flex;align-items:center;gap:10px;width:100%;min-width:0;padding:13px 14px;
  color:#fff;cursor:pointer;font:800 16px var(--disp);text-align:left}
.lang-card:hover{--bg:var(--u-soft2)}
.lang-card .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lang-card .check{flex:none;opacity:0;color:var(--amber)}
.lang-card[aria-pressed="true"]{--bd:var(--amber);--bg:rgba(241,196,15,.12)}
.lang-card[aria-pressed="true"] .check{opacity:1}
/* on a computer the sheet has room to breathe: wider, three columns, taller */
@media(min-width:861px){
  #langPanel .m-card{width:min(760px,calc(100vw - 48px));padding:32px 34px 30px}
  #langPanel .m-hd{margin-bottom:18px}
  #langPanel .u-search{margin-bottom:20px}
  #langPanel .u-search .u-input{min-height:52px;font-size:16px}
  #langPanel .lang-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;height:min(470px,58vh);padding-right:6px}
  #langPanel .lang-sec{margin:14px 0 2px}
  #langPanel .lang-sec:first-child{margin-top:0}
  #langPanel .lang-card{padding:15px 16px}
}
/* the skin picker */
.sp-card{display:flex;flex-direction:column}
.sp-tabs{flex-wrap:wrap;margin-bottom:12px}
.sp-tabs button{flex:1 1 auto}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fill,76px);justify-content:center;gap:8px;
  height:min(360px,48vh);overflow-y:auto;align-content:start;padding:2px}
.sp-tile{--cut:12px;--bw:2px;--bg:rgba(255,255,255,.07);position:relative;width:76px;height:76px;padding:6px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .12s}
.sp-tile img{width:64px;height:64px;object-fit:contain}
.sp-tile:hover{--bg:rgba(255,255,255,.12);transform:translateY(-2px)}
.sp-tile[aria-pressed="true"]{--bd:var(--amber);--bg:rgba(241,196,15,.18)}
.sp-tile[aria-pressed="true"]::after{content:'';position:absolute;top:5px;right:7px;width:9px;height:5px;
  border-left:3px solid var(--amber);border-bottom:3px solid var(--amber);transform:rotate(-45deg)}
/* by name: how many names wear this skin (two or more), in place of the tick */
.sp-n{position:absolute;bottom:6px;right:8px;display:flex;align-items:center;justify-content:center;
  color:var(--amber);font:900 14px/1 var(--mono);text-shadow:0 1px 3px rgba(0,0,0,.65);pointer-events:none;z-index:1}

.sp-foot{display:flex;align-items:center;gap:10px;margin-top:16px}
.sp-count{flex:1;font:800 14px var(--mono);color:var(--u-dim)}
.sp-count.full{color:#FF8F84;animation:spFull .4s ease}
@keyframes spFull{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.sp-foot .big{font-size:15px;padding:11px 18px}
.sp-foot .big[disabled]{opacity:.45;cursor:not-allowed;transform:none}
@media(max-width:640px){
  .sp-foot{flex-wrap:wrap}
  .sp-count{flex-basis:100%;text-align:center}
  .sp-foot .big{flex:1}
}
.lang-empty{grid-column:1/-1;padding:24px 8px;text-align:center;font:700 14px var(--disp);color:var(--u-faint)}

/* History */
.dk-reset{--cut:10px;--bd:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;
  padding:12px 16px;cursor:pointer;color:var(--u-dim);font:800 14px var(--disp);transition:color .15s}
.dk-reset:hover{--bd:rgba(255,107,107,.6);--bg:rgba(231,76,60,.12);color:#FF8F84}

/* Share / Embed */
.share-url-row{display:flex;gap:8px}
.share-url-row .u-input{flex:1;min-width:0;font:700 13px var(--mono);color:var(--u-dim)}
.share-url-row .u-input:focus{color:#fff}
/* the link as a QR code */
.share-qr{--cut:12px;--bg:rgba(255,255,255,.05);display:flex;align-items:center;gap:16px;margin-top:14px;padding:14px}
.share-qr[hidden]{display:none}
.share-qr-box{flex:none;width:128px;height:128px;padding:8px;border:0;border-radius:10px;background:#fff;overflow:hidden;cursor:zoom-in;transition:transform .15s}
.share-qr-box:hover{transform:scale(1.04)}
.share-qr-box:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
/* the big one: over everything, as in the lobby (css/room.css .rl-qr-big) */
#shareQrBig{position:fixed;inset:0;z-index:40;background:rgba(6,5,24,.82);cursor:zoom-out}
.share-qr-big #shareQrBigCode{width:min(64vh,78vw);aspect-ratio:1}
.share-qr-big #shareQrBigCode img,.share-qr-big #shareQrBigCode canvas{width:100%!important;height:auto!important;image-rendering:pixelated}
.share-qr-big b{max-width:min(64vh,78vw);font:900 30px/1.15 var(--disp);letter-spacing:0;text-align:center;overflow-wrap:anywhere}
.share-qr-big small{font:700 12px var(--mono)}
.share-qr-box img,.share-qr-box canvas{display:block;width:100%!important;height:100%!important;image-rendering:pixelated}
.share-qr.wait .share-qr-box{background:linear-gradient(100deg,rgba(255,255,255,.06) 30%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.06) 70%) 0 0/250% 100%;
  animation:skSweep 1.3s linear infinite}
.share-qr.wait .share-qr-box>*{visibility:hidden}
.share-qr-t{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.share-qr-t b{font:900 16px var(--disp);color:#fff}
.share-qr-t small{font:600 13px/1.45 var(--disp);color:var(--u-dim)}
.share-qr-dl{--cut:8px;--bg:rgba(255,255,255,.1);display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:8px 12px;border:0;cursor:pointer;
  color:#fff;font:800 13px var(--disp)}
.share-qr-dl:hover{--bg:rgba(255,255,255,.18)}
.share-qr-dl[disabled]{opacity:.45;cursor:default}
@media(max-width:420px){.share-qr{gap:12px;padding:12px}.share-qr-box{width:108px;height:108px}}
/* before the link exists: one button that makes it */
.share-make{--cut:12px;--bg:rgba(255,255,255,.05);display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 16px 18px;text-align:center}
.share-make[hidden],.share-ready[hidden]{display:none}
.share-make-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(241,196,15,.14);color:var(--amber)}
.share-make small{max-width:34ch;font:600 13px/1.5 var(--disp);color:var(--u-dim)}
.share-make .big.flat{margin-top:4px;font-size:15px;min-width:220px}
#sharePanel .share-socials:has(#shareFacebook[hidden]){grid-template-columns:1fr}
#sharePanel .share-socials:has(#shareFacebook[hidden]) .share-soc{flex-direction:row;justify-content:center;padding:12px 6px}
#sharePanel .share-socials:has(#shareFacebook[hidden]) .share-soc svg{width:20px;height:20px}
/* a button at work (busyWhile in js/game.js): a spinner in place of its icon */
.btn-spin{display:inline-block;flex:none;box-sizing:border-box;width:1.1em;height:1.1em;border-radius:50%;
  border:2.5px solid currentColor;border-right-color:transparent;vertical-align:-.2em;animation:btnSpin .75s linear infinite}
.is-busy{pointer-events:none;cursor:progress}
.is-busy>svg{display:none}
.pg-dl .btn-spin,.share-qr-dl .btn-spin{width:14px;height:14px;border-width:2.4px}
.pg-dl .btn-spin{color:var(--amber)}
@keyframes btnSpin{to{transform:rotate(360deg)}}
.u-copy,#embedCopyBtn{--cut:10px;--bg:var(--amber);flex:none;display:flex;align-items:center;justify-content:center;gap:8px;
  min-width:96px;padding:0 20px;cursor:pointer;color:#2C1F0A;font:900 15px var(--disp);
  filter:drop-shadow(0 4px 0 var(--amber-sh));transition:transform .12s,filter .12s}
.u-copy:hover,#embedCopyBtn:hover{transform:translateY(-2px);filter:drop-shadow(0 6px 0 var(--amber-sh))}
.u-copy:active,#embedCopyBtn:active{transform:translateY(2px);filter:drop-shadow(0 1px 0 var(--amber-sh))}
.u-copy.copied,#embedCopyBtn.copied{--bg:#3DDC84;filter:drop-shadow(0 4px 0 #1F8A50)}
.share-socials{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
#sharePanel .share-socials{grid-template-columns:repeat(2,1fr)}
.share-soc{--cut:12px;--bg:var(--u-soft);--c:#fff;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 6px 14px;
  color:#fff;text-decoration:none;cursor:pointer;font:inherit;transition:transform .12s}
.share-soc svg{width:26px;height:26px;color:var(--c)}
.share-soc span{font:800 12px var(--disp)}
.share-soc:hover{--bg:var(--u-soft2);--bd:var(--c);transform:translateY(-2px)}
#shareFacebook{--c:#4C9AFF}
.share-soc[hidden]{display:none}
#embedBtn{--c:#B596FF}
.embed-code-wrap{--cut:12px;--bg:#07071A;--bd:var(--u-line);overflow:hidden;margin-bottom:14px}
.embed-code-hd{display:flex;align-items:center;gap:6px;padding:9px 12px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--u-line)}
.embed-dot{width:9px;height:9px;border-radius:50%;flex:none}
.embed-dot.r{background:#FF5F57}.embed-dot.y{background:#FEBC2E}.embed-dot.g{background:#28C840}
#embedCodeText{display:block;width:100%;resize:none;border:0;outline:none;background:transparent;padding:12px 14px;
  color:#E6E3FF;font:500 12px/1.6 var(--mono)}
#embedCopyBtn{width:100%;height:50px}
/* the embed builder: the choices on the left, the preview and the code on the right */
.emb-card{width:min(900px,100%)}
.emb-lead{font:600 14px/1.55 var(--disp);color:var(--u-dim);margin:-4px 0 16px}
.emb-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:20px;align-items:start}
.emb-opts{display:flex;flex-direction:column;gap:12px}
.emb-f{display:flex;flex-direction:column;gap:6px}
.emb-f[hidden]{display:none}
.emb-l{font:800 11px var(--disp);letter-spacing:.1em;text-transform:uppercase;color:var(--u-faint)}
.emb-wh{flex-direction:row;align-items:flex-end;gap:10px}
.emb-wh label{flex:1;display:flex;flex-direction:column;gap:6px}
.emb-wh b{padding-bottom:10px;color:var(--u-faint)}
.emb-f .u-input{height:42px}
.emb-l2{display:flex;align-items:center;justify-content:space-between;gap:8px}
.emb-mini{border:0;cursor:pointer;padding:3px 8px;border-radius:5px;background:rgba(255,255,255,.1);color:#fff;font:800 11px var(--disp);letter-spacing:0;text-transform:none}
.emb-mini:hover{background:rgba(255,255,255,.18)}
.emb-names{height:auto;min-height:104px;resize:vertical;padding:10px 12px;font:600 13px/1.5 var(--mono)}
.emb-n{font:700 12px var(--disp);color:#4ADE80}
.emb-n.bad{color:#FF8F84}
.emb-checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:2px}
.emb-ck{display:flex;align-items:center;gap:9px;cursor:pointer;font:700 13px/1.3 var(--disp);color:#fff;user-select:none}
.emb-ck input{position:absolute;opacity:0;width:1px;height:1px}
.emb-ck i{flex:none;width:34px;height:20px;border-radius:10px;background:rgba(255,255,255,.16);position:relative;transition:background .2s}
.emb-ck i::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .2s cubic-bezier(.3,1.4,.5,1)}
.emb-ck input:checked + i{background:#22C55E}
.emb-ck input:checked + i::after{left:17px}
.emb-ck input:focus-visible + i{outline:2px solid var(--amber);outline-offset:2px}
.emb-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.emb-prev{--cut:12px;--bg:#E9EAF2;--bd:transparent;overflow:hidden}
.emb-site{display:flex;align-items:center;gap:5px;padding:8px 10px;background:#D6D8E4}
.emb-site i{width:8px;height:8px;border-radius:50%;background:#B4B7C8}
.emb-site span{flex:1;height:10px;margin-left:8px;border-radius:5px;background:#F4F5FA}
.emb-stage{height:230px;display:flex;align-items:center;justify-content:center;padding:14px;
  background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(27,26,64,.06) 22px 30px)}
.emb-frame{position:relative;width:min(100%,340px);max-height:100%;overflow:hidden;container-type:size;
  background:#0E1030;transition:border-radius .2s,box-shadow .2s}
.emb-frame.tall{width:auto;height:100%}
/* the preview, drawn in units of the frame (cqmin), so it scales with any shape */
.emb-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.emb-ui{position:absolute;inset:0;pointer-events:none}
.emb-top{position:absolute;top:4cqmin;left:4cqmin;display:flex;gap:2cqmin}
.emb-ic{position:relative;width:9cqmin;height:9cqmin;display:flex;align-items:center;justify-content:center;border-radius:2cqmin;
  background:rgba(22,19,64,.86);color:#fff;box-shadow:0 .6cqmin 0 rgba(0,0,0,.25)}
.emb-ic svg{width:5cqmin;height:5cqmin}
.emb-frame.nomenu .emb-ic.menu{display:none}
.emb-ic.snd .x{display:none}
.emb-frame.muted .emb-ic.snd .x{display:inline}
.emb-frame.muted .emb-ic.snd .w{display:none}
.emb-ic b{position:absolute;right:-1.6cqmin;bottom:-1.6cqmin;padding:.5cqmin 1cqmin;border-radius:1cqmin;background:#F1C40F;color:#2C1F0A;
  font:900 3cqmin/1 var(--mono)}
.emb-ic b:empty{display:none}
.emb-pcard{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);width:min(70cqw,120cqh);padding:4.5cqmin;display:flex;flex-direction:column;gap:2.6cqmin;
  border-radius:2.2cqmin;background:linear-gradient(180deg,rgba(44,38,120,.95),rgba(18,16,56,.97));box-shadow:0 2cqmin 5cqmin rgba(0,0,0,.4)}
.emb-k{font:800 2.8cqmin/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#F1C40F}
.emb-t{font:900 6cqmin/1.1 var(--disp);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emb-lines{display:flex;flex-direction:column;gap:1.6cqmin}
.emb-lines i{display:block;height:2.4cqmin;border-radius:1cqmin;background:rgba(255,255,255,.13)}
.emb-lines i:nth-child(1){width:84%}.emb-lines i:nth-child(2){width:62%}.emb-lines i:nth-child(3){width:74%}
.emb-ducks{display:flex;justify-content:center;gap:1.6cqmin}
.emb-ducks img{width:11cqmin;height:11cqmin;object-fit:contain;filter:drop-shadow(0 .8cqmin .8cqmin rgba(0,0,0,.35))}
.emb-go{display:block;text-align:center;padding:2.4cqmin 5cqmin;border-radius:1.6cqmin;background:#F1C40F;color:#2C1F0A;
  font:900 4cqmin/1 var(--disp);text-transform:uppercase;letter-spacing:.04em;box-shadow:0 .8cqmin 0 #A87F00;white-space:nowrap}
.emb-line{position:absolute;left:0;right:0;bottom:9cqmin;display:flex;flex-direction:column;align-items:center;gap:4cqmin}
.emb-line .emb-ducks img{width:15cqmin;height:15cqmin;animation:embBob 2.4s ease-in-out infinite}
.emb-line .emb-ducks img:nth-child(2n){animation-delay:-1.1s}
.emb-frame[data-start="race"] .emb-pcard,.emb-frame[data-start="setup"] .emb-line{display:none}
.emb-dim{position:absolute;right:6px;top:6px;padding:3px 6px;border-radius:5px;background:rgba(6,5,24,.7);
  font:800 10px var(--mono);letter-spacing:.08em;color:rgba(226,224,255,.85)}
@keyframes embBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6%) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.emb-line .emb-ducks img{animation:none}}
.emb-tabs{margin-left:auto;display:flex;gap:4px}
.emb-tabs button{border:0;cursor:pointer;padding:3px 9px;border-radius:5px;background:transparent;color:var(--u-faint);font:800 10px var(--mono);letter-spacing:.12em}
.emb-tabs button[aria-selected="true"]{background:rgba(255,255,255,.12);color:#fff}
.emb-card #embedCodeText{min-height:96px;word-break:break-all}
.emb-btns{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.emb-open{align-self:center;font:800 13px var(--disp);color:var(--u-dim);text-decoration:underline}
.emb-open:hover{color:#fff}
@media(max-width:760px){.emb-grid{grid-template-columns:1fr}.emb-stage{height:200px}}
/* an embed that asked for no menu */
.embed-nomenu #siteNav{display:none}
.embed-play #isBackToSetup,.embed-play #champSetup{display:none!important}
/* the embed builder's dropdowns */
.emb-dd{position:relative}
.emb-dd-btn{--cut:10px;--bg:rgba(0,0,0,.32);--bd:var(--u-line);width:100%;height:44px;display:flex;align-items:center;gap:10px;padding:0 12px;
  cursor:pointer;color:#fff;font:800 14px var(--disp);text-align:left}
.emb-dd-btn:hover{--bg:rgba(255,255,255,.06)}
.emb-dd-btn[aria-expanded="true"]{--bd:var(--amber)}
.emb-dd-btn span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emb-dd-btn img,.emb-dd-list img{width:26px;height:26px;object-fit:contain;flex:none}
.emb-dd-btn img[hidden]{display:none}
.emb-dd-ic{display:flex;color:#C9BEFF}
.emb-dd-chev{flex:none;color:var(--u-faint);transition:transform .2s}
.emb-dd-btn[aria-expanded="true"] .emb-dd-chev{transform:rotate(180deg)}
.emb-dd-list{--cut:12px;--bg:#1C1858;--bd:rgba(196,178,255,.32);position:absolute;z-index:5;left:0;right:0;bottom:calc(100% + 6px);margin:0;padding:6px;list-style:none;
  max-height:280px;overflow:auto;display:grid;gap:3px;filter:drop-shadow(0 14px 24px rgba(0,0,0,.5));animation:embDd .14s ease-out}
.emb-dd-list[hidden]{display:none}
.emb-dd-list.two{grid-template-columns:1fr 1fr}
.emb-dd-list li:first-child{grid-column:1/-1}
@keyframes embDd{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.emb-dd-list button{--cut:7px;--bg:transparent;width:100%;display:flex;align-items:center;gap:9px;padding:8px 10px;cursor:pointer;color:#E9E7FF;
  font:700 13px var(--disp);text-align:left}
.emb-dd-list button:hover{--bg:rgba(255,255,255,.08);color:#fff}
.emb-dd-list button[aria-selected="true"]{--bg:rgba(241,196,15,.18);color:var(--amber)}
.emb-dd-list button[aria-selected="true"]::after{content:'✓';margin-left:auto}
/* the full result's download */
.pg-head{gap:12px}
.pg-head::after{order:1}
.pg-dl{--cut:8px;--bg:rgba(0,0,0,.34);--bd:transparent;color:#fff;order:2;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;cursor:pointer;
  font:800 12px var(--disp);transition:transform .12s}
.pg-dl:hover{--bg:rgba(0,0,0,.52);transform:translateY(-1px)}
.pg-dl svg{color:var(--amber)}

/* the result image */
.rs-preview-wrap{--cut:16px;--bg:#05090E;--bd:var(--u-line);position:relative;overflow:hidden}
.rs-preview-wrap canvas{display:block;width:100%;height:auto}
.rs-expand-btn,.rs-style-nav{--cut:8px;--bg:rgba(6,5,24,.72);position:absolute;width:36px;height:36px;cursor:pointer;color:#fff;
  display:flex;align-items:center;justify-content:center;transition:transform .12s}
.rs-expand-btn:hover,.rs-style-nav:hover{--bg:rgba(6,5,24,.92)}
.rs-expand-btn{top:10px;right:10px}
.rs-style-nav{top:50%;transform:translateY(-50%)}
.rs-style-nav:active{transform:translateY(-50%) scale(.92)}
.rs-style-prev{left:10px}.rs-style-next{right:10px}
.rs-style-dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:6px;pointer-events:none}
.rs-style-dots i{display:block;width:7px;height:7px;background:rgba(255,255,255,.4);transition:background .15s,width .15s}
.rs-style-dots i.on{background:var(--amber);width:18px}
#rsExpandModal{display:flex;align-items:center;justify-content:center;padding:24px;z-index:20;
  background:rgba(6,5,24,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#rsExpandModal img{max-width:100%;max-height:88vh;width:auto;height:auto;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
#rsExpandClose{position:absolute;top:18px;right:18px}

/* the undo toast */
.undo-toast{--cut:12px;--bg:var(--u-panel);--bd:var(--u-edge);position:fixed;left:50%;bottom:24px;z-index:18;display:flex;align-items:center;
  gap:12px;overflow:hidden;padding:10px 10px 10px 18px;opacity:0;pointer-events:none;
  transform:translateX(-50%) translateY(20px);transition:opacity .22s,transform .22s}
.undo-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.undo-toast span{font:800 15px var(--disp);color:#fff;white-space:nowrap}
#undoToastBtn{--cut:7px;--bg:var(--amber);flex:none;padding:8px 14px;cursor:pointer;color:#2C1F0A;font:900 13px var(--disp);text-transform:uppercase}
#undoToastBtn:hover{filter:brightness(1.08)}
#undoToastClose{--cut:6px;flex:none;width:30px;height:30px;cursor:pointer;color:var(--u-dim);display:flex;align-items:center;justify-content:center}
#undoToastClose:hover{--bg:var(--u-soft2);color:#fff}
.undo-toast-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--amber)}

/* the full result */
#card{display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto;z-index:16;
  background:rgba(6,5,24,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#card.card-hidden{visibility:hidden}
.rep{--cut:24px;--bg:var(--u-panel);--bd:var(--u-edge);width:min(640px,100%);overflow:hidden}
.rep .rh{position:relative;padding:22px 24px 18px;
  background:radial-gradient(130% 140% at 50% 0%,rgba(255,201,74,.18),rgba(255,201,74,0) 68%)}
#cardBack{position:absolute;top:18px;right:18px}
.rep .rh .k{font:800 11px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--amber)}
.rep .rh .w{display:flex;align-items:baseline;gap:12px;margin-top:10px;flex-wrap:wrap}
.rep .rh .w b{font:900 34px/1 var(--disp);text-transform:uppercase;color:#fff}
.rep .rh .w s{text-decoration:none;font:800 17px var(--mono);color:var(--amber)}
.pg-head{display:flex;align-items:center;gap:10px;padding:14px 24px}
.pg-head::after{content:'';flex:1;height:1px;background:var(--u-line)}
.pg-t{font:800 11px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--u-faint)}
#stats{animation:pgIn .34s cubic-bezier(.2,.9,.3,1) both;padding:4px 20px 24px;display:flex;flex-direction:column;gap:7px;
  max-height:52vh;overflow-y:auto}
@keyframes pgIn{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
.fin{--cut:9px;content-visibility:auto;contain-intrinsic-size:auto 44px;display:grid;grid-template-columns:74px 8px 1fr auto;align-items:center;gap:11px;padding:10px 12px;flex:none}
.fin .p{display:flex;align-items:center;gap:4px;white-space:nowrap;font:800 13px var(--mono);color:var(--u-dim)}
.fin .medal-ic{flex:none}
.fin i{display:block;width:8px;height:20px}
.fin .n{font:900 18px/1 var(--disp);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fin .t{font:800 13px var(--mono);color:var(--amber)}
/* only the podium rows get a fill; the rest sit on the card */
/* --medal is the row's own gold/silver/bronze (set inline by buildCard) */
.fin-medal{--bg:color-mix(in srgb,var(--medal) 16%,rgba(255,255,255,.04));--bd:color-mix(in srgb,var(--medal) 55%,transparent)}
.fin-medal .t{color:var(--medal)}
.fin-empty{padding:18px 4px;text-align:center;font:700 13px var(--disp);color:var(--u-faint)}

/* scrollbars: slim and quiet everywhere */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.26);border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:rgba(255,255,255,.4)}

@media(max-width:640px){
  .modal{align-items:flex-end;padding:0}
  .m-card,.m-card.sm,.m-card.lg{--cut:22px;--cut-b:0px;width:100%;max-height:92dvh;margin:0;
    padding:10px 18px max(20px,env(safe-area-inset-bottom));transform:translateY(60px)}
  /* the sheet's grab handle */
  .m-card::after{content:'';position:absolute;top:8px;left:50%;width:44px;height:5px;margin-left:-22px;background:rgba(255,255,255,.24)}
  .m-card > :first-child{margin-top:12px}
  .settings-card{padding:10px 0 0}
  .settings-card .m-hd{padding:0 18px}
  .settings-bd{padding:0 14px max(20px,env(safe-area-inset-bottom))}
  .m-title{font-size:21px}
  .m-actions{flex-direction:column-reverse}
  .keys,.lang-grid{grid-template-columns:1fr}
  #sharePanel .share-socials{grid-template-columns:repeat(2,1fr)}
  .u-row{flex-wrap:wrap}
  .undo-toast{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 92px)}
  .rep .rh .w b{font-size:28px}
}

/* ─────────── SMALL SCREENS ───────────
   On a phone every piece of HUD wants the same corner. The nav pill owns the
   top-left, so the scorebug is pushed below it rather than sliding under it;
   the ladder is anchored to the bottom-left and given a hard height budget
   (sizeLadder() below reads that budget and simply stops drawing rows that
   would not fit); and the lower third runs full width beneath both. */
@media(max-width:700px){
  #bug{width:calc(100vw - 16px);
    top:max(10px,env(safe-area-inset-top))}
  #bug.cine{top:calc(max(10px,env(safe-area-inset-top)) + 5.5vh)}
  /* the ladder and its controls sit on top of --adB, the actual reserved
     ad-bar height for whatever tier is active */
  #hudR{top:auto;transform:none;bottom:calc(var(--adB) + max(14px,env(safe-area-inset-bottom)))}
  #hudR.cine{bottom:calc(var(--adB) + max(14px,env(safe-area-inset-bottom)) + 5.5vh)}
}
@media(max-width:640px){
  #cine i{height:5.5vh}
  #bug.cine{top:calc(max(12px,env(safe-area-inset-top)) + 5.5vh)}
  .bg-togo{display:none}
  #mini{height:44px}
}

/* ─────────── SITE NAV ───────────
   The game itself is a full-screen canvas with no chrome — this is the
   only way in or out to the rest of randomduckrace.com (about/rules/legal).
   Top-left corner is the one spot none of the in-game HUD (scoreboard,
   ladder, lower-third, cross-promo pill) ever occupies, and it stays a
   small low-opacity pill so it doesn't compete with the game itself. */
#topBar{
  position:fixed;top:0;left:0;right:0;z-index:2147483000;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 10px max(10px,env(safe-area-inset-left));
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
/* Slides fully off-screen rather than fading/hiding in place — spectators
   watching a live race never see this bar occupy space or flicker, and it
   returns the same way once the result is up, instead of just popping
   back in. */
/* off screen and out of the compositor while the race runs */
#topBar.hide{transform:translateY(-130%);visibility:hidden;transition:transform .4s cubic-bezier(.4,0,.2,1),visibility 0s .4s}
#topBarLeft{display:flex;align-items:center;gap:6px}
#topBarRight{display:flex;align-items:center;gap:6px}
#siteNav{position:relative}
#navToggle,#soundBtn,#isSound,#isLang,#isEnv,#langIconBtn,#envToggleBtn,#signInBtn{--cut:10px;--bg:rgba(22,19,64,.84);--bd:rgba(196,178,255,.35);display:flex;align-items:center;
  justify-content:center;height:42px;cursor:pointer;color:#fff;filter:drop-shadow(0 4px 0 rgba(8,6,30,.6));
  transition:transform .12s,filter .12s}
#navToggle{width:42px;padding:0}
#signInBtn{gap:8px;padding:0 14px;font:900 13px var(--disp);letter-spacing:.04em}
#signInBtn svg{color:var(--amber);flex:none}
#signInBtn span{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#signInBtn.signed-in{--bd:rgba(241,196,15,.55)}
@media(max-width:560px){#signInBtn{width:42px;padding:0}#signInBtn span{display:none}}
#navToggle svg{color:var(--amber)}
#soundBtn,#isSound,#langIconBtn,#envToggleBtn{width:42px;padding:0}
/* the start screen's own corner: language, time of day, sound */
.is-tools{position:absolute;top:max(14px,env(safe-area-inset-top) + 8px);right:max(14px,env(safe-area-inset-right) + 8px);display:flex;gap:8px;pointer-events:auto}
#isLang,#isEnv{width:42px;height:42px;padding:0}
#isLang svg,#isEnv svg{width:19px;height:19px}
#isSound{height:42px}
#isSound svg{width:19px;height:19px}
#isSound.rc-on{color:#FF8F84}
#soundBtn svg{width:19px;height:19px}
#soundBtn.rc-on{color:#FF8F84}
#navToggle:hover,#soundBtn:hover,#isSound:hover,#isLang:hover,#isEnv:hover,#langIconBtn:hover,#envToggleBtn:hover,#signInBtn:hover{--bg:rgba(40,34,110,.94);transform:translateY(-2px);filter:drop-shadow(0 6px 0 rgba(8,6,30,.6))}
#navToggle:active,#navToggle[aria-expanded="true"],#soundBtn:active,#langIconBtn:active,#langIconBtn[aria-expanded="true"],#envToggleBtn:active,#signInBtn:active{
  transform:translateY(2px);filter:drop-shadow(0 1px 0 rgba(8,6,30,.6))}
.lang-icon-wrap{position:relative}
#navMenu{--cut:14px;--bg:var(--u-panel);--bd:var(--u-edge);position:absolute;top:calc(100% + 10px);left:0;min-width:210px;padding:6px;
  filter:drop-shadow(0 20px 40px rgba(3,2,20,.55));
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s}
#navMenu.open{opacity:1;visibility:visible;transform:none}
#navMenu a,#navMenu .nav-btn{--cut:7px;display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;
  text-decoration:none;text-align:left;cursor:pointer;box-sizing:border-box;color:rgba(236,234,255,.88);font:700 14px var(--disp)}
#navMenu a:hover,#navMenu .nav-btn:hover{--bg:rgba(255,255,255,.08);color:var(--amber)}
#navMenu a svg,#navMenu .nav-btn svg{flex:none;opacity:.75}
#navMenu a:hover svg,#navMenu .nav-btn:hover svg{opacity:1}
#navMenu .nav-btn{--bg:rgba(255,255,255,.06);margin-bottom:6px}
#navMenu a.nav-divider{position:relative;margin-top:9px}
#navMenu a.nav-divider::before{content:'';position:absolute;left:12px;right:12px;top:-5px;height:1px;background:var(--u-line)}
/* Settings › Sound */
.snd{display:flex;flex-direction:column;gap:14px}
.snd-vol{display:grid;grid-template-columns:minmax(120px,170px) 1fr 46px;align-items:center;gap:12px;font:800 14px var(--disp);color:#fff}
.snd-vol b{font:800 13px var(--mono);color:var(--amber);text-align:right}
.snd-vol input{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;cursor:pointer;
  background:linear-gradient(90deg,var(--amber) var(--p,50%),rgba(255,255,255,.14) var(--p,50%))}
.snd-vol input::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.4);border:3px solid var(--amber)}
.snd-vol input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--amber)}
.snd-f{display:flex;flex-direction:column;gap:8px}
.snd-l{font:800 11px var(--disp);letter-spacing:.1em;text-transform:uppercase;color:var(--u-faint)}
.snd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.snd-grid button,.snd-tracks button{--cut:9px;--bg:rgba(255,255,255,.06);display:flex;align-items:center;gap:9px;padding:9px 10px;cursor:pointer;color:#fff;
  font:800 13px var(--disp);text-align:left;transition:transform .12s}
.snd-grid button:hover,.snd-tracks button:hover{--bg:rgba(255,255,255,.11);transform:translateY(-1px)}
.snd-grid button[aria-pressed="true"],.snd-tracks button[aria-pressed="true"]{--bg:rgba(241,196,15,.16);--bd:var(--amber);--bw:2px;color:var(--amber)}
.snd-grid i,.snd-tracks i{font-style:normal;font-size:19px;line-height:1;flex:none}
.snd-tracks{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.snd-tracks span{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.snd-tracks small{font:700 11px var(--disp);color:var(--u-faint)}
.snd-tracks u{flex:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);color:#fff}
.snd-tracks button[aria-pressed="true"] u{background:var(--amber);color:#2C1F0A}
.snd-tracks u .ic-stop{display:none}
.snd-tracks button.playing u svg:not(.ic-stop){display:none}
.snd-tracks button.playing u .ic-stop{display:block}
.snd-tracks button.playing u{animation:sndPlay 1s ease-in-out infinite}
.snd-grid button.playing i{animation:sndPlay .6s ease-in-out infinite}
@keyframes sndPlay{50%{transform:scale(1.14)}}
@media (prefers-reduced-motion:reduce){.snd-tracks button.playing u,.snd-grid button.playing i{animation:none}}
@media(max-width:640px){.snd-grid{grid-template-columns:1fr 1fr}.snd-tracks{grid-template-columns:1fr}.snd-vol{grid-template-columns:1fr 46px}.snd-vol span{grid-column:1/-1}}
/* the skin picker's two ways: a random mix, or a skin for each name */
.sp-mode{margin-bottom:10px}
#skinPicker[data-mode="mix"] .sp-sub-name,#skinPicker[data-mode="name"] .sp-sub-mix{display:none}
.sp-body{display:grid;grid-template-columns:1fr;gap:12px;min-height:0}
#skinPicker[data-mode="name"] .sp-body{grid-template-columns:minmax(150px,220px) minmax(0,1fr)}
.sp-pick{min-width:0}
.sp-names{display:none;flex-direction:column;gap:5px;max-height:420px;overflow:auto;padding-right:4px;
  scrollbar-width:thin;scrollbar-color:rgba(241,196,15,.5) transparent}
#skinPicker[data-mode="name"] .sp-names{display:flex}
.sp-name{--cut:8px;--bg:rgba(255,255,255,.06);display:flex;align-items:center;gap:9px;padding:5px 8px 5px 5px;cursor:pointer;color:#fff;
  font:800 13px var(--disp);text-align:left}
.sp-name:hover{--bg:rgba(255,255,255,.11)}
.sp-name[aria-pressed="true"]{--bg:rgba(241,196,15,.18);--bd:var(--amber);--bw:2px}
.sp-name i{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:6px;background:rgba(0,0,0,.3);
  font:900 15px var(--disp);font-style:normal;color:var(--u-faint)}
.sp-name img{width:32px;height:32px;object-fit:contain}
.sp-name b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-x{flex:none;width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#FF9C92;font:900 15px var(--disp)}
.sp-x:hover{background:rgba(231,76,60,.3)}
/* a phone: the names in two columns, three rows in view (the rest scroll,
   with a fade at the edge to say so), the chosen name kept in view; the
   skins under them */
@media(max-width:640px){
  /* a column: the names a fixed three rows (never squashed by a short
     screen), the skins taking what is left and scrolling inside */
  #skinPicker[data-mode="name"] .sp-body{display:flex;flex-direction:column;gap:10px;flex:1 1 auto;min-height:0}
  #skinPicker[data-mode="name"] .sp-names{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:40px;gap:6px;
    flex:none;height:132px;max-height:none;overflow-y:auto;padding:0 2px 0 0;align-content:start}
  #skinPicker[data-mode="name"] .sp-pick{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  #skinPicker[data-mode="name"] .sp-grid{flex:1 1 auto;height:auto;min-height:150px}
  #skinPicker[data-mode="name"] .sp-card{max-height:96dvh}
  #skinPicker[data-mode="name"] .sp-name{min-width:0;padding:4px 6px 4px 4px;gap:7px;font-size:13px}
  #skinPicker[data-mode="name"] .sp-names{scroll-snap-type:y mandatory;scroll-padding-top:0}
  #skinPicker[data-mode="name"] .sp-name{scroll-snap-align:start}
  #skinPicker[data-mode="name"] .sp-name i{width:30px;height:30px}
  #skinPicker[data-mode="name"] .sp-name img{width:28px;height:28px}
  #skinPicker[data-mode="name"] .sp-x{width:20px;height:20px;font-size:14px}
  #skinPicker[data-mode="name"] .sp-sub-name{font-size:12.5px;margin-bottom:8px}
}
/* On a wide screen the setup card fits the window: the name box and the
   theme list give up height (and scroll inside) before anything else, so
   the buttons under the names and the two calls to action always show. */
@media(min-width:861px){
  .cfg{display:flex;flex-direction:column;max-height:calc(100dvh - var(--hdr-h,64px) - 34px)}
  .cfg-hd{flex:none}
  .cfg-body{flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr);overflow:auto}
  .cfg-card{min-height:0;display:flex;flex-direction:column}
  #pasteHost,#importHost,#savedHost{flex:1 1 auto;min-height:96px}
  .cfg-theme .tp-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(241,196,15,.45) transparent}
  .golive{flex:none;position:relative}
}
/* the Load tab's count of saved races */
.seg-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin-left:7px;padding:0 6px;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
  background:var(--amber);color:#2C1F0A;font:900 11.5px/1 var(--disp);vertical-align:1px}
.seg-n[hidden]{display:none}
.seg button[aria-pressed="true"] .seg-n{background:#2C1F0A;color:var(--amber)}
/* Import: column → duplicates → save */
.im-card{width:min(620px,100%)}
.im-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:-4px 0 14px}
.im-file{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.07);color:var(--u-dim);font:700 12.5px var(--disp)}
.im-file b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.im-steps{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.im-steps li{display:flex;align-items:center;gap:6px;font:800 12px var(--disp);color:var(--u-faint)}
.im-steps li[hidden]{display:none}
.im-steps li + li:not([hidden])::before{content:'';width:14px;height:2px;border-radius:1px;background:rgba(255,255,255,.15)}
.im-steps i{font-style:normal;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);font-size:11px}
.im-steps li.cur{color:#fff}.im-steps li.cur i{background:var(--amber);color:#2C1F0A}
.im-steps li.done{color:#7CF0A6}.im-steps li.done i{background:#22C55E;color:#06210F;font-size:0}
.im-steps li.done i::after{content:'✓';font-size:12px}
.im-step[hidden]{display:none}
.im-hdr{display:inline-flex;align-items:center;gap:10px;margin:2px 0 12px;cursor:pointer;font:800 14px var(--disp);color:#fff}
.im-hdr input{position:absolute;opacity:0;width:1px;height:1px}
.im-hdr i{flex:none;width:38px;height:22px;border-radius:11px;background:rgba(255,255,255,.18);position:relative;transition:background .2s}
.im-hdr i::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s cubic-bezier(.3,1.4,.5,1)}
.im-hdr input:checked + i{background:#22C55E}.im-hdr input:checked + i::after{left:19px}
.im-hdr input:focus-visible + i{outline:2px solid var(--amber);outline-offset:2px}
.im-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;max-height:min(46vh,340px);overflow:auto;padding:2px}
.im-col{--cut:10px;--bg:rgba(255,255,255,.06);--bd:rgba(255,255,255,.14);display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:10px 12px;cursor:pointer;color:#fff;text-align:left;min-width:0}
.im-col:hover{--bg:rgba(255,255,255,.1)}
.im-col[aria-checked="true"]{--bg:rgba(241,196,15,.14);--bd:var(--amber);--bw:2px}
.im-col b{font:900 14px var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.im-col[aria-checked="true"] b{color:var(--amber)}
.im-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;min-height:54px}
.im-col li{font:600 12.5px var(--disp);color:var(--u-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.im-col small{font:800 11px var(--disp);color:var(--u-faint)}
.im-alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:10px;background:rgba(241,196,15,.1);box-shadow:inset 0 0 0 1px rgba(241,196,15,.4)}
.im-alert span{display:flex;flex:none;color:#F1C40F}
.im-alert p{margin:0;font:800 14.5px/1.45 var(--disp);color:#fff}
.im-dups{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;max-height:min(34vh,220px);overflow:auto}
.im-dups li{display:inline-flex;align-items:center;gap:8px;padding:5px 6px 5px 10px;border-radius:8px;background:rgba(255,255,255,.07);font:700 13px var(--disp);color:#fff}
.im-dups b{padding:1px 7px;border-radius:7px;background:rgba(241,196,15,.2);color:var(--amber);font:900 12px var(--disp)}
.im-ready{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.im-ready b{font:900 40px/1 var(--disp);color:var(--amber)}
.im-ready span{font:800 16px var(--disp);color:#fff}
.im-warn{margin:6px 0 0;padding:8px 12px;border-radius:8px;background:rgba(231,76,60,.15);color:#FF8F84;font:800 13px var(--disp)}
.im-warn[hidden]{display:none}
#imSaveName{margin-top:4px}
@media(max-width:560px){.im-cols{grid-template-columns:1fr 1fr}.im-steps span{display:none}}

/* watch mode (?watch=1): the race and nothing to run it with */
/* watching on a phone: the arrow over my duck (js/game.js watchArrow) */
#meArrow{position:fixed;left:0;top:0;z-index:12;pointer-events:none;will-change:transform}
#meArrow[hidden]{display:none}
#meArrow .ma{position:absolute;left:0;top:0;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:1px;
  animation:maBob 1s ease-in-out infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
#meArrow span{display:flex;align-items:center;gap:6px;padding:3px 8px;border-radius:6px;background:#FFD84A;color:#2C1F0A;font:900 12px/1.1 var(--disp);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
#meArrow s{text-decoration:none;font:800 11px var(--mono);text-transform:none}
#meArrow s:empty{display:none}
#meArrow i{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:11px solid #FFD84A}
@keyframes maBob{0%,100%{translate:0 0}50%{translate:0 -6px}}
/* off the shot: at the edge, pointing the way to my duck */
#meArrow.off-back .ma,#meArrow.off-ahead .ma{flex-direction:row;gap:0;transform:translate(0,-50%);animation-name:maNudge}
#meArrow.off-ahead .ma{flex-direction:row-reverse;transform:translate(-100%,-50%)}
#meArrow.off-back i,#meArrow.off-ahead i{border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:0;border-right:11px solid #FFD84A}
#meArrow.off-ahead i{border-right:0;border-left:11px solid #FFD84A}
@keyframes maNudge{0%,100%{translate:0 0}50%{translate:-4px 0}}
#meArrow.off-ahead .ma{animation-name:maNudgeR}
@keyframes maNudgeR{0%,100%{translate:0 0}50%{translate:4px 0}}
/* the host has paused: no Resume on a phone watching */
html.watch #pzGo,html.watch .pz-hint{display:none}
html.watch #config, html.watch #topBar, html.watch #raceCtl, html.watch #isGo, html.watch #introStart .is-acts,
html.watch #introStart, html.watch #introStart .is-tools, html.watch #introStart .is-hint, html.watch .ch-acts, html.watch #roomBanner,
html.watch #undoToast { display: none !important; }

/* ── below the setup: what Random Duck Race is (index.html .home-info) ── */
html.framed .home-info, html.watch .home-info{display:none}
.home-info{--cut:26px;--bg:var(--u-panel);--bd:var(--u-edge);margin:46px 0 10px;padding:22px;color:var(--ink);font:600 16px/1.65 var(--disp)}
.home-info a{color:#FFD84A;font-weight:800;text-decoration:none}
.home-info a:hover{color:#fff;text-decoration:underline}
.home-info a svg{vertical-align:-2px;margin-left:5px}
.hi-more{display:inline-flex;align-items:center;margin:0 0 12px}
.hi-more svg{margin-left:6px}
.home-info h2{margin:0 0 10px;font:900 24px/1.2 var(--disp);color:#fff}
.home-info p{margin:0 0 12px;color:rgba(226,224,255,.76)}
.home-info strong{color:#fff}
.hi-intro{--cut:18px;--bg:rgba(10,8,38,.8);--bd:var(--u-line);margin:0 0 12px;padding:26px 30px 14px;text-align:center}
.hi-intro h2{font-size:clamp(28px,4vw,40px)}
.hi-kicker{display:inline-block;margin-bottom:8px;font:800 12px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--amber)}
/* Remove the winner › Remove more: the top finishers to tick */
.rw-more{display:block;margin:-6px auto 16px;padding:4px 8px;border:0;background:none;cursor:pointer;color:#FFD84A;
  font:800 14px var(--disp);text-decoration:underline;text-underline-offset:3px}
.rw-more:hover{color:#fff}
.rw-more[hidden],.rw-list[hidden]{display:none}
.rw-list{margin:0 0 18px;text-align:left}
.rw-hint{margin:0 0 10px;font:700 13.5px/1.45 var(--disp);color:var(--u-dim)}
.rw-tools{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.m-confirm .rw-q{flex:1;min-width:0;height:42px;margin:0;padding:0 12px;font:700 14px var(--disp)}
.rw-all{--cut:8px;--bg:rgba(0,0,0,.34);flex:none;height:42px;padding:0 14px;border:0;cursor:pointer;color:#fff;font:900 13px var(--disp);white-space:nowrap}
.rw-all:hover{--bg:rgba(0,0,0,.52)}
.rw-all[disabled]{opacity:.45;cursor:default}
.rw-row[hidden]{display:none}
.rw-none{margin:10px 0 0;font:700 13px var(--disp);color:var(--u-faint);text-align:center}
.rw-none[hidden]{display:none}
.rw-rows{display:flex;flex-direction:column;gap:6px;max-height:min(300px,38dvh);overflow-y:auto;padding-right:4px;
  scrollbar-width:thin;scrollbar-color:rgba(241,196,15,.45) transparent}
.rw-row{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.05);
  cursor:pointer;font:800 15px var(--disp);color:#fff;transition:background .12s}
.rw-row:hover{background:rgba(255,255,255,.09)}
.rw-row:has(input:checked){background:rgba(231,76,60,.18);box-shadow:inset 0 0 0 1px rgba(231,76,60,.55)}
.rw-row:has(input:disabled){opacity:.45;cursor:default}
.rw-row input{flex:none;width:18px;height:18px;margin:0;accent-color:#E74C3C}
.rw-row b{flex:none;min-width:32px;font:800 12px var(--mono);color:var(--u-faint)}
.rw-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Remove more: By name / Custom */
.rw-tabs{display:flex;gap:4px;padding:4px;margin:0 0 12px;border-radius:12px;background:rgba(0,0,0,.28)}
.rw-tabs button{flex:1;height:38px;border:0;border-radius:9px;background:none;cursor:pointer;color:var(--u-dim);font:900 14px var(--disp)}
.rw-tabs button[aria-selected="true"]{background:#fff;color:#1B1A33}
#rwByName[hidden],#rwCustom[hidden]{display:none}
.rw-modes{display:flex;gap:8px;margin:0 0 12px}
.rw-modes button{--cut:8px;--bg:rgba(0,0,0,.3);flex:1;height:42px;border:0;cursor:pointer;color:#fff;font:900 14px var(--disp)}
.rw-modes button[aria-pressed="true"]{--bg:#E74C3C}
.rw-count{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;font:800 14px var(--disp)}
.rw-num{display:flex;align-items:center;gap:6px}
.rw-num .rm-step{width:54px;height:44px;flex:none}
.m-confirm .rw-num input{width:76px;height:44px;margin:0;padding:0 8px;text-align:center;font:900 16px var(--disp)}
.rw-who{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.05)}
.rw-who-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font:800 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--u-faint)}
.rw-redraw{border:0;background:none;padding:2px 4px;cursor:pointer;color:#FFD84A;font:900 13px var(--disp);letter-spacing:0;text-transform:none}
.rw-redraw[hidden]{display:none}
.rw-chips{display:flex;flex-wrap:wrap;gap:6px;max-height:min(140px,22dvh);overflow-y:auto}
.rw-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 10px;border-radius:999px;background:rgba(231,76,60,.2);box-shadow:inset 0 0 0 1px rgba(231,76,60,.5);font:800 13px var(--disp)}
.rw-chip b{font:800 11px var(--mono);color:#FFB3AB}
.rw-chip i{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw-chip.more{background:rgba(255,255,255,.08);box-shadow:none;color:var(--u-dim)}
.rw-warn{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:rgba(255,184,0,.14);box-shadow:inset 0 0 0 1px rgba(255,184,0,.5);
  color:#FFD84A;font:800 13.5px/1.45 var(--disp)}
.rw-warn[hidden]{display:none}
#removeWinnerRemove:disabled{opacity:.5;cursor:default}
.hi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}
.hi-card{--cut:14px;--bg:var(--u-panel);--bd:var(--u-edge);padding:18px 18px 14px}
.hi-card > .hi-ic{display:flex;color:#FFD84A}
.hi-card > .hi-ic svg{width:30px;height:30px}
.hi-card h3{margin:8px 0 4px;font:900 18px/1.3 var(--disp);color:#fff}
.hi-card p{margin:0;font-size:15px}
.hi-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hi-col{--cut:14px;--bg:rgba(10,8,38,.72);--bd:var(--u-line);padding:20px 22px 10px}
.hi-col h2{font-size:21px}
.hi-col ol{margin:0 0 12px;padding-left:20px;color:rgba(226,224,255,.76)}
.hi-intro p:last-child{margin-bottom:6px}
.hi-col li{margin:5px 0}
.hi-col li::marker{color:var(--amber);font-weight:900}
.hi-links{--cut:14px;--bg:rgba(10,8,38,.8);--bd:var(--u-line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 24px;margin:12px 0 0;padding:22px 26px 20px}
.hi-links div{display:flex;flex-direction:column;gap:7px;min-width:0}
.hi-links h3{margin:0 0 4px;font:800 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.hi-links a{color:rgba(226,224,255,.74);font-weight:800;font-size:14px}
.hi-copy{margin:12px 0 0;text-align:center;font-size:13px;color:rgba(226,224,255,.7);text-shadow:0 1px 3px rgba(0,0,0,.8)}
.hi-copy a{color:rgba(226,224,255,.6);font-weight:700}
@media(max-width:860px){.hi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hi-cols{grid-template-columns:1fr}.hi-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.hi-grid{grid-template-columns:1fr}.home-info{margin-top:30px;padding:12px;--cut:18px}.hi-links{padding:18px}}

/* back to the top of the setup (index.html #cfgTop): the amber arcade
   button, bottom right, once the reading below the setup is in view */
#cfgTop{--ch:11px;--bw:3px;position:fixed;z-index:8;right:calc(var(--adR) + max(18px,env(safe-area-inset-right)));
  bottom:calc(var(--adB) + max(18px,env(safe-area-inset-bottom)));width:50px;height:50px;padding:0;border:0;cursor:pointer;isolation:isolate;
  display:flex;align-items:center;justify-content:center;color:#2C1F0A;
  clip-path:polygon(0 0,calc(100% - calc(var(--ch) * var(--cut-k))) 0,100% calc(var(--ch) * var(--cut-k)),100% 100%,calc(var(--ch) * var(--cut-k)) 100%,0 calc(100% - calc(var(--ch) * var(--cut-k))));
  background:var(--amber-bd);filter:drop-shadow(0 5px 0 var(--amber-sh)) drop-shadow(0 10px 18px rgba(0,0,0,.35));
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);transition:opacity .2s,transform .25s cubic-bezier(.3,1.4,.5,1),visibility 0s .25s,filter .12s}
#cfgTop::before{content:'';position:absolute;inset:var(--bw);z-index:-1;
  clip-path:polygon(0 0,calc(100% - (calc(var(--ch) * var(--cut-k)) - var(--bw))) 0,100% calc(calc(var(--ch) * var(--cut-k)) - var(--bw)),100% 100%,calc(calc(var(--ch) * var(--cut-k)) - var(--bw)) 100%,0 calc(100% - (calc(var(--ch) * var(--cut-k)) - var(--bw))));
  background:var(--amber) linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 45%,rgba(0,0,0,.1));box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
#cfgTop.on{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .25s cubic-bezier(.3,1.4,.5,1),visibility 0s,filter .12s}
#cfgTop.on:hover{transform:translateY(-3px);filter:brightness(1.07) drop-shadow(0 7px 0 var(--amber-sh)) drop-shadow(0 12px 20px rgba(0,0,0,.35))}
#cfgTop.on:active{transform:translateY(2px);filter:drop-shadow(0 2px 0 var(--amber-sh))}
#config:not(.on) ~ #cfgTop, #config.field-hidden ~ #cfgTop, html.framed #cfgTop, html.watch #cfgTop{display:none}
html.framed #signInBtn, html.watch #signInBtn{display:none}

/* Settings, with room to breathe: more space around and between every part
   (only inside Settings; the same pieces elsewhere keep their own spacing) */
.settings-card .m-hd{padding:28px 30px 0;margin-bottom:20px}
.settings-card .set-tabs{margin:0 30px 22px}
.settings-card .set-tabs button{padding:12px 10px}
.settings-card .settings-bd{padding:0 30px 30px;gap:18px}
.settings-bd > .grp{padding:24px 26px}
.settings-bd .opts{gap:26px 30px}
.settings-bd .opt label{margin-bottom:12px}
.settings-bd .grp-h{margin-top:20px}
.settings-bd .snd{gap:26px}
.settings-bd .snd-vol{gap:16px}
.settings-bd .snd-f{gap:12px}
.settings-bd .snd-grid, .settings-bd .snd-tracks{gap:10px}
.settings-bd .snd-grid button{padding:13px 14px}
.settings-bd .snd-tracks button{padding:12px 14px}
.settings-bd .keys{gap:12px}
.settings-bd .kb{padding:14px 16px}
@media(max-width:640px){
  .settings-card .m-hd{padding:22px 18px 0;margin-bottom:16px}
  .settings-card .set-tabs{margin:0 16px 16px}
  .settings-card .settings-bd{padding:0 16px 22px;gap:14px}
  .settings-bd > .grp{padding:18px 16px}
  .settings-bd .opts{gap:20px}
  .settings-bd .snd{gap:20px}
}

/* the menu's account link: "Sign in", or the signed-in player's name */

/* ── THE FLAT BUTTON ──
   The lobby's Back to setup / Close room look (css/room.css .rl-fbtn) for
   the quieter buttons: a dark, see-through chip with no stripes, ring or
   drop. A .big given .flat drops its own look; :not(#_) only lifts the rule
   over the per-button sizes set elsewhere. .pri amber, .teal Quick Fill,
   .danger a red icon. */
.big.flat:not(#_){--chamfer:9px;border:0;height:auto;min-height:42px;padding:9px 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background-color:rgba(0,0,0,.34);color:#fff;filter:none;text-shadow:none;text-transform:none;letter-spacing:0;font:900 14px/1.2 var(--disp)}
.big.flat::before,.big.flat::after{display:none}
.big.flat:not(#_):hover{background-color:rgba(0,0,0,.52);filter:none;transform:translateY(-1px)}
.big.flat:not(#_):active{filter:none;transform:translateY(1px)}
.big.flat:not(#_)[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.big.flat.pri:not(#_){background-color:var(--amber);color:#2C1F0A}
.big.flat.pri:not(#_):hover{background-color:#FFD43B}
.big.flat.teal:not(#_){background-color:#1E9488}
.big.flat.teal:not(#_):hover{background-color:#22A99B}
.big.flat.danger svg{color:#FF8F84}
.big.flat.danger:not(#_):hover{background-color:rgba(200,48,64,.9)}
.big.flat.danger:hover svg{color:#fff}
/* over the river (the start line, the winner's screen): a little darker to stay readable */
#introStart .big.flat:not(#_),#champ .big.flat:not(#_){background-color:rgba(10,8,34,.66)}
#introStart .big.flat:not(#_):hover,#champ .big.flat:not(#_):hover{background-color:rgba(10,8,34,.82)}
#champ .ch-acts-row2 .big.flat:not(#_){min-height:46px;font-size:15px}
#rosterSaveConfirm.flat{width:100%;min-height:48px;font-size:16px}

/* ─────────── VAR: THE FINISH, AGAIN, SLOWLY ─────────── */
#varView{position:fixed;inset:0;z-index:40;pointer-events:none;color:#fff;font-family:var(--disp)}
#varView::before{content:'';position:absolute;inset:0;box-shadow:inset 0 0 180px rgba(2,6,16,.6);pointer-events:none}
.var-top{position:absolute;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));
  display:flex;align-items:center;gap:10px}
.var-badge{--cut:10px;--bg:rgba(8,10,28,.9);--bd:rgba(124,247,255,.4);display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px}
.var-badge b{padding:6px 9px;background:#7CF7FF;color:#05131C;font:900 15px/1 var(--mono);letter-spacing:.14em;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}
.var-badge span{font:900 13px var(--disp);letter-spacing:.06em;text-transform:uppercase}
.var-clock{--cut:10px;--bg:rgba(8,10,28,.9);--bd:rgba(124,247,255,.25);padding:9px 12px;font:700 15px/1 var(--mono);color:#7CF7FF;font-variant-numeric:tabular-nums;min-width:84px;text-align:center}
.var-x{--cut:10px;--bg:rgba(8,10,28,.9);--bd:rgba(255,255,255,.22);margin-left:auto;pointer-events:auto;height:40px;padding:0 18px;border:0;cursor:pointer;
  color:#fff;font:900 13px var(--disp);letter-spacing:.06em;text-transform:uppercase}
.var-x:hover{--bg:#7CF7FF;color:#05131C}
.var-call{position:absolute;left:50%;top:calc(max(14px,env(safe-area-inset-top)) + 64px);transform:translateX(-50%);text-align:center;
  padding:10px 26px 12px;background:linear-gradient(180deg,rgba(8,10,28,.92),rgba(8,10,28,.78));border-top:2px solid #7CF7FF;
  animation:varIn .35s cubic-bezier(.2,.9,.3,1.2);max-width:calc(100vw - 32px)}
.var-call[hidden]{display:none}
.var-call small{display:block;font:800 11px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:#7CF7FF}
.var-call b{display:block;margin-top:4px;font:900 clamp(20px,3.4vw,34px)/1.12 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.var-call b[hidden]{display:none}
.var-call.ok{border-top-color:#FFD84A;animation:varOk .5s ease}
.var-call.ok small{color:#FFD84A}
@keyframes varIn{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes varOk{0%{transform:translateX(-50%) scale(1)}40%{transform:translateX(-50%) scale(1.06)}100%{transform:translateX(-50%) scale(1)}}
.var-home{--cut:12px;--bg:rgba(8,10,28,.88);--bd:rgba(124,247,255,.25);position:absolute;right:max(16px,env(safe-area-inset-right));
  top:calc(max(14px,env(safe-area-inset-top)) + 58px);width:230px;padding:10px 12px}
.var-home[hidden]{display:none}
.var-home small{display:block;margin-bottom:6px;font:800 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#7CF7FF}
.var-home ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.var-home li{display:flex;align-items:center;gap:8px;animation:varIn2 .3s ease}
.var-home li em{flex:none;width:18px;height:18px;display:grid;place-items:center;border-radius:5px;font:800 11px var(--mono);font-style:normal;background:rgba(255,255,255,.12)}
.var-home li:first-child em{background:#FFC94A;color:#2C1F0A}
.var-home li b{flex:1;min-width:0;font:900 14px var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid var(--c,#F1C40F);padding-left:7px}
.var-home li s{flex:none;text-decoration:none;font:700 11px var(--mono);color:rgba(233,242,240,.7);font-variant-numeric:tabular-nums}
@keyframes varIn2{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.var-bar{--cut:14px;--bg:rgba(8,10,28,.92);--bd:rgba(124,247,255,.3);position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);
  width:min(760px,calc(100vw - 32px));display:flex;align-items:center;gap:8px;padding:9px 12px;pointer-events:auto}
.var-bar>button{flex:none;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:9px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.var-bar>button:hover{background:rgba(255,255,255,.16)}
.var-bar>.var-play{width:46px;height:46px;background:#7CF7FF;color:#05131C;font-size:20px}
.var-bar>.var-play:hover{background:#B5FBFF}
.var-track{position:relative;flex:1;min-width:90px;height:40px;display:flex;align-items:center}
.var-track input{width:100%;margin:0;accent-color:#7CF7FF;cursor:pointer}
.var-track i{position:absolute;top:3px;width:4px;height:9px;border-radius:2px;background:#FFC94A;transform:translateX(-50%);pointer-events:none}
.var-track i.m2{background:#D4DCE4}
.var-track i[hidden]{display:none}
.var-speed{flex:none;display:flex;gap:3px;padding:3px;border-radius:9px;background:rgba(255,255,255,.06)}
.var-speed button{height:34px;padding:0 9px;border:0;border-radius:7px;background:none;color:rgba(233,242,240,.8);font:800 12px var(--disp);cursor:pointer}
.var-speed button[aria-pressed="true"]{background:#7CF7FF;color:#05131C}
@media(max-width:640px){
  .var-badge span{display:none}
  .var-home{top:auto;right:auto;left:max(16px,env(safe-area-inset-left));bottom:calc(max(18px,env(safe-area-inset-bottom)) + 120px);width:200px}
  .var-bar{flex-wrap:wrap;justify-content:center}
  .var-track{order:-1;flex-basis:100%}
}