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}
/* Embedded engine page (/game/play/): shown inside the PigManRoad.com /game/ shell. */
body.game-embed{background:#0c1010;margin:0}.game-embed .game-page{padding:0 0 10px}.game-credits{max-width:450px;margin:14px auto 0;color:#8f988f;font-size:11px;line-height:1.5;text-align:center}
/* W0d: every scene fits the screen, with no scroll bars.
   - Phone held upright: the game fills the whole screen like an app (play area, controls, notice).
   - Phone on its side: controls beside the play area.
   - Desktop: a 16:9 widescreen stage; the steering buttons sit in the woods at the sides.
   The prologue canvas widens to match (game.js), and menus that are longer than the screen
   can still be swiped or wheel-scrolled, but never show a scroll bar. */
html:has(body.game-embed),body.game-embed{height:100%;overflow:hidden;overscroll-behavior:none}
body.game-embed{position:fixed;inset:0;-webkit-text-size-adjust:100%}
.game-embed .game-page{box-sizing:border-box;height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overflow:hidden}
.game-embed .game-layout{position:relative;flex:1 1 auto;min-height:0;width:100%;max-width:none;margin:0;display:flex;flex-direction:column}
.game-embed .game-frame{flex:1 1 auto;min-height:0;width:100%;height:auto;aspect-ratio:auto;border:0;box-shadow:none;background:linear-gradient(#101515,#080b09 55%,#030403)}
.game-embed .game-frame canvas{object-fit:contain}
.game-embed .hud{padding-right:60px}
.game-embed .touch-controls{flex:none;margin:0;padding:8px 10px}
.game-embed .game-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.game-embed .game-credits{flex:none;box-sizing:border-box;width:100%;max-width:none;margin:0;padding:4px 12px 6px;font-size:10px;line-height:1.35}
.game-overlay,.campaign-overlay{scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.game-overlay::-webkit-scrollbar,.campaign-overlay::-webkit-scrollbar{display:none}
/* Full screen button: always on top, top-right of the play area. */
.game-tools{position:absolute;z-index:30;top:8px;right:8px;display:flex;gap:6px}
.game-tools button{width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid #4d443d;background:#100d0bd9;color:#eee5d6;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.game-tools button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
.game-tools button:focus-visible{outline:2px solid #d7b06c;outline-offset:2px}
.game-tools [hidden]{display:none}
.app-tip{position:absolute;z-index:40;inset:auto 10px 10px 10px;padding:14px 16px;border:1px solid #755f4c;background:#120f0df2;color:#eee5d6;font-size:14px;line-height:1.45;text-align:left}
.app-tip b{color:#d7b06c}
.app-tip button{margin:10px 0 0;min-height:44px;padding:0 18px;border:1px solid #755f4c;background:#8f1d23;color:#fff;text-transform:uppercase;letter-spacing:.08em;font-weight:bold}
/* Phone on its side: controls in a column beside the play area. */
@media (orientation:landscape) and (max-height:500px){
  .game-embed .game-layout{display:flex;flex-direction:row;align-items:stretch;width:100%;gap:0}
  .game-embed .game-frame{flex:1 1 0;min-width:0;width:auto;height:auto}
  .game-embed .touch-controls{display:flex;flex-direction:column;justify-content:center;gap:8px;width:96px;padding:8px}
  .game-embed .touch-controls button{flex:0 1 72px}
  .game-embed .game-credits{padding:2px 12px 4px}
}
/* Desktop widescreen: a 16:9 stage centred on the screen. */
@media (min-width:900px) and (min-height:501px) and (min-aspect-ratio:4/3){
  .game-embed .game-page{justify-content:center;background:#050505}
  .game-embed .game-layout{flex:none;width:min(calc(100vw - 24px),calc((100vh - 40px) * 16 / 9));width:min(calc(100vw - 24px),calc((100dvh - 40px) * 16 / 9));aspect-ratio:16/9;border:1px solid #3b312b;box-shadow:0 28px 80px #000}
  .game-embed .touch-controls{position:absolute;inset:0;z-index:5;display:block;padding:0;pointer-events:none}
  .game-embed .touch-controls button{position:absolute;pointer-events:auto;width:88px;min-height:88px;background:#171310cc}
  .game-embed #moveLeft{left:18px;bottom:22px}
  .game-embed #moveRight{right:18px;bottom:22px}
  .game-embed #pauseGame{right:8px;top:60px;width:auto;min-height:44px;padding:0 16px;font-size:12px}
  .game-embed .game-credits{width:min(calc(100vw - 24px),calc((100vh - 40px) * 16 / 9));width:min(calc(100vw - 24px),calc((100dvh - 40px) * 16 / 9));padding:8px 0 0}
  .game-embed .game-overlay p:not(.eyebrow){max-width:520px}
}
@media (hover:hover) and (pointer:fine) and (min-width:900px) and (min-height:501px) and (min-aspect-ratio:4/3){
  .game-embed #moveLeft,.game-embed #moveRight{opacity:.55}
  .game-embed #moveLeft:hover,.game-embed #moveRight:hover{opacity:1}
}
/* Overlays centre their content when it fits and start at the top when it does not,
   so a heading is never cut off above the screen. */
.game-embed .game-overlay{justify-content:flex-start}
.game-embed .game-overlay>:first-child{margin-top:auto}
.game-embed .game-overlay>:last-child{margin-bottom:auto}
.game-embed .campaign-overlay>:first-child{margin-top:0}
/* Touch screens do not need the keyboard hint. */
@media (pointer:coarse){.game-embed #startOverlay small{display:none}}
/* Short screens (phones on their side, small laptops): tighter start, pause and result screens. */
@media (max-height:560px){
  .game-embed .game-overlay{padding:14px 20px}
  .game-embed .game-overlay h2{font-size:clamp(28px,7vh,40px);margin:0 0 8px}
  .game-embed .game-overlay p:not(.eyebrow){margin:0 0 6px;font-size:14px;line-height:1.4}
  .game-embed .game-overlay .eyebrow{margin:0 0 4px}
  .game-embed .game-overlay button{min-height:44px;margin:4px;padding:8px 16px}
  .game-embed #startOverlay>button{display:inline-block}
}
/* The campaign menu is see-through (brand style), so hide the title screen behind it. */
.game-layout.campaign-open #startOverlay,.game-layout.campaign-open #finaleOverlay,.game-layout.campaign-open #gameOverOverlay{visibility:hidden}
/* In the campaign the prologue's controls are not used: give their space to the menu,
   and keep the menu's first line clear of the full screen button. */
.game-embed .game-layout.campaign-open .touch-controls{display:none}
.game-embed .campaign-overlay{padding-top:60px}
.game-embed .campaign-overlay.campaign-driving{padding-top:10px;padding-right:60px}