body{background:#080706}.game-header{min-height:70px;display:flex;align-items:center;justify-content:space-between;padding:10px clamp(16px,5vw,70px);border-bottom:1px solid var(--line);background:#090807f0}.game-brand{display:flex;align-items:center;gap:12px;text-decoration:none;text-transform:uppercase;letter-spacing:.11em;font:bold 12px Georgia}.game-brand img{width:48px;height:48px;object-fit:contain}.game-header nav{display:flex;gap:20px}.game-header nav a{text-decoration:none;text-transform:uppercase;letter-spacing:.1em;font-size:10px}.game-page{padding:clamp(55px,8vw,105px) clamp(18px,7vw,110px)}.game-copy{max-width:900px;margin:0 auto 45px;text-align:center}.game-copy h1{font-size:clamp(48px,7vw,105px)}.game-copy>p:last-child{max-width:760px;margin:24px auto;color:#bcb1a5;font-size:18px}.game-layout{width:min(100%,450px);margin:auto}.game-frame{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;border:1px solid #3b312b;background:#060706;box-shadow:0 28px 80px #000}.game-frame canvas{display:block;width:100%;height:100%;touch-action:none}.hud{position:absolute;z-index:4;left:0;right:0;top:0;display:flex;justify-content:space-between;gap:6px;padding:13px;background:linear-gradient(#050504e8,transparent);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#a99f93}.hud b{display:block;color:#eee5d6;font-size:13px}.game-overlay{position:absolute;z-index:10;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;background:radial-gradient(circle at 50% 40%,#2a1715ee,#060504f7 66%);overflow:auto}.game-overlay.active{display:flex}.game-overlay h2{font-size:clamp(38px,8vw,62px);line-height:.95;margin:0 0 18px}.game-overlay p:not(.eyebrow){color:#bfb4a6;max-width:330px}.game-overlay button,.game-link{min-height:46px;border:1px solid #755f4c;background:#8f1d23;color:#fff;padding:11px 18px;text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-weight:bold;cursor:pointer;margin:7px}.game-overlay small{color:#81776e;margin-top:12px}.route-buttons{display:grid;grid-template-columns:1fr;width:100%;max-width:330px}.route-buttons button{display:grid;grid-template-columns:38px 1fr;align-items:center;text-align:left;background:#181310}.route-buttons button.selected{border-color:#b18a4b;background:#2b1f16}.route-buttons b{font:bold 24px Georgia;color:#d7b06c}.game-link{display:inline-flex;align-items:center;justify-content:center;background:#8f1d23}.touch-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px}.touch-controls button{min-height:56px;border:1px solid #4d443d;background:#171310;color:#eee5d6;font:bold 15px Arial;text-transform:uppercase;cursor:pointer;touch-action:manipulation}.touch-controls button:first-child,.touch-controls button:last-child{font-size:26px}.game-status{text-align:center;color:#857b72;font-size:12px;min-height:20px}.story-rule{display:grid;grid-template-columns:1fr 1fr;gap:55px;margin:clamp(70px,10vw,140px) auto 40px;max-width:1100px;padding:clamp(35px,6vw,75px);border:1px solid var(--line);background:linear-gradient(135deg,#281412,#100e0d)}.story-rule h2{font-size:clamp(36px,5vw,66px);line-height:1;margin:0}.story-rule>p{color:#b8ada1;font-size:18px}.fiction-note{max-width:900px;margin:40px auto;color:#80776e;font-size:13px}@media(max-width:720px){.game-header nav a:last-child{display:none}.game-page{padding-top:42px}.game-copy{text-align:left}.story-rule{grid-template-columns:1fr;gap:20px}.game-overlay{padding:24px}.game-overlay h2{font-size:42px}}@media(max-height:650px) and (orientation:landscape){.game-layout{width:min(80vh,450px)}.game-copy{display:none}}/* Campaign menu (M1 development preview; only shown with ?campaign=preview) */
.campaign-overlay{z-index:12;justify-content:flex-start;gap:4px}
.campaign-overlay h2{margin-bottom:6px}
.campaign-overlay h3{font:bold 22px Georgia;margin:0 0 4px;color:var(--bone)}
.campaign-overlay ul{list-style:none;margin:6px 0;padding:0;width:100%;max-width:330px}
.campaign-slot{display:flex;flex-direction:column;gap:6px;border:1px solid #4d443d;background:#120f0dcc;padding:10px;margin-bottom:8px;text-align:left}
.campaign-slot b{display:block;color:var(--bone)}
.campaign-slot span{color:#bfb4a6;font-size:13px}
.campaign-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.campaign-overlay .campaign-actions button{margin:3px;min-width:96px}
.campaign-overlay button.campaign-quiet{background:#181310}
.campaign-overlay button[disabled]{opacity:.5;cursor:not-allowed}
.campaign-car{width:100%;max-width:330px;border:1px solid #4d443d;background:#120f0dcc;padding:10px;text-align:left}
.campaign-car p:not(.eyebrow){font-size:13px;margin:0 0 6px}
.campaign-stats li{display:grid;grid-template-columns:72px 1fr 18px;align-items:center;gap:8px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#a99f93}
.campaign-stats meter{width:100%;height:10px}
.campaign-garage li{display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid #2e2621;padding:4px 0;font-size:14px;text-align:left}
.campaign-garage .campaign-empty{color:#81776e;font-style:italic}
.campaign-garage button{min-height:40px;padding:6px 12px;margin:0}
.campaign-status{min-height:20px;font-size:13px;color:#d7b06c;max-width:330px}
@media(prefers-reduced-motion:reduce){.campaign-overlay *{transition:none!important}}
.campaign-overlay{background:#0b0908}
/* Playability: keep the whole game frame plus touch controls inside the screen height,
   so the player's car is never below the fold (desktop, phone portrait and landscape). */
.game-layout{width:min(100%,450px,calc((100vh - 120px) * .5625));width:min(100%,450px,calc((100svh - 120px) * .5625))}
.game-frame{scroll-margin-top:8px}
/* Touch and keyboard focus: no blue tap flash; a clear brass outline for keyboard users. */
.game-layout button{-webkit-tap-highlight-color:transparent}
.game-layout button:focus{outline:none}
.game-layout button:focus-visible{outline:2px solid #d7b06c;outline-offset:2px}
/* Short landscape screens (phones on their side): put the controls beside the frame
   so the frame can use the full screen height. */
@media (orientation:landscape) and (max-height:500px){
  .game-layout{display:grid;grid-template-columns:auto 96px;gap:10px;justify-content:center;align-items:center;width:auto}
  .game-frame{width:auto;height:calc(100vh - 24px);height:calc(100svh - 24px)}
  .touch-controls{grid-template-columns:1fr;margin-top:0}
  .game-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* Stat bars in the campaign car card: brass on dark instead of the browser's default green. */
.campaign-stats meter{-webkit-appearance:none;appearance:none;background:#2a221d;border:1px solid #4d443d;border-radius:0}
.campaign-stats meter::-webkit-meter-bar{background:#2a221d;border:0;border-radius:0;height:10px}
.campaign-stats meter::-webkit-meter-optimum-value,.campaign-stats meter::-webkit-meter-suboptimum-value,.campaign-stats meter::-webkit-meter-even-less-good-value{background:#b18a4b;border-radius:0}
.campaign-stats meter::-moz-meter-bar{background:#b18a4b}
/* M2: mission board, report, map and clue log */
.campaign-inventory{font-size:13px;letter-spacing:.04em;color:#d7b06c;font-variant-numeric:tabular-nums}
.campaign-missions li,.campaign-map li,.campaign-log li{display:flex;flex-direction:column;gap:4px;border:1px solid #4d443d;background:#120f0dcc;padding:10px;margin-bottom:8px;text-align:left}
.campaign-missions li{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
.campaign-missions li>div{min-width:0;display:flex;flex-direction:column;gap:3px}
.campaign-missions b,.campaign-map b,.campaign-log b{color:var(--bone)}
.campaign-missions span,.campaign-map span,.campaign-log span{color:#bfb4a6;font-size:13px}
.campaign-overlay .campaign-missions button{margin:0;min-width:72px;flex:none}
.campaign-overlay ol{list-style:none;margin:6px 0;padding:0;width:100%;max-width:330px}
.campaign-zone-hidden{opacity:.6;border-style:dashed!important}
.campaign-zone-explored{border-color:#755f4c!important}
.campaign-landmark{color:#d7b06c!important}
.campaign-report li{text-align:left;color:#bfb4a6;font-size:14px;padding:4px 0;border-bottom:1px solid #2e2621}
.campaign-result-mission{color:var(--bone)}
/* Mission cards stack (text, then button) so long labels never squeeze the description on phones. */
.campaign-missions li{flex-direction:column;align-items:stretch}
.campaign-overlay .campaign-missions button{align-self:flex-start;min-width:120px}
/* M3: workshop parts and the drive screen */
.campaign-parts{list-style:none;margin:6px 0;padding:0;width:100%;max-width:330px}
.campaign-parts li{display:flex;flex-direction:column;align-items:stretch;gap:6px;border:1px solid #4d443d;background:#120f0dcc;padding:10px;margin-bottom:8px;text-align:left}
.campaign-parts li>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.campaign-parts b{color:var(--bone)}
.campaign-parts span{color:#bfb4a6;font-size:13px}
.campaign-overlay .campaign-parts button{align-self:flex-start;margin:0;min-width:120px}
.campaign-mission-actions{justify-content:flex-start}
.campaign-overlay .campaign-mission-actions button{margin:0 6px 0 0;min-width:96px}
.campaign-stats meter.campaign-fuel::-webkit-meter-optimum-value{background:#6f8f5a}
.campaign-stats meter.campaign-wear::-webkit-meter-optimum-value,.campaign-stats meter.campaign-wear::-webkit-meter-suboptimum-value,.campaign-stats meter.campaign-wear::-webkit-meter-even-less-good-value{background:#8f1d23}
.campaign-overlay.campaign-driving{padding:10px;gap:6px;overflow:hidden}
.campaign-driving .eyebrow{margin:0}
.campaign-drive-hud{margin:0;font-size:13px;color:var(--bone);font-variant-numeric:tabular-nums}
.campaign-driving .campaign-drive{flex:1 1 auto;min-height:0;width:100%;display:flex;justify-content:center}
.campaign-driving .campaign-drive canvas{height:100%;max-width:100%;aspect-ratio:9/16;border:1px solid #3b312b;touch-action:none}
.campaign-drive-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;width:100%}
.campaign-overlay .campaign-drive-controls button{min-height:52px;margin:0;padding:6px;font-size:20px}
.campaign-overlay .campaign-drive-controls #driveAbort{font-size:11px}
.campaign-driving .campaign-status{font-size:11px;min-height:0;margin:0}
/* The prologue's controls and status do nothing in the campaign; hide them (keeping their space) while it is open. */
.game-layout.campaign-open .touch-controls,.game-layout.campaign-open .game-status{visibility:hidden}
/* M5: heat line colours by level */
.campaign-heat{font-size:13px;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:#bfb4a6;margin:0}
.campaign-heat-watched{color:#d7b06c}
.campaign-heat-wanted{color:#d9734f}
.campaign-heat-manhunt{color:#ff6b6b;font-weight:bold}
/* M6: full-moon hunt on the board, notice on the base screen */
.campaign-missions li.campaign-hunt{border-color:#b18a4b;background:linear-gradient(135deg,#2b1614cc,#120f0dcc)}
.campaign-hunt-notice{font-size:13px;color:#ff8a7a;margin:0}
/* M7: story beats and the fork */
.campaign-beat{font:italic 18px/1.5 Georgia,serif;color:var(--bone);max-width:330px}
.campaign-routes{display:grid;grid-template-columns:1fr;gap:6px;width:100%;max-width:330px}
.campaign-overlay .campaign-route{display:grid;grid-template-columns:38px 1fr;align-items:center;text-align:left;background:#181310;margin:0}
.campaign-overlay .campaign-route b{font:bold 24px Georgia;color:#d7b06c}
.campaign-overlay .campaign-route.selected{border-color:#b18a4b;background:#2b1f16}
/* M8: car roster */
.campaign-parts li.campaign-locked{opacity:.7;border-style:dashed}
/* V1 (device QA): stop double-tap zoom on phones. Quick taps that land between or around the
   buttons used to zoom the page in iPhone Safari, so the whole play area opts out, and the
   steering buttons also block long-press text selection and callouts. */
.game-layout,.game-layout button,.touch-controls,.campaign-overlay,.campaign-overlay button{touch-action:manipulation}
.touch-controls button,.campaign-drive-controls button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* V2: save codes. 16px text so iPhone Safari does not zoom in when the box is focused. */
.campaign-code{width:100%;max-width:330px;min-height:110px;margin:6px 0;padding:8px;border:1px solid #4d443d;background:#080706;color:var(--bone);font:16px/1.35 ui-monospace,Menlo,Consolas,monospace;word-break:break-all;resize:vertical}
.campaign-import button{min-width:140px}
/* V3: seasons and the market */
.campaign-overlay .campaign-seasonal{border-color:#6b5a2e}
[data-trend="up"]{color:#9fc48a!important}
[data-trend="down"]{color:#d48a7a!important}
/* V4: original art drawn in code */
.campaign-art{display:block;margin:6px auto;border:1px solid #2b241f;background:#070807}
.campaign-scene{max-width:100%}
.campaign-portrait{border:none;background:transparent}
.campaign-roster-item{display:flex;flex-direction:row;align-items:center;gap:10px}
.campaign-roster-item .campaign-portrait{margin:0;flex:none}
.campaign-zone .campaign-scene{margin:0 0 6px}
/* V5: sound toggle on the prologue start screen */
.game-overlay button.sound-toggle{background:#181310;min-height:40px;font-size:11px;padding:8px 14px}
/* V6: Chapter One */
.campaign-overlay .campaign-chapter{border-color:#7a2a2e}
.campaign-road-map{width:100%;max-width:330px;margin-top:8px}
#campaignChapter{color:#d7b06c}