/* Hold & Win kit client styles. Responsive in real CSS pixels (the cascade kit's approach), so tap
   targets stay >= 44 px and text >= 12 px at 360×640. A game themes it through theme.json cssVars:
   --bg, --bg2, --panel, --ink, --muted, --accent, --accent2, --win, --board, --cell, --coin, --locked,
   --mini, --minor, --major, --grand. */
:root {
  --bg: #0d0b16; --bg2: #1c1630; --panel: #241d3d; --ink: #f3efff; --muted: #b0a8cf; --accent: #ffd34d; --accent2: #7ee8fa;
  --win: #ffe28a; --board: #0a0814; --cell: #17122a; --coin: #ffcf5a; --locked: #3a2b10;
  --mini: #9cff8a; --minor: #7ee8fa; --major: #ff8a65; --grand: #ffd34d;
  --vh: 100vh; --hw-cell: 100px;
  --font: system-ui, var(--asgf-fallback, sans-serif);
  --chrome: 420px; /* header, ladder, feature bar, message, HUD and tools around the board */
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: radial-gradient(140% 100% at 50% 100%, var(--bg2), var(--bg) 70%); color: var(--ink); font-family: var(--font); }
body { overflow: hidden; -webkit-tap-highlight-color: transparent; user-select: none; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
html.asgf-menu { --chrome: 290px; }
html.hw-topbar { --chrome: 452px; }
@media (max-width: 560px) { :root { --chrome: 440px; } html.hw-topbar { --chrome: 472px; } }
html.hw-topbar .hw-stage { padding-top: 40px; }
html.hw-topbar .hw-modal { padding-top: 44px; }

.hw-stage { height: var(--vh); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 12px; max-width: 980px; margin: 0 auto; }

.hw-head { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 44px; }
.hw-head > div:nth-child(2) { flex: 1; min-width: 0; }
.hw-logo { height: 38px; width: 64px; flex: none; }
.hw-title { font-weight: 800; letter-spacing: .1em; font-size: 16px; white-space: nowrap; text-transform: uppercase; }
.hw-tag { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-chip { font-size: 12px; color: var(--muted); padding: 4px 8px; border: 1px solid #ffffff22; border-radius: 6px; white-space: nowrap; flex: none; }
@media (max-width: 520px) { .hw-head .hw-chip { display: none; } }
/* the game's own art when its theme names it (main.js): a background behind the page colours, a title logo in the header */
html.hw-has-bg, html.hw-has-bg body { background: var(--bg) center / cover no-repeat var(--hw-bg-art); }
@media (orientation: portrait) { html.hw-has-bg, html.hw-has-bg body { background-image: var(--hw-bg-art-portrait); } }
.hw-head .hw-logo-art { height: 44px; width: auto; max-width: min(46vw, 220px); object-fit: contain; }
html.hw-has-logo .hw-head .hw-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the fixed prize ladder: highest first, each a fixed multiple of the bet */
.hw-ladder { width: 100%; max-width: 720px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hw-rung { min-width: 0; text-align: center; border-radius: 8px; padding: 3px 6px; background: linear-gradient(180deg, var(--panel), #18132b); border: 1px solid color-mix(in srgb, var(--tier) 55%, transparent); --tier: var(--accent); }
.hw-rung .name { display: block; font-size: 12px; font-weight: 900; letter-spacing: .1em; color: var(--tier); white-space: nowrap; }
.hw-rung .amount { display: block; font-size: 15px; font-weight: 800; white-space: nowrap; }
.hw-rung .fixed { display: flex; justify-content: center; gap: 0 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.hw-rung .fixed span + span::before { content: '· '; }
@media (max-width: 560px) { .hw-rung .fixed { flex-direction: column; line-height: 1.2; } .hw-rung .fixed span + span::before { content: none; } .hw-rung { padding: 3px 2px; } }
.rung-mini { --tier: var(--mini); } .rung-minor { --tier: var(--minor); } .rung-major { --tier: var(--major); } .rung-grand { --tier: var(--grand); }
.hw-rung.hit { animation: hw-rung .9s ease-out; }
@keyframes hw-rung { 25% { transform: scale(1.08); box-shadow: 0 0 22px var(--tier); background: color-mix(in srgb, var(--tier) 35%, var(--panel)); } }

/* the feature bar: the respins counter (three pips) and the feature's paid amount */
.hw-fbar { width: 100%; max-width: 720px; display: flex; gap: 8px; justify-content: center; align-items: stretch; }
.hw-fbar > div { background: #2b2040; border: 1px solid #ffd34d44; border-radius: 8px; padding: 4px 12px; text-align: center; min-width: 110px; }
.hw-fbar .k { display: block; font-size: 12px; color: #f2deb0; letter-spacing: .08em; white-space: nowrap; }
.hw-fbar .v { display: block; font-size: 17px; font-weight: 800; white-space: nowrap; }
.hw-pips { display: inline-flex; gap: 6px; align-items: center; justify-content: center; height: 22px; vertical-align: middle; }
.hw-pips i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--accent); background: transparent; transition: background .2s; }
.hw-pips i.on { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.hw-pips.refill i { animation: hw-refill .6s ease-out; }
.hw-pips.refill i:nth-child(2) { animation-delay: .08s; } .hw-pips.refill i:nth-child(3) { animation-delay: .16s; }
@keyframes hw-refill { 0% { transform: scale(.3); } 60% { transform: scale(1.35); box-shadow: 0 0 16px var(--accent); } }
.hw-pips-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.hw-board-wrap { flex: none; position: relative; }
.hw-board {
  position: relative;
  width: min(calc(100vw - 24px), calc((var(--vh) - var(--chrome)) * var(--cols, 5) / var(--rows, 3)), 720px);
  aspect-ratio: var(--cols, 5) / var(--rows, 3);
  border-radius: 12px; padding: 0; box-shadow: 0 10px 34px #000a, inset 0 0 0 1px #ffffff1c;
  background: radial-gradient(120% 80% at 50% 0%, var(--cell), var(--board));
}
body.hw-feature .hw-board { box-shadow: 0 10px 34px #000a, inset 0 0 0 2px var(--accent), 0 0 30px #ffd34d44; }
body.hw-full .hw-board { box-shadow: 0 0 0 3px var(--grand), 0 0 50px var(--grand); }

/* the slot kit's reels (client/reels.js): one window per column, cells recycled while spinning */
.hw-reels { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); gap: 4px; padding: 0; transition: opacity .25s; }
.reel { position: relative; height: 100%; overflow: hidden; border-radius: 10px; background: linear-gradient(180deg, #00000066, transparent 18%, transparent 82%, #00000066); }
.reel .cell { position: absolute; left: 0; top: 0; width: 100%; height: var(--hw-cell); display: grid; place-items: center; will-change: transform; }
.reel .cell img { width: 86%; height: 86%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 0 6px #0009); }
.reel.blur .cell img { filter: blur(1.4px) brightness(1.15); transform: scaleY(1.08); }
.reel.anticipate { box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 30px #ffd34d88; animation: hw-tease .35s ease-in-out infinite alternate; }
@keyframes hw-tease { to { box-shadow: inset 0 0 0 3px #fff, inset 0 0 44px #ffd34dcc; } }
body.hw-feature .hw-reels { opacity: 0; }

/* the cell layer over the reels: coin amounts, the locked layer, respin cells and line marks */
.hw-cells { position: absolute; inset: 0; pointer-events: none; }
.hw-cell { position: absolute; left: calc(var(--c) * 100% / var(--cols)); top: calc(var(--r) * 100% / var(--rows));
  width: calc(100% / var(--cols)); height: calc(100% / var(--rows)); padding: 3px; display: grid; place-items: center; }
.hw-cell.empty::before { content: ''; position: absolute; inset: 4px; border-radius: 10px; background: linear-gradient(180deg, #0b0816, #1a1430); box-shadow: inset 0 0 0 1px #ffffff14; }
.hw-cell.locked::before { content: ''; position: absolute; inset: 4px; border-radius: 10px; background: radial-gradient(circle, color-mix(in srgb, var(--coin) 30%, var(--locked)), var(--locked)); box-shadow: inset 0 0 0 2px var(--coin); }
.hw-cell.spinning::after { content: ''; position: absolute; inset: 6px; border-radius: 8px; opacity: .8;
  background: repeating-linear-gradient(180deg, transparent 0 18%, #ffffff30 18% 22%, transparent 22% 40%, #ffd34d40 40% 46%);
  background-size: 100% 300%; animation: hw-respin .28s linear infinite; animation-delay: var(--spin-delay, 0ms); }
@keyframes hw-respin { from { background-position: 0 0; } to { background-position: 0 100%; } }
.hw-coin { position: relative; width: 86%; height: 86%; display: grid; place-items: center; z-index: 1; }
.hw-coin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hw-coin-value { position: relative; font-weight: 900; font-size: max(13px, calc(var(--hw-cell) * .2)); color: #2a1a00; text-shadow: 0 1px 0 #fff8; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hw-coin-tier { position: absolute; top: 14%; font-size: max(12px, calc(var(--hw-cell) * .11)); font-weight: 900; letter-spacing: .08em; color: #fff; text-shadow: 0 1px 3px #000; }
.hw-coin.prize .hw-coin-value { margin-top: 18%; color: #fff; text-shadow: 0 1px 3px #000; }
.hw-coin.prize-mini { --tier: var(--mini); } .hw-coin.prize-minor { --tier: var(--minor); } .hw-coin.prize-major { --tier: var(--major); }
.hw-cell.prize-hit .hw-coin { filter: drop-shadow(0 0 10px var(--tier)); }
.hw-cell.landed .hw-coin { animation: hw-land .4s ease-out; }
.hw-cell.lock .hw-coin { animation: hw-lock .35s ease-out; }
.hw-cell.collect .hw-coin { animation: hw-collect .7s ease-in-out; }
.hw-cell.stopped::before { animation: hw-stop .25s ease-out; }
.hw-cell.trigger::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; box-shadow: 0 0 0 2px var(--accent), 0 0 18px var(--accent); }
/* never below full size: an amount stays readable (>= 12 px) through the whole landing */
@keyframes hw-land { 0% { transform: translateY(-30%); opacity: .2; } 60% { transform: scale(1.12); } }
@keyframes hw-lock { 40% { transform: scale(.94); filter: brightness(1.6); } }
@keyframes hw-collect { 50% { transform: scale(1.12); filter: brightness(1.5); } }
@keyframes hw-stop { 0% { filter: brightness(1.8); } }
.hw-cell.win::after { content: ''; position: absolute; inset: 3px; border: 2px solid var(--win); border-radius: 10px; box-shadow: 0 0 12px var(--win); }
.hw-cell.win.plain::after { border-color: #ffffff88; border-width: 1px; box-shadow: none; }
.hw-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.hw-line { fill: none; stroke: var(--win); stroke-width: 5px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px var(--win)); stroke-dasharray: 1; stroke-dashoffset: 1; animation: hw-trace .35s ease-out forwards; }
.hw-line.plain { stroke: #ffffffaa; stroke-width: 2px; filter: none; }
@keyframes hw-trace { to { stroke-dashoffset: 0; } }

.hw-msg { width: 100%; max-width: 720px; min-height: 30px; display: grid; place-items: center; text-align: center; }
.hw-msg span { font-size: 15px; font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
.hw-msg.win span { color: var(--win); text-shadow: 0 0 10px #ffe28a88; }

.hw-hud { width: 100%; max-width: 720px; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "bal spin win" "bet bet bet"; align-items: center; gap: 4px 8px; }
.hw-hud-l { grid-area: bal; } .hw-spin { grid-area: spin; } .hw-hud-r { grid-area: win; } .hw-hud-bet { grid-area: bet; display: flex; align-items: center; justify-content: center; gap: 10px; }
.hw-hud .k { display: block; font-size: 12px; color: var(--muted); letter-spacing: .06em; }
.hw-hud .v { display: block; font-size: 16px; font-weight: 800; white-space: nowrap; }
.hw-hud-l, .hw-hud-r { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hw-hud-r { text-align: right; align-items: flex-end; }
.hw-hud-bet .k { display: inline; }
.hw-hud-bet .v { display: inline-block; min-width: 72px; text-align: center; }
.hw-round { width: 44px; height: 44px; border-radius: 10px; border: 1px solid #ffffff22; background: var(--panel); font-size: 22px; font-weight: 800; }
.hw-round:disabled { opacity: .4; }
.hw-spin { width: 76px; height: 76px; border-radius: 50%; border: 0; background: radial-gradient(circle at 35% 30%, #fff2b0, var(--accent) 45%, #b07d00); color: #2a1a00;
  box-shadow: 0 4px 20px #ffd34d55, inset 0 -4px 0 #0003; display: grid; place-items: center; }
.hw-spin svg { width: 40px; height: 40px; }
.hw-spin.busy svg { animation: hw-rot .9s linear infinite; }
.hw-spin:disabled { opacity: .45; }
@keyframes hw-rot { to { transform: rotate(360deg); } }
#hw-win.pop { animation: hw-bump .45s; color: var(--win); }
@keyframes hw-bump { 40% { transform: scale(1.12); } }
.hw-tools { width: 100%; max-width: 720px; display: flex; gap: 8px; justify-content: center; }
.hw-tool { min-width: 64px; min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid #ffffff22; background: var(--panel); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.hw-tool.on { background: var(--accent); color: #2a1a00; }
.hw-tool:disabled { opacity: .5; }

html.asgf-menu .hw-hud { display: none; }
/* Every control is on the panel (Henrik and Jonny, 8 Nov 2026: AUTO, TURBO and INFO slipped behind it): the kit's own
   tools are the panel's action buttons (platform/panel-actions.js), so none of them shows on the RGS. */
html.asgf-menu .hw-tools { display: none !important; }
/* The message line is empty between rounds (no "PRESS SPIN TO PLAY"): no empty plate either. */
.hw-msg:has(> span:empty) { visibility: hidden; }
/* the rules and settings (opened from the panel's INFO) and the autoplay choices end above the panel, as the stage does */
html.asgf-menu .hw-modal { bottom: var(--asgf-menu-h, 0px); }
/* --vh is already the height above the panel (client/main.js fit): padding it by the panel again left a short
   landscape phone with no room (render check, 6 Nov 2026); the loader and the overlays end above the panel */
html.asgf-menu .hw-stage { padding-bottom: 8px; }
html.asgf-menu .hw-loader, html.asgf-menu .hw-overlay { bottom: var(--asgf-menu-h, 0px); }
html.asgf-menu .hw-loader { justify-content: safe center; overflow-y: auto; gap: min(16px, 2.5vh); padding: 8px 0; }

/* overlays */
.hw-overlay { position: fixed; inset: 0; z-index: 20; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: #07050ecc; text-align: center; padding: 16px; }
.hw-overlay.show { display: flex; animation: hw-in .25s ease-out; }
@keyframes hw-in { from { opacity: 0; transform: translateY(8px); } }
.hw-tier { font-size: clamp(34px, 11vw, 72px); font-weight: 900; letter-spacing: .06em; color: var(--win); text-shadow: 0 0 24px #ffe28a99; }
.hw-tier.mega { color: #ff9e7a; } .hw-tier.epic { color: #d68bff; }
.hw-big-amount { font-size: clamp(28px, 9vw, 56px); font-weight: 900; }
.hw-feat-title { font-size: clamp(26px, 8vw, 48px); font-weight: 900; color: var(--accent); letter-spacing: .06em; }
.hw-feat-sub { font-size: 15px; color: var(--muted); max-width: 40ch; }
.hw-hint { font-size: 13px; color: var(--muted); margin-top: 12px; }
.hw-grand .hw-feat-title { color: var(--grand); font-size: clamp(40px, 13vw, 92px); text-shadow: 0 0 30px var(--grand); }
.hw-grand { background: radial-gradient(circle, #3a2a00ee, #07050ef2 70%); }
.hw-maxwin .hw-feat-title { color: var(--win); }

.hw-modal { position: fixed; inset: 0; z-index: 25; display: none; align-items: center; justify-content: center; background: #000b; padding: 12px; }
.hw-modal.show { display: flex; }
.hw-sheet { position: relative; width: min(720px, 100%); max-height: calc(var(--vh) - 24px); overflow: auto; background: var(--bg2); border: 1px solid #ffffff14; border-radius: 12px; padding: 16px 16px 20px; }
.hw-sheet h2 { margin: 0 52px 8px 0; font-size: 18px; letter-spacing: .06em; }
.hw-sheet h3 { margin: 18px 0 6px; font-size: 14px; color: var(--accent); letter-spacing: .1em; }
.hw-sheet p, .hw-sheet li { font-size: 14px; line-height: 1.45; color: var(--ink); }
.hw-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 10px; border: 0; background: var(--panel); font-size: 22px; }
.hw-pt-bench { color: var(--accent2) !important; }
.hw-pt-five li { margin: 4px 0; }
.hw-pt-picture { display: grid; grid-template-columns: repeat(5, 36px); gap: 4px; margin: 8px 0; }
.hw-pt-picture div { width: 36px; height: 36px; border-radius: 6px; background: #0b0816; box-shadow: inset 0 0 0 1px #ffffff1c; display: grid; place-items: center; }
.hw-pt-picture div.on { background: var(--locked); box-shadow: inset 0 0 0 2px var(--coin); }
.hw-pt-picture img { width: 28px; height: 28px; }
.hw-pt-list { border-collapse: collapse; font-size: 13px; }
.hw-pt-list td { padding: 3px 8px; font-size: 13px; }
.hw-pt-list td.name { font-weight: 900; letter-spacing: .08em; color: var(--tier, var(--accent)); }
.hw-pt-list td.v { font-weight: 700; text-align: right; }
.hw-pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.hw-pt-item, .hw-pt-row { display: flex; gap: 10px; align-items: center; background: var(--panel); border-radius: 8px; padding: 6px; }
.hw-pt-row { margin: 6px 0; } .hw-pt-row p { margin: 0; }
.hw-pt-sym { width: 44px; height: 44px; flex: none; }
.hw-pt-sym img { width: 100%; height: 100%; object-fit: contain; }
.hw-pt-item table { border-collapse: collapse; font-size: 13px; }
.hw-pt-item caption { text-align: left; font-size: 12px; color: var(--muted); }
.hw-pt-item td { padding: 1px 6px; font-size: 13px; }
.hw-pt-item td.v { font-weight: 700; text-align: right; }
.hw-pt-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.hw-pt-line { display: flex; gap: 4px; align-items: center; font-size: 12px; color: var(--muted); }
.hw-pt-line .mini { display: grid; grid-template-columns: repeat(5, 9px); gap: 1px; }
.hw-pt-line .mini i { width: 9px; height: 9px; background: #ffffff14; border-radius: 2px; }
.hw-pt-line .mini i.on { background: var(--win); }
.hw-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-size: 15px; }
.hw-set-row input[type=checkbox] { width: 28px; height: 28px; }
.hw-set-row input[type=range] { width: 50%; min-height: 44px; }
.hw-set-row select { min-height: 44px; max-width: 60%; background: var(--panel); border: 1px solid #ffffff33; border-radius: 8px; padding: 0 8px; font-size: 14px; }
.hw-auto-counts { display: flex; gap: 8px; flex-wrap: wrap; }
.hw-auto-counts button { min-width: 56px; min-height: 44px; border-radius: 8px; border: 1px solid #ffffff33; background: var(--panel); font-weight: 800; }
.hw-auto-counts button.on { background: var(--accent); color: #2a1a00; }
.hw-auto-hint { color: var(--accent2) !important; }
.hw-auto-start { margin-top: 10px; min-width: 140px; min-height: 48px; border-radius: 10px; border: 0; background: var(--accent); color: #2a1a00; font-size: 16px; font-weight: 800; }
.hw-auto-start:disabled { opacity: .45; }

.hw-toast { position: fixed; left: 50%; bottom: calc(110px + var(--asgf-menu-h, 0px)); transform: translateX(-50%); z-index: 22; background: var(--panel); padding: 10px 16px;
  border-radius: 8px; font-size: 14px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: calc(100vw - 32px); text-align: center; }
.hw-toast.show { opacity: 1; pointer-events: auto; }
.hw-toast button { display: block; margin: 8px auto 0; min-height: 44px; padding: 0 14px; border-radius: 8px; border: 0; background: var(--accent); color: #2a1a00; font-weight: 800; }
.hw-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 24; }

.hw-loader { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--bg); transition: opacity .3s; }
.hw-loader.hide { opacity: 0; pointer-events: none; visibility: hidden; }
.hw-loader .bar { width: min(260px, 70vw); height: 6px; background: var(--panel); border-radius: 3px; overflow: hidden; }
.hw-loader .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.hw-loader .start { min-width: 160px; min-height: 48px; border-radius: 10px; border: 0; background: var(--accent); color: #2a1a00; font-size: 16px; font-weight: 800; letter-spacing: .1em; }
.hw-loader .start:disabled { opacity: .5; }

/* reduced motion (device setting or the in-game choice): no looping glows, spins or bounces; fades only */
html.hw-reduced *, html.hw-reduced *::after, html.hw-reduced *::before { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
html.hw-reduced .hw-line { stroke-dashoffset: 0; }

@media (min-width: 900px) and (min-aspect-ratio: 4/3) { :root { --chrome: 330px; } }

/* Short landscape (a phone on its side, an embedded preview), as the tumble kit lays it out: the board is the centre
   column and takes the height; header and tools right of it, the prize ladder and the feature bar left of it, and the
   HUD one bar along the bottom. In a column a phone on its side under the RGS panel (844×390) had no room left for
   the board at all (mobile-first audit, 7 Nov 2026). Tap targets stay >= 44 px and text >= 12 px. */
@media (min-aspect-ratio: 20/21) and (max-height: 540px) {
  :root { --side: clamp(140px, 23vw, 260px); --chrome: 120px; }
  html.hw-topbar { --chrome: 152px; }
  html.asgf-menu { --chrome: 60px; }
  .hw-stage { display: grid; max-width: 1400px; width: 100%; column-gap: 12px; row-gap: 6px; padding-top: 6px; padding-bottom: 6px; align-content: start; justify-items: center;
    grid-template-columns: minmax(var(--side), 1fr) auto minmax(var(--side), 1fr); grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas: "ladder board head" "ladder board tools" "fbar board tools" ". msg ." "hud hud hud"; }
  /* the tools run down beside the ladder (an iPhone SE on its side under the two-row RGS panel left 234 px: stacked under
     a row as tall as the ladder, INFO went under the panel) */
  .hw-head { grid-area: head; flex-direction: column; align-items: center; text-align: center; min-height: 0; gap: 4px; min-width: 0; }
  .hw-head > div:nth-child(2) { flex: none; width: 100%; }
  .hw-head .hw-chip { display: none; }
  .hw-ladder { grid-area: ladder; grid-template-columns: 1fr 1fr; width: min(100%, 260px); }
  .hw-rung .fixed { flex-direction: column; line-height: 1.2; } .hw-rung .fixed span + span::before { content: none; }
  .hw-fbar { grid-area: fbar; flex-direction: column; align-items: stretch; width: min(100%, 240px); }
  .hw-board-wrap { grid-area: board; }
  .hw-board { width: min(calc(100vw - 2 * var(--side) - 48px), calc((var(--vh) - var(--chrome)) * var(--cols, 5) / var(--rows, 3)), 720px); }
  .hw-msg { grid-area: msg; min-height: 26px; }
  /* the tools wrap two to a row: stacked, the third went under the RGS panel */
  .hw-tools { grid-area: tools; flex-wrap: wrap; align-content: start; align-items: stretch; width: min(100%, 240px); gap: 6px; }
  .hw-tools > * { flex: 1 1 96px; }
  .hw-hud { grid-area: hud; max-width: 820px; grid-template-columns: 1fr auto auto 1fr; grid-template-areas: "bal bet spin win"; gap: 2px 12px; }
  .hw-spin { width: 56px; height: 56px; }
}

/* Portrait, measured (platform/board-fit.js, mobile-first audit 7 Nov 2026): the board takes the height the rest of the
   stage leaves instead of a fixed --chrome allowance, and the column sits in the middle of the space above the RGS
   panel, so a short phone gets the largest board that fits and a tall one no dead band. Landscape never has the class. */
html.asgf-board-fit .hw-board { width: min(calc(100vw - 24px), calc((var(--vh) - var(--chrome-fit)) * var(--cols, 5) / var(--rows, 3)), 720px); }
html.asgf-board-fit .hw-stage { justify-content: safe center; align-content: safe center; }