@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#213e37;background:#e8efed;font-synthesis:none;--green:#153f36;--mint:#d8f5b5;--text:#213e37;--muted:#75827b;--border:#e6e9e3}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a,input,select{font:inherit}button{cursor:pointer;border:0}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #5c9677;outline-offset:4px}button{color:inherit}button:disabled{opacity:.5;cursor:default}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}button{transition:background .18s,transform .18s}button:hover{filter:brightness(.96)}button:active{transform:translateY(1px)}.topbar{height:79px;background:#fafbf7;display:flex;align-items:center;justify-content:space-between;padding:0 32px;position:relative;z-index:10;border-bottom:1px solid #e0e5de;gap:25px}.brand{display:flex;gap:10px;align-items:center;color:#153f36;text-decoration:none;font-family:Manrope,sans-serif;font-size:32px;font-weight:800;letter-spacing:-1.6px}.brandmark{background:var(--green);color:var(--mint);width:36px;height:39px;display:grid;place-items:center;border-radius:10px;font-size:33px;font-weight:600;line-height:1}.brand-dot{color:#6b977c}.brand-sub{font-family:'DM Sans',sans-serif;font-size:10px;line-height:1.45;letter-spacing:1.5px;width:77px;margin-left:10px;font-weight:600;color:#87918a}.main-nav{display:flex;align-items:stretch;height:100%;gap:34px;margin-left:-20px}.nav-item{position:relative;background:none;font-size:14px;color:#7a847e;padding:0 2px;font-weight:550;white-space:nowrap}.nav-item.active{color:#204b3d}.nav-item.active:after{content:'';position:absolute;bottom:0;height:3px;border-radius:2px;background:#204b3d;left:0;right:0}.count{padding:2px 6px;background:#e9eee5;border-radius:5px;font-size:11px;margin-left:4px}.header-right{display:flex;align-items:center;gap:22px}.traffic-badge{font-size:12px;white-space:nowrap;color:#527064;display:flex;align-items:center;gap:8px}.tiny-dot{width:6px;height:6px;background:#729a67;border-radius:50%}.icon-btn{width:35px;height:35px;border-radius:50%;background:transparent;display:grid;place-items:center}.header-right .icon-btn{border:1px solid #dce2d9}#simulator{height:calc(100dvh - 79px);min-height:400px;position:relative;overflow:hidden}#scene{position:absolute;inset:0;background:#b5d3db;outline:0}#scene canvas{display:block;width:100%;height:100%}.world-top{position:absolute;top:28px;left:32px;right:32px;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}.eyebrow,.start-kicker{font-size:10px;font-weight:700;letter-spacing:2px}.eyebrow{color:#426257}h1{font-family:Manrope,sans-serif;font-weight:750;font-size:29px;letter-spacing:-1.1px;margin:6px 0 9px}.location-dot{color:#729170}.location-label p{display:flex;gap:7px;align-items:center;margin:0;font-size:12px;color:#52685e}.location-label p svg{width:14px;height:14px}.divider-dot{padding:0 2px}.conditions{background:#f8faf3db;border:1px solid #ffffff70;border-radius:30px;display:flex;gap:9px;align-items:center;padding:9px 14px;font-size:12px;backdrop-filter:blur(12px);color:#597060}.conditions svg{color:#879467;width:17px;height:17px}.condition-divider{height:12px;width:1px;background:#cad2c7;margin:0 3px}.road-guidance{position:absolute;top:29px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:13px;background:#f9fbf2eb;padding:12px 19px 12px 12px;border:1px solid #ffffff90;border-radius:12px;backdrop-filter:blur(14px);box-shadow:0 3px 18px #24443108;min-width:315px}.guidance-icon{display:grid;place-items:center;width:36px;height:36px;color:#315a3e;background:#dfedce;border-radius:8px;font-size:28px}.road-guidance strong{display:block;font-size:13px;font-weight:650}.road-guidance div>span{display:block;font-size:11px;color:#7a8679;margin-top:4px}.camera-controls{position:absolute;right:29px;top:112px;display:flex;flex-direction:column;align-items:center;background:#fbfcf5ee;padding:5px;border:1px solid #fff8;border-radius:12px;gap:4px;box-shadow:0 5px 20px #2e44300b}.camera-button{width:52px;min-height:48px;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:transparent;color:#7f8c80}.camera-button span{font-size:9px;font-weight:600}.camera-button.selected{background:#dceccf;color:#385a39}.camera-separator{height:1px;background:#e0e5da;width:31px;margin:3px 0}.camera-button:last-child{min-height:35px}.bottom-ui{position:absolute;bottom:76px;left:29px;right:29px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;pointer-events:none}.bottom-ui>*{pointer-events:auto}.glass{background:#fbfcf7f5;border:1px solid #ffffffe6;box-shadow:0 8px 28px #233a2510;backdrop-filter:blur(16px);border-radius:15px}.minimap-panel{width:252px;overflow:hidden;flex-shrink:0}.panel-top{padding:16px 16px 12px;display:flex;align-items:center;justify-content:space-between}.panel-top>div{display:flex;align-items:center;gap:7px}.panel-top svg{width:15px;height:15px}.panel-top strong{font-size:13px;font-weight:650}.text-button{background:none;font-size:11px;font-weight:550;padding:0;color:#74806c}.text-button>span{margin-left:5px}.minimap-panel canvas{display:block;width:100%;height:155px;background:#e7eddf}.map-footer{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#7b8677;padding:11px 14px}.map-footer>span:first-child{display:flex;align-items:center;gap:5px}.map-player-dot{width:6px;height:6px;background:#426e4a;border-radius:50%}.map-north{color:#446747;font-weight:600}.drive-center{position:absolute;left:50%;transform:translateX(-50%);bottom:0;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:290px}.speed-panel{display:flex;align-items:center;justify-content:center;gap:18px;padding:14px 18px;min-width:285px;height:98px;background:#fbfcf7ef}.indicator{background:none;color:#bbc6b1;padding:4px;font-size:15px}.indicator.on{color:#558837;animation:blink 1s step-end infinite}.speed-limit{border-radius:50%;border:4px solid #cb6860;background:#fffefb;width:43px;height:43px;display:grid;place-items:center;flex-shrink:0;color:#24392d;font-size:20px;font-weight:700}.speed-readout{text-align:center;min-width:75px}.speed-readout>div{display:flex;align-items:baseline;gap:5px}.speed-readout strong{font-family:Manrope,sans-serif;font-size:44px;font-weight:500;letter-spacing:-2px;line-height:1}.speed-readout div>span{color:#89937f;font-size:10px}.speed-readout>span{font-size:8px;letter-spacing:1.5px;color:#819071;display:block;margin-top:7px}.speed-readout.speeding strong{color:#ba5c46}.gear-stack{display:flex;flex-direction:column;align-items:center;gap:5px}.gear-letter{font-size:18px;font-weight:550}.gear-stack>span:last-child{font-size:8px;color:#8b957f}.drive-status{color:#fff;font-size:11px;display:flex;align-items:center;gap:7px;text-shadow:0 1px 4px #143b39b0;background:#244b344f;border:1px solid #e9f4e118;padding:6px 11px;border-radius:20px}.status-dot{width:5px;height:5px;border-radius:50%;background:#dcf4c7}.coach-panel{width:302px;padding:19px 18px 14px;flex-shrink:0}.coach-heading{display:flex;align-items:center;gap:9px}.coach-icon{display:grid;place-items:center;width:32px;height:32px;background:#e8efdf;border-radius:9px;color:#769359}.coach-icon svg{width:19px;height:19px}.coach-heading h2{font-size:12px;font-weight:650;margin:0 0 4px}.coach-heading div>span{font-size:9px;color:#929b87}.switch{margin-left:auto;position:relative;width:28px;height:17px;flex-shrink:0;cursor:pointer}.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0}.switch>span{display:block;border-radius:15px;background:#cdd4c4;width:100%;height:100%}.switch>span:before{content:'';position:absolute;top:3px;left:3px;width:11px;height:11px;background:#fff;border-radius:50%;transition:transform .2s}.switch input:checked+span{background:#688850}.switch input:checked+span:before{transform:translateX(11px)}.switch input:focus-visible+span{outline:2px solid #234e33;outline-offset:3px}.coach-tip{border-top:1px solid #e7eadd;margin-top:16px;padding-top:13px;min-height:118px}.tip-number{font-size:9px;color:#88947b;letter-spacing:1.5px}.coach-tip h3{font-family:Manrope,sans-serif;font-size:17px;font-weight:650;letter-spacing:-.4px;margin:7px 0}.coach-tip p{font-size:12px;line-height:1.7;color:#828a7b;margin:0}.coach-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:14px}.tip-dots{display:flex;gap:5px}.tip-dots button{width:5px;height:5px;background:#d8e0cf;border-radius:50%;padding:0}.tip-dots button.active{background:#658450;width:15px;border-radius:4px}.controls-bar{position:absolute;left:0;right:0;bottom:0;min-height:49px;display:flex;align-items:center;justify-content:space-between;padding:0 29px;background:#fbfcf7f2;border-top:1px solid #ffffffb3;gap:15px}.keyboard-hints{display:flex;align-items:center;gap:19px}.keyboard-hints>span{font-size:10px;color:#7e8979;display:flex;align-items:center;gap:4px;white-space:nowrap}kbd{font-family:inherit;background:#edf0e7;border:1px solid #dfe5d7;border-radius:3px;padding:3px 4px;font-size:9px;min-width:17px;display:inline-flex;justify-content:center;color:#748268;box-shadow:0 1px 0 #dce1d3}kbd:last-of-type{margin-right:4px}.footer-note{font-size:10px;color:#88927f;white-space:nowrap}.utility-controls{display:flex;gap:10px;align-items:center}.utility-controls button{display:flex;align-items:center;gap:4px;background:transparent;color:#7e8a73;padding:4px}.utility-controls svg{width:16px;height:16px}.utility-controls button>span{font-size:10px}.start-card{text-align:center;background:#f8fbf3f2;border:1px solid #ffffffad;padding:21px 28px 17px;box-shadow:0 8px 40px #2a463511;border-radius:15px;margin-bottom:4px;width:315px;backdrop-filter:blur(14px)}.start-kicker{font-size:8px;color:#7b886f;letter-spacing:1.8px}.start-card h2{font-family:Manrope,sans-serif;font-size:22px;font-weight:650;letter-spacing:-.7px;margin:9px 0 6px}.start-card p{font-size:11px;color:#85917c;margin:0 0 17px}.primary-button{display:flex;align-items:center;justify-content:center;gap:10px;background:#224e3b;color:#f1f6e8;border-radius:8px;padding:13px 18px;width:100%;font-size:13px;font-weight:550}.primary-button svg{width:18px;height:18px}.primary-button svg:last-child{margin-left:auto}.primary-button svg:first-child{margin-right:auto}.start-footnote{font-size:9px;color:#9aA28d;display:block;margin-top:11px}.notification{position:absolute;left:50%;top:119px;transform:translate(-50%,-15px);max-width:430px;width:calc(100% - 50px);background:#fff8edee;border:1px solid #edcfac;padding:13px 16px;border-radius:11px;display:flex;gap:12px;align-items:center;opacity:0;pointer-events:none;transition:.3s;z-index:5;backdrop-filter:blur(10px)}.notification.show{opacity:1;transform:translate(-50%,0)}#notification-icon{width:29px;height:29px;display:grid;place-items:center;flex-shrink:0;background:#f2dfb7;border-radius:50%;color:#936c2e;font-weight:700}.notification strong{font-size:13px}.notification p{font-size:12px;line-height:1.5;margin:3px 0 0;color:#786f59}.notification.success{background:#edf9e7ed;border-color:#c2daac}.notification.success #notification-icon{background:#d5ebc6;color:#527342}#loading{position:absolute;inset:0;background:#eaf0e4;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;z-index:20}#loading strong{font-size:20px}#loading>span:last-child{font-size:13px;color:#7b8c77}.loading-wheel{font-size:65px;animation:pulse 1.5s infinite}#loading.hidden{display:none}dialog{border:1px solid #ffffffb0;border-radius:21px;background:#fbfcf7;color:#243e32;box-shadow:0 20px 100px #152f3155;width:min(580px,calc(100% - 28px));max-height:85dvh;padding:24px 28px;overscroll-behavior:contain}dialog::backdrop{background:#122c355b;backdrop-filter:blur(5px)}.modal-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}.modal-eyebrow{font-size:10px;letter-spacing:2px;color:#829477;font-weight:650}dialog h2{font-family:Manrope,sans-serif;font-size:29px;font-weight:650;letter-spacing:-1px;margin:4px 0 10px}dialog .intro{color:#81907b;font-size:14px;line-height:1.7;margin:0 0 22px}.lesson-card{display:flex;align-items:center;gap:14px;padding:17px 15px;border:1px solid #e1e7d9;border-radius:11px;width:100%;text-align:left;background:#f4f7ee;margin-top:10px}.lesson-card .lesson-num{font-family:Manrope,sans-serif;color:#7a9268;font-size:23px}.lesson-card strong{display:block;font-size:14px;margin-bottom:5px}.lesson-card small{display:block;color:#849078;font-size:12px;line-height:1.5}.lesson-card .lesson-arrow{margin-left:auto;color:#708564}.setting-row{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid #e5eadf;gap:18px}.setting-row strong{display:block;font-size:14px}.setting-row p{font-size:12px;line-height:1.5;color:#89927f;margin:5px 0 0}.setting-row select{padding:8px 10px;background:#edf2e4;border:1px solid #dbe3ce;color:#416036;border-radius:6px;max-width:150px}.setting-row input[type=range]{width:130px;accent-color:#597d41}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:23px 0}.stat-card{border:1px solid #e0e6d6;border-radius:11px;padding:18px 8px;text-align:center}.stat-card strong{display:block;font-family:Manrope,sans-serif;font-size:30px;font-weight:550}.stat-card span{display:block;margin-top:8px;color:#89947e;font-size:11px}.progress-note{font-size:12px;line-height:1.7;color:#86917a}.controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;font-size:13px;margin:23px 0}.controls-grid div{background:#edf2e4;padding:12px;border-radius:7px}.control-key{font-weight:650;display:block;margin-bottom:5px}.rules-note{background:#eaf1df;border-radius:10px;padding:14px;font-size:12px;line-height:1.7;color:#667957}.rules-note a{color:#335c39}#world-map{width:100%;height:auto;border-radius:12px;background:#e7eddf}.map-destinations{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.map-destinations button{padding:9px 11px;font-size:12px;background:#e7efdc;border:1px solid #d5e0ca;border-radius:7px}.mobile-controls{display:none}.paused-label{color:#a8b3a1}@keyframes blink{50%{opacity:.3}}@keyframes pulse{50%{opacity:.4}}@media(min-width:1600px){.topbar{height:88px;padding:0 42px}#simulator{height:calc(100dvh - 88px)}.world-top{top:35px;left:40px;right:40px}.bottom-ui{bottom:84px;left:40px;right:40px}.coach-panel{width:330px;padding:22px}.minimap-panel{width:280px}.minimap-panel canvas{height:173px}.coach-heading h2{font-size:14px}.coach-heading div>span{font-size:11px}.coach-tip p{font-size:14px}.coach-tip h3{font-size:19px}.controls-bar{min-height:55px}.keyboard-hints>span{font-size:12px}.footer-note{font-size:12px}.start-card{width:335px}.road-guidance{top:35px}}@media(max-width:1150px){.brand-sub{display:none}.topbar{padding:0 22px}.main-nav{gap:24px;margin-left:0}.footer-note{display:none}.road-guidance{top:114px;min-width:290px}.coach-panel{width:265px;padding:15px}.minimap-panel{width:217px}.bottom-ui{left:20px;right:20px;gap:10px}.world-top{left:22px;right:22px}.start-card{width:280px;padding:18px}.speed-panel{min-width:255px;gap:13px;padding:13px}.drive-center{min-width:255px}.camera-controls{right:21px;top:104px}.notification{top:193px}}@media(max-width:900px){.traffic-badge{display:none}.coach-panel{width:225px}.coach-heading h2{font-size:11px}.coach-icon{display:none}.minimap-panel{width:190px}.minimap-panel canvas{height:130px}.start-card{width:258px}.start-card h2{font-size:19px}.road-guidance{top:27px;left:54%;min-width:260px}.road-guidance strong{font-size:11px}.road-guidance div>span{font-size:9px}.location-label h1{font-size:23px}.conditions{font-size:10px}.conditions span:last-child,.condition-divider{display:none}.notification{top:110px}.coach-tip p{font-size:11px}.controls-bar{padding:0 18px}.keyboard-hints{gap:10px}}@media(pointer:coarse){.mobile-controls{display:flex;position:absolute;bottom:145px;left:20px;right:20px;justify-content:space-between;pointer-events:none;z-index:6}.mobile-controls>div{display:flex;gap:10px;pointer-events:auto}.mobile-controls button{touch-action:none;user-select:none;-webkit-user-select:none;width:63px;height:64px;background:#f6faf1bd;color:#294535;backdrop-filter:blur(7px);border:1px solid #fff9;border-radius:12px;font-size:20px;box-shadow:0 3px 15px #22452b18}.mobile-controls button.held{background:#bad89b}.mobile-controls .brake-pedal{font-size:11px;background:#efdbb9db}.mobile-controls .gas-pedal{font-size:12px;background:#d0e8b4e6;height:82px;align-self:flex-end}.keyboard-hints{display:none}.minimap-panel{display:none}.coach-panel{display:none}.drive-center{bottom:0}.bottom-ui{bottom:62px}.speed-panel{height:74px}.start-card{margin-bottom:65px}.drive-status{display:none}.utility-controls{margin-left:auto}.controls-bar:before{content:attr(data-touch-hint);font-size:11px;color:#819175}}@media(max-width:700px){.topbar{height:65px;padding:0 16px;gap:10px}.brand{font-size:26px;gap:8px}.brandmark{width:29px;height:31px;font-size:27px;border-radius:8px}.main-nav{gap:16px;margin-left:auto}.nav-item{font-size:12px}.nav-item .count{display:none}.header-right{gap:0}.header-right .icon-btn{width:29px;height:29px}.main-nav .nav-item:last-child{font-size:0}.main-nav .nav-item:last-child:before{content:attr(data-short-label);font-size:12px}#simulator{height:calc(100dvh - 65px)}.world-top{top:20px;left:18px;right:18px}.eyebrow{font-size:8px;letter-spacing:1.7px}.location-label h1{font-size:23px;margin:5px 0 7px}.location-label p{font-size:10px}.conditions{padding:7px 10px;font-size:10px}.road-guidance{top:111px;left:18px;transform:none;padding:9px;min-width:0;width:260px;max-width:calc(100% - 101px);border-radius:9px}.road-guidance strong{font-size:11px;line-height:1.45}.road-guidance div>span{font-size:10px;line-height:1.45}.guidance-icon{flex-shrink:0;width:30px;height:32px}.camera-controls{right:15px;top:104px;padding:4px;border-radius:10px;gap:1px}.camera-button{width:43px;min-height:43px}.camera-button span{font-size:8px}.camera-button svg{width:18px;height:18px}.camera-button:last-child{min-height:32px}.minimap-panel,.coach-panel{display:none}.drive-center{min-width:240px}.bottom-ui{bottom:61px}.speed-panel{height:76px;min-width:240px;padding:10px;gap:14px;border-radius:12px}.speed-readout strong{font-size:35px}.speed-limit{width:35px;height:35px;font-size:17px;border-width:3px}.gear-stack>span:last-child{font-size:7px}.drive-status{display:none}.start-card{width:280px;padding:19px 24px;margin-bottom:66px}.start-card h2{font-size:21px}.start-card p{font-size:11px}.start-kicker{font-size:8px}.controls-bar{min-height:44px;padding:0 13px}.keyboard-hints{display:none}.controls-bar:before{content:attr(data-pace-hint);font-size:10px;color:#829176}.utility-controls{gap:12px}.utility-controls svg{width:17px;height:17px}.notification{top:183px;max-width:calc(100% - 90px);left:16px;transform:translateY(-10px);width:auto;padding:10px;gap:8px}.notification.show{transform:translateY(0)}.notification strong{font-size:12px}.notification p{font-size:11px}.mobile-controls{bottom:158px;left:16px;right:16px}.mobile-controls button{width:56px;height:59px}.mobile-controls>div{gap:8px}.mobile-controls .gas-pedal{height:76px}dialog{padding:20px}dialog h2{font-size:25px}.stats-grid{gap:7px}.stat-card strong{font-size:24px}.setting-row{gap:10px}.setting-row select{max-width:125px;font-size:12px}}@media(max-height:650px){.start-card{padding:13px 22px;margin-bottom:0}.start-card p{margin-bottom:12px}.start-footnote{display:none}.coach-tip{min-height:90px}.coach-panel{padding:12px}.coach-tip p{font-size:11px}.minimap-panel canvas{height:110px}.world-top{top:17px}.road-guidance{top:95px}.notification{top:168px}.camera-controls{top:84px}.camera-button{min-height:35px}.camera-button span{display:none}.bottom-ui{bottom:60px}.coach-heading div>span{display:none}.speed-panel{height:75px}.speed-readout strong{font-size:34px}.drive-status{display:none}}@media(pointer:coarse) and (max-height:520px){.topbar{height:51px}#simulator{height:calc(100dvh - 51px)}.world-top{top:12px}.location-label h1{font-size:20px}.location-label p{display:none}.road-guidance{top:13px;left:50%;transform:translateX(-50%);width:260px}.camera-controls{top:65px;right:12px}.camera-button{min-height:31px}.start-card{margin-bottom:0;padding:12px 23px;width:265px}.start-kicker,.start-footnote,.start-card p{display:none}.start-card h2{font-size:18px;margin:0 0 10px}.primary-button{padding:10px}.drive-center{gap:7px}.speed-panel{height:61px}.mobile-controls{bottom:75px}.notification{top:77px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:0s!important}}
/* Readable coaching and usable touch targets at every screen size. */
.coach-heading h2{font-size:14px}.coach-tip p{font-size:14px;line-height:1.6}.coach-heading div>span{font-size:12px}.coach-bottom .text-button,.panel-top .text-button{font-size:12px}.coach-heading{flex-wrap:wrap}.coach-heading .switch{margin-left:auto}.start-card p{font-size:14px;line-height:1.5}.start-footnote{font-size:12px}.primary-button{font-size:14px}.tip-dots button{position:relative}.tip-dots button:before{content:'';position:absolute;inset:-8px -2px}.location-label p{font-size:12px}.road-guidance strong{font-size:14px}.road-guidance div>span{font-size:12px}.road-guidance{max-width:390px}.notification p{font-size:14px}.camera-button span{font-size:10px}#simulator:fullscreen{height:100dvh;width:100vw}.setting-row>span{font-size:12px;white-space:nowrap}.mobile-controls button{min-width:48px}.conditions{font-size:12px}
@media(max-width:1150px){.road-guidance strong{font-size:12px}.road-guidance div>span{font-size:11px}.coach-heading div>span{display:none}.coach-tip p{font-size:12px}.coach-heading h2{font-size:12px}.start-card p{font-size:12px}}
@media(max-width:700px){.start-footnote{font-size:11px}.road-guidance strong{font-size:12px}.road-guidance div>span{font-size:11px}.location-label p{font-size:11px}.notification p{font-size:12px}.conditions{font-size:11px}.camera-button span{font-size:9px}}
@media(max-width:390px){.topbar{padding:0 12px;gap:8px}.brand{font-size:22px;gap:6px}.brandmark{width:25px;height:28px;font-size:24px}.main-nav{gap:11px}.nav-item{font-size:11px}.main-nav .nav-item:last-child:before{font-size:11px}.header-right .icon-btn{width:27px;height:27px}.start-card{width:255px}.start-card h2{font-size:20px}}
@media(max-height:520px){#simulator{min-height:0}.world-top{top:12px}.start-card p{display:none}.start-footnote{display:none}.start-card h2{margin-bottom:12px}.coach-panel{display:none}.road-guidance{top:13px}.notification{top:82px}}

/* Keep the overview readable, with the same north-up orientation as the live map. */
dialog.map-modal{width:min(820px,calc(100% - 28px))}
.map-modal .intro{margin-bottom:14px}
#world-map{display:block;border:1px solid #cbd7c8}
.map-legend{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin:14px 0;color:#516b5e;font-size:14px}
.map-legend span{display:flex;align-items:center;gap:7px}
.map-legend i{width:20px;height:6px;border:1px solid #b9c5b7;border-radius:3px;background:#fff}
.map-legend .legend-scenic{background:#f4dea9}
.map-legend .legend-highway{background:#e8bd76}
.map-destinations button{font-size:14px;min-height:40px}
.minimap-panel canvas{height:auto;aspect-ratio:50/31}
.map-player-dot{background:#176878}

/* In the cabin, let the instruments and road take the foreground. */
#simulator.in-car .bottom-ui{left:24px;right:24px;bottom:65px;justify-content:flex-start}
#simulator.in-car .minimap-panel{width:178px;background:#eef3edeb;border-radius:11px}
#simulator.in-car .minimap-panel canvas{height:108px}
#simulator.in-car .minimap-panel .panel-top{padding:10px 12px}
#simulator.in-car .minimap-panel .map-footer{padding:8px 10px}
#simulator.in-car .coach-panel{position:fixed;left:24px;top:235px;width:235px;padding:12px;background:#f6f9f0e8;border-radius:11px}
#simulator.in-car .coach-heading div>span,#simulator.in-car .coach-icon,#simulator.in-car .tip-number{display:none}
#simulator.in-car .coach-tip{min-height:0;padding-top:9px;margin-top:9px}
#simulator.in-car .coach-tip h3{font-size:15px;margin:0 0 5px}
#simulator.in-car .coach-tip p{font-size:12px;line-height:1.55}
#simulator.in-car .coach-bottom{padding-top:9px}
#simulator.in-car .speed-panel{width:100px;height:38px;min-width:0;padding:0 5px;gap:14px;border-radius:24px;background:#172327df;border:1px solid #85969555}
#simulator.in-car .speed-panel .speed-limit,#simulator.in-car .speed-panel .speed-readout,#simulator.in-car .speed-panel .gear-stack{display:none}
#simulator.in-car .speed-panel .indicator{width:34px;height:34px;color:#a2b2af}
#simulator.in-car .speed-panel .indicator.on{color:#89e2a4}
#simulator.in-car .start-card{position:absolute;bottom:24vh}
#simulator.in-car .drive-status{display:none}
#simulator.in-car .drive-center{position:absolute;bottom:0;left:50%}
#simulator.in-car .road-guidance{top:30px;left:auto;right:112px;transform:none;min-width:270px;padding:10px 12px}
#simulator.in-car .world-top .conditions{display:none}
#simulator.in-car .notification{top:140px}
#simulator.in-car .camera-controls{top:108px}
@media(min-width:1600px){#simulator.in-car .coach-panel{top:255px}#simulator.in-car .minimap-panel{width:210px}#simulator.in-car .minimap-panel canvas{height:130px}}
@media(max-width:1100px){#simulator.in-car .coach-panel{display:none}#simulator.in-car .road-guidance{min-width:0;width:255px;right:90px}#simulator.in-car .minimap-panel{width:155px}#simulator.in-car .minimap-panel canvas{height:90px}}
@media(max-width:700px){#simulator.in-car .road-guidance{top:104px;left:16px;right:auto;width:230px}#simulator.in-car .drive-center{bottom:0}#simulator.in-car .start-card{margin-bottom:0}#simulator.in-car .mobile-controls{bottom:65px}#simulator.in-car .notification{top:190px}}
@media(max-height:650px){#simulator.in-car .coach-panel{display:none}#simulator.in-car .minimap-panel{width:145px}#simulator.in-car .minimap-panel canvas{height:80px}#simulator.in-car .road-guidance{top:15px}#simulator.in-car .drive-center{bottom:0}}

/* Holdable driving controls must never trigger iOS selection or callouts. */
.mobile-controls,.mobile-controls *, .indicator,.phone-toolbar,.phone-toolbar *{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  touch-action:none;
}
@media(pointer:coarse){
  #simulator{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
}
.phone-toolbar{display:none}
.phone-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.phone-menu-grid button{min-height:48px;padding:12px;background:#edf2e4;border:1px solid #dbe3ce;border-radius:9px;font-size:14px;text-align:left}
.phone-menu-back{margin-top:18px}

/* A compact driving HUD for phones and tablets in either orientation. */
@media(pointer:coarse){
  .topbar{display:none}
  #simulator{height:100dvh;min-height:0;--phone-top:max(12px,env(safe-area-inset-top));--phone-bottom:max(16px,env(safe-area-inset-bottom));--phone-left:max(12px,env(safe-area-inset-left));--phone-right:max(12px,env(safe-area-inset-right))}
  .phone-toolbar{position:absolute;top:var(--phone-top);right:var(--phone-right);display:flex;gap:8px;z-index:7}
  .phone-toolbar .icon-btn{width:44px;height:44px;background:#f8faf2ed;border:1px solid #fff9;box-shadow:0 2px 12px #183b3420}
  .camera-controls,.controls-bar,.conditions,.location-label .eyebrow,.location-label h1,.location-label .divider-dot,#district{display:none}
  #simulator .world-top{top:var(--phone-top);left:var(--phone-left);right:calc(var(--phone-right) + 104px);height:44px;align-items:center}
  .location-label{min-width:0;max-width:100%;padding:8px 11px;background:#f8faf2e6;border:1px solid #fff9;border-radius:20px}
  .location-label p{display:flex;font-size:11px;white-space:nowrap}
  .location-label p svg{flex-shrink:0}
  #road-name{overflow:hidden;text-overflow:ellipsis}
  :is(#simulator,#simulator.in-car) .road-guidance{top:calc(var(--phone-top) + 52px);left:var(--phone-left);right:var(--phone-right);transform:none;width:auto;max-width:none;min-width:0;padding:6px 10px;gap:7px;border-radius:16px;background:#f9fbf2de;box-shadow:none;backdrop-filter:none}
  .road-guidance .guidance-icon{width:20px;height:20px;font-size:18px;background:none}
  .road-guidance>div{min-width:0}
  .road-guidance strong{font-size:11px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .road-guidance div>span{display:none}
  :is(#simulator,#simulator.in-car) .notification{top:calc(var(--phone-top) + 94px);left:var(--phone-left);right:var(--phone-right);width:auto;max-width:none;padding:8px 10px;gap:8px;border-radius:12px;transform:translateY(-8px)}
  :is(#simulator,#simulator.in-car) .notification.show{transform:translateY(0)}
  .notification strong{display:block;font-size:11px;line-height:1.3}
  .notification p{font-size:11px;line-height:1.35;margin:2px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #notification-icon{width:24px;height:24px;font-size:13px}
  :is(#simulator,#simulator.in-car) .bottom-ui{left:var(--phone-left);right:var(--phone-right);bottom:calc(var(--phone-bottom) + 90px)}
  :is(#simulator,#simulator.in-car) .minimap-panel,:is(#simulator,#simulator.in-car) .coach-panel{display:none}
  :is(#simulator,#simulator.in-car) .drive-center{left:50%;bottom:0;min-width:0;gap:0}
  :is(#simulator,#simulator.in-car) .speed-panel{width:228px;min-width:0;height:48px;padding:0 4px;gap:6px;border-radius:25px;background:#f8faf2e6;border:1px solid #fff9;color:#213e37}
  :is(#simulator,#simulator.in-car) .speed-panel .speed-limit{display:grid;width:30px;height:30px;border-width:3px;font-size:14px}
  :is(#simulator,#simulator.in-car) .speed-panel .speed-readout{display:block;min-width:54px}
  :is(#simulator,#simulator.in-car) .speed-panel .speed-readout strong{font-size:27px;letter-spacing:-1px}
  .speed-readout div>span{font-size:9px}
  .speed-readout>span,.gear-stack>span:last-child{display:none}
  :is(#simulator,#simulator.in-car) .speed-panel .gear-stack{display:flex;width:12px}
  .gear-letter{font-size:12px}
  :is(#simulator,#simulator.in-car) .speed-panel .indicator{width:44px;height:44px;padding:0;flex-shrink:0;color:#71816b;font-family:Arial,sans-serif;font-variant-emoji:text}
  :is(#simulator,#simulator.in-car) .speed-panel .indicator.on{color:#315e23}
  :is(#simulator,#simulator.in-car) .start-card{position:absolute;bottom:68px;margin:0;width:min(280px,calc(100vw - 32px));padding:16px 20px}
  .start-card h2{font-size:20px;margin:0 0 12px}
  .start-card .start-kicker,.start-card p,.start-footnote{display:none}
  :is(#simulator,#simulator.in-car) .mobile-controls{display:flex;bottom:var(--phone-bottom);left:var(--phone-left);right:var(--phone-right);align-items:flex-end}
  .mobile-controls>div{gap:8px;align-items:flex-end;pointer-events:none}
  .mobile-controls button{pointer-events:auto;width:56px;height:64px;font-family:Arial,sans-serif;font-variant-emoji:text;font-size:22px;border-radius:16px}
  .mobile-controls .brake-pedal{height:64px;font-size:11px}
  .mobile-controls .gas-pedal{height:80px;font-size:13px}
}
/* Tablets and landscape phones have room for instruments between the controls. */
@media(pointer:coarse) and (min-width:701px), (pointer:coarse) and (min-width:560px) and (max-height:500px){
  :is(#simulator,#simulator.in-car) .bottom-ui{bottom:var(--phone-bottom)}
  :is(#simulator,#simulator.in-car) .road-guidance{right:auto;width:min(340px,calc(100% - 128px - var(--phone-left) - var(--phone-right)))}
  :is(#simulator,#simulator.in-car) .notification{left:50%;right:auto;top:calc(var(--phone-top) + 94px);width:min(310px,calc(100% - 260px));transform:translate(-50%,-8px)}
  :is(#simulator,#simulator.in-car) .notification.show{transform:translate(-50%,0)}
  :is(#simulator,#simulator.in-car) .start-card{bottom:62px}
}
/* Use the extra tablet space for legibility without covering more of the road. */
@media(pointer:coarse) and (min-width:701px) and (min-height:501px){
  #simulator{--phone-top:max(16px,env(safe-area-inset-top));--phone-bottom:max(20px,env(safe-area-inset-bottom));--phone-left:max(20px,env(safe-area-inset-left));--phone-right:max(20px,env(safe-area-inset-right))}
  .location-label p{font-size:13px}
  :is(#simulator,#simulator.in-car) .road-guidance{width:400px}
  .road-guidance strong{font-size:13px}
  :is(#simulator,#simulator.in-car) .notification{left:var(--phone-left);width:400px;transform:translateY(-8px)}
  :is(#simulator,#simulator.in-car) .notification.show{transform:translateY(0)}
  .notification strong,.notification p{font-size:13px}
  :is(#simulator,#simulator.in-car) .speed-panel{width:248px;height:52px;gap:10px}
  :is(#simulator,#simulator.in-car) .speed-panel .speed-readout strong{font-size:30px}
  .mobile-controls button,.mobile-controls .brake-pedal{width:64px;height:72px}
  .mobile-controls .gas-pedal{height:88px}
  :is(#simulator,#simulator.in-car) .start-card{bottom:72px}
}