:root {
  font: 11px/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color: #302f2b;
  background: #fff;
  --ink: #302f2b;
  --muted: #99968e;
  --line: #ecebe6;
  --warm: #af6542;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100svh; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:active { transform: translateY(1px); }
button:focus-visible, a:focus-visible { outline: 2px solid #af6542; outline-offset: 5px; }
header { position: fixed; top: 32px; left: 38px; right: 38px; display: flex; align-items: start; justify-content: space-between; z-index: 2; }
.identity { display: flex; flex-direction: column; gap: 5px; }
.identity a { color: var(--ink); text-decoration: none; font-size: 19px; letter-spacing: -.8px; font-weight: 600; }
.pixel-mark { margin-left: 10px; font-size: 20px; color: #b76440; }
.identity > span { color: var(--muted); font-size: 9px; }
nav { display: flex; align-items: center; gap: 24px; }
nav button, footer button { border: 0; padding: 5px 0; background: transparent; color: #8b877f; }
nav button:hover, footer button:hover { color: var(--ink); }
.difficulty { color: var(--warm); font-size: 9px; margin-right: 12px; }
.weather-hud { position: fixed; top: 134px; left: 38px; display: flex; flex-direction: column; gap: 5px; z-index: 1; pointer-events: none; }
.weather-hud > span { color: var(--muted); font-size: 9px; }
.weather-hud strong { font-size: 23px; font-weight: 400; letter-spacing: -1px; margin: 4px 0; }
.weather-hud #stormTimer { color: var(--warm); margin-top: 4px; }
.resource-hud { position: fixed; top: 134px; right: 38px; display: flex; flex-direction: column; gap: 14px; z-index: 1; pointer-events: none; }
.resource-hud > div { display: grid; grid-template-columns: 17px 42px 1fr; align-items: center; gap: 6px; }
.resource-hud strong { font-weight: 500; font-size: 15px; font-variant-numeric: tabular-nums; }
.resource-hud div > span:last-of-type { color: var(--muted); font-size: 9px; }
.stat-icon { font-size: 15px; }
.coin { color: #b59b51; }
.timber { color: #957a5b; }
.fire { color: #b6653f; }
.meter { height: 3px; grid-column: 2 / 4; overflow: hidden; background: #ede9e0; }
.meter i { display: block; width: 72%; height: 100%; background: #bb7850; }
body[data-cold="true"] .meter i { background: #b94a3e; }
body[data-storm="true"] #stormTimer { color: #aa4c41; }
#stage { position: fixed; inset: 65px 0 75px; display: grid; place-items: center; }
canvas { display: block; image-rendering: pixelated; touch-action: none; cursor: grab; outline: none; }
canvas:active { cursor: grabbing; }
canvas:focus-visible { outline: 1px dashed #dedbd3; outline-offset: -15px; }
#toast { position: fixed; top: 96px; left: 50%; transform: translateX(-50%); color: var(--warm); opacity: 0; transition: opacity .15s; text-align: center; width: max-content; max-width: calc(100% - 40px); z-index: 3; font-size: 10px; padding: 7px 12px; background: #fffffff0; }
#toast.visible { opacity: 1; }
.camp-controls { position: fixed; width: min(510px, calc(100% - 60px)); left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 2; }
.route-heading { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 9px; margin-bottom: 15px; }
#activity { color: #ad694a; }
.station-controls { display: flex; gap: 22px; }
.station-controls button { display: flex; align-items: baseline; gap: 7px; flex: 1; padding: 0 0 11px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; white-space: nowrap; }
.station-controls button > span { color: #b6b1a4; font-size: 8px; }
.station-controls small { margin-left: auto; color: var(--muted); font-size: 8px; }
.station-controls button[aria-pressed="true"] { border-bottom-color: #b56c44; color: #b56c44; }
.station-controls button:hover { color: #b56c44; }
.upgrade-controls { display: flex; gap: 24px; margin-top: 15px; }
.upgrade-controls button { flex: 1; text-align: left; display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 3px; padding: 0; border: 0; background: transparent; font-size: 9px; }
.upgrade-controls b { margin-left: auto; font-size: 9px; font-weight: 500; color: #a58c49; }
.upgrade-controls b::before { content: '◆ '; font-size: 7px; }
.upgrade-controls small { flex-basis: 100%; color: var(--muted); font-size: 8px; }
.upgrade-controls button:hover { color: #b56c44; }
.upgrade-controls button:disabled { opacity: .5; cursor: default; }
.helper-line { color: #a6a093; margin-top: 13px; font-size: 8px; min-height: 13px; }
footer { position: fixed; left: 38px; right: 38px; bottom: 22px; display: flex; justify-content: space-between; color: #a6a196; font-size: 8px; align-items: center; gap: 12px; }
footer a { color: inherit; text-decoration: none; }
.footer-divider { margin: 0 9px; color: #d0ccc2; }
#convoy { color: #6d7168; }
.overlay { position: fixed; inset: 0; background: #ffffffc7; backdrop-filter: blur(5px); z-index: 5; display: grid; place-items: center; padding: 24px; }
.overlay[hidden] { display: none; }
.dialog { width: min(350px, 100%); max-height: calc(100svh - 48px); overflow-y: auto; padding: 28px 0; }
.dialog-kicker { color: var(--warm); font-size: 9px; }
.dialog h1 { font: 400 31px/1.2 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -1px; margin: 23px 0 16px; }
.dialog > p { font-size: 11px; color: #7c7a71; line-height: 1.9; }
#instructions > p { display: flex; gap: 18px; color: #8b877d; font-size: 10px; line-height: 1.9; margin: 20px 0; }
#instructions > p > span { color: #b2aa99; font-size: 8px; padding-top: 2px; }
.key-hint { color: #a69e8c; font-size: 9px; line-height: 2; border-top: 1px solid var(--line); padding-top: 16px; margin: 22px 0 26px; }
.primary { padding: 12px 0; width: 100%; text-align: left; border: 0; border-top: 1px solid #a7a18f; background: transparent; color: var(--ink); }
.secondary { border: 0; background: transparent; padding: 12px 0; font-size: 9px; color: var(--muted); }
.secondary[hidden] { display: none; }
@media(max-width: 740px) {
  header { top: 22px; left: 22px; right: 22px; }
  .identity a { font-size: 17px; }
  .identity > span { font-size: 8px; }
  nav { gap: 16px; font-size: 9px; }
  .difficulty { display: none; }
  .weather-hud { top: 112px; left: 23px; gap: 3px; }
  .weather-hud strong { font-size: 20px; }
  .weather-hud > span { font-size: 8px; }
  .resource-hud { top: 112px; right: 22px; gap: 10px; }
  .resource-hud > div { grid-template-columns: 13px 34px 1fr; gap: 4px; }
  .resource-hud strong { font-size: 13px; }
  .resource-hud div > span:last-of-type { font-size: 8px; }
  #stage { inset: 183px 0 224px; }
  .camp-controls { width: calc(100% - 46px); bottom: 65px; }
  .route-heading { font-size: 8px; margin-bottom: 13px; }
  .station-controls { gap: 14px; }
  .station-controls button { font-size: 10px; gap: 5px; flex-wrap: wrap; }
  .station-controls small { flex-basis: 100%; padding-left: 10px; }
  .upgrade-controls { gap: 16px; margin-top: 13px; }
  .upgrade-controls button { font-size: 8px; column-gap: 5px; }
  .upgrade-controls b { font-size: 8px; }
  .upgrade-controls small { font-size: 7px; }
  .helper-line { font-size: 7px; margin-top: 10px; }
  footer { left: 23px; right: 23px; bottom: 20px; font-size: 7px; }
  #saveState { display: none; }
  footer > div:first-child .footer-divider { display: none; }
  #toast { top: 82px; font-size: 8px; }
}
@media(max-height: 640px) and (min-width: 741px) {
  header { top: 18px; }
  .weather-hud, .resource-hud { top: 88px; }
  #stage { inset: 68px 0 160px; }
  .camp-controls { bottom: 42px; }
  .helper-line { display: none; }
  footer { bottom: 10px; }
}
@media(prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.station-controls button { min-height: 44px; }
.upgrade-controls button { min-height: 38px; }