/* Approved 1600x900 reference, mapped at 0.8 to the 1280x720 stage.
   Raster chrome contains no live numbers, board symbols or button faces. */
:root {
  --font-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --font-heavy: 'Barlow Condensed', Impact, sans-serif;
  --board-x: 296.8px; --board-y: 30.4px;
  --cell-w: 93.6px; --cell-h: 84.57142857px;
  --board-w: 655.2px; --board-h: 592px; --hud-top: 638.4px;
  --panel-frame: url('../assets/subway-rush/ui/panel-frame.svg');
  --ink: #060c20; --paper: #091429; --paper-lo: #102440;
  --tile: #c7d2e6; --tile-lo: #a7b8d2; --grout: #131c32;
}
#viewport { background: radial-gradient(ellipse at center, #172444, #060c1e 80%); }
#viewport::before { display: none; }
#stage { font-weight: 900; }
/* Station plate: #stationBackdrop is a viewport-level layer with the stage's
   design size; UI.layout() scales it uniformly to cover the window (the
   stage itself is scaled to fit), so mismatched aspect ratios crop the
   scenery's edges instead of showing bars. The vignette above it fades in
   with the amount of crop so the bleed reads as intentional. */
#stationBackdrop { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; z-index: 0; transform-origin: 0 0; overflow: hidden; pointer-events: none; }
body.portrait #stationBackdrop { width: 720px; height: 1556.48px; }
#backdropVignette { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; background: radial-gradient(ellipse 64% 62% at 50% 48%, transparent 58%, #04071acc 100%); }
.reference-backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: url('../assets/subway-rush/scene/station-motion-desktop.webp') center / 100% 100% no-repeat; pointer-events: none; }
body.free-spins .reference-backdrop { display: none; }
#frame { left: 269.6px; top: 0; width: 712.8px; height: 640px; background: url('../assets/subway-rush/ui/board-frame.webp') center / 100% 100% no-repeat; }
.reference-left { display: none; }
body.free-spins .reference-left { opacity: 0; }
#trainLayer { display: none; }
#board, body.free-spins #board { background: #10182d; box-shadow: none; border-radius: 5px; overflow: hidden; }
.cell { border: 1.6px solid #142036; border-radius: 5px; background: linear-gradient(133deg, #e0e7f4 0%, #c3cee2 42%, #adbcd5 80%, #b9cae3 100%); box-shadow: inset 1px 2px 2px #f5f9ffb3, inset -2px -3px 4px #56688366; }
body.free-spins .cell { background: linear-gradient(133deg, #f0e1ff, #c9b9e5 50%, #a994c4); }
.cell .sym { inset: 0; width: 100%; height: 100%; margin: 0; }
.cell .sym > svg { transform: none; }
.cell.has-scatter .sym > svg { transform: scale(1.32); }
.cell .sym > .symbol-boombox { transform: scale(1.05); }
.cell .sym > .symbol-headphones { transform: scale(1.025); }
.cell .sym > .symbol-skateboard { transform: scale(1.04); }
.cell .sym > .symbol-subway-token { transform: scale(.85); }
.scatter-ribbon, #stage.portrait .scatter-ribbon { bottom: 4px; width: 79px; height: 19px; line-height: 19px; font-family: var(--font-heavy); font-size: 18px; font-weight: 900; letter-spacing: -.4px; color: #fff044; -webkit-text-stroke: 3px #090c16; paint-order: stroke fill; transform: translateX(-50%); text-shadow: 1px 2px #000; }
.scatter-ribbon::before, .scatter-ribbon::after { display: none; }
/* js/ui.js appends the ribbon INSIDE .sym (not the .fx layer), so it inherits the
   symbol's drop-in, fall, bounce and pulse transforms and never detaches from
   the art while the scatter is still landing. */
.cell .sym > .scatter-ribbon { position: absolute; z-index: 1; }
#logo { left: 976px; top: 0; width: 304px; height: 220px; transform: none; filter: none; }
#logo img { object-fit: contain; }
#mascot { left: 1004px; top: 232px; width: 244px; height: 404px; filter: drop-shadow(0 5px 3px #07112477); }
#mascot > .strip, .intro-mascot > .strip, .splash-mascot > .strip,
body.mascot-cheer #mascot > .strip, body.mascot-spray #mascot > .strip, body.mascot-spray-big #mascot > .strip { background-image: url('../assets/subway-rush/ui/runner-clean-desktop.webp'); }
#mascot.mascot-fly-out > .strip, #mascot.mascot-fly-home > .strip { background-image: url('../assets/subway-rush/scene/runner-run.webp'); }
#buySign, #stage #buySign.sign-swing { left: 27.2px; top: 0; width: 225.6px; height: 223.2px; transform-origin: 50% 0; animation: reference-sign-sway 4.8s ease-in-out infinite; }
@keyframes reference-sign-sway { 0%, 100% { transform: rotate(-1.8deg); } 50% { transform: rotate(1.8deg); } }
/* Chain extension above the sign (short landscape windows only). The layer
   shares the stage transform; --buy-sign-chain-length is the letterbox
   height above the stage in stage px, set by UI.layout(), 0 otherwise. The
   svg grows upward from the sign's top edge (bottom-anchored, no negative
   offsets) and swings with the sign about the same pivot so the join holds. */
#buySignChains { --buy-sign-chain-length: 0px; position: absolute; left: 0; top: 0; width: 1280px; height: 720px; z-index: 0; transform-origin: 0 0; pointer-events: none; }
body.portrait #buySignChains { display: none; }
.chain-ext { position: absolute; left: 27.2px; top: 0; width: 225.6px; height: 0; }
.chain-ext-svg { position: absolute; left: 0; bottom: 0; display: block; width: 225.6px; height: var(--buy-sign-chain-length); overflow: hidden; transform-origin: 50% 100%; animation: reference-sign-sway 4.8s ease-in-out infinite; }
body:has(#buySign.sign-swing) .chain-ext-svg { animation: sign-swing 1.1s ease-in-out 1; }
.chain-ext-join { transform: translateY(var(--buy-sign-chain-length)); }
#buySign:hover { filter: brightness(1.1); }
#buySign:active { filter: brightness(.92); }
.sign-chrome { position: absolute; inset: 0; }
.sign-chrome::before { content: ''; position: absolute; inset: 0; background: #071727; clip-path: polygon(16% 24%, 89% 33%, 83% 90%, 11% 80%); }
.sign-chrome::after { content: ''; position: absolute; inset: 0; background: url('../assets/subway-rush/ui/buy-sign.webp') center / 100% 100% no-repeat; }
.sign-chains { display: none; }
.sign-frame { left: 34.4px; top: 60.8px; width: 164px; height: 137px; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; transform: matrix(1, .115, -.09, 1, 0, 0); transform-origin: 0 0; filter: none; box-sizing: border-box; }
.sign-panel, #buySign[data-mode='bonus'] .sign-panel, #buySign[data-mode='fsleft'] .sign-panel, #buySign[data-mode='frb'] .sign-panel { position: absolute; inset: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.sign-frame::before, .sign-frame::after, .sign-panel::before, .sign-panel::after { display: none; }
.sign-text { left: 0; top: 0; width: 164px; height: 78.4px; }
.poster-text, .panel-title { font-family: var(--font-heavy); font-weight: 900; }
.sign-text .pt-fill { fill: #ffdf38; stroke-width: 0; }
.sign-text .pt-outer { stroke: #030919; stroke-width: 4px; }
.sign-text .pt-shadow { stroke-width: 3px; }
.sign-crown { display: none; }
.sign-pill { left: 5px; right: 5px; top: 83.2px; bottom: auto; width: auto; transform: none; }
.sign-pill > span { min-width: 0; width: 100%; padding: 0 5px; height: 38px; box-sizing: border-box; border: 0; background: none; border-radius: 0; box-shadow: none; color: white; font: 900 34px/38px var(--font-heavy); letter-spacing: 0; -webkit-text-stroke: 1px #080e19; paint-order: stroke fill; }
.sign-pill::before, .sign-pill::after, .sign-pill > span::before, .sign-pill > span::after { display: none; }
#buySign[data-mode='bonus'] .sign-text { top: 3px; }
#buySign.disabled[data-mode='buy'] .sign-frame { filter: saturate(.7); }
/* a bet the platform cannot sell as a buy (price above max bet / at max payout):
   clearly greyed, but still tappable so ui.js can say why */
#buySign.unavailable[data-mode='buy'] { pointer-events: auto; cursor: not-allowed; }
#buySign.unavailable[data-mode='buy'] .sign-frame { filter: grayscale(.85) brightness(.62); }
/* Winning cells: no pink frame around the tiles before they burst; the label,
   the pulse and the paint carry the moment (the frame stays available in
   style.css for a quick return). */
.cell.win-outline::after { display: none; }
/* Tap-to-start gate: the dim, the logo and one line; the whole window is the button */
#startGate { z-index: 40; cursor: pointer; }
#startGate .gate-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
#startGate img { width: 380px; height: 275px; object-fit: contain; filter: drop-shadow(0 8px 14px #02061a); animation: gate-breathe 2.2s ease-in-out infinite alternate; }
#startGate .press-anywhere { font-size: 30px; }
@keyframes gate-breathe { from { transform: scale(.98); } to { transform: scale(1.03); } }
#stage.portrait #startGate img { width: 460px; height: 333px; }
#stage.portrait #startGate .press-anywhere { font-size: 40px; }
@media (prefers-reduced-motion: reduce) { #startGate img { animation: none; } }
/* ---- Win log: what burst on this spin (symbol, count, multiplier, amount),
   base game and bonus alike. Desktop: under the sign, the officer below it
   a little shorter. Portrait: the lower band of the WIN card, with WIN and
   the amount sharing its top band, so the rows sit under the total they add
   up to. Rows come from UI.winLog, cleared at every spin. ---- */
#winLog { display: block; pointer-events: none; left: 27.2px; top: 228px; width: 225.6px; height: 96px; z-index: 6; box-sizing: border-box; border: 16px solid transparent; border-image: var(--panel-frame) 28 fill / 18px / 0 stretch; border-radius: 0; background: none; box-shadow: 6px 8px 0 #020719a6; overflow: hidden; }
#winLog::after, #winLog .log-head, #winLog .log-idle { display: none; }
#winLogRows { left: 0; right: 0; top: 1px; bottom: 1px; display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; }
#winLog:not(.active) #winLogRows { background: repeating-linear-gradient(180deg, transparent 0 17px, #7fd8ff1a 17px 19px, transparent 19px 20px); }
.log-row { height: 18px; padding: 0 5px; gap: 5px; border-radius: 3px; background: #0b1f3a99; font-family: var(--font-heavy); font-weight: 800; font-size: 14px; letter-spacing: .3px; color: #a8c2d4; text-shadow: none; }
.log-row .lsize { min-width: 0; color: #fff; }
.log-row .lsize::after { content: '\00d7'; color: #a8c2d4; font-size: .85em; margin-left: 1px; }
.log-row .licon { width: 17px; height: 17px; }
.log-row .lmult { padding: 0 5px; border-radius: 3px; background: #ff2f9a; color: #fff; font-size: 12px; line-height: 15px; -webkit-text-stroke: 0; }
.log-row .lamt { color: #ffdf38; text-shadow: 0 1px 0 #030919; }
/* the officer (running in the base game, in his cell in the bonus) gives up the height the log takes */
#stage #bonusRival { top: 330px; height: 288px; }


/* Reference HUD: balance / bet, a dedicated live win field, auto and spin. */
#hud, body.free-spins #hud { left: 0; top: 638.4px; width: 1280px; height: 81.6px; border: 0; border-radius: 0; background: #080f23 url('../assets/subway-rush/ui/hud-chrome.webp') center / 100% 100% no-repeat; box-shadow: none; }
body.hud-big #hud { transform: none; }
.hud-strip { display: none; }
#hud > .hud-btn { position: absolute; }
#hud .readout { flex-direction: column; justify-content: center; gap: 0; min-width: 0; padding: 0 5px; border: 0; border-radius: 0; box-shadow: none; background: none; height: 57px; box-sizing: border-box; }
#hud .readout .lbl { min-width: 0; width: auto; text-align: center; color: #ffeb38; font: 900 18px/20px var(--font-heavy); letter-spacing: .1px; }
#hud .readout .val { font: 900 30px/34px var(--font-heavy); color: #fff; letter-spacing: -.5px; text-shadow: 2px 2px #000; font-variant-numeric: tabular-nums; }
#credit { left: 138px; top: 13px; width: 174px; }
#bet { left: 316px; top: 13px; width: 157px; cursor: pointer; }
#hud #bet { padding: 0 35px; }
#hud #bet .val { font-size: 27px; }
#bet::before { content: ''; position: absolute; left: -4px; top: 3px; bottom: 3px; width: 1px; background: #32d8f4; }
#bet:focus-visible { outline: 3px solid #ffdf37; outline-offset: -2px; }
/* The BET field spans this area. Keep steppers above it in pointer hit testing,
   including disabled controls, so a limit click cannot fall through to BET. */
#hud > #betDown, #hud > #betUp { z-index: 2; pointer-events: auto; top: 35px; width: 30px; height: 30px; border: 2px solid #28d8ed; border-radius: 8px; background: linear-gradient(#1a3851, #09192f); box-shadow: 0 0 0 2px #030a1b, inset 0 1px 0 #65a6bc66, 0 2px 0 2px #030a1b; }
#hud > #betDown { left: 319px; }
#hud > #betUp { left: 440px; }
#hud > #betDown::before, #hud > #betUp::before { display: none; }
#hud > #betDown .ico-minus::before, #hud > #betUp .ico-plus::before, #hud > #betUp .ico-plus::after { background: #dcfaff; }
#hud > #betDown:focus-visible, #hud > #betUp:focus-visible { outline: 3px solid #ffdf37; outline-offset: 3px; }
#winReadout { left: 506px; top: 12px; width: 274px; }
#winReadout .val { font-size: 33px; }
#message, #stage.portrait #message { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); transform: none; }
#menuBtn, #soundBtn { top: 16px; width: 59px; height: 55px; border-radius: 13px; border: 3px solid #24dff4; background: linear-gradient(#112541, #061126); box-shadow: 0 0 0 4px #020817, inset 0 0 0 2px #185278, 2px 3px 0 5px #071426; }
#menuBtn { left: 39px; }
#soundBtn { left: 1185px; }
#menuBtn::before, #soundBtn::before { display: none; }
#menuBtn .ico-menu { gap: 5px; }
#menuBtn .ico-menu i { width: 26px; height: 5px; border-radius: 3px; }
#soundBtn svg { width: 39px; height: 39px; }
#infoBtn { display: none; }
#autoBtn { left: 847px; top: 21px; width: 162px; height: 46px; border: 2px solid #20e2ff; border-radius: 20px; background: linear-gradient(#0a2042, #061129); color: #fff; box-shadow: 0 0 0 4px #03091a, inset 0 0 0 2px #144e78; font: 900 22px var(--font-heavy); letter-spacing: 0; }
#autoBtn::before, #autoBtn::after { display: none; }
#autoBtn.active { background: #8c174e; }
#autoBtnText { max-width: 145px; }
#spinBtn { left: 1023px; top: -61px; width: 138px; height: 138px; border: 4px solid #080d19; border-radius: 50%; background: radial-gradient(circle at 43% 28%, #dbff73 0%, #acff18 38%, #77dc00 72%, #c6ff44 85%); box-shadow: 0 0 0 3px #8ffe20, 0 0 0 7px #050b17, inset 0 0 0 5px #6fac10, inset 0 0 0 9px #cbff48, 3px 8px 0 7px #070c17; }
#spinBtn::before, #spinBtn::after { display: none; }
#spinBtn .spin-ring { inset: 11px; border: 2px solid #203c09; box-shadow: none; }
#spinBtn .spin-arrows { width: 109px; height: 109px; top: 50%; left: 50%; margin: -54.5px 0 0 -54.5px; }
#spinBtn .spin-word { inset: 0; display: flex; align-items: center; justify-content: center; font: 900 37px var(--font-heavy); letter-spacing: -1px; color: #0c1c06; text-shadow: none; -webkit-text-stroke: 0; padding-top: 2px; }
#spinBtn .spin-stop { width: 39px; height: 39px; margin: -19.5px 0 0 -19.5px; border: 0; background: #153008; }
#spinBtn.stop .spin-word { display: none; }
#spinBtn.stop .spin-arrows { display: none; }
#fastPlayBtn { position: absolute; left: 1037px; top: 53px; width: 110px; height: 24px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 4px; background: linear-gradient(#153b18, #071c13); border: 2px solid #b4f833; border-radius: 7px; box-shadow: 0 2px 0 2px #040c16; color: #d6ff83; font: 900 13px var(--font-heavy); white-space: nowrap; }
#fastPlayBtn svg { width: 13px; height: 17px; fill: currentColor; }
#fastPlayBtn { text-transform: uppercase; }
#fastPlayBtn[aria-pressed='true'] { background: #d3ff42; color: #122b08; }
#fastPlayBtn:focus-visible { outline: 3px solid #ffe736; outline-offset: 3px; }
/* Keep the compact FAST PLAY label, but give it a usable touch target after
   the fixed stage is scaled into a short or sideways phone. */
#fastPlayBtn::after { content: ''; position: absolute; inset: -14px -10px; }

/* The visible footer controls also serve the panel opened from BET. */
#betMenu { position: absolute; left: 214px; top: 450px; width: 314px; z-index: 19; padding: 25px; box-sizing: border-box; }
.bet-menu-title { margin: 0 0 16px; color: #ffe340; font-size: 27px; text-align: center; text-transform: uppercase; }
.bet-menu-controls { display: flex; gap: 12px; align-items: center; justify-content: center; }
#betMenu #betDown, #betMenu #betUp { position: relative; inset: auto; width: 52px; height: 52px; border: 2px solid #18d9f2; border-radius: 9px; background: #ffd632; flex: 0 0 52px; }
#betMenuValue { min-width: 104px; font: 900 29px var(--font-heavy); text-align: center; }
#betMenuClose { margin: 18px auto 0; display: block; min-height: 44px; min-width: 130px; color: #e4f9ff; font: 800 19px var(--font-heavy); text-transform: uppercase; }

/* One shared station-metal material for every dialog and secondary panel. */
.poster, .popover, #betMenu { border: 18px solid transparent; border-image: var(--panel-frame) 28 fill / 22px / 0 stretch; border-radius: 0; background: none; color: #edf4ff; box-shadow: 10px 12px 0 #020719a6; }
.poster .tape { display: none; }
/* One dim layer for the whole window: the overlay itself stays clear and
   only its ::before (inset -4000px) paints, so the fitted stage and the
   letterbox around it darken by exactly the same amount. */
.overlay.dim { background: none; }
.overlay.dim::before { background: #030819c9; }
.modal-panel { filter: drop-shadow(0 0 18px #00bbff29); }
.poster-text { letter-spacing: .6px; }
.pt-outer, .pt-shadow { stroke: #030919; fill: #030919; }
.pt-fill { fill: #ffe338; stroke: none; }
.pt-fill.hot { fill: #ffe338; }
.pt-fill.dark { fill: #fff; }
.panel-title, .info-page h2 { color: #ffe43b; text-transform: uppercase; font-weight: 900; -webkit-text-stroke: 0; text-shadow: 3px 4px #020919; }
.popover { left: 26px; top: 250px; width: 330px; padding: 16px 22px 20px; }
.popover-title { color: #ffe238; font: 900 29px var(--font-heavy); border-bottom-color: #229cc2; }
.toggle-row, .toggle-row.light, .menu-link { color: #edf4ff; border-color: #3b668077; font-weight: 800; }
.toggle-row .switch { background: #071024; border-color: #39b7d1; }
.toggle-row input:checked + .switch { background: #93ee17; }
.toggle-row input:focus-visible + .switch { outline: 3px solid #ffe736; outline-offset: 3px; }
.menu-link { background: #112c45; }
.menu-link:hover { color: #51e8ff; background: #20c4ed15; }
.menu-speed-row { display: flex; align-items: center; justify-content: space-between; min-height: 50px; border-bottom: 1px solid #3b668077; font: 800 20px var(--font-ui); text-transform: uppercase; }
#settingsMenu #speedBtn { position: relative; inset: auto; width: 90px; height: 42px; border: 2px solid #27d9f2; background: #0a1a34; border-radius: 8px; }
.buy-panel, .auto-panel { top: 93px; width: 752px; margin-left: -376px; padding: 18px 24px 20px; }
.poster .panel-inner { min-height: 0; }
.buy-title { width: 540px; height: 142px; margin: 0 auto 8px; }
.buy-title > use:last-child, .buy-title > use:nth-last-child(2) { display: none; }
.feature-badge { position: absolute; width: 87px; height: 87px; left: 0; top: 13px; filter: drop-shadow(3px 4px #020718); }
.buy-title .pt-outer { stroke-width: 8px; }
.buy-title .pt-shadow { stroke-width: 6px; }
.ticket-pill > span, .ticket-pill.count-pill { border: 3px solid #28d8f3; background: linear-gradient(#122943, #071125); box-shadow: 0 0 0 4px #040919, inset 0 0 0 2px #255775, 4px 5px #030818; color: #fff; border-radius: 9px; font-weight: 900; }
.ticket-pill > span::before, .ticket-pill > span::after, .ticket-pill.count-pill::before, .ticket-pill.count-pill::after { display: none; }
.ticket-pill.big > span { min-width: 290px; height: 72px; line-height: 68px; font-size: 51px; letter-spacing: 0; }
.buy-footer { margin-top: 20px; }
.buy-footer .lbl, .auto-sub { color: #75eaff; font: 800 19px var(--font-ui); text-transform: uppercase; letter-spacing: 1px; }
.bet-stepper .bet-box { border: 2px solid #279bbd; background: #091326; color: #fff; font-weight: 900; }
.bet-stepper .hud-btn.round.ctrl { width: 46px; height: 46px; border-color: #0b1328; background: #ffdc35; }
.buy-actions { gap: 28px; margin: 24px 0 10px; }
.chunky { width: 225px; height: 64px; border: 3px solid #02091c; border-radius: 11px; box-shadow: 0 0 0 2px #22c9eb, 4px 7px #030819; gap: 10px; font: 900 24px var(--font-heavy); text-transform: uppercase; letter-spacing: .4px; }
.chunky > svg { width: 29px; height: 29px; }
.chunky::after { display: none; }
.chunky.green { background: linear-gradient(#c4ff4b, #84de0d); color: #071307; }
.chunky.red { background: linear-gradient(#234363, #10253c); color: #fff; }
.chunky.green:hover { filter: brightness(1.1); }
.chunky:focus-visible, .auto-grid button:focus-visible, .hud-btn:focus-visible { outline: 3px solid #fff076; outline-offset: 4px; }
.auto-panel .panel-title { font-size: 58px; margin: 4px 0; }
.auto-grid { gap: 12px; margin: 25px auto; }
.auto-grid button, .auto-grid button:nth-child(n) { background: linear-gradient(#183452, #0c172f); color: white; border: 2px solid #22c1de; box-shadow: 3px 4px #03081a; border-radius: 9px; font: 900 30px var(--font-heavy); }
.auto-grid button:nth-child(n):hover { color: #07170b; background: #aff224; }
/* The visual button follows the reference; its invisible hit area does not
   become a 20px target on a letterboxed landscape phone. */
.auto-grid button { position: relative; }
.auto-grid button::after { content: ''; position: absolute; inset: -10px -8px; }
.auto-panel .toggle-row.light { max-width: 515px; margin: 0 auto; }
.info-panel { left: 87px; top: 28px; width: 1106px; height: 653px; }
.info-pages { top: 28px; bottom: 82px; }
.info-page.active, .info-page[data-page='1'].active { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #34dff4 #12243b; padding: 0 5px 18px; box-sizing: border-box; }
.info-page { color: #dfeafa; font-family: var(--font-ui); font-weight: 600; font-size: 21px; line-height: 1.4; }
.info-page p { margin: 4px 40px; }
.info-page p.gap { margin-top: 22px; }
.info-page[data-page='1'] p { font-size: 18px; line-height: 1.2; margin: 3px 30px; }   /* the paytable page is the full one */
.info-page h2.spaced { margin-top: 30px; }
.info-page strong, .info-page b { color: #fff39a; }
.info-page h2 { font-size: 34px; }
.pay-col { background: #172f4b66; border: 1px solid #396286; border-radius: 8px; padding-bottom: 7px; }
.pay-col table { color: #f0f5ff; }
.pay-col table td:first-child { color: #7fddf2; }
.scatter-row { border-top: 1px solid #33b6d8; }
.nav-arrow, .nav-x, .info-close { filter: drop-shadow(2px 3px #020619); }
.nav-arrow::before, .nav-x::before, .info-close::before { content: ''; position: absolute; inset: -12px; }
.nav-x, .info-close { background: #153853; border-color: #22cde4; }
.info-pageno { color: #87dbe9; }
.history-panel { color: white; }
.history-sub, .history-note, .hempty small { color: #9bb7cd; opacity: 1; }
.history-head { color: #77e4fb; border-color: #306681; }
.hrow { color: #edf4ff; border-color: #294664; background: #14304a55; }
.hrow:nth-child(even) { background: #16375188; }
.hrow .hmeta, #stage.portrait .hrow .hmeta { color: #a8c2d4; }
#stage.portrait .hrow .hmeta2 { color: #e1ff81; }
.hrow .hmeta b, #stage.portrait .hrow .hmeta b { color: #71e3f4; }
.hrow .hwin, .history-head .hwin { color: #e1ff81; }
.hreplay { background: #102744; color: #a9eeff; border-color: #2ac2df; }
.rc-sub, .rc-stats b { color: #ecf5ff; }
.rc-stats span { color: #68e4f4; }
.rc-stats > div { border-color: #266580; background: #112641; }
.rc-actions { gap: 28px; }

/* Wins and bonus screens continue the station signage material. */
.overlay.splash .splash-bg, .overlay.splash .splash-bg.pink { background: radial-gradient(ellipse 905px 560px at center, #182750, #05091b 70%); }
.splash-rays, .fs .splash-rays { background: repeating-conic-gradient(from 15deg, #0bd9ff16 0deg 10deg, transparent 10deg 25deg, #fb15b81c 25deg 34deg, transparent 34deg 49deg); opacity: .75; }
.splash-title { transform: rotate(-5deg); filter: drop-shadow(0 0 16px #ff26c12e); }
.splash-title .pt-outer.thick { stroke: #f11bc1; stroke-width: 25px; }
.splash-title .pt-fill.thick { stroke: #07091b; stroke-width: 12px; }
.splash-title-text { font-family: Bangers, Impact, sans-serif; font-weight: 400; }
.splash .count-pill { border-color: #37e6ff; background: linear-gradient(#122746, #070e20); }
.splash .pill-text .pt-fill.dark { fill: white; stroke: none; }
.splash .pill-text .pt-outer { stroke-width: 3px; }
.fs-panel { width: 862px; height: 560px; margin: -280px 0 0 -431px; opacity: .97; }
.fs-congrats { width: 860px; height: 141px; }
.fs-congrats .pt-outer { stroke: #fa23c5; stroke-width: 16px; }
.fs .fs-congrats .pt-fill { fill: #ffe338; stroke: #050c21; stroke-width: 7px; }
.fs .fs-line .pt-fill { fill: #85f3ff; }
.fs-line { width: 620px; height: 65px; }
.press-anywhere { color: #c2f4ff; font: 800 23px var(--font-ui); letter-spacing: 2px; text-shadow: 2px 2px #050719; }
.splash-mascot { left: 1020px; top: 282px; width: 221px; height: 366px; }
#retrigger .count-pill { border-color: #fb38cc; }
.intro-sky { background: linear-gradient(#08162abc, #060e22d9), url('../assets/subway-rush/scene/station-motion-desktop.webp') center / cover; }
.intro-cab { background: #0b1830; }
.intro-caption { color: #fff; text-shadow: 3px 4px #03091b; }
.intro-check, .volatility-badge { color: #d8edff; }
.intro-logo { filter: none; }
.ld-title { background-image: url('../assets/subway-rush/ui/reference-logo.webp'); }
.ld-writer, #loader.finish .ld-writer { background-image: url('../assets/subway-rush/ui/runner-clean-desktop.webp'); }
.coin > img { width: 100%; height: 100%; object-fit: contain; animation: coin-flip var(--f, 700ms) linear infinite; }

/* Approved 853x1844 mobile reference mapped uniformly to 720x1556.48. */
.mobile-cards { display: none; }
#stage.portrait { --stage-w: 720px; --stage-h: 1556.48px; --board-x: 30.39px; --board-y: 385.76px; --cell-w: 94.295px; --cell-h: 89.351px; --board-w: 660.065px; --board-h: 625.457px; --hud-top: 1195.22px;
  /* compact portrait (js/ui.js layout()): --head-k scales the logo + runner header, --trim-gap
     closes the slack under the board; --stage-h / --board-y are overridden inline. */
  --head-k: 1; --char-k: 1; --trim-gap: 0px; }
body.portrait .reference-backdrop { background-image: url('../assets/subway-rush/scene/station-motion-mobile.webp'); background-size: 100% 100%; }
body.portrait #viewport { background-image: radial-gradient(ellipse at center, #172444, #060c1e 80%); }
#stage.portrait .reference-left, #stage.portrait #trainLayer { display: none; }
#stage.portrait #logo { left: calc(335.1px - 179.79px * var(--head-k)); top: calc(67.53px * var(--head-k)); width: calc(359.58px * var(--head-k)); height: calc(276.86px * var(--head-k)); }
#stage.portrait #logo img { object-fit: fill; }
#stage.portrait #mascot { left: calc(720px - 282.77px * var(--char-k)); top: calc(var(--board-y) - 18.57px - 308.1px * var(--char-k)); width: calc(282.77px * var(--char-k)); height: calc(308.1px * var(--char-k)); z-index: 1; }
#stage.portrait #mascot.mascot-fly-out, #stage.portrait #mascot.mascot-fly-home, #stage.portrait #mascot.mascot-landed { z-index: 6; }
#stage.portrait #mascot > .strip { background-image: url('../assets/subway-rush/ui/runner-clean-mobile.webp'); }
#stage.portrait #mascot.mascot-on-board { width: 212px; height: 351.125px; z-index: 6; }
#stage.portrait #mascot.mascot-on-board > .strip { background: url('../assets/subway-rush/ui/runner-clean-desktop.webp') center bottom / contain no-repeat; animation: none; scale: none; }
#stage.portrait #mascot.mascot-on-board.mascot-fly-out > .strip, #stage.portrait #mascot.mascot-on-board.mascot-fly-home > .strip { background-image: url('../assets/subway-rush/scene/runner-run.webp'); background-size: 400% 100%; background-position: 0 0; animation: subway-run .48s steps(4) infinite; scale: var(--run-dir, 1) 1; }
#stage.portrait #mascot.mascot-fly-out > .strip, #stage.portrait #mascot.mascot-fly-home > .strip { background-image: url('../assets/subway-rush/scene/runner-run.webp'); }
#stage.portrait #frame { display: block; left: 0; top: calc(var(--board-y) - 32.94px); width: 720px; height: 685.4px; background: url('../assets/subway-rush/ui/mobile-frame.webp') center / 100% 100% no-repeat; border: 0; }
#stage.portrait #board, body.free-spins #stage.portrait #board { box-shadow: none; border-radius: 5px; }
#stage.portrait .mobile-cards { display: block; position: absolute; left: 0; top: calc(var(--board-y) + 650.77px - var(--trim-gap)); width: 720px; height: 159.53px; z-index: 2; pointer-events: none; background: #071727 url('../assets/subway-rush/ui/mobile-cards.webp') center / 100% 100% no-repeat; }
#stage.portrait #buySign, #stage.portrait #buySign.sign-swing { left: 8.44px; top: calc(var(--board-y) + 650.77px - var(--trim-gap)); width: 346.91px; height: 158.69px; transform: none; animation: none; }
#stage.portrait .sign-chrome, #stage.portrait .sign-chains { display: none; }
#stage.portrait .sign-frame { left: 0; top: 0; width: 100%; height: 100%; border: 0; background: none; transform: none; }
#stage.portrait .sign-panel { inset: 0; }
#stage.portrait .sign-text { left: 94px; top: 15px; width: 230px; height: 45px; }
#stage.portrait .sign-crown { display: none; }
#stage.portrait .sign-pill { left: 95px; right: 52px; top: 77px; bottom: auto; }
#stage.portrait .sign-pill > span { min-width: 0; height: 56px; font-size: 47px; line-height: 56px; border: 0; background: none; }
#stage.portrait #buySign[data-mode='bonus'] .sign-text { top: 15px; }
/* portrait: the log lives in the WIN card, under the total it adds up to; WIN and the amount share the card's top band */
/* while a splash card (bonus intro/outro, big win) is up, the WIN card's contents stay under it on a phone */
#stage.portrait.splash-open #winReadout, #stage.portrait.splash-open #winLog { visibility: hidden; }
#stage.portrait #winLog { left: 392px; top: calc(var(--board-y) + 708.24px - var(--trim-gap)); width: 300px; height: 92px; border: 0; border-image: none; background: #000; border-radius: 6px; box-shadow: none; padding: 3px 4px; }
#stage.portrait #winLogRows { left: 0; right: 0; top: 0; bottom: 0; gap: 3px; }
#stage.portrait #winLog:not(.active) #winLogRows { background: repeating-linear-gradient(180deg, transparent 0 24px, #7fd8ff1a 24px 26px, transparent 26px 29px); }
#stage.portrait .log-row { height: 26px; padding: 0 8px; gap: 7px; font-size: 21px; }
#stage.portrait .log-row .licon { width: 24px; height: 24px; }
#stage.portrait .log-row .lmult { font-size: 17px; line-height: 22px; padding: 0 7px; }
#stage.portrait #winReadout { left: 391px; top: -152px; width: 301px; height: 54px; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; padding: 0 16px; border: 0; background: none; }
#stage.portrait #hud #winReadout .lbl { font-size: 30px; line-height: 34px; }
#stage.portrait #hud #winReadout .val { font-size: 42px; line-height: 48px; }
#stage.portrait #hud { top: calc(var(--board-y) + 809.46px - var(--trim-gap)); left: 0; width: 720px; height: 361.26px; border: 0; border-radius: 0; background: none; box-shadow: none; }
#stage.portrait #hud::before { content: ''; position: absolute; left: 0; top: 0; width: 720px; height: 113.95px; background: #071727 url('../assets/subway-rush/ui/mobile-hud.webp?v=motion-v5') center / 100% 100% no-repeat; }
#stage.portrait #hud .readout .lbl { font-size: 24px; line-height: 28px; }
#stage.portrait #hud .readout .val { font-size: 40px; line-height: 44px; }
#stage.portrait #credit { left: 35px; top: 17px; width: 253px; height: 74px; justify-content: center; }
#stage.portrait #bet { left: 328px; top: 17px; width: 169px; height: 74px; padding: 0 5px; }
#stage.portrait #bet::before { display: none; }
#stage.portrait #hud > #betDown, #stage.portrait #hud > #betUp { top: 34px; width: 66px; height: 58px; border: 3px solid #1cdef0; border-radius: 13px; background: #0a1733; box-shadow: 0 0 0 3px #020c20, inset 0 0 0 2px #183e62; }
#stage.portrait #hud > #betDown { left: 512px; }
#stage.portrait #hud > #betUp { left: 626px; }
#stage.portrait #hud > #betDown::before, #stage.portrait #hud > #betUp::before { display: none; }
#stage.portrait #hud > #betDown::after, #stage.portrait #hud > #betUp::after { content: ''; position: absolute; inset: -10px -7px; }
#stage.portrait #hud > #betDown .ico-minus::before, #stage.portrait #hud > #betUp .ico-plus::before, #stage.portrait #hud > #betUp .ico-plus::after { background: #fff; }
#stage.portrait #spinBtn { left: 264px; top: 106px; width: 194px; height: 194px; }
#stage.portrait #spinBtn .spin-arrows { width: 155px; height: 155px; margin: -77.5px 0 0 -77.5px; }
#stage.portrait #spinBtn .spin-word { font-size: 51px; padding: 0; }
#stage.portrait #spinBtn .spin-stop { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
/* a thumb-sized Fast Play under the spin button (54 stage px = 29 px on a 390 phone, plus the ::after slack) */
#stage.portrait #fastPlayBtn { left: 258px; top: 278px; z-index: 6; width: 206px; height: 54px; border-width: 3px; border-radius: 12px; font-size: 26px; gap: 7px; text-transform: uppercase; }
#stage.portrait #fastPlayBtn svg { width: 24px; height: 30px; }
#stage.portrait #fastPlayBtn::after { inset: -14px -16px; }   /* hit area ~124x44 css px on a 390 phone */
#stage.portrait #menuBtn { left: 25px; top: 171px; width: 100px; height: 92px; border-radius: 17px; }
#stage.portrait #soundBtn { left: 145px; top: 171px; width: 94px; height: 92px; border-radius: 17px; }
#stage.portrait #autoBtn { left: 481px; top: 171px; width: 215px; height: 89px; border-radius: 18px; font-size: 34px; }
#stage.portrait #autoBtnText { max-width: 198px; }
#stage.portrait #infoBtn { display: none; }
#stage.portrait #menuBtn .ico-menu { gap: 7px; }
#stage.portrait #menuBtn .ico-menu i { width: 40px; height: 7px; }
#stage.portrait #soundBtn svg { width: 58px; height: 58px; }
/* portrait settings: finger-sized rows and switches (the menu opens above the burger) */
#stage.portrait #settingsMenu { left: 15px; top: auto; bottom: 20px; width: 560px; padding: 26px 30px; }   /* anchored to the stage bottom: compact portrait shortens the stage */
#stage.portrait #settingsMenu .popover-title { font-size: 40px; }
#stage.portrait .toggle-row, #stage.portrait .menu-link { font-size: 34px; min-height: 80px; }
#stage.portrait .toggle-row .switch { width: 92px; height: 50px; border-radius: 25px; border-width: 4px; }
#stage.portrait .toggle-row .switch::after { left: 4px; top: 4px; width: 34px; height: 34px; }
#stage.portrait .toggle-row input:checked + .switch::after { left: 50px; }
#stage.portrait #settingsMenu #speedBtn { width: 170px; height: 84px; }
#stage.portrait .menu-speed-row { font-size: 34px; min-height: 90px; }
#stage.portrait #betMenu { left: 177px; top: 968px; width: 510px; padding: 24px; }
#stage.portrait #betMenu #betDown, #stage.portrait #betMenu #betUp { inset: auto; width: 94px; height: 94px; flex-basis: 94px; }
#stage.portrait #betMenuValue { width: 178px; font-size: 39px; }
#stage.portrait #betMenuClose { height: 72px; font-size: 28px; }
#stage.portrait .buy-panel, #stage.portrait .auto-panel { top: 430px; width: 680px; margin-left: -340px; padding: 24px 20px; }
#stage.portrait .buy-title { width: 526px; height: 166px; }
#stage.portrait .feature-badge { width: 68px; height: 68px; left: -6px; top: 24px; }
#stage.portrait .buy-actions { gap: 24px; margin-top: 30px; }
#stage.portrait .chunky { width: 246px; height: 96px; font-size: 29px; }
#stage.portrait .buy-footer .lbl { font-size: 26px; }
#stage.portrait .bet-stepper .hud-btn.round.ctrl { width: 94px; height: 94px; }
#stage.portrait .bet-stepper .bet-box { height: 70px; line-height: 66px; font-size: 35px; }
#stage.portrait .auto-grid button { min-height: 94px; }
#stage.portrait .auto-panel .toggle-row.light { font-size: 27px; padding-block: 14px; }
/* Portrait rules/history: span the visible window, not just the stage. A squat iframe fits the
   stage by height and leaves side bands (--bleed-left/right, set by UI.layout()); the stage is
   not clipped sideways, so the panels grow into them. --stage-h shrinks in compact portrait. */
#stage.portrait .info-panel, #stage.portrait .history-panel { left: calc(20px - var(--bleed-left, 0px)); top: 24px; width: calc(680px + var(--bleed-left, 0px) + var(--bleed-right, 0px)); height: calc(var(--stage-h) - 48px); }
#stage.portrait .info-pages { top: 18px; bottom: 130px; }
#stage.portrait .info-page { font-size: 30px; line-height: 1.45; }
#stage.portrait .info-page h2 { font-size: 44px; }
#stage.portrait .info-page p { margin: 6px 20px; }
/* paytable: four symbols per row, then three and the scatter, all above the nav */
#stage.portrait .pay-col .pay-icon > svg { width: 84px; height: 84px; }
#stage.portrait .pay-col table { font-size: 24px; line-height: 28px; }
#stage.portrait .info-page[data-page='1'] p { font-size: 25px; line-height: 1.3; margin: 4px 16px; }
#stage.portrait .scatter-row { gap: 18px; margin-top: 6px; }
/* history on a phone: style.css folds the four figures into a second line; only the sizes grow here */
#stage.portrait .history-head, #stage.portrait .hrow { grid-template-columns: 40px 150px auto 110px 1fr 40px; column-gap: 8px; }   /* #, time, badge (collapses when empty), bet, win, caret */
#stage.portrait .history-head { padding: 0 14px; }
#stage.portrait .hrow { grid-template-rows: 66px auto auto auto; height: auto; min-height: 66px; padding: 0 14px 0; font-size: 30px; }
#stage.portrait .hrow.open { padding-bottom: 8px; background: #16375188; }
#stage.portrait .hrow .hcaret { width: 16px; height: 16px; border-color: #71e3f4; }
#stage.portrait .hrow .hno { font-size: 20px; }
#stage.portrait .hrow .hmeta, #stage.portrait .hrow .hmeta2 { font-size: 26px; line-height: 36px; letter-spacing: 0.3px; }
#stage.portrait .hrow .hmeta2 { color: #e1ff81; }
#stage.portrait .history-head { font-size: 20px; height: 40px; }
#stage.portrait .history-sub { font-size: 20px; line-height: 1.3; margin-bottom: 8px; }
#stage.portrait .hrow .hreplay { font-size: 20px; padding: 0 12px; height: 46px; }
#stage.portrait .hrow small { font-size: 14px; }
#stage.portrait .history-head { font-size: 16px; }
#stage.portrait .hreplay { font-size: 18px; min-height: 44px; padding: 0 12px; }
#stage.portrait .info-nav { bottom: 30px; }
#stage.portrait .nav-x, #stage.portrait .info-close { width: 94px; height: 94px; font-size: 46px; }
#stage.portrait .nav-arrow { width: 94px; height: 94px; }
#stage.portrait .info-pageno { bottom: 50px; }
#stage.portrait .fs-panel { width: 680px; height: 740px; margin: -370px 0 0 -340px; }
/* Free-spins intro/outro: centre the poster in the band between the window's top edge
   (--bleed-top, set by UI.layout()) and the HUD, never in the whole stage — the HUD paints
   above the overlay (#stage.splash-open #hud), and on a short stage (compact portrait) or a
   tall desktop window the stage centre lands on or under it. The mascot keeps its offset
   from the poster's centre. */
#fsScreen .fs-content { top: 0; height: var(--hud-top); }
#fsScreen .splash-mascot { top: max(0px, calc(var(--hud-top) / 2 - 78px)); }
#stage.portrait #fsScreen .splash-mascot { top: max(0px, calc(var(--hud-top) / 2 - 708.24px)); }
#stage.portrait .fs-congrats { width: 660px; height: 140px; }
#stage.portrait .fs-line { width: 590px; height: 86px; }
#stage.portrait .splash-mascot { left: 420px; top: 70px; width: 239px; height: 395px; }
#stage.portrait .press-anywhere { font-size: 29px; }
/* The intro's sky fills the whole window, not just the stage: it grows by the
   bleed the layout measured on each side (see UI.layout), like the station backdrop. */
#intro .intro-sky { inset: calc(-1 * var(--bleed-top, 0px)) calc(-1 * var(--bleed-right, 0px)) calc(-1 * var(--bleed-bottom, 0px)) calc(-1 * var(--bleed-left, 0px)); }
/* The intro's PLAY button wears the same skin as the HUD's SPIN button. */
#introStart { border: 4px solid #080d19; border-radius: 50%; background: radial-gradient(circle at 43% 28%, #dbff73 0%, #acff18 38%, #77dc00 72%, #c6ff44 85%); box-shadow: 0 0 0 3px #8ffe20, 0 0 0 7px #050b17, inset 0 0 0 5px #6fac10, inset 0 0 0 9px #cbff48, 3px 8px 0 7px #070c17; }
#introStart::before, #introStart::after { display: none; }
#introStart .spin-ring { inset: 11px; border: 2px solid #203c09; box-shadow: none; }
#introStart .spin-arrows { width: 79%; height: 79%; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); }
#introStart:hover .spin-arrows { transform: translate(-50%, -50%) rotate(40deg); }
#introStart:active { transform: translateY(4px); box-shadow: 0 0 0 3px #8ffe20, 0 0 0 7px #050b17, inset 0 0 0 5px #6fac10, inset 0 0 0 9px #cbff48, 3px 3px 0 7px #070c17; }
#introStart .spin-word { inset: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font: 900 34px var(--font-heavy); letter-spacing: -1px; color: #0c1c06; text-shadow: none; -webkit-text-stroke: 0; padding-top: 2px; }
#stage.portrait #introStart .spin-word { font-size: 44px; padding: 0; }
#stage.portrait #introStart .spin-arrows { width: 79%; height: 79%; margin: 0; }
#stage.portrait .intro-left { top: 80px; }
#stage.portrait .intro-right { top: 830px; }
#stage.portrait .rc-panel { top: 500px; }
@media (prefers-reduced-motion: reduce) { #buySign, #stage #buySign.sign-swing, .chain-ext-svg, .splash-title, #stage.portrait #mascot.mascot-on-board > .strip { animation: none !important; } }