﻿:root {
  color-scheme: light;
  --paper: #f4edda;
  --paper-light: #fff9e9;
  --panel: #fff8e8;
  --ink: #27342d;
  --ink-soft: #53645a;
  --line: #334239;
  --green: #496c4c;
  --green-light: #dce8ca;
  --gold: #bd7935;
  --red: #b45c47;
  --shadow: 4px 5px 0 rgba(39,52,45,.20);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(rgba(91,77,49,.11) .7px, transparent .7px);
  background-size: 7px 7px;
  font: 15px/1.5 ui-rounded, "Trebuchet MS", system-ui, sans-serif;
}
header, main, footer { max-width: 1200px; margin: auto; }
header { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; gap:12px; }
.brand { display:flex; gap:12px; align-items:center; }
.mark { display:grid; place-items:center; width:48px; height:48px; border:3px solid var(--ink); border-radius:12px 9px 12px 8px; background:#e2cf9e; color:var(--ink); font-weight:950; box-shadow:3px 3px 0 var(--ink); transform:rotate(-3deg); }
.eyebrow { display:block; color:var(--ink-soft); font-size:10px; font-weight:850; letter-spacing:1.5px; }
h1 { margin:2px 0; font-size:23px; line-height:1.1; font-weight:950; letter-spacing:-.7px; }
h1 span { color:var(--green); }
h2 { margin:8px 0 12px; font-size:21px; line-height:1.2; font-weight:950; letter-spacing:-.4px; }
h3 { margin:0; font-size:21px; line-height:1.2; font-weight:950; }
p { color:var(--ink-soft); margin:10px 0; }
main { padding:0 24px; }
button, .file-button {
  min-height:46px; padding:10px 13px; border:2px solid var(--ink); border-radius:8px 6px 9px 7px;
  color:var(--ink); background:#eee2c6; box-shadow:2px 3px 0 var(--ink);
  font:inherit; font-size:13px; font-weight:850; line-height:1.25; cursor:pointer; text-align:center;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
button:hover:not(:disabled), .file-button:hover { background:#e5d3aa; transform:translate(-1px,-1px); box-shadow:3px 4px 0 var(--ink); }
button:active:not(:disabled) { transform:translate(2px,2px); box-shadow:none; }
button:disabled { opacity:.48; cursor:not-allowed; box-shadow:1px 1px 0 var(--ink); }
button:focus-visible, .file-button:focus-within, a:focus-visible { outline:3px solid #bf7332; outline-offset:4px; }
.primary { width:100%; color:#fff9e9; background:var(--green); font-size:15px; }
.primary:hover:not(:disabled) { background:#38583d; }
.cash { text-align:right; padding:7px 12px; border:2px solid var(--ink); border-radius:8px; background:var(--green-light); box-shadow:3px 3px 0 var(--ink); }
.cash strong { display:block; color:#36583c; font-size:30px; line-height:1.1; font-weight:950; }
.panel { position:relative; padding:22px; border:2px solid var(--ink); border-radius:10px 8px 12px 9px; background:var(--panel); box-shadow:var(--shadow); }
.overview { display:grid; grid-template-columns:1.3fr 1fr; gap:20px; overflow:hidden; background-color:#e8e2cb; background-image:radial-gradient(rgba(39,52,45,.12) .8px,transparent .8px),linear-gradient(115deg,#f4efdF,#e2e7cf); background-size:7px 7px,auto; }
.overview:after { content:""; position:absolute; top:13px; right:13px; width:24px; height:24px; border-top:3px solid var(--green); border-right:3px solid var(--green); opacity:.65; }
.overview h2 { max-width:560px; font-size:clamp(29px,4vw,43px); letter-spacing:-1.4px; }
.overview p { max-width:590px; }
.jump { display:inline-block; margin:5px 0; padding:8px 11px; color:#fff9e9; background:var(--green); border:2px solid var(--ink); border-radius:6px; box-shadow:2px 3px 0 var(--ink); font-weight:850; text-decoration:none; }
.time-note { font-size:12px; }
.showroom { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:190px; border:2px dashed rgba(51,66,57,.5); border-radius:8px; background-image:radial-gradient(rgba(39,52,45,.10) .8px,transparent .8px); background-size:6px 6px; }
.showroom>span { color:var(--ink-soft); font-size:12px; font-weight:800; }
.car { --paint:#b98d69; position:relative; width:240px; height:112px; margin:0 0 14px; filter:drop-shadow(4px 5px 0 rgba(39,52,45,.28)); }
.car-body { position:absolute; left:9px; right:9px; bottom:20px; height:43px; background:var(--paint); border:3px solid var(--ink); border-radius:22px 30px 12px 12px; }
.car-top { position:absolute; z-index:1; left:58px; top:5px; width:121px; height:62px; background:#b9d0c1; border:4px solid var(--ink); border-radius:40px 45px 2px 2px; transform:skewX(-9deg); }
.car-top:after { content:""; position:absolute; top:4px; bottom:4px; left:50%; border-left:2px solid var(--ink); }
.car-body:before { content:""; position:absolute; right:2px; top:9px; width:13px; height:10px; border:1px solid var(--ink); border-radius:3px; background:#f3d274; }
.car-body:after { content:""; position:absolute; left:3px; top:9px; width:7px; height:10px; border:1px solid var(--ink); background:var(--red); }
.wheel { position:absolute; z-index:2; bottom:5px; width:39px; height:39px; border:4px solid var(--ink); border-radius:50%; background:#f0e2bd; box-shadow:inset 0 0 0 5px #78847a; }
.left { left:38px; } .right { right:36px; }
.car[data-model="0"] .car-body { border-radius:8px 14px 6px 6px; background:linear-gradient(30deg,#80624a 15%,transparent 15%),var(--paint); }
.car[data-model="2"] .car-top { height:48px; top:19px; left:70px; }
.car[data-model="2"] .car-body { border-radius:38px 35px 8px 8px; }
.stock { display:grid; grid-template-columns:repeat(3,1fr) 1.7fr; gap:12px; align-items:center; margin-top:18px; }
.stock>div:not(.sell) { padding:7px 10px; border-left:3px solid #a79770; }
.stock strong { display:block; font-size:27px; font-weight:950; }
.sell>span { color:var(--green); font-size:12px; font-weight:850; }
.actions { display:flex; gap:9px; flex-wrap:wrap; }
.sell .actions { margin-top:6px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; margin:25px 0 13px; padding-bottom:7px; border-bottom:2px solid var(--ink); }
.section-heading h2 { margin:0; }
.section-heading span { color:var(--ink-soft); font-size:13px; font-weight:750; }
.station-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.station { display:flex; flex-direction:column; padding:19px; background-color:#f2ead6; background-image:linear-gradient(rgba(56,85,67,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(56,85,67,.055) 1px,transparent 1px); background-size:18px 18px; }
.station:before { content:""; position:absolute; top:9px; right:10px; width:8px; height:8px; border:2px solid var(--ink); border-radius:50%; background:#d98256; box-shadow:-11px 0 0 -1px #e6bb65; }
.station .number { color:#8c572e; font-size:10px; font-weight:950; letter-spacing:1.7px; }
.station h3 { margin-top:3px; }
.station .description { min-height:48px; font-size:13px; }
.status { min-height:22px; color:var(--green); font-size:12px; font-weight:850; }
.cycle-list { min-height:48px; margin:10px 0; }
.cycle { margin:7px 0; padding:7px 8px; border:1px solid #9b967e; border-radius:5px; background:rgba(255,249,233,.8); }
.cycle-label { display:flex; justify-content:space-between; color:var(--ink-soft); font-size:11px; font-weight:700; }
progress { display:block; width:100%; height:9px; margin-top:5px; accent-color:var(--green); }
.recipe { min-height:40px; color:#8b5c2c; font-size:12px; font-weight:800; }
.upgrades { display:grid; gap:8px; margin-top:15px; }
.upgrades button { display:flex; justify-content:space-between; align-items:center; gap:8px; text-align:left; font-size:12px; }
.upgrades button span { color:var(--green); white-space:nowrap; }
.locked { opacity:.7; }
.bottom-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:19px 0; }
.project, .milestone { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-top:1px dashed #9c9479; }
.project small, .milestone small { display:block; color:var(--ink-soft); font-size:12px; }
.milestone span { color:#8b5c2c; font-size:12px; font-weight:800; text-align:right; }
.accent { color:var(--green); font-weight:900; }
.finance, .save-panel { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:19px 0; }
.finance p, .save-panel p { max-width:680px; font-size:13px; }
.file-button { position:relative; display:inline-block; }
.file-button input { position:absolute; inset:0; width:100%; cursor:pointer; opacity:0; }
footer { padding:25px 24px 38px; color:var(--ink-soft); font-size:12px; }
#notice { min-height:40px; padding:10px 2px; color:#855522; font-size:13px; font-weight:800; }
[hidden] { display:none!important; }
@media(max-width:850px) {
  .station-grid { grid-template-columns:1fr; }
  .station .description { min-height:0; }
  .cycle-list { min-height:0; }
  .upgrades { grid-template-columns:1fr 1fr; }
  .stock { grid-template-columns:repeat(3,1fr); }
  .sell { grid-column:1/-1; }
  .bottom-grid { grid-template-columns:1fr; }
  .finance, .save-panel { align-items:flex-start; flex-direction:column; }
}
@media(max-width:520px) {
  header { padding:14px 13px; }
  .mark { width:39px; height:39px; }
  h1 { font-size:19px; }
  .cash { padding:6px 8px; }
  .cash strong { font-size:24px; }
  .brand .eyebrow { font-size:8px; letter-spacing:1px; }
  main { padding:0 12px; }
  .panel { padding:16px; }
  .overview { grid-template-columns:1fr; gap:13px; }
  .overview h2 { max-width:400px; font-size:30px; }
  .showroom { min-height:130px; }
  .car { transform:scale(.78); margin:-4px 0 -8px; }
  .stock { gap:5px; }
  .stock .eyebrow { font-size:8px; letter-spacing:.6px; }
  .stock strong { font-size:21px; }
  .upgrades { grid-template-columns:1fr; }
  .section-heading span { display:none; }
  .finance .actions, .save-panel .actions { width:100%; }
  .actions button, .file-button { flex-grow:1; }
  .project button { flex-shrink:0; }
  .station { padding:16px; }
}
@media(max-width:360px) {
  header { align-items:flex-start; }
  .brand { gap:8px; }
  .brand .eyebrow { max-width:120px; }
  h1 { font-size:17px; }
  .cash strong { font-size:21px; }
  main { padding:0 9px; }
  .overview h2 { font-size:27px; }
  .panel { padding:13px; }
  .stock strong { font-size:19px; }
}
@media(prefers-reduced-motion:reduce) {
  *, *:before, *:after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* New production-chain scene and progression panels */
.workshop-art { display:block; width:100%; height:auto; max-height:clamp(190px,35vw,310px); }
.scene-host { width:100%; min-width:0; overflow:hidden; border:2px solid var(--ink); border-radius:7px; background:#e7e4c9; box-shadow:inset 0 0 0 4px rgba(255,249,233,.55); }
.stage-caption { margin:8px 0 0; padding:6px 9px; border-left:4px solid var(--green); color:var(--ink-soft); font-size:12px; font-weight:750; }
.station .scene-host { margin:10px 0 2px; }
.goal-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 16px; margin-top:15px; }
.goal-panel .eyebrow { grid-column:1/-1; }
.goal-panel #goal { min-width:0; font-weight:900; }
.goal-panel #earned { color:var(--green); font-weight:900; text-align:right; }
.goal-panel progress { grid-column:1/-1; margin:0; height:12px; }
.garage-panel { margin-top:19px; }
.garage-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-top:1px dashed #9c9479; }
.garage-row > * { min-width:0; }
.garage-row small { display:block; color:var(--ink-soft); font-size:12px; overflow-wrap:anywhere; }
.blueprint-card { min-width:0; padding:12px 0; border-top:1px dashed #9c9479; }
.project-copy { min-width:0; overflow-wrap:anywhere; }
.game-menu {display:flex;flex-wrap:wrap;gap:9px;margin:4px 0 18px;padding:12px;border:2px solid var(--ink);border-radius:10px;background:#e7dfc6;box-shadow:var(--shadow);}
.wallet-hud {display:flex;align-items:stretch;justify-content:flex-end;gap:12px;min-width:0;}
.wallet-hud .business-clock {display:grid;grid-template-columns:1fr;gap:2px;margin:0;padding:8px 12px;min-width:190px;border:2px solid var(--ink);border-radius:9px;background:var(--paper-light);box-shadow:3px 3px 0 var(--ink);font-size:12px;}
.wallet-hud .business-clock>* {grid-column:1;}
.wallet-hud .business-clock #next-business-day {text-align:left;font-size:12px;}
.wallet-hud .business-clock #loan-hud {font-weight:850;color:var(--green);}
.wallet-hud .business-clock progress {height:6px;}
.wallet-hud .business-clock small {font-size:10px;}
.wallet-hud .cash {display:flex;flex-direction:column;justify-content:center;min-width:100px;}
@media(max-width:650px) {header {flex-wrap:wrap;}header .brand{flex-basis:100%;}.wallet-hud{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;}.wallet-hud .business-clock{min-width:0;padding:7px 10px;}.wallet-hud .cash{max-width:48vw;min-width:90px;}.wallet-hud .cash strong{font-size:clamp(16px,5.5vw,25px);}}
.game-menu button {flex:1 1 125px;min-width:0;}
.game-menu [aria-current="page"] {background:var(--green);color:var(--paper-light);}
.blueprint-card {padding:14px 0;}
.blueprint-card summary {display:flex;align-items:center;gap:12px;cursor:pointer;min-height:60px;list-style:inside;}
.blueprint-card summary>span {margin-left:auto;font-size:11px;color:var(--ink-soft);}
.blueprint-card .project-copy {margin:12px 0;}
.blueprint-card summary:after {content:'+';font-size:22px;font-weight:900;}
.blueprint-card[open] summary:after {content:'−';}
.blueprint-card summary:focus-visible {outline:3px solid #bf7332;outline-offset:3px;}
.bank-choice {display:flex;align-items:center;text-align:left;gap:10px;flex:1;}
.bank-choice svg {width:42px;height:42px;flex-shrink:0;}
.bank-choice small {display:block;font-size:11px;}
.bank-choice[aria-pressed="true"] {background:var(--green-light);}
#bank-choices {display:flex;flex-wrap:wrap;gap:10px;margin:16px 0;}
.roster-group {margin:16px 0;padding:16px;border:2px solid var(--ink);border-radius:10px;background:#f4edd7;}
.roster-group>button {margin:5px 8px 0 0;}
.staff-panel {margin-top:18px;}
.car[data-style="rust"] .car-body {background:radial-gradient(ellipse at 22% 35%,#784b32 0 9%,transparent 10%),radial-gradient(ellipse at 75% 65%,#895336 0 15%,transparent 16%),linear-gradient(12deg,transparent 45%,#c7b58b 46% 49%,transparent 50%),#a58e64;border-radius:4px 12px 5px 6px;transform:rotate(-1deg);}
.car[data-style="rust"] .car-top {background:linear-gradient(125deg,#b9d0c1 45%,#42564c 46% 47%,#b9d0c1 48% 65%,#5e7569 66% 67%,#b9d0c1 68%);border-radius:22px 30px 2px 2px;transform:skewX(-9deg) rotate(2deg);}
.car[data-style="sport"] .car-body {height:32px;bottom:22px;left:2px;right:1px;border-radius:65px 70px 7px 8px;background:linear-gradient(175deg,var(--paint) 0 57%,#273b47 58% 75%,var(--paint) 76%);}
.car[data-style="sport"] .car-top {height:38px;top:25px;left:76px;width:104px;border-radius:70px 70px 2px 2px;background:#8bb7c4;transform:skewX(14deg);}
.car[data-style="sport"] .wheel {width:41px;height:41px;bottom:3px;box-shadow:inset 0 0 0 6px #627382;}
.car[data-style="sport"]:after {content:'';position:absolute;left:6px;top:48px;width:36px;border-top:5px solid var(--ink);transform:rotate(-5deg);}
.car[data-style="van"] .car-top {left:44px;top:0;width:140px;height:63px;border-radius:10px 30px 2px 2px;transform:skewX(-5deg);background:#b0c9c0;}
.car[data-style="van"] .car-body {height:46px;left:7px;right:6px;bottom:20px;border-radius:9px 25px 8px 8px;}
.car[data-style="van"] .wheel {width:44px;height:44px;bottom:1px;background:#d8d9c8;}
.car[data-style="city"] .car-top {left:57px;top:6px;width:117px;height:57px;border-radius:55px 45px 2px 2px;}
@media(max-width:520px) {.game-menu{gap:7px;padding:9px;}.game-menu button{flex-basis:41%;font-size:12px;}.blueprint-card summary{flex-wrap:wrap;gap:7px;}.blueprint-card summary>span{display:none;}.bank-choice{flex-basis:100%;}}
.station-grid { align-items:start; }
.station.locked { opacity:1; background:var(--paper-light); }
.station.locked .start { margin-top:10px; }
.unlock-note { font-size:13px; }
.crew-upgrades { margin-top:18px; border-top:2px dashed #9b967e; }
.crew-upgrades h4 { margin:12px 0 8px; }
.crew-row { display:grid; gap:6px; padding:9px 0; border-top:1px solid #d1c8ad; }
.crew-row span { font-size:12px; font-weight:800; }
.upgrade-shop,.accolade-board { margin-top:18px; }
.upgrade-shop>label { margin-right:10px; font-weight:800; }
.upgrade-shop select { min-height:44px; max-width:100%; border:2px solid var(--ink); border-radius:7px; padding:8px; background:var(--paper-light); color:var(--ink); font:inherit; }
.shop-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0; }
#accolades { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.medal-card { display:grid; grid-template-columns:48px 1fr; gap:8px; padding:14px; border:2px dashed #aaa58e; border-radius:9px; background:#eee7d5; }
.medal-card.earned { border-style:solid; background:#faf0cc; box-shadow:3px 3px 0 #bba76e; }
.medal-card svg { width:48px; height:56px; }
.medal-card small,.medal-card span { display:block; font-size:12px; }
.medal-card progress { grid-column:1/-1; }
@media(max-width:650px) { .shop-grid,#accolades {grid-template-columns:1fr;} }
.hotdog-panel { display:grid; grid-template-columns:1fr 1.2fr; gap:20px; align-items:center; margin-top:18px; }
#hotdog-scene { min-width:0; overflow:hidden; border:2px solid var(--ink); border-radius:10px; }
.hotdog-copy p { font-size:13px; }
#hotdog-sell { touch-action:manipulation; user-select:none; -webkit-user-select:none; }
#hotdog-count { font-weight:800; color:var(--green); }
.business-clock { display:grid; grid-template-columns:1fr 1fr; gap:7px 14px; margin-top:18px; }
.business-clock .eyebrow,.business-clock progress,.business-clock small { grid-column:1/-1; }
.business-clock #next-business-day { text-align:right; font-size:13px; }
.business-clock small { color:var(--ink-soft); }
@media(max-width:650px) { .hotdog-panel {grid-template-columns:1fr;gap:12px;} .business-clock {grid-template-columns:1fr;} .business-clock #next-business-day {text-align:left;} }
.blueprint-preview { width:110px; height:57px; overflow:hidden; margin-bottom:5px; }
.blueprint-preview .car { transform:scale(.44); transform-origin:left top; margin:0; }
.loan-controls { min-width:190px; align-content:start; }
.loan-controls label { font-size:13px; font-weight:850; }
.loan-controls select { width:100%; min-width:0; min-height:46px; padding:9px 11px; border:2px solid var(--ink); border-radius:7px; background:var(--paper-light); color:var(--ink); box-shadow:2px 3px 0 var(--ink); font:inherit; font-weight:800; }
.loan-controls select option { color:var(--ink); background:var(--paper-light); }
.loan-controls select:focus-visible { outline:3px solid #bf7332; outline-offset:4px; }
.car[data-style="van"] .car-top { left:54px; top:1px; width:132px; height:68px; border-radius:9px 13px 2px 2px; transform:skewX(-2deg); }
.car[data-style="van"] .car-body { left:10px; right:8px; height:52px; border-radius:10px 12px 8px 8px; }
.car[data-style="van"] .car-body:after { left:91px; top:-20px; width:2px; height:66px; background:var(--ink); }
@media(max-width:520px) {
  .workshop-art { max-height:none; }
  .scene-host { width:100%; }
  .station .scene-host { margin:8px 0 0; }
  .goal-panel { grid-template-columns:minmax(0,1fr) auto; gap:7px 8px; }
  .garage-row { align-items:stretch; flex-direction:column; gap:8px; }
  .garage-row button { width:100%; }
  .project { align-items:stretch; flex-direction:column; }
  .project button { width:100%; }
  .blueprint-card { overflow-wrap:anywhere; }
  .loan-controls { min-width:0; width:100%; }
  .cash { max-width:56vw; }
  .cash strong { max-width:100%; font-size:clamp(16px,6vw,24px); overflow-wrap:anywhere; }
}
@media(max-width:360px) {
  .goal-panel #goal { font-size:13px; }
  .goal-panel #earned { font-size:12px; }
  .stage-caption { font-size:11px; }
}
