/* Cluster reels kit client styles (the cascade kit's layout, with columns of changing heights). Responsive
   in real CSS pixels (no scaled stage), so tap targets stay >= 44 px and text >= 12 px at 360×640 (Gate B
   1.4). Mobile first: a phone held upright is the first screen. A game themes it through theme.json
   cssVars: --bg, --bg2, --panel, --ink, --muted, --accent, --accent2, --win, --board, --cell, --mult,
   --frame, --board-ratio; and theme.json backgrounds (base, free, portrait, freePortrait) as images. */
:root {
  --bg: #0b0d1a; --bg2: #161a33; --panel: #1f2546; --ink: #eef1ff; --muted: #a3abcf; --accent: #7ee8fa; --accent2: #ffcf5a;
  --win: #ffe28a; --board: #080a16; --cell: #12162c; --mult: #9fb6ff; --frame: #ffffff2a; --cell-gap: 3px; --vh: 100vh;
  --board-ratio: 5 / 6; /* the frame's width / height: a column of 6 has square cells */
  --font: system-ui, var(--asgf-fallback, sans-serif);
  --chrome: calc(330px + var(--asgf-room, 0px)); /* header, meters, message, HUD and tools above and below the board; the character's band (below) */
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; color: var(--ink); font-family: var(--font); background-color: var(--bg); }
body {
  overflow: hidden; -webkit-tap-highlight-color: transparent; user-select: none;
  background: var(--bg-portrait, var(--bg-base, none)) center / cover no-repeat, radial-gradient(140% 100% at 50% 100%, var(--bg2), var(--bg) 70%);
}
@media (min-aspect-ratio: 1/1) { body { background: var(--bg-base, none) center / cover no-repeat, radial-gradient(140% 100% at 50% 100%, var(--bg2), var(--bg) 70%); } }
body.cr-free { background: var(--bg-freePortrait, var(--bg-free, var(--bg-portrait, none))) center / cover no-repeat, radial-gradient(140% 100% at 50% 100%, var(--bg2), var(--bg) 70%); }
@media (min-aspect-ratio: 1/1) { body.cr-free { background: var(--bg-free, var(--bg-base, none)) center / cover no-repeat, radial-gradient(140% 100% at 50% 100%, var(--bg2), var(--bg) 70%); } }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
html.asgf-menu { --chrome: calc(210px + var(--asgf-room, 0px)); }
/* the platform's demo badge or replay bar sits fixed at the top (kits/shared/platform/badge.js, replay.js) */
html.cr-topbar { --chrome: calc(362px + var(--asgf-room, 0px)); }
html.cr-topbar .cr-stage { padding-top: 40px; }
html.cr-topbar .cr-modal { padding-top: 44px; }

/* The theme's character on an upright phone (platform/scene.js sets html.asgf-character-room): a band at the top of the
   stage where it stands, head and shoulders showing, behind the first row below it. Not on a short phone (no room). */
html.asgf-character-room:not(.asgf-short) { --asgf-room: min(15vh, 140px); }
html.asgf-character-room:not(.asgf-short) .cr-stage { padding-top: calc(8px + var(--asgf-room)) !important; }
html.asgf-character-room.cr-topbar:not(.asgf-short) .cr-stage { padding-top: calc(40px + var(--asgf-room)) !important; }
.cr-stage { height: var(--vh); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 12px; max-width: 980px; margin: 0 auto; }
.cr-stage.shake { animation: cr-shake .45s; }
@keyframes cr-shake { 20% { transform: translate(-4px, 3px); } 40% { transform: translate(4px, -3px); } 60% { transform: translate(-2px, 2px); } 80% { transform: translate(2px, 0); } }

.cr-head { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; position: relative; }
.cr-logo { height: 64px; max-width: min(78vw, 360px); object-fit: contain; filter: drop-shadow(0 2px 8px #0009); }
.cr-title-text { font-weight: 800; letter-spacing: .1em; font-size: 16px; white-space: nowrap; text-transform: uppercase; }
.cr-head .cr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cr-chip-mode { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--ink); padding: 4px 8px; border: 1px solid #ffffff33; border-radius: 6px; white-space: nowrap; background: #0008; }
@media (max-width: 720px) { .cr-head .cr-chip-mode { display: none; } } /* the rules screen and the demo badge say it on a phone */

.cr-meters { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 520px; }
.cr-meter-box { background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 70%, #000)); border: 1px solid #ffffff22; border-radius: 10px; padding: 3px 10px; text-align: center; min-width: 0; box-shadow: 0 2px 10px #0006; }
.cr-meter-box .k { display: block; font-size: 12px; color: var(--muted); letter-spacing: .1em; white-space: nowrap; }
.cr-meter-box .v { display: block; font-size: 18px; font-weight: 800; min-height: 22px; white-space: nowrap; }
.bump { animation: cr-bump .35s; }
@keyframes cr-bump { 40% { transform: scale(1.12); } }

.cr-fs { width: 100%; max-width: 520px; display: flex; gap: 8px; justify-content: center; }
.cr-fs[hidden] { display: none; }
.cr-fs > div { flex: 1; background: color-mix(in srgb, var(--mult) 22%, #0c0f2a); border: 1px solid color-mix(in srgb, var(--mult) 50%, transparent); border-radius: 10px; padding: 3px 10px; text-align: center; }
.cr-fs .k { display: block; font-size: 12px; color: var(--ink); letter-spacing: .06em; }
.cr-fs .v { display: block; font-size: 17px; font-weight: 800; white-space: nowrap; }

.cr-board-wrap { flex: none; position: relative; padding: 6px; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent2) 70%, #fff), color-mix(in srgb, var(--accent2) 60%, #000)); box-shadow: 0 10px 34px #000a; }
.cr-board {
  position: relative; overflow: hidden;
  width: min(calc(100vw - 36px), calc((var(--vh) - var(--chrome)) * var(--board-ratio)), 560px);
  aspect-ratio: var(--board-ratio);
  border-radius: 11px; box-shadow: inset 0 0 0 1px var(--frame);
  background: radial-gradient(120% 80% at 50% 0%, var(--cell), var(--board));
}
/* one column per reel, its cell lattice drawn at the column's own height */
.cr-col { position: absolute; top: 0; bottom: 0; left: calc(var(--c) * 100% / var(--cols)); width: calc(100% / var(--cols)); pointer-events: none;
  border-left: 1px solid #ffffff12;
  background: repeating-linear-gradient(180deg, transparent 0 calc(100% / var(--h, 5) - 1px), #ffffff14 calc(100% / var(--h, 5) - 1px) calc(100% / var(--h, 5))); }
.cr-col:first-child { border-left: 0; }
.cr-board.reshape .cr-col { animation: cr-reshape .5s ease-out; }
@keyframes cr-reshape { from { background-color: #ffffff22; } }
.cr-board.tease { box-shadow: inset 0 0 0 2px var(--accent2), 0 0 28px var(--accent2); }
/* the free-spins row takes a line: the board gives it room */
body.cr-free .cr-board { width: min(calc(100vw - 36px), calc((var(--vh) - var(--chrome) - 52px) * var(--board-ratio)), 560px); }
body.cr-free .cr-board-wrap { background: linear-gradient(180deg, color-mix(in srgb, var(--mult) 80%, #fff), color-mix(in srgb, var(--mult) 55%, #000)); }

.cr-tile {
  position: absolute; left: calc(var(--c) * 100% / var(--cols)); top: calc(var(--r) * 100% / var(--h));
  width: calc(100% / var(--cols)); height: calc(100% / var(--h)); padding: var(--cell-gap);
  display: grid; place-items: center; will-change: transform; z-index: 1;
  transition: top .28s ease-out, height .28s ease-out;
}
html.cr-reduced .cr-tile { transition: none; }
.cr-face { width: 100%; height: 100%; max-width: 100%; max-height: 100%; background: radial-gradient(circle at 32% 28%, #ffffffb0 0 7%, transparent 8%), linear-gradient(160deg, var(--sym), var(--sym2)); }
.cr-face-img { display: block; object-fit: contain; background: none; pointer-events: none; -webkit-user-drag: none; }
.cr-wild .cr-face-img, .cr-scatter .cr-face-img, .cr-mwild .cr-face-img { filter: drop-shadow(0 0 6px var(--sym)); }
.shape-circle { border-radius: 50%; }
.shape-square { border-radius: 16%; }
.shape-diamond { clip-path: polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%); }

/* a multiplier wild's value, always on the tile (README: held multiplier values are always visible) */
.cr-mult { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); z-index: 2; max-width: 92%;
  font-size: 18px; font-weight: 900; line-height: 1.05; letter-spacing: .02em; white-space: nowrap; color: #fff7d6;
  padding: 1px 6px; border-radius: 999px; background: #11163bdd; border: 1.5px solid var(--accent2); text-shadow: 0 1px 2px #000; }
.cr-mult:empty { display: none; }

.cr-tile.win .cr-face { animation: cr-glow .55s ease-in-out infinite alternate; }
.cr-tile.win::after { content: ''; position: absolute; inset: 1px; border: 2px solid var(--win); border-radius: 10px; box-shadow: 0 0 10px var(--win); }
.cr-tile.win.plain .cr-face { animation: none; }
.cr-tile.win.plain::after { border-color: #ffffffaa; border-width: 1px; box-shadow: none; }
.cr-tile.summing .cr-mult { animation: cr-sum .5s ease-out; border-color: var(--win); }
.cr-tile.held::before { content: ''; position: absolute; inset: 2px; border: 2px solid var(--mult); border-radius: 12px; box-shadow: 0 0 12px var(--mult); }
.cr-tile.trigger::after { content: ''; position: absolute; inset: 2px; border: 2px solid var(--accent2); border-radius: 50%; box-shadow: 0 0 14px var(--accent2); }
.cr-tile.landed { animation: cr-land .45s ease-out; }
.cr-tile.wildmade .cr-face { animation: cr-wildflash .6s ease-out; }
.cr-tile.multmade .cr-face { animation: cr-multflash .7s ease-out; }
@keyframes cr-glow { to { filter: brightness(1.35) drop-shadow(0 0 6px var(--win)); } }
@keyframes cr-land { 30% { transform: scale(1.14); filter: brightness(1.6); } }
@keyframes cr-wildflash { from { filter: brightness(2.6) drop-shadow(0 0 12px var(--accent)); transform: scale(1.15); } }
@keyframes cr-multflash { from { filter: brightness(2.6) drop-shadow(0 0 14px var(--mult)); transform: scale(1.2); } }
@keyframes cr-sum { 40% { transform: translateX(-50%) scale(1.3); } }

/* a cluster's amount, or a multiplier sum, over its cells */
.cr-chips { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.cr-chip { position: absolute; transform: translate(-50%, -50%); padding: 3px 10px; border-radius: 999px; font-size: 15px; font-weight: 900; white-space: nowrap;
  color: #1b1200; background: var(--win); box-shadow: 0 0 14px var(--win), 0 2px 6px #000a; animation: cr-chip .3s ease-out; }
.cr-chip.sum { color: #fff; background: #1a2257; border: 2px solid var(--mult); box-shadow: 0 0 14px var(--mult); }
.cr-chip.plain { color: var(--ink); background: #0b0d1add; box-shadow: none; border: 1px solid #ffffff55; }
@keyframes cr-chip { from { transform: translate(-50%, -30%) scale(.7); opacity: 0; } }

.cr-msg { width: 100%; max-width: 560px; min-height: 30px; display: grid; place-items: center; text-align: center; }
.cr-msg span { font-size: 15px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; padding: 3px 12px; border-radius: 999px; background: #0b0d1acc; }
.cr-msg.win span { color: var(--win); text-shadow: 0 0 10px color-mix(in srgb, var(--win) 55%, transparent); }

.cr-hud { width: 100%; max-width: 560px; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "bal spin win" "bet bet bet"; align-items: center; gap: 4px 8px;
  padding: 6px 10px; border-radius: 14px; background: #0b0d1ad0; border: 1px solid #ffffff1c; }
.cr-hud-l { grid-area: bal; } .cr-spin { grid-area: spin; } .cr-hud-r { grid-area: win; } .cr-hud-bet { grid-area: bet; display: flex; align-items: center; justify-content: center; gap: 10px; }
.cr-hud .k { display: block; font-size: 12px; color: var(--muted); letter-spacing: .06em; }
.cr-hud .v { display: block; font-size: 16px; font-weight: 800; white-space: nowrap; }
.cr-hud-l, .cr-hud-r { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cr-hud-r { text-align: right; align-items: flex-end; }
.cr-hud-bet .k { display: inline; }
.cr-hud-bet .v { display: inline-block; min-width: 72px; text-align: center; }
.cr-round { width: 44px; height: 44px; border-radius: 12px; border: 1px solid #ffffff33; background: var(--panel); font-size: 22px; font-weight: 800; }
.cr-round:disabled { opacity: .4; }
.cr-spin { width: 74px; height: 74px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent2) 80%, #fff); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 60%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 50%, #000));
  color: #1b1030; box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 45%, transparent); display: grid; place-items: center; }
.cr-spin svg { width: 38px; height: 38px; }
.cr-spin.busy svg { animation: cr-rot .9s linear infinite; }
.cr-spin:disabled { opacity: .45; }
@keyframes cr-rot { to { transform: rotate(360deg); } }
#cr-win.pop { animation: cr-bump .45s; color: var(--win); }
.cr-tools { width: 100%; max-width: 560px; display: flex; gap: 8px; justify-content: center; }
.cr-tool { min-width: 64px; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid #ffffff33; background: var(--panel); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.cr-tool.on { background: var(--accent); color: #1b1030; }
.cr-tool:disabled { opacity: .5; }
.cr-tool[hidden] { display: none; }

/* the unified RGS game menu owns balance, bet, PLAY and win (T10) */
html.asgf-menu .cr-hud { display: none; }
/* Every control is on the panel (Henrik and Jonny, 8 Nov 2026): 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 .cr-tools { display: none !important; }
/* The message line is empty between rounds: no empty plate either. */
.cr-msg:has(> span:empty) { visibility: hidden; }
html.asgf-menu .cr-modal { bottom: var(--asgf-menu-h, 0px); }
html.asgf-menu .cr-loader, html.asgf-menu .cr-overlay { bottom: var(--asgf-menu-h, 0px); }
html.asgf-menu .cr-loader { justify-content: safe center; overflow-y: auto; gap: min(16px, 2.5vh); padding: 8px 0; }
html.asgf-menu .cr-stage { padding-bottom: 8px; }

/* overlays */
.cr-overlay { position: fixed; inset: 0; z-index: 20; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: #05060ed9; text-align: center; padding: 16px; }
.cr-overlay.show { display: flex; animation: cr-in .25s ease-out; }
@keyframes cr-in { from { opacity: 0; transform: translateY(8px); } }
.cr-tier { font-size: clamp(34px, 11vw, 72px); font-weight: 900; letter-spacing: .06em; color: var(--win); text-shadow: 0 0 24px color-mix(in srgb, var(--win) 60%, transparent); }
.cr-tier.mega { color: #ffb3c7; } .cr-tier.epic { color: #c9b8ff; }
.cr-big-amount { font-size: clamp(28px, 9vw, 56px); font-weight: 900; }
.cr-feat-title { font-size: clamp(26px, 8vw, 48px); font-weight: 900; color: var(--win); letter-spacing: .06em; }
.cr-feat-big { font-size: clamp(22px, 7vw, 40px); font-weight: 800; }
.cr-feat-sub { font-size: 15px; color: var(--ink); max-width: 36ch; }
.cr-hint { font-size: 13px; color: var(--muted); margin-top: 12px; }
.cr-overlay.plain .cr-feat-big { color: var(--ink); }
.cr-vault-cells { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 520px; }
.cr-capsule { min-width: 72px; min-height: 44px; display: grid; place-items: center; padding: 6px 10px; border-radius: 12px; border: 2px solid var(--accent2); background: var(--panel); font-size: 14px; font-weight: 800; animation: cr-in .25s ease-out; }

.cr-modal { position: fixed; inset: 0; z-index: 25; display: none; align-items: center; justify-content: center; background: #000b; padding: 12px; }
.cr-modal.show { display: flex; }
.cr-sheet { position: relative; width: min(720px, 100%); max-height: calc(var(--vh) - 24px); overflow: auto; background: var(--bg2); border: 1px solid #ffffff1c; border-radius: 12px; padding: 16px 16px 20px; }
.cr-sheet h2 { margin: 0 52px 8px 0; font-size: 18px; letter-spacing: .06em; }
.cr-sheet h3 { margin: 18px 0 6px; font-size: 14px; color: var(--accent2); letter-spacing: .1em; }
.cr-sheet p, .cr-sheet li { font-size: 14px; line-height: 1.45; color: var(--ink); }
.cr-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 10px; border: 0; background: var(--panel); font-size: 22px; }
.cr-pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.cr-pt-item, .cr-pt-row { display: flex; gap: 10px; align-items: center; background: var(--panel); border-radius: 8px; padding: 6px; }
.cr-pt-row { margin: 6px 0; }
.cr-pt-row p { margin: 0; }
.cr-pt-sym { position: relative; width: 48px; height: 48px; flex: none; display: grid; place-items: center; }
.cr-pt-item table, .cr-pt-list { border-collapse: collapse; font-size: 13px; }
.cr-pt-item caption { text-align: left; font-size: 12px; color: var(--muted); }
.cr-pt-item td, .cr-pt-list td { padding: 1px 6px; font-size: 13px; }
.cr-pt-item td.v, .cr-pt-list td.v { font-weight: 700; text-align: right; }
.cr-pt-list tr.retrigger td { color: color-mix(in srgb, var(--mult) 60%, #fff); }
.cr-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-size: 15px; }
.cr-set-row input[type=checkbox] { width: 28px; height: 28px; }
.cr-set-row input[type=range] { width: 50%; min-height: 44px; }
.cr-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; }

.cr-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; }
.cr-toast.show { opacity: 1; pointer-events: auto; }
.cr-toast button { display: block; margin: 8px auto 0; min-height: 44px; padding: 0 14px; border-radius: 8px; border: 0; background: var(--accent); color: #1b1030; font-weight: 800; }
.cr-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 24; }

.cr-loader { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; transition: opacity .3s;
  background: var(--bg-portrait, var(--bg-base, none)) center / cover no-repeat, var(--bg); }
@media (min-aspect-ratio: 1/1) { .cr-loader { background: var(--bg-base, none) center / cover no-repeat, var(--bg); } }
.cr-loader .cr-logo { height: auto; width: min(80vw, 520px); max-height: 40vh; }
.cr-loader.hide { opacity: 0; pointer-events: none; visibility: hidden; }
.cr-loader .bar { width: min(260px, 70vw); height: 6px; background: var(--panel); border-radius: 3px; overflow: hidden; }
.cr-loader .bar i { display: block; height: 100%; width: 0; background: var(--accent2); transition: width .2s; }
.cr-loader .start { min-width: 180px; min-height: 52px; border-radius: 999px; border: 2px solid #fff8; background: var(--accent); color: #1b1030; font-size: 17px; font-weight: 900; letter-spacing: .12em; box-shadow: 0 4px 20px #0008; }
.cr-loader .start:disabled { opacity: .6; }

/* reduced motion (device setting or the in-game choice): no shaking, no looping glows, fades only */
html.cr-reduced *, html.cr-reduced *::after, html.cr-reduced *::before { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
html.cr-reduced .cr-stage.shake { animation: none; }
html.cr-reduced .cr-tile.win .cr-face { filter: brightness(1.3); }

@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  :root { --chrome: 380px; }
  html.asgf-menu { --chrome: 260px; }
  html.cr-topbar { --chrome: 412px; }
  .cr-meter-box .v { font-size: 22px; }
  .cr-logo { height: 84px; }
}

/* Short landscape (a phone on its side): the board is the centre column and takes the height; the logo and tools
   right of it, the meters and the free-spins panel left of it, the HUD one bar along the bottom. */
@media (min-aspect-ratio: 20/21) and (max-height: 540px) {
  :root { --side: clamp(140px, 23vw, 260px); --chrome: 110px; }
  html.cr-topbar { --chrome: 142px; }
  html.asgf-menu { --chrome: 50px; }
  .cr-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: "meters board head" "meters board tools" "fs board tools" ". msg ." "hud hud hud"; }
  .cr-head { grid-area: head; min-height: 0; }
  .cr-logo { height: auto; width: 100%; max-height: 90px; }
  .cr-head .cr-chip-mode { display: none; }
  .cr-meters { grid-area: meters; grid-template-columns: 1fr; width: min(100%, 240px); }
  .cr-fs { grid-area: fs; flex-direction: column; align-items: stretch; width: min(100%, 240px); }
  .cr-board-wrap { grid-area: board; }
  .cr-board, body.cr-free .cr-board { width: min(calc(100vw - 2 * var(--side) - 60px), calc((var(--vh) - var(--chrome)) * var(--board-ratio)), 560px); }
  .cr-msg { grid-area: msg; min-height: 26px; }
  .cr-tools { grid-area: tools; flex-wrap: wrap; align-content: start; align-items: stretch; width: min(100%, 240px); gap: 6px; }
  .cr-tools > * { flex: 1 1 96px; }
  .cr-hud { grid-area: hud; max-width: 820px; grid-template-columns: 1fr auto auto 1fr; grid-template-areas: "bal bet spin win"; gap: 2px 12px; padding: 2px 10px; }
  .cr-spin { width: 54px; height: 54px; }
  .cr-meter-box .v { font-size: 16px; }
}

/* Portrait, measured (platform/board-fit.js): 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. */
html.asgf-board-fit .cr-board, html.asgf-board-fit body.cr-free .cr-board { width: min(calc(100vw - 36px), calc((var(--vh) - var(--chrome-fit) - 12px) * var(--board-ratio)), 560px); }
html.asgf-board-fit .cr-stage { justify-content: safe center; align-content: safe center; }

/* A short phone held upright (platform/board-fit.js sets html.asgf-short): a compact header and meters, so the board
   gets the room. Text stays >= 12 px. */
html.asgf-short .cr-stage { gap: 5px; padding-top: 4px; padding-bottom: 4px; }
html.asgf-short .cr-head { min-height: 32px; }
html.asgf-short .cr-logo { height: 40px; }
html.asgf-short .cr-meter-box { padding: 1px 8px; }
html.asgf-short .cr-meter-box .v { font-size: 15px; min-height: 18px; }
html.asgf-short .cr-msg { min-height: 24px; }
/* The shortest phones held upright (390×560 and 360×480 with the browser bars and the operator's menu, 9 Nov 2026: the
   5×6 board at 53% and 39% of the width under Gate B's short sizes): the logo and the meters share one row, the message
   (hidden between wins) lies over the board's foot, and the gaps tighten, so the board gets the height. In free spins
   the free-spins row comes back under them. On the RGS only: there the HUD and tools are on the panel. */
@media (max-height: 640px) {
  html.asgf-menu.asgf-short .cr-stage { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "head meters" "board board"; column-gap: 10px; row-gap: 4px; padding-top: 2px; padding-bottom: 2px;
    justify-items: center; align-content: safe center; position: relative; }
  html.asgf-menu.asgf-short body.cr-free .cr-stage { grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "head meters" "fs fs" "board board"; }
  html.asgf-menu.asgf-short .cr-head { grid-area: head; min-height: 0; }
  html.asgf-menu.asgf-short .cr-logo { height: 34px; }
  html.asgf-menu.asgf-short .cr-meters { grid-area: meters; width: 100%; }
  html.asgf-menu.asgf-short .cr-meter-box { padding: 0 8px; }
  html.asgf-menu.asgf-short .cr-fs { grid-area: fs; }
  html.asgf-menu.asgf-short .cr-board-wrap { grid-area: board; padding: 4px; }
  html.asgf-menu.asgf-short.asgf-board-fit .cr-board, html.asgf-menu.asgf-short.asgf-board-fit body.cr-free .cr-board {
    width: min(calc(100vw - 36px), calc((var(--vh) - var(--chrome-fit) - 8px) * var(--board-ratio)), 560px); }
  html.asgf-menu.asgf-short .cr-msg { position: absolute; left: 0; right: 0; bottom: 4px; z-index: 3; pointer-events: none; }
}