@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/font-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/font-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/font-2.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/font-3.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/font-4.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/font-5.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/font-6.ttf) format('truetype');
}
:root{--ink:#f4f4de;--lime:#ddf28a;--night:#17251c;--line:#f5f7da40;font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--ink);color-scheme:dark}*{box-sizing:border-box}html,body,#game{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{background:#18271b;user-select:none;-webkit-user-select:none;touch-action:none}button,input,select{font:inherit}button{cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent;border:0;transition:background .16s,opacity .16s,transform .1s}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--lime);outline-offset:4px}button:active{transform:scale(.96)}button:disabled{opacity:.55;cursor:wait}button svg{width:22px;height:22px;flex-shrink:0}button:hover{filter:brightness(1.08)}[hidden]{display:none!important}#world{width:100%;height:100%;display:block;touch-action:none;outline:0}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#05130c50,transparent 20%,transparent 70%,#03100970);box-shadow:inset 0 0 160px #05110a30}.intro{position:absolute;inset:0;background:linear-gradient(90deg,#0c1a12b8,#0c1a123b 48%,transparent 76%);transition:opacity .55s}.intro.leaving{opacity:0;pointer-events:none}.wordmark{position:absolute;top:calc(32px + env(safe-area-inset-top));left:calc(40px + env(safe-area-inset-left));font-size:14px;font-weight:700;letter-spacing:2px;display:flex;align-items:center;gap:12px}.brand-symbol{font-size:29px;color:var(--lime)}.edition{border-left:1px solid var(--line);padding-left:16px;margin-left:8px;font-size:12px;color:#d1d6c5;font-weight:500;letter-spacing:1px}.intro-content{position:absolute;left:calc(6vw + env(safe-area-inset-left));top:50%;transform:translateY(-46%);max-width:530px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;display:flex;align-items:center;gap:10px}.eyebrow>span{height:6px;width:6px;background:var(--lime);border-radius:50%}h1{font-family:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;font-size:clamp(100px,13.3vw,184px);font-weight:800;line-height:.77;letter-spacing:-3px;margin:24px 0 30px;text-shadow:0 2px 30px #0001}h1>span{color:var(--lime)}.tagline{font-size:17px;line-height:1.6;margin:0 0 25px;color:#eff0da}.start{background:var(--lime);color:#172818;padding:19px 22px;min-width:264px;display:flex;align-items:center;gap:13px;font-size:16px;font-weight:700;border-radius:4px;box-shadow:0 3px 14px #0002}.start-arrow{margin-left:auto;font-size:23px;font-weight:400}.intro-note{font-size:12px;color:#d3dbcb;margin-top:15px}.intro-footer{position:absolute;bottom:calc(27px + env(safe-area-inset-bottom));left:calc(40px + env(safe-area-inset-left));right:calc(40px + env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;font-weight:600;letter-spacing:1.5px}.intro-footer i{font-style:normal;margin:0 10px;color:#b5c1a2}.orientation-note{display:none;font-size:12px;font-weight:400;letter-spacing:0}.hud{position:absolute;inset:0;pointer-events:none}.hud button,.hud .steering{pointer-events:auto}.cut-status{position:absolute;top:calc(26px + env(safe-area-inset-top));left:calc(28px + env(safe-area-inset-left));width:206px;text-shadow:0 1px 8px #10271688}.hud-label{display:flex;justify-content:space-between;gap:20px;font-size:12px;font-weight:700;letter-spacing:1.4px}.hud-label #cut-percent{font-size:16px;letter-spacing:0;font-variant-numeric:tabular-nums}.cut-track{height:3px;background:#ffffff38;margin:9px 0 7px;border-radius:2px;overflow:hidden}.cut-track div{height:100%;background:var(--lime);width:0;transition:width .4s}.cut-detail{display:flex;justify-content:space-between;color:#eef1db;font-size:12px}.quick-controls{position:absolute;top:calc(21px + env(safe-area-inset-top));right:calc(26px + env(safe-area-inset-right));display:flex;gap:9px;align-items:center}.icon-button,.weather-button{background:#11231880;backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:5px;height:44px;display:flex;align-items:center;justify-content:center}.icon-button{width:44px;font-size:28px}.weather-button{padding:0 14px;gap:10px;font-size:14px;margin-right:3px}.hint{position:absolute;top:calc(110px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);font-size:14px;background:#1b3229bb;border:1px solid #d7e7c327;padding:11px 16px;border-radius:4px;width:max-content;max-width:75vw;text-align:center;opacity:0;transition:opacity .5s}.hint.show{opacity:1}.toast{position:absolute;left:50%;top:30%;transform:translateX(-50%);padding:10px 19px;max-width:85vw;font-size:14px;line-height:1.4;background:#14291bd9;border:1px solid #d9ecb335;border-radius:5px;text-align:center;opacity:0;transition:opacity .3s}.toast.show{opacity:1}.drive-readout{position:absolute;bottom:calc(76px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);text-align:center;text-shadow:0 1px 12px #041909}.speed{display:flex;gap:8px;align-items:baseline;justify-content:center}.speed>span{font-family:'Barlow Condensed',Impact,sans-serif;font-size:48px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}.speed small{font-size:12px;font-weight:700;letter-spacing:1px}.deck-state{font-size:11px;letter-spacing:1.4px;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:3px}#deck-led{width:5px;height:5px;background:var(--lime);border-radius:50%}.action-row{position:absolute;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:10px}.action-button{display:flex;align-items:center;justify-content:center;gap:8px;min-width:90px;height:42px;background:#15271e99;border:1px solid var(--line);border-radius:5px;font-size:12px;backdrop-filter:blur(8px)}.action-button.active{color:var(--lime);border-color:#d8ed7d77;background:#34442488}.action-button svg{width:18px;height:18px}.steering{position:absolute;bottom:calc(31px + env(safe-area-inset-bottom));left:calc(38px + env(safe-area-inset-left));width:128px;height:128px;touch-action:none;border-radius:50%}.steering-ring{position:absolute;inset:0;border:1px solid #f4f4de66;background:#16291c3b;border-radius:50%;backdrop-filter:blur(3px);box-shadow:inset 0 0 0 13px #e4efd807}.steering-thumb{width:67px;height:67px;border-radius:50%;background:#1c342ab0;border:1px solid #fcffe975;display:grid;place-items:center;position:absolute;left:30.5px;top:30.5px;box-shadow:0 4px 12px #071b1233;pointer-events:none}.steering-thumb svg{width:34px;height:34px}.steer-left,.steer-right{font-size:28px;position:absolute;top:44px;color:#f4f4de99}.steer-left{left:9px}.steer-right{right:9px}.control-label{position:absolute;top:calc(100% + 9px);font-size:10px;letter-spacing:2px;width:100%;text-align:center;color:#ebf0d4}.pedals{position:absolute;bottom:calc(36px + env(safe-area-inset-bottom));right:calc(34px + env(safe-area-inset-right));display:flex;align-items:end;gap:12px}.pedal{background:#152e2199;border:1px solid #f6f8e14d;border-radius:10px;width:62px;height:65px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;touch-action:none;backdrop-filter:blur(5px)}.pedal span{font-size:10px;letter-spacing:1.5px}.pedal.forward{background:#d5eb8650;border:1px solid #eafaab88;width:77px;height:107px;color:#fcffe8;box-shadow:inset 0 0 0 5px #d7e9a00a}.pedal.forward svg{width:32px;height:32px}.pedal.pressed{background:#d1eb82b3;color:#17331d;transform:scale(.97)}.keyboard-hint{display:none;position:absolute;bottom:28px;left:30px;font-size:12px;color:#e8efd1;text-shadow:0 1px 5px #142913}.keyboard-hint i{font-style:normal;margin:0 7px;opacity:.6}kbd{font:inherit;font-size:11px;letter-spacing:.5px}dialog{background:#13231af7;backdrop-filter:blur(16px);color:var(--ink);border:1px solid #d4e7bd40;border-radius:12px;padding:26px 30px;max-width:440px;width:calc(100% - 32px);max-height:calc(100dvh - 32px);overflow:auto;touch-action:pan-y;box-shadow:0 18px 100px #0007}dialog::backdrop{background:#06190e66;backdrop-filter:blur(5px)}.settings-top{display:flex;align-items:center;justify-content:space-between}.settings-top .icon-button{background:none;border:none;height:30px;width:30px}.settings-top .eyebrow{font-size:11px;color:var(--lime)}h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:45px;font-weight:700;margin:8px 0 26px;line-height:1.1}.setting{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:18px 0;font-size:14px}.options{display:flex;gap:3px}.options button{padding:9px 10px;font-size:12px;border-radius:4px;background:#ffffff09;color:#d9e2cb}.options button.selected{background:var(--lime);color:#223022}input[type=range]{accent-color:var(--lime);max-width:180px}select{background:#ffffff0c;border:1px solid #ffffff1a;color:var(--ink);padding:9px 8px;border-radius:4px;font-size:13px}select option{background:#17251c}dialog .start{margin-top:26px;width:100%;font-size:14px;min-width:0;padding:15px 16px}.settings-footer{display:flex;justify-content:space-between;margin-top:15px}.settings-footer button{background:none;text-decoration:underline;text-underline-offset:4px;color:#c8d3b9;font-size:12px;padding:8px 0}details{font-size:12px;color:#afbea6;border-top:1px solid #ffffff13;padding-top:13px;margin-top:12px;line-height:1.65}summary{cursor:pointer}details a{color:#d5e7a8}.error{position:absolute;inset:0;background:#17251cf2;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:30px;text-align:center}.error p{max-width:400px;line-height:1.6}.error button{background:var(--lime);color:#19271b;padding:15px 30px;border-radius:4px;margin-top:12px}
@media(pointer:fine) and (min-width:1000px){.steering,.pedals{opacity:.5;transform:scale(.8)}.steering{bottom:75px;left:25px}.pedals{bottom:65px;right:25px}.steering:hover,.pedals:hover{opacity:1}.keyboard-hint{display:block}}
@media(max-width:600px) and (orientation:portrait){.intro-content{left:30px;top:49%;transform:translateY(-38%)}h1{font-size:128px}.wordmark{left:25px;top:calc(25px + env(safe-area-inset-top));font-size:12px}.edition{font-size:10px}.tagline{font-size:15px}.intro-footer{left:25px;right:25px;bottom:calc(25px + env(safe-area-inset-bottom));display:block;font-size:10px;line-height:2}.orientation-note{display:block}.intro{background:linear-gradient(90deg,#0c1a12ad,#0c1a1250 80%)}.cut-status{left:18px;top:calc(21px + env(safe-area-inset-top));width:160px}.hud-label{font-size:10px;gap:10px}.cut-detail{font-size:11px}.quick-controls{top:calc(20px + env(safe-area-inset-top));right:15px;gap:5px}.weather-button{height:40px;width:40px;padding:0;margin:0}.weather-button span{display:none}.icon-button{height:40px;width:40px}.steering{left:20px;bottom:calc(77px + env(safe-area-inset-bottom));width:115px;height:115px}.steering-thumb{left:24px;top:24px}.steer-left,.steer-right{top:37px}.pedals{right:20px;bottom:calc(80px + env(safe-area-inset-bottom));gap:8px}.pedal.forward{width:65px;height:100px}.pedal.reverse{width:47px}.drive-readout{bottom:calc(124px + env(safe-area-inset-bottom))}.speed>span{font-size:34px}.speed small{font-size:10px}.deck-state{font-size:9px;letter-spacing:.5px}.action-row{bottom:calc(23px + env(safe-area-inset-bottom))}.hint{top:calc(91px + env(safe-area-inset-top));max-width:90vw;font-size:12px;width:90vw}.toast{top:26%}}
@media(max-height:540px) and (orientation:landscape){.wordmark{top:calc(16px + env(safe-area-inset-top));left:calc(25px + env(safe-area-inset-left));font-size:11px}.brand-symbol{font-size:24px}.edition{font-size:10px}.intro-content{left:calc(5vw + env(safe-area-inset-left));top:51%;transform:translateY(-43%)}.eyebrow{font-size:10px}h1{font-size:clamp(72px,21vh,114px);margin:13px 0 16px;letter-spacing:-1px}.tagline{font-size:13px;margin-bottom:13px}.start{padding:12px 16px;min-width:222px;font-size:14px}.start svg{width:18px;height:18px}.intro-note{font-size:10px;margin-top:9px}.intro-footer{bottom:calc(14px + env(safe-area-inset-bottom));left:calc(25px + env(safe-area-inset-left));font-size:9px}.cut-status{top:calc(16px + env(safe-area-inset-top));left:calc(20px + env(safe-area-inset-left));width:172px}.hud-label{font-size:10px}.cut-detail{font-size:10px}.quick-controls{top:calc(13px + env(safe-area-inset-top));right:calc(18px + env(safe-area-inset-right))}.icon-button{width:36px;height:36px}.weather-button{height:36px;font-size:12px}.steering{bottom:calc(21px + env(safe-area-inset-bottom));left:calc(26px + env(safe-area-inset-left));width:110px;height:110px}.steering-thumb{top:21.5px;left:21.5px}.steer-left,.steer-right{top:35px}.control-label{top:calc(100% + 5px);font-size:8px}.pedals{bottom:calc(24px + env(safe-area-inset-bottom));right:calc(26px + env(safe-area-inset-right))}.pedal.forward{height:89px;width:66px}.pedal.reverse{height:53px;width:50px}.drive-readout{bottom:calc(63px + env(safe-area-inset-bottom))}.speed>span{font-size:32px}.speed small{font-size:10px}.deck-state{font-size:9px}.action-row{bottom:calc(14px + env(safe-area-inset-bottom));gap:6px}.action-button{height:34px;min-width:78px;font-size:10px}.hint{top:calc(77px + env(safe-area-inset-top));font-size:12px;padding:8px 12px}.keyboard-hint{display:none}dialog{max-width:520px;padding:18px 24px}dialog h2{font-size:32px;margin:3px 0 15px}.setting{margin:10px 0}.options button{padding:7px 9px}dialog .start{margin-top:12px}}
@media(prefers-reduced-motion:reduce){button,.intro,.hint,.toast{transition:none}}

.tape-panel{position:absolute;top:calc(80px + env(safe-area-inset-top));right:calc(26px + env(safe-area-inset-right));width:280px;padding:13px 15px 12px;color:#e9e5d1;background:#1a2c32ed;border:1px solid #b8c6ba77;border-radius:7px;box-shadow:0 8px 35px #06110c44;backdrop-filter:blur(12px);pointer-events:auto}.tape-header{display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1.2px;color:#bac7c4}.tape-header button{width:34px;height:30px;background:transparent;font-size:24px;margin:-8px -8px -5px 0}.tape-song{font-family:Georgia,serif;font-style:italic;font-size:18px;margin:8px 0 9px}.tape-meta{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.8px;font-variant-numeric:tabular-nums}.tape-progress{height:2px;background:#e0dcc23b;margin:8px 0 11px}.tape-progress>div{height:100%;width:0;background:#ddf28a}.tape-buttons{display:flex;gap:5px}.tape-buttons button{flex:1;height:44px;background:#32464c;border:1px solid #bcc8c24d;border-radius:3px;font-size:13px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px}.tape-buttons button small{font-size:8px;letter-spacing:.9px}.tape-buttons button[aria-pressed=true]{color:#172818;background:#d7e9a4}.tape-volume{display:flex;align-items:center;gap:9px;font-size:8px;letter-spacing:.8px;margin-top:8px}.tape-volume input{width:130px;height:22px;max-width:none;touch-action:pan-x}.tape-volume span{margin-left:auto;color:#bcc8b7}.sun-setting{display:flex;align-items:center;gap:7px}.sun-setting span{font-size:9px;max-width:42px;color:#b9c5ae}.sun-setting input{width:100px}#wind-speed{display:block;font-size:10px;color:#b9c5ae;margin-top:3px}
@media(max-height:540px) and (orientation:landscape){.tape-panel{top:calc(61px + env(safe-area-inset-top));width:255px;padding:9px 12px}.tape-song{margin:6px 0;font-size:16px}.tape-progress{margin:6px 0 8px}.tape-volume{margin-top:4px}}
@media(max-width:600px) and (orientation:portrait){.tape-panel{right:15px;top:calc(80px + env(safe-area-inset-top))}}
@media(max-width:380px) and (orientation:portrait){.cut-status{width:132px}.quick-controls{gap:3px;right:12px}.icon-button,.weather-button{width:38px}}

.tape-choice{display:flex;align-items:center;gap:12px;margin:9px 0 3px}.tape-choice label{font-size:10px;letter-spacing:1px;color:#c5d2c5}.tape-choice select{flex:1;min-width:0;min-height:36px;font-size:14px}.tape-artist{display:block;color:#c4d7b7;font-size:12px;text-underline-offset:2px;margin:-4px 0 10px}.tape-panel{max-height:calc(100dvh - 180px);overflow:auto;touch-action:pan-y}.tape-panel .tape-song{font-size:17px}.tape-panel a{pointer-events:auto}
@media(max-height:540px) and (orientation:landscape){.tape-panel{right:50%;transform:translateX(50%);width:270px;max-height:calc(100dvh - 155px)}.tape-choice{margin:5px 0 3px}.tape-artist{margin-bottom:7px}}

.join-name{display:flex;flex-direction:column;gap:7px;margin:0 0 14px;max-width:340px}.join-name label{font-size:14px;letter-spacing:1.6px;color:#ddf28a}.join-name input{width:100%;min-height:46px;font-size:16px;border:1px solid #d4e7bd60;border-radius:6px;padding:10px 13px;background:#112019dc;color:#f3f5df;touch-action:manipulation;user-select:text;-webkit-user-select:text}.join-name input::placeholder{color:#afc0aa}.multiplayer-status{font-size:13px;line-height:1.4;margin:5px 0;color:#d8edb2;white-space:nowrap}.multiplayer-status.unsaved{color:#efcd8e}.settings-footer span{font-size:12px;max-width:210px;color:#afc0aa}.intro-content{max-height:calc(100dvh - 100px);overflow-y:auto;touch-action:pan-y}.intro-content h1{font-size:clamp(80px,12.5vw,166px)}@media(max-height:500px){.intro-content{top:51%;max-height:calc(100dvh - 62px);width:420px}.intro-content h1{font-size:78px;margin:10px 0 14px}.intro-content .tagline{margin-bottom:10px}.join-name{gap:3px;margin-bottom:7px;max-width:270px}.join-name label{font-size:12px}.join-name input{min-height:40px}.intro-content .start{padding:12px 18px}.intro-note{margin:7px 0}.intro-footer{display:none}}

/* Fill the live viewport and retain notch/home-indicator clearance in app mode. */
#game{height:100dvh;position:relative}html:fullscreen,html:-webkit-full-screen{width:100%;height:100%;background:#18271b}
.device-settings{border-top:1px solid var(--line);padding-top:10px;margin-top:14px}.display-button{min-height:44px;border:1px solid var(--line);border-radius:5px;background:#344424;padding:8px 14px;font-size:14px}
#device-profile,#graphics-status,#connection-status{font-size:14px;line-height:1.5;margin:6px 0}.device-explanation{font-size:14px;line-height:1.5;color:#c5d2bd;margin:8px 0 16px}
#fullscreen-help{max-width:480px;max-height:calc(100dvh - 40px);overflow:auto;touch-action:pan-y}#fullscreen-help p{font-size:16px;line-height:1.6}#fullscreen-help h2{font-size:34px}#fullscreen-session-note{color:#c5d2bd}#fullscreen-help .start{min-height:44px}
@media(max-width:600px) and (orientation:portrait){#fullscreen{position:absolute;right:0;top:calc(100% + 8px);width:44px;height:44px}.tape-panel{top:calc(124px + env(safe-area-inset-top))}.hint{max-width:70vw;width:70vw;left:40%}}

#fullscreen:not([data-display-mode="native"])[data-display-mode]{position:absolute;right:0;top:calc(100% + 8px);width:auto;min-height:44px;padding:0 11px;gap:7px;font-size:12px;white-space:nowrap}
#fullscreen-install-steps{padding-left:23px;font-size:15px;line-height:1.55}#fullscreen-install-steps li{padding-left:3px;margin:12px 0}#fullscreen-chrome-help a{font-size:14px;color:var(--lime);text-underline-offset:3px}#fullscreen-help #fullscreen-session-note{font-size:14px;line-height:1.5}
@media(max-width:600px) and (orientation:portrait){.hud:has(#fullscreen:not([data-display-mode="native"])[data-display-mode]) .hint{left:18px;width:calc(100vw - 164px);transform:none}}

.yard-cycle{font-size:12px;line-height:1.4;color:#dae6c7;margin-top:6px}.setting input[type=checkbox]{width:22px;height:22px;accent-color:var(--lime)}

.shelter-warning{margin-top:8px;max-width:320px;font-size:13px;line-height:1.35;color:#f7e39d;text-shadow:0 1px 4px #000}.weather-button{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#172718d9;border:1px solid #9aaa7460;border-radius:7px}.weather-button svg{width:25px;height:25px;flex:none}

/* Release identity stays below the driving controls, including phone safe areas. */
.intro-caption-option{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:14px;min-height:36px}.intro-caption-option input{width:20px;height:20px;accent-color:#d9ef91}
.weather-captions{position:absolute;left:50%;top:calc(138px + env(safe-area-inset-top));transform:translateX(-50%);max-width:min(440px,70vw);padding:8px 12px;border-radius:6px;background:#0b160ff0;color:#fff;font:500 16px/1.4 sans-serif;text-align:center;pointer-events:none;z-index:4}.weather-captions[hidden]{display:none}
@media(max-width:600px) and (orientation:portrait){.weather-captions{top:45%;max-width:calc(100vw - 32px);width:max-content}}
@media(max-height:540px) and (orientation:landscape){.weather-captions{top:calc(103px + env(safe-area-inset-top));max-width:45vw}}
.release-bar{position:absolute;right:calc(12px + env(safe-area-inset-right));bottom:calc(5px + env(safe-area-inset-bottom));z-index:8;display:flex;align-items:center;gap:8px;padding-left:10px;border:1px solid #b7c99d66;border-radius:7px;background:#102018ee;color:#edf2d8;font-size:12px;pointer-events:auto}
.release-bar button{min-height:44px;padding:7px 10px;font-size:12px;background:transparent;color:inherit}#release-version{font-variant-numeric:tabular-nums}
#release-notes,#photo-panel{width:min(520px,calc(100vw - 28px));max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;touch-action:pan-y;padding:22px}#release-list{padding-left:22px;margin:14px 0 4px}#release-list li{font-size:16px;line-height:1.5;margin:10px 0}#release-heading-version{font-size:14px;color:#d8e9a6}
#photo-open{width:100%;margin-bottom:8px}#photo-preview{display:block;max-width:100%;max-height:45dvh;width:auto;height:auto;margin:auto;border-radius:5px;user-select:auto;-webkit-user-select:auto;touch-action:manipulation}#photo-preview[hidden]{display:none}.photo-actions{display:flex;gap:8px;flex-wrap:wrap}.photo-actions a{color:inherit;text-decoration:none}#photo-status{font-size:14px;line-height:1.5}#photo-download[hidden]{display:none}
.shelter-direction{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13px;color:#f7e39d}.shelter-direction[hidden]{display:none}#shelter-arrow{display:inline-block;font-size:24px;line-height:1}#shelter-distance{max-width:220px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #e5f79a;outline-offset:3px}
/* Optional neighborhood tools keep the central driving view clear. */
.neighbors-button{pointer-events:auto;min-height:40px;padding:7px 10px;margin-top:7px;border:1px solid #b8c79466;border-radius:6px;background:#18291dde;color:#edf0d3;font:inherit;font-size:12px;touch-action:manipulation}
.yard-panel{position:absolute;pointer-events:auto;right:calc(24px + env(safe-area-inset-right));top:calc(115px + env(safe-area-inset-top));width:276px;max-height:calc(100dvh - 155px);padding:14px;background:#14261cf5;border:1px solid #b8c79480;border-radius:10px;overflow:auto;touch-action:pan-y;box-shadow:0 8px 30px #0006}
.yard-subtitle{margin:5px 0 10px;font-size:12px;color:#c9d6b8}#yard-map{display:block;width:100%;height:auto;border-radius:5px;aspect-ratio:1}.map-legend{font-size:10px;margin:6px 0;color:#d4dfba}#yard-map-status{font-size:12px;margin:8px 0}#neighbor-list{padding:0;margin:8px 0;list-style:none}#neighbor-list li{display:flex;align-items:center;gap:8px;min-height:25px;font-size:12px}#neighbor-list li span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.neighbor-dot{width:10px;height:10px;flex:none;border:1px solid white;border-radius:50%}#invite-friends{width:100%;color:#f0f3d4}#invite-status{font-size:12px;margin:8px 0 0}#invite-manual label{display:block;font-size:12px;margin-top:10px}#invite-url{width:100%;min-height:44px;user-select:text;-webkit-user-select:text;touch-action:manipulation;font-size:14px;color:#f4f1d6;background:#0f1a13;border:1px solid #afc293;padding:7px}#close-yard{min-width:40px;min-height:40px;font-size:25px;background:transparent;border:0;color:inherit}
#paint-options{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin:12px 0 6px}#paint-options button{position:relative;min-width:0;min-height:44px;border:2px solid #d3dbc077;border-radius:7px;background:var(--paint);color:#fff}#paint-options button[aria-pressed=true]::after{content:'✓';font-size:22px;font-weight:bold;text-shadow:0 1px 3px #000}#paint-options button[aria-pressed=true]{border-color:#f5f6d7;outline:2px solid #d7ec93;outline-offset:2px}.picnic-settings{margin:18px 0;padding:15px 0;border-block:1px solid var(--line)}.steady-motion .intro,.steady-motion .toast,.steady-motion .hint,.steady-motion button{animation:none;transition:none}
@media(max-height:540px) and (orientation:landscape){.yard-panel{top:calc(74px + env(safe-area-inset-top));right:calc(175px + env(safe-area-inset-right));width:235px;max-height:calc(100dvh - 110px);padding:10px}#yard-map{max-width:160px;margin:auto}.yard-subtitle{margin:2px 0 7px}.neighbors-button{min-height:34px;margin-top:4px}}
@media(max-width:600px) and (orientation:portrait){.yard-panel{top:calc(145px + env(safe-area-inset-top));right:15px;width:min(270px,calc(100vw - 30px));max-height:calc(100dvh - 365px)}.neighbors-button{font-size:11px;padding:6px 8px}#paint-options{grid-template-columns:repeat(4,1fr)}}
@media(max-height:540px) and (orientation:landscape){.pedals{bottom:calc(54px + env(safe-area-inset-bottom))}.release-bar{bottom:calc(4px + env(safe-area-inset-bottom))}#release-notes h2,#photo-panel h2{margin:3px 0 12px}}
@media(max-width:600px) and (orientation:portrait){.action-row{bottom:calc(53px + env(safe-area-inset-bottom))}.steering,.pedals{bottom:calc(110px + env(safe-area-inset-bottom))}.drive-readout{bottom:calc(150px + env(safe-area-inset-bottom))}.release-bar{right:calc(12px + env(safe-area-inset-right))}.release-bar button{min-height:44px}#release-notes,#photo-panel{padding:18px}}
#quick-controls{padding:5px 14px 12px;border:1px solid #d7e5bd2b;border-radius:7px;background:#ffffff08;color:#dce7cf}#quick-controls summary{min-height:44px;display:flex;align-items:center;font-size:14px;font-weight:600;color:#eef3d9}#quick-controls ul{padding-left:20px;margin:8px 0 2px}#quick-controls li{margin:5px 0}
.intro-options{display:flex;gap:6px 18px;flex-wrap:wrap}.map-tools{display:grid;gap:8px;margin:9px 0}.map-tools .display-button{width:100%}.map-tools label{display:flex;align-items:center;gap:9px;min-height:44px;font-size:13px}.map-tools input{width:22px;height:22px;accent-color:var(--lime)}#grass-finder-status{margin:3px 0 8px;color:#f1e891}.ride-summary{margin:12px 0 17px;padding:10px 12px;border:1px solid #d2e49a4a;border-radius:6px;background:#d9ed950b;color:#e4edc9;font-size:14px;line-height:1.45}
.pedals{bottom:calc(48px + env(safe-area-inset-bottom))}
/* Large text is explicit, so controls keep their physical size and the 3D view never zooms. */
.large-text .tagline,.large-text .join-name label,.large-text .intro-caption-option,.large-text .intro-note{font-size:18px}.large-text .join-name input,.large-text .start{font-size:20px}.large-text .cut-status{width:min(300px,calc(100vw - 150px))}.large-text .hud-label,.large-text .cut-detail,.large-text .yard-cycle{font-size:16px}.large-text .multiplayer-status,.large-text .shelter-warning,.large-text .shelter-direction,.large-text .neighbors-button{font-size:17px;white-space:normal}.large-text .weather-button,.large-text .hint,.large-text .toast,.large-text .weather-captions{font-size:19px}.large-text .action-button,.large-text .pedal span,.large-text .deck-state,.large-text .speed small{font-size:15px}.large-text dialog,.large-text dialog button,.large-text dialog input,.large-text dialog select,.large-text .yard-panel,.large-text .yard-panel button,.large-text .yard-panel input{font-size:18px}.large-text .device-explanation,.large-text #device-profile,.large-text #graphics-status,.large-text #connection-status,.large-text #yard-map-status,.large-text #grass-finder-status,.large-text #neighbor-list li,.large-text .map-tools label,.large-text .ride-summary{font-size:17px}.large-text .map-legend,.large-text .yard-subtitle{font-size:15px}.large-text .release-bar{font-size:16px}.large-text .release-bar button{font-size:16px}.large-text #release-list li{font-size:19px}.large-text .yard-panel{width:min(340px,calc(100vw - 30px))}
@media(max-width:600px) and (orientation:portrait){.large-text .cut-status{width:min(270px,calc(100vw - 118px))}.large-text .quick-controls{gap:5px}.large-text .weather-button{max-width:150px;padding-inline:8px}.large-text .yard-panel{width:calc(100vw - 30px);max-height:calc(100dvh - 330px)}.intro-options{display:block}}
@media(max-height:540px) and (orientation:landscape){.large-text .yard-panel{width:290px;right:calc(170px + env(safe-area-inset-right));max-height:calc(100dvh - 86px)}.large-text .cut-status{width:260px}.large-text .weather-button{font-size:16px}}
@media(max-height:540px) and (orientation:landscape){.pedals{bottom:calc(54px + env(safe-area-inset-bottom))}}
@media(max-width:600px) and (orientation:portrait){.pedals{bottom:calc(110px + env(safe-area-inset-bottom))}}
/* Left-handed mode mirrors only the two driving groups; DOM order, labels and safe areas stay intact. */
@media(max-width:600px) and (max-height:650px) and (orientation:portrait){.large-text .multiplayer-status{margin-block:0}.large-text .neighbors-button{margin-top:3px}.large-text .shelter-direction{margin-top:2px}.large-text .shelter-warning{margin-top:4px}.large-text .weather-captions{margin-top:4px}}
/* Touch targets are actual button boxes, including the compact landscape map. */
.neighbors-button{min-height:44px}#close-yard{min-width:44px;min-height:44px}
.tape-header button{width:44px;height:44px;margin:0;flex-shrink:0}
/* Large portrait text gets a separate row below both toolbar rows. */
@media(max-width:600px) and (orientation:portrait){.large-text .hud{display:flex;flex-direction:column;align-items:flex-start;padding-top:calc(128px + env(safe-area-inset-top))}.large-text .cut-status{position:relative;top:auto;left:calc(18px + env(safe-area-inset-left));width:calc(100vw - 36px - env(safe-area-inset-left) - env(safe-area-inset-right))}.large-text .weather-captions{position:relative;top:auto;left:18px;transform:none;margin-top:8px;max-width:calc(100vw - 36px)}.large-text .drive-readout{bottom:calc(238px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;white-space:nowrap}.large-text .speed{font-size:30px}.large-text .deck-state{margin-top:0}}
@media(max-width:600px) and (max-height:650px) and (orientation:portrait){.large-text .yard-cycle,.large-text .cut-detail,.large-text .cut-track{display:none}.large-text .hud-label{font-size:0}.large-text .hud-label span{font-size:18px}.large-text .hud{padding-top:calc(128px + env(safe-area-inset-top))}.large-text .weather-captions{font-size:17px;padding:5px 8px}.large-text .drive-readout{top:calc(76px + env(safe-area-inset-top));bottom:auto;left:18px;transform:none}.large-text #fullscreen[data-fullscreen]{width:44px;padding:0;justify-content:center}.large-text #fullscreen [data-fullscreen-compact]{display:none}}
/* Short portrait screens reserve a center band for the standard speed readout. */
@media(max-width:600px) and (max-height:650px) and (orientation:portrait){body:not(.large-text) .drive-readout{bottom:calc(250px + env(safe-area-inset-bottom))}}
/* Keep the steering label clear of the center action row on portrait phones. */
@media(max-width:600px) and (orientation:portrait){.steering{bottom:calc(126px + env(safe-area-inset-bottom))}}
.left-handed-controls .steering{left:auto;right:calc(38px + env(safe-area-inset-right))}.left-handed-controls .pedals{right:auto;left:calc(34px + env(safe-area-inset-left))}
.controller-clean-controls .steering,.controller-clean-controls .pedals{display:none}
.high-contrast-controls .steering-ring{background:#07130de6;border:3px solid #fff;box-shadow:inset 0 0 0 11px #0009}.high-contrast-controls .steering-thumb{background:#000;border:3px solid var(--lime)}.high-contrast-controls .steer-left,.high-contrast-controls .steer-right,.high-contrast-controls .control-label{color:#fff;text-shadow:0 2px 4px #000}.high-contrast-controls .pedal,.high-contrast-controls .action-button{background:#07130df2;border:3px solid #fff;color:#fff}.high-contrast-controls .pedal.forward{background:#35470cf2;border-color:var(--lime)}.high-contrast-controls .pedal.pressed,.high-contrast-controls .action-button.active{background:var(--lime);border-color:#fff;color:#07130d}
@media(hover:hover) and (pointer:fine){.left-handed-controls .steering{left:auto;right:25px}.left-handed-controls .pedals{right:auto;left:25px}}
@media(max-width:600px) and (orientation:portrait){.left-handed-controls .steering{left:auto;right:calc(20px + env(safe-area-inset-right))}.left-handed-controls .pedals{right:auto;left:calc(20px + env(safe-area-inset-left))}}
@media(max-height:540px) and (orientation:landscape){.left-handed-controls .steering{left:auto;right:calc(26px + env(safe-area-inset-right))}.left-handed-controls .pedals{right:auto;left:calc(26px + env(safe-area-inset-left))}}
@media(max-height:540px) and (orientation:landscape){.left-handed-controls .release-bar{right:calc(136px + env(safe-area-inset-right));gap:3px;padding-left:6px;font-size:10px}.left-handed-controls .release-bar button{padding-inline:4px;font-size:10px}}