:root {
  --bg-panel: rgba(24, 28, 26, 0.94);
  --bg-panel-light: rgba(40, 46, 42, 0.96);
  --fg: #e8e2d0;
  --fg-dim: #a89f88;
  --accent: #f0b35c;
  --accent2: #6ecf8e;
  --danger: #e07a5f;
  --locked: #6b655a;
  font-size: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { width: 100%; height: 100%; overflow: hidden; background: #07131c; }

body {
  font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  color: var(--fg);
  user-select: none;
}

#app { position: relative; width: 100%; height: 100%; }
#scene {
  position: absolute; inset: 0; display: block;
  touch-action: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* cinematic vignette + subtle grade — pure CSS, zero GPU shader cost */
#vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
  display: none;
  background:
    radial-gradient(ellipse 130% 110% at 50% 42%, rgba(0,0,0,0) 58%, rgba(10,16,20,0.34) 100%),
    linear-gradient(rgba(255,214,150,0.05), rgba(0,0,0,0));
}

.hud { position: absolute; z-index: 10; }
.hidden { display: none !important; }

/* no backdrop-filter on always-visible panels: blurring a canvas that
   repaints every frame forces continuous compositor work */
.panel {
  background: var(--bg-panel);
  border: 1px solid rgba(240, 179, 92, 0.25);
  border-radius: 10px;
  padding: 9px 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(240, 179, 92, 0.25); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

#hud-left .panel-title { cursor: pointer; user-select: none; }
.panel.collapsed > :not(.panel-title) { display: none !important; }
.panel.collapsed .panel-title { margin-bottom: 0; }

.panel-title {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

button {
  font-family: inherit;
  background: var(--bg-panel-light);
  color: var(--fg);
  border: 1px solid rgba(240, 179, 92, 0.35);
  border-radius: 5px;
  padding: 4px 9px;
  cursor: pointer;
  font-size: 13px;
}
button:hover { background: rgba(240, 179, 92, 0.25); }
button:disabled { opacity: 0.45; cursor: default; }
button.active { background: var(--accent); color: #20180c; font-weight: 700; }

select {
  font-family: inherit;
  background: var(--bg-panel-light);
  color: var(--fg);
  border: 1px solid rgba(240, 179, 92, 0.35);
  border-radius: 5px;
  padding: 3px 5px;
}

/* ---- Left column: village + resources cards, labor ---- */
#hud-left {
  top: 10px; left: 10px;
  width: 232px;
  display: flex; flex-direction: column; gap: 8px;
  max-height: calc(100vh - 210px);
}

#village-body .vc-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2px 0;
  font-size: 13px;
}
#village-body .vc-row .v { color: var(--accent2); font-variant-numeric: tabular-nums; }
#village-body .vc-row.warn .v { color: var(--danger); }

#resbar { display: flex; flex-direction: column; max-height: 34vh; overflow-y: auto; }
.res-item {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.res-item .res-ico { font-size: 15px; width: 20px; text-align: center; }
.res-item .res-name { flex: 1; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-item .res-val { text-align: right; }
.res-item .res-rate { font-size: 10px; min-width: 38px; text-align: right; color: var(--fg-dim); }
.res-item .res-rate.up { color: var(--accent2); }
.res-item .res-rate.down { color: var(--danger); }
.res-item.res-low .res-val { color: var(--danger); }
.res-store {
  display: flex; justify-content: space-between;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid rgba(240, 179, 92, 0.15);
  font-size: 11.5px; color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}

/* ---- Top-right: clock, speed, menu ---- */
#hud-topright {
  top: 10px; right: 10px;
  z-index: 45;   /* the menu popover must sit above toasts and tooltips */
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-panel);
  border: 1px solid rgba(240, 179, 92, 0.25);
  border-radius: 10px;
  padding: 6px 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
#clock { font-size: 13px; color: var(--fg); font-variant-numeric: tabular-nums; }
#speed-controls { display: flex; gap: 3px; }
#speed-controls button { padding: 3px 8px; font-size: 11px; }
#fps { font-size: 11px; color: var(--fg-dim); min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Build toolbar (nested, bottom-left) ---- */
#buildmenu { left: 10px; bottom: 10px; }
#buildlist { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
#buildcats, #buildsub {
  display: flex; gap: 6px;
  flex-wrap: wrap;
  max-width: calc(100vw - 20px);
  padding: 6px;
  background: var(--bg-panel);
  border: 1px solid rgba(240, 179, 92, 0.25);
  border-radius: 11px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.build-cat {
  width: 60px; height: 60px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
}
.build-cat .b-ico { font-size: 30px; }
.build-cat.active { background: rgba(240, 179, 92, 0.3); border-color: var(--accent); }
.build-entry {
  position: relative;
  width: 88px; height: 88px;
  padding: 6px 3px 4px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 8px;
}
.build-entry .b-ico { font-size: 38px; display: block; line-height: 1.15; }
.build-entry .b-name {
  font-weight: 600; font-size: 10.5px; color: var(--fg-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 82px;
}
.build-entry .b-badge {
  position: absolute; top: 3px; right: 4px;
  font-size: 10px; color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.25; text-align: right;
}
.build-entry.unaffordable .b-badge { color: var(--danger); }
.build-entry .b-cost, .build-entry .b-desc, .build-entry .b-locked { display: none; }
.build-entry.locked { opacity: 0.4; cursor: default; }
.build-entry.locked:hover { background: var(--bg-panel-light); }
.build-entry.unaffordable .b-cost { color: var(--danger); }
.build-entry.selected { outline: 2px solid var(--accent); }
.build-entry.sky-gift { border-color: var(--accent2); }
.lock-toggle {
  width: 34px; height: 34px;
  align-self: center;
  margin-left: 4px;
  padding: 0;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
}
.build-entry.sky-gift .b-cost { color: var(--accent2); }

/* ---- Labor panel (sits in the left card column) ---- */
#laborpanel { overflow-y: auto; }
.labor-row { display: flex; justify-content: space-between; align-items: center; padding: 2px 0; font-size: 12.5px; }
.labor-row .lr-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.labor-row .lr-ctl { display: flex; align-items: center; gap: 5px; }
.labor-row .lr-ctl button { padding: 0 7px; font-size: 13px; line-height: 1.4; }
.labor-row .lr-n { min-width: 34px; text-align: center; color: var(--accent2); font-variant-numeric: tabular-nums; }
.labor-foot { display: flex; justify-content: space-between; margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(240,179,92,0.15); font-size: 11.5px; color: var(--fg-dim); }
.labor-foot a { color: var(--accent); cursor: pointer; text-decoration: underline; }

/* ---- Menu popover ---- */
#btn-menu { font-size: 15px; padding: 2px 9px; }
#menu-pop {
  position: absolute; right: 0; top: 44px;
  display: flex; flex-direction: column; gap: 5px;
  width: 230px; z-index: 30;
}
#menu-pop button { text-align: left; }
#menu-pop label { font-size: 12px; color: var(--fg-dim); display: flex; justify-content: space-between; align-items: center; gap: 8px; white-space: nowrap; }
#menu-pop input[type="range"] { width: 92px; accent-color: var(--accent); }

/* ---- Right column: goal card stacked above the selection panel ---- */
#hud-right {
  right: 10px; top: 58px;
  width: 250px;
  display: flex; flex-direction: column; gap: 8px;
  max-height: calc(100vh - 240px);
}
#goalcard { flex-shrink: 0; }
#goal-body { font-size: 12.5px; line-height: 1.5; }
#goal-body .goal-n { color: var(--accent2); font-variant-numeric: tabular-nums; }

/* ---- Tools card ---- */
.tool-line { display: flex; justify-content: space-between; align-items: center; padding: 2px 0; font-size: 12.5px; }
.tool-line .tl-n { color: var(--accent2); font-variant-numeric: tabular-nums; }
.tools-foot { margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(240,179,92,0.15); font-size: 11.5px; text-align: right; }
.tools-foot a { color: var(--accent); cursor: pointer; text-decoration: underline; }

/* ---- Selection panel (lives in #hud-right, scrolls within the column) ---- */
#selpanel { overflow-y: auto; min-height: 0; }
#sel-close, #jobs-close, #hotkeys-close, #techtree-close { background: none; border: none; font-size: 16px; padding: 0 4px; color: var(--fg-dim); }
#sel-body { font-size: 13px; }
#sel-body .sel-row { margin-bottom: 5px; display: flex; justify-content: space-between; gap: 6px; }
#sel-body .sel-row .v { color: var(--accent2); font-variant-numeric: tabular-nums; text-align: right; }
#sel-body .sel-section { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(240,179,92,0.15); }
#sel-body .sel-note { font-size: 11px; color: var(--fg-dim); font-style: italic; margin-top: 4px; }
#sel-body progress { width: 100%; height: 8px; }
.worker-controls { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.worker-controls button { padding: 1px 9px; font-size: 14px; }
.recipe-btn { width: 100%; margin-top: 4px; text-align: left; font-size: 12px; }
.recipe-btn.active { background: rgba(110, 207, 142, 0.3); color: var(--fg); }
.offer-btn { width: 100%; margin-top: 6px; font-weight: 700; background: rgba(240, 179, 92, 0.2); }
.demolish-btn { width: 100%; margin-top: 8px; color: var(--danger); font-size: 11px; }

/* ---- Cargo / offering panel ---- */
#cargopanel { right: 10px; bottom: 118px; width: 250px; }
#cargo-body { font-size: 13px; }
#cargo-body .tier-name { font-weight: 700; color: var(--accent2); margin-bottom: 4px; }
#cargo-body .offer-req { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
#cargo-body .offer-req.met { color: var(--accent2); }
#cargo-body .offer-reward { font-size: 11px; color: var(--fg-dim); font-style: italic; margin-top: 4px; }
#cargo-body progress { width: 100%; height: 8px; margin-top: 4px; }

/* ---- Alerts (toasts, bottom right; newest nearest the corner) ---- */
#alerts {
  right: 10px; bottom: 10px;
  width: 250px;
  display: flex; flex-direction: column; gap: 4px;
  pointer-events: none;
}
/* slide left of the Sky Ritual panel when it occupies the corner */
#alerts.shifted { right: 270px; }
.alert {
  background: var(--bg-panel);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  animation: alert-in 0.25s ease-out;
  pointer-events: auto;
  cursor: pointer;
}
.alert.bad { border-left-color: var(--danger); }
.alert.good { border-left-color: var(--accent2); }
@keyframes alert-in { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- Chatter ---- */
#chatter {
  left: 10px; bottom: 200px;
  width: 330px;
  display: flex; flex-direction: column-reverse; gap: 4px;
  pointer-events: none;
}
.chat-line {
  background: rgba(16, 20, 18, 0.78);
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 12.5px;
  font-style: italic;
  color: #d9d2bd;
  animation: alert-in 0.3s ease-out;
}
.chat-line .who { font-style: normal; font-weight: 700; color: var(--accent); }
.chat-line.elder { border-left: 3px solid var(--accent); }

/* ---- Contextual prompt ---- */
#prompt {
  top: 14px; left: 50%; transform: translateX(-50%);
  max-width: 460px;
  background: var(--bg-panel);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; gap: 10px; align-items: center;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
#prompt-text { font-size: 13px; line-height: 1.45; }
#prompt-close { flex-shrink: 0; }

/* ---- Placement hint ---- */
#placehint {
  bottom: 130px; left: 50%; transform: translateX(-50%);
  background: var(--bg-panel);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--fg-dim);
}

/* ---- Build tooltip (instant, replaces native title) ---- */
#tooltip {
  z-index: 40;
  max-width: 260px;
  background: var(--bg-panel);
  border: 1px solid rgba(240, 179, 92, 0.4);
  border-radius: 8px;
  padding: 8px 10px;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  font-size: 12px;
}
#tooltip .tip-name { font-weight: 700; font-size: 13px; }
#tooltip .tip-cost { margin-top: 3px; font-variant-numeric: tabular-nums; }
#tooltip .tip-cost .short { color: var(--danger); }
#tooltip .tip-cost.tip-gift { color: var(--accent2); }
#tooltip .tip-desc { margin-top: 3px; color: var(--fg-dim); line-height: 1.4; }
#tooltip .tip-lock { margin-top: 4px; color: var(--accent); font-style: italic; line-height: 1.45; }

/* ---- Workers ---- */
#btn-jobs { display: none !important; }
#jobspanel { left: 250px; top: 10px; width: 260px; max-height: calc(100vh - 200px); overflow-y: auto; }

/* ---- Hotkeys panel ---- */
#hotkeyspanel {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 350px; max-height: min(80vh, 660px); overflow-y: auto;
  z-index: 40;
}
#hotkeys-body { font-size: 12.5px; }
.hk-help { font-size: 11px; color: var(--fg-dim); font-style: italic; margin-bottom: 6px; }
.hk-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 0; }
.hk-keys { display: flex; gap: 4px; }
.key-chip { min-width: 46px; padding: 2px 7px; font-size: 12px; text-align: center; }
.key-chip.unbound { opacity: 0.4; }
.key-chip.capturing { background: var(--accent); color: #20180c; font-weight: 700; }
.hk-sect {
  margin-top: 9px; padding-top: 6px; border-top: 1px solid rgba(240,179,92,0.15);
  color: var(--accent); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
}
.hk-row.hk-mouse { color: var(--fg-dim); font-size: 12px; }
.hk-fixed { color: var(--accent2); white-space: nowrap; }
.hk-foot { margin-top: 9px; display: flex; justify-content: flex-end; }

/* ---- Tech tree panel (Options → Tech tree) ---- */
#techtreepanel {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 430px; max-height: min(82vh, 700px); overflow-y: auto;
  z-index: 42;   /* above #mainmenu (40): reachable from the main-menu Options */
}
#techtreepanel.tt-wide { width: min(95vw, 1190px); }
#techtree-body { font-size: 12.5px; }
.tt-tabs { display: flex; gap: 6px; margin: 2px 0 6px; }
.tt-scroll { overflow-x: auto; }
.tt-svg { display: block; }
.tt-svg text { fill: var(--fg); font-size: 11.5px; font-family: inherit; }
.tt-svg .tt-edge { fill: none; stroke: rgba(232, 226, 208, 0.16); stroke-width: 1.5; }
.tt-svg .tt-edge.lit { stroke: rgba(110, 207, 142, 0.55); }
.tt-svg .tt-edge.cur { stroke: rgba(240, 179, 92, 0.65); }
.tt-svg .tt-edge.offer, .tt-svg .tt-edge.sky { stroke-dasharray: 4 3; }
.tt-svg .tt-eflame { font-size: 11px; }
.tt-svg .tt-eflame.dim { opacity: 0.35; }
.tt-svg .tt-node rect { fill: var(--bg-panel-light); stroke: rgba(240, 179, 92, 0.3); }
.tt-svg .tt-node.lit rect { stroke: rgba(110, 207, 142, 0.6); }
.tt-svg .tt-node.cur rect { stroke: var(--accent); }
.tt-svg .tt-node.dim { opacity: 0.45; }
.tt-svg .tt-node.gate rect { stroke-width: 2.5; }
.tt-svg .tt-nname { font-weight: 600; }
.tt-svg .tt-nsub { fill: var(--fg-dim); font-size: 10px; }
.tt-svg .tt-colt { font-weight: 700; fill: var(--accent); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.tt-svg .tt-cols { fill: var(--fg-dim); font-size: 10.5px; }
.tt-svg .tt-colt.dim, .tt-svg .tt-cols.dim { opacity: 0.5; }
.tt-help { font-size: 11px; color: var(--fg-dim); font-style: italic; margin: 4px 0 2px; line-height: 1.45; }
.tt-tier {
  margin-top: 7px;
  padding: 7px 9px;
  border: 1px solid rgba(240, 179, 92, 0.2);
  border-radius: 8px;
}
.tt-tier.done { border-color: rgba(110, 207, 142, 0.45); }
.tt-tier.current { border-color: var(--accent); background: rgba(240, 179, 92, 0.08); }
.tt-tier.future { opacity: 0.55; }
.tt-tier.failure { border-style: dashed; }
.tt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 700; }
.tt-status { font-size: 11px; white-space: nowrap; color: var(--fg-dim); }
.tt-tier.done .tt-status { color: var(--accent2); }
.tt-tier.done.failure .tt-status { color: var(--danger); }
.tt-tier.current .tt-status { color: var(--accent); }
.tt-offer { margin-top: 3px; font-size: 11.5px; color: var(--fg-dim); font-style: italic; line-height: 1.45; }
.tt-reward { margin-top: 3px; font-size: 12px; line-height: 1.4; }

/* ---- Confirmation dialog ---- */
#confirm-overlay {
  inset: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 8, 10, 0.55);
  backdrop-filter: blur(2px);
}
#confirm-box { width: 330px; padding: 14px; }
/* anchored mode: a small popover beside the clicked button, no dim screen */
#confirm-overlay.anchored { background: none; backdrop-filter: none; display: block; }
#confirm-overlay.anchored #confirm-box { position: absolute; width: 250px; padding: 10px 12px; }
#confirm-text { font-size: 13px; line-height: 1.5; margin: 4px 0 14px; }
#confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
#confirm-actions button { padding: 5px 14px; }
button.danger { border-color: rgba(224, 122, 95, 0.6); color: var(--danger); }
button.danger:hover { background: rgba(224, 122, 95, 0.2); }
#jobs-body { font-size: 12.5px; }
.job-row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid rgba(240,179,92,0.1); }
.job-row .jr-count { color: var(--accent2); font-variant-numeric: tabular-nums; }
.job-row.idle .jr-count { color: var(--fg-dim); }
.tool-row { display: flex; justify-content: space-between; padding: 2px 0; font-size: 12px; color: var(--fg-dim); }
.tool-row .relic { color: var(--accent); }

/* ---- Main menu (Banished-style, for the memes) ---- */
#mainmenu {
  position: absolute; inset: 0;
  z-index: 40;
  display: none;
  flex-direction: column; align-items: center;
}
#app.menu-open #mainmenu { display: flex; }
#mm-title {
  margin-top: 8vh;
  font-family: "Luminari", "Palatino", Georgia, serif;
  font-size: clamp(54px, 9vw, 104px);
  letter-spacing: 0.05em;
  background: linear-gradient(#ffe9a8 18%, #f0b35c 52%, #b97a2a 90%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(46, 26, 4, 0.9)) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6));
}
#mm-buttons {
  margin: auto 0;   /* vertically centered in the space below the title */
  display: flex; flex-direction: column; gap: 3px;
  width: 212px;
}
.mm-btn {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(rgba(66, 68, 63, 0.93), rgba(38, 40, 37, 0.93));
  border: 1px solid rgba(0, 0, 0, 0.75);
  outline: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  color: var(--fg);
  font-size: 15px;
  padding: 8px 13px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.5);
}
.mm-btn:hover { background: linear-gradient(rgba(88, 90, 84, 0.95), rgba(54, 56, 52, 0.95)); }
.mm-btn:disabled { opacity: 0.45; }
.mm-btn .ico { width: 19px; text-align: center; }
#mm-tagline {
  margin-bottom: 7vh;
  min-height: 22px;
  font-style: italic;
  color: var(--fg);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
#mm-version {
  position: absolute; left: 12px; bottom: 8px;
  font-size: 11px; color: var(--fg-dim);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* while the menu is up: hide the HUD but keep the scene, the options popover
   (reused from the in-game ☰ menu) and the confirmation dialog */
#app.menu-open .hud { display: none; }
#app.menu-open #confirm-overlay { display: flex; }
#app.menu-open #hotkeyspanel { display: block; }   /* reachable via Options → Hotkeys */
#app.menu-open #techtreepanel { display: block; }  /* reachable via Options → Tech tree */
#app.menu-open #hud-topright { display: flex; background: none; border-color: transparent; box-shadow: none; }
#app.menu-open #hud-topright > :not(#menu-pop) { visibility: hidden; }