/* Scenario art direction: warm leather M9-inspired cockpit and active highway. */
.game-frame{background:#1a201d}
.scene{background:linear-gradient(180deg,#b8d4d0 0%,#8ba8a1 38%,#201e1b 70%,#10100e 100%)}
.outside{top:0;height:58%;background:linear-gradient(140deg,#c9d5ce,#74968e);filter:none}
.outside-left{width:23%;clip-path:polygon(0 0,68% 0,100% 100%,0 100%)}
.outside-right{width:16%;background:linear-gradient(#a9c2b9,#576d5c)}
.window-front{top:3%;left:22%;width:76%;height:58%;clip-path:polygon(0 0,100% 0,100% 93%,4% 100%);background:linear-gradient(#a9d7d6 0%,#d7d6bd 52%,#648472 54%,#314b3e 100%)}
.window-front:after{background:linear-gradient(165deg,#ffffff33,transparent 35%),radial-gradient(circle at 79% 65%,#e79a7270,transparent 36%)}
.front-road{top:52%;background:linear-gradient(150deg,transparent 0 30%,#65736b 31% 36%,#424c49 37% 80%,transparent 81%),linear-gradient(#779283,#293e32)}
.front-road i{background:#f0ead68f;width:5px;height:56px;transform:rotate(-15deg)}
.front-road i:nth-child(2){left:59%;height:95px}.front-road i:nth-child(3){left:55%}
.scene.driving .front-road i{animation:laneRush .7s linear infinite}
.scene.shoulder .front-road{transform:translateX(-8%);transition:transform 1s}
.scene.stopped .front-road i{animation:none}
.road-shoulder{position:absolute;z-index:2;right:2%;top:54%;width:14%;height:50%;clip-path:polygon(40% 0,72% 0,100% 100%,0 100%);background:#bcb9a254;opacity:.4}
.scene.shoulder .road-shoulder,.scene.stopped .road-shoulder{opacity:.86;background:#e2d7ab8c}
.horizon{top:50%;height:28px;background:linear-gradient(90deg,#5d7767,#638674,#536f5f);opacity:.72}
.window-left{top:4%;left:0;width:28%;height:56%;clip-path:polygon(0 0,57% 0,100% 100%,0 100%);background:linear-gradient(140deg,#c5dad3,#89b0ab 55%,#536c63)}
.window-left:before{background:linear-gradient(130deg,#ffffff45,transparent 50%)}
.window-glow{background:radial-gradient(circle at 0 100%,#f4925560,transparent 63%)}
.window-right{top:8%;height:47%;background:linear-gradient(110deg,#9bc3b7,#557565)}
.dashboard{top:52%;left:23%;width:79%;height:36%;border-top:11px solid #615349;background:linear-gradient(#c2744a 0 26%,#8c5239 31%,#281e1b 58%,#1c1715 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 92%);box-shadow:0 -14px 30px #1217138c}
.dashboard:before{left:2%;top:7%;width:31%;height:45%;border-radius:16px;background:radial-gradient(circle at 50% 48%,#fb7b4940,transparent 55%),#121817;border:6px solid #4c4742}
.dash-screen{left:7%;top:16%;width:23%;height:30%;background:#101618;border:0;box-shadow:none}
.dash-screen span{font-size:17px}.dash-screen small{font:700 10px 'Noto Sans SC',sans-serif;letter-spacing:0;color:#f2ae80}
.wide-screen{position:absolute;left:35%;top:6%;width:62%;height:46%;background:linear-gradient(120deg,#0c1216,#171b1d 50%,#0d1013);border:6px solid #332e2c;border-radius:8px;display:flex;align-items:center;justify-content:space-around;color:#ece7de;box-shadow:inset 0 0 15px #26354f}
.screen-clock{font:700 25px 'Barlow Condensed',sans-serif;color:#f5ebdd}
.screen-vehicle{font:600 10px 'Noto Sans SC',sans-serif;color:#b9c8c4;display:flex;flex-direction:column;gap:4px}.screen-vehicle b{font-size:11px;color:#7bd8b4}
.screen-warning{font-size:11px;color:#ff945e;background:#f3622b24;padding:7px 9px}
.vents{top:58%;height:8%;background:repeating-linear-gradient(0deg,#1e1a18 0 2px,#716056 3px 5px)}.vent-1{left:35%;width:19%}.vent-2{left:57%;width:19%}
.dash-light{top:52%;width:25px;height:5px}.dash-light-1{left:42%}.dash-light-2{left:48%}.scene.hazards .dash-light{animation:hazardBlink .6s step-end infinite}
.steering{left:26%;top:53%;width:25%;border:18px solid #a76543;box-shadow:0 0 0 5px #b6aea1,0 20px 24px #000a,inset 0 0 0 4px #c4a789;transform:rotate(0)}
.steering:before,.steering:after{background:#7d5039}.steering-inner{inset:32%;color:#d7c5ad;background:#a96b48;border:5px solid #c2a68e;font-size:20px}
.door{top:48%;left:0;width:31%;height:52%;border-top:12px solid #554139;background:linear-gradient(155deg,#4a2927 0 22%,#9d5b39 23% 48%,#bf7149 50% 72%,#3b2421 100%);clip-path:polygon(0 0,98% 13%,98% 100%,0 100%)}
.door:before{content:'';position:absolute;top:15%;left:0;width:95%;height:18%;background:linear-gradient(90deg,#4e312b,#604438,#3a2722);transform:skewY(4deg)}
.door-handle{top:26%;left:30%;width:36%;height:9px;background:linear-gradient(#ebdcd0,#b5aea4)}.door-panel{border-color:#a76549}.lock-light{top:24%;left:74%}
.seat{background:linear-gradient(140deg,#ac6843,#5d372b 45%,#1b1513);border-radius:56% 0 0 0}
.belt{background:linear-gradient(90deg,#282826,#636d68,#282826)}
.center-console{position:absolute;z-index:10;left:59%;top:68%;width:24%;height:39%;transform:skewX(10deg);border:7px solid #a27c66;background:linear-gradient(130deg,#493936,#1d2221 45%,#5d4a3c 46%,#211b1a);box-shadow:0 8px 24px #0009}
.console-top{position:absolute;inset:9% 10% 44%;border:2px solid #b5a89b;background:linear-gradient(135deg,#1e292b,#0c1214)}
.console-gear{position:absolute;left:38%;bottom:15%;width:46px;height:46px;border-radius:50%;border:5px solid #c3bab0;background:#2c3030;display:grid;place-items:center;color:#f5f2e9;font:700 22px 'Barlow Condensed',sans-serif;box-shadow:0 3px 7px #000}
.scene.driving .flame,.scene.driving .smoke{opacity:.35}.scene.stopped .flame{opacity:.95}
.flame{bottom:0;z-index:11;height:26%;filter:blur(5px);background:radial-gradient(ellipse at 50% 96%,#ffe49a 0 5%,#ff873d 25%,#d34521 48%,transparent 70%)}
.flame-1{left:46%;height:24%}.flame-2{left:60%;height:20%}.flame-3{left:83%;height:34%}.flame-4{left:72%;height:19%}
.smoke{z-index:17;background:radial-gradient(ellipse,#6b6c6388,transparent 70%)}.smoke-1{top:35%;left:45%}.smoke-2{top:25%;left:72%}.smoke-3{top:29%;left:3%}
.hud-driving{margin-left:auto;margin-right:12px;display:flex;align-items:baseline;gap:5px;padding:5px 9px;background:#121a19c4;border:1px solid #ffffff55;color:#e7f4ee}
.hud-driving span{font-size:9px;margin-right:8px;color:#87dfbb}.hud-driving strong{font:700 23px 'Barlow Condensed',sans-serif}.hud-driving small{font:700 10px 'Barlow Condensed',sans-serif}
.scene.stopped .hud-driving span{color:#e9d0a5}
.hotspot-takeover{left:30%;top:68%}.hotspot-hazard{left:65%;top:60%}.hotspot-shoulder{right:16%;top:29%}.hotspot-park{left:65%;bottom:15%}
.hotspot-belt{right:10%;bottom:22%}.hotspot-lock{left:14%;top:64%}.hotspot-door{left:4%;bottom:19%}.hotspot-hammer{left:8%;bottom:9%}.hotspot-window{left:7%;top:37%}
.intro-content{max-width:760px;display:grid;grid-template-columns:48% 52%;text-align:left;background:#171e1b;border:1px solid #596258;box-shadow:0 20px 70px #0008}
.intro-photo{position:relative;min-height:390px;overflow:hidden;background:#3b4540}.intro-photo img{width:100%;height:100%;object-fit:cover;object-position:54% 50%;filter:saturate(.8) contrast(1.05)}.intro-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#101714b8,transparent 42%)}.intro-photo span{position:absolute;z-index:2;left:19px;bottom:18px;font:700 10px 'Barlow Condensed',sans-serif;letter-spacing:.19em;color:#f5e5d5}
.intro-details{padding:37px 34px}.intro-details h2{font-size:32px;line-height:1.24;margin:18px 0 15px}.intro-details p{font-size:12px}.intro-details .overlay-rules{display:block;line-height:2;text-align:left;margin:18px 0}.intro-details .overlay-rules span{display:block}.intro-details .primary-button{width:100%;display:flex;justify-content:space-between;align-items:center}.intro-details .primary-button span{margin:0}.intro-details>small{font-size:9px;line-height:1.6;color:#8d9b91;margin-top:12px}
.outcome-overlay .overlay-content{max-width:430px}
@keyframes laneRush{from{transform:translateY(-38px) rotate(-15deg);opacity:.15}to{transform:translateY(38px) rotate(-15deg);opacity:1}}
@keyframes hazardBlink{50%{opacity:.1;box-shadow:none}}
@media(max-width:800px){.intro-content{max-width:680px}.intro-photo{min-height:330px}.intro-details{padding:25px}.intro-details h2{font-size:26px}}
@media(max-width:560px){.game-frame{height:465px}.scene-topline h1{font-size:23px}.intro-content{display:block;max-width:330px;text-align:center}.intro-photo{height:132px;min-height:0}.intro-photo img{object-position:50% 48%}.intro-details{padding:15px 21px 18px}.intro-details h2{font-size:23px;margin:10px 0}.intro-details p{font-size:10px;line-height:1.55}.intro-details .overlay-rules{display:none}.intro-details .primary-button{padding:10px 12px;margin-top:13px}.intro-details>small{font-size:8px}.steering{border-width:11px}.wide-screen{border-width:3px}.screen-clock{font-size:16px}.screen-warning{font-size:8px;padding:3px}.screen-vehicle{font-size:8px}.screen-vehicle b{font-size:8px}.hud-driving{padding:3px 5px}.hud-driving span{font-size:7px;margin-right:2px}.hud-driving strong{font-size:17px}.hud-driving small{font-size:8px}.scene-hud{left:10px;right:10px}.hud-label{font-size:8px}.hud-time{font-size:12px;padding:5px}.center-console{border-width:4px}.console-gear{width:27px;height:27px;font-size:15px;border-width:3px}.hotspot-takeover{left:25%;top:70%}.hotspot-hazard{left:62%;top:61%}.hotspot-shoulder{right:9%;top:30%}.hotspot-park{left:62%;bottom:16%}}
.hotspot-ads{left:66%;top:64%}.hotspot-sleep{right:8%;bottom:20%}.hotspot-brake{left:35%;bottom:8%}.hotspot-jump{left:6%;bottom:21%;border-color:#ff6e55;background:#a52722e8;box-shadow:0 0 0 7px #f1362d35,0 0 25px #f43e38;animation:hotspotPulse 1s infinite}
.hotspot-jump span{color:#fff}.hotspot-jump strong{font-size:13px}.scene.alert .screen-warning{color:#fff;background:#bf3522;animation:hazardBlink .6s step-end infinite}.scene.alert .dash-screen{color:#ff7b54;box-shadow:0 0 18px #ff4c2e70}.scene.alert .flame{opacity:1}.scene:not(.alert) .flame{opacity:.08}.scene:not(.alert) .smoke{opacity:.08}
.sleep-shade{position:absolute;z-index:19;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,transparent 6%,#080a0bd1 87%);transition:opacity .6s}.scene.sleeping .sleep-shade{opacity:.86;animation:sleepPulse 2.2s ease-in-out infinite}.scene.alert .sleep-shade{opacity:0;animation:none}
.scene.alert .heat-vignette{box-shadow:inset 0 0 130px #f4503480;animation:hazardBlink 1s step-end infinite}.scene.alert .hud-label .pulse-dot{animation:hotspotPulse 1s infinite}
.action-card .jump-button{margin-top:8px;background:#a52c26;color:#fff}.action-card .jump-button:hover{background:#d53d32}.action-card .jump-button[hidden]{display:none!important}.hotspot[hidden]{display:none!important}
.action-card .hard-brake-button{margin-top:8px;background:#693f36;color:#fff;border:1px solid #c76a52}.action-card .hard-brake-button:hover{background:#994838}.action-card .hard-brake-button[hidden]{display:none!important}
.outcome-overlay.injured .outcome-icon{border-color:#e46649;color:#ff8567;background:#dc452829}.outcome-overlay.injured{background:radial-gradient(circle at 50% 48%,#60251daa,transparent 60%),#101714f5}
@keyframes sleepPulse{50%{opacity:.97}}
@media(max-width:560px){.hotspot-ads{left:60%;top:64%}.hotspot-sleep{right:3%;bottom:23%}.hotspot-brake{left:29%;bottom:9%}.hotspot-jump{left:4%;bottom:21%}.hotspot-jump strong{font-size:11px}}
/* The third-party 3D viewer is the cockpit; the CSS illustration remains only as a loading fallback. */
.cockpit-embed{position:absolute;z-index:1;left:50%;top:53%;width:1536px;height:690px;border:0;transform:translate(-50%,-50%) scale(.92);transform-origin:center;background:#161a18;pointer-events:none}
.scene:has(.cockpit-embed) .outside,.scene:has(.cockpit-embed) .window,.scene:has(.cockpit-embed) .dashboard,.scene:has(.cockpit-embed) .steering,.scene:has(.cockpit-embed) .door,.scene:has(.cockpit-embed) .seat,.scene:has(.cockpit-embed) .belt,.scene:has(.cockpit-embed) .hammer,.scene:has(.cockpit-embed) .center-console{display:none}
.scene:has(.cockpit-embed){background:#1b1d1c;isolation:isolate}
.scene:has(.cockpit-embed) .flame{bottom:-8%;z-index:12;width:24%;height:43%;filter:blur(12px);opacity:0;pointer-events:none}
.scene:has(.cockpit-embed) .flame-1{left:6%;height:35%}.scene:has(.cockpit-embed) .flame-2{left:28%;height:22%}.scene:has(.cockpit-embed) .flame-3{left:77%;height:50%}.scene:has(.cockpit-embed) .flame-4{left:58%;height:25%}
.scene:has(.cockpit-embed) .smoke{pointer-events:none;z-index:17;opacity:0}.scene.alert:has(.cockpit-embed) .smoke{opacity:.5}.scene.alert:has(.cockpit-embed) .flame{opacity:.76}
.scene:has(.cockpit-embed) .heat-vignette{z-index:18;box-shadow:inset 0 0 85px #0009}
.scene-hud{z-index:22}.hud-label,.hud-driving,.hud-time{background:#111b18d4;padding:7px 9px;backdrop-filter:blur(7px)}.hud-label{border:1px solid #ebfff748}.hud-driving{margin-right:8px}.hud-time{border-color:#e8f2dc80}
.scene-caption{z-index:25;left:18px;bottom:15px;background:#121919dc;padding:8px 10px;backdrop-filter:blur(5px)}
.source-link{position:absolute;z-index:26;top:64px;right:18px;color:#eaf5ed;background:#15201ccd;border:1px solid #d5e9dd7d;padding:6px 9px;text-decoration:none;font-size:10px;backdrop-filter:blur(5px)}.source-link:hover{background:#ed784c;color:#101613}
.hotspot{z-index:30;backdrop-filter:blur(7px)}.hotspot-ads{left:57%;top:48%}.hotspot-sleep{right:10%;bottom:24%}.hotspot-takeover{left:31%;top:56%}.hotspot-brake{left:38%;bottom:16%}.hotspot-shoulder{right:11%;top:33%}.hotspot-jump{left:5%;bottom:29%}
.hotspot-hard-brake{left:53%;bottom:16%;border-color:#fa8266;background:#803025e8;color:#fff;box-shadow:0 0 0 5px #f64f3424,0 0 20px #b82c2280}.hotspot-hard-brake span,.hotspot-hard-brake strong{color:#fff}.hotspot-hard-brake:hover{background:#b33b2b}
@media(max-width:800px){.cockpit-embed{transform:translate(-50%,-50%) scale(.85)}}
@media(max-width:560px){.cockpit-embed{width:1250px;height:700px;transform:translate(-50%,-50%) scale(.73)}.scene-hud{top:10px}.hud-label{font-size:7px;padding:4px}.hud-driving,.hud-time{padding:4px}.source-link{top:47px;right:9px;font-size:8px;padding:4px}.scene-caption{left:9px;right:9px;font-size:9px;bottom:8px}.hotspot-ads{left:48%;top:51%}.hotspot-sleep{right:3%;bottom:30%}.hotspot-takeover{left:28%;top:60%}.hotspot-brake{left:31%;bottom:18%}.hotspot-shoulder{right:2%;top:36%}.hotspot-jump{left:4%;bottom:31%}}
@media(max-width:560px){.hotspot-hard-brake{left:59%;bottom:18%}}
.view-toggle{position:absolute;z-index:26;top:64px;right:151px;color:#eaf5ed;background:#15201ccd;border:1px solid #d5e9dd7d;padding:6px 9px;font-size:10px;backdrop-filter:blur(5px)}.view-toggle:hover{background:#ed784c;color:#101613}
.scene.fallback .cockpit-embed{display:none}.scene.fallback:has(.cockpit-embed) .outside,.scene.fallback:has(.cockpit-embed) .window,.scene.fallback:has(.cockpit-embed) .dashboard,.scene.fallback:has(.cockpit-embed) .steering,.scene.fallback:has(.cockpit-embed) .door,.scene.fallback:has(.cockpit-embed) .seat,.scene.fallback:has(.cockpit-embed) .belt,.scene.fallback:has(.cockpit-embed) .hammer,.scene.fallback:has(.cockpit-embed) .center-console{display:block}
@media(max-width:560px){.view-toggle{top:47px;right:125px;font-size:8px;padding:4px}}
.road-film{position:absolute;z-index:4;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:darken;clip-path:polygon(0 0,100% 0,100% 33%,57% 33%,55% 28%,39% 28%,34% 33%,29% 38%,13% 35%,0 25%)}
.road-film video{display:block;width:100%;height:51%;object-fit:cover;object-position:50% 100%;filter:saturate(.76) contrast(1.05)}
@media(max-width:800px){.road-film{clip-path:polygon(0 0,100% 0,100% 32%,58% 32%,55% 27%,40% 27%,33% 33%,27% 38%,12% 34%,0 24%)}}
@media(max-width:560px){.road-film{clip-path:polygon(0 0,100% 0,100% 30%,61% 30%,55% 26%,42% 26%,31% 32%,24% 36%,10% 32%,0 23%)}.road-film video{height:45%}}