*{box-sizing:border-box}body{margin:0;background:#1c2430;color:#fff8ee;font-family:Outfit,sans-serif;overscroll-behavior:none;min-height:100dvh}.page{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));max-width:1100px;margin:0 auto;width:100%}.panel{background:#fff8ee;color:#1c140f;border-radius:18px;padding:clamp(16px,3.5vw,28px);box-shadow:0 12px 30px #00000047;width:100%}h1{font-family:Fraunces,serif;font-size:clamp(32px,7vw,48px);margin:0 0 8px}.game-title{text-align:center;width:100%;font-size:clamp(40px,9vw,64px);margin:4px 0 12px;letter-spacing:-.02em}.start-lead{text-align:center;max-width:34em;margin-left:auto;margin-right:auto}h2{font-family:Fraunces,serif;font-size:24px;margin:18px 0 8px}.lead{font-size:clamp(15px,3.6vw,18px);line-height:1.45;margin:0 0 8px}.controls{margin:0;padding-left:20px;line-height:1.6}.note{color:#5c4a3a;margin:12px 0}.error{color:#c81d25;margin:12px 0}.ride-show{display:flex;align-items:center;gap:8px;margin:8px 0 4px}.ride-arrow{width:44px;height:44px;border:2px solid #1c140f;border-radius:12px;background:#fff8ee;color:#1c140f;font-size:28px;line-height:1;font-family:inherit;flex-shrink:0;cursor:pointer}.ride-track{display:grid;grid-template-columns:minmax(72px,.7fr) minmax(160px,1.4fr) minmax(72px,.7fr);gap:10px;flex:1;min-width:0;align-items:center}.ride-side{display:flex;flex-direction:column;align-items:center;padding:10px 6px;border:2px solid #c4a574;border-radius:14px;background:#fff8ee;opacity:.78;transform:scale(.92);font-family:inherit;color:#1c140f;cursor:pointer;transition:opacity .2s ease,transform .2s ease}.ride-side-art{width:100%;height:56px;object-fit:contain;margin-bottom:6px;filter:contrast(1.05)}.ride-side-name{font-size:12px;font-weight:700;text-align:center;line-height:1.2}.ride-card{display:flex;flex-direction:column;align-items:center;padding:14px 12px 16px;border-radius:16px;font-family:inherit;color:#1c140f}.ride-card.selected{border:3px solid #f0b400;background:#fff1c9;transform:scale(1);opacity:1}.ride-art{width:100%;height:96px;object-fit:contain;margin-bottom:8px;filter:contrast(1.05)}.ride-name{font-family:Fraunces,serif;font-size:22px;font-weight:700}.ride-blurb{font-size:14px;color:#6a4328;text-align:center;margin-top:4px;line-height:1.3}.ride-count{text-align:center;color:#6a4328;font-size:13px;margin:0 0 12px}.ride-stats{width:100%;display:grid;gap:4px;margin-top:8px}.ride-stat{display:flex;justify-content:space-between;align-items:center;gap:6px}.ride-stat-label{font-size:11px;font-weight:700;color:#1c140f}.ride-stat-dots{display:flex;gap:3px}.ride-dot{width:8px;height:8px;border-radius:50%;background:#dcc9a8}.ride-dot.on{background:#f0b400}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.button{background:#f0b400;color:#1c140f;border:0;border-radius:999px;min-height:48px;padding:0 18px;font-weight:700;font-family:inherit;font-size:16px;cursor:pointer}.button.ghost{background:transparent;border:2px solid #1c140f}.hud .button.ghost{color:#fff8ee;border-color:#fff8ee}.button:disabled{cursor:default;opacity:.6}.hud{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px 12px;margin-bottom:4px}.hud-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;min-width:0}.hud-actions{margin-top:0;flex-wrap:nowrap}.score{font-family:Fraunces,serif;font-size:clamp(22px,4.5vw,34px);margin:0}.area{color:#fff8ee;font-family:Fraunces,serif;font-size:clamp(16px,3.2vw,22px);margin:0}.fuel{display:flex;align-items:center;gap:8px}.fuel-name{color:#f3d5a0;font-size:14px;font-weight:700}.jerry{width:28px;height:40px;position:relative}.jerry-body{position:absolute;left:0;right:6px;bottom:0;height:30px;background:#f0b400;border:2px solid #1c140f;border-radius:3px 3px 4px 4px;overflow:hidden}.jerry-liquid{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(#f6d36b,#c47b00)}.jerry-liquid.low{background:linear-gradient(#e0703a,#c81d25)}.jerry-cap{position:absolute;top:2px;left:6px;width:8px;height:6px;background:#c81d25;border-radius:2px 2px 0 0}.jerry-handle{position:absolute;top:10px;right:0;width:8px;height:12px;border:2px solid #f0b400;border-left:0;border-radius:0 6px 6px 0}.hint{color:#f3d5a0;font-size:clamp(13px,2.8vw,15px);margin:2px 0 8px}.stage{width:100%;position:relative;background:#2c3138;border-radius:clamp(12px,2vw,18px);overflow:hidden;touch-action:none;box-shadow:0 16px 40px #00000059}.pedals{display:flex;flex-direction:column;gap:8px;position:absolute;z-index:1;bottom:max(10px,env(safe-area-inset-bottom));width:min(30%,132px)}.pedals-left{left:max(8px,env(safe-area-inset-left))}.pedals-right{right:max(8px,env(safe-area-inset-right))}.pedal{width:100%;min-height:clamp(48px,12vw,68px);border:0;border-radius:16px;font-weight:700;font-family:inherit;font-size:clamp(15px,3.4vw,18px);touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;opacity:.92;box-shadow:0 4px 14px #00000059}.pedal.left{background:#1c140f;color:#fff8ee}.pedal.right{background:#f0b400;color:#1c140f}.pedal.brake{background:#1c140f;color:#fff8ee}.pedal.gas{background:#f0b400;color:#1c140f}canvas{width:100%;display:block}.play{position:relative}.lost-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;align-items:center;background:#1c140f8c;padding:16px;animation:lostFade .25s ease-out}.lost-pop{width:min(100%,440px);animation:lostPop .5s cubic-bezier(.2,1.35,.4,1) both}.lost-title{text-align:center;font-size:48px;margin:0 0 4px;animation:titleSlam .6s cubic-bezier(.15,1.4,.35,1) both}.lost-reason{text-align:center}.lost-points{font-family:Fraunces,serif;font-size:56px;text-align:center;color:#c47b00;margin:4px 0 12px;animation:pointsPop .55s cubic-bezier(.2,1.5,.35,1) .4s both}.lost-points span{display:block;font-family:Outfit,sans-serif;font-size:16px;color:#1c140f;margin-top:2px}@keyframes lostFade{0%{opacity:0}to{opacity:1}}@keyframes lostPop{0%{opacity:0;transform:scale(.35) translateY(24px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes titleSlam{0%{opacity:0;transform:scale(1.8) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes pointsPop{0%{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}.overlay{margin-top:-28px;position:relative}.field{display:grid;gap:6px;font-weight:700}input{min-height:48px;padding:0 12px;border:2px solid #1c140f;border-radius:12px;font:inherit;color:#1c140f;background:#fffdf8}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:8px 6px;border-bottom:1px solid #eadfce}th{font-size:14px}@media (max-width: 560px){.hud{grid-template-columns:1fr auto}.fuel{grid-column:1 / 2;grid-row:2}.hud-actions{grid-row:1;grid-column:2}.hud .button{min-height:40px;padding:0 12px;font-size:14px}.hint{display:none}.ride-art{height:80px}.ride-side-art{height:44px}.ride-arrow{width:38px;height:38px;font-size:24px}.lost-title{font-size:36px}.lost-points{font-size:44px}.controls{font-size:14px}}@media (max-height: 480px){.hint{display:none}.score{font-size:20px}.area{font-size:15px}.pedal{min-height:42px;font-size:13px}.pedals{width:min(28%,120px);bottom:6px}.page{padding:6px 8px 8px}}@media (min-width: 900px){.page{padding:28px 24px 40px}.pedals{width:160px;bottom:16px}.pedal{min-height:64px}.ride-art{height:110px}}@media (max-width: 560px){.ride-track{grid-template-columns:minmax(0,1fr)}.ride-side{display:none}.ride-name{text-align:center;font-size:20px}.ride-arrow{width:40px;height:44px}.pedals{width:22%;gap:5px}.pedal{min-height:44px;border-radius:10px}.lost-backdrop{position:fixed;overflow-y:auto}.lost-pop{margin-block:auto}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.terrain-cue{color:#fff1c9;border-left:3px solid #f0b400;padding:7px 10px;margin:6px 0;background:#27313e;border-radius:0 6px 6px 0;font-size:clamp(12px,2.7vw,15px);line-height:1.35}.start-panel{display:flex;flex-direction:column}.driving-help{margin-top:20px}.driving-help summary{cursor:pointer;font-weight:700;padding:12px 0}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 8px}.mode-card{display:grid;gap:8px;text-align:left;padding:20px 18px;border:2px solid #1c140f;border-radius:16px;background:#fffdf8;color:#1c140f;cursor:pointer;font:inherit;min-height:160px;transition:transform .15s ease,box-shadow .15s ease}.mode-card:hover,.mode-card:focus-visible{transform:translateY(-2px);box-shadow:0 8px #1c140f22;outline:none}.mode-card-label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5c5348}.mode-card-title{font-family:Fraunces,serif;font-size:clamp(22px,4vw,28px);font-weight:700;line-height:1.15}.mode-card-copy{font-size:14px;line-height:1.4;color:#3d342c}.mode-card-solo{background:linear-gradient(160deg,#fff8eb,#f3e4c4)}.mode-card-race{background:linear-gradient(160deg,#e8f0e4,#c5d4b8);border-color:#1f3328}.mode-back{align-self:flex-start;margin:4px 0 8px}.mode-heading{margin-top:4px}.solo-actions{margin-top:8px}.solo-actions .button{width:100%;min-height:52px}.home-actions{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}.vehicle-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;text-align:center;padding:20px;background:#182432ed;color:#fff;z-index:1}.rotate-tip{display:none}.pedal{touch-action:none;user-select:none;-webkit-user-select:none}@media (max-width: 560px) and (orientation: portrait){.start-panel{padding:18px 12px}.start-panel h1{font-size:38px;margin-bottom:6px}.start-panel .game-title{font-size:clamp(36px,10vw,52px)}.start-panel .lead{font-size:16px;line-height:1.4}.start-panel h2{font-size:22px;margin:14px 0 10px}.mode-grid{grid-template-columns:1fr;gap:10px}.mode-card{min-height:0;padding:16px 14px}.home-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.solo-actions .button{grid-column:1 / -1}.page-playing{padding:max(10px,env(safe-area-inset-top)) 8px max(12px,env(safe-area-inset-bottom))}.rotate-tip{display:block;color:#d4dfed;text-align:center;font-size:14px;margin:12px 0}.stage{padding-bottom:104px;background:#182432}.stage .pedals{width:42%;bottom:14px}.stage .pedal{min-height:72px;font-size:20px}.vehicle-loading{bottom:104px}}@media (orientation: landscape) and (max-height: 600px){.page-playing{max-width:none;padding:max(4px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}.page-playing .hud{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0;padding:0}.page-playing .hud-meta{display:flex;gap:12px;align-items:center}.page-playing .score,.page-playing .area{margin:0;font-size:16px}.page-playing .hud .button{min-height:36px;font-size:13px;padding:0 10px}.page-playing .fuel{gap:6px}.page-playing .jerry{transform:scale(.7);transform-origin:center;margin-block:-8px}.page-playing .terrain-cue{font-size:12px;padding:4px 8px;margin:3px 0}.page-playing .hint{display:none}.stage .pedals{width:100px;bottom:8px}.stage .pedal{min-height:52px;font-size:16px}}.play{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.play input,.play textarea,.play [contenteditable]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}.page-playing{overscroll-behavior:contain}.fuel.fuel-gauge{display:block;position:relative;width:120px;padding-bottom:12px;color:#c3d4dc}.fuel-heading{display:flex;align-items:center;gap:5px;font-size:10px;letter-spacing:.08em;line-height:20px}.fuel-percent{margin-left:auto;font-variant-numeric:tabular-nums;letter-spacing:0;font-size:12px}.fuel-track{height:6px;border-radius:4px;overflow:hidden;background:#080e16;box-shadow:inset 0 0 0 1px #344150}.fuel-fill{height:100%;border-radius:inherit;background:#a3c9ba;transition:width .25s linear,background .4s}.fuel-gauge.low .fuel-fill{background:#dfa950}.fuel-gauge.critical .fuel-fill{background:#e06b69;animation:fuel-warning 1.8s ease-in-out infinite}.fuel-feedback{position:absolute;bottom:-2px;left:0;font-size:10px;color:#bdded0}.fuel-gauge.critical .fuel-feedback{color:#ef9995}@keyframes fuel-warning{50%{opacity:.5}}.screen-hint{grid-column:1 / -1;color:#e1e8ec;background:#293642;padding:10px;font-size:13px}.screen-hint button{margin-left:8px;min-width:36px;min-height:36px}@media (max-width:560px) and (orientation:portrait){.hud{grid-template-columns:1fr auto}.hud .hud-meta{grid-column:1;grid-row:1}.hud .fuel-gauge{grid-column:2;grid-row:1;width:110px}.hud .hud-actions{grid-column:1 / -1;grid-row:2;justify-content:space-between}}@media (orientation:landscape) and (max-height:600px){.page-playing .hud{flex-wrap:wrap}.page-playing .fuel-gauge{width:100px;flex-shrink:0}.screen-hint{flex-basis:100%}}@media (prefers-reduced-motion:reduce){.fuel-fill{transition:none;animation:none!important}}.share-dialog{width:min(420px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow-y:auto;box-sizing:border-box;border:1px solid #b8ac94;border-radius:20px;padding:24px;background:#fff8eb;color:#211c16;text-align:center}.share-dialog::backdrop{background:#080e19bb}.share-dialog h2{margin:12px 0 8px}.share-dialog p{font-size:15px;line-height:1.4}.share-close{position:absolute;top:6px;right:8px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;font-size:28px;cursor:pointer}.share-qr{display:block;width:min(260px,100%);height:auto;margin:16px auto;image-rendering:pixelated}.share-qr-placeholder{min-height:260px;display:grid;place-content:center}.share-link-label{display:block;text-align:left;font-size:13px;margin-bottom:5px}.share-link{width:100%;box-sizing:border-box;padding:12px 8px;border:1px solid #b8ac94;border-radius:8px;background:#fff;font-size:14px;color:#211c16}.share-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:14px}.share-actions .button{font-size:14px;padding-inline:14px;text-decoration:none}.share-status{min-height:21px;margin:10px 0 0}.share-actions a.button{display:inline-flex;align-items:center;justify-content:center}.settings-dialog{width:min(400px,calc(100vw - 24px));box-sizing:border-box;max-height:calc(100dvh - 24px);overflow:auto;border:0;border-radius:18px;padding:24px;background:#fff8eb;color:#211c16}.settings-dialog::backdrop{background:#080e19bb}.player-dialog .player-form{display:grid;gap:10px;margin:16px 0}.player-dialog .player-name-input{display:block;width:100%;box-sizing:border-box;min-height:52px;font-size:18px}.player-dialog .player-claim{width:100%;min-height:48px}.player-dialog .claimed-name{display:grid;gap:4px;margin:12px 0;padding:12px;border-radius:12px;background:#f3e8d4}.player-dialog .claimed-name strong{font-size:22px}.player-dialog .claimed-name small,.player-dialog .player-name-hint{display:block;color:#5c5348;font-size:13px}.settings-dialog fieldset{border:1px solid #b8ac94;border-radius:10px;padding:16px;margin:0 0 20px}.settings-dialog legend{font-weight:700;padding-inline:6px}.sound-toggle{display:flex;align-items:center;gap:10px;min-height:44px}.sound-toggle input{width:22px;height:22px}.volume-label{display:grid;gap:8px;margin:16px 0}.volume-label input{width:100%;min-height:32px;touch-action:pan-y}.music-status{font-size:14px;line-height:1.4;color:#655b4e}.route-dialog{width:min(900px,calc(100vw - 24px))}.route-dialog canvas{display:block;width:100%;height:auto;border-radius:10px;margin-top:16px}.route-dialog select{display:block;width:100%;min-height:44px;margin-top:8px;font:inherit}.hud-meta{min-width:0;flex-wrap:wrap}@media (orientation: portrait) and (max-width: 900px){.rotate-tip{display:flex;align-items:center;gap:16px;padding:16px;margin:12px 0;border:2px solid #ffc743;border-radius:16px;background:#ffefbb;color:#302310;text-align:left;box-shadow:0 5px 20px #0002}.rotate-tip strong{display:block;font-size:18px;line-height:1.2}.rotate-tip div>span{display:block;font-size:14px;line-height:1.35;margin-top:5px}.rotate-tip small{display:block;font-size:12px;line-height:1.3;margin-top:7px;color:#665023}.rotate-phone{position:relative;flex:0 0 48px;height:58px;font-size:42px;line-height:58px;color:#906000}.rotate-phone>span{position:absolute;left:16px;top:18px;width:14px;height:25px;border:2px solid #302310;border-radius:4px;background:#fff9e8;animation:turn-phone 3.2s ease-in-out infinite}}@keyframes turn-phone{0%,15%,to{transform:rotate(0)}45%,75%{transform:rotate(90deg)}}.start-countdown{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:#111e2dc9;color:#fff8e9;text-align:center;pointer-events:none}.start-countdown>span{font-size:clamp(12px,2vw,20px);font-weight:800;letter-spacing:.2em}.start-countdown strong{font:900 clamp(58px,12vw,116px)/1 system-ui,sans-serif;color:#ffd15a;text-shadow:0 4px 0 #0005;animation:countdown-pop .25s ease-out}.start-countdown small{font-size:clamp(11px,1.7vw,16px)}.pedal:disabled{opacity:.45}@media (max-width: 560px) and (orientation: portrait){.start-countdown{bottom:104px}}@keyframes countdown-pop{0%{transform:scale(1.18);opacity:.5}to{transform:scale(1);opacity:1}}@media (prefers-reduced-motion: reduce){.rotate-phone>span,.start-countdown strong{animation:none}}.race-room{color:#f2e8cc;width:min(1200px,100%);margin-inline:auto}.race-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.race-header h1{font-size:clamp(28px,5vw,52px);margin:4px 0}.race-eyebrow{font:700 12px system-ui;letter-spacing:.16em;color:#d3c998}.race-panel{background:#26372d;border:1px solid #788265;border-radius:18px;padding:24px;margin-block:18px}.race-vehicles-heading{margin:14px 0 8px;font-size:16px;color:#e8f1df}.race-vehicle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px;margin:0 0 16px;max-height:280px;overflow:auto;padding:4px}.race-vehicle-chip{display:grid;gap:4px;justify-items:center;padding:8px 6px;border:2px solid #5f7358;border-radius:12px;background:#1c2a22;color:#f2e8cc;font:inherit;font-size:12px;cursor:pointer}.race-vehicle-chip img{width:88px;height:52px;object-fit:contain}.race-vehicle-chip.selected{border-color:#f0c14a;background:#2f4536;box-shadow:0 0 0 1px #f0c14a88}.race-roster{display:grid;grid-template-columns:1fr 1fr;gap:12px}.race-roster>div{min-width:0;background:#29392f;border:1px solid #5c7059;border-radius:10px;padding:12px}.race-roster strong,.race-roster span{display:block;overflow-wrap:anywhere}.race-roster span{font-size:13px;color:#d2d8bd;margin-top:4px}.race-roster progress{width:100%;height:8px;accent-color:#d7ca83;margin-top:8px}.race-lobby{display:grid;grid-template-columns:1fr 260px;gap:24px}.room-code{font:800 25px ui-monospace,monospace;letter-spacing:.15em}.race-room input,.race-room select{display:block;width:100%;box-sizing:border-box;padding:12px;min-height:46px;font:16px system-ui;border-radius:8px;border:1px solid #a5b295;margin:8px 0;background:#eff0dc;color:#18291d}.room-invite img{display:block;margin:0 auto 12px;border-radius:8px}.race-room .button.ghost{color:#f1e9ce;border-color:#abb491}.race-error{background:#4c3029;border:1px solid #cb9475;padding:12px;border-radius:8px}.race-stats{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px;background:#202f28;font-size:14px}.race-warning{flex:1 1 100%;margin-top:2px;padding:6px 10px;border-radius:8px;background:#c47a22;color:#1c1208;font-weight:800;letter-spacing:.02em;animation:race-warn-pulse 1.1s ease-in-out infinite}@keyframes race-warn-pulse{50%{filter:brightness(1.12)}}.race-stage{position:relative;text-align:center;line-height:0;overflow:hidden;border-radius:12px;background:#354939}.race-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#15231f99;color:#ffe19a;font:900 clamp(28px,8vw,82px)/1.2 system-ui;pointer-events:none;text-align:center}.race-pedals{display:flex;justify-content:space-between;gap:30px;padding:10px 0}.race-pedals .pedal{width:32%;min-height:64px}.race-entry{background:#3d654e;color:#fff8e9}.race-result{text-align:center;padding-block:38px}@media (max-width:650px){.race-lobby{grid-template-columns:1fr}.race-panel{padding:16px}.race-room .race-roster{gap:6px}.race-roster>div{padding:8px}.race-header{align-items:flex-start}.race-header .button{padding:10px;font-size:13px}}@media (orientation:landscape) and (max-height:600px){.race-header{margin:0 0 5px}.race-header h1{font-size:24px}.race-roster>div{padding:5px 10px}.race-roster span{font-size:11px}.race-stats{padding:5px;font-size:12px}.race-pedals .pedal{min-height:48px}.race-pedals{padding:6px 0}}
