:root{
  /* ---- world palette (used by canvas render.js, mirrored here for HUD accents) ---- */
  --w-grass-lo:#5b7a52;
  --w-grass-hi:#7a9c6e;
  --w-stone-lo:#7c7a72;
  --w-stone-hi:#9b988d;
  --w-water:#3f6e83;
  --w-sand:#c9b285;
  --w-fog:#0d1210;

  /* ---- instrument panel palette: deliberately flat, low-saturation, paper-adjacent
         but NOT the templated cream/terracotta combo — this leans cold slate/ink
         instead, closer to a field-notebook or topographic survey than a "product" ---- */
  --ink:#e8e6de;
  --ink-dim:#9a9c93;
  --ink-faint:#5f625a;
  --panel:#14150f;
  --panel-raised:#1b1c15;
  --line:#33352a;
  --line-strong:#4a4d3c;
  --accent-wood:#b98a4f;
  --accent-stone:#8d9098;
  --accent-food:#7fae6b;
  --accent-warn:#c9622f;
  --accent-warn-bg:#241811;

  --mono:'JetBrains Mono', ui-monospace, monospace;
  --display:'Space Grotesk', system-ui, sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--panel);
  color:var(--ink);
  font-family:var(--mono);
  overflow:hidden;
}
button, input, select{font-family:inherit; color:inherit;}
button{cursor:pointer;}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}

#app{height:100vh; width:100vw; position:relative;}

/* =========================================================
   OVERLAY SCREENS (boot / end) — flat instrument panel look
   ========================================================= */
.overlay-screen{
  display:none;
  position:absolute; inset:0;
  align-items:center;
  justify-content:center;
  background:var(--panel);
  z-index:20;
}
.overlay-screen.active{display:flex;}

.boot-panel{
  width:min(420px, 90vw);
  border:1px solid var(--line-strong);
  background:var(--panel-raised);
  padding:32px 28px;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.boot-mark{
  font-family:var(--display);
  font-size:28px;
  font-weight:700;
  letter-spacing:0.06em;
}
.boot-sub{
  font-size:12px;
  color:var(--ink-dim);
  margin-top:-14px;
  line-height:1.5;
}
.boot-foot{
  font-size:11px;
  color:var(--ink-faint);
  text-align:center;
  margin-top:-8px;
}

.field{display:flex; flex-direction:column; gap:8px;}
.field-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--ink-dim);
}

.seed-row{display:flex; gap:8px;}
.seed-input, .select-input{
  flex:1;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--ink);
  padding:10px 12px;
  font-family:var(--mono);
  font-size:13px;
}
.seed-input:focus, .select-input:focus{border-color:var(--line-strong);}
.select-input{width:100%; appearance:none; cursor:pointer;}

.icon-btn{
  background:var(--panel);
  border:1px solid var(--line);
  width:38px;
  color:var(--ink-dim);
  font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.icon-btn:hover{border-color:var(--line-strong); color:var(--ink);}

.segmented{display:flex; border:1px solid var(--line);}
.segmented-opt{
  flex:1;
  background:var(--panel);
  border:none;
  border-right:1px solid var(--line);
  padding:10px 8px;
  font-size:12px;
  color:var(--ink-dim);
}
.segmented-opt:last-child{border-right:none;}
.segmented-opt.selected{background:var(--line); color:var(--ink);}
.segmented-opt:hover:not(.selected){color:var(--ink);}

.primary-btn{
  background:var(--ink);
  color:var(--panel);
  border:none;
  padding:13px;
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.02em;
}
.primary-btn:hover{background:#fff;}

.secondary-btn{
  background:transparent;
  color:var(--ink-dim);
  border:1px solid var(--line);
  padding:11px;
  font-family:var(--mono);
  font-size:12px;
}
.secondary-btn:hover{border-color:var(--line-strong); color:var(--ink);}

.end-stats{
  font-size:13px;
  color:var(--ink-dim);
  line-height:2;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:14px 0;
  margin-top:-8px;
}
.end-stats span{color:var(--ink); font-weight:700;}

/* =========================================================
   RUN VIEW
   ========================================================= */
#run-view{
  height:100%;
  display:flex;
  flex-direction:column;
}

/* ---- top strip ---- */
#hud-top{
  height:44px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:24px;
  padding:0 16px;
  border-bottom:1px solid var(--line);
  background:var(--panel-raised);
}
.hud-block{display:flex; align-items:baseline; gap:6px;}
.hud-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--ink-faint);
}
.hud-value{font-size:13px; color:var(--ink);}

.hud-resources{display:flex; gap:18px; margin-left:auto;}
.resource{display:flex; align-items:center; gap:6px; font-size:13px;}
.resource[data-res="wood"] .res-icon{color:var(--accent-wood);}
.resource[data-res="stone"] .res-icon{color:var(--accent-stone);}
.resource[data-res="food"] .res-icon{color:var(--accent-food);}
.resource.low .res-val{color:var(--accent-warn);}
.res-icon{font-size:10px;}

/* ---- world ---- */
#world-wrap{
  flex:1;
  position:relative;
  overflow:hidden;
  background:var(--w-fog);
}
#world-layer{
  position:absolute;
  top:0; left:0;
  cursor:pointer;
}

.event-banner{
  position:absolute;
  top:14px; left:50%;
  transform:translate(-50%, -12px);
  background:var(--accent-warn-bg);
  border:1px solid var(--accent-warn);
  color:var(--ink);
  font-size:12px;
  padding:9px 16px;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  max-width:min(420px, 80vw);
  text-align:center;
}
.event-banner.visible{
  opacity:1;
  transform:translate(-50%, 0);
}

/* ---- bottom strip ---- */
#hud-bottom{
  height:96px;
  flex-shrink:0;
  display:flex;
  border-top:1px solid var(--line);
  background:var(--panel-raised);
}

.build-menu{
  width:min(320px, 45vw);
  padding:10px 14px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow-y:auto;
}
.build-menu-label{margin-bottom:2px;}
.build-options{display:flex; gap:8px; flex-wrap:wrap;}
.build-opt{
  border:1px solid var(--line);
  background:var(--panel);
  padding:8px 10px;
  font-size:11px;
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:84px;
  text-align:left;
}
.build-opt:hover:not(:disabled){border-color:var(--line-strong);}
.build-opt:disabled{opacity:0.35; cursor:not-allowed;}
.build-opt-name{color:var(--ink); font-weight:700;}
.build-opt-cost{color:var(--ink-faint); font-size:10px;}

.event-log{
  flex:1;
  padding:10px 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.event-log-list{
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column-reverse;
  gap:4px;
  font-size:11px;
  color:var(--ink-dim);
}
.event-log-list div{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.event-log-list .log-hazard{color:var(--accent-warn);}
.event-log-list .log-good{color:var(--accent-food);}

/* scrollbars, kept plain */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-track{background:var(--panel);}
::-webkit-scrollbar-thumb{background:var(--line-strong);}

@media (max-width: 640px){
  #hud-bottom{flex-direction:column; height:auto; max-height:40vh;}
  .build-menu{width:100%; border-right:none; border-bottom:1px solid var(--line);}
  .hud-resources{gap:12px;}
}

@media (prefers-reduced-motion: reduce){
  .event-banner{transition:none;}
}