/* V2 game page: flight deck, glass tiles, multiplier readout, and the betting panel. */
/* The flight deck takes all the height the header and dock leave, and the
   dock sits at the bottom edge. */
.game { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(1440px, calc(100vw - var(--gutter) * 2)); height: 100vh; height: 100dvh; min-height: 560px; margin: 0 auto; padding: clamp(10px, 3vh, 32px) 0 max(clamp(8px, 1.8vh, 18px), env(safe-area-inset-bottom)); }

/* The deck floats a pixel or so, slowly; a dialog pushes it back a touch. */
.board { position: relative; flex: 1 1 auto; width: 100%; min-height: 210px; margin: clamp(8px, 1.4vh, 14px) auto 0; overflow: hidden; container-type: size; isolation: isolate; border: 1px solid rgba(92, 240, 126, .5); border-radius: 22px; background: #020605; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 26px rgba(43, 227, 107, .24), 0 0 70px rgba(43, 227, 107, .07), inset 0 0 24px rgba(43, 227, 107, .16); animation: board-float 7s ease-in-out infinite alternate; transition: scale .4s cubic-bezier(.2, .8, .3, 1), filter .4s; }
.board::before { content: ''; position: absolute; inset: 11px; z-index: 3; border: 1px solid rgba(150, 235, 190, .1); border-radius: 15px; pointer-events: none; }
.board::after { content: ''; position: absolute; top: -1px; left: 5%; right: 5%; z-index: 3; height: 2px; background: linear-gradient(90deg, transparent, rgba(130, 255, 165, .85) 30%, rgba(130, 255, 165, .85) 70%, transparent); pointer-events: none; }
@keyframes board-float { from { translate: 0 -1px; } to { translate: 0 1px; } }
.has-dialog .board { scale: .985; filter: brightness(.85); }
/* The stage carries the camera: a kick on a hit, a shake on a crash. */
.stage { position: absolute; inset: 0; }
#board-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* A faint reflection on the deck's glass, sweeping slowly and leaning with the pointer. */
.board-glass { position: absolute; inset: -12%; z-index: 3; background: linear-gradient(115deg, transparent 36%, rgba(215, 255, 235, .045) 45%, rgba(215, 255, 235, .02) 51%, transparent 60%); pointer-events: none; translate: calc(var(--gx, 0) * 8px) calc(var(--gy, 0) * 8px); animation: glass-sweep 13s ease-in-out infinite; }
@keyframes glass-sweep { 0%, 100% { transform: translateX(-26%); } 50% { transform: translateX(26%); } }

/* The page backdrop, in layers (backdrop.mjs, animated): the plate leans a
   little with the pointer, the cut-out props lean more by depth, and each
   moves on its own: the moon drifts, rocks turn, orbs loop, stars twinkle. */
.backdrop-plate { translate: calc(var(--bx, 0) * 2px) calc(var(--by, 0) * 2px); }
.backdrop-prop { position: absolute; translate: calc(var(--bx, 0) * var(--d, 5px)) calc(var(--by, 0) * var(--d, 5px)); }
.backdrop-sprite { position: absolute; inset: 0; background-repeat: no-repeat; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; will-change: transform; }
.backdrop-sprite.drift-y { animation-name: bd-drift-y; }
.backdrop-sprite.tumble { animation-name: bd-tumble, bd-sway; }
.backdrop-sprite.loop-a, .backdrop-sprite.loop-b { animation-name: bd-bob, bd-sway; }
.backdrop-sprite.loop-b { animation-direction: alternate-reverse; }
@keyframes bd-drift-y { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
@keyframes bd-tumble { from { transform: rotate(-4deg) translateY(-2px); } to { transform: rotate(5deg) translateY(2px); } }
@keyframes bd-bob { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
@keyframes bd-sway { from { translate: -5px 0; } to { translate: 6px 0; } }
.backdrop-star { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(160, 255, 200, .45) 32%, transparent 70%); opacity: 0; animation: bd-twinkle 4s ease-in-out infinite; }
.backdrop-star.blue { background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(150, 205, 255, .5) 32%, transparent 70%); }
@keyframes bd-twinkle { 0%, 68%, 100% { opacity: 0; transform: scale(.6); } 84% { opacity: .9; transform: scale(1); } }
.backdrop-nebula { position: absolute; inset: -20%; background: radial-gradient(ellipse 38% 30% at 24% 72%, rgba(30, 170, 100, .13), transparent 70%), radial-gradient(ellipse 34% 26% at 80% 28%, rgba(20, 150, 125, .11), transparent 70%), radial-gradient(ellipse 30% 22% at 12% 20%, rgba(40, 190, 90, .08), transparent 70%); mix-blend-mode: screen; pointer-events: none; translate: calc(var(--bx, 0) * 3px) calc(var(--by, 0) * 3px); animation: bd-nebula 70s ease-in-out infinite alternate; }
@keyframes bd-nebula { from { transform: translate(-2%, 1%) rotate(-2deg); } to { transform: translate(2%, -1%) rotate(2deg) scale(1.05); } }

/* Glass tiles: a card with a "?" front and a value back, flipped in 3D. */
.tiles { position: absolute; inset: 0; z-index: 1; }
.tile { position: absolute; perspective: 520px; --flip: rotateX(180deg); --lit: 0; transition: translate .28s cubic-bezier(.2, .8, .3, 1); }
.tile[data-side=left], .tile[data-side=right] { --flip: rotateY(180deg); }
.tile-card { position: absolute; inset: 0; transform-style: preserve-3d; }
.tile.revealed .tile-card { transform: var(--flip); }
.tile-face { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; container-type: size; border: 1px solid rgba(165, 228, 205, .22); border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; color: #eef4f1; font-weight: 600; }
.tile-front { border-color: color-mix(in srgb, rgba(165, 228, 205, .22), rgba(120, 255, 170, .85) calc(var(--lit) * 100%)); background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), rgba(90, 255, 150, calc(var(--lit) * .34)), transparent 72%), linear-gradient(180deg, rgba(46, 72, 66, .64), rgba(20, 38, 34, .7)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 16px rgba(120, 220, 170, .05), 0 6px 14px rgba(0, 0, 0, .35); transition: border-color .3s, box-shadow .3s, background-color .35s; }
/* Each tile breathes a little light of its own, out of step with the rest. */
.tile-front::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(205, 255, 228, .075), transparent 62%); opacity: .2; animation: tile-breathe var(--breathe-d, 7s) ease-in-out var(--breathe-t, 0s) infinite alternate; pointer-events: none; }
@keyframes tile-breathe { to { opacity: 1; } }
/* A reflection that follows the pointer on hover. */
.tile-front::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(215, 255, 232, .2), transparent 58%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.tile-q { position: relative; font-size: min(40cqh, 34cqw); line-height: 1; transition: opacity .28s, transform .38s cubic-bezier(.2, .8, .3, 1.5); }
.tile-sheen { position: absolute; top: -20%; bottom: -20%; left: 0; width: 42%; background: linear-gradient(90deg, transparent, rgba(225, 255, 240, .2), transparent); opacity: 0; pointer-events: none; }
.tile-flash { position: absolute; inset: 0; background: radial-gradient(circle, rgba(240, 255, 244, .95), rgba(120, 255, 170, .55) 42%, transparent 76%); opacity: 0; pointer-events: none; }
.tile-back { transform: var(--flip); border-color: #72f692; background: linear-gradient(180deg, rgba(56, 172, 88, .8), rgba(26, 106, 52, .78)); box-shadow: 0 0 20px rgba(80, 240, 120, .5), inset 0 0 14px rgba(150, 255, 180, .26); color: #d2ffdb; transition: background .55s, border-color .55s, box-shadow .55s, color .55s; }
.tile-value { font-size: min(38cqh, 24cqw); line-height: 1; white-space: nowrap; }
/* The route: the latest hit bright, the two before it medium, older ones dark. */
.tile.route-previous .tile-back { border-color: rgba(114, 246, 146, .62); background: linear-gradient(180deg, rgba(40, 128, 68, .74), rgba(18, 78, 40, .76)); box-shadow: 0 0 10px rgba(80, 240, 120, .24), inset 0 0 12px rgba(150, 255, 180, .14); color: #bff5cb; }
.tile.route-old .tile-back { border-color: rgba(90, 190, 130, .34); background: linear-gradient(180deg, rgba(24, 72, 44, .74), rgba(12, 44, 28, .78)); box-shadow: inset 0 0 10px rgba(120, 220, 160, .08); color: #8fd6a5; }
.tile-glow { position: absolute; inset: -1px; border-radius: 11px; background: radial-gradient(circle at var(--glow-at, 50% 50%), rgba(110, 255, 160, .55), transparent 68%); opacity: 0; pointer-events: none; }
/* ~200 ms before impact the target's rim brightens. */
.tile.approach .tile-front { border-color: rgba(130, 255, 170, .9); box-shadow: 0 0 14px rgba(80, 240, 130, .45), inset 0 0 12px rgba(120, 255, 170, .2), 0 6px 14px rgba(0, 0, 0, .35); transition-duration: .16s; }
.tile.revealed .tile-q, .tile.crashed .tile-q { opacity: 0; transform: scale(.7); transition-duration: .1s; }
/* A crash: cracked, dark red glass. */
.tile.crashed .tile-front { border-color: #ff7682; background: linear-gradient(180deg, rgba(122, 22, 38, .82), rgba(60, 8, 18, .84)); box-shadow: 0 0 18px rgba(255, 70, 90, .42), inset 0 0 18px rgba(255, 60, 80, .38), 0 6px 14px rgba(0, 0, 0, .35); transition-duration: .12s; }
.tile.crashed .tile-flash { background: radial-gradient(circle, rgba(255, 220, 220, .95), rgba(255, 60, 80, .55) 42%, transparent 76%); }
.tile-crack { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; stroke: none; }
.crack-line, .crack-light { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.crack-line { stroke: rgba(16, 0, 5, .92); }
.crack-light { stroke: rgba(255, 196, 200, .3); }
/* The reset: values fade and hit tiles dim to plain glass, then "?" returns. */
.tile.resetting .tile-back, .tile.resetting.crashed .tile-front { border-color: rgba(165, 228, 205, .22); background: linear-gradient(180deg, rgba(46, 72, 66, .64), rgba(20, 38, 34, .7)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 6px 14px rgba(0, 0, 0, .35); transition: background .2s var(--reset-delay, 0s), border-color .2s var(--reset-delay, 0s), box-shadow .2s var(--reset-delay, 0s); }
.tile.resetting .tile-value, .tile.resetting .tile-crack { opacity: 0; transition: opacity .16s var(--reset-delay, 0s); }
.tile.resetting .tile-q { opacity: 0; transform: scale(.7); }
@media (hover: hover) {
  .tile:not(.revealed):not(.crashed):hover { translate: 0 -2px; }
  .tile:not(.revealed):not(.crashed):hover .tile-front { border-color: rgba(120, 250, 165, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 18px rgba(120, 240, 170, .1), 0 9px 18px rgba(0, 0, 0, .4); }
  .tile:not(.revealed):not(.crashed):hover .tile-front::after { opacity: 1; }
  .tile:not(.revealed):not(.crashed):hover .tile-q { transform: scale(1.04); }
}

/* The multiplier readout. */
.hud { position: absolute; z-index: 2; top: 24.5%; left: 50%; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); pointer-events: none; text-align: center; white-space: nowrap; }
.hud-label { color: #dce4e1; font-size: clamp(9px, min(3.3cqh, 3.3cqw), 17px); font-weight: 500; letter-spacing: .28em; margin-right: -.28em; }
.hud-core { position: relative; display: grid; place-items: center; margin-top: .6cqh; }
.hud-core > * { grid-area: 1 / 1; }
.hud-glow { width: 170%; height: 220%; border-radius: 50%; background: radial-gradient(closest-side, rgba(80, 240, 130, .3), rgba(80, 240, 130, .09) 55%, transparent); opacity: 0; pointer-events: none; }
/* Shadows are filters, not text-shadow: the rolling digits clip their own
   boxes, and a drop-shadow wraps the whole readout instead. */
.hud-value { display: flex; align-items: baseline; color: #fff; font-size: clamp(34px, min(17.5cqh, 19cqw), 104px); font-weight: 700; line-height: 1.02; letter-spacing: -.01em; font-variant-numeric: tabular-nums; filter: drop-shadow(0 0 0 rgba(80, 240, 130, 0)) drop-shadow(0 6px 22px rgba(0, 0, 0, .55)) saturate(1); transition: opacity .3s, transform .45s cubic-bezier(.2, .9, .3, 1.2), color .35s, filter .35s; }
.hud-number { --roll-line: 1.02em; }
.hud-times { margin-left: .05em; color: var(--neon-bright); font-size: .74em; transition: color .3s, text-shadow .3s; }
.hud-hits { display: flex; align-items: center; gap: 1.1em; margin-top: 2.2cqh; color: #cad4d0; font-size: clamp(9px, min(3.1cqh, 3.2cqw), 16px); font-weight: 500; letter-spacing: .2em; }
.hud-hits i { width: 2.6em; height: 1px; background: rgba(220, 232, 227, .75); }
.hud-hits i:first-child { transform-origin: right; }
.hud-hits i:last-child { transform-origin: left; }
.hud-line { display: grid; overflow: hidden; line-height: 1.3; margin-right: -.2em; }
.hud-line > * { grid-area: 1 / 1; transition: transform .34s cubic-bezier(.2, .8, .3, 1), opacity .26s; }
.hud-count { --roll-line: 1.3em; }
.hud-result { transform: translateY(105%); opacity: 0; color: #a8f8bb; font-weight: 600; letter-spacing: .14em; }
.hud.show-result .hud-tally { transform: translateY(-105%); opacity: 0; }
.hud.show-result .hud-result { transform: none; opacity: 1; }
/* Cashed out: the multiplier enlarges and glows; bigger wins, bigger light. */
.hud.cashed .hud-label { color: #9ff5b3; }
.hud.cashed .hud-value { transform: scale(1.1); color: #d6ffe1; filter: drop-shadow(0 0 22px rgba(80, 240, 130, .55)) drop-shadow(0 6px 22px rgba(0, 0, 0, .5)) saturate(1); transition-delay: .2s; }
.hud.cashed.tier-2 .hud-value { transform: scale(1.18); }
.hud.cashed.tier-3 .hud-value { transform: scale(1.3); filter: drop-shadow(0 0 34px rgba(80, 240, 130, .8)) drop-shadow(0 6px 22px rgba(0, 0, 0, .5)) saturate(1); }
.hud.cashed .hud-glow { opacity: .75; transform: scale(1.05); transition: opacity .5s .4s, transform .9s .4s; }
.hud.cashed.tier-3 .hud-glow { opacity: 1; transform: scale(1.35); }
.hud.cashed .hud-result { font-size: 1.12em; }
/* Crashed: the number drains of green and a cracked red CRASHED slams in. */
.hud.crashed .hud-label { color: #ffb3ba; }
.hud.crashed .hud-value { opacity: 0; transform: scale(.86); color: #9aa5a1; filter: drop-shadow(0 0 0 rgba(80, 240, 130, 0)) drop-shadow(0 6px 22px rgba(0, 0, 0, .55)) saturate(0); transition-duration: .12s, .2s, .08s, .08s; }
.hud.crashed .hud-times { color: #8b9692; }
.hud.crashed .hud-result { color: #ffb3ba; }
.hud-crashed { font-size: clamp(28px, min(13.5cqh, 12cqw), 86px); font-weight: 800; line-height: 1.02; letter-spacing: .05em; margin-right: -.05em; color: transparent; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23240006' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M0 31 L34 27 L52 35 L83 24 L104 33 L131 29 L152 38 L176 26 L201 34 L224 22 L247 31 L276 27 L298 37 L324 25 L349 32 L371 23 L400 30'/%3E%3Cpath d='M83 24 L91 9 L88 0 M176 26 L170 44 L178 60 M247 31 L258 47 M324 25 L331 8 M52 35 L47 52 M298 37 L292 55' stroke-width='1.7'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100%, linear-gradient(180deg, #ffa5ad 0%, #ff5a6b 45%, #d4182f 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 16px rgba(255, 40, 64, .45)); opacity: 0; transform: scale(1.35); pointer-events: none; }
.hud.crashed .hud-crashed { animation: crashed-in .44s cubic-bezier(.2, .9, .3, 1) forwards; }
.hud.resetting.crashed .hud-crashed { animation: crashed-out .2s ease-in forwards; }
@keyframes crashed-in { 0% { opacity: 0; transform: scale(1.38); } 22% { opacity: 1; transform: scale(.95); } 40% { transform: scale(1.03); } 55% { transform: scale(1); } 62% { opacity: .45; } 70% { opacity: 1; } 78% { opacity: .7; } 86%, 100% { opacity: 1; transform: scale(1); } }
@keyframes crashed-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.94); } }
.hud.resetting .hud-value { transition-delay: 0s; }
.pause-overlay { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(2, 8, 6, .55); backdrop-filter: blur(3px); }
.pause-overlay span { padding: 12px 22px; border: 1px solid var(--line-strong); border-radius: 30px; background: rgba(8, 20, 17, .9); font-size: 13px; font-weight: 500; letter-spacing: .2em; }

/* Odometer digits (roller.mjs): each digit is a strip of 0–9 twice over,
   clipped to one line and slid into place. */
.roller { position: relative; font-variant-numeric: tabular-nums; }
.roll-visual { display: inline-flex; align-items: baseline; }
.roll-digit { position: relative; display: inline-block; overflow: clip; -webkit-mask: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.roll-size { visibility: hidden; }
.roll-strip { position: absolute; top: 0; left: 0; right: 0; line-height: var(--roll-line, 1.2em); text-align: center; white-space: pre; }

/* The wallet glows once when money comes in. */
#balance { --roll-line: 1.2em; line-height: 1.2; }
.wallet svg { transition: color .3s; }
.wallet.gain svg { animation: wallet-gain .9s ease-out; }
@keyframes wallet-gain { 30% { color: var(--neon-bright); filter: drop-shadow(0 0 7px rgba(92, 240, 126, .9)); transform: scale(1.12); } }

/* The speaker: waves spread out when sound comes on and fold back to mute. */
.sound-icon path { transform-box: view-box; }
.sound-icon .wave { transform-origin: 11px 12px; transition: opacity .28s, transform .38s cubic-bezier(.2, .8, .3, 1.4); }
.sound-icon .wave-far { transition-delay: .07s; }
.sound-icon .mute { transform-origin: 18.5px 12px; transition: opacity .2s, transform .3s cubic-bezier(.2, .8, .3, 1.3); }
#sound[aria-pressed=false] .wave { opacity: 0; transform: scale(.35); }
#sound[aria-pressed=true] .mute { opacity: 0; transform: scale(.2) rotate(45deg); }
/* The music note: a slash crosses it out while the music is off. */
.music-icon path { transform-box: view-box; }
.music-icon .note { transition: opacity .28s; }
.music-icon .mute { transform-origin: 12px 12px; transition: opacity .2s, transform .3s cubic-bezier(.2, .8, .3, 1.3); }
#music[aria-pressed=false] .note { opacity: .55; }
#music[aria-pressed=true] .mute { opacity: 0; transform: scale(.2) rotate(45deg); }

/* The betting panel, after the Temple edition of Crocodile: one floating
   glass panel with the bet card (− amount + ½ 2×), the big BET button, and
   the auto card. */
.dock { position: relative; width: min(1120px, 100%); margin: clamp(8px, 1.4vh, 14px) auto 0; padding: 12px; border: 1px solid rgba(160, 230, 200, .15); border-radius: 18px; background: rgba(7, 18, 15, .86); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 18px 44px -14px rgba(0, 6, 4, .85), inset 0 1px 0 rgba(255, 255, 255, .05); }
.dock-cards { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .7fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.bet-card, .auto-card { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; margin: 0; padding: 10px 12px 12px; border: 1px solid rgba(165, 228, 205, .12); border-radius: 12px; background: rgba(3, 10, 8, .72); }
.bet-card > *, .auto-card > *, .auto-head > * { transition: opacity .4s, filter .4s; }
/* In flight the cards' controls dim and lock; the autoplay switch stays
   live, so a run can be switched off at any time. */
.game.locked :is(.bet-card > *, #auto-toggle, .target-row) { opacity: .55; filter: saturate(.6); }
.card-label { display: block; margin: 0 0 6px; color: #d2e1da; font-size: 11px; font-weight: 700; letter-spacing: .12em; line-height: 14px; white-space: nowrap; }
.amount-row { --gap: 8px; display: flex; align-items: center; gap: var(--gap); height: 40px; }
.round-step, .pill { flex: none; display: grid; place-items: center; height: 40px; padding: 0; border: 1px solid rgba(150, 230, 190, .22); background: #0b1f1a; color: #eef7f2; transition: background .15s, border-color .15s; }
.round-step { width: 40px; border-radius: 50%; }
.round-step svg { width: 18px; height: 18px; stroke-width: 2.4; }
.pill { width: 52px; border-radius: 999px; font-size: 16px; font-weight: 700; }
.round-step:hover:not(:disabled), .pill:hover:not(:disabled) { background: #123029; border-color: rgba(150, 240, 190, .42); }
#stake { flex: 1 1 auto; width: 100%; min-width: 0; padding: 2px 0; border: 0; border-radius: 6px; background: transparent; color: #f4faf6; font-size: 22px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; text-align: center; }
#stake.max { font-size: 19px; }
/* The main button: BET, IN FLIGHT, CASH OUT $x, BET AGAIN. A slow specular
   sweep, a lift on hover, a squash on press. */
.action-wrap { position: relative; display: grid; min-width: 0; }
.action { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: .35em; min-height: 60px; padding: 4px 16px; border-radius: 14px; font-size: clamp(22px, 2.2vw, 32px); font-weight: 700; line-height: 1.1; letter-spacing: .07em; text-transform: uppercase; transition: translate .22s cubic-bezier(.2, .8, .3, 1), box-shadow .3s, filter .3s; }
.action:hover:not(:disabled) { translate: 0 -2px; }
#action-label, #action-value { position: relative; z-index: 1; }
#action-value { --roll-line: 1.1em; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.action .action-sheen { position: absolute; inset: 0; z-index: 0; background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, .45) 47%, rgba(255, 255, 255, .12) 53%, transparent 64%); transform: translateX(-130%); animation: action-sheen 6s ease-in-out infinite; pointer-events: none; }
@keyframes action-sheen { 0%, 64% { transform: translateX(-130%); } 88%, 100% { transform: translateX(130%); } }
.action .action-ripple { position: absolute; z-index: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .7), rgba(140, 255, 180, .4) 45%, transparent 72%); opacity: 0; pointer-events: none; }
.action-wave { position: absolute; inset: 0; border: 2px solid rgba(120, 255, 165, .85); border-radius: 15px; opacity: 0; pointer-events: none; }
/* Cash out ripens from green toward gold as the multiplier climbs, and its
   sheen quickens. */
.action.cashout { --heat: 0; font-size: clamp(17px, 1.5vw, 22px); letter-spacing: .06em; background: linear-gradient(180deg, color-mix(in srgb, #b4f7c0, #fff0a6 calc(var(--heat) * 70%)) 0%, color-mix(in srgb, #6fea8c, #f5d45c calc(var(--heat) * 70%)) 22%, color-mix(in srgb, #45dc6d, #eec03d calc(var(--heat) * 70%)) 55%, color-mix(in srgb, #2fc85a, #d7a126 calc(var(--heat) * 70%)) 100%); animation: cashout-glow 2.4s ease-in-out infinite alternate; }
.action.cashout .action-sheen { animation-duration: calc(3.6s - var(--heat) * 1.6s); }
.action.cashout:hover { box-shadow: 0 0 48px rgba(70, 240, 120, .7), 0 8px 20px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -3px 8px rgba(0, 90, 35, .22); }
@keyframes cashout-glow { to { box-shadow: 0 0 38px rgba(70, 240, 120, .52), 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -3px 8px rgba(0, 90, 35, .22); } }
.action.wordy { font-size: clamp(17px, 1.5vw, 22px); letter-spacing: .06em; }
.action:disabled { border-color: rgba(160, 230, 200, .2); background: #0f231e; box-shadow: inset 0 0 0 1px rgba(160, 230, 200, .06); color: #9bbcae; font-size: clamp(17px, 1.5vw, 22px); letter-spacing: .06em; }
.action:disabled::before, .action:disabled .action-sheen { opacity: 0; }
/* The auto card mirrors the bet card: its two switches on top (auto cash
   out, autoplay), then − target + for the cash-out multiplier. */
.auto-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
.auto-switch { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.auto-switch .card-label { margin: 0; }
.auto-switch:disabled { cursor: default; }
.switch { position: relative; flex: none; width: 34px; height: 20px; border: 1px solid rgba(150, 230, 190, .25); border-radius: 999px; background: #0b1f1a; transition: background .2s, border-color .2s, box-shadow .2s; }
.switch > span { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #8fae9f; transition: transform .24s cubic-bezier(.3, .7, .4, 1.35), background .2s; }
.auto-switch[aria-checked=true] .switch { border-color: #2fb35e; background: #1c7a40; }
.auto-switch[aria-checked=true] .switch > span { transform: translateX(14px); background: #fff; }
.auto-switch:hover:enabled .switch { border-color: rgba(150, 240, 190, .55); }
/* While a run is on, the autoplay switch glows. */
.game.autoplaying #autoplay-toggle .switch { animation: autoplay-glow 1.6s ease-in-out infinite; }
@keyframes autoplay-glow { 50% { box-shadow: 0 0 0 1px rgba(120, 255, 165, .6), 0 0 14px rgba(92, 240, 126, .45); } }
.target-field { display: flex; flex: 1 1 auto; align-items: baseline; justify-content: center; min-width: 0; color: #f4faf6; font-size: 22px; font-weight: 600; cursor: text; transition: opacity .3s; }
.target-field input { width: 4.2ch; min-width: 0; padding: 2px 0; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; line-height: 1.2; font-variant-numeric: tabular-nums; text-align: right; }
@supports (field-sizing: content) { .target-field input { width: auto; min-width: 1ch; max-width: 7ch; field-sizing: content; } }
.target-field span { margin-left: 1px; }
.game:not(.auto-on) .target-field { opacity: .5; }
.dock :is(button, input):focus-visible { outline: 2px solid var(--neon-bright); outline-offset: 2px; }
.form-error { position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 5; width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 9px 14px; border: 1px solid rgba(255, 110, 120, .5); border-radius: 10px; background: rgba(50, 12, 18, .96); color: #ffd3d7; font-size: 13px; text-align: center; transform: translateX(-50%); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
/* The wallet's −$ and +$ tags drop out of it on each bet and win. */
.wallet { position: relative; }
.wallet-tag { position: absolute; top: 100%; right: 0; z-index: 6; margin-top: 3px; padding: 2px 7px; border-radius: 6px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; opacity: 0; }
.wallet-tag.debit { background: rgba(236, 240, 226, .94); color: #15241d; }
.wallet-tag.credit { background: rgba(80, 230, 125, .95); color: #04210f; }

/* Dialogs over the game rise into place. */
dialog[open] { animation: dialog-in .34s cubic-bezier(.2, .8, .3, 1); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px); } }

.rtp { margin: 0 0 12px; color: var(--neon-bright); font-size: 76px; font-weight: 700; line-height: 1; }
.rtp span { font-size: 36px; }

/* Narrower cards: smaller controls so "$1,000.00" still fits. */
@media (max-width: 1100px) {
  .amount-row { --gap: 6px; }
  .round-step, .pill { height: 36px; }
  .round-step { width: 36px; }
  .pill { width: 44px; }
  #stake, .target-field { font-size: 21px; }
}
@media (max-width: 1000px) {
  .dock-cards { grid-template-columns: minmax(0, 1.14fr) minmax(0, .56fr) minmax(0, 1fr); }
  .amount-row { --gap: 5px; }
  .round-step, .pill { height: 34px; }
  .round-step { width: 34px; }
  .pill { width: 40px; }
  #stake, .target-field { font-size: 20px; }
  #stake.long { font-size: 17px; }
  #stake.max { font-size: 15px; }
}
/* Tablets held upright: the bet and auto cards side by side, the button
   below them. */
@media (min-width: 701px) and (max-width: 900px) and (min-height: 651px) {
  .dock { padding: 8px; border-radius: 16px; }
  .dock-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .action-wrap { grid-column: 1 / -1; order: 3; }
  .action { min-height: 50px; height: 50px; font-size: 22px; }
  .action.cashout, .action:disabled, .action.wordy { font-size: 17px; }
}
/* Phones and narrow upright windows: one column: the bet card, the auto
   card, then the button. */
@media (max-width: 600px), (max-width: 700px) and (min-height: 651px) {
  .dock { padding: 8px; border-radius: 16px; }
  .dock-cards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .bet-card, .auto-card { padding: 8px 10px 10px; }
  .card-label { font-size: 10px; letter-spacing: .1em; }
  .amount-row { --gap: 5px; height: 34px; }
  .round-step, .pill { height: 32px; }
  .round-step { width: 32px; }
  .pill { width: 38px; }
  #stake, .target-field { font-size: 18px; }
  #stake.long { font-size: 16px; }
  #stake.max { font-size: 15px; }
  .action-wrap { order: 3; }
  .action { min-height: 50px; height: 50px; font-size: 22px; }
  .action.cashout, .action:disabled, .action.wordy { font-size: 17px; }
}
/* The narrowest phones: "CASH OUT" and slimmer switches keep the header on
   one line. */
@media (max-width: 350px) {
  .word-auto { display: none; }
  .auto-head, .auto-switch { gap: 6px; }
}
@media (max-width: 680px) {
  .game { min-height: 520px; padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .board { margin-top: 10px; border-radius: 18px; }
  .board::before { inset: 7px; border-radius: 13px; }
  .tile-face { border-radius: 8px; }
  .dock { margin-top: 10px; }
}
/* Short screens (landscape phones, low windows): the same three cards,
   tighter, so the deck keeps its room. */
@media (max-height: 650px) and (min-width: 601px) {
  .dock { padding: 8px; border-radius: 14px; }
  .dock-cards { grid-template-columns: minmax(0, 1.1fr) minmax(0, .62fr) minmax(0, 1fr); gap: 8px; }
  .bet-card, .auto-card { padding: 7px 10px 8px; border-radius: 10px; }
  .card-label { margin-bottom: 4px; font-size: 10px; line-height: 12px; }
  .auto-head { margin-bottom: 4px; }
  .amount-row { --gap: 5px; height: 32px; }
  .round-step, .pill { height: 32px; }
  .round-step { width: 32px; }
  .pill { width: 38px; }
  #stake, .target-field { font-size: 18px; }
  #stake.long { font-size: 15px; }
  #stake.max { font-size: 13px; }
  .action { min-height: 0; font-size: 21px; }
  .action.cashout, .action:disabled { font-size: 15px; }
}
/* Short and narrow (landscape phones): "CASH OUT", slimmer switches, and a
   narrower button leave the amounts room. */
@media (max-height: 650px) and (min-width: 601px) and (max-width: 900px) {
  .dock-cards { grid-template-columns: minmax(0, 1.22fr) minmax(0, .52fr) minmax(0, 1fr); }
  .word-auto { display: none; }
  .auto-head, .auto-switch { gap: 6px; }
  .switch { width: 30px; height: 18px; }
  .switch > span { width: 12px; height: 12px; }
  .auto-switch[aria-checked=true] .switch > span { transform: translateX(12px); }
  .pill { width: 34px; }
}
@media (max-height: 650px) and (min-width: 601px) and (max-width: 700px) {
  .dock-cards { grid-template-columns: minmax(0, 1.28fr) minmax(0, .44fr) minmax(0, 1fr); }
  .auto-head .card-label { letter-spacing: 0; }
  .auto-head, .auto-switch { gap: 4px; }
  .switch { width: 28px; }
  .auto-switch[aria-checked=true] .switch > span { transform: translateX(10px); }
  .action { padding: 4px 6px; }
  .action.wordy, .action.cashout, .action:disabled { font-size: 13px; }
}
/* Tablets: the full header needs about 860px, and the theme only compacts
   it at 760px, so tighten it in between. */
@media (min-width: 761px) and (max-width: 900px) {
  .topbar, .brand { gap: 12px; }
  .brand-orb { width: 38px; height: 38px; }
  .wordmark { font-size: 24px; letter-spacing: .17em; }
  .topbar-tools { gap: 8px; }
  .wallet { gap: 8px; margin-left: 4px; font-size: 18px; }
  .tools-gap { width: 4px; }
}
/* Between the phone and tablet layouts the wordmark would crowd the tools
   off the screen; the orb stands for it. */
@media (min-width: 481px) and (max-width: 580px) {
  .wordmark { display: none; }
}
/* Small phones: slimmer tool buttons keep the row inside the screen. */
@media (max-width: 420px) {
  .topbar { gap: 6px; }
  .topbar-tools { gap: 4px; }
  .wallet { gap: 5px; margin-left: 0; font-size: 14px; }
  .wallet svg { width: 17px; height: 17px; }
  .add-button, .icon-button { width: 31px; height: 31px; }
}
/* The smallest phones: with the music switch in the row, the tools slim down again. */
@media (max-width: 374px) {
  .topbar { gap: 4px; }
  .topbar-tools { gap: 2px; }
  .wallet { font-size: 13px; }
  .add-button, .icon-button { width: 28px; }
  .icon-button svg { width: 20px; height: 20px; }
}
@media (max-width: 340px) {
  .wallet svg { display: none; }
}
@media (max-height: 640px) and (min-width: 681px) {
  .game { min-height: 420px; padding-top: 10px; padding-bottom: 8px; }
  .topbar { min-height: 40px; }
  .brand-orb { width: 34px; height: 34px; }
  .wordmark { font-size: 22px; }
  .board { margin-top: 8px; }
}
@media (max-height: 500px) and (min-width: 560px) {
  .game { min-height: 0; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .topbar { min-height: 34px; }
  .brand-orb { width: 28px; height: 28px; }
  .wordmark { font-size: 17px; }
  .demo-pill { padding: 6px 9px; font-size: 10px; }
  .wallet { gap: 8px; font-size: 15px; }
  .wallet svg { width: 19px; height: 19px; }
  .add-button, .icon-button { width: 32px; height: 32px; }
  .add-button svg { width: 18px; height: 18px; }
  .icon-button svg { width: 21px; height: 21px; }
  .board { min-height: 150px; margin-top: 6px; border-radius: 16px; }
  .board::before { inset: 6px; border-radius: 12px; }
  .dock { margin-top: 6px; }
}

/* Reduced motion: no float, sweeps, or flips; state changes stay instant. */
@media (prefers-reduced-motion: reduce) {
  .board, .board-glass, .tile-front::before, .action .action-sheen, .action.cashout, .backdrop-sprite, .backdrop-nebula { animation: none !important; }
  .backdrop-star { animation: none !important; opacity: .35; }
  .tile.revealed .tile-card { transform: none; }
  .tile.revealed .tile-front { opacity: 0; }
  .tile-back { transform: none; backface-visibility: visible; opacity: 0; }
  .tile.revealed .tile-back { opacity: 1; }
  .hud.crashed .hud-crashed { animation: none !important; opacity: 1; transform: none; }
}