/* Tumble 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-gap. */
:root {
  --bg: #10131c; --bg2: #1b2233; --panel: #222b40; --ink: #f3f5fa; --muted: #a9b2c7; --accent: #4fc3f7; --accent2: #ffb74d;
  --win: #ffd54f; --board: #0b0e16; --cell-gap: 4px; --vh: 100vh;
  --font: system-ui, var(--asgf-fallback, sans-serif);
  --chrome: 360px; /* header, meters, message, HUD and tools above and below the board */
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: radial-gradient(120% 90% at 50% 0%, var(--bg2), var(--bg)); 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: 230px; }
/* the platform's demo badge or replay bar sits fixed at the top (kits/shared/platform/badge.js, replay.js) */
html.tb-topbar { --chrome: 392px; }
html.tb-topbar .tb-stage { padding-top: 40px; }
html.tb-topbar .tb-modal { padding-top: 44px; }

.tb-stage { height: var(--vh); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 12px; max-width: 980px; margin: 0 auto; }
.tb-stage.shake { animation: tb-shake .45s; }
@keyframes tb-shake { 20% { transform: translate(-5px, 2px); } 40% { transform: translate(5px, -2px); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(3px, 0); } }

.tb-head { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 44px; }
.tb-head > div:nth-child(2) { flex: 1; min-width: 0; }
.tb-logo { height: 36px; width: 72px; flex: none; object-fit: contain; }
.tb-title { font-weight: 800; letter-spacing: .06em; font-size: 16px; white-space: nowrap; }
.tb-tag { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-chip { font-size: 12px; color: var(--muted); padding: 4px 8px; border: 1px solid #ffffff22; border-radius: 999px; white-space: nowrap; flex: none; }
@media (max-width: 520px) and (max-aspect-ratio: 20/21) { .tb-head .tb-chip { display: none; } } /* the rules screen and the demo badge say it on a phone */

.tb-meters { width: 100%; display: flex; gap: 8px; justify-content: center; }
.tb-meter { flex: 1; max-width: 240px; background: var(--panel); border-radius: 10px; padding: 4px 10px; text-align: center; transition: box-shadow .2s; }
.tb-meter .k { display: block; font-size: 12px; color: var(--muted); letter-spacing: .08em; }
.tb-meter .v { display: block; font-size: 18px; font-weight: 800; min-height: 22px; white-space: nowrap; }
.tb-meter.mult.on { box-shadow: 0 0 0 2px var(--accent2), 0 0 18px #ffb74d66; }
.bump { animation: tb-bump .35s; }
@keyframes tb-bump { 40% { transform: scale(1.18); } }

.tb-fs { width: 100%; display: flex; gap: 8px; justify-content: center; }
.tb-fs[hidden] { display: none; }
.tb-fs > div { background: #3a2a5a; border-radius: 10px; padding: 4px 10px; text-align: center; min-width: 92px; }
.tb-fs .k { display: block; font-size: 12px; color: #d9c8ff; }
.tb-fs .v { display: block; font-size: 18px; font-weight: 800; }

.tb-board-wrap { flex: none; }
.tb-board {
  position: relative; overflow: hidden;
  width: min(calc(100vw - 24px), calc((var(--vh) - var(--chrome)) * var(--cols, 6) / var(--rows, 5)), 720px);
  aspect-ratio: var(--cols, 6) / var(--rows, 5);
  background: var(--board); border-radius: 14px; box-shadow: inset 0 0 0 2px #ffffff14, 0 8px 30px #0008;
}
.tb-board.tease { box-shadow: inset 0 0 0 2px var(--accent2), 0 0 26px #ffb74daa; }
body.tb-free .tb-board { box-shadow: inset 0 0 0 2px #b388ff, 0 8px 30px #0008; }
/* the free-spins HUD takes a row: the board gives it room */
body.tb-free .tb-board { width: min(calc(100vw - 24px), calc((var(--vh) - var(--chrome) - 56px) * var(--cols, 6) / var(--rows, 5)), 720px); }

.tb-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;
}
.tb-face { width: 100%; height: 100%; background: radial-gradient(circle at 35% 30%, #ffffffaa 0 8%, transparent 9%), linear-gradient(150deg, var(--sym), var(--sym2)); }
.tb-face-img { display: block; object-fit: contain; background: none; pointer-events: none; -webkit-user-drag: none; }
.tb-orb .tb-face-img { filter: drop-shadow(0 0 8px var(--sym)); }
.shape-circle { border-radius: 50%; }
.shape-square { border-radius: 18%; }
.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-drop { border-radius: 50% 50% 50% 8%; transform: rotate(-45deg) scale(.86); }
.shape-pill { border-radius: 999px; height: 70%; }
.shape-ring { border-radius: 50%; background: radial-gradient(circle, transparent 0 34%, var(--sym) 35% 62%, var(--sym2) 63% 70%, transparent 71%); }
.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%); }
.shape-orb { border-radius: 50%; box-shadow: 0 0 12px var(--sym); }
.tb-orb-value { position: absolute; font-weight: 900; white-space: nowrap; font-size: clamp(13px, 3.2vw, 22px); color: #fff; text-shadow: 0 1px 3px #000, 0 0 6px #000; pointer-events: none; }

.tb-tile.win .tb-face { animation: tb-glow .6s ease-in-out infinite alternate; }
.tb-tile.win::after { content: ''; position: absolute; inset: 1px; border: 2px solid var(--win); border-radius: 12px; }
.tb-tile.win.plain .tb-face { animation: none; }
.tb-tile.win.plain::after { border-color: #ffffff99; border-width: 1px; }
.tb-tile.trigger::after { content: ''; position: absolute; inset: 1px; border: 2px solid var(--accent2); border-radius: 50%; box-shadow: 0 0 14px var(--accent2); }
.tb-tile.landed { animation: tb-land .45s ease-out; }
.tb-tile.charge .tb-face { animation: tb-charge .5s ease-in-out infinite alternate; }
@keyframes tb-glow { to { filter: brightness(1.45) drop-shadow(0 0 6px var(--win)); } }
@keyframes tb-land { 30% { transform: scale(1.18); filter: brightness(1.6); } }
@keyframes tb-charge { to { transform: scale(1.14); filter: brightness(1.8) drop-shadow(0 0 10px var(--sym)); } }
.tb-flyer { position: fixed; z-index: 30; pointer-events: none; font-weight: 900; font-size: 20px; color: #fff; padding: 6px 10px; border-radius: 999px;
  background: radial-gradient(circle, var(--accent2), #b26a00); box-shadow: 0 0 18px var(--accent2); }

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

.tb-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; }
.tb-hud-l { grid-area: bal; } .tb-spin { grid-area: spin; } .tb-hud-r { grid-area: win; } .tb-hud-bet { grid-area: bet; display: flex; align-items: center; justify-content: center; gap: 10px; }
.tb-hud .k { display: block; font-size: 12px; color: var(--muted); }
.tb-hud .v { display: block; font-size: 16px; font-weight: 800; white-space: nowrap; }
.tb-hud-l, .tb-hud-r { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tb-hud-r { text-align: right; align-items: flex-end; }
.tb-hud-bet .k { display: inline; }
.tb-hud-bet .v { display: inline-block; min-width: 72px; text-align: center; }
.tb-round { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--panel); font-size: 22px; font-weight: 800; }
.tb-round:disabled { opacity: .4; }
.tb-spin { width: 76px; height: 76px; border-radius: 50%; border: 0; background: radial-gradient(circle at 40% 35%, var(--accent), #0b6f9c); color: #fff;
  box-shadow: 0 4px 18px #4fc3f766; display: grid; place-items: center; }
.tb-spin svg { width: 42px; height: 42px; }
.tb-spin.busy svg { animation: tb-rot .8s linear infinite; }
.tb-spin:disabled { opacity: .45; }
@keyframes tb-rot { to { transform: rotate(360deg); } }
#tb-win.pop { animation: tb-bump .45s; color: var(--win); }
.tb-tools { width: 100%; max-width: 720px; display: flex; gap: 8px; justify-content: center; }
.tb-tool { min-width: 64px; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid #ffffff22; background: var(--panel); font-size: 13px; font-weight: 700; letter-spacing: .05em; }
.tb-tool[hidden] { display: none; }
.tb-tool.on { background: var(--accent); color: #002233; }
.tb-tool:disabled { opacity: .5; }

/* the unified RGS game menu owns balance, bet, PLAY and win (T10) */
html.asgf-menu .tb-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 .tb-tools { display: none !important; }
/* The message line is empty between rounds (no "PRESS SPIN TO PLAY"): no empty plate either. */
.tb-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 .tb-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 .tb-loader, html.asgf-menu .tb-overlay { bottom: var(--asgf-menu-h, 0px); }
html.asgf-menu .tb-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 .tb-stage { padding-bottom: 8px; }

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

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

.tb-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: 10px; font-size: 14px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: calc(100vw - 32px); text-align: center; }
.tb-toast.show { opacity: 1; pointer-events: auto; }
.tb-toast button { display: block; margin: 8px auto 0; min-height: 44px; padding: 0 14px; border-radius: 8px; border: 0; background: var(--accent); color: #002233; font-weight: 800; }
.tb-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 24; }

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

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

/* Landscape: any viewport not taller than 1.05 × its width, as the slot kit decides (kits/slot/client/main.js),
   so a 660×410 preview frame or an 844×390 phone on its side gets it as well as a desktop. The grid is the
   centre column and takes the height; header and tools sit right of it, the meters and the free-spins panel
   left of it, and balance, bet, spin and win form one bar along the bottom. --chrome is everything above and
   below the board: padding, the message line, the bar and their gaps. */
@media (min-aspect-ratio: 20/21) {
  :root { --side: clamp(150px, 24vw, 300px); --spin: 76px; --chrome: 146px; }
  html.tb-topbar { --chrome: 178px; }
  html.asgf-menu { --chrome: 70px; }
  .tb-stage { display: grid; max-width: 1400px; width: 100%; column-gap: 12px; row-gap: 8px; 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" "fs board tools" ". board ." ". msg ." "hud hud hud"; }
  .tb-head { grid-area: head; flex-direction: column; align-items: center; text-align: center; width: 100%; min-width: 0; }
  .tb-head > div:nth-child(2) { flex: none; width: 100%; }
  .tb-head .tb-chip { display: block; max-width: 100%; white-space: normal; }
  .tb-meters { grid-area: meters; flex-direction: column; align-items: stretch; width: min(100%, 240px); }
  .tb-meter { max-width: none; }
  .tb-fs { grid-area: fs; flex-direction: column; align-items: stretch; width: min(100%, 240px); }
  .tb-board-wrap { grid-area: board; }
  .tb-board, body.tb-free .tb-board { width: min(calc(100vw - 2 * var(--side) - 48px), calc((var(--vh) - var(--chrome)) * var(--cols, 6) / var(--rows, 5)), 820px); }
  .tb-msg { grid-area: msg; }
  .tb-tools { grid-area: tools; flex-direction: column; align-items: stretch; width: min(100%, 200px); }
  .tb-hud { grid-area: hud; max-width: 820px; grid-template-columns: 1fr auto auto 1fr; grid-template-areas: "bal bet spin win"; gap: 4px 16px; }
  .tb-spin { width: var(--spin); height: var(--spin); }
  .tb-spin svg { width: 55%; height: 55%; }
  .tb-meter .v { font-size: 22px; }
}
/* short landscape (a phone on its side, an embedded preview): a smaller spin button and meters, so the grid keeps
   most of the height; 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); --spin: 56px; --chrome: 120px; }
  html.tb-topbar { --chrome: 152px; }
  html.asgf-menu { --chrome: 60px; }
  .tb-stage { padding-top: 6px; padding-bottom: 6px; row-gap: 6px; }
  .tb-head { min-height: 0; gap: 4px; }
  .tb-head .tb-chip { display: none; } /* as on a phone held upright: the rules screen and the demo badge say it */
  .tb-tools { gap: 6px; }
  .tb-meter .v { font-size: 18px; }
  .tb-msg { min-height: 26px; }
  .tb-hud { gap: 2px 12px; }
}

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