/* COASTLINE HEAT v5 — coastal neon, warm chrome, a clear and tactile cabinet.
   This file is the final presentation layer. It does not change game outcomes. */

:root {
  --cream: #fff1d8;
  --cyan: #94e9dd;
  --coral: #ff9b89;
  --gold: #f4d69a;
  --pink: #ee839f;
  --ink: #082630;
  --finish-panel: #102c38;
  --finish-panel-deep: #071d28;
  --finish-line: #b7e3dc38;
  --finish-muted: #a6c4c6;
  --finish-display: Impact, 'Arial Narrow', sans-serif;
  --finish-body: 'Avenir Next', 'Trebuchet MS', sans-serif;
  font-family: var(--finish-body);
  font-weight: 600;
  color: var(--cream);
  background: #091e2a;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

html { height: 100%; background: #091e2a; }
body { height: 100%; overflow: hidden; background: transparent; }
button, select, input { font-family: var(--finish-body); }
button { transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .14s ease; }
button:hover:not(:disabled) { filter: none; }
button:disabled { opacity: .44; }
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible,
a:focus-visible { outline: 3px solid #c4fff2; outline-offset: 4px; }
button:active:not(:disabled) { transform: translateY(1px); }

/* The city remains saturated; quiet foreground surfaces give it room to breathe. */
.backdrop { background: #1a3446; }
.backdrop:before { animation: none; background-position: center 49%; }
.backdrop:after { background-position: 69% center; }
.stage-glow {
  background: linear-gradient(180deg, #06192524 0%, transparent 25%, #06131e16 54%, #06131eb5 100%),
    linear-gradient(90deg, #06233020, transparent 28%, transparent 74%, #0623302e);
}
.floating-dust { opacity: .14; }
.ocean-shimmer { opacity: .5; }
.police-reflections { z-index: 1; opacity: .5; }
.police-reflections i, .bonus-active .police-reflections i { animation-duration: 8s; }
.searchlight { opacity: .45; }
.city-sign, .radio-sticker, .driveby { display: none; }

.game {
  --stage-width: min(1040px, calc((100svh - 240px) * 1.45 + 238px));
  width: 100%; max-width: 1440px; height: 100svh; min-height: 0;
  margin: 0 auto; padding: 17px 28px 10px; gap: 7px;
  isolation: isolate;
}
.topbar { min-height: 68px; gap: 22px; width: 100%; max-width: 1240px; margin: 0 auto; }
.brand { transform: skew(-8deg); filter: drop-shadow(0 3px 0 #153e4de0); }
.brand span {
  font: 20px/.9 var(--finish-display); letter-spacing: 4.2px;
  color: #fff6dc; text-shadow: 0 1px #173c47;
}
.brand strong {
  font: 59px/.88 var(--finish-display); letter-spacing: 3.7px;
  color: #ffab98; -webkit-text-stroke: 1px #ffecd1;
  text-shadow: 0 3px #b35762, 0 6px #102e3f;
}
.brand small {
  margin-top: 9px; color: #fff5dd; font-size: 7px;
  line-height: 1.2; font-weight: 800; letter-spacing: 1.05px;
}
.episode { padding-left: 20px; border-left-color: #e0fbef60; text-shadow: 0 2px 5px #082431; }
.episode span { font-size: 9px; letter-spacing: 1.9px; color: #fff4da; margin-bottom: 9px; }
.episode b { color: #a4f5e7; font-size: 10px; letter-spacing: 2px; font-weight: 800; }
.top-actions { gap: 8px; }
.icon-button {
  width: 42px; height: 42px; border-radius: 11px;
  background: #112d3be8; color: #dcf2e9; border: 1px solid #caeee14f;
  box-shadow: inset 0 1px #f0fff00d, 0 3px 12px #04142125;
}
.icon-button svg { width: 19px; height: 19px; stroke-width: 1.6; }
.icon-button:hover:not(:disabled) { background: #234854; border-color: #a4e0d6; box-shadow: inset 0 1px #efffef1f; }
.icon-button[aria-pressed=true] { color: #b3ffee; border-color: #8cdece; background: #234951; }
.top-actions .balance {
  min-width: 181px; padding: 10px 11px 10px 17px; gap: 16px; border-radius: 12px;
  background: linear-gradient(135deg, #1b3c47f5, #0e2635f7); border: 1px solid #b6e0d888;
  box-shadow: inset 0 1px #edfff026, 0 4px 15px #0318213d; color: var(--cream);
}
.balance small { font-size: 8px; letter-spacing: 1.45px; color: #b1d9d5; margin-bottom: 4px; }
.balance strong { font-size: 25px; font-weight: 800; line-height: 1; letter-spacing: -.55px; color: #fff5df; }
.wallet-add { width: 30px; height: 33px; border-radius: 7px; border: 1px solid #ffe6d8b0; background: #efaa98; color: #18343f; font-size: 22px; }
.wallet-add:hover:not(:disabled) { background: #ffd3b9; box-shadow: 0 2px 9px #ffba9426; }

/* Cabinet — a generous playing field with a precise chrome surround. */
.arena {
  width: var(--stage-width); max-width: 1040px; margin: 0 auto;
  grid-template-columns: minmax(0, 1fr) 210px; gap: 22px; flex: 1; min-height: 0;
}
.cabinet { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; animation: finish-arrive .6s ease-out both; }
.marquee { height: 25px; min-height: 25px; padding: 0 10px; font-size: 9px; font-weight: 800; letter-spacing: .7px; color: #fff4df; }
.marquee:before { content: 'COASTLINE / VOL. 01'; font-size: 7px; color: #d4f3e7; letter-spacing: 1.6px; }
.reel-lamps { gap: 5px; }
.reel-lamps i { width: 4px; height: 4px; background: #8bd6cd3b; box-shadow: 0 0 0 1px #c7ede346; transition: background .2s ease; }
.reel-lamps i.landed { background: #aef4dc; box-shadow: 0 0 5px #aaf9dd44; }
.board-shell {
  border: 5px solid #9cded5; border-radius: 17px; background: #153d47;
  box-shadow: 0 0 0 1px #fff1db, 0 0 0 3px #23716f, 0 0 0 5px #0c242b8c,
    -5px 0 19px #5ce8d624, 5px 0 19px #ff799327, 0 18px 38px #06142273, inset 0 1px #effffba6;
  transition: border-color .35s ease, box-shadow .35s ease;
}
.board-shell:before { inset: 0; border-radius: 10px; border: 1px solid #aeffed43; box-shadow: inset 0 8px 20px #00141c2e, inset 0 -2px #a7efd712; }
.board-shell:after {
  inset: 0; background: linear-gradient(118deg, #e7ffec08, transparent 27%, transparent 76%, #c0ece208);
  transform: none; animation: none; mix-blend-mode: screen;
}
.board {
  inset: 5px; border-radius: 8px;
  background: linear-gradient(90deg, #bfffea08 1px, transparent 1px),
    linear-gradient(#bfffea07 1px, transparent 1px),
    radial-gradient(ellipse at 48% -20%, #34646c, #163d4b 42%, #102d3e 86%);
  background-size: calc(100% / 6) 20%, calc(100% / 6) 20%, 100% 100%;
  box-shadow: inset 0 6px 17px #0017218c, inset 0 -3px 10px #020c1826;
}
.tile svg { width: 96%; height: 96%; left: 2%; top: 2%; filter: drop-shadow(0 5px 3px #01162380) saturate(1.15) brightness(1.07); transform-origin: 50% 62%; }
.tile { will-change: top; }
.tile.winning { z-index: 3; background: radial-gradient(ellipse, #b2fff722, transparent 72%); }
.board.evaluating .tile:not(.winning) { opacity: .42; }
.tile.winning:after {
  inset: 4%; border: 1.5px solid var(--group-color, #b5f8e2); border-radius: 9px;
  box-shadow: inset 0 0 15px #ddfff614, 0 0 12px #baffed1a; animation: finish-match-outline .55s ease-out both;
}
.tile.winning svg { filter: drop-shadow(0 5px 4px #001c33) drop-shadow(0 0 4px #edfff448); animation: finish-object-lift .6s ease-out both; }
.tile[data-symbol='0'].winning svg { animation: finish-tape .65s ease-out both; }
.tile[data-symbol='1'].winning svg { animation: finish-lighter .65s ease-out both; }
.tile[data-symbol='2'].winning svg { animation: finish-watch .72s ease-out both; }
.tile[data-symbol='3'].winning svg { animation: finish-gem .78s ease-out both; }
.tile[data-symbol='4'].winning svg { animation: finish-diamond .7s ease-out both; }
.tile[data-symbol='5'].winning svg { animation: finish-boat .85s ease-out both; }
.tile[data-symbol='6'].winning svg { animation: finish-car .68s cubic-bezier(.2,.65,.35,1) both; }
.tile:is([data-symbol='2'],[data-symbol='3'],[data-symbol='4']).winning:before {
  content: ''; position: absolute; z-index: 4; width: 18%; height: 51%; left: 30%; top: 20%;
  background: linear-gradient(100deg, transparent, #fff8cd91, transparent);
  border-radius: 70%; filter: blur(1px); transform: rotate(28deg); pointer-events: none;
  animation: finish-jewel-shine .7s ease-out both;
}
.tile[data-symbol='7'] svg { filter: drop-shadow(0 4px 3px #041a27aa); }
.tile .bonus-label {
  bottom: 6%; padding: 2px 6px 1px; font-size: 8px; letter-spacing: 1px; font-weight: 900;
  background: #f9e2aa; color: #1e4046; border: 1px solid #fff0c7; border-radius: 3px;
  box-shadow: 0 2px 3px #08253366;
}
.tile .sun-number {
  font-size: clamp(17px, 2.1vw, 29px); line-height: 1.1; padding: 3px 6px;
  border: 1px solid #ddffecba; border-radius: 20px; background: #103e48ed;
  color: #f5ffed; box-shadow: 0 2px 6px #00252a66; text-shadow: none;
}
.position-mark { top: 5%; right: 5%; min-width: 17px; height: 17px; font-size: 9px; font-weight: 900; border-radius: 50%; box-shadow: 0 2px 5px #06162066; }
.board-shell:has(.reel-running) {
  border-color: #c9e7db; box-shadow: 0 0 0 1px #f7ecd6, 0 0 0 3px #316163, 0 18px 38px #06142273;
}
.column-stop { opacity: .5; }
.cascade-flash { animation: finish-cascade .65s ease-out; }

.combo-panel {
  min-height: 42px; margin-top: 8px; padding: 5px 6px 5px 12px; gap: 7px;
  background: linear-gradient(100deg, #0c2835f5, #163846ed); border: 1px solid #c0ead748;
  border-radius: 8px; box-shadow: inset 0 1px #c7ffea0a; color: #cde4df;
}
.combo-panel #combo-content { font-size: 10px; gap: 8px; font-weight: 600; }
.combo-panel #combo-content>b { color: #f1dba6; font: 24px/1 var(--finish-display); letter-spacing: .5px; }
.combo-panel button {
  min-height: 30px; padding: 6px 11px; font-size: 9px; font-weight: 800; letter-spacing: .35px;
  border: 1px solid #bdeee164; background: #234850; color: #d9f4e9; border-radius: 5px;
}
.combo-panel button:hover:not(:disabled) { background: #315d62; border-color: #a4e3d1; }
.combo-panel #combo-next { background: #b2e8d4; color: #153641; border-color: #e2ffed; }
.combo-panel .match-chip { padding: 3px 6px; background: #0a2331cc; border-color: color-mix(in srgb, var(--group-color) 58%, transparent); border-radius: 5px; }
.match-chip strong, .match-chip>span { font-size: 10px; font-variant-numeric: tabular-nums; }
.match-chip>span { color: #fff0d8; }
.cabinet-foot { min-height: 23px; padding: 6px 8px 0; color: #e7efe4; font-size: 9px; line-height: 1.4; font-weight: 700; text-shadow: 0 1px 4px #05212bf0; }
.round-counter { font-size: 8px; letter-spacing: .7px; color: #b9d5d0; }

/* A compact episode card and a real dashboard, not a second competing hero. */
.feature-rail { gap: 10px !important; padding: 26px 0 0 !important; justify-content: flex-start !important; }
.rail-heading { transform: none; font: italic 36px/.88 var(--finish-display); color: #fff2db; letter-spacing: 1px; text-shadow: 2px 3px #88505f; }
.rail-heading>span { margin: 0 0 9px; font: 800 8px/1 var(--finish-body); color: #b6eadd; letter-spacing: 2px; text-shadow: none; }
.rail-heading>em { font: italic 11px/1.2 Georgia, serif; color: #ffe1c6; margin-top: 8px; text-shadow: 0 1px 3px #0c2d3b; }
.getaway-poster {
  min-height: 60px; height: 88px; flex: 1 1 88px; max-height: 130px; border-radius: 9px; clip-path: none;
  border: 1px solid #f8d3b780; background: linear-gradient(90deg, #05243499, transparent 74%), url('assets/getaway-v9.webp');
  background-size: 100% 100%, auto 190%; background-position: center, 83% 100%;
  filter: none; box-shadow: inset 0 0 0 3px #c8ecdc0a, 0 5px 12px #04192833; padding: 10px;
}
.getaway-poster>span { font-size: 5px; font-weight: 700; letter-spacing: 1.2px; color: #e3ffe9; }
.getaway-poster>b { left: 10px; bottom: 10px; font-size: 23px; line-height: .88; letter-spacing: .3px; color: #fff4dc; text-shadow: 1px 2px #ba6982; }
.poster-siren { opacity: .4; animation-duration: 7s; }
.feature-rail .bonus-sign {
  min-height: 86px !important; height: 86px; padding: 10px 12px !important;
  grid-template-columns: 51px 1fr !important; grid-template-rows: 13px 28px 18px !important; gap: 2px 9px !important;
  border: 1px solid #f4d5b8; border-radius: 9px; background: linear-gradient(135deg, #f4cdab, #e5a590) !important;
  color: #173c44; box-shadow: inset 0 1px #fff3d79c, 0 4px 12px #0519242e;
}
.bonus-sign:after { display: none; }
.bonus-medal { width: 51px !important; height: 61px !important; filter: drop-shadow(0 3px 2px #34514c33); }
.bonus-sign>small { font-size: 7px !important; font-weight: 850; letter-spacing: .7px; }
.bonus-sign>strong { font: 35px/.86 var(--finish-display) !important; }
.bonus-sign>b { font-size: 8px !important; line-height: 1.08; font-weight: 800; letter-spacing: .3px; }
.sun-meter {
  display: grid; grid-template-columns: 69px 1fr; grid-template-rows: 1fr 1fr;
  height: 64px !important; min-height: 64px; padding: 0; text-align: left;
  border: 1px solid var(--finish-line); border-radius: 9px; background: #0b2936ed;
}
.sun-meter>svg { grid-column: 1; grid-row: 1/3; width: 62px; height: 62px; margin: -1px 0 0 3px; opacity: .88; }
.sun-meter>strong { position: static; grid-column: 2; align-self: end; font-size: 25px; line-height: 1; color: #dffdec; text-shadow: none; }
.sun-meter small { position: static; grid-column: 2; align-self: start; font-size: 7px; line-height: 1.3; margin-top: 5px; letter-spacing: .7px; color: #a4cbc8; text-shadow: none; }
.turbo-ring { width: 50px; height: 50px; left: 9px; top: 6px; border-color: #a5ebd226; animation: none; }
.sun-meter.pop { animation: finish-meter .6s ease-out; }
.sun-meter.pop .turbo-ring { box-shadow: 0 0 18px #a1f9da40; animation: none; }
.round-total {
  min-height: 70px; margin-top: auto; padding: 12px 12px 10px; gap: 5px;
  background: linear-gradient(120deg, #12313eed, #09232eed); border: 1px solid #cfeddf4d;
  border-radius: 9px; box-shadow: inset 0 1px #f0ffed0d; color: #f2eee0; text-shadow: none;
}
.round-total small { font-size: 8px; line-height: 1.35; font-weight: 700; color: #bdd9d3; letter-spacing: .55px; }
.round-total strong { font-size: 31px; font-weight: 800; line-height: 1; letter-spacing: -.6px; color: #fff1d7; }
.round-total>span { font-size: 10px; color: #b2cfce; }
.round-total.gain { border-color: #90d5bc88; background: linear-gradient(125deg, #204b47ef, #102f38f2); }
.round-total.gain strong, .round-total[data-outcome=gain] strong { color: #c9ffe4; }
.round-total:is([data-outcome=loss],[data-outcome=even],[data-outcome=preview]) { animation: none; box-shadow: inset 0 1px #f0ffed0d; }
.round-total.win-pulse { animation: finish-meter .7s ease-out; }

/* The coral button is the one primary action. Every state stays recognisable. */
.controls {
  width: var(--stage-width); max-width: 1040px; min-height: 88px; margin: 0 auto; padding: 11px 15px;
  grid-template-columns: 177px minmax(170px, 1fr) 206px; gap: 17px;
  border: 1px solid #b7ddd17d; border-radius: 14px;
  background: linear-gradient(130deg, #174451f7, #132e43f7 62%, #174b50f5);
  box-shadow: inset 0 1px #e6ffef12, 0 9px 28px #0318214d;
}
.stake-top { min-height: 20px; margin-bottom: 7px; gap: 5px; align-items: center; }
.stake-top label { color: #d0e5dd; font-size: 8px; line-height: 1.35; font-weight: 700; letter-spacing: .4px; }
.stake-top button { min-height: 24px; padding: 4px 6px; border: 1px solid #b9ecdc38; background: #0c2734; color: #addbd1; font-size: 7px; font-weight: 700; border-radius: 4px; }
.stake-top button[aria-pressed=true] { background: #accfbd; color: #122e3b; border-color: #d1f7db; }
.stake-input { grid-template-columns: 33px 1fr 33px; gap: 5px; }
.stake-input button, .stake-input select {
  height: 38px; border: 1px solid #bedcc246; border-radius: 6px; background: #183541; color: #fff1d6;
  box-shadow: inset 0 1px #d8ffdc09; font-variant-numeric: tabular-nums;
}
.stake-input button { font-size: 22px; font-weight: 500; }
.stake-input button:hover:not(:disabled) { background: #2b5259; border-color: #aee6cb; }
.stake-input select { font-size: 19px; font-weight: 800; background: #0b2733; padding: 0 4px; }
.spin {
  min-height: 62px; padding: 10px 16px; gap: 12px; border-radius: 10px; border: 1px solid #ffdfc9;
  background: linear-gradient(160deg, #ffc8a0 0%, #ff9a84 42%, #f77787 100%);
  box-shadow: inset 0 2px #fff6de99, inset 0 -2px #c55e672b, 0 4px 0 #8a4d50, 0 7px 15px #03192344;
  color: #173440; font-size: 22px; font-weight: 900; letter-spacing: 1px;
  transform: none; animation: none !important;
}
.spin:before { inset: 4px; border: 1px solid #ffefd385; border-radius: 6px; }
.spin:after { display: block; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 15%, #fff5d749, transparent 75%); transform: translateX(-140%); animation: none; transition: transform .7s ease; }
.spin:not(:disabled):hover {
  background: linear-gradient(160deg, #ffdbb0, #ffac8c 52%, #ff8d87);
  box-shadow: inset 0 2px #fff6debd, 0 4px #8a4d50, 0 9px 22px #08182166;
  transform: translateY(-1px);
}
.spin:not(:disabled):hover:after { transform: translateX(140%); }
.spin:not(:disabled):active, .spin.tap-burst:not(.busy) {
  transform: translateY(3px); background: linear-gradient(160deg, #f1ad94, #ed9688);
  box-shadow: inset 0 2px 6px #99534e29, 0 1px #805056;
}
.spin>svg { width: 32px; height: 32px; padding: 2px; border: 1px solid #1e475c50; border-radius: 50%; stroke-width: 1.8; transition: transform .4s ease; }
.spin:not(:disabled):hover>svg { transform: rotate(45deg); }
.spin.busy, .spin[aria-busy=true] {
  opacity: 1; background: linear-gradient(135deg, #54717a, #355564); border-color: #d1ece095; color: #e0f2e7;
  box-shadow: inset 0 1px #ecffea3b, 0 3px #0b2531; transform: none;
}
.spin.busy:before { border-color: #d5ece632; }
.spin.busy:after { display: none; }
.spin.busy>svg { animation: turn 1.15s linear infinite; border-color: #deffe459; }
.spin:disabled:not(.busy) { background: linear-gradient(145deg, #849499, #627c83); color: #1a3944; border-color: #bbd5d0; box-shadow: 0 3px #1d3c46; opacity: .8; }
.primary-action, .credit-options button { position: relative; isolation: isolate; overflow: hidden; }
.control-ripple { position: absolute; left: var(--tap-x, 50%); top: var(--tap-y, 50%); z-index: 3; width: 22px; height: 22px; margin: -11px; border-radius: 50%; pointer-events: none; background: #fff8dc66; animation: finish-control-ripple .5s ease-out both; }
.secondary { gap: 5px; }
.buy-ticket {
  min-height: 43px; padding: 5px 10px; gap: 7px; border-radius: 7px; border: 1px solid #b4e0d3;
  background: linear-gradient(140deg, #adf4d9, #75d4c4); box-shadow: inset 0 1px #f0ffe29e, 0 2px #416c66;
  color: #13383f; font-size: 10px; font-weight: 850; letter-spacing: .5px;
}
.buy-ticket:hover:not(:disabled) { background: linear-gradient(140deg, #c8ffe4, #8ce9cf); box-shadow: inset 0 1px #f0ffe2, 0 2px #416c66; }
.buy-ticket svg { width: 31px; height: 31px; }
.buy-ticket small { font-size: 8px; letter-spacing: .45px; color: #365952; font-weight: 750; margin-top: 3px; }
.round-tools { gap: 8px; }
.round-tools button { min-height: 24px !important; padding: 3px 7px !important; color: #c4dfd6; font-size: 9px !important; font-weight: 700; letter-spacing: .6px; }
.round-tools button+button { border-color: #a1cebc32 !important; padding-left: 13px !important; }
.round-tools button:hover:not(:disabled) { color: #fff1d8; background: #c0f0ce0b; border-radius: 4px; }
.receipt-line {
  width: var(--stage-width); max-width: 1040px; min-height: 28px; margin: 0 auto; padding: 5px 12px; gap: 10px;
  background: #0b2635e8; border: 1px solid #a9d3c332; border-radius: 6px;
  color: #ccdfda; font-size: 9px; font-weight: 600; box-shadow: none;
}
.receipt-line b { font-size: 9px; font-weight: 850; letter-spacing: .3px; color: #f0debb; }
.receipt-line>i { margin-left: auto; font-size: 8px; font-weight: 800; color: #b3e9d6; letter-spacing: .7px; }
.receipt-line.credited { border-color: #80c7ad66; }
.receipt-line.credited b { color: #c0f5d9; }
.receipt-line:hover { background: #173d49; border-color: #a5d7c5; }
.radio-line { min-height: 26px; height: 26px; font-size: 9px; gap: 9px; }
.radio-line>span { font-size: 8px; letter-spacing: 1.3px; color: #bdeed7; }
.radio-line>i { width: 4px; height: 4px; box-shadow: none; background: #a8e9cf; }
.radio-line>b { font-size: 10px; font-weight: 500; color: #f0ebdf; }
.radio-line>em { color: #f2c3a8; font-size: 8px; }
.feature-strip { min-height: 18px; height: 18px !important; gap: 17px; font-size: 8px; letter-spacing: .6px; color: #d1ddcf; }
.feature-strip>span { font-size: 7px; }
.feature-strip>i { background: #b5d6c6; }
.feature-strip button { min-height: 22px; font-size: 8px !important; color: #bcf0dc; font-weight: 750; letter-spacing: .2px; }
.feature-strip button:hover { color: #fff0d7; }
.fineprint { min-height: 10px; font-size: 7px; letter-spacing: .15px; color: #b7c9c2; gap: 13px; }
.mode-banner { top: 91px; max-width: 88%; padding: 5px 10px; border: 1px solid #fff0cc; border-radius: 5px; background: #eed6a8; color: #173643; font-size: 8px; font-weight: 800; box-shadow: 0 3px 14px #06263188; }
.preview-mode .round-total { border-color: #e7c29477; }
.preview-mode .balance small:after { font-size: 7px; letter-spacing: .25px; color: #f4d6a9; }
.preview-mode #round-label { color: #e2cfa9; }
.preview-mode #net { color: #d5c8b1; }

/* Paid matches have a short, local ceremony. Neutral outcomes remain quiet. */
.board-message {
  padding: 25px; gap: 0; background: radial-gradient(ellipse at 50% 40%, #27554ef4, #081f2aF5 76%);
  backdrop-filter: blur(8px); animation: finish-arrive .35s ease-out both;
}
.board-message:before {
  inset: 10%; border: 1px solid #eccd964d; border-radius: 50%; background: none;
  box-shadow: 0 0 0 22px #dfbb6908, 0 0 0 44px #dfbb6905; mask-image: none; animation: none;
}
.board-message:after { content: ''; position: absolute; inset: 15px; border: 1px solid #d8e5c621; border-radius: 8px; pointer-events: none; }
.board-message small { font-size: 10px; letter-spacing: 3px; font-weight: 800; color: #c1e2d2; }
.board-message strong { font: clamp(45px, 7vw, 96px)/1.16 var(--finish-display); color: #fff0c8; text-shadow: 0 3px #ba946855, 0 10px 30px #081b20b3; letter-spacing: 1px; margin: 5px 0; }
.board-message span { font-size: 11px; line-height: 1.5; color: #b9e7d3; letter-spacing: .6px; }
.board-message[data-kind=info]:before { display: none; }
.board-message[data-kind=info] { background: #102f3ef2; }
.board-message .result-medallion { width: 70px; height: 70px; margin-bottom: 10px; }
.board-message .result-medallion svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 9px #d8e5a321); }
.win-continue { min-height: 40px; padding: 10px 22px; margin-top: 20px; border-radius: 6px; border: 1px solid #d4edcf; background: #c7e4cc; color: #163b42; font-size: 9px; font-weight: 900; letter-spacing: 1.25px; }
.win-continue:hover { background: #e0efd9; }
.win-float { padding: 7px 16px; border: 1px solid #e5f5d8; background: #c4e4d0; color: #173841; border-radius: 7px; font-size: 25px; box-shadow: 0 5px 20px #00161f66; }
.confetti { border-radius: 1px; opacity: .85; }

/* Dialogs share the same adult, nocturnal material palette as the cabinet. */
dialog {
  width: min(700px, calc(100% - 28px)); max-height: calc(100svh - 28px);
  padding: 28px; border: 1px solid #b8d8cb80; border-radius: 18px;
  background: radial-gradient(ellipse at 20% 0, #2c586155, transparent 48%), linear-gradient(145deg, #163641, #0c2532 75%);
  color: #e4eade; color-scheme: dark; box-shadow: inset 0 1px #eaffdf20, 0 30px 110px #000f1bba;
  scrollbar-width: thin; scrollbar-color: #769b91 #0e2935; overscroll-behavior: contain;
}
dialog[open] { animation: finish-dialog-in .25s cubic-bezier(.2,.8,.3,1) both; }
dialog::backdrop { background: #02141bcc; backdrop-filter: blur(8px) saturate(.7); }
dialog h2 { font: 32px/1 var(--finish-display); letter-spacing: 1.4px; color: #fff1d4; }
dialog h3 { color: #f0e5c8; font-size: 17px; line-height: 1.25; font-weight: 800; }
dialog p, dialog li { font-size: 12px; line-height: 1.65; color: #bed4cd; }
dialog p b, dialog li b { color: #ecf3e4; }
.dialog-top { align-items: center; gap: 16px; padding-bottom: 8px; }
.dialog-top .icon-button, .dialog-close {
  width: 36px; height: 36px; min-width: 36px; display: grid; place-items: center; padding: 0;
  border: 1px solid #bfdfd23d; border-radius: 8px; background: #12333f; color: #e5ecdb;
  font-size: 24px; line-height: 1; font-weight: 500; box-shadow: none;
}
.dialog-close { right: 15px; top: 15px; z-index: 5; }
.dialog-close:hover, .dialog-top .icon-button:hover { color: #fff5dc; background: #31505a; border-color: #b8dace; }
.eyebrow { color: #a8d2c6; font-size: 8px; font-weight: 750; letter-spacing: 2.2px; }
.dialog-subtitle { color: #bfd4cb; font-size: 12px !important; line-height: 1.6; }
.primary-action {
  min-height: 47px; padding: 12px 15px; border: 1px solid #ffdcc0; border-radius: 8px;
  background: linear-gradient(145deg, #ffc6a3, #f79387); color: #17333f;
  font-size: 12px; line-height: 1.3; font-weight: 900; letter-spacing: .9px;
  box-shadow: inset 0 1px #fff6df7c, 0 3px #815252; margin: 14px 0 10px;
}
.primary-action:hover:not(:disabled) { background: linear-gradient(145deg, #ffdbaf, #ffab8e); box-shadow: inset 0 1px #fff7e3, 0 3px #815252, 0 5px 16px #0217214d; }
.primary-action:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px #815252; }
.primary-action:disabled { background: #78918e; border-color: #a9c3b9; color: #17343e; box-shadow: none; opacity: .58; }
.cancel-buy { min-height: 41px; margin-top: 8px; border-radius: 7px; border: 1px solid #abc6b83b; background: transparent; color: #bfdacf; font-size: 10px; font-weight: 750; letter-spacing: .7px; }
.cancel-buy:hover { background: #e5ffe909; border-color: #b5d7c57d; }
.text-action { min-height: 40px; padding: 10px 12px; color: #a6d8c7; font-size: 11px; font-weight: 600; text-underline-offset: 4px; text-decoration-color: #a6d8c744; }
.text-action:hover { color: #fff0d4; }
.dialog-error { color: #ffc0a9 !important; font-size: 11px !important; line-height: 1.5; margin: 4px 0 0; }
.dialog-error:empty { display: none; }

#buy-dialog { width: min(690px, calc(100% - 28px)); max-width: 690px; padding: 27px; }
.purchase-dialog h2 { margin: 15px 0 8px; font-size: 36px; letter-spacing: 1.4px; color: #fff1d4; }
#buy-dialog>.eyebrow { display: block; padding-right: 31px; text-align: left; }
#buy-dialog h2, #buy-dialog>.dialog-subtitle { text-align: left; }
.super-ticket #buy-title { color: #f2d5a2; }
.bonus-choices { margin: 19px 0 16px; gap: 13px; }
.bonus-choices>button {
  position: relative; padding: 0 0 13px; border: 1px solid #8fbaab5c; border-radius: 11px;
  background: #0b2632; color: #e8efdf; box-shadow: inset 0 0 0 1px #b6dcc708;
}
.bonus-choices>button:hover { border-color: #b7e0cba1; background: #163b43; transform: translateY(-2px); }
.bonus-choices>button[aria-pressed=true] {
  border: 1px solid #b2e2cb; background: #20483f; box-shadow: 0 0 0 2px #a1dcc420, inset 0 -1px #c2f4d621;
}
.bonus-choices>button[data-bonus-choice=super][aria-pressed=true] { background: #3a3b32; border-color: #e4c796; box-shadow: 0 0 0 2px #e9c8981f; }
.bonus-choices>button:after {
  content: ''; position: absolute; top: 11px; right: 11px; width: 18px; height: 18px;
  border: 1px solid #f2efd79c; border-radius: 50%; background: #122f34bd; box-shadow: 0 1px 5px #0017264d;
}
.bonus-choices>button[aria-pressed=true]:after { content: '✓'; display: grid; place-items: center; font-size: 12px; font-weight: 900; background: #c8eed4; color: #183b40; border-color: #edffe4; }
.choice-art { height: 149px; padding: 15px; background-image: linear-gradient(90deg, #08243378, transparent 78%), linear-gradient(0deg, #07252d70, transparent 62%), url('assets/neon-boulevard-v9.webp'); background-size: 100% 100%, 100% 100%, auto 190%; background-position: center, center, 100% 100%; color: #fff2d9; }
.choice-art b { font: italic 28px/.95 var(--finish-display); text-shadow: 2px 3px #9c4d66; letter-spacing: .4px; }
.choice-art em { bottom: 13px; left: 15px; font: italic 64px/.88 var(--finish-display); color: #fff0d2; text-shadow: 2px 3px #27464a; }
.bonus-choices>button[data-bonus-choice=super] .choice-art { background-image: linear-gradient(90deg, #28262678, transparent 80%), linear-gradient(0deg, #0c233961, transparent 62%), url('assets/getaway-v9.webp'); background-size: 100% 100%, 100% 100%, auto 185%; background-position: center, center, 84% 100%; }
.bonus-choices>button[data-bonus-choice=super] .choice-art b { font-size: 23px; color: #ffe3ac; text-shadow: 2px 3px #714e51; }
.bonus-choices>button[data-bonus-choice=super] .choice-art em { color: #ffe1a6; }
.bonus-choices strong { font-size: 12px; font-weight: 800; margin: 12px 13px 0; color: #f2eddb; }
.bonus-choices small { font-size: 10px; line-height: 1.4; margin: 5px 13px 0; color: #b7d2c6; }
.purchase-facts { display: grid; grid-template-columns: 1fr 1fr 1.1fr; background: #07232ea6; border: 1px solid #b8d8c626; border-radius: 9px; padding: 14px 0; margin: 16px 0 12px; }
.purchase-facts>div { flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; padding: 0 14px; border: 0; border-right: 1px solid #a7ceba21; font-size: 10px; line-height: 1.4; color: #aac8bd; }
.purchase-facts>div:last-child { border-right: 0; }
.purchase-facts b { font-size: 21px; font-weight: 800; line-height: 1.15; color: #edf0dc; font-variant-numeric: tabular-nums; letter-spacing: -.25px; }
.purchase-facts div:nth-child(2) b { font-size: 25px; color: #ffceb1; }
.purchase-facts #buy-after { font-size: 20px; }
.purchase-note { text-align: left; color: #b6c5b9; font-size: 10px !important; line-height: 1.6; margin: 12px 0 14px; }
#confirm-buy { min-height: 48px; font-size: 12px; }

#wallet-dialog { max-width: 460px; padding: 30px; }
#wallet-dialog h2 { font-size: 30px; }
#wallet-dialog>.eyebrow { display: block; margin-top: 4px; }
.wallet-hero { width: 84px; height: 84px; margin: 21px auto; border: 1px solid #b7dec78c; border-radius: 22px; transform: rotate(-7deg); background: linear-gradient(135deg, #5b908671, #14343f); box-shadow: inset 0 1px #e8ffe833, 5px 7px 0 #071f2b55; }
.wallet-hero svg { width: 37px; height: 37px; stroke: #e1f6db; transform: rotate(7deg); stroke-width: 1.4; }
.credit-options { gap: 9px; margin-top: 23px; }
.credit-options button { min-height: 58px; padding: 10px 3px; border: 1px solid #c0dec081; border-radius: 8px; background: linear-gradient(145deg, #b4d5bd, #92bca9); color: #193b3f; font-size: 15px; font-weight: 850; box-shadow: inset 0 1px #f1ffe44d, 0 3px #315951; }
.credit-options button:hover { background: #d2e7c8; border-color: #e1f8d3; }
#wallet-dialog>p:not(.dialog-subtitle) { margin: 21px 0 4px; font-size: 11px; color: #adc6bc; }

#sound-dialog { width: min(500px, calc(100% - 28px)); max-width: 500px; padding: 27px; }
#sound-dialog>p { margin: 8px 0 24px; font-size: 12px; color: #bdd1c7; }
#sound-dialog>label { margin: 19px 0; font-size: 12px; color: #e6ebd8; font-weight: 700; }
#sound-dialog output { color: #c7e6ce; font-size: 12px; font-variant-numeric: tabular-nums; }
#sound-dialog input[type=range] { appearance: none; height: 5px; margin: 16px 0 20px; background: #48736a; border-radius: 20px; cursor: pointer; accent-color: #cbefcf; }
#sound-dialog input[type=range]::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border: 1px solid #fff2cc; border-radius: 50%; background: #d3eac9; box-shadow: 0 2px 8px #041a2b66; }
#sound-dialog input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: 1px solid #fff2cc; border-radius: 50%; background: #d3eac9; box-shadow: 0 2px 8px #041a2b66; }
.settings-toggles { margin-top: 27px; border-top: 1px solid #b2cfbb32; }
.settings-toggles>label { min-height: 62px; padding: 12px 0; border-bottom: 1px solid #b2cfbb26; gap: 15px; }
.settings-toggles b { font-size: 12px; line-height: 1.35; font-weight: 750; color: #e4ebd9; }
.settings-toggles small { margin-top: 4px; font-size: 10px; line-height: 1.45; color: #acc8bb; }
.settings-toggles input { display: block; margin: 0; width: 43px; height: 25px; flex-basis: 43px; border: 1px solid #a6c6b566; background: #234553; }
.settings-toggles input:before { background: #d4dfd0; width: 17px; height: 17px; top: 3px; left: 3px; box-shadow: 0 2px 3px #031f2a33; }
.settings-toggles input:checked { background: #aed8be; border-color: #daf3cf; }
.settings-toggles input:checked:before { transform: translateX(18px); background: #1d4a4b; }
.settings-links { margin-top: 21px; grid-template-columns: 1fr 1fr; gap: 9px; }
.settings-links button, .settings-links button+button { min-height: 42px; padding: 8px; border: 1px solid #c0ddc346; border-radius: 6px; background: #183b45; color: #cce7cf; font-size: 9px; line-height: 1.4; letter-spacing: .4px; }
.settings-links button:hover { background: #315851; border-color: #bcd9bc8c; }

/* Illustrated rules use the actual original symbol art and the same material system. */
#rules { width: min(820px, calc(100% - 28px)); max-width: 820px; padding: 28px; }
.rules-lead { margin: 7px 0 14px; color: #c1d9cb; }
.visual-guide { color: #d6e7d7; margin-top: 23px; }
.guide-kicker { margin: 28px 0 12px; color: #9cd6bf; font-size: 8px; font-weight: 800; letter-spacing: 2px; }
.visual-guide h3 { margin: 0 0 20px; color: #fff0d4; font-size: 27px; line-height: 1.16; letter-spacing: -.3px; }
.guide-match { gap: 24px; }
.guide-grid { gap: 4px; padding: 9px; background: radial-gradient(ellipse at top, #284f57, #102d3c); border: 3px solid #9fcabd; border-radius: 11px; box-shadow: 0 3px #0a202b; }
.guide-cell { background: #d2ffe70a; border-color: #d6ffed0a; border-radius: 5px; }
.guide-cell svg { opacity: .5; }
.guide-cell.lit { background: #acdcb51e; border-color: #b8efce; box-shadow: inset 0 0 10px #bbffdc12; }
.guide-cell.lit svg { opacity: 1; filter: drop-shadow(0 2px 3px #07253399); }
.guide-cell i { border-radius: 4px 0 3px 0; background: #d0ecd0; color: #183d42; font-family: var(--finish-body); }
.guide-match-copy>strong { font-size: 23px; font-weight: 850; color: #f6ecd5; }
.guide-match-copy>b { color: #afd9bc; font-size: 18px; }
.guide-match-copy p { color: #b9d0c2; font-size: 11px; line-height: 1.6; }
.guide-flow { margin-top: 26px; padding: 17px 12px; background: #092430a3; border: 1px solid #add0b526; border-radius: 10px; }
.guide-flow>i { color: #9ad8bd; font-size: 22px; }
.guide-flow strong { color: #e7edda; font-size: 12px; }
.guide-flow small { color: #abc8b8; font-size: 9px; }
.flow-pic { background: #183e47; border: 1px solid #a9d4b428; border-radius: 9px; }
.flow-pic>b { background: #c4e6c8; color: #173b40; }
.cascade-pic em { color: #f1baa2; }
.cascade-pic>b { background: transparent; color: #bedcc2; }
.guide-equation { padding: 21px 4px; gap: 9px; }
.guide-equation>span { color: #b9d5c3; font-size: 10px; }
.guide-equation b { color: #edf0d8; font-size: 30px; font-weight: 800; }
.guide-equation i { color: #77a997; font-size: 23px; }
.guide-equation .equation-result { padding: 9px 3px; border: 1px solid #afd2b55c; background: #315248; border-radius: 8px; }
.guide-wallet { background: #163c3e; border-color: #a8cdb45c; border-radius: 9px; padding: 16px; }
.guide-wallet svg { stroke: #bce2c2; }
.guide-wallet span { color: #d4e4cc; }
.guide-wallet b { color: #e6efd8; }
.guide-wallet small { color: #a9cbb6; }
.guide-bonuses { gap: 14px; }
.guide-bonus { background: #102f39; border-color: #a4c7ae50; border-radius: 10px; }
.guide-bonus-art { height: 147px; background-image: linear-gradient(90deg, #08232e90, transparent), url('assets/neon-boulevard-v9.webp'); background-size: 100% 100%, auto 190%; background-position: center, 100% 100%; }
.guide-bonus-art>span { font-size: 23px; color: #fff0d3; text-shadow: 2px 2px #a15c6d; }
.guide-bonus-art>b { color: #fff0d3; text-shadow: 2px 3px #233d47; }
.super .guide-bonus-art>span, .super .guide-bonus-art>b { color: #f8d99f; }
.super .guide-bonus-art { background-image: linear-gradient(90deg, #30293180, transparent), url('assets/getaway-v9.webp'); background-size: 100% 100%, auto 185%; background-position: center, 84% 100%; }
.guide-bonus-copy { padding: 14px; }
.guide-bonus-copy p { color: #c8dbca; font-size: 11px; line-height: 1.5; }
.guide-bonus-copy p>b { color: #e1e9d5; }
.guide-bonus-copy p>span { color: #a7c6b5; }
.guide-bonus-copy>strong { font-size: 11px; line-height: 1.5; color: #d3e5cc; }
.guide-bonus-copy>small { color: #9ec0ad; font-size: 10px; }
.guide-bonus-copy button { min-height: 39px; border: 1px solid #b1d4b35c; background: #275247; color: #d6edcf; border-radius: 5px; font-size: 9px; }
.super .guide-bonus-copy button { color: #ecdfbe; background: #454b3d; border-color: #d5bf8561; }
.guide-bonus-copy button:hover { background: #3c6957; }
.guide-caution { color: #aac1ae; font-size: 10px !important; }
.guide-credit>div { padding: 16px; border-color: #b3cfa638; background: #173e3e; border-radius: 8px; }
.guide-credit>div+div { background: #393d33; border-color: #d4c79838; }
.guide-credit span { color: #accbb0; font-size: 8px; letter-spacing: 1.1px; }
.guide-credit b { color: #e6edcf; font-size: 12px; }
.guide-credit small { color: #b4c7ae; font-size: 9px; line-height: 1.5; }
.full-rules { border-top-color: #b7d3b833; margin-top: 24px; padding-top: 14px; }
.full-rules summary { color: #e1ead2; font-size: 13px; min-height: 44px; line-height: 1.5; }
.full-rules p, .full-rules li { color: #b9cdbc; }
.full-rules .primary-action { margin: 20px 0; }
.rule-options { border-top-color: #b9cdae35; margin-top: 22px; padding-top: 12px; font-size: 11px; color: #b9c9b3; }
.rule-options input { accent-color: #a6d4b3; width: 18px; height: 18px; }
.rule-options>span { font-size: 10px; color: #a3bba5; line-height: 1.5; }
.economy-picture { border: 1px solid #b3c5ad40; border-radius: 10px; background: #102e39; }
dialog table { color: #d6e1ca; font-size: 12px; border-spacing: 0; font-variant-numeric: tabular-nums; }
dialog th { font-size: 9px; letter-spacing: .5px; font-weight: 800; color: #9cc4af; background: #0a26319c; }
dialog td, dialog th { padding: 11px 9px; border-bottom: 1px solid #a7c3a626; }
dialog tbody tr:nth-child(even) { background: #9bd8b404; }
dialog td:first-child { color: #d8e4cd; font-weight: 700; }
dialog td svg { width: 38px; height: 38px; }

#history-dialog { width: min(680px, calc(100% - 28px)); }
#history-dialog h2 { font-size: 30px; }
#history-dialog>p { font-size: 11px; color: #b2c9bb; }
#view-receipt { padding: 17px; margin: 18px 0 12px; border: 1px solid #a7cfb54f; border-radius: 9px; background: linear-gradient(120deg, #24504180, #12323d); font-weight: 750; color: #e1edd2 !important; line-height: 1.6; font-size: 13px !important; }
.history-wrap { border: 1px solid #9ec2a433; border-radius: 9px; margin-top: 20px; }
.history-wrap th { padding: 13px 8px; font-size: 9px; letter-spacing: .3px; }
.history-wrap td { padding: 12px 8px; font-size: 12px; color: #e0e7ce; }
.history-wrap td:first-child { display: table-cell; font-size: 11px; font-weight: 600; color: #afd2b9; }
.history-wrap tr:last-child td { border-bottom: 0; }
#history-empty { padding: 16px 0; text-align: center; color: #bcd0b9; }

/* A bonus closeout is honest about cost and net result. Only profit is celebrated. */
#bonus-result {
  width: min(490px, calc(100% - 28px)); max-width: 490px; padding: 30px; text-align: center;
  background: radial-gradient(ellipse at 50% 0, #497f6b33, transparent 48%), linear-gradient(145deg, #173d47, #0b2633 80%);
}
.result-visual { position: relative; width: 100px; height: 100px; margin: 0 auto 18px; display: grid; place-items: center; }
.result-visual>svg { width: 86px; height: 86px; position: relative; z-index: 1; filter: saturate(.6); opacity: .84; }
.result-orbit { position: absolute; inset: 5px; border: 1px solid #b4d2b34d; border-radius: 50%; box-shadow: 0 0 0 8px #adc7a607; }
#bonus-result .eyebrow { display: block; margin: 0 0 12px; font-size: 8px; letter-spacing: 2px; }
#bonus-result h2 { font-size: 33px; line-height: 1.08; color: #eef0d6; }
#result-amount { display: block; margin: 17px 0 8px; font-size: clamp(39px, 8vw, 58px); font-weight: 850; line-height: 1; color: #ebeed8; letter-spacing: -1.7px; font-variant-numeric: tabular-nums; }
#result-caption { color: #b6cdbb; font-size: 12px; line-height: 1.6; margin: 12px auto 19px; max-width: 340px; }
.result-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 15px 0; margin: 21px 0; border: 1px solid #b1cda52d; background: #071f2ca6; border-radius: 9px; }
.result-facts>div { display: flex; flex-direction: column; gap: 7px; padding: 0 10px; min-width: 0; border-right: 1px solid #b7cfb121; }
.result-facts>div:last-child { border-right: 0; }
.result-facts span, .result-facts small { font-size: 9px; line-height: 1.3; color: #a8c3ab; }
.result-facts b, .result-facts strong { font-size: 17px; line-height: 1.1; color: #e6ecd3; font-variant-numeric: tabular-nums; font-weight: 800; }
.result-note { margin: 16px 0 0; color: #9dbba5; font-size: 10px !important; line-height: 1.5; }
#bonus-result[data-outcome=gain] { border-color: #d9ddac9e; background: radial-gradient(ellipse at 50% 12%, #5e845f5e, transparent 57%), linear-gradient(145deg, #1d4b46, #0b2833 80%); }
#bonus-result[data-outcome=gain] .result-visual>svg { opacity: 1; filter: saturate(1.04) drop-shadow(0 0 15px #d8de9f3b); animation: finish-result-object .9s ease-out both; }
#bonus-result[data-outcome=gain] .result-orbit { border-color: #e7dc9c88; box-shadow: 0 0 0 9px #cfdf9c09, 0 0 0 18px #cfdf9c04; }
#bonus-result[data-outcome=gain] #result-amount { color: #f9e7ac; text-shadow: 0 3px #bc906529, 0 0 30px #e3d69b18; }
#bonus-result[data-outcome=gain] #result-kicker { color: #cae7b1; }
#bonus-result:is([data-outcome=loss],[data-outcome=even],[data-outcome=preview]) .result-visual>svg,
#bonus-result:is([data-outcome=loss],[data-outcome=even],[data-outcome=preview]) .result-orbit { animation: none; }
#bonus-result[data-outcome=preview] .result-orbit { border-style: dashed; border-color: #d8c29578; }

/* The same original city art supplies the episode title sequence. */
.pursuit-hud { height: 27px; min-height: 27px; margin-bottom: 5px; padding: 4px 9px; border: 1px solid #b9ded054; border-radius: 6px; background: #102e3cef; font-size: 9px; color: #b3e1cd; letter-spacing: .7px; }
.pursuit-hud>span { font-size: 8px; }
.pursuit-hud>span>i { width: 4px; height: 4px; background: #eab7a1; box-shadow: none; }
.pursuit-hud>b { font-size: 10px; letter-spacing: .6px; color: #fff0d5; }
.pursuit-road { border-bottom-color: #accfbd55; }
.pursuit-road>.runner { background: #efb9a0; box-shadow: -4px 0 10px #f3b67c28; }
.pursuit-road>.pursuer { background: linear-gradient(90deg, #8baed8 45%, #dc7f8e 55%); box-shadow: none; }
.pursuit-road:after { color: #e1d1ad; }
[data-pursuit-phase=arrival] .pursuit-hud { border-color: #dbd19b79; }
.bonus-active .board { background-image: linear-gradient(90deg, #dfdcff08 1px, transparent 1px), linear-gradient(#dfdcff07 1px, transparent 1px), radial-gradient(ellipse at 48% -20%, #4c6570, #233c53 48%, #173047); }
.bonus-active .board-shell { border-color: #bfd5d0; box-shadow: 0 0 0 1px #f4d8c6, 0 0 0 3px #4d515b, 0 18px 35px #07152688; }
.super-active .board-shell { border-color: #d9c79d; box-shadow: 0 0 0 1px #f2e8c9, 0 0 0 3px #5a6155, 0 18px 35px #07152688; }
.bonus-active .feature-rail .bonus-sign { background: linear-gradient(135deg, #f0bea6, #d99aaa) !important; }
.super-active .feature-rail .bonus-sign { background: linear-gradient(135deg, #f3dbab, #cfb783) !important; }
.getaway-cinematic { background: #0a2532; color: #fff0d5; }
.getaway-cinematic:after { background: linear-gradient(90deg, #071e2cE8, #0b253461 55%, transparent), linear-gradient(0deg, #051d2acc, transparent 70%); }
.getaway-video { filter: saturate(1.02); }
.cinematic-copy { width: 51%; max-width: 580px; margin-left: max(6.4vw, 28px); animation: finish-title-in .8s cubic-bezier(.16,.75,.2,1) both; }
.episode-tag { font-size: 9px; letter-spacing: 2.4px; color: #d1ead3; font-weight: 800; }
.cinematic-copy p { font: italic 19px/1.45 Georgia, serif; color: #f5d0b4; margin: 27px 0 24px; }
.cinematic-copy h2 { font: italic clamp(74px, 10.8vw, 155px)/.82 var(--finish-display); letter-spacing: -1px; transform: rotate(-4deg); color: #fff0d3; text-shadow: 3px 4px #b56776, 6px 8px #123345; margin: 25px 0 30px; }
.cinematic-copy h2 span { color: #f6ad99; }
.cinematic-copy>b { margin-top: 38px; font-size: 10px; line-height: 1.6; letter-spacing: 2px; color: #c2e8cf; }
.cinematic-copy button { margin-top: 27px; min-width: 240px; min-height: 48px; padding: 14px 21px; border: 1px solid #fff0cd; border-radius: 6px; background: linear-gradient(145deg, #f6d3ad, #edb298); color: #123441; font-size: 11px; font-weight: 900; letter-spacing: 1.1px; box-shadow: 0 4px #986559; transform: none; }
.cinematic-copy button:hover { background: #ffe1b6; transform: translateY(-1px); }
.cinematic-copy button>span { font-size: 19px; margin-left: 30px; }
.getaway-cinematic .cinematic-copy small { margin-top: 19px; max-width: 360px; color: #b7d1c6; font-size: 9px; line-height: 1.6; }
.cinematic-sweep { opacity: .35; animation-duration: 11s; }
.cinematic-police { opacity: .45; }
.cinematic-police i { animation-duration: 7s; }
.cinematic-chapter { position: absolute; right: 6.5%; top: 8%; display: flex; align-items: center; gap: 13px; padding: 12px 17px; border-top: 1px solid #e7e2bc80; border-bottom: 1px solid #e7e2bc3d; background: #0c263238; backdrop-filter: blur(7px); }
.cinematic-chapter-number { font: 39px/1 var(--finish-display); color: #ffe1b7; }
.cinematic-chapter-copy { max-width: 150px; font-size: 10px; line-height: 1.55; font-weight: 750; text-transform: uppercase; letter-spacing: 1.8px; color: #f0efd4; }
.cinematic-timeline { position: absolute; right: 6.5%; bottom: 8%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(34vw, 420px); }
.cinematic-beat { position: relative; padding: 14px 0 0; border-top: 2px solid #cbe0c947; color: #c6d5c18c; font-size: 8px; line-height: 1.5; letter-spacing: 1px; text-transform: uppercase; transition: color .5s ease, border-color .5s ease; }
.cinematic-beat[data-active=true] { border-top-color: #f7d5aa; color: #f3edd1; }
.cinematic-beat:before { content: ''; position: absolute; top: -2px; left: 0; width: 100%; height: 2px; background: #f9d7ae; transform: scaleX(var(--beat-progress, 0)); transform-origin: left; }
.cinematic-beat[data-complete=true] { color: #cce2c8; border-top-color: #cce2c87d; }
.cinematic-skip, #skip-getaway {
  position: absolute; right: 6.5%; bottom: 18%; min-height: 38px; padding: 9px 13px;
  border: 1px solid #d7e2c747; border-radius: 5px; background: #102e3b91; color: #e2e9cc;
  font-size: 9px; letter-spacing: .7px; font-weight: 700; box-shadow: none; backdrop-filter: blur(5px);
}
.cinematic-skip:hover { background: #294751e0; border-color: #e2e8c896; }
.getaway-cinematic[data-phase=arrival] .cinematic-chapter { border-top-color: #c7efd1; }

/* Motion stays local and below rapid-flash frequencies. */
@keyframes finish-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes finish-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes finish-title-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes finish-match-outline { from { opacity: .25; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@keyframes finish-object-lift { 0%,100% { transform: translateY(0) scale(1); } 45% { transform: translateY(-4px) scale(1.045); } }
@keyframes finish-tape { 0%,100% { transform: rotate(0) scale(1); } 35% { transform: rotate(-5deg) scale(1.07); } 70% { transform: rotate(2deg) scale(1.02); } }
@keyframes finish-lighter { 0%,100% { transform: translateY(0) rotate(0); } 38% { transform: translateY(-5px) rotate(6deg); } 72% { transform: translateY(-1px) rotate(-2deg); } }
@keyframes finish-watch { 0%,100% { transform: rotate(0) scale(1); } 42% { transform: rotate(-7deg) scale(1.09); } 78% { transform: rotate(2deg) scale(1.02); } }
@keyframes finish-gem { 0%,100% { transform: rotateY(0) rotate(0); } 40% { transform: rotateY(24deg) rotate(4deg) scale(1.08); } 75% { transform: rotateY(-7deg) rotate(-1deg) scale(1.03); } }
@keyframes finish-diamond { 0%,100% { transform: translateY(0) scale(1); } 43% { transform: translateY(-4px) rotate(-4deg) scale(1.08); } 78% { transform: translateY(-1px) rotate(1deg) scale(1.02); } }
@keyframes finish-boat { 0%,100% { transform: rotate(0) translateY(0); } 28% { transform: rotate(-5deg) translateY(-3px); } 63% { transform: rotate(3deg) translateY(1px); } 83% { transform: rotate(-1deg) translateY(-1px); } }
@keyframes finish-car { 0%,100% { transform: translateX(0) rotate(0); } 20% { transform: translateX(-3px) rotate(-2deg); } 52% { transform: translateX(4px) rotate(2deg) scale(1.035); } 80% { transform: translateX(1px) rotate(0); } }
@keyframes finish-jewel-shine { 0% { opacity: 0; transform: translateX(-10px) rotate(28deg); } 40% { opacity: .75; } 100% { opacity: 0; transform: translateX(26px) rotate(28deg); } }
@keyframes finish-cascade { 0%,100% { filter: none; } 45% { filter: brightness(1.09); } }
@keyframes finish-meter { 0%,100% { transform: scale(1); } 42% { transform: scale(1.045); } 75% { transform: scale(.995); } }
@keyframes finish-result-object { from { transform: translateY(12px) rotate(-9deg) scale(.88); opacity: 0; } to { transform: translateY(0) rotate(0) scale(1); opacity: 1; } }
@keyframes finish-control-ripple { from { opacity: .55; transform: scale(.3); } to { opacity: 0; transform: scale(15); } }

/* Compact laptops. */
@media (min-width: 701px) and (max-height: 760px) {
  .game { padding-top: 12px; padding-bottom: 8px; gap: 6px; }
  .topbar { min-height: 66px; }
  .feature-rail { gap: 8px !important; padding-top: 25px !important; }
  .getaway-poster { flex-basis: 76px; max-height: 88px; }
  .feature-rail .bonus-sign { min-height: 82px !important; height: 82px; }
  .rail-heading { font-size: 33px; }
  .rail-heading>span { font-size: 7px; margin-bottom: 7px; }
  .rail-heading>em { font-size: 10px; margin-top: 7px; }
  .round-total { min-height: 73px; padding: 10px 11px; }
  .controls { min-height: 84px; padding-block: 9px; }
  .spin { min-height: 61px; }
  .fineprint { font-size: 7px; }
}
@media (min-width: 701px) and (max-width: 1050px) {
  .game { padding-inline: 20px; }
  .arena, .controls, .receipt-line { width: min(100%, var(--stage-width)); }
  .arena { grid-template-columns: minmax(0,1fr) 190px; gap: 18px; }
  .episode { display: none; }
  .controls { grid-template-columns: 170px minmax(150px,1fr) 190px; gap: 13px; padding-inline: 13px; }
  .spin { font-size: 20px; gap: 8px; }
  .rail-heading { font-size: 32px; }
  .marquee:before { display: none; }
}

/* Portrait phones: the cabinet, dashboard and controls fit a single viewport. */
@media (max-width: 700px) {
  .game { --stage-width: 100%; max-width: 540px; height: 100svh; min-height: 0; padding: max(9px, env(safe-area-inset-top)) 11px max(8px, env(safe-area-inset-bottom)); gap: 6px; }
  .backdrop:before { background-position: 35% center; }
  .stage-glow { background: linear-gradient(180deg, #051b252e, #061c2330 34%, #071f29ac 89%); }
  .topbar { min-height: 64px; gap: 9px; }
  .brand span { font-size: 13px; letter-spacing: 2.25px; }
  .brand strong { font-size: 39px; letter-spacing: 2px; text-shadow: 0 2px #ae6670, 0 4px #163641; }
  .brand small { max-width: 104px; font-size: 5.5px; letter-spacing: .3px; margin-top: 7px; line-height: 1.35; }
  .episode { display: none; }
  .top-actions { gap: 5px; }
  .top-actions .icon-button { width: 35px; height: 40px; border-radius: 9px; }
  .top-actions .icon-button svg { width: 18px; height: 18px; }
  .top-actions #info { display: none; }
  .top-actions #audio-settings { display: grid; }
  .top-actions .balance { min-width: 127px; gap: 7px; padding: 8px !important; border-radius: 9px; }
  .balance small { font-size: 6.5px; letter-spacing: .7px; margin-bottom: 5px; }
  .balance strong { font-size: 20px; letter-spacing: -.55px; }
  .wallet-add { width: 26px; height: 32px; border-radius: 6px; font-size: 20px; }
  .arena { display: flex; flex-direction: column; width: 100%; gap: 7px; flex: 1; min-height: 0; }
  .cabinet { min-height: 0; height: auto; flex: 1; }
  .marquee { height: 24px; min-height: 24px; padding: 0 4px; font-size: 8px; letter-spacing: .2px; }
  .marquee:before { display: none; }
  .board-shell { border-width: 3px; border-radius: 12px; box-shadow: 0 0 0 1px #e8e5c6, 0 0 0 2px #20434d, 0 12px 25px #06142260; }
  .board-shell:before { border-radius: 7px; }
  .board { inset: 3px; border-radius: 6px; }
  .tile svg { width: 99%; height: 99%; left: .5%; top: .5%; }
  .tile.winning:after { inset: 3%; border-radius: 6px; border-width: 1px; }
  .tile .bonus-label { bottom: 5%; font-size: 7px; padding: 1px 3px; letter-spacing: .5px; }
  .tile .sun-number { font-size: 18px; padding: 2px 4px; }
  .position-mark { min-width: 14px; height: 14px; top: 4%; right: 4%; font-size: 8px; }
  .combo-panel { min-height: 38px; margin-top: 6px; padding: 4px 5px 4px 8px; gap: 5px; border-radius: 7px; }
  .combo-panel #combo-content { gap: 5px; font-size: 9px; font-weight: 600; }
  .combo-panel #combo-content>b { font-size: 23px; }
  .combo-panel button { min-height: 29px; padding: 5px 7px; font-size: 8px; letter-spacing: 0; }
  .combo-panel .match-chip { gap: 3px; padding: 2px 4px; }
  .match-chip svg { width: 23px; height: 23px; }
  .match-chip strong, .match-chip>span { font-size: 9px; }
  .cabinet-foot { min-height: 23px; padding: 6px 2px 0; font-size: 7.5px; gap: 5px; line-height: 1.4; }
  .round-counter { font-size: 7px; letter-spacing: .25px; }
  .feature-rail { display: grid; grid-template-columns: 1.04fr 66px 1fr; height: 80px; min-height: 80px; gap: 7px !important; padding: 0 !important; align-items: stretch; }
  .rail-heading, .feature-rail .getaway-poster { display: none; }
  .feature-rail .bonus-sign {
    height: 80px !important; min-height: 80px !important; padding: 6px !important;
    grid-template-columns: 29px 1fr !important; grid-template-rows: 15px 25px 20px !important; gap: 0 4px !important;
    border-radius: 8px; box-shadow: inset 0 1px #fff5db66;
  }
  .bonus-medal { width: 29px !important; height: 48px !important; }
  .bonus-sign>small { font-size: 6px !important; letter-spacing: .1px; line-height: 1.25; }
  .bonus-sign>strong { font-size: 28px !important; }
  .bonus-sign>b { font-size: 7px !important; line-height: 1.13; letter-spacing: .1px; }
  .sun-meter { display: block; position: relative; height: 80px !important; min-height: 80px; padding: 0; border-radius: 8px; text-align: center; }
  .sun-meter>svg { width: 58px; height: 58px; margin: 0 auto; opacity: .72; }
  .sun-meter>strong { position: absolute; left: 0; right: 0; top: 20px; font-size: 19px; text-shadow: 0 2px 4px #07262c; }
  .sun-meter small { position: absolute; left: 4px; right: 4px; bottom: 8px; font-size: 6.5px; line-height: 1.2; letter-spacing: .1px; margin: 0; }
  .turbo-ring { width: 48px; height: 48px; left: calc(50% - 24px); top: 5px; }
  .round-total { min-height: 80px; height: 80px; margin: 0; padding: 8px; gap: 6px; border-radius: 8px; justify-content: center; }
  .round-total small { font-size: 6.5px; line-height: 1.3; letter-spacing: .2px; }
  .round-total strong { font-size: 26px; letter-spacing: -.6px; }
  .round-total>span { font-size: 9px; line-height: 1.2; }
  .controls { width: 100%; min-height: 130px; padding: 9px; grid-template-columns: 140px minmax(0,1fr); grid-template-rows: auto auto; gap: 8px 10px; border-radius: 11px; align-items: center; }
  .stake-top { flex-direction: column; align-items: flex-start; gap: 4px; min-height: 0; margin-bottom: 5px; }
  .stake-top label { font-size: 7px; letter-spacing: .45px; line-height: 1.2; }
  .stake-top button { min-height: 22px; padding: 3px 5px; font-size: 7px; letter-spacing: 0; }
  .stake-input { grid-template-columns: 30px 1fr 30px; gap: 4px; }
  .stake-input button, .stake-input select { height: 36px; border-radius: 5px; }
  .stake-input select { font-size: 18px; padding: 0; }
  .stake-input button { font-size: 21px; }
  .spin { min-height: 74px; padding: 8px; gap: 7px; font-size: 19px; letter-spacing: .25px; border-radius: 8px; }
  .spin:before { inset: 3px; border-radius: 5px; }
  .spin>svg { width: 28px; height: 28px; }
  .secondary { grid-column: 1/-1; grid-template-columns: 1fr 85px; gap: 10px; align-items: center; }
  .buy-ticket { min-height: 43px; padding: 4px 8px; gap: 7px; font-size: 10px; border-radius: 6px; }
  .buy-ticket svg { width: 30px; height: 30px; }
  .buy-ticket small { font-size: 8px; letter-spacing: .2px; }
  .round-tools { flex-direction: column; gap: 0; }
  .round-tools button { min-height: 23px !important; font-size: 8px !important; padding: 4px !important; letter-spacing: .4px; }
  .round-tools button+button { border-left: 0 !important; border-top: 1px solid #adcaba26 !important; padding-left: 4px !important; }
  .receipt-line { width: 100%; min-height: 26px; padding: 5px 9px; font-size: 8px; gap: 6px; }
  .receipt-line b { font-size: 8px; letter-spacing: .1px; }
  .receipt-line>span { display: none; }
  .receipt-line>i { font-size: 7px; letter-spacing: .5px; }
  .radio-line { min-height: 25px; height: 25px; font-size: 8px; gap: 7px; }
  .radio-line>b { max-width: 220px; font-size: 9px; }
  .radio-line>span { font-size: 7px; }
  .radio-line>em { display: none; }
  .feature-strip { min-height: 22px; height: 22px !important; gap: 0; }
  .feature-strip>span, .feature-strip>i { display: none; }
  .feature-strip button { min-height: 25px; font-size: 8px !important; letter-spacing: .35px; padding: 4px; }
  .fineprint { min-height: 10px; font-size: 6px; gap: 9px; letter-spacing: 0; }
  .mode-banner, .bonus-active .mode-banner { top: 75px; padding: 4px 7px; font-size: 7px; border-radius: 4px; }
  .preview-mode .balance small:after { font-size: 5.6px; letter-spacing: 0; }
  .preview-mode .round-total small { font-size: 6px; }
  .preview-mode #net { font-size: 7px; }
  .pursuit-hud { height: 24px; min-height: 24px; padding: 3px 6px; font-size: 8px; letter-spacing: .2px; }
  .pursuit-hud>span { font-size: 7px; }
  .pursuit-hud>b { font-size: 8px; }
  .board-message { padding: 20px 15px; }
  .board-message strong { font-size: 54px; }
  .board-message .result-medallion { width: 57px; height: 57px; margin-bottom: 8px; }
  .board-message small { font-size: 9px; letter-spacing: 2px; }
  .board-message span { font-size: 9px; line-height: 1.5; letter-spacing: .2px; }
  .win-continue { min-height: 38px; margin-top: 17px; font-size: 9px; padding: 9px 17px; }
  .win-float { font-size: 21px; padding: 5px 13px; }
  dialog, #sound-dialog, #rules { padding: 23px 19px; border-radius: 14px; width: calc(100% - 22px); max-height: calc(100svh - 22px); }
  dialog h2 { font-size: 28px; }
  dialog p, dialog li { font-size: 11px; line-height: 1.65; }
  .dialog-top { gap: 10px; }
  .dialog-top .icon-button, .dialog-close { width: 35px; height: 35px; min-width: 35px; border-radius: 7px; }
  .dialog-close { top: 12px; right: 12px; }
  .eyebrow { font-size: 7px; letter-spacing: 1.5px; }
  .purchase-dialog#buy-dialog { width: calc(100% - 22px); padding: 23px 17px 19px; }
  #buy-dialog>.eyebrow { min-height: 18px; font-size: 6.5px; padding-right: 30px; }
  .purchase-dialog h2 { font-size: 31px; margin: 12px 0; }
  .bonus-choices { margin: 17px 0 14px; gap: 9px; }
  .bonus-choices>button { padding-bottom: 12px; border-radius: 8px; }
  .bonus-choices>button:after { top: 8px; right: 8px; width: 16px; height: 16px; font-size: 10px; }
  .choice-art { height: 120px; padding: 12px 9px; }
  .choice-art b { display: block; max-width: calc(100% - 15px); font-size: 21px; line-height: .94; white-space: normal; }
  .choice-art em { bottom: 10px; left: 10px; font-size: 49px; }
  .bonus-choices>button[data-bonus-choice=super] .choice-art b { font-size: 17px; max-width: calc(100% - 16px); }
  .bonus-choices strong { font-size: 10px; line-height: 1.4; min-height: 28px; margin: 11px 9px 0; }
  .bonus-choices small { font-size: 9px; line-height: 1.4; min-height: 25px; margin: 4px 9px 0; }
  .dialog-subtitle { font-size: 11px !important; }
  .purchase-facts { grid-template-columns: 1fr; padding: 4px 12px; margin: 13px 0 11px; }
  .purchase-facts>div { flex-direction: row; justify-content: space-between; align-items: center; gap: 15px; padding: 11px 0; border: 0; border-bottom: 1px solid #b9cda522; font-size: 10px; }
  .purchase-facts>div:last-child { border-bottom: 0; }
  .purchase-facts b, .purchase-facts #buy-after { font-size: 17px; text-align: right; }
  .purchase-facts div:nth-child(2) b { font-size: 21px; }
  .purchase-note { font-size: 9px !important; line-height: 1.6; margin-block: 12px; }
  #confirm-buy { min-height: 46px; font-size: 11px; }
  .cancel-buy { min-height: 39px; }
  .text-action { font-size: 10px; }
  #wallet-dialog { padding: 27px 20px; }
  #wallet-dialog h2 { font-size: 27px; }
  .credit-options { gap: 7px; }
  .credit-options button { min-height: 53px; font-size: 14px; }
  .settings-toggles>label { min-height: 61px; padding: 11px 0; }
  .settings-toggles b { font-size: 12px; }
  .settings-toggles small { font-size: 10px; }
  .settings-links button, .settings-links button+button { font-size: 8px; }
  .visual-guide h3 { font-size: 24px; }
  .guide-match { grid-template-columns: 1fr; gap: 17px; }
  .guide-match-copy { display: grid; grid-template-columns: 60px 1fr; column-gap: 10px; }
  .guide-match-copy>svg { grid-row: span 2; width: 55px; height: 55px; }
  .guide-match-copy>strong { align-self: end; font-size: 20px; }
  .guide-match-copy>b { font-size: 16px; }
  .guide-match-copy p { grid-column: span 2; max-width: none; margin: 9px 0 0; font-size: 11px; }
  .guide-flow { padding: 15px 6px; gap: 3px; }
  .guide-flow strong { font-size: 10px; }
  .guide-flow small { font-size: 8px; }
  .flow-pic { width: 64px; height: 58px; }
  .flow-pic svg { width: 58px; height: 58px; }
  .guide-equation { padding: 19px 0; gap: 4px; }
  .guide-equation>span { font-size: 8px; }
  .guide-equation b { font-size: 25px; }
  .guide-equation i { font-size: 20px; }
  .guide-wallet { padding: 13px; gap: 10px; }
  .guide-wallet span { font-size: 10px; }
  .guide-wallet b { display: block; font-size: 15px; }
  .guide-wallet small { font-size: 9px; }
  .guide-bonuses { gap: 9px; }
  .guide-bonus-art { height: 130px; padding: 11px; }
  .guide-bonus-art>span { font-size: 18px; }
  .super .guide-bonus-art>span { display: block; max-width: 98px; font-size: 15px; }
  .guide-bonus-art>b { left: 11px; bottom: 11px; font-size: 48px; }
  .guide-bonus-copy { padding: 10px 8px; }
  .guide-bonus-copy p { grid-template-columns: 1fr; font-size: 10px; }
  .guide-bonus-copy p>svg { width: 38px; height: 38px; grid-row: auto; }
  .guide-bonus-copy p>span { font-size: 9px; }
  .guide-bonus-copy>strong { font-size: 10px; line-height: 1.4; min-height: 40px; }
  .guide-bonus-copy>small { font-size: 9px; min-height: 29px; }
  .guide-bonus-copy button { min-height: 38px; padding: 7px 3px; font-size: 7px; letter-spacing: .1px; }
  .guide-credit { grid-template-columns: 1fr; gap: 9px; }
  .guide-credit>div { padding: 14px; }
  .guide-kicker { font-size: 7px; letter-spacing: 1.6px; }
  #history-dialog h2 { font-size: 25px; }
  #view-receipt { font-size: 12px !important; padding: 14px; }
  .history-wrap th { font-size: 7px; padding: 10px 4px; letter-spacing: 0; }
  .history-wrap td, .history-wrap td:first-child { font-size: 10px; padding: 11px 4px; }
  dialog td, dialog th { padding: 9px 5px; font-size: 10px; }
  dialog td svg { width: 29px; height: 29px; }
  #bonus-result { padding: 25px 21px; }
  .result-visual { width: 90px; height: 90px; margin-bottom: 16px; }
  .result-visual>svg { width: 79px; height: 79px; }
  #bonus-result h2 { font-size: 29px; }
  #result-amount { font-size: 45px; margin-top: 17px; }
  #result-caption { font-size: 11px; }
  .result-facts { margin: 19px 0; }
  .result-facts>div { padding-inline: 6px; gap: 8px; }
  .result-facts span, .result-facts small { font-size: 8px; }
  .result-facts b, .result-facts strong { font-size: 15px; }
  .getaway-cinematic:after { background: linear-gradient(0deg, #061f2af7 0%, #082531a6 41%, #08253112 87%); }
  .cinematic-copy { width: 90%; max-width: calc(100% - 44px); margin: 0 22px 116px; align-self: flex-end; }
  .episode-tag { font-size: 7px; letter-spacing: 1.65px; }
  .cinematic-copy p { font-size: 15px; line-height: 1.4; margin: 19px 0; }
  .cinematic-copy h2 { font-size: clamp(77px, 22vw, 112px); margin: 20px 0 27px; line-height: .83; }
  .super-active .cinematic-copy h2 { font-size: 68px; }
  .super-active .cinematic-copy h2 span { font-size: 59px; }
  .cinematic-copy>b { margin-top: 23px; font-size: 8px; line-height: 1.6; letter-spacing: 1.05px; }
  .cinematic-copy button { min-width: 224px; min-height: 46px; padding: 12px 18px; margin-top: 20px; font-size: 10px; letter-spacing: .9px; }
  .getaway-cinematic .cinematic-copy small { font-size: 8px; line-height: 1.5; max-width: 280px; margin-top: 15px; }
  .cinematic-chapter { top: max(25px, env(safe-area-inset-top)); right: 22px; gap: 10px; padding: 10px 12px; }
  .cinematic-chapter-number { font-size: 31px; }
  .cinematic-chapter-copy { max-width: 110px; font-size: 8px; letter-spacing: 1.2px; }
  .cinematic-timeline { left: 22px; right: 22px; bottom: max(28px, env(safe-area-inset-bottom)); width: auto; gap: 10px; }
  .cinematic-beat { font-size: 7px; letter-spacing: .6px; padding-top: 11px; }
  .cinematic-skip, #skip-getaway { right: 22px; bottom: 77px; min-height: 32px; padding: 7px 10px; font-size: 8px; }
}

@media (max-width: 370px) {
  .game { padding-inline: 8px; gap: 5px; }
  .brand span { font-size: 11px; letter-spacing: 1.9px; }
  .brand strong { font-size: 34px; letter-spacing: 1.5px; }
  .brand small { max-width: 89px; font-size: 5px; letter-spacing: .1px; }
  .topbar { gap: 6px; min-height: 60px; }
  .top-actions { gap: 4px; }
  .top-actions .icon-button { width: 30px; height: 37px; border-radius: 7px; }
  .top-actions .balance { min-width: 112px; gap: 5px; padding: 7px !important; }
  .balance small { font-size: 5.8px; letter-spacing: .3px; }
  .balance strong { font-size: 18px; }
  .wallet-add { width: 23px; height: 29px; font-size: 19px; }
  .controls { grid-template-columns: 128px minmax(0,1fr); gap: 7px 8px; padding: 8px; }
  .stake-top button { font-size: 6.5px; padding-inline: 4px; }
  .spin { font-size: 16px; gap: 5px; padding-inline: 6px; }
  .spin>svg { width: 25px; height: 25px; }
  .secondary { grid-template-columns: 1fr 76px; gap: 8px; }
  .buy-ticket { font-size: 9px; gap: 5px; }
  .buy-ticket small { font-size: 7px; }
  .feature-rail { grid-template-columns: 1fr 60px 1fr; gap: 6px !important; }
  .feature-rail .bonus-sign { grid-template-columns: 24px 1fr !important; padding: 5px !important; }
  .bonus-medal { width: 24px !important; }
  .bonus-sign>small { font-size: 5.4px !important; }
  .bonus-sign>b { font-size: 6px !important; }
  .round-total { padding: 7px 6px; }
  .round-total small { font-size: 5.7px; }
  .round-total strong { font-size: 23px; }
  .round-total>span { font-size: 8px; }
  .combo-panel #combo-content { font-size: 8px; gap: 4px; }
  .combo-panel button { padding-inline: 5px; font-size: 7px; }
  .match-chip svg { width: 19px; height: 21px; }
  .match-chip strong, .match-chip>span { font-size: 8px; }
  .cabinet-foot { font-size: 6.6px; }
  .round-counter { font-size: 6px; }
  .fineprint { font-size: 5.4px; gap: 6px; }
  .feature-strip button { font-size: 7px !important; }
  .choice-art b { font-size: 18px; }
  .bonus-choices>button[data-bonus-choice=super] .choice-art b { font-size: 15px; }
  .bonus-choices strong { font-size: 9px; }
  .bonus-choices small { font-size: 8px; }
  .settings-links { grid-template-columns: 1fr; }
  .result-facts b, .result-facts strong { font-size: 13px; }
}

@media (max-width: 700px) and (max-height: 760px) {
  .game { min-height: 0; padding-top: max(7px, env(safe-area-inset-top)); padding-bottom: max(6px, env(safe-area-inset-bottom)); gap: 5px; }
  .topbar { min-height: 59px; }
  .brand strong { font-size: 35px; }
  .brand span { font-size: 12px; }
  .feature-strip { display: none; }
  .feature-rail { height: 69px; min-height: 69px; }
  .feature-rail .bonus-sign { height: 69px !important; min-height: 69px !important; grid-template-rows: 12px 25px 17px !important; }
  .sun-meter { height: 69px !important; min-height: 69px; }
  .sun-meter>svg { width: 54px; height: 54px; margin-top: -2px; }
  .sun-meter>strong { top: 16px; font-size: 18px; }
  .sun-meter small { bottom: 6px; font-size: 6px; }
  .round-total { height: 69px; min-height: 69px; gap: 4px; padding-block: 7px; }
  .round-total strong { font-size: 24px; }
  .controls { min-height: 123px; gap: 6px 8px; padding: 7px; }
  .spin { min-height: 68px; }
  .stake-input button, .stake-input select { height: 34px; }
  .buy-ticket { min-height: 41px; }
  .radio-line, .receipt-line { min-height: 23px; height: 23px; }
  .mode-banner, .bonus-active .mode-banner { top: 69px; }
  .cinematic-copy { margin-bottom: 105px; }
  .cinematic-copy p { margin-block: 15px; }
  .cinematic-copy h2 { font-size: 78px; margin: 18px 0 22px; }
  .cinematic-copy>b { margin-top: 18px; }
}

@media (max-width: 700px) and (max-height: 650px) {
  .game { padding-block: 6px; gap: 4px; }
  .topbar { min-height: 49px; }
  .brand strong { font-size: 29px; }
  .brand span { font-size: 10px; }
  .brand small { margin-top: 5px; font-size: 4.7px; }
  .top-actions .icon-button { height: 35px; }
  .top-actions .balance { padding-block: 6px !important; }
  .balance strong { font-size: 18px; }
  .balance small { margin-bottom: 3px; }
  .marquee { height: 20px; min-height: 20px; font-size: 7px; }
  .cabinet-foot { min-height: 19px; padding-top: 4px; font-size: 6.7px; }
  .combo-panel { min-height: 32px; margin-top: 5px; padding-block: 2px; }
  .combo-panel button { min-height: 26px; }
  .combo-panel #combo-content>b { font-size: 21px; }
  .feature-rail { height: 58px; min-height: 58px; gap: 5px !important; }
  .feature-rail .bonus-sign { height: 58px !important; min-height: 58px !important; grid-template-rows: 10px 20px 14px !important; padding-block: 5px !important; }
  .bonus-sign>strong { font-size: 24px !important; }
  .bonus-sign>small { font-size: 5px !important; }
  .bonus-sign>b { font-size: 5.5px !important; }
  .bonus-medal { height: 40px !important; }
  .sun-meter { height: 58px !important; min-height: 58px; }
  .sun-meter>svg { width: 45px; height: 45px; margin-top: -1px; }
  .sun-meter>strong { top: 12px; font-size: 16px; }
  .sun-meter small { bottom: 5px; font-size: 5px; }
  .turbo-ring { width: 38px; height: 38px; left: calc(50% - 19px); top: 4px; }
  .round-total { height: 58px; min-height: 58px; gap: 3px; padding-block: 5px; }
  .round-total small { font-size: 5.4px; }
  .round-total strong { font-size: 21px; }
  .round-total>span { font-size: 7px; }
  .controls { min-height: 111px; gap: 5px 8px; padding: 6px; }
  .stake-top { gap: 3px; margin-bottom: 4px; }
  .stake-top label { font-size: 6px; }
  .stake-top button { min-height: 19px; font-size: 6px; padding-block: 2px; }
  .stake-input button, .stake-input select { height: 30px; }
  .spin { min-height: 60px; }
  .buy-ticket { min-height: 36px; }
  .buy-ticket svg { width: 27px; height: 27px; }
  .round-tools button { min-height: 19px !important; font-size: 7px !important; padding-block: 2px !important; }
  .radio-line { display: none; }
  .receipt-line { min-height: 21px; height: 21px; padding-block: 3px; }
  .fineprint { min-height: 9px; font-size: 5px; }
  .mode-banner, .bonus-active .mode-banner { top: 57px; font-size: 6px; }
  .cinematic-copy { margin-bottom: 91px; }
  .cinematic-copy p { font-size: 12px; margin-block: 13px; }
  .cinematic-copy h2 { font-size: 67px; }
  .cinematic-copy>b { font-size: 7px; }
  .cinematic-copy button { margin-top: 14px; min-height: 40px; padding-block: 10px; }
  .getaway-cinematic .cinematic-copy small { font-size: 7px; margin-top: 11px; }
  .cinematic-chapter { top: 18px; padding: 7px 10px; }
  .cinematic-chapter-number { font-size: 25px; }
  .cinematic-chapter-copy { font-size: 7px; }
  .cinematic-timeline { bottom: 18px; }
  .cinematic-skip, #skip-getaway { bottom: 61px; min-height: 28px; }
}

@media (min-width: 701px) and (max-height: 560px) {
  .game { padding: 7px 18px; gap: 4px; --stage-width: min(850px, 100%); }
  .topbar { min-height: 49px; }
  .brand span { font-size: 13px; }
  .brand strong { font-size: 37px; }
  .brand small { font-size: 5px; margin-top: 6px; }
  .top-actions .balance { padding-block: 7px; }
  .balance strong { font-size: 21px; }
  .arena { grid-template-columns: minmax(0,1fr) 175px; gap: 15px; }
  .feature-rail { padding-top: 20px !important; gap: 7px !important; }
  .rail-heading, .getaway-poster { display: none; }
  .feature-rail .bonus-sign { min-height: 75px !important; height: 75px; }
  .marquee { height: 20px; min-height: 20px; font-size: 8px; }
  .combo-panel { min-height: 34px; margin-top: 5px; padding-block: 2px; }
  .combo-panel button { min-height: 28px; }
  .cabinet-foot { min-height: 19px; padding-top: 4px; font-size: 8px; }
  .controls { min-height: 72px; padding: 6px 12px; }
  .spin { min-height: 55px; }
  .stake-top { margin-bottom: 4px; }
  .stake-input button, .stake-input select { height: 31px; }
  .buy-ticket { min-height: 38px; }
  .radio-line, .receipt-line { min-height: 23px; height: 23px; }
  .feature-strip { display: none; }
  .fineprint { min-height: 8px; font-size: 6px; }
  .cinematic-copy p { margin: 14px 0; font-size: 15px; }
  .cinematic-copy h2 { font-size: 77px; margin: 20px 0; }
  .cinematic-copy>b { margin-top: 23px; font-size: 8px; }
  .cinematic-copy button { margin-top: 18px; min-height: 42px; padding-block: 11px; }
  .getaway-cinematic .cinematic-copy small { margin-top: 14px; font-size: 8px; }
}

/* Preference overrides are deliberately last. */
.quiet-city .police-reflections, .quiet-city .searchlight, .quiet-city .floating-dust,
.quiet-city .ocean-shimmer, .quiet-city .poster-siren { display: none; }
.quiet-city .backdrop:before, .quiet-city .backdrop:after { animation: none !important; }
.no-motion *, .no-motion *:before, .no-motion *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.no-motion .tile.removing { opacity: 0; }
.no-motion .tile.added { transform: none; opacity: 1; }
.no-motion .tile.winning:before, .no-motion .scene-transition, .no-motion .cinematic-sweep,
.no-motion .cinematic-police, .no-motion .police-reflections, .no-motion .confetti,
.no-motion .cell-spark, .no-motion .column-stop, .no-motion .multiplier-flight, .no-motion .control-ripple { display: none; }
.getaway-cinematic[data-reduced-motion=true] *, .getaway-cinematic[data-reduced-motion=true]:before { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .tile.removing { opacity: 0; }
  .tile.added { transform: none; opacity: 1; }
  .tile.winning:before, .scene-transition, .cinematic-sweep, .cinematic-police,
  .police-reflections, .confetti, .cell-spark, .column-stop, .multiplier-flight, .control-ripple { display: none; }
}

/* Sound audition belongs to settings; it never places a demo wager. */
.audio-preview-panel { margin: 20px 0 16px; padding: 14px; border: 1px solid #94e9dd40; border-radius: 10px; background: #08263075; }
.audio-preview-panel h3 { margin: 0 0 6px; font-size: 10px; letter-spacing: 1.4px; color: #bdf7e9; }
.audio-preview-panel p { margin: 0 0 12px; font-size: 10px; line-height: 1.45; color: #accac8; }
.audio-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.audio-preview-grid button { min-height: 41px; border-radius: 7px; padding: 9px; border: 1px solid #98e7d775; background: #254d58; color: #f5ecd9; font-size: 11px; font-weight: 800; }
.audio-preview-grid button:hover:not(:disabled) { background: #346974; border-color: #b5ffee; }
.audio-preview-grid button[aria-pressed=true] { background: #b0ecda; color: #0a303a; }
.audio-preview-panel #audio-preview-status:empty { display: none; }
.audio-preview-panel #audio-preview-status { margin: 10px 0 0; }