/* Baize anthology originals (Tidebound, Glassworks, Velvet Circuit) as one game window.
   The window is the viewport (a browser tab or an operator's iframe). The scene fills it edge to edge; everything
   else is drawn over the scene: a thin HUD across the top, the control bar across the bottom (a rail down the right
   edge on short landscape windows), and every option, paytable, sheet and result card. The cameras frame their shot
   in the part the controls leave clear (--clear-r / --clear-b, measured by anthology.mjs) and keep drawing under the
   controls. Nothing scrolls and nothing sits outside the window.
   Shared kit: baize-ui.css (linked first: Plex type, button press, the stake row, the Quick play bolt, the key legend,
   the sound prompt) and baize-celebrate.css (linked last: the win card, loss note, ring and balance glow). Each game
   keeps its own colour through --accent, handed to the kit as --bz-accent. Nothing on a phone is under 11px. */
:root{color-scheme:dark;--bg:#0b1b21;--panel:#10252a;--panel-glass:#0d2026e6;--ink:#eee9dc;--muted:#b1bfbc;--accent:#d9c38d;--accent-up:#e6d3a2;--on-accent:#1f2019;--line:#63736d5c;--line-2:#eee9dc40;
  --serif:var(--bz-serif);--sans:var(--bz-sans);--mono:var(--bz-mono);
  --bz-accent:var(--accent);--bz-accent-up:var(--accent-up);--bz-on-accent:var(--on-accent);--bz-field:#00000040;--bz-field-up:#ffffff12;--bz-line:var(--line-2);
  --hud-h:56px;--rail-w:0px;--clear-r:0px;--clear-b:0px;--scene-bg:#0b3039;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
body[data-game=glassworks]{--scene-bg:#141c1d;--bg:#241c1a;--panel:#302421;--panel-glass:#2a1f1ce6;--accent:#ebbd88;--accent-up:#f4cfa3;--muted:#ccb9a9}
body[data-game=velvet-circuit]{--scene-bg:#120a0f;--bg:#21151c;--panel:#30202a;--panel-glass:#2a1b24e6;--accent:#e4c296;--accent-up:#efd3ad;--muted:#c7b4bf}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:var(--scene-bg);color:var(--ink);font:14px/1.4 var(--sans);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button,a,input,select{touch-action:manipulation;-webkit-tap-highlight-color:transparent;outline-offset:3px}
.gw button{cursor:pointer;border:1.5px solid var(--line-2);background:transparent;border-radius:10px;min-height:44px;padding:6px 12px;font-family:var(--sans)}
.gw button:disabled{cursor:default;opacity:.45}
.gw button:hover:not(:disabled):not([aria-disabled=true]){background:#ffffff0d}
:focus-visible{outline:2px solid var(--accent)}
.gw button[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:#dfcc9420}
input{background:transparent;border:0;min-width:0}
[hidden]{display:none!important}
.gw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* The window */
.gw{position:fixed;inset:0;overflow:hidden;background:var(--scene-bg)}
.gw-stage{position:absolute;inset:0;overflow:hidden;isolation:isolate}
#scene{position:absolute;inset:0;background:var(--scene-bg)}
/* The flat (no-WebGL) scene is a fixed-ratio picture: it sits in the clear part, on its own background colour. */
#scene>svg{position:absolute;left:0;top:0;width:calc(100% - var(--clear-r));height:calc(100% - var(--clear-b));display:block}
/* Until the 3D scene is ready the window shows only its background; the scene then fades in. */
#scene[data-renderer="3d"]>*{animation:scene-in .45s ease-out both}
@keyframes scene-in{from{opacity:0}}
.gw-safe{position:absolute;z-index:4;left:0;top:0;right:var(--clear-r);bottom:var(--clear-b);pointer-events:none}
.skip-link{position:absolute;z-index:30;left:12px;top:8px;background:var(--accent);color:var(--on-accent);padding:10px 14px;border-radius:8px;transform:translateY(-200%)}
.skip-link:focus{transform:none}

/* Top HUD, translucent over the scene */
.gw-hud{position:absolute;left:0;right:0;top:0;z-index:8;display:flex;align-items:center;gap:8px;height:var(--hud-h);padding:6px 10px 6px 8px;padding-top:calc(6px + var(--safe-t));background:linear-gradient(#000000a6,#0000005c 70%,#0000);pointer-events:none}
.gw-hud>*{pointer-events:auto}
.gw .gw-home{width:44px;height:44px;padding:5px;border:0;border-radius:50%;flex:none;display:grid;place-items:center}
.gw .gw-home img{width:34px;height:34px;display:block}
.gw-hud h1{margin:0 auto 0 2px;font:normal 21px/1.05 var(--serif);letter-spacing:-.2px;min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-shadow:0 1px 6px #000c}
.is-embedded .gw-hud.no-home h1{margin-left:6px}
.gw-balance{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;margin-right:2px;text-shadow:0 1px 6px #000c;flex:none}
.gw-balance span{font-size:11px;color:var(--muted);letter-spacing:.02em}
.gw-balance strong{font:500 18px/1.2 var(--mono);font-variant-numeric:tabular-nums}
.gw .gw-icon{width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;display:inline-grid;place-items:center;background:#0000004d;border-color:var(--line-2);font-size:24px;line-height:1;flex:none}
.gw .gw-icon:hover:not(:disabled){background:#ffffff1a}
#sound .on,#sound[aria-pressed=true] .off{display:none}
#sound[aria-pressed=true] .on{display:inline}
#sound[aria-pressed=true]{background:#dfcc9426}

/* Bottom control bar (a right-edge rail on short landscape windows): game options, the stake row (baize-ui .bz-stake:
   Min, ½, the box, 2×, Max), then Replay, Auto, the Quick play bolt, Bank and the big button. */
.gw-bar{position:absolute;left:0;right:0;bottom:0;z-index:7;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 12px calc(8px + var(--safe-b));background:linear-gradient(color-mix(in srgb,var(--panel) 66%,transparent),color-mix(in srgb,var(--panel) 86%,transparent));border-top:1px solid #ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:0}
.gw-bar:focus{outline:0}
.gw-options{display:flex;align-items:center;gap:6px;flex:1 1 100%;min-width:0}
.gw-options:empty{display:none}
.gw-stake{display:flex;align-items:center;gap:8px;flex:1 1 100%;min-width:0}
.gw-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gw-stake .bz-stake{flex:1 1 auto;min-width:0;max-width:330px}
.gw .bz-stake button{border:0;border-radius:10px;padding:0 8px;min-width:44px;font:500 14px var(--mono);background:#ffffff12}
.gw .bz-stake button:hover:not(:disabled):not([aria-disabled=true]){background:#ffffff22}
.gw .bz-stake input{appearance:textfield;-moz-appearance:textfield;width:100%;background:#00000040;font:500 17px var(--mono);padding:0 4px}
.gw .bz-stake input::-webkit-inner-spin-button,.gw .bz-stake input::-webkit-outer-spin-button{appearance:none;margin:0}
.gw-mode{flex:1 1 0;min-width:0}
.gw-mode:empty{display:none}
.gw-actions{display:flex;gap:6px;flex:1 1 100%;min-width:0;align-items:stretch}
.gw .primary{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;min-height:52px;background:var(--accent);color:var(--on-accent);border:1.5px solid var(--accent);font-weight:700;font-size:16px;border-radius:12px;padding:6px 16px;white-space:nowrap;overflow:hidden}
.primary-label{font:700 16px/1.15 var(--sans);max-width:100%;overflow:hidden;text-overflow:ellipsis}
.primary-detail{font:500 12px/1.2 var(--sans);opacity:.82;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.primary-detail:empty{display:none}
.gw .primary:hover:not(:disabled):not([aria-disabled=true]){background:var(--accent-up)}
.gw .primary[data-tone=stop]{background:#16110f;color:var(--ink);border-color:var(--line-2);--bz-glow:#eee9dc44}
.gw .primary[data-tone=skip]{background:#000000a6;color:var(--accent);border-color:var(--accent)}
.gw .primary[data-tone=skip]:hover{background:#000000c4}
.gw .primary[aria-disabled=true]{background:color-mix(in srgb,var(--accent) 55%,#000);border-color:transparent}
.gw .gw-secondary{min-height:52px;border-radius:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;flex:none}
#replay{width:52px;padding:0}
#replay span{display:none}
.gw .gw-bank{flex:1 1 0;border-color:var(--accent);color:var(--accent);padding:6px 10px;font-size:15px}
.gw-actions:has(.gw-bank:not([hidden])) .primary{flex:1 1 0}
.gw-actions:has(.gw-bank:not([hidden])) #replay{display:none}
/* Auto play: a switch beside the big button (it gives way to Bank during a round), a summary that opens the sheet */
.gw-auto{flex:none;display:flex;gap:6px}
.gw-round-open:not(.gw-auto-running) .gw-auto{display:none}
.gw .gw-toggle{min-width:60px;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:4px 8px;border-color:var(--line);font:600 13px/1 var(--sans);color:var(--muted)}
.gw .gw-toggle[aria-pressed=true]{color:var(--ink);background:#ffffff0f}
.gw-switch{width:32px;height:18px;border-radius:999px;background:#00000066;box-shadow:inset 0 0 0 1.5px var(--line-2);position:relative;transition:background .2s}
.gw-switch::after{content:'';position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:var(--muted);transition:transform .2s var(--bz-ease)}
.gw-toggle[aria-pressed=true] .gw-switch{background:color-mix(in srgb,var(--accent) 70%,#000)}
.gw-toggle[aria-pressed=true] .gw-switch::after{transform:translateX(14px);background:var(--ink)}
.gw .gw-auto-edit{max-width:150px;min-height:52px;padding:0 10px;border-radius:12px;font:500 13px/1.2 var(--sans);white-space:normal;text-align:center}
.gw .bz-turbo{flex:none;min-width:52px;min-height:52px;border:1.5px solid var(--line);background:#0000004d;color:var(--muted);font:600 12px/1 var(--sans)}
.gw .bz-turbo[aria-pressed=true]{color:var(--bz-gold-soft);border-color:var(--bz-gold);background:#e3b04b1a}
.gw-auto-running .bz-turbo,.gw-auto-running #replay{display:none}
.gw-auto-settings{position:absolute;z-index:20;right:12px;bottom:calc(100% + 8px);width:min(460px,calc(100% - 24px));max-height:calc(100dvh - var(--hud-h) - 90px);overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;padding:12px 14px 14px;border-radius:16px;
  background:var(--bg);border:1px solid var(--line-2);box-shadow:0 18px 44px #000a;font-size:14px;color:var(--muted)}
.gw-auto-settings:not([data-open]){display:none}
.gw-sheet-title{grid-column:1/-1;margin:0;font:600 18px/1.2 var(--serif);color:var(--ink)}
.gw-auto-settings label{display:grid;gap:4px;align-content:end}
.gw-auto-settings select,.gw-auto-settings input{width:100%;min-height:44px;border-radius:8px;border:1.5px solid var(--line-2);background:#00000040;padding:0 8px;font:500 15px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.gw-auto-settings select{font:500 14px var(--sans)}
.gw-auto-settings option{background:var(--bg)}
.gw-auto-settings input::placeholder{color:var(--muted);opacity:.7;font-family:var(--sans)}
.gw-auto-settings input[aria-invalid]{border-color:#f08a7f}
.gw-auto-settings :disabled{opacity:.55}
#auto-extra{grid-column:1/-1}
#auto-extra:empty{display:none}
#auto-extra label{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--ink)}
#auto-extra select{width:auto;min-width:120px}
.gw-auto-adjust{display:flex;flex-wrap:wrap;align-content:flex-end;gap:4px 6px;min-width:0}
.gw-auto-adjust>span{flex:1 0 100%}
.gw-auto-adjust select{flex:1 1 0;width:auto;min-width:0}
.gw-auto-adjust input{flex:none;width:68px}
.gw-auto-wide{grid-column:1/-1}
.gw .gw-auto-done{grid-column:1/-1;min-height:46px;background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* Caption, notes, error and in-scene pieces */
/* Up to two lines. The vertical inset is a transparent border, not padding, so a clamped third line never peeks out. */
.gw-caption{position:absolute;z-index:4;left:50%;bottom:10px;transform:translateX(-50%);width:max-content;max-width:min(760px,calc(100% - 24px));padding:0 13px;border-radius:18px;background:#000000a6;border:7px solid transparent;border-inline-width:1px;box-shadow:0 0 0 1px #ffffff1f;font-size:13px;line-height:1.3;color:#eadfca;text-align:center;pointer-events:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;backdrop-filter:blur(4px);transition:opacity .15s}
.gw-caption strong{font-weight:600;color:var(--ink)}
#status-detail{color:var(--muted)}
.gw-state{color:var(--accent);margin-left:8px;padding-left:8px;border-left:1px solid #ffffff33}
.gw-state:empty{display:none}
.gw-stage:has(.scene-result:not([hidden])) .gw-caption,.gw-safe:has(.bz-cel:not([hidden])) .gw-caption,.gw-safe:has(.bz-cel-toast:not([hidden])) .gw-caption{opacity:0}
.gw-error,.gw-note{position:absolute;z-index:9;left:50%;bottom:52px;transform:translateX(-50%);margin:0;max-width:calc(100% - 24px);padding:8px 14px;border-radius:10px;font-size:13px;text-align:center;cursor:pointer}
.gw-error{background:#3a1612f0;border:1px solid #ffb39a66;color:#ffd1b0}
.gw-note{bottom:96px;background:#0b1114f0;border:1px solid var(--line-2);color:var(--ink)}
.gw-error:empty,.gw-note:empty{display:none}
.gw-overlay{position:absolute;inset:0;z-index:3;pointer-events:none}
.gw-error,.gw-note,.gw-watch-exit{pointer-events:auto}
.gw-overlay>*{pointer-events:auto}
.gw-watch-exit{position:absolute;z-index:9;right:10px;top:10px;background:#000a!important;font-size:13px;border-radius:999px!important}
/* The window ring for a result (baize-celebrate's bz-flash-*): over everything, never in the way. */
.gw-ring{position:absolute;inset:0;z-index:30;pointer-events:none}
/* The shared win card sits in the clear part of the scene, under the HUD and the bar. */
.gw-safe .bz-cel-layer{z-index:6}

/* Tidebound: the chamber ladder, a slim strip down the left edge of the scene */
.tide-ladder{position:absolute;left:8px;top:calc(var(--hud-h) + 6px);max-height:calc(100% - var(--hud-h) - 60px);display:flex;flex-direction:column;gap:3px;margin:0;padding:5px;list-style:none;border-radius:12px;background:#02101599;border:1px solid #9fd3c826;backdrop-filter:blur(3px);pointer-events:none;width:92px}
.tide-ladder li{flex:0 1 30px;min-height:14px;display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0 6px;border-radius:6px;font:500 12px/1 var(--mono);color:#cfe0da;border:1px solid transparent;font-variant-numeric:tabular-nums;overflow:hidden;white-space:nowrap}
.tide-ladder li em{font:normal 11px/1 var(--sans);color:#8fb0aa}
.tide-ladder li.reached{background:#d9c38d2e;color:var(--ink);border-color:#d9c38d66}
.tide-ladder li.reached em{color:var(--accent)}
.tide-ladder li.next{border:1px dashed var(--accent);color:var(--accent)}

/* Glassworks: a small colour key and a collapsible paytable at the top left of the scene */
.glass-key{position:absolute;left:10px;top:calc(var(--hud-h) + 6px);display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:calc(100% - 20px)}
.glass-legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;padding:6px 10px;border-radius:999px;background:#140d0bb3;border:1px solid #ebbd8833;font-size:12px;color:#e9dccd;backdrop-filter:blur(3px)}
.glass-legend i{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px;vertical-align:-1px}
.glass-legend b{font-weight:500;color:var(--accent)}
.gw-pay{border-radius:12px;background:#140d0bd9;border:1px solid #ebbd8833;font-size:12px;backdrop-filter:blur(3px);color:#e9dccd}
.gw-pay summary{list-style:none;cursor:pointer;min-height:36px;display:flex;align-items:center;gap:6px;padding:0 12px;border-radius:12px;font-weight:600}
.gw-pay summary::-webkit-details-marker{display:none}
.gw-pay summary:after{content:'▾';font-size:11px;color:var(--accent)}
.gw-pay[open] summary:after{content:'▴'}
.gw-pay summary:focus-visible{outline:2px solid var(--accent)}
.gw-pay table{border-collapse:collapse;margin:0 10px 8px;font:500 12px/1 var(--mono)}
.gw-pay td{padding:4px 8px 4px 0;font-variant-numeric:tabular-nums}
.gw-pay td:last-child{text-align:right;color:var(--ink)}
.gw-pay th{font:500 11px var(--sans);color:var(--muted);text-align:left;padding:2px 8px 4px 0}

/* Velvet Circuit: racer chips in the bar, the prediction switch beside the stake */
.racer-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;flex:1 1 auto;min-width:0}
.gw .racer-row button{min-height:44px;padding:4px 6px;display:flex;align-items:center;justify-content:center;gap:6px;font:600 13px/1.1 var(--sans);min-width:0;position:relative}
.racer-row button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gw .racer-row button[aria-pressed=true]{background:color-mix(in srgb,var(--racer) 26%,transparent);border-color:var(--racer);color:var(--ink)}
.racer-row button[data-place]:after{content:attr(data-place);position:absolute;top:-7px;right:3px;min-width:22px;height:18px;padding:0 4px;border-radius:9px;background:var(--accent);color:var(--on-accent);font:700 11px/18px var(--sans)}
.racer-row button[data-place='2nd']:after{background:#dfe6f2}
.gw .racer-row button[data-place='2nd']{border-color:#dfe6f2}
.racer-dot{width:10px;height:10px;border-radius:50%;background:var(--racer);box-shadow:0 0 0 3px #ffffff12;flex:none}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:5px;min-width:0;max-width:300px}
.gw .mode-switch button{min-height:44px;font:600 13px/1.1 var(--sans);padding:3px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0}
.mode-switch small{font:500 11px var(--mono);color:var(--muted);white-space:nowrap}
.mode-switch button[aria-pressed=true] small{color:var(--accent)}
.pick-hint{font-size:12px;color:var(--muted);white-space:nowrap}
.velvet-pick{position:absolute;inset:0;cursor:pointer}

/* Menu: an in-window sheet */
.gw-menu{position:fixed;inset:0;margin:auto;width:min(620px,calc(100% - 20px));height:min(640px,calc(100% - 20px));max-width:none;max-height:none;padding:0;border:1px solid var(--line-2);border-radius:16px;background:var(--bg);color:var(--ink);box-shadow:0 30px 80px #000a;overflow:hidden}
.gw-menu[open]{display:flex;flex-direction:column}
.gw-menu::backdrop{background:#02070dcc}
.gw-menu-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 6px 18px}
.gw-menu-head h2{margin:0;font:normal 24px var(--serif)}
.gw-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:0 12px 8px;border-bottom:1px solid var(--line)}
.gw .gw-tabs button{min-height:40px;border-radius:999px;font-weight:600;font-size:13px;border-color:transparent}
.gw .gw-tabs button[aria-selected=true]{background:#ffffff14;border-color:var(--line-2);color:var(--ink)}
.gw-menu-body{flex:1;min-height:0;overflow:auto;padding:14px 18px 18px;overscroll-behavior:contain}
.gw-menu-body p,.gw-menu-body li{font-size:13px;line-height:1.6;color:var(--muted)}
.gw-menu-body table{width:100%;border-collapse:collapse;font-size:12px;margin:12px 0}
.gw-menu-body th,.gw-menu-body td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line)}
.gw-menu-body th{font-weight:500;color:var(--accent)}
.gw-menu-body td{font-variant-numeric:tabular-nums}
.odds-summary{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:6px}
.odds-summary h3{font-size:12px;font-weight:600;margin:2px 0 4px;color:var(--accent)}
.odds-line{display:flex;justify-content:space-between;gap:12px;padding:4px 0;color:var(--muted);font-size:13px}
.odds-line strong{color:var(--ink);font:500 13px var(--mono)}
.demo-note{font-size:12px!important;border-top:1px solid var(--line);padding-top:10px}
#session-summary{margin:0 0 10px;color:var(--ink)}
.receipt{display:flex;flex-wrap:wrap;gap:6px 18px;padding:10px 12px;margin-bottom:10px;border:1px solid var(--line);border-radius:10px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.receipt>span:first-child{width:100%;color:var(--accent)}
.receipt strong{font:500 15px var(--mono);color:var(--ink);margin-left:4px}
.receipt .positive{color:#c0dec2}.receipt .negative{color:#ebaa9c}
#history-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#history-list li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:0}
#history-list li strong{font:500 15px var(--mono);color:var(--ink)}
#history-list li small{font-size:11px}
.gw-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.gw-setting>span:first-child{display:flex;flex-direction:column;font-weight:600}
.gw-setting small{font-weight:400;font-size:12px;color:var(--muted)}
.gw .gw-setting button{min-width:76px;border-radius:999px}
.gw-setting .bz-seg{background:#ffffff10;flex:none}
.gw .gw-setting .bz-seg button{min-width:0;min-height:38px;border:0;border-radius:9px;padding:0 12px;color:var(--muted);font:600 13px var(--sans)}
.gw .gw-setting .bz-seg button[aria-checked=true]{background:var(--accent);color:var(--on-accent)}
.gw-keys-title{margin:16px 0 8px;font:600 15px var(--sans);color:var(--ink)}
.gw-menu .bz-keys{font-size:13px;color:var(--muted)}
.gw-menu .bz-keys dt{color:var(--ink)}
.gw-menu .bz-keys kbd{background:#ffffff14;color:var(--ink);box-shadow:inset 0 -2px 0 #0006,0 0 0 1px var(--line-2)}

/* Watch mode: the controls step aside and the scene is framed on the whole window; Space still plays. */
body.watch .gw-hud,body.watch .gw-bar,body.watch .gw-overlay,body.watch .gw-caption{display:none}

/* In-scene cards: the Tidebound haul while you decide, and a replay's result (no credits used). Settled rounds use the
   shared win card instead. */
.scene-result{position:absolute;z-index:5;left:auto;right:4%;top:50%;transform:translateY(-50%);min-width:min(300px,78%);max-width:min(460px,92%);padding:14px 22px 15px;text-align:center;pointer-events:none;border:1px solid #e8d2a14d;border-radius:12px;background:radial-gradient(120% 140% at 50% 0,#1b262bf2,#0a1216eb);box-shadow:0 18px 50px #000a,inset 0 1px #ffffff14;backdrop-filter:blur(3px);animation:result-in-side .32s cubic-bezier(.2,.9,.3,1.25) both}
.scene-result p{margin:0;font-size:12px;letter-spacing:.06em;color:#d9d2c3;line-height:1.45}#result-kicker{text-transform:uppercase;letter-spacing:.16em;color:var(--accent);margin-bottom:2px}#result-figure{display:block;font:500 clamp(40px,4.6vw,58px)/1.05 var(--serif);letter-spacing:-1px;color:var(--ink);font-variant-numeric:tabular-nums}
.scene-result.win #result-figure{color:#ffe3a1}
.scene-result.partial #result-figure,.scene-result.partial #result-kicker{color:#cbbba5}
.scene-result.pending{border-color:#9fd3c85c;background:radial-gradient(120% 140% at 50% 0,#12303af0,#071419eb)}.scene-result.pending #result-kicker{color:#a9ddd2}.scene-result.pending #result-figure{color:#eef6ef}.scene-result.pending #result-line{color:#cfe0da}
.scene-result.loss #result-figure{color:#f0b2a4;font-size:clamp(34px,4.2vw,48px);letter-spacing:0}.scene-result.loss #result-kicker{color:#f0b2a4}.scene-result.replay{border-style:dashed}
body[data-game=velvet-circuit] .scene-result{top:calc(var(--hud-h) + 10px);left:3%;right:auto;transform:none;animation-name:result-in-top}
@keyframes result-in-top{from{opacity:0;transform:translateY(-10px) scale(.94)}to{opacity:1;transform:none}}@keyframes result-in-side{from{opacity:0;transform:translate(14px,-50%) scale(.9)}to{opacity:1;transform:translate(0,-50%) scale(1)}}
.result-map{display:grid;grid-template-columns:repeat(3,15px);gap:3px;justify-content:center;margin:9px auto 1px}.result-map i{display:block;width:15px;height:15px;border-radius:3px;background:var(--tile)}.result-map .dim{opacity:.22;filter:saturate(.4)}.result-map .none{opacity:.55}.result-map .pay{box-shadow:0 0 0 1.5px #fff3cf,0 0 10px var(--tile)}

/* Phone widths: the in-scene card is a slim strip at the foot of the scene. */
@media(max-width:730px){
  .scene-result,body[data-game] .scene-result{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:'figure kicker' 'figure line';column-gap:14px;align-items:center;text-align:left;top:auto;bottom:8px;left:10px;right:10px;width:auto;min-width:0;max-width:none;padding:8px 14px 9px;transform:none;animation-name:result-in-top}
  .scene-result #result-figure,body[data-game] #result-figure{grid-area:figure;font-size:40px;line-height:1}
  #result-kicker{grid-area:kicker;align-self:end;margin:0;letter-spacing:.1em}#result-line{grid-area:line;align-self:start}
  .scene-result.loss #result-figure{font-size:26px;max-width:92px;line-height:1.05;text-align:center}
  .scene-result:has(.result-map:not([hidden])){grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:'figure kicker map' 'figure line line'}
  .result-map{grid-area:map;margin:0;grid-template-columns:repeat(3,12px);gap:2px}.result-map i{width:12px;height:12px}
  .gw-caption{font-size:12px;bottom:8px}
  #status-detail{display:none}
  .gw-hud h1{font-size:18px}
  .gw-note{bottom:60px}
}

/* Bar widths. Phones stack options / stake / actions in three slim rows (Velvet Circuit's bar stays under 170px: the
   prediction switch shares the stake row, which drops Min and Max); from 600px the stake and the actions share a row;
   wide windows put the whole bar on one row. */
@media(max-width:599px){
  .gw-bar{padding:8px 10px calc(8px + var(--safe-b))}
  .gw-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .gw-stake .bz-stake{max-width:none}
  .pick-hint{display:none}
  .gw .primary{min-height:50px;padding:6px 8px}
  .primary-label{font-size:15px}
  .gw .gw-bank{font-size:14px;padding:6px 6px}
  .gw .gw-secondary,.gw .gw-toggle,.gw .bz-turbo{min-height:50px}
  #replay{width:46px}
  .gw .gw-toggle{min-width:54px}
  .gw .bz-turbo{min-width:48px}
  .gw-auto-edit{display:none}
  body[data-game=velvet-circuit] .gw-stake .bz-stake{flex:0 0 auto;width:156px;grid-template-columns:44px minmax(0,1fr) 44px}
  body[data-game=velvet-circuit] #stake-min,body[data-game=velvet-circuit] #stake-max{display:none}
  .mode-switch{max-width:none}
  .mode-switch .chance{display:none}
  .gw .racer-row button{gap:4px;padding:4px 3px;font-size:12px}
}
@media(min-width:600px){
  .gw-bar{flex-wrap:wrap;padding:10px 14px calc(10px + var(--safe-b))}
  .gw-stake{flex:0 1 auto}
  .gw-actions{flex:1 1 300px;justify-content:flex-end}
  .gw .primary{flex:0 1 300px;min-width:190px}
  #replay{width:auto;padding:0 14px}
  #replay span{display:inline}
  .gw-actions:has(.gw-bank:not([hidden])) .primary{flex:0 1 240px}
  .gw .gw-bank{flex:0 1 220px}
  .gw-stake .bz-stake{width:300px}
  .mode-switch{width:270px}
}
@media(min-width:1180px){
  body:not([data-game=velvet-circuit]) .gw-options{flex:0 1 auto}
  .racer-row{flex:0 1 auto;grid-template-columns:repeat(4,minmax(96px,auto))}
  .gw-bar{flex-wrap:nowrap}
  body[data-game=velvet-circuit] .gw-bar{flex-wrap:wrap}
  .gw-actions{flex:1 1 auto}
}
@media(min-width:1640px){
  body[data-game=velvet-circuit] .gw-bar{flex-wrap:nowrap}
  body[data-game=velvet-circuit] .gw-options{flex:none}
  body[data-game=velvet-circuit] .racer-row{flex:none;grid-template-columns:repeat(4,auto)}
  body[data-game=velvet-circuit] .pick-hint{display:none}
}
@media(max-width:599px) and (min-aspect-ratio:0/1) and (max-aspect-ratio:1/1){
  .tide-ladder{right:8px;width:auto;max-height:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
  .tide-ladder li{flex:none;height:24px;font-size:11px;padding:0 5px}
}
@media(max-width:380px){
  .gw-hud{gap:5px;padding-right:6px}
  .gw-hud h1{font-size:16px}
  .gw-balance strong{font-size:16px}
  .gw-bar{padding:6px 8px calc(6px + var(--safe-b));gap:6px}
  .gw .racer-row button{font-size:11px;gap:3px;padding:4px 2px}
  .racer-dot{width:8px;height:8px}
  .tide-ladder li{padding:0 3px}
  .gw .bz-stake button{min-width:40px;padding:0 4px}
  body[data-game=velvet-circuit] .gw-stake .bz-stake{width:140px;grid-template-columns:40px minmax(0,1fr) 40px}
  .gw .mode-switch button{font-size:12px}
}
/* Short windows (landscape phones): the bar becomes a compact rail down the right edge, inside the window. */
@media(max-height:520px) and (min-aspect-ratio:13/10){
  :root{--hud-h:48px;--rail-w:min(250px,34vw)}
  .gw-hud{height:var(--hud-h)}
  .gw .gw-home,.gw .gw-icon{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}
  .gw-bar{top:0;left:auto;width:var(--rail-w);flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-end;gap:6px;padding:calc(var(--hud-h) + 4px) 10px calc(8px + var(--safe-b));border-top:0;border-left:1px solid #ffffff1a;background:linear-gradient(90deg,color-mix(in srgb,var(--panel) 62%,transparent),color-mix(in srgb,var(--panel) 86%,transparent))}
  .gw-options{flex:none;flex-direction:column;align-items:stretch;gap:6px}
  .racer-row{grid-template-columns:1fr 1fr;flex:none}
  .gw .racer-row button{min-height:38px}
  .gw .mode-switch button{min-height:40px}
  .pick-hint,.mode-switch .chance{display:none}
  .gw-stake{flex:none;flex-direction:column;align-items:stretch;gap:6px}
  .gw-stake .bz-stake{width:auto;max-width:none}
  .mode-switch{width:auto;max-width:none}
  #stake-min,#stake-max{display:none}
  .gw-stake .bz-stake,body[data-game=velvet-circuit] .gw-stake .bz-stake{grid-template-columns:44px minmax(0,1fr) 44px}
  .gw-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .gw-actions{flex:none;flex-wrap:wrap;gap:6px}
  .gw .bz-turbo span:not(.gw-sr){display:none}
  .gw .primary,.gw-actions:has(.gw-bank:not([hidden])) .primary{flex:1 1 100%;min-width:0;min-height:48px;padding:6px 10px}
  .primary-label{font-size:15px}
  .gw .gw-bank{flex:1 1 100%;min-height:44px;font-size:14px}
  #replay,.gw .gw-toggle,.gw .bz-turbo{flex:1 1 0;min-height:40px;width:auto}
  .gw .gw-toggle{flex-direction:row}
  .gw .bz-turbo{grid-auto-flow:column}
  #replay span{display:none}
  .gw-auto{flex:1 1 0}
  .gw-auto-edit{display:none}
  .gw-auto-settings{right:calc(100% + 8px);bottom:8px;width:min(420px,calc(100vw - var(--rail-w) - 24px));max-height:calc(100dvh - 16px)}
  .gw-caption{font-size:12px;bottom:8px;max-width:calc(100% - 100px)}
  #status-detail{display:none}
  .gw-hud h1{font-size:18px}
  .gw-balance strong{font-size:16px}
  .tide-ladder{max-height:calc(100% - var(--hud-h) - 48px);width:84px}
  .tide-ladder li{font-size:11px}
}
@media(max-height:400px) and (min-aspect-ratio:13/10){
  .gw-options{gap:4px}
  .racer-row{gap:4px}
  .gw .racer-row button{min-height:36px}
  .gw .mode-switch button{min-height:38px}
  .gw .primary,.gw-actions:has(.gw-bank:not([hidden])) .primary,.gw .gw-bank{min-height:44px}
  #replay,.gw .gw-toggle,.gw .bz-turbo{min-height:36px}
  .gw .bz-stake button,.gw .bz-stake input{height:38px;min-height:38px}
}
/* Mid-size desktop windows shorten the HUD a little. */
@media(min-width:731px) and (min-height:521px) and (max-height:640px){
  .gw-bar{padding-top:8px;padding-bottom:calc(8px + var(--safe-b))}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.scene-result{animation:none}}