/* Subway Rush scene and motion. reference-ui.css sets the final stage geometry. */
:root { --tile: #dce4f6; --tile-lo: #b6c3dc; --grout: #454969; --steel: #16b7da; --steel-hi: #68e7ff; --steel-lo: #0a1834; }
#viewport { background: #0b102b; }   /* the station plate is #stationBackdrop; reference-ui.css paints the gradient fallback */
#stage, body.has-video #stage { background: transparent; }
#bgScene, #bgSky { display: none; }
#trainLayer { top: 478px; opacity: .8; }
#train { animation-duration: 24s; }
#board { border-radius: 9px; box-shadow: 0 0 0 4px #0b142c, 0 0 0 9px #27daef, 6px 12px 0 10px #090c24, 0 0 36px #1de3ff88; }
#frame .frame-inner { fill: #0d2944; stroke: #64f1ff; }
#frame .frame-outer { fill: #081125; }
#frame .frame-lip { fill: #32cce3; }
.cell { box-sizing: border-box; border: 1px solid #707e9e44; border-radius: 7px; background: linear-gradient(145deg, #ffffff30, transparent 55%); }
.cell .sym { width: calc(var(--cell-w) - 7px); height: calc(var(--cell-h) + 1px); margin: calc((var(--cell-h) + 1px) / -2) 0 0 calc((var(--cell-w) - 7px) / -2); }
.cell.has-scatter .sym > svg { transform: scale(1.04); }
.scatter-ribbon { width: calc(var(--cell-h) * .78); bottom: 4px; height: 16px; line-height: 16px; font-size: 12px; letter-spacing: .4px; color: #fff58c; }
.scatter-ribbon::after, .scatter-ribbon-static::after { background: linear-gradient(#ffec73, #ffa414); }
.scatter-ribbon, .scatter-ribbon-static { color: #fff5a1; -webkit-text-stroke-color: #1a1121; }
#logo { left: 1053px; top: 14px; width: 223px; height: 150px; transform: rotate(-2deg); }
#logo img, .intro-logo img { width: 100%; height: 100%; object-fit: contain; }
#mascot { left: 1050px; top: 203px; width: 224px; height: 352px; }
#mascot > .strip, .intro-mascot > .strip, .splash-mascot > .strip,
body.mascot-cheer #mascot > .strip, body.mascot-spray #mascot > .strip, body.mascot-spray-big #mascot > .strip {
  width: 100%; background: url('../assets/subway-rush/scene/runner-idle.webp') center bottom / contain no-repeat; animation: none; transform: none;
}
/* Frame playback changes actual leg poses; movement of the actor is separate. */
#mascot.mascot-fly-out > .strip, #mascot.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;
}
#mascot.mascot-fly-out > .strip, #mascot.mascot-fly-home > .strip { scale: var(--run-dir, 1) 1; }
/* UI.fx.spray draws one jet at the can's measured nozzle. */
/* Percent positions use (container - image) width: positive moves left. */
@keyframes subway-run { to { background-position: 133.333333% 0; } }
#hud { background: linear-gradient(#0c1834, #080d23); border-top: 4px solid #31d8f1; box-shadow: 0 -7px 0 #0b0b24, 0 -10px 25px #11d8ff33; }
.hud-strip { background: #34e5f1; }
#winLog { background-color: #090e26e8; }
.sign-frame { filter: drop-shadow(0 0 8px #00d4ff66); }
#loader { background-image: url('../assets/subway-rush/scene/station-motion-desktop.webp'); }
.ld-title { width: min(440px, 70vw); height: min(280px, 46vw); background: url('../assets/subway-rush/logo.svg') center / contain no-repeat; }
.ld-title b { visibility: hidden; }
.ld-writer, #loader.finish .ld-writer { background-image: url('../assets/subway-rush/scene/runner-idle.webp'); }

/* Bonus environment is a separate moving tunnel, behind the playable board. */
#subwayTunnel { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 43%, #040312 8%, #261046 48%, #08081d 75%); opacity: 0; transition: opacity .55s; pointer-events: none; }
body.free-spins #subwayTunnel { opacity: 1; }
body.free-spins { --tile: #eee1fa; --tile-lo: #c9a9dd; --grout: #6d456f; }

/* Four-second chase: whistle, run cycles, approaching train, light, handoff. */
#subwayChase { position: fixed; inset: 0; z-index: 900; isolation: isolate; overflow: hidden; background: #080b24; font-family: var(--font-display); color: #fff; touch-action: manipulation; }
.actor { position: absolute; width: min(27vw, 320px); aspect-ratio: 4 / 5; bottom: 18%; filter: drop-shadow(0 12px 6px #05062299); transform-origin: 50% 100%; }
.actor > i { position: absolute; inset: 0; display: block; background-repeat: no-repeat; }
.chase-police { left: 13%; }
.chase-runner { left: 44%; }
.chase-police .actor-idle { background: url('../assets/subway-rush/scene/police-idle.webp') center bottom / contain no-repeat; }
.chase-runner .actor-idle { background: url('../assets/subway-rush/scene/runner-idle.webp') center bottom / contain no-repeat; }
.actor .actor-run { display: none; background-size: 400% 100%; animation: subway-run .44s steps(4) infinite; }
.chase-police .actor-run { background-image: url('../assets/subway-rush/scene/police-run.webp'); animation-duration: .52s; }
.chase-runner .actor-run { background-image: url('../assets/subway-rush/scene/runner-run.webp'); }
.whistle-mark { position: absolute; right: 5%; top: 8%; font-size: clamp(40px, 9vw, 110px); color: #ffde32; -webkit-text-stroke: 4px #0c0c26; paint-order: stroke fill; transform: rotate(12deg); animation: whistle-pop .28s ease alternate 3; }
@keyframes whistle-pop { from { scale: .7; } to { scale: 1.15; } }
.is-running .actor-idle, .is-running .whistle-mark { display: none; }
.is-running .actor-run { display: block; }
.is-running .chase-runner { animation: runner-escape 2.2s cubic-bezier(.3,.03,.55,1) both; }
.is-running .chase-police { animation: police-chase 2.5s cubic-bezier(.35,.03,.7,1) both; }
@keyframes runner-escape { 0% { transform: translateX(0); } 30% { transform: translateX(12vw) translateY(-6px); } 100% { transform: translateX(80vw); } }
@keyframes police-chase { 0% { transform: translateX(0); } 35% { transform: translateX(16vw); } 100% { transform: translateX(115vw); } }
.chase-caption { position: absolute; top: 8%; left: 5%; right: 5%; text-align: center; transform: rotate(-3deg); text-shadow: 5px 6px #080a20; }
.chase-caption span { display: block; font: 800 clamp(14px, 2vw, 21px) var(--font-ui); letter-spacing: 3px; color: #83f9ff; }
.chase-caption strong { display: block; font-size: clamp(38px, 7vw, 88px); color: #ffe037; -webkit-text-stroke: 4px #0b0b24; paint-order: stroke fill; }
.chase-caption span:last-child { margin-top: 6px; color: #fff; }
#chaseSkip { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); right: max(24px, env(safe-area-inset-right)); min-height: 48px; padding: 0 24px; background: #131932; border: 3px solid #6ef2ff; box-shadow: 5px 5px #05071c; border-radius: 8px; font: 800 17px var(--font-ui); color: #fff; }
#chaseSkip:focus-visible, #previewChase:focus-visible { outline: 4px solid #ffe236; outline-offset: 4px; }
.chase-flash { position: absolute; inset: 0; background: #e9fcff; opacity: 0; pointer-events: none; }
.is-impact .chase-flash { animation: headlight-wash .7s ease-out forwards; }
#subwayChase.is-revealing { opacity: 0; transition: opacity .6s; }
#subwayChase.reduced .actor { display: none; }
#subwayChase.reduced .chase-caption { top: 36%; transform: none; }
body.chase-active #stage { pointer-events: none; }
body.chase-active #mascot, body.chase-active #train { animation-play-state: paused; }
body.page-hidden #mascot, body.page-hidden #mascot > .strip { animation-play-state: paused; }
#previewChase { position: fixed; left: 50%; top: max(8px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 80; border: 2px solid #23eeef; border-radius: 7px; padding: 10px 17px; min-height: 44px; background: #10152dec; color: #fff; box-shadow: 4px 4px #070922; font: 800 15px var(--font-ui); }
#previewChase:disabled { opacity: .45; cursor: default; }
body.chase-active #previewChase { visibility: hidden; }

/* Phone composition: large header, square-ish board and usable controls. */
#stage.portrait { --board-y: 228px; --cell-h: 89px; --board-h: 623px; }
#stage.portrait #board { box-shadow: 0 0 0 4px #081126, 0 0 0 11px #26d7e6, 0 0 0 16px #101631, 0 0 28px #03d9ff88; }
#stage.portrait #logo { left: 116px; top: 7px; width: 345px; height: 213px; transform: none; }
#stage.portrait #mascot { left: 481px; top: 0; width: 206px; height: 231px; }
#stage.portrait #trainLayer { display: block; top: 106px; opacity: .6; }
#stage.portrait #buySign { top: 880px; height: 140px; }
#stage.portrait .sign-frame { height: 139px; }
#stage.portrait .sign-text { top: 3px; height: 69px; }
#stage.portrait .sign-pill { bottom: 9px; }
#stage.portrait #winLog { top: 880px; height: 141px; }
#stage.portrait .log-idle { top: 40px; }
#stage.portrait .scatter-ribbon { font-size: 14px; height: 18px; line-height: 18px; bottom: 5px; }
#stage.portrait #hud { top: 1038px; height: 242px; }
#stage.portrait #message { top: 4px; }
#stage.portrait #credit { top: 64px; left: 18px; width: 268px; height: 56px; }
#stage.portrait #bet { top: 64px; left: 408px; width: 172px; height: 56px; }
#stage.portrait #betDown, #stage.portrait #betUp { top: 36px; width: 100px; height: 100px; }
#stage.portrait #betDown { left: 298px; }
#stage.portrait #betUp { left: 598px; }
#stage.portrait #spinBtn { top: 130px; left: 320px; width: 110px; height: 110px; }
#stage.portrait #menuBtn, #stage.portrait #soundBtn, #stage.portrait #infoBtn { top: 140px; width: 100px; height: 100px; }
#stage.portrait #menuBtn { left: 8px; }
#stage.portrait #soundBtn { left: 112px; }
#stage.portrait #infoBtn { left: 216px; }
#stage.portrait #autoBtn, #stage.portrait #speedBtn { top: 140px; width: 120px; height: 100px; font-size: 19px; }
#stage.portrait #autoBtn { left: 442px; }
#stage.portrait #speedBtn { left: 574px; width: 132px; padding: 0 7px; }
@media (orientation: portrait) {
  .actor { width: 48vw; bottom: 26%; }
  .chase-police { left: 0; }
  .chase-runner { left: 42%; }
  .chase-caption { top: 18%; }
  .chase-caption strong { font-size: clamp(36px, 10vw, 60px); }
  .chase-caption span { letter-spacing: 1.5px; }
}
@media (prefers-reduced-motion: reduce) {
  #mascot > .strip, body[data-phase] #mascot > .strip, #mascot.mascot-fly-out > .strip, #mascot.mascot-fly-home > .strip { animation: none; }
  .whistle-mark, .actor .actor-run { animation: none; }
  #subwayTunnel { transition: none; }
}