/* ============================================================
   Self-hosted fonts. (Unchanged — CSP blocks the Google CDN.)
   ============================================================ */
@font-face { font-family:'Cinzel'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/cinzel-500.woff2') format('woff2'); }
@font-face { font-family:'Cinzel'; font-style:normal; font-weight:700; font-display:swap; src:url('../assets/fonts/cinzel-700.woff2') format('woff2'); }
@font-face { font-family:'Cinzel'; font-style:normal; font-weight:900; font-display:swap; src:url('../assets/fonts/cinzel-900.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/spectral-400.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:italic; font-weight:400; font-display:swap; src:url('../assets/fonts/spectral-400italic.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/spectral-500.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/spectral-600.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/jbmono-400.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/jbmono-600.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('../assets/fonts/jbmono-700.woff2') format('woff2'); }

/* ============================================================
   Design tokens
   ============================================================ */
:root {
  --ink: #1b1712;
  --ink-raised: #241f19;
  --parchment: #ead9b3;
  --parchment-dark: #d9c496;
  --stone: #4a423a;
  --stone-light: #6b5f52;
  --bronze: #b8843e;
  --bronze-bright: #d6a45c;
  --forest: #5c7a4a;
  --blood: #a34a35;
  --text-light: #f1e6cc;
  --text-muted: #b8a988;

  /* Single source of truth for the two right-hand panels (build queue in the
     stage, resource production in the bottom dock). Both read this, so their
     left and right edges line up in one vertical column. */
  --panel-w: 260px;
  --shell-pad: 0.45rem;
  /* Both right-hand panels sit this far in from the right edge, so they stay
     in one column while closing half the gap to the playfield / chat. */
  --panel-shift: 5px;
}

* { box-sizing: border-box; }

/* The game shell is a UI, not a document: clicking the board, labels, panels
   or headings should never drop a text caret or start a text selection.
   Real inputs opt back in below. */
.game-screen, .overlay, .modal-backdrop {
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}
/* ONLY real form fields opt back in. The chat log, its messages, headings and
   every other run of text in the shell stay unselectable, so clicking them
   can't drop a caret. */
.game-screen input, .game-screen textarea, .game-screen select,
.overlay input, .overlay textarea, .overlay select,
.modal-backdrop input, .modal-backdrop textarea, .modal-backdrop select {
  -webkit-user-select: text;
  user-select: text;
}
.chat-log, .chat-log *, .chat-empty, .chat-line { -webkit-user-select: none; user-select: none; cursor: default; }
.game-screen input[type="text"], .game-screen input[type="password"], .game-screen textarea,
.overlay input[type="text"], .overlay textarea { cursor: text; }
.game-screen input[type="range"] , .modal-backdrop input[type="range"] { cursor: pointer; }

html, body {
  margin: 0; padding: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--text-light);
  font-family: 'Spectral', serif;
}

img { image-rendering: auto; }
.hidden { display: none !important; }

h1, h2, h3, h4 { font-family: 'Cinzel', serif; margin: 0; }
button { font-family: inherit; cursor: pointer; }

.btn {
  border: none; border-radius: 4px;
  padding: 0.7em 1.4em;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  transition: transform 0.1s ease, filter 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-tiny { padding: 0.42em 0.9em; font-size: 0.68rem; }

.btn-primary {
  background: linear-gradient(180deg, var(--bronze-bright), var(--bronze));
  color: #241705;
  box-shadow: 0 2px 0 #7a5222, 0 4px 8px rgba(0,0,0,0.35);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }

.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--stone-light); }
.btn-ghost:hover { color: var(--text-light); border-color: var(--bronze); }

.btn-danger {
  background: linear-gradient(180deg, #b6503b, var(--blood));
  color: #f6e7df;
  box-shadow: 0 2px 0 #5f2418;
}
.btn-danger:hover:not(:disabled) { filter: brightness(1.08); }

/* ============================================================
   Auth screen (unchanged)
   ============================================================ */
.auth-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at top, rgba(184,132,62,0.10), transparent 60%), var(--ink);
  padding: 2rem;
}
.auth-card {
  width: 100%; max-width: 380px;
  background: var(--ink-raised); border: 1px solid var(--stone);
  border-radius: 10px; padding: 2.2rem 2rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5); text-align: center;
}
.auth-crest img { width: 40px; height: 40px; filter: drop-shadow(0 0 8px rgba(214,164,92,0.5)); }
.auth-crest { color: var(--bronze-bright); margin-bottom: 0.5rem; }
.auth-title { font-size: 2rem; letter-spacing: 0.08em; color: var(--bronze-bright); margin-bottom: 0.3rem; }
.auth-subtitle { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 1.5rem; font-style: italic; }
.auth-tabs { display: flex; border-bottom: 1px solid var(--stone); margin-bottom: 1.4rem; }
.auth-tab {
  flex: 1; background: none; border: none; color: var(--text-muted);
  padding: 0.6rem 0; font-family: 'Cinzel', serif; font-size: 0.75rem;
  letter-spacing: 0.03em; text-transform: uppercase; border-bottom: 2px solid transparent;
}
.auth-tab.active { color: var(--bronze-bright); border-bottom-color: var(--bronze); }
.auth-form { display: none; flex-direction: column; gap: 0.9rem; text-align: left; }
.auth-form.active { display: flex; }
.auth-form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.auth-form input {
  font-family: 'Spectral', serif; font-size: 1rem;
  background: var(--ink); border: 1px solid var(--stone-light);
  border-radius: 4px; color: var(--text-light); padding: 0.6em 0.7em;
}
.auth-form input:focus { outline: none; border-color: var(--bronze); }
.auth-error { color: var(--blood); font-size: 0.82rem; min-height: 1.1em; margin: -0.3rem 0 0; }
.auth-form .btn { margin-top: 0.4rem; }

/* ============================================================
   Game shell — full-height column
   ============================================================ */
.game-screen {
  height: 100vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}

.game-titlebar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.02rem 1rem 0.88rem;
  background: linear-gradient(180deg, #251f18, #1b1712);
  border-bottom: 1px solid rgba(184,132,62,0.45);
  flex-shrink: 0;
}
.game-title {
  font-size: 1.24rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze-bright);
  text-align: center;
}

/* ---- Top bar ---- */
.topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 68px;
  padding: 0.52rem 11.5rem 0.48rem 11.5rem;
  background: linear-gradient(180deg, #2a241d, #1b1712);
  border-bottom: 2px solid var(--bronze);
  flex-shrink: 0;
}
.topbar-brand { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.brand-crest { width: 30px; height: 30px; filter: drop-shadow(0 0 6px rgba(214,164,92,0.4)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand-title { font-family: 'Cinzel', serif; font-weight: 900; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.brand-realm { font-family: 'Cinzel', serif; font-size: 1.05rem; color: var(--bronze-bright); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topnav { display: flex; justify-content: center; gap: 0.3rem; flex-wrap: wrap; min-width: 0; margin: 0 auto; }
.topnav-btn {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--text-muted); padding: 0.24rem 0.68rem; min-width: 58px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.topnav-btn img { width: 20px; height: 20px; opacity: 0.85; }
.topnav-btn span { font-family: 'Cinzel', serif; font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; }
.topnav-btn:hover { background: rgba(184,132,62,0.12); color: var(--text-light); border-color: rgba(184,132,62,0.35); }
.topnav-badge {
  position: absolute; top: 0; right: 6px;
  background: var(--blood); color: #fff; font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem; font-weight: 700; line-height: 1;
  padding: 2px 5px; border-radius: 10px;
}

.topbar-identity { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 0.7rem; }
.identity-meta { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.identity-name { font-family: 'Cinzel', serif; font-size: 0.9rem; color: var(--text-light); }
.identity-stats { display: flex; gap: 0.6rem; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--text-muted); }
.identity-stat { display: inline-flex; align-items: center; gap: 3px; }
.identity-stat b { color: var(--bronze-bright); }
.identity-stat img { width: 12px; height: 12px; }
.identity-avatar {
  width: 40px; height: 40px; border-radius: 8px;
  border: 2px solid var(--bronze); background: var(--ink);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 0 10px rgba(184,132,62,0.25);
}
.identity-avatar img { width: 24px; height: 24px; }

/* ---- Resource strip ---- */
.resource-strip {
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.4rem 0.9rem 0.36rem;
  background: linear-gradient(180deg, #201b15, #191510);
  border-bottom: 1px solid var(--stone);
  flex-shrink: 0;
}
.resource { display: flex; align-items: center; gap: 0.4rem; font-family: 'JetBrains Mono', monospace; }
.resource img { width: 18px; height: 18px; }
.resource-amount { font-size: 0.9rem; font-weight: 600; color: var(--text-light); }
.resource-sub { color: var(--text-muted); font-size: 0.78rem; }
.resource-rate { font-size: 0.68rem; color: var(--forest); }
.resource-divider { width: 1px; height: 22px; background: var(--stone-light); opacity: 0.6; }
.resource-cap { color: var(--text-muted); }
.resource-cap span { color: var(--text-muted); font-size: 0.85rem; }
.resource-happiness .resource-amount { color: var(--bronze-bright); }
.resource-happiness .resource-rate { color: var(--text-muted); }

/* ============================================================
   Stage region (view tabs + big scene + queue dock)
   ============================================================ */
.stage-region {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: 0.16rem var(--shell-pad) 0.16rem;
}

.view-tabs { display: flex; gap: 0.3rem; flex-shrink: 0; margin-bottom: 0.16rem; }
.view-tab {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--ink-raised); border: 1px solid var(--stone);
  border-bottom: none; border-radius: 8px 8px 0 0;
  color: var(--text-muted); padding: 0.3rem 0.92rem;
  font-family: 'Cinzel', serif; font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase;
  transition: color 0.15s ease, background 0.15s ease;
}
.view-tab img { width: 16px; height: 16px; opacity: 0.8; }
.view-tab:hover { color: var(--text-light); }
.view-tab.active { color: var(--ink); background: linear-gradient(180deg, var(--bronze-bright), var(--bronze)); border-color: var(--bronze); }
.view-tab.active img { opacity: 1; filter: brightness(0) saturate(100%); }

.stage {
  position: relative; flex: 1; min-height: 0;
  display: flex; align-items: stretch; justify-content: stretch;
  background: linear-gradient(180deg, #221d17, #17130f);
  border: 1px solid var(--stone); border-radius: 4px 8px 8px 8px;
  overflow: hidden;
}

/* Each view fills the stage; only the active one shows. */
.stage-view {
  position: absolute; inset: 0;
  display: none;
  align-items: stretch;
  justify-content: center;
  padding: 0.1rem 0.6rem;
}
.stage-view.active { display: flex; }
#view-map.stage-view.active {
  align-items: center;
  justify-content: center;
}

/* Scene box. The diamond inside it is computed in JS from these pixel
   dimensions, so this just has to be a stable box — no aspect assumptions. */
.zone-scene {
  position: relative;
  width: min(100%, calc(100% - 520px));
  height: 100%;
  margin: 0 auto;
  border-radius: 8px;
  border: 3px solid var(--stone);
  background: linear-gradient(180deg, #2a2620, #1f1c17);
  overflow: hidden;
}

.wall-segments { position: absolute; inset: 0; z-index: 55; }
/* left/top/width/transform are all set from JS (buildWallSegments) — the ring
   is pixel-placed on a true 2:1 diamond, so nothing here may fight it.

   The shadow must be a CONTACT shadow, not a cast one. The old
   drop-shadow(2px 4px 3px) threw a soft dark band 4px BELOW each block. On the
   near walls that lands on the backdrop and is invisible, but on the far walls
   (top-left / top-right) the grass sits directly under the base, so the band fell
   on the turf and read as the wall hovering above the ground. Tight offset, tight
   blur: the stone now meets the grass. */
.wall-segment {
  position: absolute;
  height: auto;
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.38));
  cursor: pointer; transition: filter 0.15s ease;
}
.wall-segment:hover { filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.38)) brightness(1.15); }

/* Positioned from JS at the diamond's top vertex. */
.wall-level-tag {
  position: absolute;
  background: rgba(20,16,11,0.86); border: 1px solid rgba(184,132,62,0.4);
  border-radius: 4px; padding: 1px 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.65rem;
  color: var(--bronze-bright); white-space: nowrap; z-index: 61; pointer-events: none;
}

.zone-backdrop {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,0.58) 100%),
    radial-gradient(circle at 18% 24%, rgba(133,122,86,0.22), transparent 22%),
    radial-gradient(circle at 78% 72%, rgba(69,61,42,0.18), transparent 24%),
    linear-gradient(180deg, #766d54, #625a45);
  background-size: cover, cover, cover, cover;
  background-repeat: no-repeat;
}

/* The turf plate. left/top/width/height are overwritten by JS (applyGround)
   so the green diamond is exactly the wall diamond, inflated by half a wall
   segment. The values below are only a pre-paint fallback. */
.zone-ground {
  position: absolute; left: 4%; top: 8%;
  width: 92%; height: 84%;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background-image:
    radial-gradient(circle at 26% 30%, rgba(122,177,101,0.12), transparent 30%),
    radial-gradient(circle at 72% 66%, rgba(34,78,36,0.14), transparent 34%),
    linear-gradient(180deg, #4f934f 0%, #4f934f 100%);
  background-size: cover, cover, cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 55px rgba(0,0,0,0.22);
}

.zone-content { position: absolute; inset: 0; }

.tree-decor {
  position: absolute; image-rendering: pixelated; pointer-events: none;
  filter: drop-shadow(2px 3px 2px rgba(0,0,0,0.4));
  transform: translate(-50%, -100%);
}

.iso-object { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; }
.iso-shadow {
  position: absolute; bottom: -4px; left: 50%; width: 70%; height: 22%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0,0,0,0.45), transparent 75%); z-index: -1;
}

.zone-anchor { cursor: pointer; transition: filter 0.15s ease; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; }
.zone-anchor:hover { filter: brightness(1.15); }
.zone-anchor .anchor-icon { width: 100%; height: auto; filter: drop-shadow(3px 5px 3px rgba(0,0,0,0.55)); }
.zone-anchor.is-building { position: relative; }
.zone-anchor.is-building::before {
  content: 'Building'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--forest); color: #0e150c; font-size: 0.55rem;
  font-family: 'JetBrains Mono', monospace; padding: 1px 6px; border-radius: 3px; font-weight: 700; z-index: 2; white-space: nowrap;
}

.plot-tile { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; cursor: pointer; transition: filter 0.15s ease; }
.plot-tile:hover { filter: brightness(1.15); }
.plot-tile.not-built { opacity: 0.9; }
.plot-tile.locked { cursor: default; opacity: 0.5; }
.plot-tile.locked:hover { filter: none; }
.plot-icon-wrap { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.plot-tile img.tile-icon { max-width: 100%; max-height: 100%; filter: drop-shadow(3px 4px 3px rgba(0,0,0,0.5)); }
/* Empty / locked plots are floor plates, so they have to lie ON the iso grid,
   not float as screen-aligned squares. A 65px square rotated 45deg and then
   squashed to half height is a diamond 92 x 46 — exactly the 2:1 of the ground
   and the walls. The glyph on top is NOT transformed, so it stays readable. */
.plot-plate-wrap {
  position: relative;
  width: 92px;
  height: 23px; /* half the plate: the wrap's base sits on the plate's CENTRE,
                   which is where a building on this tile would stand */
  overflow: visible;
}
.iso-plate {
  position: absolute; left: 50%; bottom: 0;
  width: 65px; height: 65px;
  margin-left: -32.5px; margin-bottom: -32.5px;
  transform: scaleY(0.5) rotate(45deg);
  border: 2px dashed rgba(184,132,62,0.55);
  background: rgba(20,16,11,0.35);
}
.iso-plate-locked {
  border-color: rgba(120,110,95,0.45);
  background: rgba(20,16,11,0.45);
}
.plate-glyph {
  position: absolute; left: 50%; bottom: 2px;
  transform: translateX(-50%);
  font-size: 1.15rem; line-height: 1; z-index: 2; pointer-events: none;
}
.plate-glyph-plus {
  font-family: 'Cinzel', serif; font-size: 1.5rem; color: rgba(184,132,62,0.8);
}
/* plate tiles anchor on the plate centre, so the caption must clear its lower half */
.plot-tile.has-plate .tile-caption { margin-top: 26px; }
.tile-resource-badge {
  position: absolute; top: -4px; right: -6px; width: 20px; height: 20px;
  background: var(--ink-raised); border: 1.5px solid var(--bronze); border-radius: 50%; padding: 3px; box-sizing: border-box;
}
.tile-resource-badge .badge-icon {
  width: 100%; height: 100%; background-color: var(--bronze-bright);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
/* The caption hangs BELOW the icon and is taken out of flow, so a tile's
   height is exactly its icon height. That makes the transform anchor
   (translate -100% y) land on the base of the icon rather than the base of
   the icon+label+progress stack — which is why a 52px locked plot used to
   float at a different height from a 100px cottage on the same iso row.
   Every tile now stands on its diamond point regardless of what's in it. */
.tile-caption {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin-top: 2px; pointer-events: none;
}
.tile-label {
  background: rgba(20,16,11,0.86); border: 1px solid rgba(184,132,62,0.4);
  border-radius: 4px; padding: 1px 7px; text-align: center; white-space: nowrap;
}
.tile-name { font-family: 'Cinzel', serif; font-size: 0.62rem; letter-spacing: 0.02em; color: var(--text-light); display: block; }
.tile-level { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: var(--bronze-bright); display: block; }
.tile-level.locked-text { color: var(--text-muted); }
.tile-building-badge {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: var(--forest); color: #0e150c; font-size: 0.52rem;
  font-family: 'JetBrains Mono', monospace; padding: 1px 6px; border-radius: 3px; font-weight: 700; white-space: nowrap; z-index: 2;
}
.tile-progress-track { position: relative; width: 52px; height: 4px; background: rgba(0,0,0,0.55); border-radius: 3px; overflow: hidden; }
.tile-progress-fill { height: 100%; background: var(--bronze-bright); width: 0%; }

/* Map placeholder */
.map-placeholder {
  max-width: 460px; text-align: center; color: var(--text-muted);
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem; padding: 2rem;
}
.map-placeholder img { width: 54px; height: 54px; opacity: 0.5; }
.map-placeholder h3 { color: var(--bronze-bright); font-size: 1.2rem; }
.map-placeholder p { font-size: 0.9rem; line-height: 1.6; margin: 0; }

/* Build queue dock — same width as the supply panel below it, and flush to
   the stage's inner right edge, which sits in the same column as the supply
   panel's right edge. The two now read as one stacked column. */
.queue-dock {
  position: absolute; right: var(--panel-shift); bottom: 8px;
  width: var(--panel-w); max-width: calc(100% - 16px);
  background: var(--parchment); color: #2c2416;
  border: 1px solid var(--parchment-dark); border-radius: 8px;
  padding: 0.6rem 0.8rem; box-shadow: 0 10px 24px rgba(0,0,0,0.4); z-index: 40;
}
.queue-dock-label {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: 'Cinzel', serif; font-size: 0.72rem; color: #4a3a1a;
  border-bottom: 1px solid var(--parchment-dark); padding-bottom: 0.35rem; margin-bottom: 0.4rem;
}
.queue-dock-label img { width: 15px; height: 15px; }
.queue-empty { font-size: 0.78rem; font-style: italic; color: #6b5a3a; margin: 0.2rem 0; }
.queue-item { display: flex; flex-direction: column; gap: 0.3rem; }
.queue-item-name { font-family: 'Cinzel', serif; font-size: 0.82rem; }
.queue-item-target { font-size: 0.72rem; color: #6b5a3a; }
.queue-timer { font-family: 'JetBrains Mono', monospace; font-size: 1.15rem; font-weight: 700; color: #6b3a1a; }
.queue-progress-track { height: 7px; background: rgba(0,0,0,0.15); border-radius: 4px; overflow: hidden; }
.queue-progress-fill { height: 100%; background: linear-gradient(90deg, var(--bronze), var(--forest)); width: 0%; transition: width 0.3s linear; }

/* ============================================================
   Bottom dock: chat + supply
   ============================================================ */
.bottom-dock {
  flex-shrink: 0;
  display: flex; gap: 0.4rem;
  height: 236px;
  padding: 0.35rem var(--shell-pad) 0.5rem;
  background: linear-gradient(180deg, #1b1712, #15110d);
  border-top: 2px solid var(--bronze);
}

.chat-panel {
  flex: 1; min-width: 0;
  background: var(--ink-raised); border: 1px solid var(--stone); border-radius: 8px;
  display: flex; flex-direction: column; overflow: hidden;
}
.chat-tabs { display: flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--stone); }
.chat-tab {
  background: none; border: none; color: var(--text-muted);
  font-family: 'Cinzel', serif; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.25rem 0.7rem; border-radius: 5px;
}
.chat-tab.active { color: var(--ink); background: linear-gradient(180deg, var(--bronze-bright), var(--bronze)); }
.chat-note { margin-left: auto; font-size: 0.64rem; font-style: italic; color: var(--stone-light); padding-right: 0.3rem; }
.chat-log { flex: 1; overflow-y: auto; padding: 0.4rem 0.7rem; font-size: 0.82rem; line-height: 1.5; }
.chat-empty { color: var(--text-muted); font-style: italic; font-size: 0.8rem; }
.chat-line { margin-bottom: 0.2rem; }
.chat-who { color: var(--bronze-bright); font-weight: 600; }
.chat-text { color: var(--text-light); }
.chat-input-row { display: flex; gap: 0.4rem; padding: 0.4rem 0.5rem; border-top: 1px solid var(--stone); }
.chat-input-row input {
  flex: 1; background: var(--ink); border: 1px solid var(--stone-light); border-radius: 5px;
  color: var(--text-light); font-family: 'Spectral', serif; font-size: 0.88rem; padding: 0.4em 0.6em;
}
.chat-input-row input:focus { outline: none; border-color: var(--bronze); }

/* Same width as the queue dock, and the flex row ends at the same right edge,
   so the two panels share one column. */
.supply-panel {
  width: var(--panel-w); flex-shrink: 0;
  /* +1px cancels the stage's 1px border above, so this panel's right edge
     lands on the exact same pixel column as the build queue's. */
  margin-right: calc(var(--panel-shift) + 1px);
  background: var(--parchment); color: #2c2416; border: 1px solid var(--parchment-dark);
  border-radius: 8px; padding: 0.6rem 0.85rem 0.7rem; overflow-y: hidden;
}
.supply-title {
  font-size: 0.8rem; color: #4a3a1a; text-transform: uppercase; letter-spacing: 0.05em;
  text-align: center;
  border-bottom: 1px solid var(--parchment-dark); padding-bottom: 0.35rem; margin-bottom: 0.45rem;
}
.supply-grid { display: flex; flex-direction: column; gap: 0.28rem; }
.supply-row { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 0.45rem; padding: 0.08rem 0; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; }
.supply-row img { width: 16px; height: 16px; margin-top: 1px; }
.supply-amt { color: #2c2416; font-weight: 600; }
.supply-sub { color: #7c6a44; font-weight: 400; }
.supply-rate { font-size: 0.74rem; text-align: right; }
.supply-rate.pos { color: #3f6b34; }
.supply-rate.neg { color: var(--blood); }
.supply-rate.zero { color: #8a774f; }
.supply-divider { height: 1px; background: var(--parchment-dark); margin: 0.3rem 0 0.1rem; }

/* ============================================================
   Overlays (top-nav panels)
   ============================================================ */
.overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(10,8,5,0.72);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.overlay-card {
  position: relative; width: 100%; max-width: 440px;
  background: var(--ink-raised); border: 1px solid var(--bronze); border-radius: 10px;
  padding: 1.6rem 1.8rem; box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.overlay-card-wide { max-width: 720px; }
.overlay-close { position: absolute; top: 0.6rem; right: 0.9rem; background: none; border: none; color: var(--text-muted); font-size: 1.6rem; line-height: 1; }
.overlay-close:hover { color: var(--text-light); }
.overlay-title { color: var(--bronze-bright); font-size: 1.3rem; margin-bottom: 1rem; }
.overlay-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.8rem; padding: 1.5rem 0.5rem; color: var(--text-muted); }
.overlay-empty img { width: 46px; height: 46px; opacity: 0.5; }
.overlay-empty p { font-size: 0.9rem; line-height: 1.6; margin: 0; max-width: 320px; }

/* Info / credits panel */
.info-body { color: var(--text-muted); }
.info-lead { font-size: 0.92rem; line-height: 1.6; margin: 0 0 1.2rem; }
.info-subhead { color: var(--bronze-bright); font-size: 0.95rem; letter-spacing: 0.03em; text-transform: uppercase; margin: 0 0 0.6rem; }
.credits-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.credits-list li { font-size: 0.86rem; line-height: 1.55; padding-left: 0.9rem; border-left: 2px solid var(--stone); }
.credit-what { color: var(--text-light); font-family: 'Cinzel', serif; font-size: 0.82rem; }
.credits-list b { color: var(--text-light); font-weight: 600; }
.credits-list a { color: var(--bronze-bright); text-decoration: none; }
.credits-list a:hover { text-decoration: underline; }
.info-fineprint { font-size: 0.76rem; font-style: italic; color: var(--stone-light); margin: 0; }

/* Messages (KoC-style) */
.msg-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--bronze); margin-bottom: 0.8rem; flex-wrap: wrap; }
.msg-tab {
  background: var(--ink); border: 1px solid var(--stone); border-bottom: none;
  color: var(--text-muted); padding: 0.4rem 0.9rem;
  font-family: 'Cinzel', serif; font-size: 0.72rem; border-radius: 5px 5px 0 0;
}
.msg-tab.active { background: linear-gradient(180deg, var(--bronze-bright), var(--bronze)); color: var(--ink); }
.msg-pane { display: none; }
.msg-pane.active { display: block; }
.msg-toolbar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.msg-actions { background: var(--ink); color: var(--text-light); border: 1px solid var(--stone-light); border-radius: 4px; padding: 0.3rem 0.4rem; font-family: 'Spectral', serif; font-size: 0.8rem; }
.msg-toolbar-right { margin-left: auto; display: flex; gap: 0.8rem; }
.msg-link { color: var(--bronze-bright); font-size: 0.8rem; text-decoration: none; }
.msg-link:hover { text-decoration: underline; }
.msg-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.msg-table thead th {
  text-align: left; font-family: 'Cinzel', serif; font-size: 0.72rem; color: var(--text-muted);
  border-bottom: 1px solid var(--stone); padding: 0.4rem 0.5rem; text-transform: uppercase; letter-spacing: 0.03em;
}
.msg-table td { padding: 0.45rem 0.5rem; border-bottom: 1px solid rgba(74,66,58,0.5); color: var(--text-light); }
.msg-check { width: 34px; text-align: center; }
.msg-from { color: var(--bronze-bright); }
.msg-unread td { font-weight: 600; }
.msg-empty { color: var(--text-muted); font-style: italic; padding: 1.4rem 0.5rem; text-align: center; }
.msg-compose { display: flex; flex-direction: column; gap: 0.7rem; }
.msg-field { display: flex; align-items: center; gap: 0.6rem; }
.msg-field span { width: 60px; color: var(--text-muted); font-size: 0.82rem; }
.msg-field input { flex: 1; background: var(--ink); border: 1px solid var(--stone-light); border-radius: 4px; color: var(--text-light); font-family: 'Spectral', serif; font-size: 0.9rem; padding: 0.45em 0.6em; }
.msg-compose textarea { background: var(--ink); border: 1px solid var(--stone-light); border-radius: 4px; color: var(--text-light); font-family: 'Spectral', serif; font-size: 0.9rem; padding: 0.6em; resize: vertical; }
.msg-field input:focus, .msg-compose textarea:focus { outline: none; border-color: var(--bronze); }
.msg-compose-actions { display: flex; align-items: center; gap: 0.8rem; }
.msg-compose-note { color: var(--blood); font-size: 0.8rem; }

/* ============================================================
   Choose-a-building grid + tax control (modal — unchanged)
   ============================================================ */
.choose-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; margin-bottom: 0.6rem; }
.choose-option {
  background: var(--ink); border: 1px solid var(--stone-light); border-radius: 6px;
  padding: 0.7rem; display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  cursor: pointer; text-align: center; transition: border-color 0.15s ease;
}
.choose-option:hover { border-color: var(--bronze-bright); }
.choose-option img { width: 44px; height: 44px; }
.choose-option-name { font-family: 'Cinzel', serif; font-size: 0.78rem; color: var(--text-light); }
.choose-option-cost { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--text-muted); }
.modal-tax-hint { color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; margin: 0 0 0.8rem; }
.tax-control { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.5rem; }
.tax-control input[type="range"] { flex: 1; accent-color: var(--bronze); }
.tax-value { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--bronze-bright); min-width: 3.5ch; text-align: right; }
.tax-preview { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: var(--forest); margin: 0 0 1rem; }

/* ============================================================
   Building detail modal (unchanged)
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10,8,5,0.7);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem;
}
.modal-card {
  position: relative; width: 100%; max-width: 420px;
  background: var(--ink-raised); border: 1px solid var(--bronze); border-radius: 10px;
  padding: 1.8rem; box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.modal-close { position: absolute; top: 0.7rem; right: 0.9rem; background: none; border: none; color: var(--text-muted); font-size: 1.6rem; line-height: 1; }
.modal-close:hover { color: var(--text-light); }
.modal-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.8rem; }
.modal-header img { width: 56px; height: 56px; }
#modal-name { color: var(--bronze-bright); font-size: 1.3rem; }
.modal-level { margin: 0.2rem 0 0; font-family: 'JetBrains Mono', monospace; color: var(--text-muted); font-size: 0.85rem; }
.modal-description { color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; margin: 0 0 1rem; }
.modal-production { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: var(--forest); margin-bottom: 1rem; }
.modal-subhead { font-size: 0.85rem; color: var(--text-light); margin-bottom: 0.6rem; }
.modal-cost { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; font-family: 'JetBrains Mono', monospace; font-size: 0.88rem; }
.modal-cost span.insufficient { color: var(--blood); }
.modal-cost span.sufficient { color: var(--text-light); }
.modal-time { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 1rem; }
.modal-error { color: var(--blood); font-size: 0.85rem; min-height: 1.1em; }
.modal-maxed { color: var(--text-muted); font-style: italic; font-size: 0.9rem; }
#modal-upgrade-btn { width: 100%; }

/* ============================================================
   Toast
   ============================================================ */
.toast {
  position: fixed; bottom: 278px; left: 50%; transform: translateX(-50%) translateY(10px);
  background: var(--ink-raised); border: 1px solid var(--bronze); color: var(--text-light);
  padding: 0.6rem 1.1rem; border-radius: 6px; font-size: 0.85rem; z-index: 1200;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  :root { --panel-w: 230px; }
  .topbar {
    position: static;
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 0.35rem;
    min-height: 0;
    padding: 0.22rem 0.9rem;
  }
  .topnav { order: 3; grid-column: 1 / -1; margin: 0; }
  .topbar-identity { position: static; transform: none; }
  .zone-scene { width: 100%; }
  .queue-dock { right: var(--panel-shift); bottom: 8px; width: var(--panel-w); }
  .bottom-dock { height: 208px; flex-direction: column; }
  .supply-panel { width: 100%; height: 78px; }
  .supply-grid { flex-flow: row wrap; gap: 0.2rem 1rem; }
}