:root {
  --wood: #6b4423;
  --wood-dark: #3e2612;
  --wood-light: #9c6b3c;
  --paper: #e9dcb8;
  --paper-dark: #cdb98a;
  --ink: #2a1a0a;
  --accent: #c8432b;
  --ok: #2f7d32;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background: #0b1a2a;
  font-family: "Chalkboard SE", "Comic Sans MS", "Trebuchet MS", sans-serif;
  color: var(--ink);
  user-select: none; -webkit-user-select: none;
}
canvas#game {
  position: absolute; inset: 0; width: 100%; height: 100%;
  cursor: default;
}
canvas#minimap {
  position: absolute; right: 10px; bottom: 10px;
  width: 160px; height: 160px;
  border: 3px solid var(--wood-dark); border-radius: 4px;
  background: #000; image-rendering: pixelated;
  box-shadow: 0 2px 8px rgba(0,0,0,.6);
  cursor: crosshair;
}
#topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 40px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px;
  background: linear-gradient(#8a5a2b, #5e3a18);
  border-bottom: 3px solid var(--wood-dark);
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
  color: var(--paper); font-size: 14px;
}
#topbar .group { display: flex; align-items: center; gap: 6px; }
#topbar .stock { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; }
#topbar .stock canvas { width: 20px; height: 20px; }
#topbar .sep { width: 1px; height: 24px; background: var(--wood-dark); margin: 0 6px; }
#topbar .clock { font-variant-numeric: tabular-nums; margin-left: 6px; min-width: 48px; text-align: right; }
.btn {
  font: inherit; font-size: 13px;
  background: linear-gradient(#e9dcb8, #cdb98a);
  color: var(--ink); border: 2px solid var(--wood-dark); border-radius: 4px;
  padding: 3px 9px; cursor: pointer;
  box-shadow: inset 0 1px 0 #fff8, 0 1px 0 #0006;
}
.btn:hover { background: linear-gradient(#fff3d6, #e2cf9f); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 1px 2px #0005; }
.btn.active { background: linear-gradient(#f7c66b, #d9962a); }
.btn.danger { background: linear-gradient(#e89a8a, #c8432b); color: #fff; }
.btn.speed { padding: 3px 7px; }

#popup {
  position: absolute; z-index: 20;
  background: var(--paper); border: 3px solid var(--wood-dark); border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.6);
  padding: 6px; min-width: 150px;
}
#popup.hidden { display: none; }
#popup .title { font-weight: bold; margin: 2px 4px 6px; font-size: 13px; color: var(--wood-dark); }
#popup .item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: 4px; cursor: pointer; font-size: 14px;
}
#popup .item:hover { background: var(--paper-dark); }
#popup .item.disabled { opacity: .45; cursor: default; }
#popup .item.disabled:hover { background: transparent; }
#popup .item canvas { flex: none; }
#popup .item .cost { margin-left: auto; font-size: 12px; opacity: .8; display: inline-flex; gap: 4px; align-items: center; }
#popup .item .cost canvas { width: 14px; height: 14px; }
#popup .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
#popup .back { font-size: 12px; opacity: .7; }

#windows { position: absolute; inset: 0; pointer-events: none; z-index: 15; }
.window {
  position: absolute; pointer-events: auto;
  background: var(--paper); border: 3px solid var(--wood-dark); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.6);
  min-width: 260px; max-width: 420px; font-size: 14px;
}
.window .head {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(#8a5a2b, #5e3a18); color: var(--paper);
  padding: 5px 8px; cursor: move; border-radius: 3px 3px 0 0;
  font-weight: bold;
}
.window .head .close { margin-left: auto; cursor: pointer; padding: 0 6px; font-weight: bold; }
.window .head .close:hover { color: #fff; }
.window .body { padding: 8px 10px; }
.window .row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }

.window .muted { opacity: .7; font-size: 12px; }
.window .state { font-style: italic; margin: 4px 0 8px; }
.window .inv { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.window .inv .cell {
  display: flex; flex-direction: column; align-items: center;
  background: #fff5; border: 1px solid var(--paper-dark); border-radius: 4px; padding: 3px 2px;
  font-size: 12px;
}
.window .inv .cell canvas { width: 20px; height: 20px; }
.window .inv .cell.zero { opacity: .45; }
.window .bar { height: 10px; background: #0003; border-radius: 3px; overflow: hidden; margin-top: 2px; }
.window .bar > div { height: 100%; background: var(--ok); }
.window .buttons { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.window table { border-collapse: collapse; width: 100%; }
.window td, .window th { text-align: left; padding: 2px 6px; font-size: 13px; }
.window th { border-bottom: 1px solid var(--paper-dark); }
.window .stock-line { display: flex; align-items: center; gap: 6px; }
.window .stock-line .dots { display: inline-flex; gap: 2px; }
.window .stock-line .dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--wood-dark); background: transparent; }
.window .stock-line .dot.full { background: var(--ok); }
.window .stock-line .dot.transit { background: #d9962a; }
.window .toolgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.window .toolgrid label { display: flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; }
.window .toolgrid canvas { width: 18px; height: 18px; }
.window h3 { margin: 10px 0 4px; font-size: 13px; color: var(--wood-dark); border-bottom: 1px solid var(--paper-dark); }
.window input[type=text] { font: inherit; width: 100%; padding: 4px; border: 2px solid var(--wood-dark); border-radius: 4px; }

#notify {
  position: absolute; left: 10px; bottom: 10px; z-index: 10;
  display: flex; flex-direction: column; gap: 4px; pointer-events: none;
  max-width: 420px;
}
#notify .note {
  background: #e9dcb8ee; border: 2px solid var(--wood-dark); border-radius: 4px;
  padding: 4px 8px; font-size: 13px; pointer-events: auto; cursor: pointer;
  animation: fadein .2s ease-out;
}
#notify .note.warn { border-color: var(--accent); }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

#hint {
  position: absolute; left: 50%; top: 48px; transform: translateX(-50%);
  background: #e9dcb8ee; border: 2px solid var(--wood-dark); border-radius: 4px;
  padding: 4px 10px; font-size: 13px; pointer-events: none; z-index: 10;
}
#hint:empty { display: none; }
/* Material-focused presentation, matching the approved graphics study. */
:root{--wood:#454d3f;--wood-dark:#30372e;--wood-light:#7e826a;--paper:#e5e0d1;--paper-dark:#c6c4b3;--ink:#252a22;--accent:#a35c46;--ok:#697d54}
html,body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#abb8b6}
#topbar{height:46px;background:#283329ed;border-bottom:1px solid #ffffff20;box-shadow:0 4px 20px #0002;font-size:12px;gap:10px;padding:0 14px}
#topbar .group{gap:4px}#topbar .stock{margin-right:2px}
.btn{background:#e1decc;border:1px solid #59624f;border-radius:5px;box-shadow:none;font-size:12px;padding:5px 9px}
.btn:hover{background:#eeecdf}.btn.active{background:#b9bc95;color:#1e2a20}
.window,.window .head,#popup{border-width:1px}.window .head{background:#344235}
#asset-loading{position:absolute;inset:0;z-index:100;background:#202d26;color:#ece7d8;display:grid;place-items:center;text-align:center}
#asset-loading[hidden]{display:none}#asset-loading small{letter-spacing:.28em;font-size:11px}#asset-loading h1{font-family:Georgia,serif;font-weight:400;font-size:40px;margin:20px 0}#asset-loading p{font-size:13px;color:#c4cabb;max-width:480px;line-height:1.6}
#follow-panel{position:absolute;left:20px;bottom:24px;z-index:12;background:#26352beb;border:1px solid #ffffff26;border-radius:9px;padding:15px 18px;color:#ece8d9;min-width:260px;box-shadow:0 8px 30px #0003}
#follow-panel[hidden]{display:none}#follow-job{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#bfc9b4;margin-bottom:7px}#follow-action{display:block;font-size:14px;font-weight:500;margin-bottom:14px}#follow-panel .btn{background:#ffffff0c;color:#e7e8d9;border-color:#ffffff26}#follow-panel .btn.active{background:#a6b28a;color:#203024}
@media(max-width:900px){#topbar{height:auto;min-height:46px;flex-wrap:wrap;padding:7px 10px}#topbar .stock:nth-child(n+5){display:none}#hint{top:82px}#follow-panel{left:10px;bottom:18px;min-width:240px}#notify{bottom:150px}}
/* The opening is staged in the live landscape, without advancing the game. */
#intro{position:fixed;inset:0;z-index:80;display:grid;place-items:center;color:#f2e8d0;text-align:center;background:linear-gradient(180deg,#0c1c2680 0%,#152b2760 42%,#12231ded 100%),radial-gradient(ellipse at 50% 40%,transparent 10%,#091a2266 100%);opacity:1;transition:opacity .85s ease}
#intro[hidden]{display:none}#intro.leaving{opacity:0}
.intro-active #topbar,.intro-active #minimap,.intro-active #notify,.intro-active #windows,.intro-active #hint,.intro-active #follow-panel{visibility:hidden}
#intro-skip{position:absolute;top:30px;right:36px;color:#f0e7d1;background:transparent;border:0;border-bottom:1px solid #e7d4a74d;padding:9px 0;font:11px inherit;letter-spacing:.08em;cursor:pointer}
#intro-skip span{margin-left:12px}.intro-copy{margin:0 20px 20px;animation:intro-appear 1.8s ease both}
.intro-crest{width:126px;height:74px;color:#d8bc80;margin-bottom:16px}.intro-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.3em;color:#e2d4b4;margin:0 0 18px}
#intro-title{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.035em;font-size:clamp(64px,9.4vw,134px);line-height:1;margin:0;text-shadow:0 4px 36px #0004}
#intro-title span{font-style:italic;font-weight:400}.intro-rule{height:1px;width:100px;margin:29px auto 22px;background:linear-gradient(90deg,transparent,#d3b779,transparent)}
#intro-description{font-family:Georgia,serif;font-style:italic;font-size:clamp(17px,2vw,23px);color:#e7dfce;margin:0 0 36px;letter-spacing:.015em}
#intro-start{min-width:206px;border:1px solid #d2b67b;background:#d2b67b;color:#263329;border-radius:2px;padding:16px 28px;font:500 12px/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .2s,transform .2s;box-shadow:0 8px 35px #0002}
#intro-start:hover{background:#e6ce9b;transform:translateY(-2px)}#intro button:focus-visible{outline:2px solid #fff;outline-offset:6px}
.intro-footer{position:absolute;bottom:27px;left:36px;right:36px;display:flex;justify-content:space-between;gap:20px;color:#b7c1b1;font-size:10px;letter-spacing:.16em}.intro-footer span+span{font-family:Georgia,serif;font-style:italic;letter-spacing:.02em;font-size:13px}
@keyframes intro-appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:600px){#intro-skip{top:16px;right:20px}.intro-footer{left:20px;right:20px;bottom:20px;justify-content:center}.intro-footer span+span{display:none}.intro-crest{width:94px;height:55px}.intro-kicker{font-size:9px;letter-spacing:.2em}.intro-copy{margin-top:40px}#intro-start{padding:15px 22px}}
@media(max-height:540px){.intro-crest{height:42px;margin-bottom:5px}.intro-kicker{margin-bottom:10px}#intro-title{font-size:66px}.intro-rule{margin:16px auto}#intro-description{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){#intro,.intro-copy,#intro-start{animation:none;transition:none}}