:root{--cream:#fff3d4;--cyan:#6dfff0;--coral:#ff7168;--pink:#ff59a6;--ink:#122e36;--gold:#ffe49b;font-family:'Avenir Next','Trebuchet MS',sans-serif;color:var(--cream);font-weight:650;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-width:320px;background:#163843}button,select,input{font:inherit}button,select{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.46}button:focus-visible,select:focus-visible,input:focus-visible,input:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}button:active:not(:disabled){transform:translateY(2px)}svg{display:block}button,select{-webkit-tap-highlight-color:transparent}#svg-assets{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}.sr{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}
.backdrop{position:fixed;inset:0;z-index:-2;overflow:hidden;background:#ea9b83}.backdrop:before,.backdrop:after{content:'';position:absolute;inset:-2%;background:center/cover no-repeat;transition:opacity 1.2s,transform 1.5s}.backdrop:before{background-image:url('assets/neon-boulevard-v9.webp');animation:city-breathe 28s ease-in-out infinite alternate}.backdrop:after{background-image:url('assets/neon-boulevard-v9.webp');opacity:0;transform:scale(1.1)}.bonus-active .backdrop:after{opacity:1;transform:scale(1)}.stage-glow{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,#0c272bca,transparent 40%),linear-gradient(90deg,#17273333,transparent 35%,#1e263033)}.ocean-shimmer{position:absolute;inset:58% 0 0;z-index:2;background:linear-gradient(115deg,transparent 35%,#f4de9e17 45%,transparent 55%);animation:reflection 12s ease-in-out infinite;pointer-events:none}.floating-dust{position:absolute;inset:0;z-index:2;background-image:radial-gradient(circle,#ffe6bdcc 1px,transparent 2px),radial-gradient(circle,#affffd99 1px,transparent 2px);background-size:233px 181px,347px 279px;opacity:.35;animation:drift 22s linear infinite;pointer-events:none}
.game{height:100svh;min-height:720px;max-width:1440px;margin:auto;padding:25px 48px 15px;display:flex;flex-direction:column;gap:13px;position:relative}.topbar{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-shrink:0;min-height:95px}.brand{line-height:.8;transform:skew(-7deg);position:relative;filter:drop-shadow(0 5px 5px #14303940)}.brand span{display:block;font-family:Impact,'Arial Narrow',sans-serif;font-size:23px;letter-spacing:5.5px;color:#fff9df;text-shadow:0 2px #28575e}.brand strong{display:block;font-family:Impact,'Arial Narrow',sans-serif;font-size:69px;letter-spacing:5px;color:#ff786e;-webkit-text-stroke:1px #ffecbb;text-shadow:0 4px #c23756,0 7px #583348}.brand small{display:block;transform:skew(7deg);font-size:7px;letter-spacing:2px;margin-top:12px;color:#fff5d7}.episode{margin-right:auto;align-self:center;padding-left:24px;border-left:1px solid #fff2cb70;text-shadow:0 1px 8px #163533}.episode span{display:block;font-size:9px;letter-spacing:2px;margin-bottom:8px}.episode b{font-size:15px;letter-spacing:3px}.top-actions{display:flex;gap:9px;align-items:center}.icon-button{display:grid;place-items:center;width:42px;height:42px;border:1px solid #f7e2b477;border-radius:12px;background:#153c41c9;color:var(--cream);box-shadow:0 3px 0 #0d303844;font-size:26px}.icon-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon-button:hover{background:#266369}.balance{display:flex;align-items:center;gap:18px;border:1px solid #f6e4b4;background:linear-gradient(120deg,#ffefd0,#ffdbb1);padding:10px 13px 10px 20px;border-radius:13px;color:#29404a;box-shadow:0 4px 0 #85545333}.balance small{font-size:8px;letter-spacing:1.6px;display:block;margin-bottom:3px}.balance strong{font-size:25px;line-height:1.1;font-variant-numeric:tabular-nums}.wallet-add{width:32px;height:32px;background:#20484c;color:#fff0d5;border:0;border-radius:9px;font-size:23px}.arena{display:grid;grid-template-columns:minmax(0,1fr)220px;gap:26px;flex:1;min-height:0;align-items:stretch}.cabinet{display:flex;flex-direction:column;min-height:0;position:relative;animation:arrival .65s ease-out both}.marquee{height:29px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;color:#fff8e9;flex-shrink:0;text-shadow:0 2px 3px #1c3739;font-size:9px;letter-spacing:1.2px}.marquee:before{content:'COASTLINE CASCADES';font-size:8px;letter-spacing:2px;color:#ffedca}.reel-lamps{display:flex;gap:5px}.reel-lamps i{width:5px;height:5px;border-radius:50%;background:#13464c;box-shadow:0 0 0 1px #81c5b77a}.reel-lamps i.landed{background:var(--cyan);box-shadow:0 0 7px #aaffdf}.board-shell{position:relative;flex:1;min-height:0;border:6px solid #e5bd87;border-radius:18px;background:#183e47;box-shadow:0 0 0 1px #ffe7b3,0 0 0 4px #6b444777,inset 0 0 0 2px #61dbc8,0 15px 32px #07242c66;overflow:hidden}.board-shell:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:9;border-radius:11px;border:1px solid #bfffed99;box-shadow:inset 0 0 25px #12363b45}.board{position:absolute;inset:5px;border-radius:9px;overflow:hidden;background:linear-gradient(90deg,#bafdf60c 1px,transparent 1px),linear-gradient(#a6fff010 1px,transparent 1px),radial-gradient(ellipse at 50% 0,#1b737a,#103845 80%);background-size:calc(100% / 6) 20%,calc(100% / 6) 20%,100% 100%;box-shadow:inset 0 4px 16px #061d34aa;isolation:isolate}.tile{position:absolute;width:calc(100% / 6);height:20%;display:grid;place-items:center;transition:top .3s cubic-bezier(.2,.8,.25,1),opacity .15s}.tile svg{position:absolute;left:6%;top:6%;width:88%;height:88%;overflow:visible;filter:drop-shadow(0 5px 3px #051b2840)}.tile .sun-number{position:absolute;font-size:clamp(15px,2vw,26px);font-weight:950;text-shadow:0 2px 4px #001e2c;color:#e9fff9}.tile .bonus-label{position:absolute;bottom:6%;font-size:9px;font-weight:950;letter-spacing:1px;background:#fff1ac;color:#254547;padding:1px 5px;border-radius:3px;box-shadow:0 2px 5px #061c3366}.tile.winning{z-index:3;background:radial-gradient(ellipse,#ffeca74d,transparent 75%)}.tile.winning:after{content:'';position:absolute;inset:3%;border:2px solid var(--group-color,var(--gold));border-radius:10px;box-shadow:0 0 18px var(--group-color,var(--gold)),inset 0 0 20px #ffffff20;animation:prize-outline .6s ease-out}.board.evaluating .tile:not(.winning){opacity:.28}.tile.winning svg{animation:symbol-hop .5s ease-out both}.tile[data-symbol='6'].winning svg{animation:car-rev .48s ease-out both}.tile[data-symbol='5'].winning svg{animation:boat-rock .5s ease-in-out both}.tile[data-symbol='3'].winning svg{animation:flamingo-nod .5s ease-out both}.tile[data-symbol='1'].winning svg{animation:tape-bop .5s ease-out both}.tile[data-symbol='4'].winning svg{animation:pendant-swing .5s ease-out both}.tile[data-symbol='2'].winning svg{animation:watch-glint .5s ease-out both}.tile[data-symbol='0'].winning svg{animation:glasses-tilt .5s ease-out both}.tile.removing{animation:match-break .17s ease-in forwards}.tile.added{animation:new-symbol .27s cubic-bezier(.15,.8,.2,1) both}.position-mark{position:absolute;right:4%;top:4%;font-size:10px;min-width:17px;height:17px;display:grid;place-items:center;background:var(--group-color);color:#1a3640;border-radius:4px;z-index:5}.tile.scatter-glow svg{filter:drop-shadow(0 0 14px #ffdb82);animation:key-turn .8s ease-in-out infinite alternate}.tile.multiplier-hit svg{animation:turbo-hit .5s ease-out}
.rolling-reel{position:absolute;top:0;bottom:0;width:calc(100% / 6);overflow:hidden;contain:layout paint;box-shadow:inset -1px 0 #a3f9ff16}.reel-strip{position:absolute;top:0;left:0;width:100%;will-change:transform,filter}.reel-strip .reel-symbol{left:0!important;width:100%;transition:none}.rolling-reel:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#052d46a3,transparent 22%,transparent 78%,#052d4699);opacity:1;transition:opacity .15s}.rolling-reel:before{content:'';position:absolute;z-index:2;inset:-45% 35%;pointer-events:none;border-radius:50%;background:repeating-linear-gradient(transparent 0 13%,#d9ffdf33 14%,transparent 19%);filter:blur(6px);animation:reel-speed-lines .24s linear infinite}.rolling-reel.reel-stopped:after{opacity:0}.rolling-reel.reel-stopped:before{display:none}.board-shell:has(.reel-running){box-shadow:0 0 0 1px #ffe7b3,0 0 0 4px #6b444777,inset 0 0 0 2px #61dbc8,0 0 34px #85fbd94d}.fx-layer{position:absolute;inset:5px;z-index:8;overflow:hidden;pointer-events:none;border-radius:9px}.column-stop{position:absolute;top:0;width:calc(100% / 6);height:100%;background:linear-gradient(90deg,transparent,#d4ffe54d,transparent);border-inline:1px solid #baffef55;animation:column-land .3s ease-out both}.cell-spark{position:absolute;width:5px;height:5px;border-radius:2px;background:var(--spark-color);box-shadow:0 0 6px var(--spark-color);animation:cell-burst .43s ease-out forwards}.multiplier-flight{position:absolute;z-index:30;padding:5px 10px;border:1px solid #deffe8;background:#096c75;border-radius:20px;color:#c5ffee;font-weight:950;box-shadow:0 0 17px #42f5e8;animation:collect-flight .48s cubic-bezier(.3,.05,.5,1) forwards;pointer-events:none}.combo-panel{display:flex;gap:7px;align-items:center;min-height:43px;margin-top:8px;padding:5px 8px 5px 12px;border:1px solid #c3e8d442;border-radius:9px;background:#153c42eb;color:#e3f8e9}.combo-panel #combo-content{display:flex;gap:8px;align-items:center;flex:1;min-width:0;font-size:10px}.combo-panel #combo-content>b{font-size:22px;font-family:Impact,sans-serif;color:#ffe3a5}.combo-panel button{min-height:30px;background:#f2e3bd;color:#2d464a;border:0;border-radius:5px;font-size:8px;font-weight:950;letter-spacing:.7px;padding:6px 10px}.combo-panel #combo-next{background:#8cf5d9}.match-chip{display:flex;align-items:center;gap:4px;padding:2px 6px;border:1px solid var(--group-color);border-radius:5px;white-space:nowrap;color:var(--group-color);animation:arrival .18s ease-out}.match-chip svg{width:26px;height:26px}.match-chip strong{font-size:10px}.match-chip>span{font-size:10px;color:var(--cream)}.cabinet-foot{display:flex;justify-content:space-between;gap:8px;padding:8px 10px 0;min-height:27px;color:#fff5d5;text-shadow:0 1px 4px #062f30;font-size:9px}.round-counter{white-space:nowrap;color:#c2e5d8;font-size:8px;letter-spacing:1px}
.feature-rail{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;min-height:0;gap:10px;padding:22px 0 27px}.rail-heading{font:27px/1 Impact,'Arial Narrow',sans-serif;letter-spacing:2px;color:#fff4da;text-shadow:0 3px #8e4156,0 5px 20px #18323888}.rail-heading span{display:block;font:7px 'Avenir Next',sans-serif;letter-spacing:1.4px;margin-top:8px;color:#fff1d7}.hero-car{height:99px;position:relative;isolation:isolate}.hero-car>span{position:absolute;top:0;left:0;font-size:7px;letter-spacing:2px;color:#fff2dd}.hero-car svg{width:100%;height:120px;position:absolute;top:-1px;filter:drop-shadow(0 10px 10px #1d233d70);animation:car-idle 5s ease-in-out infinite}.hero-car i{position:absolute;bottom:0;left:5%;right:5%;height:12px;background:#48f8d970;filter:blur(12px);z-index:-1}.bonus-sign{display:grid;grid-template-columns:72px 1fr;grid-template-rows:18px 37px 25px;align-items:center;column-gap:9px;padding:12px 14px;border:1px solid #ffdfb0;border-radius:13px;background:linear-gradient(120deg,#fbc99c,#ef916f);color:#582f3d;box-shadow:0 5px 0 #663d4233;position:relative;overflow:hidden}.bonus-medal{grid-column:1;grid-row:1/4;width:72px;height:72px}.bonus-medal svg{width:100%;height:100%}.bonus-sign small{font-size:7px;letter-spacing:1px;grid-column:2}.bonus-sign>strong{font:40px/.9 Impact,sans-serif;grid-column:2}.bonus-sign>b{font-size:8px;letter-spacing:.7px;line-height:1.25;grid-column:2}.bonus-sign:after{content:'';position:absolute;inset:0;pointer-events:none;transform:translateX(-130%) skew(-15deg);background:linear-gradient(90deg,transparent,#fff7d95c,transparent);animation:chrome-sweep 8s ease-in-out infinite}.sun-meter{position:relative;height:99px;flex-shrink:0;text-align:center}.sun-meter>svg{width:93px;height:93px;margin:auto}.sun-meter>strong{position:absolute;left:0;right:0;top:27px;font-size:25px;font-weight:950;color:#eaffed;text-shadow:0 2px 3px #093f50}.sun-meter small{position:absolute;left:0;right:0;bottom:0;font-size:7px;letter-spacing:1.1px;text-shadow:0 1px 4px #0e313e}.turbo-ring{position:absolute;width:77px;height:77px;top:8px;left:calc(50% - 38.5px);border:1px dashed #91ffde66;border-radius:50%;animation:turn 20s linear infinite;pointer-events:none}.sun-meter.pop .turbo-ring{animation:turn .5s ease-out}.sun-meter.pop{animation:meter-pop .4s ease-out}.round-total{display:flex;flex-direction:column;gap:5px;border-top:1px solid #ffefbe99;padding:13px 0 0;color:#fff1d7;text-shadow:0 2px 6px #163e48}.round-total small{font-size:8px;letter-spacing:1.3px}.round-total strong{font-size:34px;line-height:1.1;font-variant-numeric:tabular-nums}.round-total>span{font-size:11px;color:#e7ded2}.round-total.gain strong{color:#aaffdf}.round-total.win-pulse{animation:meter-pop .55s ease-out}
.controls{display:grid;grid-template-columns:210px minmax(150px,280px)230px;align-items:center;justify-content:center;gap:30px;padding:15px 25px;border:1px solid #e7d4ad77;border-radius:14px;background:linear-gradient(120deg,#183e41f5,#183e49f5);box-shadow:0 9px 30px #142e3955;flex-shrink:0}.stake label{font-size:8px;letter-spacing:1.5px;display:block;margin-bottom:7px;color:#b8d7cd}.stake-input{display:grid;grid-template-columns:36px 1fr 36px;gap:6px}.stake-input button,.stake-input input{height:39px;border:1px solid #b9d7be55;border-radius:7px;background:#254c50;color:#fff0cf;text-align:center}.stake-input button{font-size:22px}.stake-input input{min-width:0;width:100%;font-size:19px;font-weight:850;background:#132f39}.spin{position:relative;isolation:isolate;overflow:hidden;min-height:68px;border:2px solid #ffe3b4;border-radius:12px;background:linear-gradient(#ffb591,#ff7f78 45%,#ed586a);box-shadow:inset 0 2px #fff1cd80,0 5px 0 #873d4b,0 0 25px #ed8e7040;color:#432c3a;display:flex;align-items:center;justify-content:center;gap:12px;font-size:22px;letter-spacing:1px;font-weight:950}.spin:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 10%,#fff8dd77 50%,transparent 80%);transform:translateX(-150%);transition:transform .65s}.spin:hover:not(:disabled):after{transform:translateX(150%)}.spin svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.spin.busy{opacity:1;color:#71414b;background:linear-gradient(#ffbb97,#ef8a83)}.spin.busy svg{animation:turn .75s linear infinite}.tap-burst{animation:tap-response .16s ease-out}.secondary{display:flex;flex-direction:column;gap:6px}.buy-ticket{display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #e4dfb3;border-radius:9px;min-height:48px;background:linear-gradient(#efe3b8,#d8c38d);color:#30454b;font-size:11px;font-weight:950;letter-spacing:.5px}.buy-ticket svg{height:38px;width:38px}.buy-ticket small{font-size:8px;display:block;margin-top:3px;letter-spacing:1px;color:#4d665d}.secondary-button:not(.buy-ticket){border:0;color:#bad6cd;background:none;font-size:8px;letter-spacing:1px;padding:5px}.feature-strip{display:flex;gap:20px;justify-content:center;align-items:center;font-size:8px;letter-spacing:1.4px;color:#e9dec8;height:22px;flex-shrink:0}.feature-strip i{width:3px;height:3px;border-radius:50%;background:#b9ead5}.feature-strip button{font:inherit;color:#a7f7de;background:none;border:0;padding:3px}.feature-strip b{font-size:15px;margin-left:7px}.fineprint{display:flex;align-items:center;justify-content:center;gap:15px;font-size:8px;letter-spacing:.3px;color:#abc7be;flex-shrink:0}.mode-banner{position:absolute;top:117px;left:50%;transform:translateX(-50%);background:#fff0ce;color:#4f4b3e;border-radius:5px;padding:5px 10px;z-index:12;font-size:8px;letter-spacing:.3px;white-space:nowrap;box-shadow:0 3px 15px #10312f40}
.board-message{position:absolute;inset:0;z-index:15;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse,#15585bef,#183245ed);backdrop-filter:blur(6px);padding:15px;animation:overlay-in .28s ease-out}.board-message>*{position:relative;z-index:2}.board-message:before{content:'';position:absolute;inset:-90%;background:repeating-conic-gradient(#ffdeb720 0deg 7deg,transparent 7deg 25deg);animation:turn 28s linear infinite;mask-image:radial-gradient(circle,transparent 0%,black 17%,transparent 50%)}.board-message small{font-size:16px;letter-spacing:4px;color:#f7d4a5}.board-message strong{font:clamp(45px,8vw,105px)/1.2 Impact,sans-serif;color:#fff0c6;text-shadow:0 3px #ea8b6e,0 7px #6c4044;letter-spacing:1px}.board-message span{font-size:12px;color:#bce8da;letter-spacing:1px;margin-top:9px}.board-message.bonus-intro{background:linear-gradient(#13384588,#172642ee),url('assets/neon-boulevard-v9.webp') center/cover}.board-message.bonus-intro strong{font-size:clamp(36px,6vw,80px);color:#ffa58c}.board-message.bonus-intro .bonus-car{position:absolute;width:60%;height:50%;bottom:0;right:-5%;opacity:.3;animation:bonus-car-in 1s cubic-bezier(.1,.7,.2,1) both;z-index:0}.win-continue{margin-top:20px;padding:11px 23px;border:1px solid #f8deb0;border-radius:7px;background:#efe0b7;color:#294e4f;font-size:10px;font-weight:950;letter-spacing:2px}.win-float{position:absolute;z-index:10;top:43%;left:50%;transform:translate(-50%,-50%);padding:6px 16px;border:1px solid #fff8d4;background:#eaca88;color:#21434b;border-radius:8px;font-size:24px;font-weight:950;box-shadow:0 6px 20px #05384460;pointer-events:none;animation:float-up .9s ease-out both}.confetti{position:absolute;z-index:16;top:25%;left:var(--left);width:7px;height:11px;background:var(--color);animation:confetti 1.3s ease-out forwards;pointer-events:none}.bonus-active .board{background-image:linear-gradient(90deg,#bafdf60c 1px,transparent 1px),linear-gradient(#a6fff010 1px,transparent 1px),radial-gradient(ellipse at 50% 0,#513858,#202d50 85%)}.bonus-active .board-shell{border-color:#f0b2bd;box-shadow:0 0 0 1px #f8dfba,inset 0 0 0 2px #64dfed,0 0 35px #f67fb63d}.bonus-active .bonus-sign{background:linear-gradient(125deg,#f2acb4,#cf78ba)}.bonus-active .hero-car svg{animation:car-rev 1.8s ease-in-out infinite}.bonus-active .turbo-ring{border-color:#fda8d3}.scene-transition{position:fixed;inset:0;pointer-events:none;z-index:60;visibility:hidden;overflow:hidden}.scene-transition span{position:absolute;width:140%;height:40%;left:-20%;background:linear-gradient(90deg,#ffe7b9,#ff897d);transform:translateX(-120%) skew(-18deg)}.scene-transition span:nth-child(2){top:33%;background:#76e3d2}.scene-transition span:nth-child(3){top:66%;background:#e597bb}.scene-transition.active{visibility:visible}.scene-transition.active span{animation:scene-wipe .85s cubic-bezier(.7,0,.2,1) both}.scene-transition.active span:nth-child(2){animation-delay:.065s}.scene-transition.active span:nth-child(3){animation-delay:.13s}
dialog{width:min(660px,calc(100% - 28px));max-height:calc(100svh - 28px);overflow:auto;border:1px solid #f4d8a7;border-radius:17px;background:#f4e9d0;color:#263f48;padding:26px;box-shadow:0 22px 80px #071e3d99;color-scheme:light}dialog::backdrop{background:#0b283cc4;backdrop-filter:blur(6px)}dialog h2{font:30px Impact,sans-serif;letter-spacing:1.4px;margin:0;color:#344e55}dialog h3{margin-top:24px}dialog p,dialog li{font-size:13px;line-height:1.55}dialog li{margin:9px 0}dialog ol{padding-left:20px}.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:15px}.dialog-top .icon-button{flex-shrink:0;background:#28575c}.rules-cards{display:flex;gap:9px;margin:18px 0}.rules-cards>div{flex:1;background:#e4d6b7;border:1px solid #baa97f;padding:12px 8px;border-radius:8px;text-align:center}.rules-cards b{display:block;font:25px Impact,sans-serif;color:#8e4a55;margin-bottom:6px}.rules-cards span{font-size:9px}.rule-options{border-top:1px solid #bbb593;padding-top:13px;display:grid;gap:10px;font-size:12px}.rule-options label{display:flex;align-items:center;gap:8px;min-height:44px}.rule-options input{width:20px;height:20px}table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}td,th{border-bottom:1px solid #c9c3a3;padding:7px;text-align:center}td:first-child{text-align:left;display:flex;gap:7px;align-items:center}td svg{width:33px;height:33px}th{font-size:10px}.purchase-dialog{text-align:center;max-width:450px;padding:30px}.dialog-close{position:absolute;right:13px;top:10px;border:0;background:none;font-size:28px;color:#3f6868}.eyebrow{font-size:9px;letter-spacing:2px;color:#7b6654}.ticket-art{width:100px;height:100px;margin:10px auto}.ticket-art svg{width:100%;height:100%}.dialog-subtitle{font-size:14px!important}.purchase-facts{text-align:left;background:#e2d8bd;border-radius:10px;padding:6px 14px;margin:18px 0}.purchase-facts>div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #c4b693;font-size:12px}.purchase-facts>div:last-child{border-bottom:0}.purchase-facts b{font-size:16px}.purchase-facts div:nth-child(2) b{color:#a6525d;font-size:23px}.primary-action{display:block;min-height:47px;width:100%;background:linear-gradient(#ffaf8a,#e77979);border:1px solid #d0756b;border-radius:8px;color:#443747;font-weight:950;font-size:13px;letter-spacing:1px;box-shadow:0 4px #d3b49c;margin:12px 0}.text-action{border:0;background:none;color:#366c6e;text-decoration:underline;font-size:11px;padding:12px;min-height:42px}.error{color:#a62449;font-size:12px}.wallet-hero{width:76px;height:76px;border:1px solid #fff3c2;border-radius:50%;display:grid;place-items:center;margin:17px auto;background:#d5c59f}.wallet-hero svg{width:36px;height:36px;fill:none;stroke:#375d63;stroke-width:1.5}.credit-options{display:flex;gap:9px;margin-top:20px}.credit-options button{flex:1;min-height:48px;border:1px solid #afac8d;background:#d6dfb7;border-radius:8px;color:#294a50;font-weight:950}.sound-dialog{max-width:420px}.sound-dialog>label{display:block;font-size:14px;margin:20px 0}.sound-dialog output{float:right;font-weight:800}.sound-dialog input{display:block;width:100%;margin-top:12px;accent-color:#31867e;height:26px}
@keyframes arrival{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes city-breathe{from{transform:scale(1)}to{transform:scale(1.035)}}@keyframes reflection{0%,100%{transform:translateX(-15%);opacity:.2}50%{transform:translateX(15%);opacity:.7}}@keyframes drift{to{transform:translateY(-36px)}}@keyframes turn{to{transform:rotate(360deg)}}@keyframes car-idle{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(0)}}@keyframes symbol-hop{0%{transform:scale(1)}40%{transform:scale(1.13) translateY(-3px)}100%{transform:scale(1)}}@keyframes car-rev{0%,100%{transform:translateX(0)}25%{transform:translateX(-7%) rotate(-4deg)}65%{transform:translateX(8%) rotate(2deg)}}@keyframes boat-rock{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg) translateY(-4%)}65%{transform:rotate(5deg)}}@keyframes flamingo-nod{0%,100%{transform:rotate(0)}35%{transform:rotate(10deg) scale(1.1)}70%{transform:rotate(-5deg)}}@keyframes tape-bop{0%,100%{transform:scale(1)}35%{transform:scale(1.15) rotate(-7deg)}65%{transform:scale(.98) rotate(5deg)}}@keyframes pendant-swing{0%,100%{transform:rotate(0)}30%{transform:rotate(-12deg)}65%{transform:rotate(9deg)}}@keyframes watch-glint{0%,100%{transform:scale(1);filter:brightness(1)}45%{transform:scale(1.12);filter:brightness(1.3)}}@keyframes glasses-tilt{0%,100%{transform:rotate(0)}40%{transform:rotate(-10deg) scale(1.12)}}@keyframes key-turn{from{transform:rotate(-8deg)}to{transform:rotate(7deg) scale(1.06)}}@keyframes turbo-hit{50%{transform:rotate(25deg) scale(1.13)}}@keyframes new-symbol{from{transform:translateY(-170%);opacity:.2}75%{transform:translateY(8%);opacity:1}to{transform:translateY(0);opacity:1}}@keyframes match-break{40%{transform:scale(1.1);opacity:1}to{transform:scale(.35);opacity:0}}@keyframes column-land{from{opacity:.85}to{opacity:0}}@keyframes reel-speed-lines{from{transform:translateY(-13%)}to{transform:translateY(13%)}}@keyframes cell-burst{from{transform:translate(-50%,-50%);opacity:1}to{transform:translate(var(--sx),var(--sy)) rotate(150deg);opacity:0}}@keyframes collect-flight{to{transform:translate(var(--dx),var(--dy)) scale(.5);opacity:.25}}@keyframes meter-pop{50%{transform:scale(1.1)}}@keyframes tap-response{50%{transform:scale(.965)}}@keyframes chrome-sweep{0%,75%{transform:translateX(-150%) skew(-15deg)}100%{transform:translateX(150%) skew(-15deg)}}@keyframes overlay-in{from{opacity:0;transform:scale(1.07)}to{opacity:1;transform:scale(1)}}@keyframes float-up{0%{opacity:0;transform:translate(-50%,-20%) scale(.8)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-140%) scale(.95)}}@keyframes confetti{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),240px) rotate(390deg)}}@keyframes scene-wipe{0%{transform:translateX(-120%) skew(-18deg)}50%{transform:translateX(0) skew(-18deg)}100%{transform:translateX(120%) skew(-18deg)}}@keyframes bonus-car-in{from{transform:translateX(130%) rotate(-8deg)}to{transform:translateX(0) rotate(-8deg)}}@keyframes prize-outline{from{opacity:.4;transform:scale(.94)}50%{opacity:1;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
@media(min-width:1500px){.game{max-width:1500px;padding-inline:55px}.arena{grid-template-columns:minmax(0,1fr)240px;gap:35px}.feature-rail{gap:17px}.hero-car{height:135px}.hero-car svg{height:155px}}
@media(max-width:1050px){.game{padding:18px 25px 12px;gap:10px}.arena{grid-template-columns:minmax(0,1fr)175px;gap:18px}.controls{grid-template-columns:180px minmax(170px,250px)190px;gap:20px}.episode{display:none}.rail-heading{font-size:22px}.rail-heading span{font-size:6px}.bonus-sign{grid-template-columns:53px 1fr;padding:10px;gap:6px}.bonus-medal{width:53px;height:63px}.hero-car svg{height:105px}.hero-car{height:85px}.marquee:before{display:none}.round-total strong{font-size:29px}.mode-banner{top:111px}}
@media(max-width:700px){.game{height:100svh;min-height:740px;padding:12px 12px 10px;gap:8px}.topbar{min-height:77px;gap:8px}.brand span{font-size:13px;letter-spacing:2.5px}.brand strong{font-size:43px;letter-spacing:2px;text-shadow:0 2px #c23756,0 4px #583348}.brand small{font-size:5px;letter-spacing:.5px;margin-top:8px}.top-actions{gap:5px}.icon-button{width:33px;height:35px;border-radius:9px}.icon-button svg{width:18px;height:18px}#audio-settings{display:none}.balance{gap:8px;padding:8px 8px 8px 11px;border-radius:10px}.balance small{font-size:6px;letter-spacing:.8px}.balance strong{font-size:18px}.wallet-add{width:26px;height:29px;font-size:20px}.arena{display:flex;flex-direction:column;gap:9px}.cabinet{flex:1;min-height:300px}.marquee{height:24px;font-size:7px;letter-spacing:.65px;padding-inline:7px}.reel-lamps{gap:4px}.reel-lamps i{width:4px;height:4px}.board-shell{border-width:4px;border-radius:12px;box-shadow:0 0 0 1px #ffe7b3,0 3px 0 3px #6b44475e,0 10px 30px #082c4155}.board{inset:4px}.tile svg{left:3%;top:3%;width:94%;height:94%}.tile .sun-number{font-size:17px}.tile .bonus-label{font-size:5px;letter-spacing:.2px;padding:1px 3px}.tile.winning:after{border-radius:6px;box-shadow:0 0 9px var(--group-color)}.position-mark{font-size:8px;min-width:14px;height:14px}.combo-panel{min-height:38px;margin-top:6px;padding:4px 5px;gap:4px;border-radius:7px}.combo-panel #combo-content{font-size:8px;gap:5px}.combo-panel #combo-content>b{font-size:20px}.combo-panel button{font-size:6px;padding:4px 6px;letter-spacing:.2px;min-height:29px}.match-chip{gap:3px;padding:1px 3px}.match-chip svg{width:20px;height:22px}.match-chip strong,.match-chip>span{font-size:8px}.cabinet-foot{padding:6px 3px 0;font-size:7px;min-height:22px;gap:3px}.round-counter{font-size:6px;letter-spacing:0}.feature-rail{display:grid;grid-template-columns:1fr 74px 1fr;gap:9px;align-items:center;flex-shrink:0;height:81px;padding:0}.rail-heading,.hero-car{display:none}.bonus-sign{padding:7px;grid-template-columns:39px 1fr;grid-template-rows:12px 23px 19px;gap:2px 4px;border-radius:9px;box-shadow:none;height:72px}.bonus-medal{width:39px;height:53px}.bonus-sign>strong{font-size:26px}.bonus-sign small{font-size:5px;letter-spacing:.15px}.bonus-sign>b{font-size:6px;letter-spacing:0}.sun-meter{height:77px}.sun-meter>svg{height:70px;width:70px}.sun-meter>strong{top:21px;font-size:18px}.sun-meter small{font-size:5px;letter-spacing:0}.turbo-ring{width:58px;height:58px;left:calc(50% - 29px);top:6px}.round-total{gap:4px;padding:8px 0 5px;min-width:0}.round-total small{font-size:5px;letter-spacing:.5px}.round-total strong{font-size:24px}.round-total>span{font-size:8px}.controls{grid-template-columns:142px minmax(0,1fr);gap:12px;padding:12px;border-radius:11px}.stake label{font-size:6px;margin-bottom:6px;letter-spacing:1px}.stake-input{grid-template-columns:30px 1fr 30px;gap:3px}.stake-input button,.stake-input input{height:37px}.stake-input input{font-size:16px}.spin{min-height:58px;font-size:17px;gap:8px;border-radius:9px}.spin svg{width:24px;height:24px}.secondary{grid-column:1/-1;display:grid;grid-template-columns:1fr 95px;gap:13px;align-items:center}.buy-ticket{min-height:42px;font-size:10px;gap:7px}.buy-ticket svg{width:31px;height:31px}.buy-ticket small{font-size:7px}.secondary-button:not(.buy-ticket){font-size:7px;line-height:1.5;min-height:38px}.feature-strip{gap:9px;letter-spacing:.3px;font-size:6px;height:19px}.feature-strip>span:nth-of-type(2),.feature-strip>i:nth-of-type(2){display:none}.feature-strip b{font-size:12px;margin-left:1px}.fineprint{font-size:6px;gap:10px;letter-spacing:0;min-height:12px}.mode-banner{top:94px;font-size:6px;max-width:88%;padding:4px 6px;white-space:normal;text-align:center}.board-message small{font-size:10px;letter-spacing:1.5px}.board-message strong{font-size:51px}.board-message span{font-size:9px;letter-spacing:.5px}.board-message.bonus-intro strong{font-size:38px}.win-continue{margin-top:15px;font-size:8px;padding:9px 15px}.win-float{font-size:19px;padding:5px 12px}.fx-layer{inset:4px}.sound-dialog{padding:20px}.top-actions #info{width:31px}.purchase-dialog{padding:24px}.purchase-facts>div{font-size:11px}.rules-cards{gap:5px}.rules-cards>div{padding:9px 4px}.rules-cards span{font-size:8px}td,th{padding:6px 3px}td:first-child{gap:3px}td svg{width:25px;height:25px}}
@media(max-width:360px){.game{padding-inline:8px}.brand span{font-size:11px}.brand strong{font-size:36px}.balance{padding:7px;gap:5px}.balance strong{font-size:15px}.top-actions{gap:4px}.icon-button{width:30px}.controls{grid-template-columns:129px minmax(0,1fr);padding:10px;gap:10px}.feature-strip{gap:7px}.combo-panel #combo-content{font-size:7px}.match-chip strong,.match-chip>span{font-size:7px}.match-chip svg{width:17px}.feature-rail{gap:6px;grid-template-columns:1fr 65px 1fr}}
.no-motion *,.no-motion *:before,.no-motion *:after{animation:none!important;transition:none!important}.no-motion .scene-transition,.no-motion .floating-dust,.no-motion .cell-spark,.no-motion .column-stop,.no-motion .multiplier-flight{display:none}.no-motion .tile.removing{opacity:0}.no-motion .tile.added{transform:none;opacity:1}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.scene-transition,.floating-dust{display:none}}
/* Keep cells visually substantial at laptop heights. */
@media(min-width:701px){.game{max-width:1220px;min-height:680px;padding:16px 30px 10px;gap:8px}.topbar{min-height:78px}.brand strong{font-size:57px}.brand span{font-size:19px;letter-spacing:4px}.brand small{margin-top:10px}.arena{max-width:1020px;width:100%;margin-inline:auto;grid-template-columns:minmax(0,1fr)210px;gap:27px}.cabinet{height:100%;width:auto;max-width:100%;aspect-ratio:1.45;justify-self:end}.controls{padding:10px 24px;grid-template-columns:190px minmax(190px,270px)210px;gap:27px;max-width:1020px;width:100%;margin-inline:auto}.spin{min-height:62px}.feature-strip{height:18px}.mode-banner{top:92px}.feature-rail{padding:18px 0 23px;gap:8px}.bonus-sign{flex-shrink:0;min-height:102px}.hero-car{min-height:58px;height:80px;flex-shrink:1}.hero-car svg{height:105px;top:-14px}.rail-heading{font-size:24px}.sun-meter{height:86px}.sun-meter>svg{width:80px;height:80px}.sun-meter>strong{top:24px;font-size:22px}.turbo-ring{width:68px;height:68px;left:calc(50% - 34px);top:6px}.round-total{padding-top:8px}.round-total strong{font-size:30px}}
@media(min-width:701px) and (max-height:760px){.hero-car{display:none}.feature-rail{justify-content:space-between}.board-shell{border-width:5px}}

@media(max-width:700px){#audio-settings{display:grid}.top-actions{gap:4px}.balance{gap:5px;padding-left:8px}.balance strong{font-size:16px}.top-actions .icon-button{width:30px}.brand strong{font-size:39px}}

/* AFTER HOURS — original coastal crime-film art direction, v2. */
:root{--cyan:#66fff7;--pink:#ff43aa;--coral:#ff6d92;--gold:#ffdb87;--cream:#fff9e6}
.backdrop:before{background-image:url('assets/neon-boulevard-v9.webp');animation:city-breathe 32s ease-in-out infinite alternate}.backdrop:after{background-image:none;background-position:70% center}.stage-glow{background:linear-gradient(0deg,#101632bb,transparent 50%),linear-gradient(90deg,#05133125,transparent 32%,#13153930)}
.brand{filter:drop-shadow(-3px 5px 0 #081e45)}.brand strong{color:#ff6c9c;-webkit-text-stroke:1px #fff4c6;text-shadow:0 3px #ac285d,0 6px #173862,0 0 22px #fe36976e}.brand small{letter-spacing:1px}.episode b{font-size:11px;letter-spacing:1.5px;color:#7ffff0}.episode span{color:#fff8e3}.balance{background:linear-gradient(130deg,#101a38ee,#243c58ee);color:#fff7da;border-color:#80fff4;box-shadow:0 0 18px #16fbe129,inset 0 1px #efffff33}.balance small{color:#94dcd9}.wallet-add{background:#f77eb0;color:#222b46}.icon-button{background:#14263fea;border-color:#f07bad88;border-radius:7px}.icon-button:hover{background:#485279}
.police-reflections{position:fixed;inset:0;pointer-events:none;z-index:3;overflow:hidden;mix-blend-mode:screen}.police-reflections i{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at 100% 74%,#ff224357,transparent 43%);animation:police-red 5s ease-in-out infinite}.police-reflections i+ i{background:radial-gradient(ellipse at 0 72%,#246bff55,transparent 43%);animation:police-blue 5s ease-in-out infinite}.bonus-active .police-reflections i{animation-duration:3.6s}.searchlight{position:fixed;right:3%;top:6%;width:70vw;height:90vh;z-index:-1;transform-origin:95% 0;pointer-events:none;background:linear-gradient(130deg,transparent 46%,#c5fff215 48%,#9cdbff03 62%,transparent 67%);clip-path:polygon(97% 0,17% 100%,76% 100%);animation:searchlight-pan 12s ease-in-out infinite alternate;mix-blend-mode:screen}
.city-sign{position:absolute;left:3px;top:27%;width:133px;transform:rotate(-6deg);text-align:center;pointer-events:none;filter:drop-shadow(0 4px 5px #001b35);z-index:0}.city-sign>span{font-size:7px;letter-spacing:3px;color:#b1ffee}.city-sign b{display:block;font:42px/.98 Impact,'Arial Narrow',sans-serif;letter-spacing:2px;color:#ffbbf0;-webkit-text-stroke:1px #ffe2f4;text-shadow:0 0 7px #ff38a4,0 0 20px #ff38a4,2px 3px #a23486}.city-sign em{display:block;margin-top:14px;font:italic 26px Georgia,serif;color:#9ffff3;text-shadow:0 0 8px #1beacb;transform:rotate(-6deg)}.city-sign>i{display:block;font-style:normal;font-size:6px;letter-spacing:2px;margin-top:14px;color:#ffeea8}.radio-sticker{position:absolute;left:14px;bottom:30%;transform:rotate(-6deg);width:106px;padding:9px 8px;border:1px solid #ffd5de70;background:#211c426e;box-shadow:3px 4px 0 #090d2f55;backdrop-filter:blur(5px)}.radio-sticker>span{font-size:8px;letter-spacing:2px;color:#75ffe8}.radio-sticker b{display:block;font:17px Impact,sans-serif;letter-spacing:1px}.equalizer{height:13px;display:flex;gap:4px;margin-top:7px}.equalizer i{width:6px;background:#ff88c6;transform-origin:bottom;animation:eq-dance .8s ease-in-out infinite alternate}.equalizer i:nth-child(2n){animation-delay:-.4s;background:#7bffed}.equalizer i:nth-child(3n){animation-delay:-.7s}.arena,.controls{position:relative;z-index:4}.topbar{z-index:5}.cabinet{aspect-ratio:1.45}.board-shell{border:5px solid #c2dcd7;border-radius:14px;box-shadow:-3px 0 0 #67fbe3,3px 0 0 #ff51ae,-7px 0 22px #0bd7e85c,7px 0 25px #f124ba50,0 16px 28px #09132baa}.board-shell:before{border:1px solid #a9fffe80;box-shadow:inset 0 0 18px #36196260}.board{background-image:linear-gradient(90deg,#e6caff0c 1px,transparent 1px),linear-gradient(#a6fff00c 1px,transparent 1px),radial-gradient(ellipse at 45% 0,#24435e,#181f3e 80%)}.board-shell:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:10;background:linear-gradient(115deg,transparent 38%,#b2ffed0c 45%,transparent 53%);transform:translateX(-150%);animation:glass-pass 11s ease-in-out infinite}.tile svg{filter:drop-shadow(0 5px 3px #00052466) saturate(1.2);left:3%;top:3%;width:94%;height:94%}.tile[data-symbol='7'] svg{filter:drop-shadow(0 0 8px #fce29266)}.tile.winning:after{border-radius:5px}.combo-panel{background:#111d3aed;border-color:#b2d4e25c;border-radius:5px}.combo-panel button{background:#70f5dc;color:#142b39;border-radius:3px}.cabinet-foot{color:#fff5e5;text-shadow:0 2px 3px #10182d}.marquee{font-size:8px;letter-spacing:1px}.marquee:before{content:'AFTER HOURS / VOL. 01';color:#8effe3;font-size:7px}.reel-lamps i.landed{background:#ff8bcd;box-shadow:0 0 7px #ff3eb4}
.feature-rail{gap:10px!important;padding-top:12px!important;padding-bottom:14px!important;justify-content:flex-start!important}.rail-heading{font:italic 37px/.92 Impact,sans-serif;letter-spacing:1px;transform:rotate(-3deg);color:#fffbe9;text-shadow:3px 4px #ee399b,0 0 16px #611a7144}.rail-heading>span{display:block;font:7px 'Trebuchet MS',sans-serif;letter-spacing:2px;color:#80ffe9;margin:0 0 8px}.rail-heading>em{display:block;font:italic 10px Georgia,serif;color:#ffdbbc;letter-spacing:0;text-shadow:0 1px #203857;margin-top:10px}.getaway-poster{height:122px;min-height:70px;flex:1;position:relative;overflow:hidden;background:linear-gradient(0deg,#13142a77,transparent 65%),url('assets/getaway-v9.webp') 80% center/cover;border:1px solid #ebb0b8;clip-path:polygon(3% 0,100% 4%,97% 100%,0 96%);filter:drop-shadow(3px 5px 0 #0e16274d);padding:9px}.getaway-poster>span{font-size:5px;letter-spacing:1px}.getaway-poster>b{position:absolute;bottom:10px;left:8px;font:italic 20px/.9 Impact,sans-serif;text-shadow:2px 2px #d14079}.poster-siren{position:absolute;inset:70% 0 0;background:linear-gradient(90deg,#fc1c7640,transparent,#196aff50);animation:neon-breathe 3.5s ease-in-out infinite}.bonus-sign{min-height:78px!important;grid-template-columns:56px 1fr!important;grid-template-rows:12px 30px 18px!important;padding:8px 10px!important;gap:2px 6px!important;background:linear-gradient(120deg,#fa73ad,#fdc396)!important;border:1px solid #ffcfdf;border-radius:7px;color:#282640;box-shadow:0 0 17px #ff5abb36}.bonus-medal{width:55px!important;height:62px!important}.bonus-sign>strong{font-size:32px!important}.bonus-sign>small{font-size:6px!important;letter-spacing:1px}.bonus-sign>b{font-size:7px!important}.sun-meter{height:70px!important;flex-shrink:0}.sun-meter>svg{width:65px!important;height:65px!important}.sun-meter>strong{top:19px!important;font-size:20px!important}.turbo-ring{top:5px!important;width:57px!important;height:57px!important;left:calc(50% - 28.5px)!important;border-color:#8affe5}.sun-meter small{font-size:6px}.round-total{margin-top:auto;border-top:1px solid #f4acd480;padding-top:9px}.round-total strong{text-shadow:0 0 18px #fa70ce44}.round-total small{font-size:7px}.round-total>span{font-size:10px}
.controls{background:linear-gradient(110deg,#14213bf5,#2d1e45f5);border-color:#95f0e88c;border-radius:10px;box-shadow:0 0 20px #00f2d912,0 8px 25px #000c3280}.spin{background:linear-gradient(#ffbdc6,#ff69a1 48%,#ed3686);border-color:#ffd4ee;color:#331c3a;border-radius:8px;box-shadow:inset 0 2px #fff1f090,0 5px 0 #7b2860,0 0 25px #fc3d983d}.spin.busy{background:linear-gradient(#df98cf,#bb648f);color:#3f2c49}.buy-ticket{background:linear-gradient(130deg,#baffec,#58d7d7);border-color:#c3fff5;border-radius:6px;color:#173147}.buy-ticket small{color:#25455e}.stake-input button,.stake-input select{background:#1b2948;border-color:#547b8f;color:#fff5df}.secondary-button:not(.buy-ticket){color:#bbd9e5}.feature-strip{font-size:7px;letter-spacing:.8px;height:16px!important}.radio-line{display:flex;align-items:center;justify-content:center;gap:9px;font-size:8px;letter-spacing:.5px;min-height:18px;position:relative;z-index:4}.radio-line>i{width:5px;height:5px;border-radius:50%;background:#85ffe7;box-shadow:0 0 6px #46ffcf}.radio-line>span{color:#78ffdb;font-weight:900}.radio-line>b{font-weight:500;color:#e2e3ec}.radio-line>em{font-size:7px;color:#ffa9c7}.fineprint{color:#dbdedf;font-size:7px}.mode-banner{top:96px;background:#0f2239e8;color:#8effe3;border:1px solid #70f9e590;font-size:7px}
.pursuit-hud{display:none;align-items:center;gap:8px;height:24px;flex-shrink:0;background:#101d38d9;border:1px solid #fc69b1a0;padding:4px 8px;border-radius:5px;margin-bottom:4px;font-size:7px;letter-spacing:1px;color:#8ffff3}.bonus-active .pursuit-hud{display:flex}.pursuit-hud>span{white-space:nowrap}.pursuit-hud>span>i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#ff83bc;margin-right:5px;box-shadow:0 0 7px #ff499b}.pursuit-hud>b{white-space:nowrap;color:#fff0d4}.pursuit-road{position:relative;flex:1;height:9px;border-bottom:1px dashed #b4bdea66;margin-inline:8px;--progress:0}.pursuit-road:after{content:'◈';position:absolute;right:-8px;top:-3px;font-size:12px;color:#fff4c6}.pursuit-road>i{position:absolute;left:calc(12% + var(--progress)*68%);top:2px;width:12px;height:5px;border-radius:2px;background:#ff83c6;box-shadow:-5px 0 10px #f051b880;transition:left .8s ease}.pursuit-road>.pursuer{left:calc(1% + var(--progress)*58%);width:10px;background:linear-gradient(90deg,#448dff 45%,#ff3b85 55%);box-shadow:0 0 8px #7966ff}.bonus-active .board-shell{border-color:#d0b6e1;box-shadow:-3px 0 #54dbff,3px 0 #ff3993,-8px 0 25px #2682ff5e,8px 0 25px #ff23735c}.bonus-active .board{background-image:linear-gradient(90deg,#e6caff0c 1px,transparent 1px),linear-gradient(#a6fff00c 1px,transparent 1px),radial-gradient(ellipse at 45% 0,#40375f,#152342 85%)}
.getaway-cinematic{position:fixed;inset:0;z-index:70;overflow:hidden;display:flex;align-items:center;background:#162944;isolation:isolate;color:#fff5dd}.getaway-cinematic:before{content:'';position:absolute;inset:-2%;z-index:-2;background:url('assets/getaway-v9.webp') 70% center/cover;animation:cinematic-push 5.5s ease-out both}.getaway-cinematic:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0a233beb,transparent 78%),linear-gradient(0deg,#09203eaa,transparent 55%)}.cinematic-copy{margin-left:max(6vw,25px);max-width:570px;width:52%;animation:title-enter .65s cubic-bezier(.16,.8,.2,1) both}.episode-tag{font-size:10px;letter-spacing:3px;color:#86ffed;border-bottom:2px solid #ff5eae;padding-bottom:13px}.cinematic-copy p{font:italic 19px Georgia,serif;color:#ffc3c3;margin-top:33px}.cinematic-copy h2{font:italic clamp(74px,12vw,168px)/.8 Impact,'Arial Narrow',sans-serif;letter-spacing:-2px;margin:30px 0;color:#fff4d5;text-shadow:5px 6px #ed3d93,8px 10px #263b70;transform:rotate(-5deg)}.cinematic-copy h2 span{display:block;color:#ffa1c8}.cinematic-copy>b{display:block;font-size:12px;letter-spacing:2px;color:#8cffee;margin-top:45px}.cinematic-copy button{margin-top:28px;padding:17px 24px;min-width:240px;border:1px solid #baffed;background:#70f9d9;color:#152941;font-size:12px;letter-spacing:1.5px;font-weight:950;box-shadow:4px 5px #1c718e;transform:skew(-5deg)}.cinematic-copy button>span{font-size:22px;margin-left:22px}.cinematic-copy small{display:block;margin-top:22px;font-size:8px;line-height:1.5;color:#c3d7df}.cinematic-sweep{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,#80e6ff17 45%,transparent 51%);animation:glass-pass 6s ease-in-out infinite}.cinematic-police{position:absolute;inset:auto 0 0;height:35%;z-index:-1;mix-blend-mode:screen}.cinematic-police i{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 100%,#ff196b77,transparent 70%);animation:police-red 3s ease-in-out infinite}.cinematic-police i+ i{background:radial-gradient(ellipse at 85% 100%,#1c62ff99,transparent 70%);animation:police-blue 3s ease-in-out infinite}.getaway-ticket{width:calc(100% + 60px);height:135px;margin:15px -30px;background:linear-gradient(90deg,#0a244977,transparent),url('assets/getaway-v9.webp') 70% 44%/cover;display:flex;align-items:center;padding-left:28px}.getaway-ticket>b{font:italic 40px Impact,sans-serif;color:#fff7df;text-shadow:3px 4px #e44594;transform:rotate(-6deg)}
@keyframes police-red{0%,15%,60%,100%{opacity:0}28%,38%{opacity:.7}}@keyframes police-blue{0%,42%,88%,100%{opacity:0}56%,67%{opacity:.7}}@keyframes searchlight-pan{from{transform:rotate(-15deg);opacity:.3}to{transform:rotate(17deg);opacity:.85}}@keyframes glass-pass{0%,65%{transform:translateX(-100%)}100%{transform:translateX(120%)}}@keyframes eq-dance{from{transform:scaleY(.2)}to{transform:scaleY(1)}}@keyframes neon-breathe{0%,100%{opacity:.3}50%{opacity:.9}}@keyframes cinematic-push{from{transform:scale(1.1) translateX(1%)}to{transform:scale(1) translateX(0)}}@keyframes title-enter{from{opacity:0;transform:translateX(-60px) rotate(-3deg)}to{opacity:1;transform:translateX(0) rotate(0)}}
@media(min-width:701px){.game{gap:6px}.arena{max-width:1020px}.cabinet{aspect-ratio:1.45}.radio-line{height:18px}.controls{min-height:91px}.feature-rail{max-height:100%;overflow:hidden}}
@media(max-width:1150px){.city-sign,.radio-sticker{display:none}}
@media(max-width:700px){.game{min-height:785px;gap:6px}.backdrop:before{background-position:32% center}.backdrop:after{background-position:75% center}.brand strong{font-size:39px}.episode{display:none}.balance strong{font-size:16px}.arena{gap:7px}.feature-rail{height:81px;padding:0!important;gap:7px!important;grid-template-columns:1fr 68px 1fr}.getaway-poster{display:none}.rail-heading{display:none}.bonus-sign{min-height:71px!important;height:71px!important;grid-template-columns:39px 1fr!important;padding:7px!important;grid-template-rows:10px 24px 16px!important;gap:2px 4px!important}.bonus-medal{width:39px!important;height:53px!important}.bonus-sign>strong{font-size:27px!important}.bonus-sign>small{font-size:5px!important;letter-spacing:0}.bonus-sign>b{font-size:6px!important}.round-total{margin:0}.round-total small{font-size:5px}.round-total strong{font-size:25px}.round-total>span{font-size:8px}.radio-line{font-size:7px;gap:6px;min-height:16px}.radio-line>em{display:none}.radio-line>b{max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mode-banner{top:92px;max-width:80%;font-size:5px;padding:3px 5px}.marquee{font-size:6px;letter-spacing:.2px}.pursuit-hud{height:23px;font-size:6px;letter-spacing:.2px}.pursuit-hud>span{font-size:5px}.bonus-active .mode-banner{top:85px}.feature-strip{font-size:5px!important;gap:7px}.fineprint{font-size:5px}.cinematic-copy{width:90%;margin-left:23px;align-self:flex-end;margin-bottom:7vh}.getaway-cinematic:before{background-position:72% 25%;inset:0;background-size:auto 100%}.getaway-cinematic:after{background:linear-gradient(0deg,#0a233bf2 0%,#0a233b8a 45%,transparent 90%)}.episode-tag{font-size:7px;letter-spacing:1px}.cinematic-copy p{font-size:14px;margin-top:24px}.cinematic-copy h2{font-size:90px;margin:22px 0;line-height:.8}.cinematic-copy>b{margin-top:28px;font-size:9px;letter-spacing:1px}.cinematic-copy button{margin-top:22px;min-width:220px;padding:12px 18px}.cinematic-copy small{font-size:7px;margin-top:18px}.board-shell{border-width:4px}.controls{gap:9px;padding:11px}.searchlight{width:110vw;right:-10%}.getaway-ticket{width:calc(100% + 48px);margin-inline:-24px}.tile svg{width:98%;height:98%;left:1%;top:1%}}
@media(max-width:360px){.brand strong{font-size:35px}.game{min-height:755px}.radio-line>b{max-width:195px}.balance strong{font-size:15px}.top-actions{gap:3px}.controls{grid-template-columns:129px minmax(0,1fr)}.spin{font-size:15px;gap:5px}.cinematic-copy h2{font-size:76px}.cinematic-copy> b{font-size:8px}}
.no-motion .police-reflections,.no-motion .searchlight,.no-motion .cinematic-police,.no-motion .cinematic-sweep{display:none}.no-motion .getaway-cinematic:before{animation:none}.no-motion .equalizer i{animation:none;transform:scaleY(.6)}
@media(prefers-reduced-motion:reduce){.police-reflections,.searchlight,.cinematic-police,.cinematic-sweep{display:none}}

.driveby{position:fixed;bottom:2%;left:-260px;width:240px;height:120px;pointer-events:none;z-index:3;opacity:0}.driveby svg{position:absolute;width:240px;height:200px;top:-45px;filter:drop-shadow(-18px 8px 9px #ff168d99)}.driveby>i{position:absolute;bottom:26px;width:140px;height:9px;right:60%;background:linear-gradient(90deg,transparent,#ff43bf);filter:blur(5px)}.bonus-active .driveby{animation:driveby 12s ease-in infinite}@keyframes driveby{0%,65%{transform:translateX(0);opacity:0}66%{opacity:1}90%{opacity:1}100%{transform:translateX(calc(100vw + 520px));opacity:0}}.bonus-active .board-shell:before{background:linear-gradient(90deg,#176bff0c,transparent 25%,transparent 75%,#ff368510);animation:neon-breathe 3.6s ease-in-out infinite}.no-motion .driveby{display:none}@media(prefers-reduced-motion:reduce){.driveby{display:none}}
@media(min-width:701px){.mode-banner{top:82px}.bonus-active .mode-banner{top:82px}}

/* The ordinary game stays on the same empty boulevard. Bonus character art is loaded by bonus windows. */
.bonus-active .backdrop:after{background-image:url('assets/neon-boulevard-v9.webp')}
.getaway-poster{background-image:linear-gradient(0deg,#13142a77,transparent 65%),url('assets/neon-boulevard-v9.webp')}

/* V3: readable settlement, clipped drums, illuminated controls. */
.drum-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;contain:strict}.board.reel-running{box-shadow:inset 0 12px 18px #04082188,inset 0 -12px 18px #04082188}.board-shell:has(.reel-running){border-color:#cafef4;box-shadow:-3px 0 #83ffef,3px 0 #ff5bbb,0 0 35px #729dff57}.tile svg{filter:drop-shadow(0 4px 3px #00072480) saturate(1.28) contrast(1.04)}.tile.winning svg{filter:drop-shadow(0 0 8px #ffffc677) saturate(1.35)}
button{transition:transform .12s,box-shadow .18s,filter .18s}button:hover:not(:disabled){filter:brightness(1.10)}button:active:not(:disabled){transform:translateY(2px) scale(.98)}.icon-button:hover:not(:disabled){box-shadow:0 0 13px #79ffe352}.spin{border:2px solid #ffddf4;overflow:hidden;box-shadow:inset 0 2px 3px #fff7fcaa,inset 0 -4px 8px #a9186544,0 5px 0 #722657,0 0 24px #ff5cad55}.spin:not(:disabled){animation:spin-glow 4s ease-in-out infinite}.spin:before{content:'';position:absolute;inset:3px;border:1px solid #fff0fc77;border-radius:5px;pointer-events:none}.spin:after{animation:button-shine 6s ease-in-out infinite}.spin>svg{padding:3px;border:1px solid #54234b77;border-radius:50%;width:34px;height:34px;transition:transform .4s cubic-bezier(.2,.8,.3,1)}.spin:hover:not(:disabled)>svg{transform:rotate(70deg)}.spin.busy>svg{animation:turn .6s linear infinite}.buy-ticket{box-shadow:inset 0 2px #eaffff77,0 3px #215967,0 0 15px #39fada22}.buy-ticket:hover:not(:disabled){box-shadow:inset 0 2px #eaffff99,0 3px #215967,0 0 22px #39fada66}.stake-top{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:7px}.stake-top label{margin:0;letter-spacing:.5px;font-size:7px}.stake-top button{color:#9ffff0;background:#182a46;border:1px solid #74c7c666;padding:4px 5px;font-size:6px;border-radius:4px;white-space:nowrap;min-height:23px}.stake-top button[aria-pressed=true]{background:#8fffe7;color:#182a46}.round-tools{display:flex;justify-content:center;gap:10px}.round-tools button{min-height:25px}.round-tools button+button{border-left:1px solid #83c4d744!important;padding-left:14px!important}.receipt-line{display:flex;justify-content:center;align-items:center;gap:10px;width:100%;min-height:22px;padding:3px 10px;border:1px solid #95bed25c;border-radius:5px;background:#15233fe8;color:#f0e9ea;font-size:8px;position:relative;z-index:4}.receipt-line b{color:#ffe0a4}.receipt-line i{font-style:normal;font-size:7px;color:#8cffeb}.receipt-line.credited b{color:#8cffeb}.preview-mode .balance{border-color:#ffd08b;box-shadow:0 0 15px #ffb8553b}.preview-mode .balance small{font-size:0}.preview-mode .balance small:after{content:'ДЕМО · БЕЗ ЗАЧИСЛЕНИЯ';font-size:6px;letter-spacing:.5px;color:#ffdd9b}.preview-mode #round-label{color:#ffdda6}.preview-mode #net{color:#ffdfa6}.preview-mode .mode-banner{background:#ffd691;color:#262a44;font-weight:900;border-color:#fff3bd}.preview-mode .round-total{border-top-color:#ffb669}.history-wrap{overflow:auto}.history-wrap th{font-size:10px;white-space:nowrap}.history-wrap td:first-child{display:table-cell;font-size:10px}#view-receipt{padding:12px;background:#dce7d0;border:1px solid #a7c4ad;border-radius:7px;font-weight:800}.sun-meter.pop{animation:turbo-charge .52s ease-out}.sun-meter.pop .turbo-ring{box-shadow:0 0 30px #67ffe3,inset 0 0 14px #71efff}.tile.multiplier-hit:before{content:'';position:absolute;inset:5%;border:2px solid #8efff2;border-radius:50%;animation:turbo-ripple .55s ease-out both}.tile[data-symbol='7'] .bonus-label{box-shadow:0 0 8px #ffdc8b77}.combo-panel .match-chip{background:#11193588}.fast-mode .tile{transition-duration:.18s}.fast-mode .tile.added{animation-duration:.19s}
@keyframes button-shine{0%,72%{transform:translateX(-150%)}92%,100%{transform:translateX(150%)}}@keyframes spin-glow{0%,100%{box-shadow:inset 0 2px 3px #fff7fcaa,0 5px #722657,0 0 20px #ff5cad40}50%{box-shadow:inset 0 2px 3px #fff7fcaa,0 5px #722657,0 0 30px #ff5cad70}}@keyframes turbo-charge{0%,100%{transform:scale(1)}35%{transform:scale(1.12)}70%{transform:scale(.98)}}@keyframes turbo-ripple{from{transform:scale(.7);opacity:.9}to{transform:scale(1.4);opacity:0}}
@media(max-width:700px){.stake-top{flex-direction:column;align-items:flex-start;gap:3px;margin-bottom:4px}.stake-top label{font-size:5px}.stake-top button{font-size:5px;min-height:19px;padding:2px 4px}.controls{align-items:end}.spin{min-height:66px}.spin>svg{width:28px;height:28px}.round-tools{flex-direction:column;gap:0;align-items:stretch}.round-tools button{min-height:22px!important;font-size:6px!important;padding:3px!important}.round-tools button+button{border-left:0!important;border-top:1px solid #83c4d744!important;padding-left:3px!important}.receipt-line{font-size:6px;gap:5px;min-height:18px}.receipt-line>span{display:none}.receipt-line>i{font-size:6px}.feature-strip{gap:5px!important;letter-spacing:0!important}.feature-strip>span{display:none}.feature-strip>i{display:none}.feature-strip button{font-size:7px!important}.preview-mode .balance small:after{font-size:5px;letter-spacing:0}.mode-banner{max-width:85%}.history-wrap td,.history-wrap th{font-size:9px}}
.no-motion .spin,.no-motion .spin:after{animation:none!important}@media(prefers-reduced-motion:reduce){.spin,.spin:after{animation:none!important}}
#bonus-kind{width:100%;padding:12px 8px;border:1px solid #619e9a;border-radius:7px;background:#d5f0dc;color:#173649;font-size:12px;font-weight:800}.bonus-picker{display:block;text-align:left;font-size:8px;letter-spacing:1px;margin-bottom:7px}.super-active .board-shell{border-color:#ffe499;box-shadow:-3px 0 #7ffff0,3px 0 #ffc364,0 0 30px #ffa43d60}.super-active .cinematic-copy h2{font-size:clamp(52px,8vw,110px);color:#fff1ac}.super-active .cinematic-copy h2 span{color:#ffc26b}.getaway-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.95}.getaway-cinematic:has(.getaway-video.playing):before{opacity:0}.no-motion .getaway-video{display:none}@media(prefers-reduced-motion:reduce){.getaway-video{display:none}}@media(max-width:700px){.super-active .cinematic-copy h2{font-size:62px}.super-active .cinematic-copy h2 span{font-size:51px}}
/* Illustrated rules: actual game symbols, exact accounting, accessible text. */
#rules{max-width:800px;width:calc(100% - 28px)}.visual-guide{margin-top:22px;color:#163747}.guide-kicker{font-size:9px;letter-spacing:2px;font-weight:900;color:#467b7c;margin:28px 0 10px}.visual-guide h3{font-size:24px;line-height:1.15;margin:0 0 18px;color:#153a48}.guide-match{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center}.guide-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:9px;border:2px solid #68cfce;border-radius:12px;background:linear-gradient(140deg,#182e52,#332749);box-shadow:0 5px 0 #336d75}.guide-cell{position:relative;aspect-ratio:1;background:#fff1;border:1px solid #ffffff09;border-radius:5px}.guide-cell svg{width:100%;height:100%;opacity:.6}.guide-cell.lit{background:#68ffe529;border-color:#7cffd6;box-shadow:0 0 7px #7affd533}.guide-cell.lit svg{opacity:1;filter:drop-shadow(0 0 3px #ffefb4aa)}.guide-cell i{position:absolute;bottom:-1px;right:-1px;font:700 9px/14px sans-serif;width:14px;text-align:center;border-radius:4px 0 4px 0;background:#85ffe1;color:#143748}.guide-match-copy>svg{width:65px;height:65px;display:block;filter:drop-shadow(0 3px 3px #133f5044)}.guide-match-copy>strong{display:block;font-size:22px}.guide-match-copy>b{color:#177c75;font-size:17px}.guide-match-copy p{font-size:12px;line-height:1.5;max-width:230px}.guide-flow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:26px;padding:14px 8px;background:#e5e4d4;border-radius:10px}.guide-flow>div{flex:1;text-align:center}.guide-flow>i{font:22px sans-serif;color:#1c8e8b}.flow-pic{position:relative;display:flex;align-items:center;justify-content:center;width:72px;height:62px;margin:0 auto 8px;background:linear-gradient(135deg,#233955,#3c3555);border-radius:10px}.flow-pic svg{width:65px;height:65px}.flow-pic>b{position:absolute;bottom:0;right:0;padding:2px 5px;background:#81fce0;color:#163d4c;border-radius:4px;font-size:14px}.guide-flow strong,.guide-flow small{display:block}.guide-flow strong{font-size:12px}.guide-flow small{font-size:9px;line-height:1.5;margin-top:3px}.cascade-pic{flex-direction:column;gap:2px}.cascade-pic em{font:18px sans-serif;letter-spacing:7px;color:#ffb7d7}.cascade-pic>b{position:static;background:transparent;color:#95ffe6;font-size:12px;letter-spacing:7px;padding:0}.guide-equation{display:flex;gap:8px;justify-content:space-between;align-items:center;padding:16px 8px}.guide-equation>span{font-size:10px;text-align:center;flex:1}.guide-equation b{display:block;font-size:28px;color:#1a5361}.guide-equation i{font-style:normal;font-size:22px;color:#709091}.guide-equation .equation-result{background:#c4e7d6;border-radius:9px;padding:6px}.guide-wallet{display:flex;align-items:center;gap:14px;border:1px solid #85b9a9;background:#d5ebd8;padding:14px;border-radius:9px}.guide-wallet svg{width:40px;fill:none;stroke:#277468;stroke-width:2}.guide-wallet span{font-size:12px}.guide-wallet b{font-size:16px}.guide-wallet small{display:block;font-size:10px;margin-top:4px;color:#377967}.guide-bonuses{display:grid;grid-template-columns:1fr 1fr;gap:14px}.guide-bonus{overflow:hidden;border:1px solid #849fa1;border-radius:10px;background:#e4e9dd}.guide-bonus-art{height:145px;position:relative;background:linear-gradient(90deg,#172740ab,#192c3922),url('assets/getaway-v9.webp') 65% 43%/cover;color:#ffeed2;padding:14px}.guide-bonus-art>span{font:italic 21px Impact,sans-serif;text-shadow:2px 2px #cb4690}.guide-bonus-art>b{position:absolute;bottom:12px;left:14px;font:italic 54px/.9 Impact,sans-serif;text-shadow:2px 3px #273d64}.guide-bonus-art small{display:block;font:700 8px sans-serif;letter-spacing:2px;margin-top:4px}.super .guide-bonus-art{background-image:linear-gradient(90deg,#392c34c7,#202c390a),url('assets/neon-boulevard-v9.webp');color:#ffe098;background-position:70% center}.guide-bonus-copy{padding:12px}.guide-bonus-copy p{display:grid;grid-template-columns:42px 1fr;column-gap:5px;margin:0 0 8px;font-size:11px}.guide-bonus-copy svg{width:42px;height:42px;grid-row:span 2}.guide-bonus-copy p>b{align-self:end}.guide-bonus-copy p>span{font-size:10px}.guide-bonus-copy>strong{font-size:11px;display:block}.guide-bonus-copy>small{font-size:10px;display:block;margin:6px 0 12px}.guide-bonus-copy button{font-size:9px;letter-spacing:.4px;width:100%;min-height:38px;border:1px solid #49847f;border-radius:5px;background:#bde9d5;color:#174654;font-weight:900}.super .guide-bonus-copy button{background:#f3dba4;border-color:#a39368}.guide-caution{font-size:10px!important;line-height:1.6;padding:10px 0}.guide-credit{display:grid;grid-template-columns:1fr 1fr;gap:12px}.guide-credit>div{padding:13px;background:#d2e7dd;border:1px solid #93bfb0;border-radius:8px}.guide-credit>div+div{background:#efe1c5;border-color:#c9b388}.guide-credit span,.guide-credit b,.guide-credit small{display:block}.guide-credit span{font-size:9px;letter-spacing:1px}.guide-credit b{font-size:12px;margin:8px 0}.guide-credit small{font-size:9px}.full-rules{margin-top:22px;border-top:1px solid #a1b7af;padding-top:14px}.full-rules summary{cursor:pointer;font-size:13px;font-weight:900;padding:8px 0}.full-rules ol{padding-left:20px}.full-rules li{margin-bottom:8px}.visual-guide svg{flex-shrink:0}.getaway-video{z-index:-2}
@media(max-width:520px){#rules{padding:20px 16px}.visual-guide h3{font-size:20px}.guide-match{grid-template-columns:1fr;gap:15px}.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{font-size:18px;align-self:end}.guide-match-copy>b{font-size:15px}.guide-match-copy p{grid-column:span 2;max-width:none;margin:8px 0 0}.guide-cell i{font-size:10px}.guide-bonuses{gap:10px}.guide-bonus-art{height:128px;padding:10px}.guide-bonus-art>span{font-size:16px}.guide-bonus-copy{padding:8px}.guide-bonus-copy p{grid-template-columns:1fr}.guide-bonus-copy svg{width:40px;height:40px;grid-row:auto}.guide-bonus-copy>strong{font-size:10px;min-height:24px}.guide-bonus-copy>small{min-height:26px;font-size:9px}.guide-bonus-copy button{font-size:8px;padding:5px}.guide-wallet b{display:block;font-size:15px}.guide-equation{gap:3px}.guide-equation b{font-size:25px}.guide-flow{gap:3px}.guide-flow small{font-size:8px}.guide-credit{grid-template-columns:1fr}.guide-kicker{font-size:8px}.guide-credit b{font-size:13px}}
.super-ticket .getaway-ticket{background-image:linear-gradient(90deg,#38233e66,transparent),url('assets/neon-boulevard-v9.webp');background-position:70% center}.super-ticket .getaway-ticket>b{font-size:31px;color:#ffeab2}.super-ticket #buy-title{color:#805739}.super-ticket #bonus-kind{background:#eee0b8;border-color:#b49f64}
@media(max-width:700px){.getaway-video{object-position:76% center}.cinematic-copy{max-width:calc(100% - 46px)}.cinematic-copy h2{transform-origin:left center}}
.economy-picture{width:100%;height:auto;display:block;border-radius:8px;margin:12px 0}
@media(max-width:520px){.super .guide-bonus-art>span{font-size:12px;display:block}.guide-bonus-copy>small{line-height:1.5}}

/* AFTER HOURS v4: one visual hierarchy, readable controls, calmer idle state. */
:root{--v4-panel:#17293eea;--v4-line:#8adbd565}.spin:not(:disabled),.spin:after{animation:none}.spin{background:linear-gradient(165deg,#ffbbbf,#ff7ba4 58%,#ee5a92);box-shadow:inset 0 2px #fff3e7aa,0 4px #86385d,0 8px 18px #0c152c44;color:#3a2643;letter-spacing:.8px}.spin:not(:disabled):hover{box-shadow:inset 0 2px #fff3e7aa,0 4px #86385d,0 0 22px #ff9ebc44}.spin.busy>svg{animation:turn .65s linear infinite}.spin:before{border-color:#fff1dc88}.spin:after{display:none}.spin.busy{background:linear-gradient(#bf839f,#926f91);color:#f9e1eb}.spin.tap-burst{animation:tap-response .17s ease-out}.board{background:linear-gradient(90deg,#95ccd90a 1px,transparent 1px),linear-gradient(#95ccd90b 1px,transparent 1px),radial-gradient(ellipse at 50% 0,#31465e,#1b2b46 100%);background-size:calc(100% / 6) 20%,calc(100% / 6) 20%,100% 100%}.board-shell{box-shadow:0 0 0 1px #e2d3da,0 0 0 3px #15294088,0 8px 28px #12203966;border-color:#85cac7}.board-shell:before{box-shadow:inset 0 0 12px #111e3655}.tile svg{filter:drop-shadow(0 4px 3px #0813247a) saturate(1.04);width:96%;height:96%;left:2%;top:2%}.tile.winning svg{filter:drop-shadow(0 0 7px #fff4bf66)}.tile[data-symbol='3'].winning svg{animation:watch-glint .48s ease-out}.tile[data-symbol='4'].winning svg{animation:symbol-hop .48s ease-out}.tile[data-symbol='1'].winning svg{animation:glasses-tilt .48s ease-out}.tile[data-symbol='0'].winning svg{animation:tape-bop .48s ease-out}.tile .sun-number{background:#112b39dd;border:1px solid #92fff580;padding:2px 5px;border-radius:20px;font-size:clamp(17px,2.2vw,29px)}.tile .bonus-label{background:#ffdc86;letter-spacing:.3px}.top-actions .balance{background:linear-gradient(145deg,#203a54f2,#162840f2);border-color:#a8ece0a6}.balance strong{font-variant-numeric:tabular-nums;color:#ffefd5;letter-spacing:.1px}.balance small{color:#aad9de}.controls{background:linear-gradient(120deg,#17304cee,#282d4bee);border-color:#90c9d27d;box-shadow:0 5px 20px #0a1b3744}.buy-ticket{background:linear-gradient(145deg,#b8eddb,#83c8be);box-shadow:inset 0 1px #edfff0,0 3px #346772;color:#1a4050}.buy-ticket:hover:not(:disabled){box-shadow:inset 0 1px #edfff0,0 3px #346772,0 0 15px #9ffff333}.marquee{font-size:10px;letter-spacing:.4px}.combo-panel{background:#152b43ed;border-color:#7ca0b977}.combo-panel button{font-size:10px;letter-spacing:0;min-height:34px}.cabinet-foot{font-size:10px;line-height:1.4}.round-counter{font-size:9px}.round-total small{font-size:9px;letter-spacing:.3px;line-height:1.25}.round-total>span{font-size:11px}.receipt-line{font-size:10px;min-height:30px;border-color:#88afa644;background:#152b40eb}.receipt-line>i{font-size:9px}.stake-top label{font-size:9px}.stake-top button{font-size:8px;min-height:27px;padding:5px 7px}.secondary-button:not(.buy-ticket){font-size:10px}.round-tools button{min-height:32px!important;font-size:10px!important}.fineprint{font-size:8px;letter-spacing:0}.city-sign,.radio-sticker{opacity:.6}.feature-strip{font-size:9px;height:22px!important;letter-spacing:.3px}.feature-strip button{font-size:9px!important}.quiet-city .police-reflections,.quiet-city .searchlight,.quiet-city .floating-dust,.quiet-city .ocean-shimmer,.quiet-city .driveby,.quiet-city .cinematic-police{display:none}.quiet-city .backdrop:before,.quiet-city .backdrop:after,.quiet-city .equalizer i,.quiet-city .poster-siren,.quiet-city .board-shell:before{animation:none!important}.mode-banner{font-size:9px;max-width:90%;background:#f5d9a6;color:#173349;white-space:normal}.preview-mode .balance small:after{font-size:8px}.preview-mode #round-label{font-size:8px}.preview-mode #net{font-size:10px}
#sound-dialog{width:min(490px,calc(100% - 24px));padding:25px}#sound-dialog>label{font-size:13px}#sound-dialog input[type=range]{accent-color:#19877f}.settings-toggles{margin-top:16px;border-top:1px solid #96a89e}.settings-toggles>label{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:12px 0;border-bottom:1px solid #c3c5b7;margin:0!important}.settings-toggles b,.settings-toggles small{display:block}.settings-toggles b{font-size:13px}.settings-toggles small{font-size:11px;line-height:1.4;margin-top:3px;color:#5b7174}.settings-toggles input{appearance:none;position:relative;width:42px;height:25px;border-radius:20px;background:#a8b7b3;border:1px solid #8b9e99;flex:0 0 42px;cursor:pointer;margin:0}.settings-toggles input:before{content:'';position:absolute;width:17px;height:17px;background:#fffbef;top:3px;left:3px;border-radius:50%;box-shadow:0 2px 3px #234a4933;transition:transform .14s}.settings-toggles input:checked{background:#247f78}.settings-toggles input:checked:before{transform:translateX(17px)}.settings-links{display:grid;gap:8px;margin-top:16px}.settings-links button{min-height:43px;border:1px solid #72998e;background:#d8e6d9;color:#244c56;font-size:11px;font-weight:850;border-radius:7px}.settings-links button+button{background:transparent}.sound-dialog>p{font-size:12px}
#buy-dialog{width:min(680px,calc(100% - 24px));padding:26px}.purchase-dialog .getaway-ticket{display:none}.purchase-dialog h2{margin:14px 0}.bonus-picker,#bonus-kind{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;padding:0;border:0}.bonus-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 16px}.bonus-choices>button{padding:0 0 12px;text-align:left;border:2px solid #869e98;border-radius:9px;background:#dce4d8;color:#274753;overflow:hidden;box-shadow:none}.bonus-choices>button[aria-pressed=true]{border-color:#19857a;background:#c9e7d5;box-shadow:0 0 0 2px #19857a25}.bonus-choices>button[data-bonus-choice=super][aria-pressed=true]{border-color:#aa784a;background:#efe0b9;box-shadow:0 0 0 2px #ba915733}.choice-art{height:135px;display:block;position:relative;background:linear-gradient(90deg,#172b4799,transparent),url('assets/getaway-v9.webp') 70% 45%/cover;padding:12px;color:#fff2dc}.choice-art b{font:italic 24px Impact,sans-serif;text-shadow:2px 3px #be497c;white-space:nowrap}.choice-art em{position:absolute;bottom:10px;left:12px;font:italic 58px/.9 Impact,sans-serif;text-shadow:2px 3px #283e60}.bonus-choices>button[data-bonus-choice=super] .choice-art{background-image:linear-gradient(90deg,#3c29458c,transparent),url('assets/neon-boulevard-v9.webp');background-position:76% center;color:#ffeab0}.bonus-choices strong,.bonus-choices small{display:block;margin:10px 12px 0;font-size:12px}.bonus-choices small{font-size:10px;margin-top:4px}.dialog-subtitle{font-size:12px;margin:8px 0}.purchase-facts{margin:14px 0}.purchase-facts>div{padding:10px 0}.purchase-note{font-size:11px;line-height:1.5}.cancel-buy{background:transparent;border:1px solid #94aaa0;min-height:40px;color:#33525a;border-radius:7px;width:100%;margin-top:9px;font-size:11px}.text-action{min-height:40px;font-size:11px}#confirm-buy{min-height:47px;font-size:13px}.super-ticket #buy-title{color:#734c31}.cinematic-copy button{min-height:44px}.getaway-cinematic .cinematic-copy small{font-size:10px}.radio-line{font-size:10px}.bonus-sign small{font-size:8px;letter-spacing:.3px}.bonus-sign>b{font-size:10px;letter-spacing:0}.sun-meter small{font-size:8px;letter-spacing:0}.pursuit-hud{height:29px;font-size:10px}.pursuit-hud>span{font-size:9px}
@media(min-width:701px){.game{min-height:650px;padding:12px 24px 9px;gap:7px}.topbar{min-height:74px}.arena{gap:22px}.cabinet{aspect-ratio:auto;width:100%}.controls{min-height:92px;grid-template-columns:190px minmax(200px,1fr)220px;gap:22px}.feature-rail{gap:8px!important}.round-total strong{font-size:33px}.brand small{font-size:8px}.round-tools{gap:8px}.feature-strip{height:20px!important}.feature-strip>span{font-size:8px}.radio-sticker{display:none}.getaway-poster{flex:0 1 88px}.city-sign{display:none}.feature-rail .bonus-sign{min-height:96px}.rail-heading{font-size:30px}.rail-heading>span{font-size:8px}.balance small{font-size:9px}.balance strong{font-size:25px}}
@media(max-width:700px){.game{height:100svh;min-height:670px;padding:10px;gap:7px}.topbar{min-height:66px;gap:8px}.brand span{font-size:12px;letter-spacing:2px}.brand strong{font-size:37px}.brand small{font-size:6px;letter-spacing:0;max-width:100px;line-height:1.4;margin-top:6px}.top-actions{gap:5px}#info{display:none}.top-actions .icon-button{width:38px;height:42px;border-radius:10px}.top-actions #audio-settings{display:grid}.balance{padding:8px!important;gap:6px;min-width:128px}.balance small{font-size:8px;letter-spacing:0}.balance strong{font-size:20px}.wallet-add{width:28px;height:33px}.marquee{font-size:9px;min-height:23px;height:23px;padding:0 3px}.marquee:before{display:none}.board-shell{border-width:3px}.cabinet{min-height:250px}.board{inset:3px}.tile svg{width:99%;height:99%;left:.5%;top:.5%}.tile .bonus-label{font-size:8px;padding:1px 3px}.tile .sun-number{font-size:18px;padding:1px 4px}.position-mark{font-size:9px;width:15px;height:15px}.combo-panel{min-height:36px;padding:4px 6px;margin-top:5px;gap:6px}.combo-panel #combo-content{font-size:10px;gap:5px}.combo-panel #combo-content>b{font-size:21px}.combo-panel button{font-size:9px;min-height:30px;padding:5px 7px}.match-chip{gap:3px}.match-chip svg{width:24px;height:25px}.match-chip strong,.match-chip>span{font-size:9px}.cabinet-foot{font-size:8px;min-height:24px;padding-top:5px}.round-counter{font-size:8px}.feature-rail{height:76px;grid-template-columns:1fr 66px 1fr;gap:7px!important}.bonus-sign{height:72px!important;min-height:72px!important;padding:6px!important;grid-template-columns:30px 1fr!important;grid-template-rows:13px 23px 19px!important;gap:0 4px!important}.bonus-medal{width:30px!important;height:44px!important}.bonus-sign>small{font-size:7px!important;line-height:1.2}.bonus-sign>strong{font-size:25px!important}.bonus-sign>b{font-size:8px!important;line-height:1.1}.sun-meter{height:72px}.sun-meter>svg{width:65px;height:65px}.sun-meter>strong{top:21px;font-size:18px}.sun-meter small{font-size:7px;line-height:1.15}.round-total small{font-size:7px;line-height:1.25}.round-total strong{font-size:26px}.round-total>span{font-size:10px}.controls{grid-template-columns:145px minmax(0,1fr);gap:9px;padding:9px;min-height:137px}.stake-top{gap:4px;margin-bottom:4px}.stake-top label{font-size:8px;letter-spacing:0}.stake-top button{font-size:8px;padding:3px 6px;min-height:24px}.stake-input{grid-template-columns:31px minmax(0,1fr)31px;gap:3px}.stake-input button,.stake-input select{height:38px}.stake-input select{font-size:17px;padding-inline:0}.spin{min-height:70px;font-size:19px;gap:6px}.spin>svg{width:28px;height:28px}.secondary{grid-template-columns:1fr 83px;gap:8px}.buy-ticket{min-height:46px;font-size:11px;gap:6px}.buy-ticket small{font-size:9px}.buy-ticket svg{height:34px;width:34px}.round-tools{gap:2px}.round-tools button{font-size:9px!important;min-height:25px!important;padding:3px!important}.receipt-line{min-height:23px;font-size:9px;gap:7px}.receipt-line>i{font-size:8px}.feature-strip{height:22px!important;min-height:22px}.feature-strip>span,.feature-strip>i{display:none}.feature-strip button{font-size:9px!important;min-height:26px}.fineprint{font-size:7px;gap:8px;min-height:12px}.radio-line{font-size:9px;min-height:23px}.mode-banner{top:77px;font-size:8px;max-width:88%;padding:5px 8px}.bonus-active .mode-banner{top:77px}.preview-mode .balance small:after{font-size:6px;letter-spacing:0}.preview-mode .round-total small{font-size:7px}.preview-mode #net{font-size:8px}.pursuit-hud{height:25px;font-size:9px}.pursuit-hud>span{font-size:8px}.purchase-dialog#buy-dialog{padding:22px 18px}.bonus-choices{gap:8px;margin:14px 0}.choice-art{height:100px;padding:9px}.choice-art b{font-size:17px}.bonus-choices [data-bonus-choice=super] .choice-art b{font-size:14px}.choice-art em{font-size:45px;bottom:8px;left:9px}.bonus-choices strong{font-size:10px;margin:9px 8px 0;min-height:26px}.bonus-choices small{font-size:9px;margin:4px 8px 0;min-height:25px}.purchase-facts>div{font-size:12px;padding:8px 0}.dialog-subtitle{font-size:11px}.purchase-note{font-size:10px}.dialog-error{font-size:11px}.getaway-cinematic .cinematic-copy small{font-size:9px}.feature-rail .getaway-poster,.city-sign,.radio-sticker{display:none}}
@media(max-width:370px){.game{padding:8px;gap:6px}.brand strong{font-size:31px}.brand span{font-size:10px}.brand small{font-size:5px;max-width:83px}.top-actions .icon-button{width:32px;height:38px}.top-actions{gap:4px}.balance{min-width:119px;padding:7px!important}.balance strong{font-size:18px}.balance small{font-size:7px}.controls{grid-template-columns:130px minmax(0,1fr);gap:8px;padding:8px}.spin{font-size:16px}.spin>svg{width:25px;height:25px}.stake-top button{font-size:7px}.bonus-sign>small{font-size:6px!important}.bonus-sign>b{font-size:7px!important}.round-total strong{font-size:23px}.feature-strip button{font-size:8px!important}.fineprint{font-size:6px}.choice-art b{font-size:15px}.bonus-choices [data-bonus-choice=super] .choice-art b{font-size:12px}}
@media(max-height:760px) and (max-width:700px){.game{min-height:640px;gap:5px}.brand strong{font-size:31px}.topbar{min-height:57px}.feature-strip{display:none}.fineprint{font-size:6px}.cabinet{min-height:235px}.controls{min-height:123px;gap:6px;padding:7px}.spin{min-height:62px}.secondary .buy-ticket{min-height:42px}.feature-rail{height:70px}.bonus-sign{height:66px!important;min-height:66px!important}.sun-meter{height:66px}.receipt-line{min-height:22px}.stake-input button,.stake-input select{height:34px}.stake-top button{min-height:21px}}
@media(min-width:701px){.arena{width:min(100%,calc((100svh - 300px)*1.2 + 232px));max-width:1020px;grid-template-columns:minmax(0,1fr)210px;gap:22px}.controls{max-width:min(1020px,calc((100svh - 300px)*1.2 + 232px));grid-template-columns:170px minmax(180px,1fr)190px;gap:16px;padding-inline:16px}.stake-top{gap:5px}.stake-top label{font-size:8px}.stake-top button{font-size:7px}.cabinet{aspect-ratio:auto}.spin{font-size:20px}.buy-ticket{font-size:11px}.getaway-poster{flex:0 1 90px}.receipt-line{max-width:1020px;margin-inline:auto}}

/* 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; }

/* GETAWAY / EPILOGUE — original coastal crime key art, v7.
   Final layer, scoped to the bonus result. Outcome and wallet values stay in JS. */

#bonus-result {
  --result-paper: #fff0ce;
  --result-lilac: #e5c8ff;
  --result-ink: #1e1b38;
  --result-coral: #ff8f92;
  --result-art: url('assets/getaway-result-v9.webp'), url('assets/getaway-v9.webp');
  display: none;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto auto auto;
  grid-auto-rows: min-content;
  align-content: start;
  column-gap: 0;
  width: min(980px, calc(100% - 40px));
  max-width: 980px;
  height: fit-content;
  min-height: 548px;
  max-height: calc(100svh - 36px);
  margin: auto;
  padding: 42px 37px 30px 0;
  overflow-x: hidden;
  overflow-y: auto;
  isolation: isolate;
  border: 2px solid #f4d8c5;
  border-radius: 3px;
  background: radial-gradient(ellipse at 96% 6%, #6249657a, transparent 58%),
    linear-gradient(155deg, #272438 33%, #1d203b 68%, #322744);
  color: var(--result-paper);
  box-shadow: 9px 11px 0 #11162e9c, 0 28px 110px #020d24c7;
  text-align: left;
  scrollbar-color: #b58fa9 #28243b;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

#bonus-result[open] {
  display: grid;
  animation: result-poster-arrive .46s cubic-bezier(.15,.8,.25,1) both;
}

#bonus-result::backdrop {
  background: linear-gradient(125deg, #172143ba, #2a1c43b8);
  backdrop-filter: blur(7px) saturate(.88);
}

/* Thin printed edges and one diagonal seam: a film poster, not a settings card. */
#bonus-result:before {
  content: '';
  position: absolute;
  inset: 7px;
  z-index: 4;
  pointer-events: none;
  border: 1px solid #fff2d537;
  border-radius: 0;
  background: linear-gradient(105deg, transparent 55%, #f8d1ff06 75%, transparent);
}

#bonus-result:after {
  content: '';
  position: absolute;
  z-index: 1;
  width: 3px;
  top: -20px;
  bottom: -20px;
  left: calc(52.4% - 27px);
  transform: rotate(3deg);
  background: linear-gradient(transparent, #f6c2db7d 20%, #cfb7e69c 72%, transparent);
  box-shadow: 4px 0 #f5c7e312;
  pointer-events: none;
}

#bonus-result > :not(.result-visual) {
  grid-column: 2;
  z-index: 2;
  position: relative;
  min-width: 0;
  margin-left: 23px;
}

/* The original key art is deliberately the largest object in the scene. */
#bonus-result .result-visual {
  display: block;
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  width: 100%;
  height: 100%;
  min-height: 548px;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background-color: #28344d;
  background-image: var(--result-art);
  background-size: cover, cover;
  background-position: center 35%, 75% center;
  background-repeat: no-repeat;
  clip-path: none;
}

#bonus-result .result-visual:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, transparent 0%, transparent 31%, #251b3659 46%, #241936d6 62%, #251b3bec 100%),
    linear-gradient(180deg, transparent 48%, #211a3821 68%, #141c39a8 100%);
  pointer-events: none;
}

#bonus-result .result-visual:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  background: linear-gradient(110deg, transparent 25%, #faefff1f 46%, transparent 63%);
  transform: translateX(-120%);
  pointer-events: none;
}

#bonus-result .result-visual > svg,
#bonus-result .result-orbit {
  display: none;
  animation: none;
}

#bonus-result .result-art-title {
  position: absolute;
  left: 29px;
  width: 43%;
  right: auto;
  bottom: 29px;
  z-index: 3;
  transform: rotate(-4deg);
  transform-origin: left bottom;
  color: var(--result-paper);
  text-shadow: 0 3px 8px #0d163c;
}

#bonus-result .result-art-title span {
  display: block;
  margin: 0 0 7px 4px;
  font: 800 10px/1.2 var(--finish-body, 'Avenir Next', sans-serif);
  letter-spacing: 3.1px;
  color: #f5d9e8;
}

#bonus-result .result-art-title b {
  display: block;
  font: 84px/.9 var(--finish-display, Impact, sans-serif);
  letter-spacing: -1px;
  color: #fff0d0;
  -webkit-text-stroke: .4px #fff2cd;
  text-shadow: 2px 3px #714966, 5px 6px #151d36;
  transform: skewX(-8deg);
  transform-origin: left bottom;
}

#bonus-result .result-art-title em {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 15px 0 0 4px;
  padding: 6px 10px;
  border-top: 1px solid #eab0e5a8;
  border-bottom: 1px solid #eab0e558;
  font: 750 8px/1.3 var(--finish-body, 'Avenir Next', sans-serif);
  letter-spacing: 1.8px;
  color: #e4d7f0;
  background: #2f23465e;
}
#bonus-result[data-mode=super] .result-art-title b { font-size: 70px; }

/* Status and accounting stay part of the image hierarchy, not three little cards. */
#bonus-result #result-kicker {
  display: block;
  align-self: start;
  width: fit-content;
  max-width: calc(100% - 23px);
  margin-top: 0;
  margin-bottom: 21px;
  padding: 7px 11px;
  border: 1px solid #eccdea9c;
  border-radius: 0;
  background: #583f6280;
  color: #f4dff8;
  font: 800 9px/1.3 var(--finish-body, 'Avenir Next', sans-serif);
  letter-spacing: 1.1px;
  transform: rotate(-2deg);
  box-shadow: 3px 3px #0b1b336e;
}

#bonus-result #result-title {
  align-self: start;
  margin-top: 0;
  margin-bottom: 23px;
  color: #f7e8cf;
  font: 43px/.97 var(--finish-display, Impact, sans-serif);
  letter-spacing: .5px;
  text-wrap: balance;
  text-shadow: 2px 3px #5a425d;
  transform: skewX(-4deg);
  transform-origin: left center;
}

#bonus-result #result-caption {
  margin-top: 0;
  margin-bottom: 9px;
  max-width: 100%;
  font: 800 9px/1.55 var(--finish-body, 'Avenir Next', sans-serif);
  letter-spacing: 1.7px;
  color: #ceb9db;
}

#bonus-result #result-amount {
  display: block;
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 22px;
  padding: 0 0 5px;
  color: #fff0c6;
  font: 96px/.98 var(--finish-display, Impact, sans-serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: -1.8px;
  white-space: nowrap;
  text-shadow: 2px 3px #b77d926b, 4px 6px #0c19399c;
  transform: skewX(-4deg);
  transform-origin: left center;
}

#bonus-result .result-facts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  margin-top: 0;
  margin-bottom: 24px;
  padding: 15px 0;
  border: 0;
  border-top: 1px solid #dcc7d450;
  border-bottom: 1px solid #dcc7d435;
  border-radius: 0;
  background: transparent;
  color: #f0dccd;
}

#bonus-result .result-facts > div {
  padding: 0 11px;
  gap: 8px;
  text-align: left;
  border-right: 1px solid #dcc7d42d;
}

#bonus-result .result-facts > div:first-child { padding-left: 0; }
#bonus-result .result-facts > div:last-child { padding-right: 0; border-right: 0; }
#bonus-result .result-facts span { color: #c5afce; font-size: 8px; font-weight: 650; line-height: 1.35; letter-spacing: .4px; }
#bonus-result .result-facts b { color: #f3e3cd; font-size: 18px; font-weight: 800; line-height: 1.15; letter-spacing: -.35px; }

#bonus-result #result-continue {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  width: calc(100% - 23px);
  min-height: 56px;
  margin-top: 0;
  margin-bottom: 18px;
  padding: 13px 18px;
  border: 1px solid #fff5db;
  border-radius: 1px;
  background: #f6e4bf;
  color: #28213f;
  box-shadow: 5px 5px #9a6696, inset 0 0 0 2px #d8b6b030;
  font: 900 11px/1.4 var(--finish-body, 'Avenir Next', sans-serif);
  letter-spacing: 1.1px;
  text-align: left;
  transform: skewX(-4deg);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

#bonus-result #result-continue > span:not(.control-ripple) { font-size: 26px; line-height: 1; font-weight: 500; color: #4c3658; }
#bonus-result #result-continue:hover { transform: skewX(-4deg) translateY(-2px); background: #fff3d7; box-shadow: 5px 7px #b47aa8; }
#bonus-result #result-continue:active { transform: skewX(-4deg) translate(3px, 3px); box-shadow: 2px 2px #9a6696; }
#bonus-result #result-continue:focus-visible { outline: 3px solid #f0c7ff; outline-offset: 7px; }

#bonus-result #result-note {
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font: 550 10px/1.6 var(--finish-body, 'Avenir Next', sans-serif);
  color: #bca9c9;
  letter-spacing: .05px;
}

#bonus-result #result-close {
  position: absolute;
  z-index: 10;
  top: 14px;
  right: 15px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid #eadbe780;
  border-radius: 1px;
  background: #211f3b9e;
  color: #f7e6d7;
  box-shadow: 2px 2px #13203970;
  font: 500 23px/1 var(--finish-body, 'Avenir Next', sans-serif);
}
#bonus-result #result-close:hover { background: #674b69; border-color: #f7e4db; transform: translateY(-1px); }
#bonus-result #result-close:focus-visible { outline: 3px solid #f0c7ff; outline-offset: 4px; }

/* Preview is explicit, with one truthful statement instead of three zero values. */
#bonus-result[data-outcome=preview] { background: radial-gradient(ellipse at 95% 10%, #8a547f43, transparent 62%), linear-gradient(155deg, #30243e 33%, #25213e 68%, #3d294a); }
#bonus-result[data-outcome=preview] #result-kicker { color: #fff0cf; border-color: #f2d2a999; background: #7b574449; }
#bonus-result[data-outcome=preview] #result-title { color: #f7dfec; }
#bonus-result[data-outcome=preview] #result-caption { color: #f0c49b; font-size: 9px; letter-spacing: 1.15px; }
#bonus-result[data-outcome=preview] #result-amount { color: #e8ccfa; text-shadow: 2px 3px #a266aa66, 4px 6px #0e14346e; }
#bonus-result[data-outcome=preview] .result-facts { display: none; }
#bonus-result[data-outcome=preview] #result-note {
  grid-row: 5;
  margin-top: 0;
  margin-bottom: 29px;
  padding: 13px 0 13px 13px;
  border-left: 3px solid #dba8d9;
  background: linear-gradient(90deg, #c399d312, transparent 85%);
  color: #e0cadd;
  font-size: 11px;
  line-height: 1.6;
}
#bonus-result[data-outcome=preview] #result-continue { grid-row: 6; align-self: end; }

/* A paid profit has a short highlight. Neutral and losing results keep calm typography. */
#bonus-result[data-outcome=gain] {
  border-color: #ffe5b7;
  background: radial-gradient(ellipse at 92% 4%, #925a6c42, transparent 62%), linear-gradient(155deg, #302439, #24213d 64%, #3c2949);
}
#bonus-result[data-outcome=gain] #result-kicker { color: #f3ddf7; }
#bonus-result[data-outcome=gain] #result-amount { color: #fff0bd; text-shadow: 2px 3px #c890a579, 4px 6px #19173899; }
#bonus-result[data-outcome=gain] #result-net { color: #e9d7fa; }
#bonus-result[data-outcome=gain][open] .result-visual:after { animation: result-film-sweep 1.35s .2s ease-out both; }
#bonus-result[data-outcome=gain][open] #result-amount { animation: result-score-focus .75s .13s cubic-bezier(.15,.8,.3,1) both; }
#bonus-result:is([data-outcome=loss],[data-outcome=even]) #result-amount { color: #ece2d7; text-shadow: 2px 3px #634a6673; }
#bonus-result:is([data-outcome=loss],[data-outcome=even]) #result-title { text-shadow: 2px 3px #443149; }
#bonus-result:is([data-outcome=loss],[data-outcome=even],[data-outcome=preview]) .result-visual:after { animation: none; display: none; }
#bonus-result:is([data-outcome=loss],[data-outcome=even],[data-outcome=preview]) #result-amount { animation: none; }

#bonus-result[open] #result-kicker { animation: result-type-arrive .45s .12s ease-out both; }
#bonus-result[open] #result-title { animation: result-title-arrive .5s .17s ease-out both; }
#bonus-result[open] #result-continue { animation: result-button-arrive .5s .25s ease-out both; }

@keyframes result-poster-arrive {
  from { opacity: 0; transform: translateY(20px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes result-type-arrive {
  from { opacity: 0; transform: rotate(-2deg) translateX(12px); }
  to { opacity: 1; transform: rotate(-2deg) translateX(0); }
}
@keyframes result-title-arrive {
  from { opacity: 0; transform: skewX(-4deg) translateY(10px); }
  to { opacity: 1; transform: skewX(-4deg) translateY(0); }
}
@keyframes result-button-arrive {
  from { opacity: 0; transform: skewX(-4deg) translateY(8px); }
  to { opacity: 1; transform: skewX(-4deg) translateY(0); }
}
@keyframes result-film-sweep {
  0% { opacity: 0; transform: translateX(-110%); }
  35% { opacity: .75; }
  100% { opacity: 0; transform: translateX(110%); }
}
@keyframes result-score-focus {
  from { opacity: 0; transform: skewX(-4deg) translateY(8px) scale(.94); }
  to { opacity: 1; transform: skewX(-4deg) translateY(0) scale(1); }
}

@media (min-width: 701px) and (max-height: 650px) {
  #bonus-result { min-height: 478px; padding-top: 27px; padding-bottom: 24px; width: min(940px, calc(100% - 34px)); max-height: calc(100svh - 26px); }
  #bonus-result .result-visual { min-height: 478px; }
  #bonus-result #result-kicker { margin-bottom: 17px; }
  #bonus-result #result-title { font-size: 39px; margin-bottom: 18px; }
  #bonus-result #result-amount { font-size: 84px; margin-bottom: 18px; }
  #bonus-result .result-facts { padding-block: 12px; margin-bottom: 20px; }
  #bonus-result #result-continue { min-height: 51px; margin-bottom: 14px; }
  #bonus-result .result-art-title b { font-size: 77px; }
}

@media (min-width: 701px) and (max-width: 900px) {
  #bonus-result { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-right: 27px; }
  #bonus-result .result-visual { width: 100%; background-position: 38% 35%, 75% center; }
  #bonus-result:after { left: calc(50% - 23px); }
  #bonus-result > :not(.result-visual) { margin-left: 17px; }
  #bonus-result #result-title { font-size: 37px; }
  #bonus-result #result-amount { font-size: 82px; }
  #bonus-result #result-kicker { font-size: 8px; letter-spacing: .8px; max-width: calc(100% - 17px); }
  #bonus-result #result-continue { width: calc(100% - 17px); font-size: 10px; }
  #bonus-result .result-art-title { left: 24px; right: auto; width: 43%; }
  #bonus-result .result-art-title b { font-size: 67px; }
  #bonus-result .result-art-title span { font-size: 8px; letter-spacing: 2.4px; }
  #bonus-result .result-art-title em { font-size: 7px; letter-spacing: 1.2px; }
}

/* Phones use a full-width comic panel over a compact, readable score sheet. */
@media (max-width: 700px) {
  #bonus-result {
    display: none;
    width: min(460px, calc(100% - 20px));
    max-width: 460px;
    min-height: 0;
    max-height: calc(100svh - 24px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    padding: 0 22px 19px;
    border: 2px solid #f3d7c8;
    border-radius: 2px;
    box-shadow: 5px 7px #15132e7a, 0 20px 70px #0b1234b8;
    background: radial-gradient(ellipse at 100% 33%, #74507945, transparent 66%), linear-gradient(155deg, #272438, #28213e 76%, #3a2846);
  }
  #bonus-result[open] { display: grid; }
  #bonus-result:before { inset: 5px; border-color: #fff1da29; }
  #bonus-result:after { display: none; }
  #bonus-result > :not(.result-visual) { grid-column: 1; margin-left: 0; }
  #bonus-result .result-visual {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    z-index: 0;
    inset: auto;
    width: calc(100% + 44px);
    height: clamp(190px, 53vw, 220px);
    min-height: 0;
    margin: 0 -22px 13px;
    border-bottom: 2px solid #e9bfd8;
    background-size: cover, cover;
    background-position: 34% 48%, 75% 54%;
    clip-path: polygon(0 0, 100% 0, 100% 91%, 0 100%);
  }
  #bonus-result .result-visual:before { background: linear-gradient(180deg, #15244403, transparent 28%, #291c3338 66%, #242039e6); }
  #bonus-result .result-art-title { left: 21px; right: 20px; width: auto; bottom: 26px; }
  #bonus-result .result-art-title span { font-size: 8px; margin-left: 3px; margin-bottom: 6px; letter-spacing: 2.4px; }
  #bonus-result .result-art-title b { font-size: 65px; line-height: .9; letter-spacing: -.4px; text-shadow: 2px 3px #885271, 4px 5px #16213d; }
  #bonus-result[data-mode=super] .result-art-title b { font-size: clamp(42px, 12vw, 54px); white-space: nowrap; }
  #bonus-result .result-art-title em { display: none; }
  #bonus-result #result-kicker {
    position: absolute;
    top: 17px;
    right: 53px;
    max-width: calc(100% - 86px);
    margin: 0;
    padding: 6px 8px;
    font-size: 8px;
    letter-spacing: .4px;
    background: #36293bc2;
    backdrop-filter: blur(4px);
  }
  #bonus-result #result-title { grid-row: 3; font-size: 32px; line-height: .99; margin-bottom: 12px; letter-spacing: .35px; text-wrap: balance; }
  #bonus-result #result-caption { grid-row: 4; font-size: 9px; line-height: 1.5; margin-bottom: 5px; letter-spacing: 1px; }
  #bonus-result #result-amount { grid-row: 5; font-size: clamp(65px, 19vw, 81px); line-height: 1; letter-spacing: -1.2px; margin-bottom: 12px; padding-bottom: 0; }
  #bonus-result .result-facts { grid-row: 6; margin-bottom: 20px; padding-block: 12px; }
  #bonus-result .result-facts > div { padding-inline: 9px; gap: 7px; }
  #bonus-result .result-facts > div:first-child { padding-left: 0; }
  #bonus-result .result-facts > div:last-child { padding-right: 0; }
  #bonus-result .result-facts span { font-size: 7px; letter-spacing: .2px; }
  #bonus-result .result-facts b { font-size: 16px; letter-spacing: -.3px; }
  #bonus-result #result-continue { grid-row: 7; width: 100%; min-height: 50px; padding: 11px 15px; margin-bottom: 16px; font-size: 10px; letter-spacing: .65px; }
  #bonus-result #result-continue > span:not(.control-ripple) { font-size: 23px; }
  #bonus-result #result-note { grid-row: 8; font-size: 11px; line-height: 1.55; }
  #bonus-result[data-outcome=preview] #result-caption { font-size: 9px; letter-spacing: .65px; }
  #bonus-result[data-outcome=preview] #result-note { grid-row: 6; margin-bottom: 17px; padding: 8px 0 8px 12px; font-size: 12px; line-height: 1.55; }
  #bonus-result[data-outcome=preview] #result-continue { grid-row: 7; margin-bottom: 4px; }
}

@media (max-width: 370px) {
  #bonus-result { width: calc(100% - 16px); max-height: calc(100svh - 18px); padding: 0 18px 19px; }
  #bonus-result .result-visual { width: calc(100% + 36px); height: 190px; margin-inline: -18px; margin-bottom: 13px; }
  #bonus-result .result-art-title { left: 18px; bottom: 22px; }
  #bonus-result .result-art-title b { font-size: 58px; }
  #bonus-result .result-art-title span { font-size: 7px; letter-spacing: 2px; }
  #bonus-result #result-kicker { font-size: 7px; padding: 6px 8px; margin: 0; letter-spacing: .55px; }
  #bonus-result #result-title { font-size: 29px; margin-bottom: 12px; }
  #bonus-result #result-caption { font-size: 9px; letter-spacing: .65px; }
  #bonus-result #result-amount { font-size: 65px; margin-bottom: 12px; }
  #bonus-result .result-facts b { font-size: 14px; }
  #bonus-result .result-facts span { font-size: 6.8px; }
  #bonus-result #result-continue { font-size: 9px; min-height: 48px; padding-inline: 13px; }
  #bonus-result[data-outcome=preview] #result-caption { font-size: 9px; }
}

@media (max-width: 700px) and (max-height: 650px) {
  #bonus-result .result-visual { height: 178px; }
  #bonus-result .result-art-title b { font-size: 58px; }
  #bonus-result #result-title { font-size: 29px; }
  #bonus-result #result-amount { font-size: 65px; }
}

.no-motion #bonus-result,
.no-motion #bonus-result *,
.no-motion #bonus-result:before,
.no-motion #bonus-result:after,
.no-motion #bonus-result .result-visual:before,
.no-motion #bonus-result .result-visual:after {
  animation: none !important;
  transition: none !important;
}
.no-motion #bonus-result .result-visual:after { display: none; }
@media (prefers-reduced-motion: reduce) {
  #bonus-result, #bonus-result *, #bonus-result:before, #bonus-result:after,
  #bonus-result .result-visual:before, #bonus-result .result-visual:after {
    animation: none !important;
    transition: none !important;
  }
  #bonus-result .result-visual:after { display: none; }
}

/* Long real catalog payouts remain readable at phone widths. */
@media (max-width:700px){
 #bonus-result[data-large-amount=true] #result-amount{font-size:clamp(56px,16vw,76px)}
 #bonus-result:not([data-outcome=preview]) .result-facts{display:flex;flex-direction:column;gap:7px;padding-block:11px;margin-bottom:16px}
 #bonus-result .result-facts>div{flex-direction:row;justify-content:space-between;align-items:baseline;padding:0;border:0;gap:12px}
 #bonus-result .result-facts span{font-size:10px;letter-spacing:.1px}
 #bonus-result .result-facts b{font-size:15px;white-space:nowrap}
 #bonus-result #result-close{top:10px;right:10px;width:44px;height:44px}
 #bonus-result #result-kicker{right:62px;max-width:calc(100% - 92px)}
}

/* COASTLINE HEAT v8 — chrome, coral, lilac and warm paper.
   UI surround only. The city backdrop, game geometry, symbols and v7 result poster
   retain their existing art and behaviour. Load after result.css. */

:root {
  --surround-paper: #fff0d5;
  --surround-muted: #cbbbd2;
  --surround-lilac: #dfc7fb;
  --surround-coral: #ff9b9d;
  --surround-ink: #29213e;
  --surround-line: #e7cfe949;
  --surround-display: Impact, 'Arial Narrow', sans-serif;
}

/* Header hardware: warm chrome balance, jewel-toned switches. */
.top-actions .icon-button {
  border: 1px solid #efd9e68c;
  border-radius: 7px;
  color: #ffeed8;
  background: linear-gradient(145deg, #64536bdd, #302844ed 74%);
  box-shadow: inset 0 1px #fff4f12b, 0 3px 0 #262038, 0 5px 13px #1b173939;
}
.top-actions .icon-button:hover:not(:disabled) {
  border-color: #f6e4fa;
  color: #fff6e1;
  background: linear-gradient(145deg, #856986, #443255);
  box-shadow: inset 0 1px #fff4f14d, 0 3px #262038, 0 6px 17px #1a133e4d;
  transform: translateY(-1px);
}
.top-actions .icon-button:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 5px #171d3733, 0 1px #262038; }
.top-actions .icon-button[aria-pressed=true] { background: linear-gradient(150deg, #e7cbeb, #bc9bcf); border-color: #fff1f0; color: #342846; }
.top-actions .balance {
  border: 1px solid #fff0d9;
  border-radius: 8px;
  background: linear-gradient(155deg, #fff0d9 0%, #ead7d5 58%, #d7c1d5 100%);
  box-shadow: inset 0 1px #fffbed, inset 0 -2px #9370872b, 0 3px 0 #785e73, 0 6px 18px #14193642;
  color: #332c44;
}
.balance small { color: #685268; font-size: 8px; font-weight: 850; letter-spacing: 1.2px; }
.balance strong { color: #302c42; text-shadow: 0 1px #fff5e78c; font-weight: 850; }
.wallet-add {
  color: #34223f;
  background: linear-gradient(145deg, #ffb9b6, #ee90a0);
  border: 1px solid #ffe8dc;
  border-radius: 5px;
  box-shadow: 0 2px #a76781, inset 0 1px #fff0dc80;
}
.wallet-add:hover:not(:disabled) { color: #251d34; background: #ffd1be; box-shadow: 0 2px #a76781, inset 0 1px #fff8db; transform: translateY(-1px); }
.wallet-add:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.preview-mode .balance { border-color: #ffe6b5; box-shadow: inset 0 1px #fffbed, 0 3px #8f738c, 0 6px 18px #14193642; }
.preview-mode .balance small:after { color: #795274; }

/* A tactile console, with one confident coral spin action. */
.controls {
  border-color: #e4c8e394;
  border-radius: 9px;
  background: linear-gradient(125deg, #413650f5, #2d2945f5 53%, #3e2c4df5);
  box-shadow: inset 0 1px #ffe9ef24, inset 0 -1px #b69cc02e, 0 7px 22px #1b153b4d;
}
.stake-top label { color: #e0cddd; font-weight: 750; }
.stake-top button {
  border-color: #ddbfde61;
  border-radius: 3px;
  background: #27233ce0;
  color: #d4bddf;
  box-shadow: inset 0 1px #e4d5ee0a;
}
.stake-top button:hover:not(:disabled) { background: #4b3759; border-color: #e1c0f0a1; color: #fff0d6; }
.stake-top button[aria-pressed=true] { background: #d8bce8; border-color: #fbe3ec; color: #39283f; }
.stake-input button, .stake-input select {
  border-color: #d9bdd777;
  border-radius: 5px;
  background: linear-gradient(#54435e, #372d49);
  color: #fff0d4;
  box-shadow: inset 0 1px #f3e1e422, 0 2px #242038;
}
.stake-input select { background: #251f39; color: #f7e8cd; font-weight: 850; }
.stake-input button:hover:not(:disabled) { background: linear-gradient(#79607c, #54405f); border-color: #f7dbed; }
.stake-input button:active:not(:disabled) { background: #30243f; box-shadow: inset 0 2px 4px #17152b70; transform: translateY(1px); }
.spin {
  border: 1px solid #ffeed7;
  border-radius: 7px;
  background: linear-gradient(160deg, #ffd0b4 0%, #ff9c98 46%, #ed7f9a 100%);
  color: #3b2343;
  box-shadow: inset 0 2px #fff2ddac, inset 0 -2px #c253752c, 0 4px #964e79, 0 8px 21px #19163359;
  letter-spacing: 1px;
  text-shadow: 0 1px #ffdfbe44;
}
.spin:before { inset: 4px; border-radius: 3px; border: 1px solid #ffecd59c; }
.spin:after { background: linear-gradient(112deg, transparent 18%, #fff7d948, transparent 76%); }
.spin > svg { border-color: #75466a75; color: #493052; background: #ffe6d522; }
.spin:not(:disabled):hover {
  background: linear-gradient(160deg, #ffdfbe, #ffafa3 49%, #fa90a7);
  box-shadow: inset 0 2px #fff7dfd1, 0 4px #964e79, 0 9px 26px #35184363;
  color: #30213b;
  transform: translateY(-1px);
}
.spin:not(:disabled):active, .spin.tap-burst:not(.busy) {
  transform: translateY(3px);
  background: linear-gradient(160deg, #f1aaa2, #e18a9b);
  box-shadow: inset 0 2px 6px #96516b36, 0 1px #864366;
}
.spin.busy, .spin[aria-busy=true] {
  background: linear-gradient(140deg, #85708b, #584b71);
  color: #f5e4ec;
  border-color: #e9d3e9;
  box-shadow: inset 0 1px #f1e5f348, 0 3px #2f2548;
  text-shadow: none;
}
.spin.busy > svg { background: transparent; color: #f5e4ec; border-color: #ead4ec70; }
.spin.busy:before { border-color: #edd8ee3b; }
.spin:disabled:not(.busy) { background: linear-gradient(145deg, #ac99aa, #88758d); border-color: #dcc7d9; color: #443247; box-shadow: 0 3px #443149; opacity: .78; }
.buy-ticket {
  background: linear-gradient(145deg, #f2d9e9, #d8b5eb 48%, #bda6db);
  border-color: #f5e4f5;
  border-radius: 5px;
  color: #382845;
  box-shadow: inset 0 1px #fff5efab, 0 2px #76618d;
}
.buy-ticket small { color: #644f74; font-weight: 800; }
.buy-ticket:hover:not(:disabled) { background: linear-gradient(145deg, #ffeded, #e8cef7 55%, #cfb9eb); box-shadow: inset 0 1px #fff8e8, 0 2px #76618d; transform: translateY(-1px); }
.buy-ticket:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 4px #76577c30; }
.round-tools button { color: #d8c4dc; }
.round-tools button + button { border-color: #d7b9d746 !important; }
.round-tools button:hover:not(:disabled) { color: #fff0d3; background: #e8c9e313; }
.combo-panel {
  border-color: #e5c8e66b;
  border-radius: 6px;
  background: linear-gradient(100deg, #30273fea, #392d4cf0);
  color: #dfcfe3;
  box-shadow: inset 0 1px #ffe6f215;
}
.combo-panel #combo-content > b { color: #ffdfac; }
.combo-panel button { border-color: #e8cdeb80; border-radius: 3px; background: #6d557d; color: #fff0dd; box-shadow: inset 0 1px #fce7fc24; }
.combo-panel button:hover:not(:disabled) { background: #896899; border-color: #ffe1f5; }
.combo-panel #combo-next { background: #e9c7e9; color: #392745; border-color: #f7e5f5; }
.combo-panel .match-chip { background: #1d203acc; }
.receipt-line { color: #dbcee0; background: #29243de8; border-color: #d9bed24d; border-radius: 4px; }
.receipt-line b { color: #f2dbbc; }
.receipt-line > i { color: #d9bef2; }
.receipt-line:hover { background: #443255; border-color: #e7c7ec9c; }
.receipt-line.credited { border-color: #dfbad294; }
.receipt-line.credited b { color: #f2d8f0; }
.radio-line > span { color: #e1c6f7; }
.radio-line > i { background: #d3b4ec; }
.feature-strip button { color: #eed1f4; }
.feature-strip button:hover { color: #ffe7b5; }
.getaway-poster {
  background-image: linear-gradient(90deg, #25233f85, transparent 79%), url('assets/neon-boulevard-v9.webp');
  background-size: 100% 100%, auto 195%;
  background-position: center, 100% 100%;
  background-repeat: no-repeat;
}
.turbo-ring { display: none; }
.sun-meter { border-color: #e5c3e071; background: linear-gradient(135deg, #524065e8, #282744ec); border-radius: 7px; }
.sun-meter > strong { color: #ffecd0; text-shadow: 0 2px #453353; }
.sun-meter small { color: #d2bbdc; }
.round-total { border-color: #e5c8db71; border-radius: 7px; background: linear-gradient(135deg, #45324fef, #25263eed); }
.round-total small { color: #d5bdd4; }
.round-total strong { color: #fff0d0; }
.round-total > span { color: #cdbbd3; }
.round-total.gain, .round-total[data-outcome=gain] { border-color: #e9c7dd9c; background: linear-gradient(135deg, #65445aed, #36314de8); }
.round-total.gain strong, .round-total[data-outcome=gain] strong { color: #ffe3be; }
.feature-rail .bonus-sign { border-color: #f7dcdf; border-radius: 7px; background: linear-gradient(130deg, #ffd4b9, #f6a8b1 63%, #dda7c9) !important; color: #463046; box-shadow: inset 0 1px #fff2de85, 0 3px #67415c38; }
.bonus-active .feature-rail .bonus-sign { background: linear-gradient(130deg, #ffe1ba, #efb0be 62%, #cda4d6) !important; }
.super-active .feature-rail .bonus-sign { background: linear-gradient(130deg, #ffdfab, #edc0b3 62%, #d0b5dd) !important; }

/* Five service windows belong to the same world; the result poster is separate. */
:is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules) {
  height: fit-content;
  border: 1px solid #ecd2e5b8;
  border-radius: 9px;
  background: radial-gradient(ellipse at 93% 0, #ad6f9836, transparent 45%),
    radial-gradient(ellipse at 0 0, #7a638e2b, transparent 52%),
    linear-gradient(145deg, #382c49, #28253e 70%, #352745);
  color: #eee0e5;
  box-shadow: inset 0 1px #ffedf138, 0 0 0 4px #32233c2b, 0 28px 95px #0c102ccc;
  scrollbar-color: #ad8fb5 #2c263f;
}
:is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules)::backdrop {
  background: #1d1b36ae;
  backdrop-filter: blur(6px) saturate(.94);
}
:is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules) h2 {
  font-family: var(--surround-display);
  color: #fff0d5;
  letter-spacing: 1.1px;
  text-shadow: 1px 2px #9b627b6e;
}
:is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules) h3 { color: #f2deeb; }
:is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules) p,
:is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules) li { color: #cfc0d7; }
:is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules) p b,
:is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules) li b { color: #f5e7df; }
:is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules) :is(.dialog-close, .dialog-top .icon-button) {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #e7cde379;
  border-radius: 5px;
  background: linear-gradient(145deg, #695570, #443250);
  color: #fff0dc;
  box-shadow: inset 0 1px #f9e5f023, 0 2px #241f36;
  font-size: 25px;
}
:is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules) :is(.dialog-close, .dialog-top .icon-button):hover { background: #8c6488; border-color: #f8d7ef; }
:is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules) .eyebrow { color: #ddbddf; letter-spacing: 1.7px; }
:is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules) .primary-action {
  background: linear-gradient(145deg, #ffdebd, #f5b4b0 60%, #e8a6be);
  border: 1px solid #fff0d6;
  border-radius: 5px;
  color: #402b48;
  box-shadow: inset 0 1px #fff7e0a1, 0 3px #a46b8b;
  letter-spacing: .8px;
  font-weight: 900;
}
:is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules) .primary-action:hover:not(:disabled) { background: linear-gradient(145deg, #ffeccd, #ffc4bb 63%, #f1b5cf); box-shadow: inset 0 1px #fff9e8, 0 3px #a46b8b; transform: translateY(-1px); }
:is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules) .primary-action:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px #a46b8b; }
:is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules) .primary-action:disabled { background: #ad8f9e; color: #473345; border-color: #d7bccb; box-shadow: none; opacity: .55; }
:is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules) .text-action { color: #dec1ec; text-decoration-color: #caa8dc70; text-underline-offset: 4px; }
:is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules) .text-action:hover { color: #ffe8c3; }
:is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules) .dialog-subtitle { color: #d7c3da; }

/* Bonus selection is a pair of episode covers, with an unambiguous selected state. */
#buy-dialog { padding-top: 29px; }
#buy-dialog > .eyebrow { color: #d9b4da; font-size: 8px; }
#buy-dialog h2 { font-size: 38px; }
#buy-dialog .bonus-choices { gap: 14px; }
#buy-dialog .bonus-choices > button {
  border: 1px solid #bb9cc67a;
  border-radius: 6px;
  background: #2b253e;
  color: #f5e8e3;
  box-shadow: 0 3px #201c32;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
#buy-dialog .bonus-choices > button:hover { border-color: #eed5f3; background: #44314e; box-shadow: 0 5px #201c32; transform: translateY(-2px); }
#buy-dialog .bonus-choices > button[aria-pressed=true] { border-color: #f5d3eb; background: #61415f; box-shadow: 0 0 0 2px #efc0e02c, 0 4px #261d34; }
#buy-dialog .bonus-choices > button[data-bonus-choice=super][aria-pressed=true] { border-color: #f5dab5; background: #634558; box-shadow: 0 0 0 2px #f5dab51f, 0 4px #261d34; }
#buy-dialog .bonus-choices > button:active { transform: translateY(1px); box-shadow: 0 1px #261d34; }
#buy-dialog .bonus-choices > button:after { border-color: #ffe3d6ba; background: #3c2a45c7; }
#buy-dialog .bonus-choices > button[aria-pressed=true]:after { border-color: #fff0dd; background: #ffe1c1; color: #55324e; }
#buy-dialog .choice-art { height: 158px; border-bottom: 1px solid #ffe3ee24; }
#buy-dialog .choice-art b { color: #fff0d2; text-shadow: 2px 3px #943d77; letter-spacing: .2px; }
#buy-dialog .choice-art em { color: #fff0d5; text-shadow: 2px 3px #7b405d, 4px 5px #211f38; }
#buy-dialog [data-bonus-choice=super] .choice-art {
  background-image: linear-gradient(90deg, #35233b93, transparent 85%), linear-gradient(0deg, #3a204961, transparent 60%), url('assets/getaway-result-v9.webp');
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center, center, 35% 27%;
}
#buy-dialog [data-bonus-choice=super] .choice-art b { color: #f3d4f3; text-shadow: 2px 3px #624064; }
#buy-dialog [data-bonus-choice=super] .choice-art em { color: #ffe3b6; }
#buy-dialog .bonus-choices strong { color: #f6e7e1; font-size: 12px; }
#buy-dialog .bonus-choices small { color: #d1b9d3; font-size: 10px; }
#buy-dialog .purchase-facts { background: #211f35b0; border-color: #e3c8dc35; border-radius: 5px; }
#buy-dialog .purchase-facts > div { border-color: #dbbed535; color: #c7b2cc; }
#buy-dialog .purchase-facts b { color: #f5e6da; }
#buy-dialog .purchase-facts div:nth-child(2) b { color: #ffd9b7; }
#buy-dialog .purchase-note { color: #c8b8ca; font-size: 11px !important; line-height: 1.55; }
#buy-dialog .cancel-buy { border-color: #d3b7d352; border-radius: 4px; color: #dac5de; background: #38264035; }
#buy-dialog .cancel-buy:hover { background: #59415e; border-color: #ddc0e096; }
#buy-dialog .dialog-error { color: #ffb9ad !important; }
#buy-dialog #buy-topup {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 13px 0 9px;
  padding: 11px 14px;
  border: 1px solid #ecd3eea6;
  border-radius: 4px;
  background: linear-gradient(145deg, #dcc2ed, #b99ad4);
  color: #3c2949;
  box-shadow: inset 0 1px #fff0f075, 0 2px #765185;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.4;
  letter-spacing: .4px;
}
#buy-dialog #buy-topup:hover:not(:disabled) { background: linear-gradient(145deg, #f0ddf9, #cbb0e0); border-color: #fff0f4; transform: translateY(-1px); }
#buy-dialog #buy-topup:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }

/* Credits are clearly virtual, with three tactile denomination buttons. */
#wallet-dialog { background: radial-gradient(ellipse at 50% -10%, #b9819866, transparent 51%), linear-gradient(145deg, #47314f, #2a263e 75%); }
#wallet-dialog .wallet-hero { border-radius: 13px; border-color: #ffe8d498; background: linear-gradient(145deg, #ebc7d3, #b89ac9); box-shadow: inset 0 1px #fff0de, 5px 6px #38233f; transform: rotate(-7deg); }
#wallet-dialog .wallet-hero svg { stroke: #523851; }
#wallet-dialog h2 { font-size: 33px; }
#wallet-dialog .credit-options { gap: 10px; }
#wallet-dialog .credit-options button {
  min-height: 59px;
  border-color: #ffebdb;
  border-radius: 5px;
  background: linear-gradient(145deg, #f8e3ca, #e3c3d5 64%, #ceb3d3);
  color: #412e4b;
  box-shadow: inset 0 1px #fff5e1, 0 3px #8d6284;
  font-size: 16px;
  letter-spacing: -.25px;
}
#wallet-dialog .credit-options button:hover { background: linear-gradient(145deg, #fff1d5, #f0d2e3); border-color: #fff4dd; transform: translateY(-2px); }
#wallet-dialog .credit-options button:active { transform: translateY(2px); box-shadow: 0 1px #8d6284; }
#wallet-dialog > p:not(.dialog-subtitle) { color: #cbb6cf; }

/* Sound settings: compact, legible channels and a dedicated audition panel. */
#sound-dialog { width: min(600px, calc(100% - 28px)); max-width: 600px; padding: 27px; }
#sound-dialog[open] { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 22px; row-gap: 0; align-content: start; }
#sound-dialog > .dialog-top,
#sound-dialog > p,
#sound-dialog .sound-pack-field,
#sound-dialog .audio-preview-panel,
#sound-dialog .settings-toggles,
#sound-dialog .settings-links,
#sound-dialog > .primary-action { grid-column: 1 / -1; }
#sound-dialog .dialog-top { margin-bottom: 2px; }
#sound-dialog h2 { font-size: 35px; }
#sound-dialog > p { margin: 7px 0 14px; font-size: 12px; color: #ccb9d4; }
#sound-dialog > label { color: #f1e0e6; font-size: 12px; font-weight: 750; margin: 15px 0 10px; }
#sound-dialog output { color: #e5bfe6; font-size: 12px; }
#sound-dialog input[type=range] { height: 5px; background: #796486; accent-color: #efc9d6; margin: 18px 0 18px; }
#sound-dialog input[type=range]::-webkit-slider-thumb { width: 21px; height: 21px; border-color: #ffe6d2; background: linear-gradient(#ffe4c8, #d6b4d2); box-shadow: 0 2px 7px #1a143b85; }
#sound-dialog input[type=range]::-moz-range-thumb { width: 19px; height: 19px; border-color: #ffe6d2; background: #efd1d0; box-shadow: 0 2px 7px #1a143b85; }
#sound-dialog .sound-pack-field {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 9px;
  margin: 7px 0 15px;
  padding: 14px 15px;
  border: 1px solid #dfbfdf5e;
  border-left: 3px solid #d5addd;
  border-radius: 4px;
  background: linear-gradient(120deg, #7150773b, #2d243e47);
  color: #f0dbe7;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: .35px;
}
#sound-dialog .sound-pack-field small { font-size: 10px; font-weight: 500; line-height: 1.5; color: #cbb0d0; letter-spacing: 0; }
#sound-dialog #sound-pack {
  display: block;
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 9px 31px 9px 12px;
  border: 1px solid #e6c9e5a6;
  border-radius: 4px;
  background: linear-gradient(125deg, #65506f, #453151);
  color: #fff0dc;
  box-shadow: inset 0 1px #f6e3ed21, 0 2px #281f39;
  font-size: 12px;
  font-weight: 750;
  text-align: left;
  text-overflow: ellipsis;
  color-scheme: dark;
}
#sound-dialog #sound-pack option { background: #342540; color: #ffeed9; }
#sound-dialog .audio-preview-panel { margin: 11px 0 17px; padding: 15px; border: 1px solid #e0bed14f; border-radius: 5px; background: #201f355c; }
#sound-dialog .audio-preview-panel h3 { margin: 0 0 6px; color: #f0d9eb; font-size: 10px; letter-spacing: 1.3px; }
#sound-dialog .audio-preview-panel p { color: #bfa9c9; font-size: 10px; line-height: 1.5; margin-bottom: 12px; }
#sound-dialog .audio-preview-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
#sound-dialog .audio-preview-grid button,
#sound-dialog :is(#preview-click, #sound-preview-click) {
  min-height: 43px;
  padding: 9px 7px;
  border: 1px solid #cfafd276;
  border-radius: 4px;
  background: linear-gradient(145deg, #665073, #473351);
  color: #f8e9e4;
  box-shadow: inset 0 1px #f5dbef19, 0 2px #251e34;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: .1px;
}
#sound-dialog .audio-preview-grid button:hover:not(:disabled),
#sound-dialog :is(#preview-click, #sound-preview-click):hover:not(:disabled) { background: linear-gradient(145deg, #8f6f94, #644368); border-color: #f2cbe8; transform: translateY(-1px); }
#sound-dialog .audio-preview-grid button:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
#sound-dialog .audio-preview-grid button[aria-pressed=true] { background: linear-gradient(145deg, #f3d3d8, #ccaadd); border-color: #ffe6e5; color: #45304e; box-shadow: inset 0 1px #fff0de5e, 0 2px #73517f; }
#sound-dialog .audio-preview-grid [data-audio-preview=click] { border-color: #e2bac5a1; color: #f7d5c9; }
#sound-dialog #audio-preview-status { color: #edc7e7; margin: 12px 0 0; min-height: 0; }
#sound-dialog .settings-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin-top: 4px; border-top: 1px solid #d8bbd341; }
#sound-dialog .settings-toggles > label { min-height: 79px; border-bottom-color: #d2b5cf30; gap: 12px; }
#sound-dialog .settings-toggles b { color: #f0dfe4; font-size: 12px; line-height: 1.3; }
#sound-dialog .settings-toggles small { color: #bfa6c6; font-size: 10px; line-height: 1.4; margin-top: 5px; }
#sound-dialog .settings-toggles input { width: 39px; flex-basis: 39px; height: 24px; border-color: #ba99c480; background: #4a385d; }
#sound-dialog .settings-toggles input:before { width: 16px; height: 16px; left: 3px; top: 3px; background: #ddc8de; box-shadow: 0 2px 4px #2119314d; }
#sound-dialog .settings-toggles input:checked { background: #dcadd0; border-color: #f3d3e2; }
#sound-dialog .settings-toggles input:checked:before { background: #493052; transform: translateX(15px); }
#sound-dialog .settings-links { margin-top: 19px; gap: 10px; }
#sound-dialog .settings-links button { min-height: 43px; border-radius: 4px; border-color: #dfbdd468; background: #4b3657; color: #e6cde4; font-size: 9px; }
#sound-dialog .settings-links button:hover { background: #71517a; border-color: #ecc6e6a3; color: #fff0df; }
#sound-dialog > .primary-action { margin: 19px 0 2px; min-height: 44px; }
#history-dialog > .primary-action { margin-bottom: 2px; min-height: 44px; }

/* Rules and receipts carry the same warm print colour and lilac hierarchy. */
#rules .rules-lead { color: #d4bfd7; }
#rules .visual-guide { color: #e6d1df; }
#rules .visual-guide h3 { color: #fff0d5; }
#rules .guide-kicker { color: #d5ade6; }
#rules .guide-grid { background: radial-gradient(ellipse at top, #554362, #26263f); border-color: #dac2d9; box-shadow: 0 3px #33233e; }
#rules .guide-cell { background: #ecd8f10a; border-color: #f0d1ed16; }
#rules .guide-cell.lit { background: #ebabc028; border-color: #ffc8d5; box-shadow: inset 0 0 8px #ffbed00f; }
#rules .guide-cell i { background: #ffd2d2; color: #4b2c4c; }
#rules .guide-match-copy > strong { color: #f7e3d6; }
#rules .guide-match-copy > b { color: #eac2e8; }
#rules .guide-match-copy p { color: #c9b7d0; }
#rules .guide-flow { background: #24213a8a; border-color: #d1abd037; border-radius: 5px; }
#rules .guide-flow > i { color: #d9b2e2; }
#rules .guide-flow strong { color: #f0dee6; }
#rules .guide-flow small { color: #c4acd0; }
#rules .flow-pic { background: #4a3759; border-color: #d4b0d338; border-radius: 6px; }
#rules .flow-pic > b { background: #ecc8dd; color: #4a304e; }
#rules .cascade-pic > b { background: transparent; color: #eac6ec; }
#rules .cascade-pic em { color: #ffb9b7; }
#rules .guide-equation > span { color: #cdb3d1; }
#rules .guide-equation b { color: #ffe7ce; }
#rules .guide-equation i { color: #b18dc2; }
#rules .guide-equation .equation-result { border-color: #e0b9cf70; border-radius: 5px; background: #654258; }
#rules .guide-wallet { background: #4d354f; border-color: #d6b0cf77; border-radius: 5px; }
#rules .guide-wallet svg { stroke: #edc7df; }
#rules .guide-wallet span, #rules .guide-wallet b { color: #f4e2dc; }
#rules .guide-wallet small { color: #d2b4ce; }
#rules .guide-bonus { background: #34263f; border-color: #d0a4c35e; border-radius: 6px; }
#rules .guide-bonus-copy p { color: #d8bfd5; }
#rules .guide-bonus-copy p > b, #rules .guide-bonus-copy > strong { color: #eeddde; }
#rules .guide-bonus-copy p > span, #rules .guide-bonus-copy > small { color: #c6a8c8; }
#rules .guide-bonus-copy button { border-color: #e0b8d882; border-radius: 3px; background: #75537b; color: #f4e1e8; }
#rules .super .guide-bonus-copy button { border-color: #ecd0bc80; background: #835967; color: #ffe3ce; }
#rules .guide-bonus-copy button:hover { background: #926794; }
#rules .guide-caution { color: #c9b2c8; }
#rules .guide-credit > div { background: #46334d; border-color: #d3b0ce4f; border-radius: 5px; }
#rules .guide-credit > div + div { background: #554054; border-color: #d4b7c44a; }
#rules .guide-credit span { color: #d9b4d7; }
#rules .guide-credit b { color: #f1e0de; }
#rules .guide-credit small { color: #c7afc8; }
#rules .full-rules { border-color: #d3b0ce3a; }
#rules .full-rules summary { color: #eed5e5; }
#rules .full-rules p, #rules .full-rules li { color: #cbb7cf; }
#rules .rule-options { border-color: #d3b0ce3a; color: #dac1d6; }
#rules .rule-options input { accent-color: #d7acd8; }
#rules .rule-options > span { color: #bfa4c5; }
:is(#rules, #history-dialog) table { color: #e9d8e1; }
:is(#rules, #history-dialog) th { color: #d1afd6; background: #261f37b0; }
:is(#rules, #history-dialog) :is(th, td) { border-bottom-color: #c9a7c831; }
:is(#rules, #history-dialog) td:first-child { color: #e7cce1; }
:is(#rules, #history-dialog) tbody tr:nth-child(even) { background: #ecc6e807; }
#history-dialog > p { color: #c9b3cf; }
#history-dialog #view-receipt { border-color: #dab8cd67; border-radius: 5px; background: linear-gradient(120deg, #7f4f6942, #49304f72); color: #f3d9db !important; }
#history-dialog .history-wrap { border-color: #d0acce46; border-radius: 5px; }
#history-dialog .history-wrap td { color: #f1dfdf; }
#history-dialog .history-wrap td:first-child { color: #d1b1d4; }
#history-dialog #history-empty { color: #d0b5d1; }

/* Clear focus and inactive states do not rely on the background image. */
.top-actions :is(button, select):focus-visible,
.controls :is(button, select):focus-visible,
.combo-panel button:focus-visible,
.receipt-line:focus-visible,
:is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules) :is(button, select, input, summary, a):focus-visible {
  outline: 3px solid #ffd9ed;
  outline-offset: 4px;
}
.top-actions button:disabled,
.controls button:disabled:not(.spin),
:is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules) button:disabled { cursor: default; filter: saturate(.5); transform: none; }

/* The game keeps its tested geometry; only service-window layout adapts here. */
@media (max-width: 700px) {
  .top-actions .balance { border-radius: 6px; }
  .top-actions .icon-button { border-radius: 5px; }
  .balance small { font-size: 6.5px; letter-spacing: .5px; }
  .preview-mode .balance small:after { font-size: 5.5px; color: #795274; }
  .controls { border-radius: 7px; }
  .spin { border-radius: 6px; letter-spacing: .5px; }
  .spin:before { border-radius: 3px; }
  .buy-ticket { border-radius: 4px; }
  .combo-panel { border-radius: 5px; }
  .combo-panel button { border-radius: 3px; }
  .round-total, .sun-meter, .feature-rail .bonus-sign { border-radius: 5px; }
  :is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules) { border-radius: 7px; }
  :is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules) :is(.dialog-close, .dialog-top .icon-button) { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  #buy-dialog { padding-top: 24px; }
  #buy-dialog h2 { font-size: 33px; }
  #buy-dialog .bonus-choices { gap: 10px; }
  #buy-dialog .choice-art { height: 128px; }
  #buy-dialog .bonus-choices strong { font-size: 10px; }
  #buy-dialog .bonus-choices small { font-size: 9px; }
  #buy-dialog .purchase-facts > div { font-size: 11px; }
  #buy-dialog .purchase-note { font-size: 10px !important; line-height: 1.55; }
  #wallet-dialog h2 { font-size: 29px; }
  #wallet-dialog .credit-options { gap: 7px; }
  #wallet-dialog .credit-options button { min-height: 55px; font-size: 14px; }
  #sound-dialog { padding: 22px 18px; width: calc(100% - 22px); }
  #sound-dialog[open] { column-gap: 16px; }
  #sound-dialog h2 { font-size: 31px; }
  #sound-dialog > p { font-size: 11px; line-height: 1.55; margin-bottom: 12px; }
  #sound-dialog > label { font-size: 11px; margin-top: 12px; }
  #sound-dialog output { font-size: 11px; }
  #sound-dialog .sound-pack-field { padding: 12px; margin-block: 7px 13px; font-size: 11px; }
  #sound-dialog #sound-pack { height: 43px; font-size: 11px; }
  #sound-dialog .audio-preview-panel { padding: 12px; margin-block: 9px 15px; }
  #sound-dialog .audio-preview-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  #sound-dialog .audio-preview-grid button { min-height: 43px; padding: 8px 6px; font-size: 10px; }
  #sound-dialog .settings-toggles { grid-template-columns: 1fr; gap: 0; }
  #sound-dialog .settings-toggles > label { min-height: 63px; gap: 15px; padding-block: 12px; }
  #sound-dialog .settings-toggles b { font-size: 12px; }
  #sound-dialog .settings-toggles small { font-size: 10px; }
  #sound-dialog .settings-links { margin-top: 16px; gap: 9px; }
  #sound-dialog .settings-links button { font-size: 8px; min-height: 42px; }
  #rules .guide-flow strong { font-size: 10px; }
  #rules .guide-credit b { font-size: 12px; }
  #history-dialog #view-receipt { font-size: 12px !important; }
  #history-dialog .history-wrap th { font-size: 8px; }
  #history-dialog .history-wrap td { font-size: 10px; }
}

@media (max-width: 370px) {
  .balance small { font-size: 5.8px; letter-spacing: .25px; }
  #buy-dialog h2 { font-size: 30px; }
  #buy-dialog .bonus-choices { gap: 8px; }
  #buy-dialog .choice-art { height: 116px; }
  #buy-dialog .bonus-choices strong { font-size: 9px; }
  #buy-dialog .bonus-choices small { font-size: 8px; }
  #wallet-dialog h2 { font-size: 26px; }
  #wallet-dialog .credit-options button { min-height: 53px; font-size: 13px; }
  #sound-dialog[open] { column-gap: 14px; }
  #sound-dialog .audio-preview-grid button { font-size: 9px; }
  #sound-dialog .settings-links { grid-template-columns: 1fr; }
}

/* Existing preference overrides remain authoritative, including zero motion. */
.no-motion .top-actions *, .no-motion .controls *, .no-motion .combo-panel *,
.no-motion :is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules),
.no-motion :is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules) * {
  animation: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .top-actions *, .controls *, .combo-panel *,
  :is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules),
  :is(#buy-dialog, #wallet-dialog, #sound-dialog, #history-dialog, #rules) * {
    animation: none !important;
    transition: none !important;
  }
}

/* COASTLINE HEAT v9.2 — turquoise ignition, coral throttle, one action.
   CSS only: the existing console and game geometry remain authoritative. */

#spin.spin {
  --action-paper: #fff2d5;
  --action-cyan: #a6ffed;
  --action-edge: #ffd1a5;
  --action-panel: 82px;
  width: min(100%, 306px);
  max-width: 306px;
  min-width: 0;
  justify-self: center;
  align-self: center;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: max-content max-content;
  align-content: center;
  align-items: center;
  justify-content: center;
  column-gap: 15px;
  row-gap: 2px;
  padding: 8px 27px 9px 10px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 20px 36px 20px 36px;
  background:
    linear-gradient(170deg, #ffb588 0%, #ff735f 14%, #df344f 46%, #b81d48 48%, #ef4e65 100%) padding-box,
    linear-gradient(150deg, #fffbe0, #ffcbbb 24%, #9c7192 49%, #ffedd2 65%, #c8fff0 86%, #678b9b) border-box;
  color: var(--action-paper);
  box-shadow:
    inset 0 2px 1px #fff4d1ad,
    inset 0 -3px 2px #80163e8c,
    0 4px 0 #722344,
    0 6px 0 1px #f7c7b477,
    0 9px 0 1px #17243b,
    0 11px 22px #fa4e663d;
  opacity: 1;
  filter: none;
  text-shadow: 0 2px 0 #8a2445, 0 3px 5px #65133b44;
  transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 150ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

/* A curved glass highlight gives the enamel a clear material and silhouette. */
#spin.spin::before {
  content: '';
  position: absolute;
  inset: 2px 5px auto;
  height: 41%;
  z-index: -1;
  border: 0;
  border-radius: 18px 32px 42% 42%;
  background: linear-gradient(180deg, #fff9de52, #fff4ce06);
  pointer-events: none;
}
#spin.spin::after,
#spin.spin:not(:disabled):hover::after {
  content: '';
  position: absolute;
  display: block;
  inset: 0 auto 0 0;
  width: var(--action-panel);
  height: 100%;
  z-index: -1;
  background: linear-gradient(150deg, #d2fff0 0%, #6df3da 18%, #24bdb1 49%, #138899 51%, #60e3d1 100%);
  box-shadow: inset 0 2px #e9fff3b5, inset 0 -3px #1160787a;
  border: 0;
  border-radius: 17px 0 0 32px;
  clip-path: polygon(0 0,100% 0,calc(100% - 20px) 100%,0 100%);
  opacity: 1;
  transform: none;
  animation: none;
  transition: none;
  pointer-events: none;
}

#spin.spin > svg {
  grid-column: 1;
  grid-row: 1 / 3;
  justify-self: center;
  width: 48px;
  height: 48px;
  min-width: 0;
  margin: 0;
  padding: 9px;
  border: 2px solid #f3ffe1;
  border-radius: 50%;
  background: linear-gradient(145deg, #ecffe5, #a9f2d3 49%, #70c6c5 51%, #c7ffdf);
  color: #154b61;
  box-shadow: inset 0 2px #ffffe88f, inset 0 -2px #26758b64, 0 0 0 2px #186b7c, 0 3px 0 2px #143c5b8f;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: none;
  animation: none;
  transition: transform 320ms cubic-bezier(.2, .8, .3, 1), border-color 180ms ease;
}
#spin.spin #spin-label {
  grid-column: 2;
  grid-row: 1;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--action-paper);
  font-family: var(--finish-display, Impact, 'Arial Narrow', sans-serif);
  font-size: clamp(21px, 2.15vw, 31px);
  font-weight: 900;
  font-style: italic;
  line-height: 1.02;
  letter-spacing: 1.3px;
  text-align: left;
  white-space: nowrap;
}
#spin.spin #spin-hint {
  grid-column: 2;
  grid-row: 2;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #ffedda;
  font-family: var(--finish-body, 'Trebuchet MS', sans-serif);
  font-size: 8.5px;
  font-weight: 800;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: .55px;
  text-align: left;
  white-space: nowrap;
  text-shadow: 0 1px #691d36;
}
#spin.spin #spin-hint:empty { display: none; }

#spin.spin:not(:disabled):hover {
  background: linear-gradient(174deg, #ffca8c, #ff8b68 23%, #ff5864 51%, #dc3058 52%, #ff6877) padding-box, linear-gradient(150deg, #fffbe0, #ffcbba 24%, #a183a9 49%, #fff5d7 65%, #c8fff0 86%, #819cac) border-box;
  border-color: transparent;
  color: var(--action-paper);
  box-shadow: inset 0 2px #fff4d1c9, inset 0 -3px #8b1a4277, 0 5px #722344, 0 7px 0 1px #ffdbc89c, 0 10px #17243b, 0 12px 24px #ff56624d;
  transform: translateY(-1px);
  filter: none;
}
#spin.spin:not(:disabled):hover > svg { transform: rotate(35deg); border-color: #fff1cb; }
#spin.spin:not(:disabled):active,
#spin.spin.tap-burst:not(.busy):not(.loading) {
  background: linear-gradient(174deg, #ef765e, #d4324f 52%, #bf244d) padding-box, linear-gradient(160deg, #eac6aa, #c194aa, #ffeece) border-box;
  box-shadow: inset 0 3px 6px #701b4266, 0 2px #722344, 0 3px #dfacb077;
  transform: translateY(3px);
}
#spin.spin:focus-visible {
  outline: 3px solid var(--action-cyan);
  outline-offset: 6px;
}

/* Non-interactive is not invisible. Busy/loading retain the red identity. */
#spin.spin:disabled {
  background: linear-gradient(170deg, #bc7168, #964152 53%, #77304b) padding-box, linear-gradient(155deg, #f0cdb7, #9c7690 52%, #d2ada9) border-box;
  border-color: transparent;
  color: #f2decc;
  box-shadow: inset 0 1px #efd6b854, 0 3px #582036;
  opacity: 1;
  filter: none;
  cursor: default;
  transform: none;
}
#spin.spin:disabled #spin-label,
#spin.spin:disabled #spin-hint { color: #f3e1d1; }
#spin.spin:disabled::after { background: linear-gradient(150deg, #c5e4d5, #70aeb2 49%, #468291 51%, #8dc1ba); }
#spin.spin:is(.busy, .loading, [aria-busy=true], [data-state=loading]) {
  background: linear-gradient(174deg, #ffaf7e, #ff785f 23%, #ed4156 51%, #cd2852 52%, #ed4c66) padding-box, linear-gradient(150deg, #fff9da, #a6ffed 27%, #65849b 49%, #d6fff4 68%, #fff0cd) border-box;
  border-color: transparent;
  box-shadow: inset 0 2px #fff1c5a8, inset 0 -3px #7f1d408a, 0 3px #702143, 0 5px 0 1px #bdffeb8a, 0 7px #17243b, 0 10px 20px #f557682e;
  color: var(--action-paper);
  opacity: 1;
  filter: none;
  transform: none;
  cursor: progress;
}
#spin.spin:is(.busy, .loading, [aria-busy=true], [data-state=loading])::before { border: 0; }
#spin.spin:is(.busy, .loading, [aria-busy=true], [data-state=loading])::after { background: linear-gradient(150deg, #ddfff0, #82ffe0 18%, #2fc8b7 49%, #138b9b 51%, #64ecda); }
#spin.spin:is(.busy, .loading, [aria-busy=true], [data-state=loading]) #spin-label { color: var(--action-paper); }
#spin.spin:is(.busy, .loading, [aria-busy=true], [data-state=loading]) #spin-hint { color: #fff2e3; }
#spin.spin:is(.busy, .loading, [aria-busy=true], [data-state=loading]) > svg {
  border-color: #ffefcf;
  background: linear-gradient(145deg, #efffe3, #a9f2d3 49%, #70c6c5 51%, #d4ffe6);
  color: #134f65;
  animation: action-rotor 1.25s linear infinite;
}
#spin.spin:is(.loading, [data-state=loading]) > svg { animation-duration: 1.8s; }
#spin.spin:is([data-state=bonus-waiting], [data-state=bonus-ready]) {
  background: linear-gradient(170deg, #ffb588, #ff735f 14%, #df344f 46%, #b81d48 48%, #ef4e65) padding-box, linear-gradient(150deg, #e2ffe7, #a4ffe9 30%, #548397 49%, #fff1cf 70%, #d0fff1) border-box;
  opacity: 1;
  filter: none;
}
#spin.spin:is([data-state=bonus-waiting], [data-state=bonus-ready])::after { background: linear-gradient(150deg, #ddfff0, #82ffe0 18%, #2fc8b7 49%, #138b9b 51%, #64ecda); }
#spin.spin:is([data-state=bonus-waiting], [data-state=bonus-ready]) > svg { animation: none; }
@keyframes action-rotor { to { transform: rotate(360deg); } }

/* Existing minimum heights are retained, including short phone viewports. */
@media (max-width: 700px) {
  #spin.spin {
    --action-panel: 50px;
    width: 100%;
    max-width: 238px;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: max-content max-content;
    column-gap: 9px;
    row-gap: 3px;
    padding: 6px 13px 6px 10px;
    border-radius: 15px 26px 15px 26px;
  }
  #spin.spin::before { inset: 2px 4px auto; border-radius: 14px 23px 42% 42%; }
  #spin.spin::after, #spin.spin:not(:disabled):hover::after { inset: 0 auto 0 0; width: var(--action-panel); height: 100%; border-radius: 12px 0 0 23px; clip-path: polygon(0 0,100% 0,calc(100% - 11px) 100%,0 100%); }
  #spin.spin > svg { width: 34px; height: 34px; padding: 5px; grid-row: 1 / 3; border-width: 1.5px; stroke-width: 2.8; }
  #spin.spin #spin-label { font-size: clamp(16px, 4.7vw, 21px); letter-spacing: .6px; }
  #spin.spin #spin-hint { grid-column: 2; font-size: 7.5px; letter-spacing: .15px; text-align: left; line-height: 1.2; white-space: normal; }
}
@media (max-width: 370px) {
  #spin.spin { --action-panel: 43px; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: max-content max-content; column-gap: 7px; padding-inline: 7px; }
  #spin.spin > svg { width: 30px; height: 30px; padding: 4px; }
  #spin.spin #spin-label { font-size: 16px; letter-spacing: .25px; }
  #spin.spin #spin-hint { font-size: 7.5px; letter-spacing: .1px; }
}

.no-motion #spin.spin,
.no-motion #spin.spin::before,
.no-motion #spin.spin::after,
.no-motion #spin.spin > svg { animation: none !important; transition: none !important; }
.no-motion #spin.spin > svg { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  #spin.spin, #spin.spin::before, #spin.spin::after, #spin.spin > svg { animation: none !important; transition: none !important; }
  #spin.spin > svg { transform: none !important; }
}

/* COASTLINE HEAT v9.1 — a bright automotive console.
   Materials and controls only. Board, result poster, city and wallet are unchanged. */

.controls {
  position: relative;
  border: 1px solid transparent;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 2% 5%, #258d956e, transparent 47%) padding-box,
    radial-gradient(ellipse at 67% 105%, #e345702d, transparent 52%) padding-box,
    linear-gradient(125deg, #142f45f5, #22213bef 49%, #443151ed) padding-box,
    linear-gradient(115deg, #b4fff0, #79aaaec7 29%, #f7d6e6 61%, #fdb697) border-box;
  box-shadow: inset 0 1px #e0fff84d, inset 0 -3px #071b2d72, 0 4px #112338ba, 0 8px 22px #17223b5c;
}
.controls::before {
  content: '';
  position: absolute;
  inset: 3px 13px auto;
  height: 1px;
  background: linear-gradient(90deg, #a8ffea99, transparent 31%, #ffe2d7aa 70%, transparent);
  pointer-events: none;
}
.controls .stake-top label { color: #d5fff0; text-shadow: 0 1px #072336; letter-spacing: .75px; }
.controls #speed {
  position: relative;
  border: 1px solid #bcffe1a1;
  border-radius: 5px;
  background: linear-gradient(160deg, #2f716f, #17495c);
  color: #e8ffec;
  box-shadow: inset 0 1px #d4ffe42b, 0 2px #0a2f42;
  font-weight: 850;
  text-shadow: 0 1px #103544;
}
.controls #speed:hover:not(:disabled) { border-color: #efffdb; background: linear-gradient(160deg, #458a7e, #205d68); }
.controls #speed[aria-pressed=true] { background: linear-gradient(160deg, #d3ffd3, #89efc7); color: #123b45; text-shadow: none; border-color: #fff5d0; box-shadow: inset 0 1px #fffdea, 0 2px #4b8c7f; }
.controls .stake-input { gap: 5px; }
.controls .stake-input :is(button,input) {
  border: 1px solid #f5f0d9;
  border-radius: 7px;
  color: #19384b;
  background: linear-gradient(165deg, #faffed, #bdeddf 47%, #98c9cf 49%, #dbf4e6);
  box-shadow: inset 0 1px #fffce6, inset 0 -1px #3a71854f, 0 3px #255163, 0 4px #a3dcda38;
  text-shadow: 0 1px #ffffff6b;
}
.controls .stake-input button { font-size: 24px; font-weight: 700; }
.controls .stake-input input { background: linear-gradient(165deg, #fff8d9, #ffe4be); color: #21334b; border-color: #ffedc8; box-shadow: inset 0 2px 4px #ab687031, 0 2px #7b6473; font-weight: 900; }
.controls .stake-input button:hover:not(:disabled) { background: linear-gradient(165deg, #fffde4, #d4ffe8 49%, #b0e8d9 50%, #f2fff0); border-color: #fffada; transform: translateY(-1px); }
.controls .stake-input button:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 4px #31627440, 0 1px #285266; }

.controls .buy-ticket {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 44px;
  border: 1px solid #fff3cf;
  border-radius: 9px;
  background: linear-gradient(115deg, #fff2c2 0%, #ffd3ac 39%, #ffc1c0 75%, #edb0d4);
  color: #392c49;
  box-shadow: inset 0 2px #fffbe8ba, inset 0 -2px #ad5e8a2b, 0 3px #94537a, 0 5px #e2a6ac22;
  text-shadow: 0 1px #fffbe02b;
  font-weight: 950;
  letter-spacing: .55px;
}
.controls .buy-ticket::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px dashed #91516d54;
  border-radius: 5px;
  pointer-events: none;
  z-index: -1;
}
.controls .buy-ticket > svg { filter: drop-shadow(0 2px 1px #8752674d); transform: rotate(-8deg); }
.controls .buy-ticket small { color: #6b3b64; font-weight: 850; letter-spacing: .25px; }
.controls .buy-ticket:hover:not(:disabled) { background: linear-gradient(115deg, #fffad6, #ffdeb3 39%, #ffd2c9 75%, #efbddc); border-color: #fff8db; box-shadow: inset 0 2px #fffce8, 0 4px #94537a, 0 7px 15px #ffb5b926; transform: translateY(-1px); }
.controls .buy-ticket:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 4px #ab657b33, 0 1px #94537a; }
.controls .round-tools { gap: 6px; }
.controls .round-tools button {
  border: 1px solid #c4d8f280 !important;
  border-radius: 5px;
  background: linear-gradient(155deg, #5d6188, #333a61);
  color: #eaf8ee;
  box-shadow: inset 0 1px #e6f1ff35, 0 2px #1c2846;
  letter-spacing: .5px;
}
.controls .round-tools button + button { border: 1px solid #e4cde580 !important; padding-left: 7px !important; background: linear-gradient(155deg, #7e628e, #49416d); color: #fff0e7; }
.controls .round-tools button:hover:not(:disabled) { color: #fffbd8; border-color: #fff0d0 !important; background: linear-gradient(155deg, #827eac, #514c7b); transform: translateY(-1px); }
.controls .round-tools button:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 3px #13203c60; }
.controls :is(#speed,.stake-input button,.stake-input input,.buy-ticket,.round-tools button):disabled {
  opacity: .66;
  filter: saturate(.7);
  cursor: default;
  transform: none;
}

/* The same two materials in the header: cool chrome switches, warm wallet. */
.top-actions .icon-button {
  border: 1px solid #d9fbeac9;
  border-radius: 9px;
  background: linear-gradient(155deg, #799ea5 0%, #477285 35%, #24465f 37%, #31536b);
  color: #f5ffe8;
  box-shadow: inset 0 2px #e2ffed6b, inset 0 -1px #193c5961, 0 3px #17304a, 0 4px #94c9cb70;
}
.top-actions .icon-button:hover:not(:disabled) { background: linear-gradient(155deg, #9ac8c3, #659697 36%, #335e72 38%, #487a86); border-color: #fff9d5; color: #fffbdc; }
.top-actions .icon-button[aria-pressed=true] { background: linear-gradient(145deg, #dffff0, #9ae1d6 47%, #73b6bb 49%, #d3fbe3); color: #1e4259; border-color: #fff6d0; }
.top-actions .balance {
  border: 1px solid #fff4cd;
  border-radius: 11px;
  background: linear-gradient(165deg, #fffce9, #ffeecf 49%, #edc9c6 50%, #fae2ce);
  box-shadow: inset 0 2px #fffbed, inset 0 -2px #8e63723b, 0 3px #8e637f, 0 5px #eacec457, 0 8px 17px #16233b40;
}
.top-actions .balance small { color: #725263; }
.top-actions .balance strong { color: #292c46; text-shadow: 0 1px #fffbe0; }
.top-actions .wallet-add {
  border: 1px solid #fff2d9;
  border-radius: 7px;
  background: linear-gradient(160deg, #ffcdad, #ff929f 48%, #e77193 50%, #f7a9b2);
  color: #502d4a;
  box-shadow: inset 0 2px #ffecd48c, 0 3px #aa577c;
}
.top-actions .wallet-add:hover:not(:disabled) { background: linear-gradient(160deg, #ffe1b9, #ffb7b0 48%, #f795a7 50%, #ffcbbf); }
.controls :is(button,select,input):focus-visible, .top-actions button:focus-visible { outline: 3px solid #c4ffed; outline-offset: 4px; }
.receipt-line { border-color: #caeee48c; background: linear-gradient(105deg, #24465adf, #302b49e8 52%, #59405bdd); box-shadow: inset 0 1px #e4f5e819; }
.receipt-line b { color: #ffe6bd; }
.receipt-line > i { color: #e6d5ff; }

@media (min-width: 701px) {
  .top-actions .icon-button { min-width: 44px; min-height: 44px; }
}
@media (max-width: 700px) {
  .topbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; align-items: center; }
  .topbar .brand { min-width: 0; }
  .topbar .brand span { font-size: 11px; letter-spacing: 1.7px; }
  .topbar .brand strong { font-size: 34px; letter-spacing: 1px; }
  .topbar .brand small { font-size: 5px; letter-spacing: 0; max-width: 84px; }
  .top-actions { gap: 4px; }
  .top-actions .icon-button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: 0 0 44px; }
  .top-actions .balance { width: 146px; min-width: 0; gap: 5px; padding: 5px !important; }
  .top-actions .balance > div { min-width: 0; flex: 1; }
  .top-actions .balance strong { font-size: 18px; letter-spacing: -.65px; white-space: nowrap; }
  .top-actions .balance small { font-size: 6px; letter-spacing: .35px; }
  .top-actions .wallet-add { width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: 0 0 44px; font-size: 25px; }
  .controls { border-radius: 13px; }
  .controls .stake-top { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 4px; margin-bottom: 4px; }
  .controls .stake-top label { margin: 0; font-size: 6.5px; letter-spacing: .2px; line-height: 1.5; }
  .controls #speed { min-height: 32px; max-width: 82px; padding: 4px; font-size: 6.5px; line-height: 1.35; white-space: normal; }
  .controls .stake-input { grid-template-columns: 44px minmax(44px,1fr) 44px; gap: 4px; }
  .controls .stake-input :is(button,input) { height: 44px; min-height: 44px; min-width: 0; border-radius: 6px; }
  .controls .stake-input button { min-width: 44px; }
  .controls .stake-input input { min-width: 44px; font-size: 16px; letter-spacing: -.45px; padding-inline: 0; appearance: none; -webkit-appearance: none; text-align: center; cursor: text; }
  .controls .stake-input button { font-size: 23px; }
  .combo-panel button { min-height: 44px; min-width: 44px; }
  .controls .buy-ticket { border-radius: 7px; }
  .controls .secondary { grid-template-columns: minmax(0,1fr) 92px; gap: 8px; }
  .controls .round-tools { display: grid; grid-template-columns: 44px 44px; gap: 4px; }
  .controls .round-tools button { width: 44px; min-width: 44px; min-height: 44px !important; padding: 4px 1px !important; font-size: 7px !important; letter-spacing: 0; line-height: 1.35; }
  .controls .round-tools button + button { padding-left: 1px !important; }
  .top-actions .icon-button { border-radius: 7px; }
  .top-actions .balance { border-radius: 9px; }
}
@media (max-width: 370px) {
  .topbar { gap: 4px; }
  .topbar .brand span { font-size: 9px; letter-spacing: 1.2px; }
  .topbar .brand strong { font-size: 27px; letter-spacing: .7px; }
  .topbar .brand small { font-size: 4.5px; max-width: 66px; margin-top: 5px; line-height: 1.2; }
  .top-actions { gap: 3px; }
  .top-actions .balance { width: 132px; gap: 4px; }
  .top-actions .balance strong { font-size: 15px; letter-spacing: -.65px; }
  .top-actions .balance small { font-size: 5.2px; letter-spacing: .1px; }
  .controls { grid-template-columns: 140px minmax(0,1fr); column-gap: 6px; }
  .controls .secondary { gap: 6px; }
  .controls .buy-ticket { gap: 3px; padding-inline: 5px; font-size: 9px; letter-spacing: .1px; }
  .controls .buy-ticket > svg { width: 27px; height: 27px; }
  .controls .buy-ticket small { font-size: 7.5px; }
  .controls .stake-top label { letter-spacing: .35px; }
}
.no-motion .controls *, .no-motion .top-actions * { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .controls *, .top-actions * { transition: none !important; }
}

/* COASTLINE HEAT v9.4 — finite autoplay and a player-paced bonus episode.
   Controllers own every state. This layer only presents their controls. */

.language-control { display: block; flex: 0 0 52px; width: 52px; margin: 0; }
#language {
  display: block;
  width: 52px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0 5px;
  border: 1px solid #d6ffe4;
  border-radius: 8px;
  background: linear-gradient(150deg, #617f90, #2c4965 49%, #203750 51%, #3d6379);
  color: #f2ffe7;
  box-shadow: inset 0 1px #e2fff45c, 0 3px #132e48;
  font: 850 10px/1 var(--finish-body);
  cursor: pointer;
}
#language option { background: #20374f; color: #fff4df; }
.controls .round-tools { gap: 4px; }
.controls .round-tools #autoplay {
  min-width: 44px;
  min-height: 44px !important;
  border-color: #abfff0 !important;
  background: linear-gradient(150deg, #c3ffe1, #60d9c6 46%, #36a9ae 48%, #94ead5);
  color: #133e50;
  box-shadow: inset 0 1px #f2ffe2b3, 0 2px #26677b;
  text-shadow: 0 1px #dfffe74a;
  font-weight: 900;
}
.controls .round-tools #autoplay:hover:not(:disabled) { background: linear-gradient(150deg, #e1ffdd, #8aefce 46%, #54bebc 48%, #b4f6df); }
.controls .round-tools #autoplay[aria-pressed=true],
.controls .round-tools #autoplay[data-active=true] { color: #fff6db; background: linear-gradient(155deg, #fb906e, #c93658); border-color: #ffe6c1 !important; box-shadow: inset 0 1px #ffecd175, 0 2px #74364f; }

#autoplay-dialog {
  width: min(484px, calc(100% - 28px));
  height: fit-content;
  max-height: calc(100svh - 28px);
  padding: 27px;
  margin: auto;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #e9decb;
  border-radius: 14px;
  background: radial-gradient(ellipse at 0 0, #28787563, transparent 55%), linear-gradient(145deg, #263b51, #27273f 72%, #4b2c48);
  box-shadow: inset 0 1px #efffe83b, 0 0 0 4px #a9ffe915, 0 22px 75px #071023c9;
  color: #f9efdd;
  scrollbar-color: #91cfc6 #26354b;
}
#autoplay-dialog::backdrop { background: #111d34b8; backdrop-filter: blur(6px); }
#autoplay-dialog .dialog-top { gap: 13px; align-items: flex-start; }
#autoplay-dialog .dialog-top > div { min-width: 0; }
#autoplay-dialog .eyebrow { display: block; font-size: 8px; letter-spacing: 1.5px; color: #a5f4dc; margin-bottom: 8px; }
#autoplay-dialog h2 { margin: 0; color: #fff0d2; font: italic clamp(25px, 5vw, 36px)/1.05 var(--finish-display); letter-spacing: .5px; overflow-wrap: anywhere; text-shadow: 1px 2px #8b5268; }
#autoplay-dialog .dialog-top .icon-button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border: 1px solid #c5dfdf9e; border-radius: 8px; background: linear-gradient(145deg, #617a91, #334764); color: #fff0d7; font-size: 27px; box-shadow: inset 0 1px #e2fff344, 0 2px #122b44; }
#autoplay-dialog .autoplay-intro { color: #d0dce1; margin: 18px 0 20px; font-size: 12px; line-height: 1.65; }
.autoplay-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; margin-block: 16px; }
.autoplay-fields > label, .autoplay-stake { min-width: 0; padding: 13px; border: 1px solid #beded349; border-radius: 8px; background: #0f293b65; }
.autoplay-fields > label > span, .autoplay-stake > span, .autoplay-loss-field > span:first-child { display: block; font-size: 8px; font-weight: 850; line-height: 1.45; letter-spacing: .6px; color: #d2e8e2; }
#autoplay-count { width: 100%; height: 47px; min-height: 44px; padding: 6px 11px; margin-top: 8px; border: 1px solid #fff0d0; border-radius: 6px; background: linear-gradient(155deg, #f7ffe6, #b6ecdf); color: #163e50; font: 850 23px/1.2 var(--finish-body); }
.autoplay-stake output { display: block; margin-top: 10px; font: 850 25px/1.25 var(--finish-body); color: #ffdfb4; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.autoplay-stake > small { display: block; color: #c1d7db; font-size: 9px; line-height: 1.4; margin-top: 3px; }
.autoplay-loss-field { display: block; margin-top: 20px; }
.autoplay-loss-input { display: flex; align-items: center; gap: 11px; margin-top: 9px; padding-right: 12px; border: 1px solid #d5d8d1a6; border-radius: 7px; background: #102c40; }
#autoplay-loss { display: block; width: 100%; min-width: 0; min-height: 44px; padding: 9px 12px; border: 0; border-radius: 6px; background: transparent; color: #fff0d2; font: 850 20px/1.2 var(--finish-body); }
.autoplay-loss-input > small { color: #b7d9d6; font-size: 9px; flex-shrink: 0; }
#autoplay-loss-help { margin: 8px 0 18px; color: #b5cbd2; font-size: 10px; line-height: 1.5; }
.autoplay-options { border-top: 1px solid #c3ded637; border-bottom: 1px solid #c3ded637; }
.autoplay-options > label { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 54px; padding: 5px 0; cursor: pointer; }
.autoplay-options > label + label { border-top: 1px solid #c3ded61c; }
.autoplay-options span { font-size: 10px; line-height: 1.5; font-weight: 800; color: #e1eee5; letter-spacing: .3px; }
.autoplay-options input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: #92ecd2; cursor: pointer; }
#autoplay-dialog .autoplay-note { font-size: 10px; line-height: 1.6; color: #c9c9d5; margin: 16px 0 18px; }
#autoplay-start { width: 100%; min-height: 48px; border: 1px solid #fff1d0; border-radius: 7px; background: linear-gradient(145deg, #ffd4a9, #ff9a9a 49%, #e87595); color: #442942; box-shadow: inset 0 2px #fff3d577, 0 3px #895071; font-size: 12px; font-weight: 900; letter-spacing: .5px; }
#autoplay-start:hover:not(:disabled) { background: linear-gradient(145deg, #ffe8bd, #ffb9a7 49%, #ef91aa); transform: translateY(-1px); }
#autoplay-start:disabled { opacity: .5; cursor: default; }
#autoplay-dialog .text-action { display: block; width: 100%; min-height: 44px; margin-top: 8px; font-size: 9px; font-weight: 800; letter-spacing: .7px; color: #d1eae0; }

/* Bonus tools replace two existing round-tools slots. No extra console row. */
#bonus-control { display: contents; }
#bonus-control[hidden] { display: none !important; }
.controls.bonus-controls-active .round-tools > :is(#autoplay,#replay) { display: none !important; }
.controls.bonus-controls-active .round-tools #bonus-auto { order: 0; }
.controls.bonus-controls-active .round-tools #bonus-finish { order: 1; }
.controls.bonus-controls-active .round-tools #history { order: 2; }
.controls .round-tools :is(#bonus-auto,#bonus-finish) {
  min-width: 0;
  min-height: 44px !important;
  max-width: 100%;
  padding: 4px 3px !important;
  font-size: 8px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.controls .round-tools #bonus-auto[aria-pressed=true] { background: linear-gradient(150deg, #d4ffe1, #7bd9c7); color: #1a4253; border-color: #ffffdc !important; }
.controls .round-tools #bonus-finish { display: flex; align-items: center; justify-content: center; background: #192e469c; color: #ffd2b3; border-color: #b0c7d35c !important; }
.controls .round-tools #bonus-finish svg { width: 24px; height: 24px; flex: 0 0 24px; fill: currentColor; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
#bonus-control button:disabled { cursor: default; }
#language:focus-visible, #autoplay-dialog :is(button,input,select):focus-visible, #bonus-control button:focus-visible { outline: 3px solid #bdffeb; outline-offset: 3px; }

@media (max-width: 700px) {
  .language-control { width: 44px; flex-basis: 44px; }
  #language { width: 44px; padding-inline: 3px; font-size: 9px; border-radius: 7px; }
  .topbar .brand strong { font-size: 29px; }
  .topbar .brand span { font-size: 9px; letter-spacing: 1.3px; }
  .topbar .brand small { font-size: 4.5px; max-width: 69px; }
  .controls .secondary { grid-template-columns: minmax(0,1fr) 140px; gap: 6px; }
  .controls .round-tools { grid-template-columns: repeat(3,44px); gap: 4px; }
  .controls .round-tools button { min-width: 0; padding: 4px 2px !important; font-size: 7px; line-height: 1.25; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; }
  .controls .round-tools #autoplay { width: 44px; min-height: 44px; padding: 4px 1px !important; white-space: normal; overflow-wrap: anywhere; }
  .controls .buy-ticket { gap: 4px; padding-inline: 5px; font-size: 9px; letter-spacing: 0; }
  .controls .buy-ticket > svg { width: 25px; height: 25px; flex: 0 0 25px; }
  .controls .buy-ticket small { font-size: 7.5px; letter-spacing: 0; }
  #autoplay-dialog { width: calc(100% - 22px); max-height: calc(100svh - 22px); padding: 20px 18px 15px; border-radius: 11px; }
  #autoplay-dialog .autoplay-intro { margin-block: 14px 17px; font-size: 11px; }
  .autoplay-fields { gap: 9px; margin-block: 13px; }
  .autoplay-fields > label, .autoplay-stake { padding: 11px; }
  .autoplay-loss-field { margin-top: 16px; }
}
@media (max-width: 370px) {
  .topbar .brand span { font-size: 6.8px; letter-spacing: .9px; }
  .topbar .brand strong { font-size: 21px; letter-spacing: .3px; }
  .topbar .brand small { font-size: 4px; max-width: 45px; }
  .top-actions .balance { width: 114px; gap: 3px; padding: 4px !important; }
  .top-actions .balance strong { font-size: 13px; letter-spacing: -.55px; }
  .top-actions .balance small { font-size: 4.5px; letter-spacing: 0; }
  .controls .buy-ticket > svg { width: 20px; height: 20px; flex-basis: 20px; }
  .controls .buy-ticket { font-size: 8px; gap: 3px; }
  .controls .buy-ticket small { font-size: 7px; }
  #autoplay-dialog { padding: 18px 14px 12px; }
  #autoplay-dialog h2 { font-size: 25px; }
  .autoplay-fields > label > span, .autoplay-stake > span { font-size: 7px; }
}
.no-motion #bonus-control *, .no-motion #autoplay-dialog *, .no-motion #language { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  #bonus-control *, #autoplay-dialog *, #language { transition: none !important; animation: none !important; }
}

/* COASTLINE HEAT v9.6 — a language badge with an unclipped, keyboard-ready menu. */
.language-control.language-picker-ready { position: relative; }
.language-control.language-picker-ready > #language {
  position: absolute;
  width: 1px; min-width: 0; height: 1px; min-height: 0;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%);
  white-space: nowrap;
}
.language-picker-toggle {
  display: grid; grid-template-columns: 18px 13px 5px; align-items: center; justify-content: center;
  gap: 2px; width: 100%; min-width: 0; height: 44px; min-height: 44px;
  padding: 5px; border: 1px solid #c9ffed; border-radius: 9px;
  background: linear-gradient(155deg,#759ca3,#3e687d 38%,#214159 40%,#31566a);
  color: #fff5dc; box-shadow: inset 0 1px #ebfff773,0 3px #162d45,0 4px #9acbca66;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.language-picker-toggle:hover:not(:disabled),.language-picker-toggle[aria-expanded="true"] {
  border-color: #fff0ce;
  background: linear-gradient(155deg,#a2d1c8,#628f99 38%,#365d76 40%,#4c7985);
}
.language-picker-toggle[aria-expanded="true"] { box-shadow: inset 0 1px #f6ffe982,0 3px #25324e,0 0 0 2px #f6a99252; }
.language-picker-toggle:active:not(:disabled) { transform: translateY(1px); }
.language-picker-flag,.language-picker-item-flag { font-family: 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; font-weight: 400; line-height: 1; }
.language-picker-flag { font-size: 18px; width: 18px; }
.language-picker-code { font: 850 10px/1 var(--finish-body,'Trebuchet MS',sans-serif); letter-spacing: -.2px; }
.language-picker-chevron { width: 5px; height: 5px; border: solid #d4f6e9; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-1px); }
.language-picker-toggle[aria-expanded="true"] .language-picker-chevron { transform: rotate(225deg) translate(-1px,-1px); }
.language-picker-toggle:focus-visible,.language-picker-item:focus-visible { outline: 3px solid #c4ffed; outline-offset: 3px; }
.language-picker-menu {
  position: fixed; z-index: 1000; box-sizing: border-box;
  width: min(272px,calc(100vw - 20px)); max-height: min(480px,calc(100svh - 20px));
  display: grid; gap: 3px; padding: 9px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  border: 1px solid #b7e3dca3; border-radius: 14px;
  background: radial-gradient(ellipse at 0 0,#368a8466,transparent 68%),linear-gradient(145deg,#183749,#22283e 72%,#413047);
  color: #fff2dc; box-shadow: inset 0 1px #eeffea33,0 0 0 3px #081e2d55,0 18px 46px #07121fc9;
  scrollbar-width: thin; scrollbar-color: #80cdbd #203449;
}
.language-picker-menu[hidden] { display: none !important; }
.language-picker-item {
  display: grid; grid-template-columns: 27px minmax(0,1fr) 24px 17px; align-items: center;
  column-gap: 10px; width: 100%; min-width: 0; min-height: 41px;
  margin: 0; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: #f8eedc; text-align: left;
  font: 650 14px/1.2 var(--finish-body,'Trebuchet MS',sans-serif);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.language-picker-item:hover,.language-picker-item:focus-visible { background: #b1e6da14; border-color: #afdcca5c; }
.language-picker-item[aria-checked="true"] {
  background: linear-gradient(105deg,#d4f6df,#9bd9cf); color: #183c4c;
  border-color: #e5ffe7; box-shadow: inset 0 1px #fffced8c,0 2px #102c4055;
}
.language-picker-item-flag { width: 27px; font-size: 23px; }
.language-picker-name { white-space: nowrap; }
.language-picker-item-code { color: #b8ccce; font-size: 10px; font-weight: 800; letter-spacing: .4px; text-align: right; }
.language-picker-item[aria-checked="true"] .language-picker-item-code { color: #386679; }
.language-picker-check { visibility: hidden; color: #8d4b55; font-size: 15px; font-weight: 900; text-align: right; }
.language-picker-item[aria-checked="true"] .language-picker-check { visibility: visible; }
@media(max-width:700px) {
  .language-picker-toggle { grid-template-columns: 16px 12px 4px; gap: 2px; padding: 3px; border-radius: 7px; }
  .language-picker-flag { width: 16px; font-size: 16px; }
  .language-picker-code { font-size: 9px; }
  .language-picker-chevron { width: 4px; height: 4px; }
  .language-picker-item { min-height: 44px; }
}
@media(forced-colors:active) {
  .language-picker-toggle,.language-picker-menu,.language-picker-item[aria-checked="true"] { border-color: ButtonText; }
  .language-picker-item[aria-checked="true"] { outline: 1px solid Highlight; outline-offset: -3px; }
  .language-picker-chevron { border-color: ButtonText; }
}

/* COASTLINE HEAT v9.4 — live totals occupy the existing side-meter card.
   Absolute placement and hidden original children never add cabinet or board rows. */

.round-total.live-meter-active { position: relative; }
.round-total.live-meter-active > :is(#round-label,#round-total,#net) { visibility: hidden; }
#live-win {
  --payout-cream: #fff0cd;
  --payout-cyan: #b8ffe8;
  position: absolute;
  inset: 7px 10px 6px;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  container-type: inline-size;
  color: var(--payout-cream);
  font-variant-numeric: tabular-nums lining-nums;
}
.round-total.live-meter-active > #live-win { display: flex; }
#live-win[hidden] { display: none !important; }
#live-win > :is(.live-win-current,.live-win-total) { min-width: 0; }
#live-win .live-win-total { order: 0; display: flex; flex-direction: column; gap: 1px; }
#live-win .live-win-current { order: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 5px; }
#live-win :is(#live-spin-label,#live-total-label) {
  min-width: 0;
  margin: 0;
  color: #c7e8e0;
  font: 800 7px/1.15 var(--finish-body, 'Trebuchet MS', sans-serif);
  letter-spacing: .1px;
  overflow-wrap: anywhere;
}
#live-win #live-total-label { display: block; color: #e9cecd; font-size: 8px; }
#live-win :is(#live-spin-amount,#live-total-amount) {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  font-family: var(--finish-body, 'Trebuchet MS', sans-serif);
  font-weight: 900;
  font-style: normal;
  line-height: 1.05;
  white-space: nowrap;
  transform-origin: left center;
}
#live-win #live-total-amount {
  color: var(--payout-cream);
  font-size: clamp(21px, 15cqi, 30px);
  letter-spacing: -.65px;
  text-shadow: 0 1px #3a203d9c;
}
#live-win #live-spin-amount { flex: 0 0 auto; color: var(--payout-cyan); font-size: 12px; letter-spacing: -.2px; }
#live-win-note {
  order: 2;
  display: block;
  min-width: 0;
  margin: 0;
  color: #bfd4db;
  font: 600 7px/1.15 var(--finish-body, 'Trebuchet MS', sans-serif);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
#live-win[data-has-win=false] :is(#live-spin-amount,#live-total-amount) { color: #d4e0da; text-shadow: none; }
#live-win[data-has-win=true] strong.pulse { animation: payout-number-pop 360ms cubic-bezier(.2,.8,.25,1) both; }
#live-win[data-mode=preview] #live-win-note { color: #e1cfe7; }

/* A bounded badge covers only the centre of the board, leaving tiles readable. */
#win-floats { position: absolute; inset: 0; z-index: 12; pointer-events: none; container-type: inline-size; }
#win-floats :is(.win-cascade,.win-spin) {
  --badge-cream: #fff2d3;
  position: absolute;
  top: 44%;
  left: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: max-content;
  max-width: calc(100% - 28px);
  min-width: 110px;
  padding: 8px 20px 10px;
  border: 1px solid #dcfbe5c9;
  border-radius: 10px 19px 10px 19px;
  background: linear-gradient(115deg, #144657d1, #15364dda 54%, #6c354dd1);
  color: var(--badge-cream);
  box-shadow: inset 0 1px #efffea63, inset 0 -2px #1230486b, 0 4px 0 #10344955, 0 7px 17px #061e376e;
  text-align: center;
  font-weight: 900;
  transform: translate(-50%,-50%);
  opacity: 1;
  pointer-events: none;
  animation: payout-badge-in 240ms cubic-bezier(.16,.8,.28,1) both;
}
#win-floats :is(.win-cascade,.win-spin)::before {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #a6ffe6 18%, #f3ddba 58%, #ff8eaa 85%, transparent);
  border-radius: 3px;
  pointer-events: none;
}
#win-floats :is(.win-cascade,.win-spin) > small {
  display: block;
  max-width: 100%;
  color: #c9ffe7;
  font: 850 9px/1.3 var(--finish-body, 'Trebuchet MS', sans-serif);
  letter-spacing: 1.3px;
  overflow-wrap: anywhere;
}
#win-floats :is(.win-cascade,.win-spin) > strong {
  display: block;
  max-width: 100%;
  color: var(--badge-cream);
  font: 900 clamp(28px, 10.5cqi, 60px)/1.02 var(--finish-display, Impact, 'Arial Narrow', sans-serif);
  letter-spacing: .2px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
  text-shadow: 0 2px #66304b, 0 4px #0b2e4599;
}
#win-floats .win-cascade > strong::before { content: '+'; }
#win-floats :is(.win-cascade,.win-spin) > span {
  display: block;
  max-width: 100%;
  color: #daece3;
  font: 650 9px/1.35 var(--finish-body, 'Trebuchet MS', sans-serif);
  letter-spacing: .1px;
  overflow-wrap: anywhere;
}
#win-floats :is(.win-cascade,.win-spin) > span:empty { display: none; }
#win-floats .win-spin { top: 46%; padding-inline: 23px; border-color: #ffe7c9; background: linear-gradient(115deg, #285369d4, #41324fd6 55%, #914155d1); }
#win-floats .win-spin > small { color: #ffe0c3; }
#win-floats :is(.win-cascade,.win-spin)[data-tier=large] { border-color: #fff0ca; box-shadow: inset 0 1px #fffce89c, inset 0 -2px #17344873, 0 4px #71415466, 0 9px 22px #05293b80; }
#win-floats :is(.win-cascade,.win-spin)[data-tier=large] > strong { font-size: clamp(31px, 11.6cqi, 68px); }
/* One short light speck, only on an actual positive payout's large tier. */
#win-floats :is(.win-cascade,.win-spin)[data-tier=large]::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 10px;
  width: 5px;
  height: 5px;
  border: 1px solid #fff9e2;
  border-radius: 50%;
  background: #ffd7a8;
  box-shadow: 0 0 5px #fff1bf66;
  pointer-events: none;
  animation: payout-light 650ms ease-out 1 both;
}

@keyframes payout-number-pop {
  0% { transform: scale(.98); }
  40% { transform: scale(1.055); }
  100% { transform: scale(1); }
}
@keyframes payout-badge-in {
  from { opacity: 0; transform: translate(-50%,calc(-50% + 8px)) scale(.91); }
  to { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
@keyframes payout-light {
  0% { opacity: 0; transform: translate(0,0) scale(.6); }
  22% { opacity: .95; }
  100% { opacity: 0; transform: translate(11px,-14px) scale(.3); }
}

@media (max-width: 700px) {
  #live-win { inset: 5px 7px; gap: 2px; }
  #live-win .live-win-current { gap: 3px; }
  #live-win :is(#live-spin-label,#live-total-label) { font-size: 6.5px; line-height: 1.1; letter-spacing: 0; }
  #live-win #live-total-amount { font-size: clamp(16px, 17cqi, 21px); letter-spacing: -.55px; }
  #live-win #live-spin-amount { font-size: 10px; line-height: 1.1; letter-spacing: -.15px; }
  #live-win-note { font-size: 6px; line-height: 1.15; }
  #win-floats :is(.win-cascade,.win-spin) { min-width: 96px; max-width: calc(100% - 20px); padding: 7px 13px 8px; gap: 2px; border-radius: 8px 15px 8px 15px; }
  #win-floats :is(.win-cascade,.win-spin) > small { font-size: 8px; letter-spacing: .7px; }
  #win-floats :is(.win-cascade,.win-spin) > span { font-size: 8px; }
}
@media (max-width: 370px) {
  #live-win { inset-inline: 5px; }
  #live-win #live-total-amount { font-size: 16px; letter-spacing: -.6px; }
  #live-win #live-spin-amount { font-size: 9px; }
}
@media (max-width: 700px) and (max-height: 650px) {
  #live-win { inset-block: 3px; gap: 0; }
  #live-win .live-win-total { gap: 0; }
  #live-win :is(#live-spin-label,#live-total-label) { font-size: 6px; line-height: 1.05; }
  #live-win #live-total-amount { font-size: 16px; line-height: 1; }
  #live-win #live-spin-amount { font-size: 9px; line-height: 1.05; }
  #live-win-note { line-height: 1.05; }
}

.no-motion #live-win strong.pulse,
.no-motion #win-floats :is(.win-cascade,.win-spin) { animation: none !important; transition: none !important; }
.no-motion #live-win strong.pulse { transform: none; }
.no-motion #win-floats :is(.win-cascade,.win-spin) { opacity: 1; transform: translate(-50%,-50%); }
.no-motion #win-floats :is(.win-cascade,.win-spin)::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  #live-win strong.pulse, #win-floats :is(.win-cascade,.win-spin) { animation: none !important; transition: none !important; }
  #live-win strong.pulse { transform: none; }
  #win-floats :is(.win-cascade,.win-spin) { opacity: 1; transform: translate(-50%,-50%); }
  #win-floats :is(.win-cascade,.win-spin)::after { display: none; }
}

/* Keep the existing side meter readable at the model's largest payout. */
.round-total[data-large-amount=true] > #round-total { font-size: 26px; }
@media (max-width:700px) { .round-total[data-large-amount=true] > #round-total { font-size: clamp(15px, 5vw, 20px); } }

.sun-meter[data-charge]:not([data-charge=""])::after{content:attr(data-charge);position:absolute;left:50%;bottom:14px;transform:translateX(-50%);white-space:nowrap;max-width:100%;padding:3px 5px;border:1px solid #8cffe5;border-radius:5px;background:#063d4deb;color:#baffdf;font:900 11px/1.1 system-ui;box-shadow:0 0 12px #66efc53b;pointer-events:none}
@media(max-width:700px){.sun-meter[data-charge]:not([data-charge=""])::after{bottom:9px;font-size:7px;padding:2px 3px}}

/* Original dashboard radio. Off remains still and has no audio network cost. */
.sound-dialog>.heat-radio{grid-column:1/-1;min-width:0;width:100%}
.heat-radio{border:1px solid #79d4cd80;border-radius:16px;padding:14px;margin:16px 0 18px;background:linear-gradient(125deg,#102c3a,#29344b);box-shadow:inset 0 1px #fff1ce33,0 8px 22px #06192730;color:#fff0ce}
.radio-face{display:flex;align-items:center;gap:22px;min-height:85px;padding:12px 17px;border:1px solid #a7ddd250;border-radius:10px;background:linear-gradient(105deg,#183c47,#112a38);box-shadow:inset 0 2px 7px #061c3280}
.radio-face>div:first-child{display:grid;gap:4px;min-width:110px}.radio-face span{font-size:9px;letter-spacing:3px;color:#87dfd4}.radio-face b{font:italic 46px/.95 Impact,sans-serif;letter-spacing:2px;color:#a6f5e8;text-shadow:0 0 20px #68d9d633}.radio-face small{font-size:9px;letter-spacing:2px;color:#efd0b5}.radio-face>svg{margin-left:auto;width:60px;height:60px;fill:none;stroke:#ffac8c;stroke-width:2;opacity:.8}
.radio-bars{display:flex;align-items:center;justify-content:center;height:45px;gap:4px;flex:1}.radio-bars i{width:5px;height:6px;border-radius:2px;background:#708f97;transform-origin:center}.heat-radio[data-on=true] .radio-bars i{height:25px;background:linear-gradient(#ffb595,#83e9d9);animation:radio-meter 1.2s ease-in-out infinite alternate}.radio-bars i:nth-child(2n){animation-delay:-.4s!important}.radio-bars i:nth-child(3n){animation-delay:-.8s!important}
.radio-controls{display:grid;grid-template-columns:minmax(0,1fr)180px;align-items:end;gap:12px;margin-top:14px}.radio-controls>label{display:grid;gap:7px;margin:0!important;color:#a9dfd9;font-size:11px}.radio-controls select{min-width:0;width:100%;height:43px;padding:0 9px;border-radius:9px;border:1px solid #bce6dc60;background:#183445;color:#fff0d1;font-size:11px}.radio-controls button{height:43px;border:1px solid #f9d0a5;border-radius:10px;background:linear-gradient(112deg,#85e6d6 0 30%,#ffad92 31%,#ee718e 100%);color:#183441;font-size:11px;font-weight:900;box-shadow:0 3px #8a4a5b}.heat-radio[data-on=true] .radio-controls button{background:#193948;color:#a9eddf;border-color:#86d8cc}.heat-radio>p{font-size:10px!important;line-height:1.5;margin:12px 0 0!important;color:#b4d2cf}
.city-beacons{position:absolute;inset:0;z-index:3;pointer-events:none}.city-beacons i{position:absolute;width:12vw;height:16vh;left:0;top:20%;border-radius:50%;background:radial-gradient(ellipse,#ee63b622,transparent 70%);animation:city-sign-glint 7s ease-in-out infinite}.city-beacons i:nth-child(2){left:auto;right:2%;top:37%;background:radial-gradient(ellipse,#55dfe726,transparent 70%);animation-delay:-3s}.city-beacons i:nth-child(3){left:22%;top:75%;background:radial-gradient(ellipse,#ffd17916,transparent 70%);animation-delay:-5s}.quiet-city .city-beacons,.no-motion .city-beacons{display:none}
@keyframes radio-meter{0%{transform:scaleY(.24)}45%{transform:scaleY(.9)}100%{transform:scaleY(.42)}}@keyframes city-sign-glint{0%,10%,40%,100%{opacity:.25}18%,28%,68%{opacity:1}23%,72%{opacity:.5}}
@media(max-width:480px){.heat-radio{padding:11px}.radio-face{gap:12px;padding:11px}.radio-face>svg{width:42px;height:42px}.radio-face b{font-size:40px}.radio-controls{grid-template-columns:minmax(0,1fr);gap:11px}.radio-controls button{width:100%}.radio-bars{gap:3px}.radio-bars i{width:4px}}
@media(prefers-reduced-motion:reduce){.radio-bars i,.city-beacons i{animation:none!important}}.no-motion .radio-bars i{animation:none!important}

/* Settled-symbol roles. No layout changes, idle animation or synthetic outcome hints. */
.tile.symbol-motion-ready{--sm-color:#b5ccc9;--sm-rim:#b7dad72c;--sm-bed:#b7dad703;isolation:isolate}
.tile.symbol-motion-ready[data-symbol-tier="2"]{--sm-color:#c5d3d9;--sm-rim:#c5d3d937}
.tile.symbol-motion-ready[data-symbol-tier="3"]{--sm-color:#e5d2a3;--sm-rim:#e5d2a349}
.tile.symbol-motion-ready[data-symbol-tier="4"]{--sm-color:#d5b3fa;--sm-rim:#d5b3fa78;--sm-bed:#c490f10b}
.tile.symbol-motion-ready[data-symbol-tier="5"]{--sm-color:#b1f3fa;--sm-rim:#b1f3fa91;--sm-bed:#75dfec0e}
.tile.symbol-motion-ready[data-symbol-tier="6"]{--sm-color:#ffe2a1;--sm-rim:#ffe2a1b5;--sm-bed:#ffdd9311}
.tile.symbol-motion-ready[data-symbol-tier="7"]{--sm-color:#ffb18b;--sm-rim:#ffb18bda;--sm-bed:#ff8d6c16}
.tile.symbol-motion-ready>.sm-role-surface{position:absolute;inset:5%;z-index:0;pointer-events:none;border:1px solid transparent;border-bottom-color:var(--sm-rim);border-radius:7px;background:linear-gradient(transparent 56%,var(--sm-bed));opacity:1}
.tile.symbol-motion-ready>.sm-role-surface:after{content:'';position:absolute;bottom:0;left:15%;width:calc(var(--sm-rank) * 10%);max-width:70%;height:2px;background:var(--sm-color);opacity:.45;border-radius:2px}
.tile.symbol-motion-ready[data-symbol-band="mid"]>.sm-role-surface{border-color:var(--sm-rim);border-top-color:transparent;background:linear-gradient(140deg,var(--sm-bed),transparent 45%,var(--sm-bed))}
.tile.symbol-motion-ready[data-symbol-band="high"]>.sm-role-surface{border-color:var(--sm-rim);background:linear-gradient(140deg,#fff7d214,transparent 32%,transparent 68%,var(--sm-bed));box-shadow:inset 0 -3px #fff1bb0b}
.tile.symbol-motion-ready[data-symbol-band="high"]>.sm-role-surface:before{content:'';position:absolute;inset:3px;border-top:1px solid #fff6d94a;border-radius:4px}
.tile.symbol-motion-ready[data-symbol-role="scatter"]{--sm-color:#ffda92;--sm-rim:#ff9d70;--sm-bed:#ff996523}
.tile.symbol-motion-ready[data-symbol-role="scatter"]>.sm-role-surface{inset:3%;border:2px solid #ffb178;border-radius:8px;background:linear-gradient(135deg,#ffd6a126,#ff797414 50%,#d9a6f51c);box-shadow:inset 0 0 0 1px #fff0cd57}
.tile.symbol-motion-ready[data-symbol-role="scatter"]>.sm-role-surface:after{width:74%;left:13%;background:#fff0c7;height:3px;opacity:.85}
.tile.symbol-motion-ready[data-symbol-role="multiplier"]{--sm-color:#89fff1;--sm-rim:#89fff1;--sm-bed:#5afcdf1b}
.tile.symbol-motion-ready[data-symbol-role="multiplier"]>.sm-role-surface{inset:3%;border:2px solid #6aeadc;background:linear-gradient(150deg,#9dfff319,#24587811 55%,#baadfa25);box-shadow:inset 0 0 0 1px #ddfff966;border-radius:8px}
.tile.symbol-motion-ready[data-symbol-role="multiplier"]>.sm-role-surface:after{width:66%;left:17%;height:3px;background:#bcfff0;opacity:.85}
.tile.symbol-motion-ready>svg.sm-art{z-index:1;animation:none!important;transition:none;transform-origin:50% 62%}
.tile.symbol-motion-ready.winning>svg.sm-art{animation:none!important;filter:drop-shadow(0 3px 3px #001a3277) saturate(1.12) brightness(1.06)}
.tile.symbol-motion-ready.winning:before,.tile.symbol-motion-ready.multiplier-hit:before{content:none!important;animation:none!important}
.tile.symbol-motion-ready.winning:after{animation:none!important;z-index:3;box-shadow:none;border-color:var(--group-color,var(--sm-color))}
.tile.symbol-motion-ready.scatter-glow{animation:none!important}
.tile.symbol-motion-ready>.sm-role-label{position:absolute;z-index:4;top:5%;left:50%;transform:translateX(-50%);border:1px solid #c8fff4;background:#76e7d5;color:#0c3647;border-radius:3px;padding:1px 4px;font-size:clamp(6px,.65vw,9px);font-weight:950;line-height:1.2;letter-spacing:.6px;pointer-events:none;white-space:nowrap}
.tile.symbol-motion-ready[data-symbol-role="scatter"]>.sm-role-label{top:auto;bottom:5%;background:#ffb982;color:#402d3a;border-color:#fff1c9}
.tile.symbol-motion-ready .bonus-label{z-index:4;bottom:4%;min-width:62%;text-align:center;padding:2px 4px;border:1px solid #fff1c9;border-radius:3px;background:linear-gradient(#ffe4b5,#ffa677);color:#3a2635;font-size:clamp(8px,.85vw,12px);font-weight:950;letter-spacing:.6px;line-height:1.1;box-shadow:0 2px #a0524555;text-shadow:none}
.tile.symbol-motion-ready .sun-number{z-index:4;border-color:#bbffef;background:#103b49ed;color:#fff5d8;box-shadow:0 2px #061b2799;font-weight:950}
.tile.symbol-motion-ready .position-mark{z-index:5}
.tile.symbol-motion-ready>svg.sm-fx{position:absolute;left:2%;top:2%;width:96%;height:96%;z-index:2;overflow:hidden;pointer-events:none;filter:none!important;animation:none!important;transform:none!important;contain:paint}
.tile.symbol-motion-ready>svg.sm-fx [data-part="reel"],.tile.symbol-motion-ready>svg.sm-fx [data-part="dial"]{transform-box:fill-box;transform-origin:center}
.tile.symbol-motion-ready.sm-win-active>.sm-role-surface,.tile.symbol-motion-ready.sm-static-hit>.sm-role-surface{border-color:var(--sm-color);background:linear-gradient(145deg,var(--sm-bed),transparent 40%,var(--sm-bed))}
.tile.symbol-motion-ready.sm-static-hit>.sm-role-surface:after{opacity:1}
.no-motion .tile.symbol-motion-ready>svg.sm-fx{display:none}
@media(max-width:700px){
 .tile.symbol-motion-ready>svg.sm-fx{left:.5%;top:.5%;width:99%;height:99%}
 .tile.symbol-motion-ready>.sm-role-surface{border-radius:5px}
 .tile.symbol-motion-ready[data-symbol-role="scatter"]>.sm-role-surface,.tile.symbol-motion-ready[data-symbol-role="multiplier"]>.sm-role-surface{border-width:1.5px;border-radius:6px}
 .tile.symbol-motion-ready .bonus-label{font-size:8px;letter-spacing:.3px;padding:1px 3px}
 .tile.symbol-motion-ready>.sm-role-label{font-size:6px;letter-spacing:.3px;padding:1px 3px}
}
@media(prefers-reduced-motion:reduce){.tile.symbol-motion-ready>svg.sm-fx{display:none}}

/* HEATLANE / AFTERPALM. Final identity layer; keeps the existing header and board grid. */
.topbar .brand {
  width: 128px;
  max-width: 100%;
  min-width: 0;
  line-height: 1;
  transform: skew(-6deg);
  filter: drop-shadow(0 2px 0 #153245e0);
}
.topbar .brand > span {
  display: block;
  font: 36px/.8 Impact, 'Arial Narrow', sans-serif;
  font-weight: 400;
  letter-spacing: 5.4px;
  color: #84f3dc;
  -webkit-text-stroke: .35px #d6ffee;
  text-shadow: 0 1px #1b7783, 0 2px #11394e;
}
.topbar .brand > strong {
  display: block;
  position: relative;
  width: fit-content;
  font: 51px/.86 Impact, 'Arial Narrow', sans-serif;
  font-weight: 400;
  letter-spacing: 3.5px;
  color: #ffb28c;
  -webkit-text-stroke: .6px #fff0cb;
  text-shadow: 0 2px #bd5155, 0 4px #142e44;
}
.topbar .brand > strong::after {
  content: '';
  position: absolute;
  left: 1px;
  right: 4px;
  bottom: -3px;
  height: 1px;
  background: linear-gradient(90deg, #76f5dc 0 35%, #fff0cc 35% 38%, #ff8575 38%);
  opacity: .9;
}
.topbar .brand > small {
  display: block;
  max-width: 128px;
  margin-top: 7px;
  font: 800 6px/1.2 'Avenir Next', 'Trebuchet MS', sans-serif;
  letter-spacing: .8px;
  color: #fff0d6;
  transform: skew(6deg);
  text-shadow: 0 1px 3px #102d3e;
}
@supports (-webkit-background-clip: text) {
  .topbar .brand > span {
    background: linear-gradient(180deg, #e4fff0 0%, #8bffe4 31%, #53d7d1 72%, #b0ffe6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .topbar .brand > strong {
    background: linear-gradient(180deg, #fff5d8 0%, #ffe7b6 36%, #ffb48b 43%, #ff7e70 73%, #ffc29d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.marquee::before { content: 'HEATLANE / VOL. 01'; color: #bdffec; }
.marquee { border-bottom-color: #89e5d339; }
.reel-lamps i.landed { background: #93ffe5; box-shadow: 0 0 5px #61e9d53d; }
.pursuit-hud {
  color: #b7f1e1;
  border-color: #91e3d36b;
  background: linear-gradient(110deg, #204a53ee, #254760ee);
}
.pursuit-hud > span > i { background: #ffae88; box-shadow: none; }
.pursuit-hud > b { color: #fff0ce; font-variant-numeric: tabular-nums; }
[data-pursuit-phase=arrival] .pursuit-hud { border-color: #ffc795a6; }
@media (max-width: 700px) {
  .topbar .brand { width: 69px; }
  .topbar .brand > span { font-size: 20px; line-height: .78; letter-spacing: 2.1px; -webkit-text-stroke: .2px #d6ffee; text-shadow: 0 1px #1b7783; }
  .topbar .brand > strong { font-size: 28px; line-height: .82; letter-spacing: .8px; -webkit-text-stroke: .35px #fff0cb; text-shadow: 0 1.5px #bd5155, 0 3px #142e44; }
  .topbar .brand > strong::after { bottom: -2px; right: 2px; opacity: .8; }
  .topbar .brand > small { max-width: 69px; margin-top: 5px; font-size: 4.5px; letter-spacing: 0; line-height: 1.2; }
}
@media (max-width: 370px) {
  .topbar .brand { width: 45px; }
  .topbar .brand > span { font-size: 16px; letter-spacing: 1px; }
  .topbar .brand > strong { font-size: 21px; line-height: .82; letter-spacing: .3px; -webkit-text-stroke: .25px #fff0cb; }
  .topbar .brand > small { max-width: 45px; font-size: 4px; letter-spacing: 0; margin-top: 4px; }
}
@media (min-width: 701px) and (max-height: 560px) {
  .topbar .brand { width: 93px; }
  .topbar .brand > span { font-size: 24px; letter-spacing: 3px; }
  .topbar .brand > strong { font-size: 37px; letter-spacing: 1.8px; }
  .topbar .brand > small { max-width: 93px; margin-top: 5px; font-size: 5px; letter-spacing: .25px; }
}
@media (max-width: 700px) and (max-height: 650px) {
  .topbar .brand > span { font-size: 15px; }
  .topbar .brand > strong { font-size: 21px; }
  .topbar .brand > small { margin-top: 4px; font-size: 4px; }
}

/* Award reveal stays on the real board. Four actual cards light up first. */
.board.bonus-triggering .tile:not(.bonus-trigger-card){opacity:.22;filter:saturate(.45);transition:opacity .35s ease,filter .35s ease}
.board.bonus-triggering .bonus-trigger-card{z-index:8;isolation:isolate;border-color:#fff1ad;background:radial-gradient(ellipse,#ffd05855,transparent 72%);box-shadow:inset 0 0 24px #ffd06870,0 0 22px #ffbe4150}
.board.bonus-triggering .bonus-trigger-card:after{content:'';position:absolute;inset:3%;border:2px solid #ffe098;border-radius:10px;pointer-events:none;animation:bonus-card-charge 1600ms calc(var(--trigger-order)*110ms) both}
@keyframes bonus-card-charge{0%{opacity:0;transform:scale(.88)}18%{opacity:1;transform:scale(1.06)}48%{opacity:.8;transform:scale(1)}78%{opacity:.8;transform:scale(1)}100%{opacity:.45;transform:scale(1)}}
.natural-bonus{position:absolute;inset:0;z-index:25;display:grid;place-content:center;text-align:center;padding:14px;box-sizing:border-box;pointer-events:auto;border-radius:inherit;overflow:hidden;background:linear-gradient(180deg,#041d3200 0,#041d3230 28%,#061a3650 100%);color:#fff5d7;outline:0}
.natural-bonus[hidden]{display:none}
.natural-bonus:before{content:'';position:absolute;width:650px;height:650px;left:50%;top:50%;margin:-325px;background:repeating-conic-gradient(from 15deg,#ffda7015 0deg 9deg,transparent 9deg 25deg);border-radius:50%;pointer-events:none;animation:bonus-award-rays 2200ms ease-out both;opacity:.9}
.natural-bonus-panel{position:relative;width:min(460px,75vw);box-sizing:border-box;padding:21px 28px 19px;border:2px solid #ffe5a5;border-radius:26px;background:linear-gradient(128deg,#0b5355ed 0,#10384aee 46%,#662c5de8 100%);box-shadow:0 0 0 5px #0b253bcc,0 14px 0 #081d3299,0 0 75px #ffbf4a44,inset 0 1px 0 #fff5cb77;transform:translateY(6px);opacity:0;animation:bonus-award-panel 750ms 1250ms cubic-bezier(.2,.8,.2,1) both}
.natural-bonus-top{display:flex;justify-content:center;gap:9px;align-items:center;font:900 11px/1.25 system-ui;letter-spacing:2px;color:#91f5da}
.natural-bonus-top svg{width:38px;height:38px;filter:drop-shadow(0 2px 4px #0009)}
.natural-bonus-top b{padding:4px 9px;border:1px solid #fddb9a;border-radius:7px;color:#ffe8ac;font-size:15px;letter-spacing:0;background:#152439}
.natural-bonus h2{margin:8px 0 1px;font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(28px,4vw,47px);line-height:1;text-transform:uppercase;letter-spacing:.5px;color:#ffbba4;text-shadow:0 3px 0 #081e35}
.natural-bonus-award{display:flex;align-items:center;justify-content:center;gap:14px;margin:5px 0 14px}
.natural-bonus-award strong{font-family:Impact,'Arial Narrow',sans-serif;font-size:83px;line-height:.95;letter-spacing:-2px;color:#fff0ba;text-shadow:0 4px 0 #7e5431,0 0 24px #fbc25160}
.natural-bonus-award span{max-width:150px;text-align:left;font:950 16px/1.15 system-ui;letter-spacing:1px;color:#fff2da}
.natural-bonus .primary-action{width:100%;min-height:54px;margin:0;display:flex;justify-content:center;gap:14px;align-items:center;font-size:17px;font-weight:950;letter-spacing:1px;background:linear-gradient(112deg,#90f5dc 0,#47bebd 25%,#ffc290 26%,#fa859b 66%,#e75186 100%);color:#123443;border:2px solid #fff0b6;border-radius:14px;box-shadow:0 5px 0 #733753,inset 0 1px 0 #fff9;cursor:pointer}
.natural-bonus .primary-action:disabled{opacity:.4;cursor:default;box-shadow:none}
.natural-bonus .primary-action:focus-visible{outline:3px solid #fff;outline-offset:5px}
.natural-bonus .primary-action:not(:disabled):hover{filter:brightness(1.12);transform:translateY(-1px)}
.natural-bonus .primary-action:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 #733753}
.natural-bonus p{margin:12px 0 0;font:650 10px/1.35 system-ui;letter-spacing:.35px;color:#bfddd5}
.natural-bonus[data-phase=collecting] p{visibility:hidden}
@keyframes bonus-award-panel{0%{opacity:0;transform:translateY(24px) scale(.94)}70%{opacity:1;transform:translateY(-2px) scale(1.015)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes bonus-award-rays{0%{opacity:0;transform:scale(.45) rotate(-8deg)}60%{opacity:.8}100%{opacity:.9;transform:scale(1) rotate(7deg)}}
.natural-bonus[data-reduced=true]:before{animation:none;background:none}
.natural-bonus[data-reduced=true] .natural-bonus-panel{animation:none;opacity:1;transform:none}
.no-motion .board.bonus-triggering .bonus-trigger-card:after{animation:none;opacity:.7}
@media(max-width:700px){.natural-bonus{padding:9px}.natural-bonus-panel{width:min(270px,80vw);padding:11px 16px 13px;border-radius:18px;box-shadow:0 0 0 3px #0b253bcc,0 8px 0 #081d3280,0 0 40px #ffbf4a33}.natural-bonus-top{font-size:8px;letter-spacing:1.1px;gap:6px}.natural-bonus-top svg{width:27px;height:27px}.natural-bonus-top b{font-size:12px;padding:3px 6px}.natural-bonus h2{font-size:28px;margin:5px 0 2px}.natural-bonus-award{gap:11px;margin:4px 0 10px}.natural-bonus-award strong{font-size:65px}.natural-bonus-award span{font-size:12px;max-width:116px}.natural-bonus .primary-action{min-height:45px;font-size:12px;border-radius:10px;letter-spacing:.7px}.natural-bonus p{font-size:8px;margin-top:8px}}
@media(prefers-reduced-motion:reduce){.natural-bonus:before,.natural-bonus-panel,.board.bonus-triggering .bonus-trigger-card:after{animation:none}.natural-bonus-panel{opacity:1;transform:none}}