:root{
  --bg: #0b1622;
  --grid: #142a3f;
  --panel: #0f2035;
  --panel-border: #24455f;
  --ink: #e7f0f7;
  --ink-dim: #8fa9bd;
  --caution: #ffc93c;
  --go: #4ade80;
  --danger: #ff5d5d;
  --mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); font-family: var(--sans); color: var(--ink); }
body { display: flex; flex-direction: column; }

/* #canvas-wrap is the flexible space the real layout gives us; #stage is a fixed-size box (set
   in px by main.js from LOGICAL_W/LOGICAL_H) that main.js scales with a CSS transform to fit
   inside #canvas-wrap, preserving aspect ratio. flex centering + a scale transform (whose default
   origin is already the element's own center) means the letterboxed stage stays centered with no
   manual offset math needed. */
#canvas-wrap { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#stage { position: relative; flex-shrink: 0; }
#bg-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
}
#stage canvas { position: relative; z-index: 1; display: block; }

#snapFlash {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: var(--danger); color: #fff; font-family: var(--mono); font-weight: 700;
  padding: 6px 14px; border-radius: 6px; font-size: 12px; letter-spacing: 0.05em;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 20;
}
#snapFlash.show { opacity: 1; }
#snapFlash.warn { background: var(--caution); color: #432; }

#debugTooltip {
  position: fixed; z-index: 25; display: none; pointer-events: none;
  background: rgba(4,10,18,0.92); border: 1px solid var(--panel-border); border-radius: 6px;
  padding: 6px 10px; font-family: var(--mono); font-size: 10px; line-height: 1.5; color: var(--ink);
  white-space: nowrap;
}
#debugTooltip b { color: var(--caution); text-transform: uppercase; letter-spacing: 0.05em; }

/* ---- bottom toolbar ---- */
#toolbar {
  flex: 0 0 auto; background: var(--panel); border-top: 1px solid var(--panel-border);
  display: flex; align-items: center; gap: 22px; padding: 10px 18px; flex-wrap: wrap;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.35); z-index: 10;
}
#toolbar .cluster { display: flex; align-items: center; gap: 12px; }
#toolbar .divider { width: 1px; height: 34px; background: var(--panel-border); }

.brand { display: flex; align-items: center; gap: 8px; }
.brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--go); box-shadow: 0 0 8px var(--go); }
.brand-text h1 { font-size: 12px; letter-spacing: 0.12em; margin: 0; font-weight: 700; text-transform: uppercase; }
.brand-text #status { font-family: var(--mono); font-size: 10px; color: var(--caution); letter-spacing: 0.05em; }
.brand-text #status.testing { color: var(--go); }

.stat { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); text-align: center; min-width: 64px; }
.stat b { display: block; font-size: 13px; color: var(--ink); font-weight: 700; }
.stat.stress b { color: var(--danger); }
.stat.budget.over b { color: var(--danger); }

label.field-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); display: block; margin-bottom: 3px; }
select { padding: 8px 10px; border-radius: 6px; border: 1px solid var(--panel-border); background: #0c1b2c; color: var(--ink); font-size: 12px; font-weight: 600; }

button {
  padding: 10px 16px; cursor: pointer; border-radius: 6px; border: none; font-weight: 700;
  font-family: var(--sans); font-size: 12px; transition: transform 0.08s ease, filter 0.15s ease; white-space: nowrap;
}
button:active { transform: scale(0.97); }
button:hover { filter: brightness(1.1); }
#startBtn { background: var(--go); color: #072; }
#startBtn.testing { background: var(--caution); color: #432; }
#truckBtn { background: #6fb1ff; color: #04203a; display: none; }
#vehicleType { display: none; }
#infoBtn { background: transparent; color: var(--ink-dim); border: 1px solid var(--panel-border); }
#resetBtn { background: transparent; color: var(--danger); border: 1px solid #5a2323; }
#hint { font-family: var(--mono); font-size: 10px; color: var(--ink-dim); }

#modal {
  position: absolute; inset: 0; z-index: 30; background: rgba(4,10,18,0.86);
  display: none; align-items: center; justify-content: center;
}
#modal.show { display: flex; }
#modal .card { width: min(480px, 90vw); background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px; padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
#modal h2 { margin: 0 0 4px; font-size: 16px; letter-spacing: 0.04em; }
#modal p.sub { color: var(--ink-dim); font-size: 12px; margin: 0 0 16px; }
#modal ol { padding-left: 18px; margin: 0; font-size: 13px; line-height: 1.9; }
#modal ol li b { color: var(--caution); }
#modal .close { margin-top: 18px; background: var(--go); color: #072; }

/* ---- start screen ---- */
#startScreen {
  position: fixed; inset: 0; z-index: 50;
  background: radial-gradient(circle at 30% 20%, #132840, var(--bg) 70%);
  display: flex; align-items: center; justify-content: center;
}
#startScreen.hide { display: none; }
.start-card { text-align: center; max-width: 560px; padding: 40px; }
.start-card h1 { font-size: 34px; letter-spacing: 0.04em; margin: 0 0 8px; }
.start-card p.sub { color: var(--ink-dim); font-size: 14px; margin: 0 0 28px; }
.start-modes { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.mode-btn {
  display: flex; flex-direction: column; gap: 8px; text-align: left; width: 230px;
  padding: 18px; border-radius: 12px; border: 1px solid var(--panel-border); background: var(--panel);
  color: var(--ink); cursor: pointer; transition: border-color 0.15s ease, transform 0.08s ease;
  white-space: normal; /* override the global button{white-space:nowrap} reset below -- that rule is
                           meant for short toolbar labels, but it inherits into these longer blurbs
                           and was pushing them off the edge of the card instead of wrapping */
}
.mode-btn:hover { border-color: var(--go); }
.mode-btn:active { transform: scale(0.98); }
.mode-btn.primary { border-color: var(--go); background: #123320; }
.mode-title { font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; }
.mode-desc { font-size: 11px; color: var(--ink-dim); font-weight: 500; line-height: 1.5; }

#campaignProgressHint { margin-top: 18px; font-size: 12px; color: var(--ink-dim); }
.link-btn {
  background: none; border: none; padding: 0; font: inherit; color: var(--go);
  text-decoration: underline; cursor: pointer;
}

#menuBtn { background: transparent; color: var(--ink-dim); border: 1px solid var(--panel-border); }

/* ---- campaign level-result / level-intro modals (share the same look) ---- */
#campaignResult, #levelIntro {
  position: absolute; inset: 0; z-index: 40; background: rgba(4,10,18,0.86);
  display: none; align-items: center; justify-content: center;
}
#campaignResult.show, #levelIntro.show { display: flex; }
#campaignResult .card, #levelIntro .card {
  width: min(420px, 90vw); background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 12px; padding: 26px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
#campaignResult h2, #levelIntro h2 { margin: 0 0 10px; font-size: 18px; letter-spacing: 0.05em; }
#campaignResult h2.good { color: var(--go); }
#campaignResult h2.bad { color: var(--danger); }
#campaignResult p.sub, #levelIntro p.sub { color: var(--ink-dim); font-size: 13px; margin: 0 0 18px; line-height: 1.6; }
#campaignResult .close, #levelIntro .close { background: var(--go); color: #072; }