/* Painted interface components. The raster artwork supplies the chrome,
   machined edges, carbon fiber, lights and glass; HTML supplies live content. */
:root{--frame:url('../public/assets/ui-v2/panel-frame.png');--modal-art:url('../public/assets/ui-v2/modal-frame.png');--header-art:url('../public/assets/ui-v2/header-frame.png');--gold-art:url('../public/assets/ui-v2/gold-button.png');font-synthesis:style}
#illustrated-stage{position:fixed;inset:0;z-index:1;background:url('../public/assets/ui-v2/garage-stage.png') center 56% / cover no-repeat;pointer-events:none;transition:opacity .4s}
body:has(#app[data-screen="race"]) #illustrated-stage,body:has(#app[data-screen="result"]) #illustrated-stage{opacity:0;visibility:hidden}
body:has(#app[data-screen="garage"]) #world,body:has(#app[data-screen="tracks"]) #world{visibility:hidden}
.screen-vignette{background:linear-gradient(0deg,#020611b3,transparent 23%,transparent 78%,#01051166);z-index:2}.scanlines{opacity:.015}
#app{min-height:600px}.topbar,#app[data-screen="race"] .topbar,#app[data-screen="result"] .topbar{height:130px;padding:12px 2%;border:0;background:linear-gradient(#0106139c,transparent);gap:15px}
.brand,#app[data-screen="race"] .brand,#app[data-screen="result"] .brand{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:500px;height:145px;background:var(--header-art) center / 100% 130% no-repeat;filter:drop-shadow(0 5px 17px #00aaff44);justify-content:center;z-index:1}
.brand img{width:83%;height:112px;object-fit:contain;filter:drop-shadow(0 0 9px #48a6ff66)}
.garage-nav{height:60px;gap:7px;align-items:center;z-index:2}.garage-nav button,.icon-button,.small-button,.secondary-button{border:14px solid transparent;border-image:var(--frame) 16% fill stretch;background:none;clip-path:none;color:#e7f6ff;opacity:1;box-shadow:none;filter:drop-shadow(0 0 5px #007aff33)}
.garage-nav button{height:62px;min-width:135px;font-size:16px;letter-spacing:1px;padding:0 6px;font-style:italic}.garage-nav button span{font-size:10px;margin-right:7px}.garage-nav button.active{filter:brightness(1.5) drop-shadow(0 0 6px #00baff88)}.garage-nav button.active:after{display:none}
.top-actions{gap:8px;z-index:2}.wallet{border:18px solid transparent;border-image:var(--frame) 16% fill stretch;background:none;margin:0;padding:0 8px 0 0;height:76px;min-width:195px;gap:7px}.wallet .coin-symbol{width:43px;height:44px;background:url('../public/assets/ui-v2/coin.png') center / contain no-repeat;font-size:0}.wallet small{font-size:8px;letter-spacing:1px}.wallet strong{font-size:27px;font-style:italic}.credit-label{margin-top:12px;font-size:9px}.icon-button{width:49px;height:52px;border-width:13px;font-size:23px;line-height:1;padding:0}.icon-button:hover{border-color:transparent;filter:brightness(1.4)}
.setup-screen{inset:133px 2.2% 141px}.garage-intro{left:1%;top:auto;bottom:160px;z-index:1;pointer-events:none}.garage-intro .eyebrow{display:none}.garage-intro h1{font-size:clamp(31px,3.2vw,58px);line-height:.92;letter-spacing:-1px;color:#58bfff;font-style:italic;text-shadow:2px 3px 0 #092c53,0 0 22px #008aff88;transform:rotate(-8deg)}.garage-intro h1 em{color:#74c8ff}.garage-intro p{display:none}
.showroom-hero{position:absolute;inset:4% 20% 100px 13%;z-index:0;pointer-events:none;display:flex;align-items:center;justify-content:center}.showroom-hero img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 12px #010311aa) drop-shadow(0 0 20px #006aff44);animation:showroom-reveal .4s ease-out}
@keyframes showroom-reveal{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.vehicle-details{top:2%;left:0;bottom:auto;max-width:33%;width:370px;min-height:135px;padding:6px 13px 9px;border:24px solid transparent;border-image:var(--frame) 16% fill stretch;z-index:2;filter:drop-shadow(0 0 12px #008aff44)}.vehicle-details .eyebrow{font-size:9px;letter-spacing:1.5px;color:#a0dbff}#vehicle-name{font-size:clamp(35px,4vw,66px);font-weight:900;font-style:italic;color:#fff;text-shadow:0 0 5px #ff3fa5,0 0 18px #ff2a7e88;margin:10px 0 8px;letter-spacing:1px}#vehicle-tagline{font-size:13px;color:#e4daee;max-width:none;margin:0}.small-line{background:#2d8cc0}
.vehicle-specs{position:absolute;right:0;top:2%;width:28%;max-width:405px;padding:9px 11px;border:26px solid transparent;border-image:var(--frame) 16% fill stretch;z-index:2;filter:drop-shadow(0 0 10px #008aff44)}.vehicle-specs>.panel-title{font-size:10px;margin-bottom:16px}.vehicle-specs>.panel-title span{font-size:8px}.vehicle-stats{width:100%;display:grid;gap:17px}.stat-row{gap:10px;justify-content:space-between;position:relative}.stat-row small{font-size:14px;width:77px;letter-spacing:.6px;font-weight:700;font-style:italic;color:#ecf8ff}.stat-bar{gap:3px;flex:1}.stat-bar i{height:14px;width:auto;flex:1;max-width:16px;background:#071725;border:1px solid #2a6079;transform:skew(-18deg)}.stat-bar i.on{background:#09d8ff;box-shadow:inset 0 0 4px #fff8,0 0 10px #00baff99}.stat-row:nth-child(2) .stat-bar i.on{background:#20ff76;box-shadow:0 0 10px #11ff5588}.stat-row:nth-child(3) .stat-bar i.on{background:#b922ff;box-shadow:0 0 10px #b000ff88}.stat-row:nth-child(4) .stat-bar i.on{background:#ffdb13;box-shadow:0 0 10px #ffdf0088}.stat-row b{font-size:19px;min-width:42px;font-style:italic}.stat-row b span{font-size:12px;color:#89a0b8}.livery-row{margin-top:21px;border-top:1px solid #155187;padding-top:12px;gap:12px}.livery-row small{font-size:9px;letter-spacing:1px;color:#88c5ec}#vehicle-color{width:28px;height:19px;border:2px solid #74d8ff;box-shadow:0 0 8px #19baff}
.circuit-preview{right:0;top:auto;bottom:160px;width:28%;max-width:405px;z-index:2}.circuit-art{height:135px;clip-path:none;border:20px solid transparent;border-image:var(--frame) 16% fill stretch;background:none}.circuit-art-image{background-image:url('../public/assets/ui-v2/circuit-scenes.png');background-size:100% 500%;background-position:50% 0%;opacity:1}.circuit-art:after{inset:0;background:linear-gradient(transparent,#000b)}.tile-index{left:8px;right:8px;top:6px;font-size:8px;letter-spacing:1px}.tile-caption{left:9px;bottom:7px}.tile-caption small{font-size:8px;letter-spacing:1px;margin-bottom:2px}.tile-caption strong{font-size:25px;font-style:italic;text-shadow:0 2px 8px #000}.track-specs{padding:8px 10px;background:#020917cc;border-bottom:1px solid #2b9bdd;gap:12px}.track-specs small{font-size:8px}.track-specs b{font-size:11px}.auto-note{display:none}
.vehicle-shelf{bottom:0;left:0;right:0;z-index:4}.shelf-label{font-size:11px;letter-spacing:1.8px;margin:0 12px 9px;text-shadow:0 1px 4px #000}.shelf-label small{font-size:8px;color:#96c3e8}.vehicle-grid{gap:8px}.vehicle-card{height:132px;border:18px solid transparent;border-image:var(--frame) 16% fill stretch;background:none;clip-path:none;overflow:visible;box-shadow:none;transition:filter .2s,transform .2s}.vehicle-card:after{display:none}.vehicle-card img{position:absolute;inset:-11px -8px 14px;width:calc(100% + 16px);height:calc(100% - 3px);object-fit:contain;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--car-color) 50%,transparent))}.vehicle-card strong{left:50%;transform:translateX(-50%);bottom:-6px;font-size:19px;letter-spacing:.3px;text-shadow:0 1px 8px #000;white-space:nowrap}.vehicle-card .car-id{top:0;right:0;bottom:auto;font-size:7px;color:#8bc8ea}.vehicle-card.active{border:18px solid transparent;border-image:var(--frame) 16% fill stretch;background:none;filter:brightness(1.4) drop-shadow(0 0 9px #00aaff);transform:translateY(-4px);box-shadow:none}.vehicle-card:hover{transform:translateY(-4px);filter:brightness(1.3)}
.setup-footer{height:130px;border:0;background:none;padding:10px 3%;gap:28px;align-items:center;z-index:5}.footer-meta{border:22px solid transparent;border-image:var(--frame) 16% fill stretch;min-width:300px;max-width:440px;padding:7px 20px;text-align:center;margin-right:auto}.footer-meta .live-dot{display:none}.footer-meta b{font-size:19px;font-style:italic;color:#86d9ff;letter-spacing:1.4px}.footer-meta small{font-size:8px;color:#a9c9df;letter-spacing:1px;margin-top:7px}.bet-control{width:265px;border:22px solid transparent;border-image:var(--frame) 16% fill stretch;padding:0 9px}.bet-control label{font-size:10px;margin-bottom:7px;letter-spacing:1px}.bet-control label small{font-size:8px;color:#a3bad1}.bet-control>div{border:0;background:none;height:38px;gap:5px}.bet-control button{width:35px;height:39px;border:10px solid transparent;border-image:var(--frame) 16% fill stretch;background:none;padding:0;line-height:.6;font-weight:900;font-size:28px;text-shadow:0 0 8px #43baff}.bet-control input{width:95px;font-size:31px}.bet-control>div>span{color:#f9cf68}
.race-button{min-width:310px;height:110px;background:var(--gold-art) center / 100% 140% no-repeat;border:0;clip-path:none;box-shadow:none;color:#130b00;font-size:36px;font-style:italic;letter-spacing:1px;gap:20px;font-weight:900;text-shadow:0 1px 1px #ffe998;padding:0 40px;filter:drop-shadow(0 0 13px #ffaf2277)}.race-button b{font-size:34px}.race-button:hover{filter:brightness(1.12) drop-shadow(0 0 17px #ffd23088);transform:translateY(-2px)}
.track-heading{position:absolute;left:0;top:0;margin:0;z-index:3;width:100%;text-align:center;pointer-events:none}.track-heading>.eyebrow{display:none}.track-heading h1{font-size:29px;letter-spacing:8px;margin:0;color:#d9f3ff;text-shadow:0 0 9px #32aaff;font-style:italic}.track-heading h1 em{color:inherit}.track-feature{position:absolute;top:52px;left:6%;right:6%;bottom:205px;border:26px solid transparent;border-image:var(--frame) 16% fill stretch;filter:drop-shadow(0 0 12px #009dff88);background:none;display:flex;overflow:visible}.track-feature-image{position:absolute;inset:0 22% 0 0;background:url('../public/assets/ui-v2/circuit-scenes.png') 50% 0% / 100% 500% no-repeat}.track-feature-title{position:absolute;left:0;top:0;padding:13px 27px 17px;background:linear-gradient(110deg,#020c1af2 50%,#020c1a00);z-index:1;max-width:78%;width:560px}.track-feature-title small{color:#66d7ff;letter-spacing:3px;font-size:11px;font-style:italic}.track-feature-title h2{font-size:40px;margin:3px 0 0;font-style:italic;line-height:1;color:#e7f8ff;text-shadow:0 2px 8px #001025}.track-feature-details{position:absolute;inset:-6px -4px -6px auto;width:23%;border:17px solid transparent;border-image:var(--frame) 16% fill stretch;padding:0 8px;color:#c3e3f9;display:flex;flex-direction:column;justify-content:center;gap:8px}.track-feature-details svg{width:100%;height:43%;min-height:65px;filter:drop-shadow(0 0 4px #008aff)}.track-feature-details path{fill:none;stroke:#c6f1ff;stroke-width:4}.track-feature-details>div{font-size:14px;font-style:italic;border-top:1px solid #2377a955;padding:6px 0 0;letter-spacing:1px}.track-feature-details strong{font-size:24px;margin-right:8px}#track-weather,#track-risk{font-size:12px}.track-grid{position:absolute;bottom:34px;left:0;right:0;gap:11px;grid-template-columns:repeat(5,1fr)}.track-card{height:145px;border:18px solid transparent;border-image:var(--frame) 16% fill stretch;background:none;clip-path:none;overflow:visible}.track-card-image{background-image:url('../public/assets/ui-v2/circuit-scenes.png');background-size:100% 500%;background-position:50% var(--art-position)}.track-card:after{background:linear-gradient(transparent 40%,#020b18f5)}.track-card .track-number{left:7px;top:5px;font-size:7px;letter-spacing:1px}.track-card .track-copy{left:9px;right:9px;bottom:-3px}.track-card strong{font-size:24px;text-align:center}.track-card .track-copy>small,.track-card p,.track-card .volatility-bar{display:none}.track-card.active{border:18px solid transparent;border-image:var(--frame) 16% fill stretch;filter:brightness(1.3) drop-shadow(0 0 8px #00bcff)}.track-card.active .track-number:after{font-size:7px;margin-left:8px}.track-disclosure{position:absolute;bottom:0;left:0;right:0;margin:0;text-align:center;font-size:11px;color:#b5d1e8;text-shadow:0 1px 5px #000}.track-disclosure>span{font-size:10px;letter-spacing:1.4px}
.race-header{font-size:12px;letter-spacing:1.3px;margin-left:12px}.race-header>span:last-child{max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#race-screen{inset:145px 1.7% 20px}.race-top-center{top:0;width:240px;padding:7px 20px;border:17px solid transparent;border-image:var(--frame) 16% fill stretch}.race-top-center .eyebrow{font-size:9px;letter-spacing:1.5px}.lap-display{font-size:14px;line-height:1;margin-top:5px}.lap-display b{font-size:31px}.race-progress{margin-top:9px;height:3px}.leaderboard{top:0;width:240px;padding:4px 3px;border:23px solid transparent;border-image:var(--frame) 16% fill stretch;background:none;filter:drop-shadow(0 0 8px #005dff66)}.panel-title{font-size:9px;letter-spacing:1px}.standing{height:44px;gap:6px;padding:0 4px;font-size:12px;color:#afc4d7}.standing>strong{font-size:22px;font-weight:700;width:20px}.standing img{width:65px;height:42px;object-fit:contain;filter:drop-shadow(0 0 5px var(--racer-color))}.standing span{letter-spacing:.5px}.standing small{font-size:7px;white-space:nowrap}.standing.player{background:linear-gradient(90deg,#006cff77,#00478644);box-shadow:inset 0 0 9px #34c6ff66;color:#d4f7ff}.standing.player strong{color:#fff;text-shadow:0 0 7px #4acfff}
.telemetry{top:0;width:238px;right:0}.mini-map{height:190px;border:22px solid transparent;border-image:var(--frame) 16% fill stretch;background:none;padding:0}.mini-map svg{width:100%;height:123px}.mini-map small{font-size:9px;letter-spacing:1px}.speedometer{position:relative;margin-top:9px;padding:18px 8px 10px 69px;height:157px;border:21px solid transparent;border-image:var(--frame) 16% fill stretch;background:none}.speedometer:before{content:'';position:absolute;left:-6px;top:3px;width:80px;height:87px;background:url('../public/assets/ui-v2/dial.png') center / contain no-repeat}.speedometer>span{font-size:54px;font-style:italic;color:#c7f4ff;text-shadow:0 0 15px #2bc3ff66;line-height:1}.speedometer>small{font-size:12px;letter-spacing:3px}.speedometer>div{margin-top:7px;font-size:8px;gap:6px}.speedometer b{font-size:16px}
.race-bottom{bottom:43px;grid-template-columns:260px 1fr 245px;gap:12px;align-items:end}.health-panel{border:22px solid transparent;border-image:var(--frame) 16% fill stretch;padding:0 6px 5px;background:none;min-height:145px;position:relative}.health-panel>img{display:block;width:100%;height:72px;object-fit:contain;margin:-14px 0 0}.health-title{gap:4px}.health-title>span{font-size:11px;color:#61ff97;font-weight:700}.health-title strong{font-size:23px;font-style:italic}.health-title small{font-size:12px;color:#d4e5ef}.health-track{margin:7px 0 6px;height:8px;border-radius:4px}#health-state{font-size:7px;letter-spacing:1px}.power-panel{border:23px solid transparent;border-image:var(--frame) 16% fill stretch;background:none;padding:0 2px 1px}.power-panel .panel-title{margin-bottom:8px;font-size:10px}.power-panel .panel-title>span{font-size:8px}#power-grid{gap:3px}.power-icon{height:95px;opacity:.95;border:0;background:none;box-shadow:none;position:relative}.power-art{display:block;background-image:url('../public/assets/ui-v2/power-badges.png');background-size:400% 200%;background-position:var(--badge-x) var(--badge-y);background-repeat:no-repeat;aspect-ratio:1;width:100%}.power-icon>.power-art{height:78px;width:100%;font-size:0;line-height:1;text-shadow:none}.power-icon small{font-size:10px;line-height:1.1;margin-top:3px;letter-spacing:.4px;color:var(--power);text-shadow:0 0 4px currentColor;font-weight:700}.power-icon.active{border:0;box-shadow:none;background:none;filter:brightness(1.45) drop-shadow(0 0 8px var(--power));transform:translateY(-4px)}.collection-panel{border:22px solid transparent;border-image:var(--frame) 16% fill stretch;background:none;padding:3px 8px 5px;min-height:145px;position:relative;text-align:right}.collection-coins{position:absolute;left:-7px;top:8px;width:82px;height:87px;object-fit:contain;filter:drop-shadow(0 0 10px #ffb22466)}.collection-panel>small{font-size:8px;letter-spacing:.7px;display:block}.collection-panel strong{font-size:57px;line-height:1.2;position:relative;margin-top:9px;z-index:1;text-shadow:0 2px 4px #000,0 0 13px #ffbb4455}.collection-panel em{font-size:31px}#coin-trail{margin-top:8px;gap:6px}#coin-trail span{font-size:9px}.race-toolbar{gap:10px}.small-button{padding:0 9px;border-width:12px;height:37px;font-size:9px;letter-spacing:1px}.race-toolbar>span{font-size:10px;color:#bbd5e9;text-shadow:0 2px 5px #000}.race-toolbar b{font-size:11px;color:#ffe08c;margin-left:13px}#race-announcement{font-size:35px;top:33%}#race-announcement small{font-size:11px}#countdown{top:36%}
#pause-overlay,#result-screen{inset:130px 0 0;background:#020819aa;backdrop-filter:blur(6px)}#pause-overlay>div{border:50px solid transparent;border-image:var(--modal-art) 28% fill stretch;padding:15px 25px 24px;max-width:90vw;filter:drop-shadow(0 0 20px #008aff55)}#pause-overlay h2{font-size:40px}#pause-overlay .race-button{height:85px;min-width:300px;margin:20px auto 0;font-size:25px}
.result-card{border:44px solid transparent;border-image:var(--modal-art) 28% fill stretch;padding:14px 29px 12px;width:min(760px,94vw);background:none;clip-path:none;filter:drop-shadow(0 0 25px #008cff66);box-shadow:none;position:relative}.result-card>.eyebrow{font-size:10px}.result-card h2{font-size:39px;font-style:italic;margin:10px 0 0;text-shadow:0 0 14px #54cfff88}#result-position{font-size:91px;line-height:1.1;filter:drop-shadow(0 0 15px #e9a42b33)}.result-card>p{font-size:13px;margin:7px 0 14px}.result-calculation{padding:11px 0;background:#07172599;border-color:#2b84b655}.result-calculation small{font-size:8px;letter-spacing:1px}.result-calculation b{font-size:25px}.result-payout{position:relative;margin:11px auto 15px;padding:0 70px;width:max-content;min-width:240px}.result-payout:before{content:'';position:absolute;left:-8px;top:-8px;width:90px;height:90px;background:url('../public/assets/ui-v2/coin.png') center / contain no-repeat}.result-payout strong{font-size:44px;text-shadow:0 0 10px #ffb92f55}.result-payout>small{font-size:9px}.result-actions{gap:17px}.result-actions .race-button{height:76px;min-width:260px;font-size:25px;padding:0 30px;gap:16px}.result-actions .race-button b{font-size:25px}.secondary-button{border-width:18px;padding:6px 16px;font-size:15px;letter-spacing:1px}.result-card>small{font-size:8px;margin-top:11px;color:#789cb9}
dialog{border:40px solid transparent;border-image:var(--modal-art) 28% fill stretch;background:none;box-shadow:none;padding:10px 18px 21px;width:min(900px,96vw);max-height:94dvh;filter:drop-shadow(0 0 20px #008aff44);scrollbar-color:#16699e #04101d}.modal-header{padding-bottom:13px;border-color:#19649b}.modal-header .icon-button{width:41px;height:44px}.modal-header .eyebrow{font-size:10px}dialog h2{font-size:36px;margin:21px 0 16px;font-style:italic;text-shadow:0 0 12px #078cff55}dialog p{font-size:14px;line-height:1.6;color:#b9cedf}dialog .intro{font-size:15px}dialog h3{font-size:16px;font-style:italic}.rules-grid{gap:10px}.rule-power{border:17px solid transparent;border-image:var(--frame) 16% fill stretch;background:none;padding:0 1px 4px;text-align:center}.rule-power>.power-art{width:87px;height:87px;margin:0 auto}.rule-power h4{font-size:14px;margin:7px 0}.rule-power p{font-size:11px;color:#d0dfeb}.payout-table{font-size:14px}.payout-table th{font-size:10px}.payout-table td,.payout-table th{border-color:#1e669455}.settings-row{border:18px solid transparent;border-image:var(--frame) 16% fill stretch;background:none;padding:1px 11px;margin:10px 0;min-height:77px}.settings-row label{font-size:17px;color:#e4f5ff;font-style:italic;font-weight:700}.settings-row small{font-size:11px;font-style:normal;font-weight:400;color:#9cbed7}.settings-row select{background:#061327;border:1px solid #3cafff;padding:7px 15px;font-size:15px}.settings-row input[type=range]{appearance:none;height:7px;border:1px solid #17658f;background:#020a17;box-shadow:0 0 5px #008aff44}.settings-row input[type=range]::-webkit-slider-thumb{appearance:none;width:19px;height:19px;background:#88eaff;border:3px solid #0c5698;box-shadow:0 0 9px #00aaff;transform:rotate(45deg)}.settings-row input[type=checkbox]{accent-color:#41caff;width:23px;height:23px}.history-list{max-height:380px}.history-row{border:13px solid transparent;border-image:var(--frame) 16% fill stretch;background:none;margin:6px 0;padding:7px 3px;font-size:13px;align-items:center}.history-row span{color:#a9c5dc}.settings-footer{margin-top:18px}
#toast{border:20px solid transparent;border-image:var(--frame) 16% fill stretch;background:none;padding:4px 13px;font-size:14px;bottom:145px;filter:drop-shadow(0 0 12px #008aff55)}
#boot{background:linear-gradient(#02071355,#02071399),url('../public/assets/ui-v2/garage-stage.png') center / cover no-repeat}.boot-logo{background:var(--header-art) center / 100% 130% no-repeat;width:min(660px,85vw);height:190px;display:grid;place-items:center;transform:none;margin:0 0 35px;filter:drop-shadow(0 0 16px #008aff66)}.boot-logo img{width:83%;height:80%;object-fit:contain}.boot-console{border:35px solid transparent;border-image:var(--modal-art) 28% fill stretch;padding:20px 25px;text-align:center;max-width:90vw}.boot-console .eyebrow{justify-content:center;font-size:15px;letter-spacing:3px}.boot-line{width:260px;height:7px;border:1px solid #276195;margin:23px auto 0}#boot p{font-size:12px;color:#b3d3e9;letter-spacing:.5px}.boot-error{display:block;max-width:440px}.boot-error button{background:var(--gold-art) center / 100% 140% no-repeat;border:0;color:#241100;min-width:200px;height:65px;font-weight:900;font-size:20px}
@media(min-width:1900px){.topbar,#app[data-screen="race"] .topbar,#app[data-screen="result"] .topbar{height:155px}.brand,#app[data-screen="race"] .brand,#app[data-screen="result"] .brand{width:580px;height:170px}.brand img{height:135px}.setup-screen{top:157px;bottom:165px}.vehicle-card{height:160px}.vehicle-shelf .shelf-label{margin-bottom:13px}.vehicle-specs{max-width:450px}.vehicle-stats{gap:24px}.stat-row small{font-size:17px;width:90px}.circuit-preview{max-width:450px;bottom:192px}.circuit-art{height:170px}.setup-footer{height:150px}.race-button{height:125px;min-width:370px;font-size:41px}.footer-meta{max-width:530px;padding:13px 30px}.footer-meta b{font-size:24px}.bet-control{width:290px}.vehicle-details{width:430px}.showroom-hero{bottom:140px}.track-feature{bottom:245px}.track-card{height:180px}.track-grid{bottom:37px}.track-feature-title h2{font-size:50px}.track-feature-details>div{font-size:17px}#race-screen{top:170px}.leaderboard{width:280px}.standing{height:53px;font-size:16px}.standing img{width:78px;height:51px}.telemetry{width:280px}.mini-map{height:235px}.mini-map svg{height:160px}.speedometer{height:180px}.speedometer>span{font-size:70px}.race-bottom{grid-template-columns:300px 1fr 295px;gap:18px}.power-icon{height:120px}.power-icon>.power-art{height:99px}.power-icon small{font-size:13px}.health-panel,.collection-panel{min-height:175px}.health-panel>img{height:100px}.collection-panel strong{font-size:75px}.collection-coins{width:110px;height:110px}.result-card{width:800px}.result-card h2{font-size:43px}}
@media(max-width:1350px) and (min-width:901px){.brand,#app[data-screen="race"] .brand,#app[data-screen="result"] .brand{width:390px;height:120px}.brand img{height:95px}.topbar,#app[data-screen="race"] .topbar,#app[data-screen="result"] .topbar{height:110px}.garage-nav button{min-width:103px;font-size:13px;border-width:12px;height:53px}.garage-nav button span{display:none}.top-actions{gap:4px}.wallet{min-width:164px;border-width:16px;height:65px}.wallet strong{font-size:23px}.wallet .coin-symbol{width:32px;height:35px}.icon-button{width:41px;height:45px;font-size:19px;border-width:11px}.setup-screen{top:113px;bottom:120px}.vehicle-details{border-width:21px;width:310px;padding:4px 7px;min-height:110px}.vehicle-details .eyebrow{font-size:7px}#vehicle-name{font-size:43px}#vehicle-tagline{font-size:11px}.vehicle-specs{width:29%;border-width:23px;padding:5px 6px}.vehicle-specs>.panel-title{font-size:8px;margin-bottom:12px}.vehicle-specs>.panel-title span{font-size:6px}.vehicle-stats{gap:12px}.stat-row{gap:7px}.stat-row small{font-size:11px;width:62px}.stat-bar{gap:2px}.stat-bar i{height:11px}.stat-row b{font-size:15px;min-width:31px}.stat-row b span{font-size:10px}.livery-row{margin-top:15px;padding-top:9px}.livery-row small{font-size:7px}.circuit-preview{width:29%;bottom:145px}.circuit-art{height:110px;border-width:17px}.tile-caption strong{font-size:21px}.track-specs{padding:5px 8px}.track-specs small{font-size:6px}.track-specs b{font-size:9px}.vehicle-card{height:115px;border-width:16px}.vehicle-card.active{border-width:16px}.vehicle-card strong{font-size:16px}.setup-footer{height:115px;gap:18px}.footer-meta{min-width:240px;padding:4px 9px;border-width:20px}.footer-meta b{font-size:16px}.footer-meta small{font-size:7px}.bet-control{width:230px;border-width:19px;padding:0 5px}.bet-control label{font-size:9px}.bet-control label small{font-size:7px}.bet-control input{width:76px;font-size:27px}.race-button{height:95px;min-width:270px;font-size:30px}.track-feature{top:45px;bottom:185px;left:4%;right:4%;border-width:23px}.track-feature-title h2{font-size:30px}.track-feature-title small{font-size:10px}.track-feature-details{gap:3px;padding:0 4px}.track-feature-details>div{font-size:11px;padding-top:4px}.track-feature-details strong{font-size:21px}#track-weather,#track-risk{font-size:10px}.track-grid{gap:9px;bottom:29px}.track-card{height:132px;border-width:16px}.track-card.active{border-width:16px}.track-card strong{font-size:20px}.track-heading h1{font-size:25px;letter-spacing:5px}.track-disclosure{font-size:9px}.track-disclosure>span{font-size:8px}#race-screen{inset:120px 1.5% 15px}.leaderboard{width:205px;border-width:20px}.standing{height:36px;font-size:11px}.standing img{width:50px;height:33px}.standing small{display:none}.telemetry{width:200px}.mini-map{height:165px;border-width:20px}.mini-map svg{height:101px}.speedometer{height:137px;border-width:19px;padding:15px 3px 6px 52px}.speedometer:before{width:67px;height:72px;left:-8px}.speedometer>span{font-size:43px}.race-top-center{width:200px;border-width:16px}.race-bottom{grid-template-columns:220px 1fr 210px;gap:9px}.health-panel,.collection-panel{border-width:19px;padding-left:4px;padding-right:4px;min-height:130px}.health-panel>img{height:62px}.health-title>span{font-size:9px}.health-title strong{font-size:20px}.health-title small{font-size:10px}.power-panel{border-width:20px}.power-panel .panel-title{font-size:8px}.power-panel .panel-title span{font-size:6px}.power-icon{height:80px}.power-icon>.power-art{height:64px}.power-icon small{font-size:8px}.collection-panel strong{font-size:50px}.collection-panel>small{font-size:7px}.collection-coins{width:70px;height:76px}.race-toolbar>span{font-size:8px}.race-toolbar b{font-size:9px}.race-header{font-size:10px}.race-header>span:last-child{max-width:135px}.result-card h2{font-size:34px}#pause-overlay,#result-screen{top:110px}}
@media(max-height:780px) and (min-width:901px){.setup-screen{bottom:110px}.topbar,#app[data-screen="race"] .topbar,#app[data-screen="result"] .topbar{height:100px}.brand,#app[data-screen="race"] .brand,#app[data-screen="result"] .brand{height:113px;width:400px}.brand img{height:87px}.setup-screen{top:105px}.vehicle-details{min-height:100px;padding-top:0;padding-bottom:0;border-width:20px}#vehicle-name{font-size:40px;margin:8px 0}.vehicle-specs{top:0;border-width:22px}.vehicle-stats{gap:10px}.vehicle-specs>.panel-title{margin-bottom:10px}.stat-row small{font-size:11px}.stat-bar i{height:10px}.stat-row b{font-size:16px}.livery-row{margin-top:10px;padding-top:7px}.circuit-preview{bottom:131px}.circuit-art{height:108px;border-width:17px}.track-specs{display:none}.vehicle-card{height:105px;border-width:16px}.vehicle-card.active{border-width:16px}.vehicle-card strong{font-size:16px}.showroom-hero{bottom:80px;top:0}.garage-intro{bottom:130px}.garage-intro h1{font-size:33px}.setup-footer{height:100px;padding-top:0;padding-bottom:0}.race-button{height:89px}.bet-control{border-width:17px}.bet-control>div{height:31px}.bet-control button{height:34px}.footer-meta{border-width:18px;padding-top:3px;padding-bottom:3px}.track-feature{top:39px;bottom:165px;border-width:21px}.track-heading h1{font-size:23px}.track-grid{bottom:27px}.track-card{height:116px;border-width:16px}.track-card.active{border-width:16px}.track-feature-details{gap:2px;border-width:14px}.track-feature-title{padding:10px 18px}.track-feature-title h2{font-size:29px}.track-feature-details>div{font-size:10px;padding-top:3px}.track-feature-details strong{font-size:17px}#track-weather,#track-risk{font-size:9px}.track-disclosure{font-size:9px}.race-bottom{bottom:39px}.power-icon{height:72px}.power-icon>.power-art{height:59px}.power-icon small{font-size:8px}.health-panel,.collection-panel{min-height:122px;border-width:18px}.health-panel>img{height:53px}.health-title strong{font-size:20px}.collection-panel strong{font-size:48px}.collection-coins{width:73px;height:77px}.power-panel{border-width:20px}.standing{height:32px}.leaderboard{border-width:19px}.telemetry{width:190px}.mini-map{height:154px;border-width:19px}.mini-map svg{height:95px}.speedometer{height:122px;padding-top:9px;padding-left:50px;border-width:18px}.speedometer>span{font-size:41px}.speedometer:before{width:65px;height:72px}.speedometer>div{margin-top:4px}.race-top-center{top:0;width:200px;border-width:16px;padding:2px 10px}.race-top-center .eyebrow{font-size:7px}.lap-display b{font-size:27px}#race-screen{top:112px}.result-card{padding:7px 20px;border-width:37px;width:650px}.result-card h2{font-size:29px;margin-top:6px}#result-position{font-size:60px;line-height:1.1}.result-card>p{font-size:11px;margin:6px 0 9px}.result-calculation{padding:7px 0}.result-calculation b{font-size:21px}.result-payout{margin:9px auto}.result-payout strong{font-size:34px}.result-payout:before{width:72px;height:72px}.result-actions .race-button{height:65px;font-size:22px;min-width:240px}.result-actions .secondary-button{border-width:16px}.result-card>small{margin-top:6px;font-size:7px}#pause-overlay,#result-screen{top:100px}}
@media(prefers-reduced-motion:reduce){.showroom-hero img{animation:none}.vehicle-card,.vehicle-card.active{transform:none}}

/* Keep illustrated circuit cells at their native 2:1 proportions, cropping
   inside each viewport instead of stretching the five-row atlas. */
.track-feature-image,.track-card-image,.circuit-art-image{overflow:hidden;container-type:size;background-image:none}
.track-feature-image:before,.track-card-image:before,.circuit-art-image:before{content:'';position:absolute;left:50%;top:65%;width:max(100cqw,200cqh);height:max(50cqw,100cqh);transform:translate(-50%,-65%);background-image:url('../public/assets/ui-v2/circuit-scenes.png');background-size:100% 500%;background-position:inherit;background-repeat:no-repeat;pointer-events:none}

/* The 900px-tall desktop layout has less space below the stat card. */
@media(min-width:1351px) and (max-width:1899px) and (min-height:781px) and (max-height:960px){
 .vehicle-specs{padding-top:7px;padding-bottom:7px}
 .circuit-preview{bottom:156px}
 .circuit-art{height:110px;border-width:17px}
 .track-specs{padding:4px 10px}
}

/* Keep the exit control available while long guides and settings scroll. */
dialog .modal-header{position:sticky;top:-10px;z-index:5;background:#040b17;box-shadow:0 -12px #040b17;padding-top:4px}

/* The complete transparent illustrations already include generous rim light.
   Keep the complete silhouette visible, including on the mobile grid. */
.showroom-hero .garage-illustration{width:100%;height:100%;max-width:100%;max-height:none;margin:0;object-fit:contain;object-position:center}
.vehicle-card .garage-illustration{top:-20px;bottom:auto;left:-8px;right:-8px;width:calc(100% + 16px);height:calc(100% + 18px);object-fit:contain;object-position:center}
.vehicle-card:hover{filter:brightness(1.08)}
.vehicle-card.active{filter:brightness(1.1) drop-shadow(0 0 9px #00aaff)}