html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0d1420;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

#app {
  position: absolute;
  inset: 0;
}

#app canvas {
  display: block;
}

#hud {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  background: rgba(10, 16, 28, 0.85);
  border: 1px solid #2a3a55;
  border-radius: 6px;
  color: #cdd8ea;
  font-size: 13px;
  line-height: 1.6;
  pointer-events: none;
  user-select: none;
}

#hud-title {
  color: #ffe066;
  font-weight: bold;
}

#hud-help {
  color: #6d7d99;
  font-size: 11px;
  max-width: 300px;
}

#hud-status {
  color: #8fd18f;
}

#hud-tile {
  white-space: pre-line;
  max-width: 340px;
}

#hud-diag {
  color: #7d94b8;
  font-size: 11px;
  white-space: pre-line;
  max-width: 300px;
}

#hud-diag:empty {
  display: none;
}

/* --- research bar (top center) --- */
#research-bar {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  height: 26px;
  background: rgba(10, 16, 28, 0.85);
  border: 1px solid #2a3a55;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  color: #cdd8ea;
  font-family: inherit;
  font-size: 12px;
  user-select: none;
}

#research-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: #24406b;
  transition: width 0.2s;
}

#research-label {
  position: relative;
  display: block;
  text-align: center;
  line-height: 26px;
  white-space: nowrap;
  overflow: hidden;
}

#research-bar:hover {
  border-color: #3b5d8f;
}

#research-glyph {
  position: absolute;
  left: 3px;
  top: 2px;
  width: 22px;
  height: 22px;
  z-index: 1;
  pointer-events: none;
}

/* A57: the left stack — a flex COLUMN anchored bottom-left. Panels are static
   flex children (order in the DOM: Controls, Map overlays, Turn log — the A45
   top→bottom order), so an expanded panel PUSHES its neighbors up instead of
   covering them; ui/left-stack.js keeps at most one open. */
#left-stack {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  z-index: 5;
}

/* --- collapsible help (top of the left stack) --- */
#help {
  max-height: 70vh;
  overflow-y: auto;
  background: rgba(10, 16, 28, 0.9);
  border: 1px solid #2a3a55;
  border-radius: 6px;
  color: #9db0cc;
  font-size: 12px;
  padding: 6px 10px;
  user-select: none;
}

/* A45: the Map overlays panel — middle of the left stack */
#map-overlays {
  background: rgba(10, 16, 28, 0.9);
  border: 1px solid #2a3a55;
  border-radius: 6px;
  color: #9db0cc;
  font-size: 12px;
  padding: 6px 10px;
  user-select: none;
}
#map-overlays summary {
  cursor: pointer;
  color: #cdd8ea;
}
#map-overlay-boxes {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#map-overlay-boxes label { white-space: nowrap; }

#help summary {
  cursor: pointer;
  color: #cdd8ea;
}

#help ul {
  list-style: none;
  margin: 6px 0 2px;
  padding: 0;
  line-height: 1.7;
}

#help b {
  color: #ffe066;
}

/* --- panels --- */
.panel {
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 360px;
  max-width: 640px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(10, 16, 28, 0.96);
  border: 1px solid #3b5d8f;
  border-radius: 8px;
  color: #cdd8ea;
  font-size: 13px;
  padding: 10px 14px 14px;
  z-index: 10;
}

.panel.hidden {
  display: none;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.panel-head h3 {
  margin: 0;
  color: #ffe066;
  font-size: 14px;
}

.panel-close {
  background: none;
  border: 1px solid #2a3a55;
  border-radius: 4px;
  color: #cdd8ea;
  cursor: pointer;
  font-family: inherit;
}

.panel button.option {
  display: block;
  width: 100%;
  text-align: left;
  margin: 2px 0;
  padding: 4px 8px;
  background: #16233a;
  border: 1px solid #2a3a55;
  border-radius: 4px;
  color: #cdd8ea;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

.panel button.option:hover {
  background: #24406b;
}

.panel button.option.current {
  border-color: #ffe066;
  color: #ffe066;
}

.panel .group-title {
  margin: 8px 0 3px;
  color: #8fa3c2;
  font-size: 11px;
  text-transform: uppercase;
}

/* subline inside option buttons: effects, unlocks, prerequisites */
.panel .option .fx {
  color: #7d94b8;
  font-size: 11px;
  margin-top: 1px;
}

.panel button.option.locked {
  opacity: 0.55;
  cursor: default;
}

.panel button.option.locked:hover {
  background: #16233a;
}

/* --- tax/science split slider (research panel) --- */
#rates-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 2px;
  font-size: 12px;
}

#rates-row input[type="range"] {
  flex: 1 1 auto;
  accent-color: #6db3f2;
}

#rate-tax { color: #e0a458; }
#rate-sci { color: #6db3f2; }
#rate-lux { color: #d88fd8; }

#rates-row button {
  width: 24px;
  height: 22px;
  background: #16233a;
  border: 1px solid #2a3a55;
  border-radius: 4px;
  color: #cdd8ea;
  font-family: inherit;
  cursor: pointer;
}

#rates-row button:hover { background: #24406b; }

/* --- government row (research panel) --- */
#gov-row {
  margin: 2px 0 6px;
  font-size: 12px;
  color: #cdd8ea;
}

.gov-btn {
  margin: 0 3px 3px 0;
  padding: 2px 8px;
  background: #16233a;
  border: 1px solid #3b5d8f;
  border-radius: 4px;
  color: #cdd8ea;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

.gov-btn:hover { background: #24406b; }

/* --- specialist mini-buttons (city view) --- */
.spec-btn {
  margin-left: 3px;
  padding: 1px 6px;
  background: #16233a;
  border: 1px solid #2a3a55;
  border-radius: 4px;
  color: #cdd8ea;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

.spec-btn:hover { background: #24406b; }

/* --- city view --- */
#city-panel {
  overflow: visible; /* the prev/next arrows hang outside the box */
  max-width: 736px;  /* widened by the arrows' width (playtest feedback) */
}

.city-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 64px;
  font-size: 26px;
  background: rgba(22, 35, 58, 0.95);
  border: 1px solid #3b5d8f;
  border-radius: 8px;
  color: #cdd8ea;
  font-family: inherit;
  cursor: pointer;
}

.city-nav:hover {
  background: #2f5388;
}

#city-prev { left: -48px; }
#city-next { right: -48px; }

#city-buy {
  margin-left: 8px;
  padding: 2px 10px;
  background: #24406b;
  border: 1px solid #3b5d8f;
  border-radius: 4px;
  color: #ffe066;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

#city-buy:hover:not(:disabled) {
  background: #2f5388;
}

#city-buy:disabled {
  opacity: 0.45;
  cursor: default;
}

/* A97: per-building sell affordance in the city view */
.city-built .bldg { display: inline-block; margin: 2px 8px 2px 0; white-space: nowrap; }
/* A89: the city's trade-route line (inert until N10 lands routes in state) */
#city-routes { margin: 3px 0; font-size: 12px; color: #cdd8ea; }
#city-routes .route-extra { color: #7d8aa5; font-size: 11px; }
.sell-btn {
  margin-left: 4px;
  padding: 1px 7px;
  background: #3a2b2b;
  border: 1px solid #6b4a4a;
  border-radius: 4px;
  color: #ffcf8f;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}
.sell-btn:hover:not(:disabled) { background: #4d3636; }
.sell-btn:disabled { opacity: 0.4; cursor: default; }
.sell-btn.armed { background: #7a2f2f; border-color: #b85c5c; color: #fff; }

#city-body {
  display: flex;
  gap: 14px;
  overflow: hidden; /* the panel itself is overflow-visible for the nav arrows */
}

#city-production {
  overflow-x: hidden;
}

#city-left {
  /* stats + mini-map get the spare width; the catalog only what it needs */
  flex: 1 1 auto;
  min-width: 240px; /* never narrower than the 5×46 mini-map */
}

#city-production {
  flex: 0 1 auto;
  width: max-content;
  min-width: 200px;
  max-width: 280px;
  max-height: 340px;
  overflow-y: auto;
}

#city-stats {
  line-height: 1.7;
  margin-bottom: 8px;
}

#city-stats .grow {
  color: #8fd18f;
}

#city-map {
  display: grid;
  grid-template-columns: repeat(5, 46px);
  grid-auto-rows: 46px;
  gap: 2px;
  justify-content: center; /* wave III: don't hug the left edge of #city-left */
}

.ctile {
  border-radius: 3px;
  position: relative;
  font-size: 10px;
  color: #fff;
  text-shadow: 0 0 2px #000, 0 0 2px #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ctile.corner {
  visibility: hidden;
}

.ctile.worked {
  outline: 2px solid #ffe066;
  outline-offset: -2px;
}

.ctile.assignable {
  cursor: pointer;
}

.ctile.assignable:hover {
  filter: brightness(1.35);
}

.ctile.center::before {
  content: "🏛";
  position: absolute;
  font-size: 18px;
  opacity: 0.9;
}

/* --- yield color coding: food / shields / trade --- */
.yf { color: #8fd18f; }
.ys { color: #e0a458; }
.yt { color: #6db3f2; }

/* --- center banner (non-modal, unmissable) --- */
#center-banner {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 28px;
  background: rgba(10, 16, 28, 0.92);
  border: 1px solid #ffe066;
  border-radius: 8px;
  color: #ffe066;
  font-size: 18px;
  pointer-events: none;
  z-index: 20;
  white-space: nowrap;
}

#center-banner.hidden {
  display: none;
}

/* --- stack panel (units on a tile) --- */
#stack-panel {
  position: absolute;
  top: 260px;
  left: 12px;
  min-width: 220px;
  background: rgba(10, 16, 28, 0.94);
  border: 1px solid #2a3a55;
  border-radius: 6px;
  padding: 8px 10px;
  color: #cdd8ea;
  font-size: 12px;
  z-index: 5;
}

#stack-panel.hidden {
  display: none;
}

#stack-panel button.option {
  display: block;
  width: 100%;
  text-align: left;
  margin: 2px 0;
  padding: 3px 8px;
  background: #16233a;
  border: 1px solid #2a3a55;
  border-radius: 4px;
  color: #cdd8ea;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

#stack-panel button.option:hover {
  background: #24406b;
}

#stack-panel button.option.current {
  border-color: #ffe066;
  color: #ffe066;
}

/* --- panel footers --- */
.panel-foot {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.panel-foot button {
  padding: 5px 16px;
  background: #24406b;
  border: 1px solid #3b5d8f;
  border-radius: 4px;
  color: #cdd8ea;
  font-family: inherit;
  cursor: pointer;
}

.panel-foot button:hover:not(:disabled) {
  background: #2f5388;
}

.panel-foot button:disabled {
  opacity: 0.4;
  cursor: default;
}

.panel button.option.chosen {
  background: #2f5388;
  border-color: #6db3f2;
}

#end-turn {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 10px 26px;
  font-size: 15px;
  pointer-events: auto;
  cursor: pointer;
  background: #24406b;
  color: #cdd8ea;
  border: 1px solid #3b5d8f;
  border-radius: 6px;
  font-family: inherit;
  z-index: 6;
}

#end-turn:hover {
  background: #2f5388;
}

/* all units moved: End Turn invites the press with a slow pulse */
@keyframes end-turn-pulse {
  0%, 100% { background: #2e6b40; }
  50% { background: #3f8f58; }
}

#end-turn.ready {
  background: #2e6b40;
  border-color: #4f9a63;
  color: #d8f0dc;
  animation: end-turn-pulse 2.4s ease-in-out infinite;
}

#end-turn.ready:hover {
  background: #38804e;
  animation: none;
}

/* A29 (VI.6): off-turn the button is inert (server/hotseat rivals moving);
   A40 will reuse this look for its greyed "Auto Turn" regency state */
#end-turn:disabled {
  opacity: 0.45;
  cursor: default;
}
#end-turn:disabled:hover {
  background: #24406b;
}

/* A29 (VI.6): your turn just arrived — two-three yellow blinks, then normal
   (hud.js removes the class; ⚙ reduce-animation skips adding it) */
@keyframes end-turn-arrive {
  0%, 100% { background: #24406b; color: #cdd8ea; }
  50% { background: #ffe066; color: #1b2130; }
}
#end-turn.pulse {
  animation: end-turn-arrive 0.55s ease-in-out 3;
}

/* A47: the replay theater — button + control bar + events feed */
#replay-btn {
  position: absolute;
  right: 16px;
  bottom: 60px;
  padding: 8px 18px;
  font-size: 14px;
  background: #2e6b40;
  color: #d8f0dc;
  border: 1px solid #4f9a63;
  border-radius: 6px;
  cursor: pointer;
  z-index: 7;
}
#replay-btn.hidden { display: none; }
#replay-theater {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  z-index: 15;
}
#replay-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  background: rgba(8, 12, 20, 0.9);
  color: #cdd8ea;
  font-size: 13px;
  pointer-events: auto;
}
#replay-bar button {
  background: #24406b; color: #cdd8ea; border: 1px solid #3b5d8f;
  border-radius: 5px; padding: 5px 12px; cursor: pointer; font-family: inherit;
}
#replay-bar #replay-turn { margin-left: auto; color: #8fa3c0; }
#replay-feed {
  flex: 1;
  min-height: 0; /* let the flex child shrink so its content scrolls */
  align-self: flex-start;
  width: 320px;
  margin: 8px 16px 16px;
  overflow-y: auto;
  background: rgba(8, 12, 20, 0.82);
  border: 1px solid #2a3a55;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: #9db0cc;
  pointer-events: auto;
}
.replay-line { padding: 1px 0; }
.replay-line.has-loc { cursor: pointer; }
.replay-line.has-loc:hover { color: #cdd8ea; }

/* A78: first-timer advice — a non-blocking card, lower-left, above the action bar */
#advice-card {
  position: absolute;
  left: 16px;
  bottom: 92px;
  width: 300px;
  max-width: calc(100vw - 32px);
  background: #14223a;
  border: 1px solid #3b5d8f;
  border-left: 3px solid #e6c15a;
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
  color: #cdd8ea;
  z-index: 12;
  font-size: 13px;
}
#advice-card .advice-head { font-size: 14px; color: #e6c15a; font-weight: 600; margin-bottom: 5px; }
#advice-card .advice-body { color: #bccadf; line-height: 1.45; }
#advice-card .advice-actions { display: flex; gap: 8px; margin-top: 10px; }
#advice-card .advice-ok {
  background: #2e6b40; color: #d8f0dc; border: 1px solid #4f9a63;
  border-radius: 5px; padding: 5px 12px; cursor: pointer; font-family: inherit; font-size: 13px;
}
#advice-card .advice-no {
  background: transparent; color: #8fa3c0; border: 1px solid #3b5d8f;
  border-radius: 5px; padding: 5px 12px; cursor: pointer; font-family: inherit; font-size: 13px;
}
/* A58c: deep-links into the pedia (advice card button + ❓ quick-tip anchor) */
#advice-card .advice-pedia {
  background: transparent; color: #7fb0ff; border: 1px solid #3b5d8f;
  border-radius: 5px; padding: 5px 12px; cursor: pointer; font-family: inherit; font-size: 13px;
}
#gameplay-help .pedia-deeplink { color: #7fb0ff; cursor: pointer; text-decoration: underline dotted; white-space: nowrap; }

/* A73-STATS: the statistics page — time-series charts + battles + wonders */
#stats {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgba(4, 7, 13, 0.92);
  z-index: 26;
  overflow-y: auto;
  padding: 24px 0;
}
#stats-card {
  background: #101827;
  border: 1px solid #2f486f;
  border-radius: 12px;
  padding: 18px 22px;
  max-width: 700px;
  width: calc(100% - 40px);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.7);
  color: #cdd8ea;
}
#stats-head {
  font-size: 20px; color: #e6d59a; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
#stats-close {
  background: #24406b; color: #8fa3c0; border: 1px solid #3b5d8f;
  border-radius: 5px; padding: 4px 10px; cursor: pointer; font-family: inherit; font-size: 14px;
}
#stats-legend { font-size: 12px; color: #9db0cc; margin-bottom: 6px; }
.sl-item { margin-right: 14px; white-space: nowrap; }
#stats-legend .swatch, .stats-table .swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px;
}
.stats-chart { width: 100%; height: auto; display: block; margin: 2px 0 6px; }
.stats-chart .ct-title { fill: #cdd8ea; font-size: 11px; font-family: inherit; }
.stats-chart .ct-axis { fill: #6b7d99; font-size: 9px; font-family: inherit; }
.stats-chart .ct-base { stroke: #2a3a55; stroke-width: 1; }
.stats-chart .ct-age { stroke: #d9b24a; stroke-width: 1; stroke-dasharray: 2 2; opacity: 0.55; }
.stats-chart .ct-agelabel { fill: #d9b24a; font-size: 8px; font-family: inherit; opacity: 0.8; }
.stats-cols { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 8px; }
.stats-col { flex: 1; min-width: 240px; }
.stats-col h3 { font-size: 14px; color: #8fa3c0; margin: 8px 0 4px; font-weight: 600; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stats-table th { text-align: right; color: #8fa3c0; font-weight: 600; padding: 3px 6px; border-bottom: 1px solid #2a3a55; }
.stats-table th:first-child { text-align: left; }
.stats-table td { text-align: right; padding: 3px 6px; border-bottom: 1px solid #1b2740; }
.stats-table td.civ { text-align: left; }
.stats-table td.empty { text-align: center; color: #6b7d99; }

/* A73: the end-game scoreboard — who won, why, and by how much */
#endscreen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 7, 13, 0.9);
  z-index: 24;
}
#endscreen-card {
  background: #101827;
  border: 1px solid #2f486f;
  border-radius: 12px;
  padding: 24px 28px;
  max-width: 640px;
  width: calc(100% - 40px);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.7);
  color: #cdd8ea;
}
#endscreen-verdict { font-size: 30px; font-weight: 700; text-align: center; letter-spacing: 1px; }
#endscreen-verdict.win { color: #ffe066; }
#endscreen-verdict.loss { color: #ff7b6b; }
#endscreen-verdict.neutral { color: #9fb4d6; }
#endscreen-reason { font-size: 15px; color: #cdd8ea; text-align: center; margin: 8px 0 2px; }
#endscreen-year { font-size: 12px; color: #8fa3c0; text-align: center; margin-bottom: 16px; }
#endscreen-table { width: 100%; border-collapse: collapse; font-size: 14px; }
#endscreen-table th {
  text-align: right; color: #8fa3c0; font-weight: 600; padding: 5px 8px; border-bottom: 1px solid #2a3a55;
}
#endscreen-table th:nth-child(1), #endscreen-table th:nth-child(2) { text-align: left; }
#endscreen-table td { text-align: right; padding: 6px 8px; border-bottom: 1px solid #1b2740; }
#endscreen-table td.rank { text-align: left; color: #8fa3c0; }
#endscreen-table td.civ { text-align: left; }
#endscreen-table td.score { font-weight: 700; color: #eaf1fb; min-width: 120px; }
#endscreen-table tr.winner td { background: rgba(255, 224, 102, 0.08); }
#endscreen-table tr.dead td { color: #6b7890; }
#endscreen-table .fell { color: #6b7890; font-size: 12px; }
#endscreen-table .swatch {
  display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 7px; vertical-align: -1px;
}
.eb-bar {
  display: block; height: 5px; margin-top: 4px; border-radius: 3px; overflow: hidden;
  background: #1b2740; white-space: nowrap; font-size: 0;
}
.eb-bar > span { display: inline-block; height: 100%; vertical-align: top; }
.eb-pop { background: #4fae5a; }
.eb-tech { background: #3ba0d2; }
.eb-won { background: #d9b24a; }
#endscreen-legend { font-size: 12px; color: #8fa3c0; text-align: center; margin-top: 12px; }
#endscreen-legend span {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 12px; vertical-align: -1px;
}
#endscreen-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
#endscreen-buttons button {
  background: #24406b; color: #cdd8ea; border: 1px solid #3b5d8f; border-radius: 6px;
  padding: 8px 16px; font-size: 14px; font-family: inherit; cursor: pointer;
}
#endscreen-buttons #es-replay { background: #2e6b40; border-color: #4f9a63; color: #d8f0dc; }
#endscreen-buttons #es-close { padding: 8px 12px; color: #8fa3c0; }
#endscreen-stats-note { margin-top: 12px; text-align: center; font-size: 13px; color: #9fb4d6; }
#endscreen-stats-note.hidden { display: none; }

/* A75: the historian's report — an age-change interstitial with world standings */
#historian {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 9, 16, 0.82);
  z-index: 22;
}
#historian-card {
  background: #121a2b;
  border: 1px solid #2f486f;
  border-radius: 10px;
  padding: 22px 26px;
  max-width: 560px;
  width: calc(100% - 40px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  color: #cdd8ea;
}
#historian-head {
  font-size: 24px;
  color: #e6d59a;
  text-align: center;
}
#historian-sub {
  font-size: 13px;
  color: #8fa3c0;
  text-align: center;
  margin: 4px 0 16px;
}
#historian-table { width: 100%; border-collapse: collapse; font-size: 14px; }
#historian-table th {
  text-align: right;
  color: #8fa3c0;
  font-weight: 600;
  padding: 4px 8px;
  border-bottom: 1px solid #2a3a55;
}
#historian-table th:nth-child(1), #historian-table th:nth-child(2) { text-align: left; }
#historian-table td { text-align: right; padding: 4px 8px; border-bottom: 1px solid #1c2740; }
#historian-table td.rank { text-align: left; color: #8fa3c0; }
#historian-table td.civ { text-align: left; }
#historian-table tr.dead td { color: #6b7890; }
#historian-table .swatch {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 2px;
  margin-right: 7px;
  vertical-align: -1px;
}
#historian-close {
  display: block;
  margin: 18px auto 0;
  background: #2e6b40;
  color: #d8f0dc;
  border: 1px solid #4f9a63;
  border-radius: 6px;
  padding: 8px 22px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}

/* A56(a): fast-forward interstitial — the year counter over the AI history run */
#ff-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(6, 9, 16, 0.72);
  z-index: 20;
  pointer-events: none;
  text-align: center;
}
#ff-era {
  font-size: 30px;
  letter-spacing: 2px;
  color: #d9c48a;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  min-height: 38px;
}
#ff-year {
  font-size: 64px;
  font-weight: 700;
  color: #eaf1fb;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
#ff-progress { font-size: 14px; color: #8fa3c0; }
#ff-overlay.ff-reduced #ff-era,
#ff-overlay.ff-reduced #ff-year { display: none; }
#ff-overlay.ff-reduced #ff-progress { font-size: 18px; color: #cdd8ea; }
#ff-overlay.ff-failed #ff-progress { color: #ff9b8b; font-size: 16px; }
.ff-fade { animation: ff-era-in 0.5s ease-out; }
@keyframes ff-era-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* A40: the grayed "Auto Turn" state while a regent plays the seat */
#end-turn.auto-turn {
  background: #2a2f3a;
  color: #7f8ba0;
  border-color: #3a4150;
  animation: none;
}

/* A40: the 🤖 regency button, left of End Turn */
#regent-btn {
  position: absolute;
  right: 128px;
  bottom: 16px;
  padding: 10px 12px;
  font-size: 15px;
  pointer-events: auto;
  cursor: pointer;
  background: #24406b;
  color: #cdd8ea;
  border: 1px solid #3b5d8f;
  border-radius: 6px;
  z-index: 6;
}
#regent-btn.active { background: #2e6b40; border-color: #4f9a63; }
#regent-dialog {
  position: absolute;
  right: 16px;
  bottom: 60px;
  width: 300px;
  z-index: 12;
}
.regent-stance {
  display: block;
  width: 100%;
  text-align: left;
  margin: 4px 0;
  padding: 6px 10px;
  background: #1b2740;
  color: #cdd8ea;
  border: 1px solid #2b3d5f;
  border-radius: 5px;
  cursor: pointer;
  font: inherit;
}
.regent-stance.chosen { border-color: #4f9a63; background: #223a2c; }
.regent-blurb { color: #8fa3c0; font-size: 11px; }
#regent-off { margin-top: 8px; width: 100%; padding: 6px; cursor: pointer; }

/* A39: turn-log filter row + display-time class filtering (the entries
   stay in the DOM — toggling a class back reveals the retained history) */
#log-filters {
  padding: 2px 6px;
  font-size: 11px;
}
#log-filter-toggle {
  background: none;
  border: 1px solid #3b5d8f;
  border-radius: 4px;
  color: #8fa3c0;
  font: inherit;
  cursor: pointer;
  padding: 1px 6px;
}
#log-filter-boxes label {
  margin-left: 8px;
  color: #cdd8ea;
  white-space: nowrap;
}
#log-filter-boxes.hidden { display: none; }
#log-filter-world {
  margin-left: 8px;
  color: #8fa3c0;
  font-style: italic;
}
#turn-list.hide-combat > .lg-combat,
#turn-list.hide-cities > .lg-cities,
#turn-list.hide-research > .lg-research,
#turn-list.hide-rival > .lg-rival,
#turn-list.hide-saves > .lg-saves { display: none; }

/* A37: lobby chat + kick controls */
#lobby-chat {
  margin: 10px auto;
  max-width: 420px;
  text-align: left;
}
#lobby-chat.hidden { display: none; }
#lobby-chat-log {
  height: 110px;
  overflow-y: auto;
  background: rgba(8, 12, 20, 0.6);
  border: 1px solid #2b3d5f;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  color: #cdd8ea;
}
#lobby-chat-row { display: flex; gap: 6px; margin-top: 6px; }
#lobby-chat-text { flex: 1; }
.lobby-kick { border-color: #8f3b3b; color: #e8b0a8; }
.lobby-notice { color: #e0a458; font-style: italic; } /* L8: in-lobby refusal lines */

/* A42 slice 2: the first-visit diorama behind the setup card — dimmed so
   the card stays readable on top of the animated scene */
#setup-diorama {
  position: fixed;
  inset: 0;
  z-index: 0;
}
#setup-diorama::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(9, 13, 22, 0.35) 0%, rgba(9, 13, 22, 0.82) 100%);
  pointer-events: none;
}
#setup-box { position: relative; z-index: 1; }

/* A34: the host form's resume-a-save picker */
#lobby-resume.hidden { display: none; }
/* S1: the match-report consent notice (scoped .hidden per the house guard) */
#lobby-reports.hidden { display: none; }
/* L2: the host form's two views — "Resume game" swaps new-game options for
   the code entry (each gets its scoped rule per the .hidden house guard) */
#lobby-newgame.hidden { display: none; }
#lobby-resumeview.hidden { display: none; }
/* L3a: the setup/lobby panel auto-fits the browser height — a full roster
   (14 slots + chat) scrolls INSIDE the panel, never the page */
#setup-box {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  box-sizing: border-box;
}
#lobby-saves .lobby-save {
  justify-content: center;
  font-size: 12px;
  color: #cdd8ea;
}

/* A35: the spectator's cursor tooltip (units + cities, omniscient) */
#spectator-tip {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  background: rgba(8, 12, 20, 0.92);
  border: 1px solid #3b5d8f;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 12px;
  color: #cdd8ea;
  white-space: pre; /* city line + garrison line */
}
#spectator-tip.hidden { display: none; }

/* --- top-right corner: clock + help + options --- */
#corner-buttons {
  position: absolute;
  top: 12px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 7;
}

#corner-buttons button {
  width: 34px;
  height: 34px;
  font-size: 17px;
  background: rgba(10, 16, 28, 0.85);
  border: 1px solid #2a3a55;
  border-radius: 6px;
  color: #cdd8ea;
  cursor: pointer;
}

#corner-buttons button:hover {
  background: #24406b;
}

#game-clock {
  color: #8fa3c2;
  font-size: 13px;
}

#options-panel label, #gameplay-help .help-entry {
  display: block;
  margin: 8px 0;
  font-size: 13px;
}

#gameplay-help {
  max-width: 460px;
}

#gameplay-help .help-entry b {
  color: #ffe066;
}

/* the no-moves hint's mute button */
#center-banner {
  pointer-events: auto;
}

#mute-hint {
  margin-left: 10px;
  background: none;
  border: 1px solid #6b6132;
  border-radius: 4px;
  color: #ffe066;
  cursor: pointer;
  font-size: 13px;
}

/* --- action bar (selected unit's actions, bottom center) --- */
/* A68: the bottom-center dock — a flex column so the stat card always sits
   above the action bar, whatever row count the bar wraps to */
#unit-dock {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 6;
}

#action-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: calc(100vw - 360px); /* never collide with End Turn / logs */
}

/* the selected unit's stat card, riding just above its action bar */
#unit-line {
  padding: 3px 12px;
  background: rgba(10, 16, 28, 0.85);
  border: 1px solid #2c4770;
  border-radius: 6px;
  color: #cdd8ea;
  font-size: 13px;
  white-space: nowrap;
  z-index: 6;
}

#unit-line.hidden {
  display: none;
}

/* turn-log entries about a place carry a camera-jump button */
.log-jump {
  margin-left: 6px;
  padding: 0 5px;
  background: #1b2c48;
  border: 1px solid #3b5d8f;
  border-radius: 4px;
  color: #8fc7ff;
  font-size: 11px;
  cursor: pointer;
}

.log-jump:hover {
  background: #2f5388;
}

#action-bar.hidden {
  display: none;
}

#action-bar button {
  padding: 8px 14px;
  background: rgba(22, 35, 58, 0.95);
  border: 1px solid #3b5d8f;
  border-radius: 6px;
  color: #cdd8ea;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

#action-bar button:hover {
  background: #2f5388;
}

/* L7a (mobile T1): touch swipes PAN THE MAP, never scroll the page — the
   renderer's pointer handlers own every gesture (incl. its own pinch) */
#app canvas { touch-action: none; }

/* L7b: the coarse-pointer d-pad — touch devices only (desktop never sees it) */
#dpad { display: none; }
@media (pointer: coarse) {
  #dpad {
    display: grid;
    grid-template-columns: repeat(3, 44px);
    grid-template-rows: repeat(3, 44px);
    gap: 2px;
    position: fixed;
    right: 10px;
    /* XII.1: anchored to the vertical CENTER of the right edge — clears the
       bottom-right End Turn AND the bottom-left panel stack at every viewport.
       top-anchoring also sidesteps the mobile fixed-`bottom` dynamic-viewport
       quirk that slid the pad down over End Turn on real phones. */
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    background: rgba(8, 12, 20, 0.55); /* stands off the buttons behind it */
    border-radius: 12px;
    padding: 4px;
  }
  /* XII.1: the compass toggle hides the pad for players who want the screen */
  #dpad.dpad-hidden { display: none; }
  #dpad button {
    background: rgba(34, 52, 82, 0.95);
    border: 1px solid #5a86c2;
    border-radius: 8px;
    color: #e6eeff;
    font-size: 18px;
  }
  #dpad button:active { background: #2f5388; }
  #dpad .dpad-blank { visibility: hidden; }
}

/* L5: the ?mlog=1 mobile debug overlay — a phone with no console self-reports */
#mlog {
  position: fixed;
  left: 4px;
  bottom: 4px;
  width: min(92vw, 420px);
  max-height: 40vh;
  background: rgba(8, 12, 20, 0.92);
  border: 1px solid #3b5d8f;
  border-radius: 6px;
  color: #9db0cc;
  font: 10px ui-monospace, monospace;
  z-index: 99;
  display: flex;
  flex-direction: column;
}
#mlog-head { padding: 2px 6px; color: #cdd8ea; }
#mlog-head button { font-size: 10px; margin-left: 8px; }
#mlog-list { overflow-y: auto; padding: 2px 6px; flex: 1; -webkit-overflow-scrolling: touch; }

/* the tech-discovery card (specs/tech-discovery-card.md) — a transient
   center-top card; created/removed, never .hidden-toggled */
#discovery-card {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 480px;
  background: rgba(12, 20, 34, 0.96);
  border: 1px solid #3b5d8f;
  border-radius: 8px;
  color: #cdd8ea;
  font-size: 13px;
  padding: 10px 14px;
  z-index: 8;
  cursor: pointer;
}
#discovery-card .dc-head { font-size: 15px; color: #ffe066; }
#discovery-card .dc-glyph-slot { display: inline-block; vertical-align: middle; margin-right: 7px; }
#discovery-card .dc-glyph-slot .tech-glyph { width: 30px; height: 30px; vertical-align: middle; }
#discovery-card .dc-era {
  font-size: 11px; color: #8fa8cc; border: 1px solid #2c4770;
  border-radius: 8px; padding: 0 6px; margin-left: 6px; vertical-align: middle;
}
#discovery-card .dc-blurb { margin-top: 6px; }
#discovery-card .dc-unlocks { margin-top: 6px; }
#discovery-card .dc-link {
  background: #1b2c48; border: 1px solid #3b5d8f; border-radius: 4px;
  color: #8fc7ff; font-size: 12px; padding: 1px 6px; cursor: pointer;
}
#discovery-card .dc-link:hover { background: #2f5388; }
#discovery-card .dc-research { margin-top: 6px; color: #ffe066; }
#discovery-card .dc-hint { margin-top: 6px; font-size: 11px; color: #7284a0; }

/* A68 (VIII.13): civil disorder is LOUD in the city view */
.disorder-banner {
  margin-top: 6px;
  padding: 6px 10px;
  background: #571a08;
  border: 1px solid #d84a3b;
  border-radius: 6px;
  color: #ffd9cc;
  font-weight: bold;
}

/* A68 (VIII.9): inapplicable settler jobs stay visible but grayed — the
   tooltip carries the why (already built / wrong terrain / needs a tech) */
#action-bar button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
#action-bar button:disabled:hover {
  background: rgba(22, 35, 58, 0.95);
}

#action-bar .key {
  color: #ffe066;
  font-size: 11px;
}

/* --- setup + hotseat hand-off screens (fully opaque: they hide the map) --- */
#setup-screen, #handoff-screen {
  position: absolute;
  inset: 0;
  background: #0d1420;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

#handoff-screen.hidden {
  display: none;
}

#setup-box, #handoff-box {
  background: rgba(16, 24, 40, 0.98);
  border: 1px solid #3b5d8f;
  border-radius: 10px;
  padding: 26px 34px;
  color: #cdd8ea;
  font-size: 14px;
  text-align: center;
  min-width: 320px;
}

#setup-box h2, #handoff-box h2 {
  margin: 0 0 10px;
  color: #ffe066;
}

.setup-hint {
  color: #8fa3c2;
  font-size: 12px;
  max-width: 340px;
}

/* A53: two-column form — label text right-aligned in the left column, the
   control in a fixed-width right column so the rows scan as a clean grid.
   The panel stays centered at its width; the splash diorama layering is
   untouched. */
#setup-box label {
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  text-align: right;
}

#setup-box select, #setup-box input {
  background: #16233a;
  border: 1px solid #3b5d8f;
  border-radius: 4px;
  color: #cdd8ea;
  font-family: inherit;
  padding: 4px 8px;
  width: 210px; /* A53: one shared control width — no ragged right edge */
  box-sizing: border-box;
  justify-self: start;
}
#setup-box input[type="checkbox"] { width: auto; } /* A53: not the shared width */

/* A53: the civ/age hint lines reserve their height even when empty, so
   switching civilization or starting age never makes the panel jump */
#setup-specialty, #setup-age-hint, #setup-civs-hint {
  min-height: 1.2em;
  margin: 2px 0;
}

#setup-start, #handoff-go, #lobby-code-btn {
  margin-top: 14px;
  padding: 10px 28px;
  font-size: 15px;
  background: #24406b;
  border: 1px solid #3b5d8f;
  border-radius: 6px;
  color: #cdd8ea;
  font-family: inherit;
  cursor: pointer;
}

#setup-start:hover, #handoff-go:hover, #lobby-code-btn:hover {
  background: #2f5388;
}

#setup-box .hidden { display: none; } /* A23/A26: rows/buttons toggled by mode */

/* --- phase-4 LAN lobby (host/join buttons + waiting room) --- */
#setup-lan { margin-top: 10px; }
.setup-lan-btn {
  margin: 0 4px;
  padding: 6px 14px;
  background: none;
  border: 1px solid #3b5d8f;
  border-radius: 6px;
  color: #8fa8cc;
  font-family: inherit;
  cursor: pointer;
}
.setup-lan-btn:hover { background: #1b2c49; color: #cdd8ea; }

/* XII.4: the rejoin banner — a left-behind server game surfaced on setup */
#rejoin-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: rgba(46, 107, 64, 0.22);
  border: 1px solid #4f9a63;
  border-radius: 8px;
  color: #d8f0dc;
  font-size: 13px;
}
#rejoin-banner span { flex: 1 1 auto; }
#rejoin-go {
  padding: 6px 14px;
  background: #2e6b40;
  border: 1px solid #4f9a63;
  border-radius: 6px;
  color: #d8f0dc;
  font-family: inherit;
  cursor: pointer;
}
#rejoin-go:hover { background: #3f8f58; }
#lobby-code {
  font-size: 30px;
  letter-spacing: 6px;
  color: #ffe066;
  margin: 4px 0 12px;
}
#lobby-roster { margin: 0 auto 8px; text-align: left; display: inline-block; }
#lobby-roster div { padding: 2px 0; }
.lobby-row { display: flex; align-items: center; gap: 8px; } /* A27 host rows */
/* A51c: master-index rows — mismatched rulesets grey out, never hide */
.lobby-global-row { margin: 3px 0; }
.lobby-global-mismatch { opacity: 0.5; }
#lobby-global.hidden { display: none; }
.lobby-row select {
  background: #141d2e; color: #cdd8ea; border: 1px solid #3b5d8f;
  border-radius: 4px; font-family: inherit; padding: 2px 4px;
}
.lobby-open { color: #7d8aa5; }
.lobby-ai { color: #5a6b85; }
#setup-box a { color: #8fa8cc; }
#mp-status {
  position: fixed;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 39;
  background: #2b2416;
  border: 1px solid #6b5d2f;
  border-radius: 8px;
  padding: 8px 14px;
  color: #ffe066;
  font-family: inherit;
  font-size: 13px;
}
#mp-status button {
  margin-left: 8px;
  padding: 3px 10px;
  background: #24406b;
  border: 1px solid #3b5d8f;
  border-radius: 5px;
  color: #cdd8ea;
  font-family: inherit;
  cursor: pointer;
}
#mp-status button:hover { background: #2f5388; }
#wait-line { /* A26: who we're waiting for, calm, above End Turn */
  position: fixed;
  right: 22px;
  bottom: 72px;
  z-index: 5;
  color: #8fa8cc;
  font-family: inherit;
  font-size: 13px;
}
.log-wait { color: #9d8f55; }
.banner-btn { /* A25: ✕ / 🔕 riding the center banner */
  margin-left: 8px;
  background: none;
  border: 1px solid #46587c;
  border-radius: 4px;
  color: #8fa8cc;
  cursor: pointer;
  font-family: inherit;
  padding: 1px 7px;
}
.banner-btn:hover { color: #cdd8ea; border-color: #8fa8cc; }

/* --- flash banner (transient center message) --- */
#flash-banner {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 28px;
  background: rgba(60, 20, 16, 0.94);
  border: 1px solid #ff7b6b;
  border-radius: 8px;
  color: #ffd9d0;
  font-size: 17px;
  pointer-events: none;
  z-index: 21;
  white-space: nowrap;
}

#flash-banner.hidden {
  display: none;
}

/* the persistent game-code toast (ui/saves.js): .hidden is per-element in
   this codebase — without this rule the ✕ was inert AND the empty toast
   rendered from creation (B6/B4 family) */
#code-toast.hidden {
  display: none;
}

/* B4 sweep: the other three inert .hidden sites — without these the
   waiting/skip-vote lines never dismissed and a stale hand-off code
   could linger (guards.test.js now enforces the whole family) */
#wait-line.hidden {
  display: none;
}

#mp-status.hidden {
  display: none;
}

#handoff-code.hidden {
  display: none;
}

/* --- turn log (bottom of the left stack — the A45 lower-left anchor) --- */
#turn-log {
  max-width: 380px;
  max-height: 45vh;
  overflow-y: auto;
  background: rgba(10, 16, 28, 0.9);
  border: 1px solid #2a3a55;
  border-radius: 6px;
  color: #9db0cc;
  font-size: 12px;
  padding: 6px 10px;
  user-select: none;
}

#turn-log summary {
  cursor: pointer;
  color: #cdd8ea;
}

#turn-list {
  margin-top: 6px;
  line-height: 1.6;
}

#turn-list .win { color: #8fd18f; }
#turn-list .loss { color: #ff7b6b; }

/* --- city-name dialog --- */
#name-dialog {
  top: 30%;
  min-width: 300px;
}

#name-dialog input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  background: #16233a;
  border: 1px solid #3b5d8f;
  border-radius: 4px;
  color: #ffe066;
  font-family: inherit;
  font-size: 14px;
}

#stack-city {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 4px 8px;
  background: #24406b;
  border: 1px solid #3b5d8f;
  border-radius: 4px;
  color: #cdd8ea;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

#stack-city.hidden {
  display: none;
}

/* live strategic overlay (?debug=1 / spectator): per-AI stance/mode/threat */
#strat-overlay {
  position: fixed; top: 52px; left: 12px; z-index: 24;
  background: rgba(12, 18, 30, 0.96); border: 1px solid #2c4468;
  border-radius: 8px; padding: 8px 12px; color: #cdd8ea;
  font-size: 12px; max-height: 60vh; overflow-y: auto; max-width: 340px;
}
#strat-overlay.hidden { display: none; }
#strat-head { color: #ffe066; font-weight: bold; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#strat-head button { margin-left: auto; background: none; border: 1px solid #3b5d8f; border-radius: 4px; color: #cdd8ea; cursor: pointer; }
.strat-row { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 3px 0; border-bottom: 1px dotted #24344f; }
.strat-name { font-weight: bold; min-width: 72px; }
.strat-tag { color: #8fa3c2; }
.strat-mode { color: #cdd8ea; }
.strat-units { color: #7d8aa5; font-size: 11px; }
.strat-empty { color: #6d7f9c; }
#open-strat.hidden { display: none; }

/* D2: the Foreign-relations panel — per-met-civ war/peace status + treaty
   actions (feature-detected; inert until D1) */
#diplo-overlay {
  position: fixed; top: 52px; left: 12px; z-index: 24;
  background: rgba(12, 18, 30, 0.96); border: 1px solid #2c4468;
  border-radius: 8px; padding: 8px 12px; color: #cdd8ea;
  font-size: 12px; max-height: 60vh; overflow-y: auto; max-width: 360px;
}
#diplo-overlay.hidden { display: none; }
#diplo-head { color: #ffe066; font-weight: bold; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#diplo-head button { margin-left: auto; background: none; border: 1px solid #3b5d8f; border-radius: 4px; color: #cdd8ea; cursor: pointer; }
.diplo-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 4px 0; border-bottom: 1px dotted #24344f; }
.diplo-name { font-weight: bold; min-width: 84px; }
.diplo-status { color: #b9c6dc; }
.diplo-rep { color: #c9b458; font-size: 11px; }
.diplo-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.diplo-act {
  background: #1c2a44; border: 1px solid #3b5d8f; border-radius: 4px;
  color: #cdd8ea; font-family: inherit; font-size: 11px; cursor: pointer; padding: 2px 8px;
}
.diplo-act:hover { background: #26385a; }
.diplo-pending { color: #8fa3c2; font-size: 11px; font-style: italic; }
.diplo-empty { color: #6d7f9c; }
#diplo-note { color: #e0a898; font-size: 11px; margin-top: 6px; }
#diplo-note.hidden { display: none; }
#open-diplo.hidden { display: none; }

/* XII.6: the graphical tech tree — a 🌳 overlay alongside the research list */
#tech-tree {
  position: fixed; inset: 24px; z-index: 60;
  background: rgba(10, 15, 26, 0.98); border: 1px solid #2c4468;
  border-radius: 10px; display: flex; flex-direction: column; color: #cdd8ea;
  font-size: 12px;
}
#tech-tree.hidden { display: none; }
#tech-tree-head {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px;
  border-bottom: 1px solid #24344f; color: #ffe066; font-weight: bold;
}
#tech-tree-legend { display: flex; gap: 12px; font-weight: normal; font-size: 11px; color: #9fb3d0; }
#tech-tree-legend .known { color: #7fd18a; }
#tech-tree-legend .avail { color: #ffe066; }
#tech-tree-legend .locked { color: #6d7f9c; }
#tech-tree-legend .goalk { color: #7fbcff; }
#tech-tree-head button { margin-left: auto; background: none; border: 1px solid #3b5d8f; border-radius: 4px; color: #cdd8ea; cursor: pointer; }
#tech-tree-scroll { flex: 1; overflow: auto; position: relative; cursor: grab; touch-action: none; }
#tech-tree-scroll:active { cursor: grabbing; }
#tech-tree-canvas { position: relative; }
#tech-tree-edges { position: absolute; left: 0; top: 0; pointer-events: none; }
.tt-edge { stroke: #2b3f5e; stroke-width: 1.5; }
.tt-edge.done { stroke: #38624a; }
.tt-edge.onpath { stroke: #7fbcff; stroke-width: 2.5; stroke-dasharray: 6 4; }
.tt-node {
  position: absolute; width: 132px; height: 40px; box-sizing: border-box;
  display: flex; align-items: center; gap: 6px; padding: 0 8px;
  background: rgba(20, 30, 48, 0.96); border: 1px solid #3b5d8f;
  border-left-width: 4px; border-radius: 6px; color: #cdd8ea;
  font-family: inherit; font-size: 11px; text-align: left; cursor: pointer;
}
.tt-node .tt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-node .tt-state { flex: 0 0 auto; font-weight: bold; }
.tt-node .tech-glyph { flex: 0 0 auto; width: 26px; height: 26px; }
/* era-colored left rail (the glyph frame color, Part C reuses these) */
.tt-node.era-ancient { border-left-color: #b9975b; }
.tt-node.era-renaissance { border-left-color: #6ba368; }
.tt-node.era-industrial { border-left-color: #6f8bb0; }
.tt-node.era-modern { border-left-color: #9b7fc9; }
.tt-node.known { opacity: 0.7; }
.tt-node.known .tt-state { color: #7fd18a; }
.tt-node.avail { border-color: #ffe066; }
.tt-node.avail .tt-state { color: #ffe066; }
.tt-node.locked { color: #8496b3; background: rgba(16, 23, 38, 0.9); }
.tt-node.locked .tt-state { color: #6d7f9c; }
.tt-node.current { box-shadow: 0 0 0 2px #ffe066; }
.tt-node.goal { box-shadow: 0 0 0 2px #7fbcff; }
.tt-node.onpath { border-color: #7fbcff; }
.tt-node:hover { background: rgba(38, 56, 90, 0.98); }
#open-tech-tree {
  position: absolute; top: 12px; left: calc(50% + 202px); z-index: 8;
  background: #1c2a44; border: 1px solid #3b5d8f; border-radius: 6px;
  color: #cdd8ea; cursor: pointer; font-size: 14px; height: 28px; padding: 0 8px;
}
#open-tech-tree:hover { background: #26385a; }

/* A92: the debug panel — thin god-mode form, corner-toggled, state-gated */
#debug-panel {
  position: fixed; top: 52px; right: 12px; z-index: 25;
  background: rgba(20, 12, 12, 0.96); border: 1px solid #8f3b3b;
  border-radius: 8px; padding: 8px 12px; color: #e8c8c0;
  font-size: 12px; display: flex; flex-direction: column; gap: 6px;
}
#debug-panel.hidden { display: none; }
#debug-head { color: #e8b0a8; font-weight: bold; display: flex; gap: 8px; align-items: center; }
#debug-head button { margin-left: auto; background: none; border: 1px solid #8f3b3b; border-radius: 4px; color: #e8b0a8; cursor: pointer; }
#debug-panel .debug-row { display: flex; gap: 6px; align-items: center; }
#debug-panel input, #debug-panel select {
  background: #241616; border: 1px solid #8f3b3b; border-radius: 4px;
  color: #e8c8c0; font-family: inherit; padding: 2px 6px; width: 150px;
}
#debug-panel button {
  background: #4a2020; border: 1px solid #8f3b3b; border-radius: 4px;
  color: #e8c8c0; font-family: inherit; cursor: pointer; padding: 3px 10px;
}
#debug-panel button:hover { background: #613030; }
.debug-note { color: #a67c74; font-size: 11px; }

/* C3: the per-city build queue line in the city panel */
#city-queue { font-size: 12px; color: #9fb3d0; margin: 4px 0 6px; }
#city-queue .queue-hint { color: #6d7f9c; }
#city-queue .queue-item { margin-right: 10px; white-space: nowrap; }
.queue-btn {
  background: none; border: 1px solid #2c4468; border-radius: 3px;
  color: #8fa8cc; cursor: pointer; font-family: inherit; font-size: 10px;
  padding: 0 4px; margin-left: 2px;
}
.queue-btn:hover { background: #1b2c49; color: #cdd8ea; }

/* C1: the world minimap — bottom-right above End Turn; hidden on coarse
   pointers until the T1 portrait pass decides its mobile home */
#minimap {
  position: fixed; right: 16px; bottom: 64px; z-index: 12;
  border: 1px solid #3b5d8f; border-radius: 4px; overflow: hidden;
  background: #05070c; line-height: 0; cursor: crosshair;
  width: 184px;
}
#minimap canvas {
  width: 100%; height: auto; display: block;
  image-rendering: pixelated;
}
#minimap-rect { position: absolute; inset: 0; pointer-events: none; }
@media (pointer: coarse) { #minimap { display: none; } }

/* H8 (A76): the graphical spaceship screen — pedia-precedent overlay */
#ship-screen {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(6, 9, 16, 0.94);
  display: flex; align-items: center; justify-content: center;
}
#ship-screen.hidden { display: none; }
#ship-frame {
  width: min(860px, 94vw); height: min(700px, 92vh);
  background: rgba(12, 18, 30, 0.98); border: 1px solid #2c4468;
  border-radius: 10px; display: flex; flex-direction: column;
  color: #cdd8ea; font-size: 14px; overflow: hidden;
}
#ship-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid #24344f;
}
#ship-head h2 { margin: 0; font-size: 18px; color: #e8c46a; }
#ship-close {
  background: #24406b; color: #cdd8ea; border: 1px solid #3b5d8f;
  border-radius: 5px; padding: 4px 10px; cursor: pointer; font-family: inherit;
}
#ship-body { display: grid; grid-template-columns: 1fr 300px; flex: 1; min-height: 0; }
#ship-diagram { position: relative; padding: 10px; border-right: 1px solid #24344f; min-height: 0; }
#ship-svg { width: 100%; height: 100%; }
#ship-mock-note {
  position: absolute; top: 14px; left: 14px; color: #b04a3b;
  font-size: 11px; letter-spacing: 2px;
}
#ship-side { padding: 14px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.ship-part-row, .ship-stat {
  display: flex; justify-content: space-between;
  border-bottom: 1px dotted #2c4468; padding: 3px 0;
}
.ship-part-row span, .ship-stat span { color: #8ba0c0; }
.ship-dead-note { color: #c76a5a; font-style: normal; font-size: 11px; }
#ship-status { color: #9fb3d0; font-size: 12px; min-height: 2.4em; }
#ship-launch-row.hidden { display: none; }
#ship-launch {
  padding: 10px 28px; font-size: 15px; background: #6b3324;
  border: 1px solid #b04a3b; border-radius: 6px; color: #f0d8cd;
  font-family: inherit; cursor: pointer;
}
#ship-launch:hover { background: #8a4230; }
#ship-launch.hidden { display: none; }
#ship-confirm { font-size: 12px; color: #e8b0a8; }
#ship-confirm.hidden { display: none; }
#ship-confirm button {
  margin: 4px 4px 0 0; padding: 5px 12px; font-family: inherit; cursor: pointer;
  border-radius: 5px; border: 1px solid #3b5d8f; background: #24406b; color: #cdd8ea;
}
#ship-confirm #ship-launch-yes { background: #6b3324; border-color: #b04a3b; color: #f0d8cd; }
#ship-preset { font-size: 12px; color: #8ba0c0; }
#ship-preset.hidden { display: none; }
#ship-preset button {
  margin-left: 6px; padding: 3px 10px; font-family: inherit; cursor: pointer;
  border-radius: 5px; border: 1px solid #3b5d8f; background: none; color: #8fa8cc;
}
#open-ship.hidden { display: none; }
/* the assembly diagram: every slot always drawn — empty = faint dashed
   outline, built = solid flat fill, dead = built past structural support
   (kind fill kept, dimmed + red edge; the dead rule comes LAST so its
   stroke wins the equal-specificity fill rules) */
#ship-svg .ss-empty, #ship-svg g.ss-empty rect, #ship-svg g.ss-empty line {
  fill: none; stroke: #2c4468; stroke-dasharray: 3 3;
}
#ship-svg .ss-truss.ss-built { fill: #4a5f80; stroke: #8fa8cc; }
#ship-svg .ss-engine.ss-built, #ship-svg .ss-engine.ss-dead { fill: #d08a3b; stroke: #7a4c1e; }
#ship-svg .ss-fuel.ss-built, #ship-svg .ss-fuel.ss-dead { fill: #7d8aa5; stroke: #b9c5da; }
#ship-svg .ss-hab.ss-built, #ship-svg .ss-hab.ss-dead { fill: #5aa86b; stroke: #2e6b3c; }
#ship-svg .ss-life.ss-built, #ship-svg .ss-life.ss-dead { fill: #4bb0a8; stroke: #22645f; }
#ship-svg g.ss-built rect, #ship-svg g.ss-dead rect { fill: #e8c46a; stroke: #8a6f2a; }
#ship-svg g.ss-built line, #ship-svg g.ss-dead line { stroke: #8a6f2a; }
#ship-svg .ss-engine.ss-dead, #ship-svg .ss-fuel.ss-dead, #ship-svg .ss-hab.ss-dead,
#ship-svg .ss-life.ss-dead, #ship-svg g.ss-dead rect {
  opacity: 0.55; stroke: #b04a3b; stroke-width: 2;
}

/* A58: Civilopedia — full-screen browsable reference overlay */
#pedia {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(6, 9, 16, 0.94);
  display: flex; align-items: center; justify-content: center;
}
#pedia.hidden { display: none; }
#pedia-frame {
  width: min(1000px, 92vw); height: min(760px, 90vh);
  background: rgba(12, 18, 30, 0.98); border: 1px solid #2c4468;
  border-radius: 10px; display: flex; flex-direction: column;
  color: #cdd8ea; font-size: 14px; overflow: hidden;
}
#pedia-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid #24344f;
}
#pedia-head h2 { margin: 0; font-size: 18px; color: #e8c46a; }
#pedia-close {
  background: #24406b; color: #cdd8ea; border: 1px solid #3b5d8f;
  border-radius: 5px; padding: 4px 10px; cursor: pointer; font-family: inherit;
}
#pedia-body { display: grid; grid-template-columns: 130px 210px 1fr; flex: 1; min-height: 0; }
#pedia-cats {
  display: flex; flex-direction: column; gap: 4px; padding: 8px;
  border-right: 1px solid #24344f; overflow-y: auto;
}
.pedia-cat {
  background: none; color: #9fb3d0; border: none; text-align: left;
  padding: 8px 10px; border-radius: 5px; cursor: pointer;
  font-family: inherit; font-size: 14px;
}
.pedia-cat:hover { background: rgba(60, 90, 140, 0.25); }
.pedia-cat.active { background: #24406b; color: #e6eefb; }
#pedia-list {
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  border-right: 1px solid #24344f; overflow-y: auto;
}
.pedia-item {
  background: none; color: #cdd8ea; border: none; text-align: left;
  padding: 6px 10px; border-radius: 4px; cursor: pointer;
  font-family: inherit; font-size: 13px;
}
.pedia-item:hover { background: rgba(60, 90, 140, 0.2); }
#pedia-entry { padding: 18px 24px; overflow-y: auto; }
#pedia-entry h3 { margin: 0 0 12px; color: #e8c46a; font-size: 20px; }
.pedia-stats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px 18px; margin-bottom: 14px;
}
.pedia-stat { display: flex; justify-content: space-between; border-bottom: 1px dotted #2c4468; padding: 3px 0; }
.pedia-stat span { color: #8ba0c0; }
.pedia-prose { line-height: 1.5; margin: 8px 0; }
.pedia-req { color: #9fb3d0; margin: 8px 0; }
.pedia-link { color: #7fb0ff; cursor: pointer; text-decoration: underline dotted; }
.pedia-link:hover { color: #a8ccff; }

/* ============ portrait layout pass (specs/mobile-plan.md T2 scope) ==========
   Media-query gated: desktop widths render PIXEL-IDENTICAL (nothing outside
   this block changes). Phone-portrait comfort: the HUD becomes a top strip,
   floating panels become full-screen sheets, the bottom dock becomes a
   horizontally scrollable 44px action strip, the reference overlays go
   full-screen, and the setup card uses the whole width. */
@media (max-width: 720px) {
  /* top row 1: the research bar (left) + corner buttons (right); the HUD
     strip becomes row 2 — no more center-bar bleed-through */
  #research-bar {
    top: 4px; left: 6px; right: 136px;
    width: auto; transform: none; z-index: 21;
  }
  #corner-buttons { top: 4px; right: 8px; z-index: 21; }
  #hud {
    top: 36px; left: 0; right: 0;
    border-radius: 0; border-width: 1px 0;
    font-size: 12px; line-height: 1.45; padding: 6px 8px;
  }

  /* the minimap earns its phone home here (C1 deferred it): smaller, above
     End Turn instead of over it */
  #minimap { width: 112px; right: 8px; bottom: 118px; }

  /* toasts wrap inside the viewport (nowrap clipped both edges at 412px) */
  #center-banner, #flash-banner {
    max-width: 92vw; white-space: normal; text-align: center;
    font-size: 15px; box-sizing: border-box;
  }

  /* left stack: clear of the action strip; panels cap to the viewport */
  #left-stack { bottom: 84px; left: 6px; gap: 4px; }
  #turn-log { max-width: 92vw; max-height: 38vh; }
  #help { max-height: 46vh; }

  /* floating panels -> full-screen sheets (the ✕ is the close affordance) */
  .panel {
    top: 0; left: 0; right: 0; bottom: 0;
    transform: none;
    min-width: 0; max-width: none; max-height: none;
    border-radius: 0; border: none;
  }
  #city-body { flex-direction: column; }
  #city-left { min-width: 0; }
  /* the city panel's desktop `overflow: visible` (for the prev/next arrows that
     hang outside the box) traps its tall content below the fold on a phone —
     restore vertical scroll on the full-screen sheet so the whole catalog +
     tile grid + unit list are reachable (#1736) */
  #city-panel { overflow-y: auto; overflow-x: hidden; }
  /* the prev/next city arrows hang at left/right:-48px (outside the desktop box)
     — off-screen on a full-width phone sheet. Pin them to the viewport edges so
     they stay put while the panel scrolls, and are reachable (#1754). */
  #city-prev, #city-next { position: fixed; z-index: 11; }
  #city-prev { left: 2px; }
  #city-next { right: 2px; }
  /* the keyboard shortcut hints (B, G, …) are dead weight on a phone with no
     keyboard, and they widen every action-bar button — drop them on mobile so
     more of the strip fits before it needs a scroll (#1754). */
  #action-bar .key { display: none; }
  #action-bar button { padding: 8px 11px; }
  .city-nav { min-width: 44px; min-height: 44px; }
  .panel-close { min-width: 44px; min-height: 44px; }

  /* the bottom dock: a full-width scrollable strip with 44px targets */
  #unit-dock {
    left: 0; right: 0; bottom: 0;
    transform: none;
    align-items: stretch; gap: 2px;
  }
  #unit-line { align-self: center; }
  #action-bar {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    max-width: none;
    background: rgba(8, 12, 20, 0.78);
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
  }
  #action-bar button { flex: 0 0 auto; min-height: 44px; }

  /* End Turn + the d-pad ride above the strip */
  #end-turn { right: 8px; bottom: 64px; min-height: 44px; z-index: 7; }

  /* reference overlays: full-screen sheets */
  #pedia-frame, #ship-frame { width: 100vw; height: 100vh; border-radius: 0; }
  #pedia-body { grid-template-columns: 84px 132px 1fr; font-size: 12px; }
  #ship-body { grid-template-columns: 1fr; overflow-y: auto; }
  #ship-diagram { min-height: 46vh; border-right: none; border-bottom: 1px solid #24344f; }

  /* setup/lobby card: the whole width is the card */
  #setup-box, #handoff-box { min-width: 0; width: 94vw; padding: 16px 12px; }
  .setup-hint { max-width: none; }
}
/* XII.1: the compass toggle (🧭) is a touch-only affordance — it shows/hides
   the d-pad, so it has no meaning on a desktop that never renders the pad */
#dpad-toggle { display: none; }
@media (pointer: coarse) {
  #dpad-toggle { display: inline-block; }
}