/* Cascade kit client styles. 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). A game themes it through theme.json cssVars:
   --bg, --bg2, --panel, --ink, --muted, --accent, --accent2, --win, --board, --cell, --meter. */
:root {
  --bg: #0b0d1a; --bg2: #161a33; --panel: #1f2546; --ink: #eef1ff; --muted: #a3abcf; --accent: #7ee8fa; --accent2: #ffcf5a;
  --win: #ffe28a; --board: #080a16; --cell: #12162c; --meter: #c38bff; --cell-gap: 5px; --vh: 100vh;
  --font: system-ui, var(--asgf-fallback, sans-serif);
  --chrome: calc(372px + 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%; 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; }
html.asgf-menu { --chrome: calc(242px + 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.cs-topbar { --chrome: calc(404px + var(--asgf-room, 0px)); }
html.cs-topbar .cs-stage { padding-top: 40px; }
html.cs-topbar .cs-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) .cs-stage { padding-top: calc(8px + var(--asgf-room)) !important; }
html.asgf-character-room.cs-topbar:not(.asgf-short) .cs-stage { padding-top: calc(40px + var(--asgf-room)) !important; }
.cs-stage { height: var(--vh); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 12px; max-width: 980px; margin: 0 auto; }
.cs-stage.shake { animation: cs-shake .45s; }
@keyframes cs-shake { 20% { transform: translate(-4px, 3px); } 40% { transform: translate(4px, -3px); } 60% { transform: translate(-2px, 2px); } 80% { transform: translate(2px, 0); } }

.cs-head { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 44px; }
.cs-head > div:nth-child(2) { flex: 1; min-width: 0; }
.cs-logo { height: 38px; width: 64px; flex: none; object-fit: contain; }
.cs-title { font-weight: 800; letter-spacing: .1em; font-size: 16px; white-space: nowrap; text-transform: uppercase; }
.cs-tag { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-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) { .cs-head .cs-chip { display: none; } } /* the rules screen and the demo badge say it on a phone */

.cs-meters { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; max-width: 720px; }
.cs-meter-box { background: linear-gradient(180deg, var(--panel), #171c38); border: 1px solid #ffffff14; border-radius: 8px; padding: 4px 10px; text-align: center; min-width: 0; }
.cs-meter-box .k { display: block; font-size: 12px; color: var(--muted); letter-spacing: .1em; white-space: nowrap; }
.cs-meter-box .v { display: block; font-size: 18px; font-weight: 800; min-height: 22px; white-space: nowrap; }
.cs-meter-box.mult { min-width: 84px; }
.cs-meter-box.mult.on { border-color: var(--accent2); box-shadow: 0 0 14px #ffcf5a55; }
.cs-meter-box.mult.on .v { color: var(--accent2); }
.cs-charge .track { position: relative; height: 10px; margin: 4px 0 2px; border-radius: 5px; background: #0006; overflow: hidden; }
.cs-charge .track i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #6d4dd6, var(--meter)); border-radius: 5px; transition: width .25s ease-out; }
.cs-charge .v { font-size: 13px; min-height: 16px; }
.cs-charge:not(.live) { opacity: .55; }
.cs-charge.shimmer .track i { background-image: linear-gradient(100deg, #6d4dd6 0 40%, #f3e8ff 50%, var(--meter) 60% 100%); background-size: 300% 100%; animation: cs-shimmer 1.6s linear infinite; }
.cs-charge.full { border-color: var(--meter); box-shadow: 0 0 18px var(--meter); }
.cs-charge[hidden] { display: none; }
@keyframes cs-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.bump { animation: cs-bump .35s; }
@keyframes cs-bump { 40% { transform: scale(1.12); } }

.cs-fs { width: 100%; max-width: 720px; display: flex; gap: 8px; justify-content: center; }
.cs-fs[hidden] { display: none; }
.cs-fs > div { background: #2a1d55; border: 1px solid #c38bff44; border-radius: 8px; padding: 4px 10px; text-align: center; min-width: 88px; }
.cs-fs > div[hidden] { display: none; }
.cs-fs .k { display: block; font-size: 12px; color: #dccbff; letter-spacing: .06em; }
.cs-fs .v { display: block; font-size: 17px; font-weight: 800; white-space: nowrap; }

.cs-board-wrap { flex: none; position: relative; }
.cs-board {
  position: relative; overflow: hidden;
  width: min(calc(100vw - 24px), calc((var(--vh) - var(--chrome)) * var(--cols, 5) / var(--rows, 5)), 600px);
  aspect-ratio: var(--cols, 5) / var(--rows, 5);
  border-radius: 12px; box-shadow: inset 0 0 0 1px #ffffff1c, 0 10px 34px #000a;
  background: radial-gradient(120% 80% at 50% 0%, var(--cell), var(--board));
}
/* the cell lattice, under the tiles */
.cs-board::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--cols, 5) - 1px), #ffffff0d calc(100% / var(--cols, 5) - 1px) calc(100% / var(--cols, 5))),
    repeating-linear-gradient(180deg, transparent 0 calc(100% / var(--rows, 5) - 1px), #ffffff0d calc(100% / var(--rows, 5) - 1px) calc(100% / var(--rows, 5))); }
.cs-board.tease { box-shadow: inset 0 0 0 2px var(--accent2), 0 0 28px #ffcf5a99; }
body.cs-free .cs-board { box-shadow: inset 0 0 0 2px #c38bff, 0 10px 34px #000a; }
/* the free-spins HUD takes a row: the board gives it room */
body.cs-free .cs-board { width: min(calc(100vw - 24px), calc((var(--vh) - var(--chrome) - 56px) * var(--cols, 5) / var(--rows, 5)), 600px); }

.cs-tile {
  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: var(--cell-gap);
  display: grid; place-items: center; will-change: transform; z-index: 1;
}
.cs-face { width: 100%; height: 100%; background: radial-gradient(circle at 32% 28%, #ffffffb0 0 7%, transparent 8%), linear-gradient(160deg, var(--sym), var(--sym2)); }
.cs-face-img { display: block; object-fit: contain; background: none; pointer-events: none; -webkit-user-drag: none; }
.cs-wild .cs-face-img, .cs-scatter .cs-face-img { filter: drop-shadow(0 0 7px 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%); }
.shape-triangle { clip-path: polygon(50% 4%, 97% 94%, 3% 94%); }
.shape-hex { clip-path: polygon(25% 4%, 75% 4%, 98% 50%, 75% 96%, 25% 96%, 2% 50%); }
.shape-octagon { clip-path: polygon(30% 2%, 70% 2%, 98% 30%, 98% 70%, 70% 98%, 30% 98%, 2% 70%, 2% 30%); }
.shape-kite { clip-path: polygon(50% 2%, 92% 40%, 50% 98%, 8% 40%); }
.shape-star { clip-path: polygon(50% 2%, 61% 36%, 97% 36%, 68% 57%, 79% 92%, 50% 71%, 21% 92%, 32% 57%, 3% 36%, 39% 36%); }

.cs-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
/* each line has pathLength="1", so the trace runs its whole length whatever the board's size */
.cs-line { fill: none; stroke: var(--win); stroke-linecap: round; stroke-linejoin: round; opacity: .9; vector-effect: non-scaling-stroke;
  stroke-width: 5px; filter: drop-shadow(0 0 5px var(--win)); stroke-dasharray: 1; stroke-dashoffset: 1; animation: cs-trace .3s ease-out forwards; }
.cs-line.plain { stroke: #ffffffaa; stroke-width: 2px; filter: none; }
@keyframes cs-trace { to { stroke-dashoffset: 0; } }

.cs-tile.win .cs-face { animation: cs-glow .55s ease-in-out infinite alternate; }
.cs-tile.win::after { content: ''; position: absolute; inset: 2px; border: 2px solid var(--win); border-radius: 10px; }
.cs-tile.win.plain .cs-face { animation: none; }
.cs-tile.win.plain::after { border-color: #ffffff88; border-width: 1px; }
.cs-tile.trigger::after { content: ''; position: absolute; inset: 2px; border: 2px solid var(--accent2); border-radius: 50%; box-shadow: 0 0 14px var(--accent2); }
.cs-tile.purge::after { content: ''; position: absolute; inset: 2px; border: 2px dashed #ff8a65; border-radius: 10px; }
.cs-tile.landed { animation: cs-land .45s ease-out; }
.cs-tile.morph .cs-face { animation: cs-flash .5s ease-out; }
.cs-tile.wildmade .cs-face { animation: cs-wildflash .6s ease-out; }
@keyframes cs-glow { to { filter: brightness(1.4) drop-shadow(0 0 6px var(--win)); } }
@keyframes cs-land { 30% { transform: scale(1.16); filter: brightness(1.7); } }
@keyframes cs-flash { from { filter: brightness(2.4) saturate(.4); } }
@keyframes cs-wildflash { from { filter: brightness(2.6) drop-shadow(0 0 12px var(--accent)); transform: scale(1.15); } }

/* a power's banner over the board */
.cs-power { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9); z-index: 6; display: none; align-items: center; gap: 12px;
  padding: 10px 18px; border-radius: 10px; background: #0b0d1aee; border: 2px solid var(--kind, var(--accent)); box-shadow: 0 0 26px var(--kind, var(--accent)); pointer-events: none; }
.cs-power.show { display: flex; animation: cs-pop .3s ease-out forwards; }
@keyframes cs-pop { to { transform: translate(-50%, -50%) scale(1); } }
.cs-power .name { display: block; font-size: 22px; font-weight: 900; letter-spacing: .08em; color: var(--kind, var(--accent)); white-space: nowrap; }
.cs-power .cause { display: block; font-size: 12px; color: var(--muted); letter-spacing: .1em; white-space: nowrap; }
.kind-transformRandom { --kind: #c38bff; } .kind-placeWilds { --kind: #7ee8fa; } .kind-removeTypes { --kind: #ff8a65; } .kind-transformType { --kind: #9cff8a; }
/* the power's code-drawn icon, unless the theme names an image */
.cs-power-icon { position: relative; width: 44px; height: 44px; flex: none; border-radius: 10px; border: 2px solid var(--kind, var(--accent)); background: radial-gradient(circle, #ffffff22, transparent 70%); }
.cs-power-icon .cs-face-img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); }
.cs-power-icon:not(:has(img))::before { content: ''; position: absolute; inset: 9px; background: var(--kind, var(--accent)); }
.cs-power-icon.kind-transformRandom:not(:has(img))::before { clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.cs-power-icon.kind-placeWilds:not(:has(img))::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.cs-power-icon.kind-removeTypes:not(:has(img))::before { clip-path: polygon(15% 0, 50% 35%, 85% 0, 100% 15%, 65% 50%, 100% 85%, 85% 100%, 50% 65%, 15% 100%, 0 85%, 35% 50%, 0 15%); }
.cs-power-icon.kind-transformType:not(:has(img))::before { clip-path: polygon(0 35%, 60% 35%, 60% 10%, 100% 50%, 60% 90%, 60% 65%, 0 65%); }

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

.cs-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; }
.cs-hud-l { grid-area: bal; } .cs-spin { grid-area: spin; } .cs-hud-r { grid-area: win; } .cs-hud-bet { grid-area: bet; display: flex; align-items: center; justify-content: center; gap: 10px; }
.cs-hud .k { display: block; font-size: 12px; color: var(--muted); letter-spacing: .06em; }
.cs-hud .v { display: block; font-size: 16px; font-weight: 800; white-space: nowrap; }
.cs-hud-l, .cs-hud-r { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cs-hud-r { text-align: right; align-items: flex-end; }
.cs-hud-bet .k { display: inline; }
.cs-hud-bet .v { display: inline-block; min-width: 72px; text-align: center; }
.cs-round { width: 44px; height: 44px; border-radius: 10px; border: 1px solid #ffffff22; background: var(--panel); font-size: 22px; font-weight: 800; }
.cs-round:disabled { opacity: .4; }
.cs-spin { width: 78px; height: 78px; border-radius: 22px; border: 0; transform: rotate(45deg); background: linear-gradient(135deg, var(--accent), #2b7fa8); color: #031a24;
  box-shadow: 0 4px 20px #7ee8fa55; display: grid; place-items: center; }
.cs-spin svg { width: 40px; height: 40px; transform: rotate(-45deg); }
.cs-spin.busy svg { animation: cs-rot .9s linear infinite; }
.cs-spin:disabled { opacity: .45; }
@keyframes cs-rot { from { transform: rotate(-45deg); } to { transform: rotate(315deg); } }
#cs-win.pop { animation: cs-bump .45s; color: var(--win); }
.cs-tools { width: 100%; max-width: 720px; display: flex; gap: 8px; justify-content: center; }
.cs-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; }
.cs-tool.on { background: var(--accent); color: #031a24; }
.cs-tool:disabled { opacity: .5; }
.cs-tool[hidden] { display: none; }

/* the unified RGS game menu owns balance, bet, PLAY and win (T10) */
html.asgf-menu .cs-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 .cs-tools { display: none !important; }
/* The message line is empty between rounds (no "PRESS SPIN TO PLAY"): no empty plate either. */
.cs-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 .cs-modal { bottom: var(--asgf-menu-h, 0px); }
/* the loading screen and the overlays end above the menu's panel, as the stage does (--vh): its start button never sits behind it (render check, 6 Nov 2026) */
html.asgf-menu .cs-loader, html.asgf-menu .cs-overlay { bottom: var(--asgf-menu-h, 0px); }
html.asgf-menu .cs-loader { justify-content: safe center; overflow-y: auto; gap: min(16px, 2.5vh); padding: 8px 0; }
/* --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, and the tools went under the panel (render check, 6 Nov 2026) */
html.asgf-menu .cs-stage { padding-bottom: 8px; }

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

/* the pick: one card per offered power, each a 44 px+ tap target */
.cs-pick-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: min(720px, 100%); }
.cs-pick-opt { flex: 1 1 180px; max-width: 230px; min-height: 120px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px;
  border-radius: 12px; border: 2px solid var(--kind, var(--accent)); background: linear-gradient(180deg, #1f2546, #12162c); text-align: center; }
.cs-pick-opt:not(:disabled):hover, .cs-pick-opt:focus-visible { box-shadow: 0 0 18px var(--kind, var(--accent)); outline: none; }
.cs-pick-opt:disabled { cursor: default; opacity: .45; }
.cs-pick-opt.taken { opacity: 1; box-shadow: 0 0 22px var(--kind, var(--accent)); transform: translateY(-3px); }
.cs-pick-name { font-size: 18px; font-weight: 900; letter-spacing: .08em; color: var(--kind, var(--accent)); }
.cs-pick-desc { font-size: 13px; color: var(--ink); line-height: 1.35; }
.cs-pick-opt .cs-power-icon { width: 52px; height: 52px; }

.cs-modal { position: fixed; inset: 0; z-index: 25; display: none; align-items: center; justify-content: center; background: #000b; padding: 12px; }
.cs-modal.show { display: flex; }
.cs-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; }
.cs-sheet h2 { margin: 0 52px 8px 0; font-size: 18px; letter-spacing: .06em; }
.cs-sheet h3 { margin: 18px 0 6px; font-size: 14px; color: var(--accent); letter-spacing: .1em; }
.cs-sheet h4 { margin: 10px 0 6px; font-size: 13px; color: var(--meter); letter-spacing: .06em; }
.cs-sheet p, .cs-sheet li { font-size: 14px; line-height: 1.45; color: var(--ink); }
.cs-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 10px; border: 0; background: var(--panel); font-size: 22px; }
.cs-pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cs-pt-item, .cs-pt-row { display: flex; gap: 10px; align-items: center; background: var(--panel); border-radius: 8px; padding: 6px; }
.cs-pt-row { margin: 6px 0; }
.cs-pt-row p { margin: 0; }
.cs-pt-sym { position: relative; left: auto; top: auto; width: 44px; height: 44px; flex: none; padding: 2px; }
.cs-pt-item table, .cs-pt-list { border-collapse: collapse; font-size: 13px; }
.cs-pt-item caption { text-align: left; font-size: 12px; color: var(--muted); }
.cs-pt-item td, .cs-pt-list td { padding: 1px 6px; font-size: 13px; }
.cs-pt-item td.v, .cs-pt-list td.v { font-weight: 700; text-align: right; }
.cs-pt-list tr.retrigger td { color: #dccbff; }
.cs-pt-bench { color: var(--accent2) !important; }
.cs-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-size: 15px; }
.cs-set-row input[type=checkbox] { width: 28px; height: 28px; }
.cs-set-row input[type=range] { width: 50%; min-height: 44px; }
.cs-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; }

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

.cs-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; }
.cs-loader.hide { opacity: 0; pointer-events: none; visibility: hidden; }
.cs-loader .bar { width: min(260px, 70vw); height: 6px; background: var(--panel); border-radius: 3px; overflow: hidden; }
.cs-loader .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.cs-loader .start { min-width: 160px; min-height: 48px; border-radius: 10px; border: 0; background: var(--accent); color: #031a24; font-size: 16px; font-weight: 800; letter-spacing: .1em; }
.cs-loader .start:disabled { opacity: .5; }

/* reduced motion (device setting or the in-game choice): no shaking, no looping glows or shimmer, fades only */
html.cs-reduced *, html.cs-reduced *::after, html.cs-reduced *::before { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
html.cs-reduced .cs-stage.shake { animation: none; }
html.cs-reduced .cs-tile.win .cs-face { filter: brightness(1.35); }
html.cs-reduced .cs-line { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { html:not(.cs-motion-full) .cs-stage.shake { animation: none; } }

@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  :root { --chrome: 280px; }
  .cs-meter-box .v { font-size: 22px; }
}

/* 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 meters and the free-spins panel 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) left the board about
   60 px tall (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.cs-topbar { --chrome: 152px; }
  html.asgf-menu { --chrome: 60px; }
  .cs-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"; }
  /* the tools run down beside the meters (an iPhone SE on its side under the two-row RGS panel left 234 px: stacked under
     a row as tall as the meters, INFO went under the panel) */
  .cs-head { grid-area: head; flex-direction: column; align-items: center; text-align: center; min-height: 0; gap: 4px; min-width: 0; }
  .cs-head > div:nth-child(2) { flex: none; width: 100%; }
  .cs-head .cs-chip { display: none; }
  .cs-meters { grid-area: meters; grid-template-columns: 1fr; width: min(100%, 240px); }
  .cs-fs { grid-area: fs; flex-direction: column; align-items: stretch; width: min(100%, 240px); }
  .cs-board-wrap { grid-area: board; }
  .cs-board, body.cs-free .cs-board { width: min(calc(100vw - 2 * var(--side) - 48px), calc((var(--vh) - var(--chrome)) * var(--cols, 5) / var(--rows, 5)), 600px); }
  .cs-msg { grid-area: msg; min-height: 26px; }
  /* the tools wrap two to a row: stacked, the third went under the RGS panel */
  .cs-tools { grid-area: tools; flex-wrap: wrap; align-content: start; align-items: stretch; width: min(100%, 240px); gap: 6px; }
  .cs-tools > * { flex: 1 1 96px; }
  .cs-hud { grid-area: hud; max-width: 820px; grid-template-columns: 1fr auto auto 1fr; grid-template-areas: "bal bet spin win"; gap: 2px 12px; }
  .cs-spin { width: 56px; height: 56px; }
  .cs-meter-box .v { font-size: 16px; }
}

/* 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 .cs-board, html.asgf-board-fit body.cs-free .cs-board { width: min(calc(100vw - 24px), calc((var(--vh) - var(--chrome-fit)) * var(--cols, 5) / var(--rows, 5)), 600px); }
html.asgf-board-fit .cs-stage { justify-content: safe center; align-content: safe center; }

/* A short phone held upright (under 480 px above the RGS panel: platform/board-fit.js sets html.asgf-short): a compact
   header and meters, so the board gets the room (mobile-first audit, 7 Nov 2026: 47% of a 360×640 phone's width).
   Text stays >= 12 px. */
html.asgf-short .cs-stage { gap: 5px; padding-top: 4px; padding-bottom: 4px; }
html.asgf-short .cs-head { min-height: 32px; gap: 8px; }
html.asgf-short .cs-logo { height: 30px; width: 50px; }
html.asgf-short .cs-tag { display: none; }
html.asgf-short .cs-meter-box { padding: 2px 8px; }
html.asgf-short .cs-meter-box .v { font-size: 15px; min-height: 18px; }
html.asgf-short .cs-charge .track { height: 6px; margin: 2px 0 1px; }
html.asgf-short .cs-charge .v { font-size: 12px; min-height: 14px; }
html.asgf-short .cs-msg { min-height: 24px; }
/* The shortest phones held upright (360×480 with the browser bars and the operator's menu, 9 Nov 2026: the board at 49%
   of the width): the message, hidden between wins, lies over the board's foot instead of keeping a row of its own. */
@media (max-height: 560px) {
  html.asgf-short .cs-stage { position: relative; }
  html.asgf-short .cs-msg { position: absolute; left: 0; right: 0; bottom: 4px; z-index: 3; pointer-events: none; }
}