@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Barlow:wght@400;500;600;700&display=swap');
:root{--lime:#d6f66c;--ink:#142329;--paper:#f5f5ea;--muted:#b6c7c3;--mono:ui-monospace,SFMono-Regular,Consolas,monospace}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--paper);font-family:Barlow,Arial,sans-serif;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--lime);outline-offset:4px}button{border:0}#game{height:100dvh;position:relative;isolation:isolate}#world{width:100%;height:100%;display:block;outline:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0c1a2070 0%,transparent 28%,transparent 68%,#0c1a2099 100%)}header{position:absolute;left:34px;right:34px;top:29px;display:flex;justify-content:space-between;pointer-events:none}header button{pointer-events:auto}.eyebrow{font:10px var(--mono);letter-spacing:1.5px;display:flex;align-items:center;gap:9px}.dot{display:inline-block;background:var(--lime);height:6px;width:6px;border-radius:50%;flex-shrink:0}.version{opacity:.55;margin-left:6px}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:64px;line-height:.84;letter-spacing:-1.5px;margin:17px 0 13px;font-weight:800;text-shadow:0 2px 28px #0a202666}h1>span{display:block;color:var(--lime)}.asterisk{font-size:50px;margin-left:6px}.brand-sub{font:9px var(--mono);letter-spacing:1.5px}.top-right{text-align:right}.coordinates{font:13px var(--mono);letter-spacing:1px}.location{font-size:10px;letter-spacing:1.6px;margin-top:8px}.location span{opacity:.55;margin-left:12px}.toolbar{display:flex;justify-content:flex-end;gap:6px;margin-top:23px}.toolbar button{border:1px solid #ffffff3b;background:#1423299c;backdrop-filter:blur(12px);height:37px;padding:0 12px;font-size:16px;border-radius:3px}.toolbar span{font-size:11px;margin-left:6px}.toolbar button:hover{background:var(--lime);color:var(--ink)}.mission{position:absolute;left:34px;top:241px;width:269px;background:#12252be8;border:1px solid #d0e3d328;backdrop-filter:blur(16px);padding:18px 19px;border-radius:4px;box-shadow:0 12px 60px #12252b26}.section-label{display:flex;justify-content:space-between;font:8px var(--mono);letter-spacing:1px;color:var(--lime)}h2{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:600}.mission h2{font-size:25px;letter-spacing:.2px;margin:12px 0 8px}.mission p{font-size:12px;line-height:1.6;color:var(--muted);margin:0}.destination{display:flex;align-items:center;gap:12px;margin-top:17px;padding-top:15px;border-top:1px solid #ffffff20}.pin{font-size:22px;color:var(--lime);border:1px solid #d6f66c44;width:32px;height:32px;text-align:center;line-height:29px;border-radius:50%}.destination div{display:flex;flex-direction:column;gap:5px}.destination div>span{font:10px var(--mono);letter-spacing:.6px}.destination small{font-size:10px;color:var(--muted)}.text-button{background:transparent;padding:16px 0 1px;width:100%;text-align:left;font-size:12px;color:var(--lime)}.text-button span{float:right}#missionProgress{display:flex;gap:4px;margin-top:13px}#missionProgress i{height:2px;background:#ffffff25;flex:1}#missionProgress i.done{background:var(--lime)}.road-badge{position:absolute;left:50%;transform:translateX(-50%);top:29px;display:flex;align-items:center;gap:10px;background:#13282be6;padding:12px 17px;border-radius:3px;box-shadow:0 5px 25px #1025291a;font-size:12px;white-space:nowrap}.road-badge small{font:8px var(--mono);color:#b4c5c0;padding-left:10px;border-left:1px solid #ffffff30}.minimap{position:absolute;left:34px;bottom:64px;width:240px;background:#13272beb;border:1px solid #ffffff30;box-shadow:0 10px 50px #0e202c33;border-radius:4px;overflow:hidden}.map-header,.map-footer{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;font:8px var(--mono);letter-spacing:1px}.map-header span+span{color:var(--lime)}#mini{display:block;width:100%;height:150px}.map-footer{padding:4px 12px 7px;color:#bfd0c7}.map-footer button{background:transparent;color:var(--lime);font-size:18px;padding:0 2px}.controls{position:absolute;bottom:77px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;font:8px var(--mono);letter-spacing:1px;background:#14292bcb;padding:10px 16px;border-radius:4px;white-space:nowrap}.controls>div{text-align:center}.controls>div>div{display:flex;gap:3px;margin-top:3px}kbd{font:10px var(--mono);background:#ffffff10;border:1px solid #ffffff40;border-bottom-width:2px;padding:4px 6px;border-radius:3px;display:inline-block;min-width:23px;text-align:center}kbd.wide{font-size:8px}.controls i{height:16px;border-left:1px solid #ffffff25;margin:0 3px}.speedometer{position:absolute;right:34px;bottom:65px;width:190px}.drive-label{font:9px var(--mono);letter-spacing:1px;display:flex;justify-content:space-between}.drive-label span{font-size:8px;color:var(--lime)}.speedometer>div:nth-child(2){display:flex;align-items:center;gap:14px;justify-content:flex-end}.speedometer b#speed{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:600;font-size:106px;line-height:1.12;letter-spacing:-2px;font-variant-numeric:tabular-nums}.speedometer>div>span{font:9px var(--mono);line-height:2;letter-spacing:1px;color:#b6c7c3}.speedometer strong{color:var(--paper);font-weight:400;font-size:21px}.speed-track{height:4px;background:#ffffff30}.speed-track i{display:block;width:0;height:100%;background:var(--lime)}.trip{margin-top:12px;display:flex;justify-content:space-between;font:8px var(--mono);letter-spacing:1px;color:#b6c7c3}.trip b{color:var(--paper);font-weight:400}footer{position:absolute;bottom:18px;left:34px;right:34px;display:flex;justify-content:space-between;font:8px var(--mono);letter-spacing:.6px;color:#dfebe5a6}footer a{color:inherit;text-decoration:none}footer button{background:transparent;font:8px var(--mono);margin-left:8px;color:var(--lime)}#toast{position:absolute;left:50%;top:105px;transform:translate(-50%,-10px);padding:12px 20px;border:1px solid #d6f66c66;border-radius:3px;background:#13272bf2;opacity:0;transition:.3s;pointer-events:none;text-align:center;font-size:13px;max-width:90vw}#toast.show{opacity:1;transform:translate(-50%,0)}.overlay{position:absolute;inset:0;background:#102227f5;z-index:4;backdrop-filter:blur(12px)}.overlay[hidden]{display:none}.map-top{position:absolute;top:32px;left:36px;right:36px;display:flex;justify-content:space-between;align-items:flex-start}.map-top h2{font-size:40px;margin:9px 0}.map-top p{font-size:12px;color:var(--muted)}.close{background:#ffffff10;padding:10px 14px;border:1px solid #ffffff30;border-radius:3px;font-size:11px}.close kbd{margin-left:10px}#bigmap{position:absolute;top:170px;left:24px;width:calc(100% - 48px);height:calc(100% - 230px)}.map-legend{position:absolute;bottom:22px;left:36px;right:36px;display:flex;gap:25px;font:10px var(--mono);color:var(--muted)}.map-legend span:last-child{margin-left:auto}.map-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}.yellow{background:var(--lime)}.orange{background:#ffad71}dialog{background:#142b2f;color:var(--paper);border:1px solid #d6f66c44;border-radius:6px;max-width:560px;padding:34px;box-shadow:0 30px 100px #0009;max-height:90dvh}dialog::backdrop{background:#0a1b2299;backdrop-filter:blur(7px)}dialog .close{float:right;margin:-12px -12px 16px 20px}dialog>.eyebrow{clear:both;color:var(--lime);padding-top:12px}dialog h2{font-size:40px;line-height:1.08;margin:15px 0}dialog p{color:#b6c7c3;font-size:13px;line-height:1.6}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;border-block:1px solid #ffffff20;margin:20px 0}.help-grid b{color:var(--paper);font:11px var(--mono)}dialog .note{font-size:10px}dialog a{color:var(--lime)}.primary{width:100%;background:var(--lime);color:var(--ink);padding:13px;font-weight:700;margin-top:15px;border-radius:3px}.touch{display:none;position:absolute;bottom:70px;left:20px;right:20px;justify-content:space-between;pointer-events:none}.touch>div{display:flex;gap:10px}.touch button{pointer-events:auto;width:53px;height:53px;background:#13272bcf;border:1px solid #ffffff66;border-radius:6px;font-size:24px;touch-action:none;user-select:none}.touch button.pressed{background:var(--lime);color:var(--ink)}#loading{position:absolute;inset:0;z-index:10;background:#14282d;display:flex;align-items:center;justify-content:center;flex-direction:column}.loading-logo{font:800 68px/.85 'Barlow Condensed',Impact,sans-serif;letter-spacing:-1px}.loading-logo span{display:block;color:var(--lime)}#loading p{font:11px var(--mono);color:var(--muted);margin-top:30px}.loading-line{width:150px;height:2px;background:#d6f66c44;overflow:hidden}.loading-line:after{content:'';display:block;background:var(--lime);width:50px;height:100%;animation:load 1s infinite alternate}@keyframes load{to{transform:translateX(100px)}}
@media(max-height:740px) and (min-width:701px){h1{font-size:51px}.mission{top:197px;padding:14px 17px}.mission h2{font-size:23px}.mission p{font-size:11px}.minimap{width:210px;bottom:55px}#mini{height:115px}.speedometer{bottom:55px}.controls{bottom:65px}}
@media(max-width:1000px){.road-badge{top:auto;bottom:278px}.road-badge small{display:none}.controls{bottom:45px;font-size:7px;gap:5px}.controls i{margin:0}.controls kbd{font-size:8px;padding:3px}.speedometer{width:150px}.speedometer b#speed{font-size:85px}}
@media(pointer:coarse){.touch{display:flex}.controls{display:none}.minimap{bottom:148px}.speedometer{bottom:148px}.road-badge{bottom:337px}}
@media(max-width:700px){header{left:18px;right:18px;top:20px}.eyebrow{font-size:7px;letter-spacing:1px}.version{display:none}h1{font-size:43px;margin-top:13px}.asterisk{font-size:35px}.brand-sub{font-size:6px;letter-spacing:1px}.coordinates{font-size:9px}.location{font-size:7px;letter-spacing:.5px}.location span{display:none}.toolbar{margin-top:17px;gap:5px}.toolbar button{height:32px;padding:0 9px;font-size:13px}.toolbar span{font-size:9px;margin-left:3px}.mission{left:18px;top:164px;width:205px;padding:12px}.section-label{font-size:6px}.mission h2{font-size:21px;margin:9px 0}.mission p{font-size:10px}.destination{gap:8px;padding-top:11px;margin-top:12px}.destination div>span{font-size:8px}.destination small{font-size:8px}.pin{width:26px;height:26px;line-height:23px;font-size:19px}.text-button{font-size:10px;padding-top:11px}.minimap{left:18px;width:165px}#mini{height:102px}.map-header{font-size:7px;padding:8px 9px}.map-footer{font-size:7px}.speedometer{right:18px;width:127px}.drive-label{font-size:7px}.drive-label span{font-size:6px}.speedometer b#speed{font-size:76px}.speedometer>div>span{font-size:8px}.trip{font-size:7px;letter-spacing:0}.road-badge{font-size:10px;padding:9px 12px;bottom:315px;top:auto}.controls{bottom:45px}.controls>span{font-size:6px}.controls i{display:none}footer{left:18px;right:18px;bottom:14px;font-size:6px;line-height:1.5;gap:20px}footer>span:first-child{max-width:105px}footer>span:last-child{text-align:right;max-width:200px}footer button{font-size:7px;padding-right:0}.map-top{left:22px;right:22px;top:25px}.map-top h2{font-size:32px}.map-top p{font-size:10px;max-width:200px}#bigmap{top:155px;height:calc(100% - 215px)}.map-legend{left:22px;right:22px;font-size:8px;gap:15px}.map-legend span:last-child{display:none}dialog{margin:15px;padding:25px}dialog h2{font-size:32px}dialog p{font-size:12px}#toast{top:126px;width:85%;font-size:11px}}
@media(max-height:650px) and (max-width:700px){.mission{top:142px}.mission p{display:none}.mission h2{margin:7px 0}.minimap{width:145px}.road-badge{bottom:270px}#mini{height:75px}.mission{width:190px}.brand-sub{display:none}}

@media(max-width:700px) and (pointer:fine){.minimap,.speedometer{bottom:110px}.controls{bottom:49px;width:auto;padding:8px 12px}.road-badge{bottom:297px}.controls>span{font-size:7px}}
