/*
  CIVITAS styles. One file, no preprocessor, no build step (RD-0015).

  The palette is the one the test harness already uses, so the game and its tests
  look like the same project. Layout is flexbox and grid only: the map canvas is
  sized in JavaScript from its wrapper, so every rule here has to leave that
  wrapper free to take the space that is left over rather than dictate a size.
*/

:root {
  --bg: #12161c;
  --panel: #1b2129;
  --panel-2: #222a33;
  --line: #2b333d;
  --text: #dfe4ea;
  --muted: #8b95a1;
  --pass: #5cb85c;
  --fail: #e05252;
  --skip: #c9a227;
  --accent: #4a90d9;
  --radius: 4px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 "Segoe UI", system-ui, sans-serif;
  /* Below the minimum frame size the page scrolls. A map canvas squeezed to zero
     height is worse than a scrollbar, and mapView measures its wrapper. */
  overflow: auto;
}

h2 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

code {
  font-family: Consolas, "Courier New", monospace;
}

/* ── Frame ─────────────────────────────────────────────────────────────── */

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 900px;
  min-height: 620px;
}

#topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex: none;
}

.brand {
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
}

#status {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  flex: 1;
  min-width: 0;
}

.top-actions {
  display: flex;
  gap: 6px;
  flex: none;
}

#stage {
  display: flex;
  flex: 1;
  min-height: 0;
}

#map-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* The canvas is measured from this element, so it must own nothing else. */
#map-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

#map {
  display: block;
  cursor: crosshair;
}

#map-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 10px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  flex: none;
  min-height: 30px;
}

#hover {
  display: flex;
  gap: 10px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zoom {
  display: flex;
  gap: 4px;
}

.zoom button {
  width: 28px;
  padding: 2px 0;
}

#side {
  width: 288px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: var(--panel);
  border-left: 1px solid var(--line);
  overflow-y: auto;
}

.panel {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
}

#minimap {
  display: block;
  width: 100%;
  height: auto;
  background: #0b0e12;
  border: 1px solid var(--line);
  cursor: pointer;
}

/* The end-turn button is the one control that must never scroll out of reach, so
   it sticks to the bottom of the side column however long the panels above get. */
#turn-button {
  position: sticky;
  bottom: -8px;
  margin-top: auto;
  padding: 6px 0 8px;
  background: var(--panel);
}

#bottom {
  display: flex;
  gap: 8px;
  flex: none;
  height: 132px;
  padding: 8px;
  background: var(--panel);
  border-top: 1px solid var(--line);
}

#log-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

#log {
  flex: 1;
  overflow-y: auto;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 6px;
}

#bottom-side {
  width: 288px;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.key-hint,
.hash-line {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
}

.hash-line code {
  color: var(--text);
}

/* ── Controls ──────────────────────────────────────────────────────────── */

button {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 3px 10px;
  cursor: pointer;
}

button:hover:not(:disabled) {
  border-color: var(--accent);
}

button:disabled {
  opacity: 0.45;
  cursor: default;
}

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0c1218;
  font-weight: 600;
}

button.wide {
  display: block;
  width: 100%;
}

button.attention {
  border-color: var(--skip);
  color: var(--skip);
}

button.bad {
  border-color: var(--fail);
  color: var(--fail);
}

button.tiny {
  padding: 0 6px;
  font-size: 12px;
  line-height: 18px;
}

button.link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  text-decoration: underline;
}

input,
select {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 3px 6px;
}

input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
}

/* ── Shared text bits ──────────────────────────────────────────────────── */

.muted {
  color: var(--muted);
}

.small,
.tiny {
  font-size: 12px;
}

.good {
  color: var(--pass);
}

.bad {
  color: var(--fail);
}

.warn,
.attention {
  color: var(--skip);
}

.row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.label {
  color: var(--muted);
}

.value {
  font-variant-numeric: tabular-nums;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}

.field {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.panel-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.clickable {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.bar {
  height: 6px;
  background: #0b0e12;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: var(--accent);
}

/* ── Status line ───────────────────────────────────────────────────────── */

.stat {
  display: inline-flex;
  gap: 5px;
  align-items: baseline;
  white-space: nowrap;
}

.stat-label {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-value {
  font-variant-numeric: tabular-nums;
}

/* ── City and player lists ─────────────────────────────────────────────── */

.city-row,
.player-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  border-radius: var(--radius);
}

.city-row {
  cursor: pointer;
}

.city-row:hover {
  background: var(--line);
}

.city-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.city-size {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.city-item,
.city-food {
  font-size: 12px;
  color: var(--muted);
}

.city-row.disorder .city-name {
  color: var(--fail);
}

.city-row.celebrating .city-name {
  color: var(--pass);
}

.swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.player-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.relation {
  font-size: 12px;
  color: var(--muted);
}

/* The declare-war button rides along in the row, so it has to stay out of the way
   of the leader's name. */
.player-row button {
  flex: none;
  padding: 1px 6px;
  font-size: 11px;
}

.player-row.dead .player-name {
  text-decoration: line-through;
  color: var(--muted);
}

.player-row.own .player-name {
  font-weight: 600;
}

/* ── Message log ───────────────────────────────────────────────────────── */

.log-line {
  display: flex;
  gap: 8px;
  padding: 1px 0;
}

.log-turn {
  flex: none;
  width: 32px;
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.log-text {
  min-width: 0;
}

.log-line.turn {
  border-top: 1px solid var(--line);
  margin-top: 2px;
  padding-top: 3px;
}

.log-line.turn .log-text {
  color: var(--accent);
}

.log-line.good .log-text {
  color: var(--pass);
}

.log-line.bad .log-text {
  color: var(--fail);
}

/* ── Modal host ────────────────────────────────────────────────────────── */

#modal-host {
  position: fixed;
  inset: 0;
  background: rgba(6, 9, 13, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 20;
}

.modal {
  display: flex;
  flex-direction: column;
  width: min(520px, 100%);
  max-height: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

.modal.wide-modal {
  width: min(1020px, 100%);
}

.modal-title {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.modal-body {
  padding: 14px;
  overflow: auto;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}

.form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.form-row > .label {
  width: 150px;
  flex: none;
}

.form-row input[type="text"],
.form-row input[type="number"],
.form-row input[type="password"],
.form-row select {
  flex: 1;
  min-width: 0;
}

/* ── Sign-in screen (RD-0064) ──────────────────────────────────────────── */

/*
 * Narrower than the game's dialogs, and it has no close button: on a server
 * deployment there is nothing behind it to close it onto.
 */
.modal.auth-modal {
  width: min(400px, 100%);
}

.modal.auth-modal .form-row > label {
  width: 140px;
  flex: none;
}

/* Keeps its height whether or not it says anything, so the panel does not jump. */
.auth-message {
  min-height: 1.4em;
  margin-top: 10px;
  font-size: 0.92em;
}

/* ── Save browser ──────────────────────────────────────────────────────── */

.save-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
}

.save-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.save-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.save-meta {
  color: var(--muted);
  font-size: 12px;
}

/* ── Government and rates ──────────────────────────────────────────────── */

.gov-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.gov-card {
  padding: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.gov-name {
  font-weight: 600;
  margin-bottom: 2px;
}

.rate-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.rate-row .label {
  width: 110px;
  flex: none;
}

.rate-row .value {
  width: 48px;
  text-align: right;
}

/* ── Score table ───────────────────────────────────────────────────────── */

.score-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.score-table th,
.score-table td {
  padding: 3px 8px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.score-table th:first-child,
.score-table td:first-child {
  text-align: left;
}

.score-table tr.own {
  color: var(--accent);
  font-weight: 600;
}

/* ── City window ───────────────────────────────────────────────────────── */

.city-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.city-body {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.city-left,
.city-middle,
.city-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.tile-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tile-row {
  display: flex;
  gap: 2px;
}

.tile-cell {
  width: 58px;
  height: 58px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 11px;
  line-height: 1.2;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.tile-cell.empty {
  background: transparent;
  border-color: transparent;
}

.tile-cell.clickable {
  cursor: pointer;
}

.tile-cell.clickable:hover {
  border-color: var(--accent);
}

.tile-cell.worked {
  border-color: var(--pass);
  background: #1d2a1d;
}

.tile-cell.center {
  border-color: var(--accent);
  background: #17222e;
}

.tile-cell.taken {
  opacity: 0.45;
}

.tile-cell.unknown {
  background: #0b0e12;
  color: var(--muted);
}

.tile-yield {
  font-variant-numeric: tabular-nums;
}

.tile-mark,
.tile-unit {
  color: var(--muted);
  font-size: 10px;
}

.citizens {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.specialist {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 12px;
}

.output-panel,
.building-panel,
.production-panel {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
}

.building-panel .wonder {
  color: var(--skip);
}

.current-item {
  margin-bottom: 6px;
}

.tabs {
  display: flex;
  gap: 4px;
  margin: 8px 0 6px;
  flex-wrap: wrap;
}

.tab.active {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Automation (sections 110, 111) ────────────────────────────────────── */

/* The per-city and per-empire switch: label, three buttons, one line of prose. */
.auto-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0 2px;
}

.auto-row .auto-tabs {
  margin: 0;
}

.auto-group {
  margin-bottom: 10px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.auto-group h3 {
  margin: 0 0 4px;
}

.auto-group .form-row {
  margin-bottom: 2px;
}

/* A city the machine gives orders to says so in the city list. */
.city-auto {
  flex: none;
  font-size: 11px;
  color: var(--accent);
}

/* The advisor line above the production list. */
.advice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
  font-size: 12px;
}

/* Nothing buildable in the tab is the case that needs the player to act. */
.advice.attention {
  border-left-color: var(--skip);
}

.advice-text {
  min-width: 0;
}

/* The action is the point of the line, so the wrapping text takes the squeeze. */
.advice button {
  flex: none;
}

.item-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
}

/* The tooltip host of a row: a disabled button gets no mouse events, so its own
   `title` never appears. The wrapper is not disabled, so its title does. */
.item-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

button.item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  width: 100%;
}

button.item.advised {
  border-color: var(--accent);
}

.item-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-flag {
  color: var(--accent);
  flex: none;
  margin-left: auto;
}

.item-cost {
  color: var(--muted);
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* Why the row above is greyed out. Indented under the button rather than inside it,
   so the item name stays on one line at any panel width. */
.item-reason {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  padding: 0 6px 2px 8px;
}

/* One technology away: worth reading, so it is not the same grey as a row that
   needs half an era. */
.item-wrap.close .item-reason {
  color: var(--skip);
}

/* ── Tech tree ─────────────────────────────────────────────────────────── */

.tech-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.tech-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
}

.tech-card {
  padding: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius);
}

.tech-card.known {
  border-left-color: var(--pass);
  opacity: 0.7;
}

.tech-card.available {
  border-left-color: var(--accent);
}

.tech-card.locked {
  border-left-color: var(--line);
  opacity: 0.6;
}

.tech-card.target {
  border-color: var(--skip);
  border-left-color: var(--skip);
  opacity: 1;
}

.tech-name {
  font-weight: 600;
}

.tech-cost {
  color: var(--muted);
  font-size: 12px;
}

.tech-prereq,
.tech-unlocks {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

.tech-head-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Icons (RD-0063) ───────────────────────────────────────────────────── */

/* Optional art. Every icon is drawn by `artIcon` and may be absent, so no layout
   here may depend on one being present: the rules below size an icon that exists
   and change nothing about the row it sits in when it does not. */

.art-icon {
  flex: none;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.icon-small {
  width: 18px;
  height: 18px;
}

.icon-tiny {
  width: 14px;
  height: 14px;
}

.icon-large {
  width: 40px;
  height: 40px;
}

.tech-icon {
  width: 32px;
  height: 32px;
}

/* A `.field` is a label on the left and a value on the right. An icon joins the
   label rather than being spaced away from it: the auto margin swallows the free
   space that `justify-content` would otherwise put between the two. */
.field > .art-icon + .label {
  margin-right: auto;
}

/* The status line aligns on the baseline, which an image has no useful one of. */
.stat > .art-icon {
  align-self: center;
}

.gov-name,
.panel-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* The emblem beside the civilization picker in the new-game dialog. It keeps its
   box whether or not art is registered, so the row does not jump on a change. */
.civ-emblem {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Busy overlay and boot failure ─────────────────────────────────────── */

#busy {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 9, 13, 0.6);
  color: var(--text);
  letter-spacing: 0.06em;
  cursor: progress;
}

#boot-error {
  position: fixed;
  inset: 24px;
  z-index: 40;
  margin: 0;
  padding: 16px;
  overflow: auto;
  white-space: pre-wrap;
  background: #1a0f0f;
  border: 1px solid var(--fail);
  border-radius: 6px;
  color: #ffd7d7;
}

.space-panel { border-top: 1px solid var(--ui-border-dark, #888); margin-top: 12px; padding-top: 8px; }
.space-panel button, .treaty-offer button { margin: 3px; }
.treaty-offer { padding: 6px; border: 1px solid #888; margin-bottom: 6px; }

/* Responsive controls and roomier desktop panels. */
#app { min-width: 0; min-height: 560px; }
#topbar { flex-wrap: wrap; gap: 10px 20px; padding: 10px 16px; }
.top-actions { flex-wrap: wrap; }
#side { width: clamp(330px, 28vw, 430px); gap: 14px; padding: 14px; overflow-y: auto; }
#side .panel { padding: 14px; flex-shrink: 0; border-radius: 10px; }
#side h2 { font-size: 12px; margin-bottom: 10px; }
#side .grid2 { gap: 8px 16px; }
#turn-button { position: sticky; bottom: 0; background: var(--panel); padding: 8px 0; margin-top: auto; }
button, select, input { min-height: 36px; }
button { border-radius: 6px; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#minimap { max-width: 100%; height: auto; }
#map { touch-action: none; }
#map-bar { flex-wrap: wrap; }
.zoom button { width: 44px; min-height: 44px; }
.stack-picker { display: grid; gap: 6px; margin-bottom: 16px; }
.stack-entry { display: grid; grid-template-columns: 28px 1fr; gap: 2px 8px; text-align: left; padding: 8px; }
.stack-entry small { grid-column: 2; color: var(--muted); white-space: normal; }
.stack-entry[aria-pressed="true"] { border-color: var(--accent); background: #243d55; }
.city-help p { margin: 8px 0; }
.city-help { max-width: 340px; margin-bottom: 12px; }
.specialist-help { display: block; color: var(--muted); font-weight: normal; white-space: normal; }
.specialist { align-items: center; gap: 8px; }
.tile-cell { border: 1px solid var(--line); color: white; padding: 0; border-radius: 4px; }
.tile-cell:disabled { opacity: 1; cursor: default; }
.tile-cell.worked { outline: 2px solid #ffd479; outline-offset: -3px; }
.city-body > div { min-width: 0; }
.modal { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
.score-table { display: block; overflow-x: auto; }

@media (max-width: 1050px) {

#app { height: auto; min-height: 100dvh; }
#stage { display: flex; flex-direction: column; flex: none; }
#map-area { flex: none; height: 52dvh; min-height: 310px; }
#side { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: visible; padding: 10px; gap: 10px; }
#side .panel { min-width: 0; }
#side .panel:has(#unit), #turn-button { grid-column: 1 / -1; }
#side .panel:has(#unit) { order: -1; }
#turn-button { position: sticky; bottom: 0; z-index: 5; }
#topbar { padding: 8px 10px; }
.brand { display: none; }
#status { flex-basis: 100%; font-size: 13px; }
.top-actions { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; }
.top-actions button { flex-shrink: 0; }
button, select, input, button.tiny { min-height: 44px; }
button.tiny { min-width: 44px; }
#bottom { flex-direction: column; min-height: 0; }
#bottom-side { display: none; }
#log-panel { max-height: 150px; }
.modal { width: calc(100vw - 16px); max-width: none; max-height: calc(100dvh - 16px); }
.city-body { display: flex; flex-direction: column; gap: 20px; }
.city-left, .city-middle, .city-right { width: 100%; flex: none; }
.city-help { max-width: none; }
.tile-grid { width: 100%; max-width: 340px; }
.tile-cell { width: 18%; min-height: 46px; }
.city-right .item-list { max-height: 40dvh; }
.form-row { flex-wrap: wrap; }

}

body.touch-layout #app { height: auto; min-height: 100dvh; }
body.touch-layout #stage { display: flex; flex-direction: column; flex: none; }
body.touch-layout #map-area { flex: none; height: 52dvh; min-height: 310px; }
body.touch-layout #side { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: visible; padding: 10px; gap: 10px; }
body.touch-layout #side .panel { min-width: 0; }
body.touch-layout #side .panel:has(#unit),body.touch-layout #turn-button { grid-column: 1 / -1; }
body.touch-layout #side .panel:has(#unit) { order: -1; }
body.touch-layout #turn-button { position: sticky; bottom: 0; z-index: 5; }
body.touch-layout #topbar { padding: 8px 10px; }
body.touch-layout .brand { display: none; }
body.touch-layout #status { flex-basis: 100%; font-size: 13px; }
body.touch-layout .top-actions { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; }
body.touch-layout .top-actions button { flex-shrink: 0; }
body.touch-layout button,body.touch-layout select,body.touch-layout input,body.touch-layout button.tiny { min-height: 44px; }
body.touch-layout button.tiny { min-width: 44px; }
body.touch-layout #bottom { flex-direction: column; min-height: 0; }
body.touch-layout #bottom-side { display: none; }
body.touch-layout #log-panel { max-height: 150px; }
body.touch-layout .modal { width: calc(100vw - 16px); max-width: none; max-height: calc(100dvh - 16px); }
body.touch-layout .city-body { display: flex; flex-direction: column; gap: 20px; }
body.touch-layout .city-left,body.touch-layout .city-middle,body.touch-layout .city-right { width: 100%; flex: none; }
body.touch-layout .city-help { max-width: none; }
body.touch-layout .tile-grid { width: 100%; max-width: 340px; }
body.touch-layout .tile-cell { width: 18%; min-height: 46px; }
body.touch-layout .city-right .item-list { max-height: 40dvh; }
body.touch-layout .form-row { flex-wrap: wrap; }

@media (max-width: 560px) { #side { grid-template-columns: minmax(0,1fr); } #side .panel { grid-column: 1; } }

.modal-title, .modal-footer { flex-shrink: 0; }
.modal-body { min-height: 0; }
.stack-picker { max-height: 280px; overflow-y: auto; }
.city-instructions summary { cursor: pointer; color: #80b7ee; min-height: 36px; padding: 6px 0; }
.specialist { flex-wrap: wrap; }
.specialist .label { min-width: 100px; }
@media (max-width:1050px) { #modal-host { padding: 8px; } .modal.wide-modal { width: 100%; } }
body.touch-layout #modal-host { padding: 8px; }

.touch-hint { display: none; font-size: 12px; color: var(--muted); }
@media (max-width:1050px), (pointer:coarse) { .touch-hint { display: block; width: 100%; } }
body.touch-layout .touch-hint { display:block; width:100%; }

/* Workspace 1.1: views keep their identity when docked or resized. */
#app { height: auto; min-height: 100dvh; }
.layout-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:8px 14px; background:var(--panel); border-bottom:1px solid var(--line); }
.layout-toolbar [hidden] { display:none; }
.layout-profile, .layout-status, .layout-instructions { font-size:12px; color:var(--muted); }
.layout-status { margin-left:auto; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; padding:12px; align-items:start; }
.workspace.has-main.has-right { grid-template-columns:minmax(0,1fr) minmax(300px,360px); }
.workspace.has-left.has-main { grid-template-columns:minmax(280px,320px) minmax(0,1fr); }
.workspace.has-left.has-main.has-right { grid-template-columns:minmax(240px,280px) minmax(0,1fr) minmax(280px,320px); }
.workspace.has-left.has-right:not(.has-main) { grid-template-columns:repeat(2,minmax(0,1fr)); }
.layout-zone { display:flex; flex-direction:column; gap:12px; min-width:0; }
.layout-zone[data-zone="bottom"] { grid-column:1/-1; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.layout-zone.zone-empty { display:none; }
.zone-title { display:none; }
.workspace-pane { min-width:0; border:1px solid var(--line); border-radius:10px; background:var(--panel); overflow:hidden; }
.pane-header { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 10px; border-bottom:1px solid var(--line); }
.pane-grip { display:flex; align-items:center; gap:8px; flex:1; border:0; background:transparent; padding:0; text-align:left; font-size:12px; font-weight:650; min-width:0; }
.pane-grip:disabled { color:var(--text); opacity:1; cursor:default; }
.grip-icon { color:var(--accent); }
.pane-grip:disabled .grip-icon { display:none; }
.pane-controls { display:none; flex-wrap:wrap; gap:4px; }
.pane-controls select { width:105px; }
.pane-controls button { min-width:36px; }
.pane-content { min-width:0; overflow:auto; max-height:var(--pane-height,400px); }
.pane-content > .panel { border:0; background:transparent; padding:12px; }
.workspace-pane[data-view="map"] .pane-content { height:var(--pane-height,calc(100dvh - 230px)); min-height:160px; max-height:none; }
body .workspace #map-area { height:100%; min-height:0; }
body .workspace #map-wrap { min-height:0; }
body .workspace #minimap { max-height:220px; object-fit:contain; }
body .workspace #turn-button { position:static; padding:12px; margin:0; background:transparent; }
body .workspace #bottom-side { display:block; width:auto; padding:12px; }
body .workspace #log-panel { padding:12px; height:var(--pane-height,160px); max-height:none; }
body .workspace #log { min-height:80px; }
.pane-resize { display:none; width:100%; min-height:22px; padding:0; border:0; border-top:1px solid var(--line); border-radius:0; touch-action:none; cursor:ns-resize; }
.workspace.editing .pane-controls { display:flex; }
.workspace.editing .pane-grip { touch-action:none; cursor:grab; }
.workspace.editing .pane-resize { display:block; }
.workspace.editing .zone-title { display:block; color:var(--accent); font-size:12px; padding:8px; }
.workspace.editing .layout-zone { border:1px dashed #52677d; border-radius:8px; padding:8px; min-height:110px; }
.workspace.editing .zone-empty { display:flex; }
.workspace.editing .layout-zone[data-zone="bottom"] .zone-title { grid-column:1/-1; }
.workspace-pane.is-dragging { opacity:0.4; }
.workspace-pane.drop-before { box-shadow:0 -5px 0 var(--accent); }
.workspace-pane.drop-after { box-shadow:0 5px 0 var(--accent); }
.layout-zone.drop-zone { outline:3px solid var(--accent); background:#23364a; }
.layout-ghost { position:fixed; pointer-events:none; padding:10px 18px; background:#245580; color:white; border-radius:8px; z-index:100; box-shadow:0 6px 20px #0008; }
.workspace.compact { display:flex; flex-direction:column; padding:8px; gap:10px; }
.workspace.compact .layout-zone { width:100%; }
.workspace.compact .layout-zone[data-zone="bottom"] { display:flex; }
.workspace.compact .layout-zone.zone-empty { display:none; }
.workspace.compact.editing .layout-zone.zone-empty { display:flex; }
.workspace.compact .workspace-pane[data-view="map"] .pane-content { height:var(--pane-height,52dvh); }
.workspace.compact .pane-grip, .workspace.compact .pane-controls button, .workspace.compact .pane-controls select { min-height:44px; }
.workspace.compact .pane-resize { min-height:32px; }
@media (max-width:600px) { .layout-instructions { flex-basis:100%; } .layout-status { margin-left:0; } }

.workspace-pane { container-type: inline-size; }
.workspace-pane[data-view="unit"] .pane-content { max-height:var(--pane-height,640px); }
.workspace .field { min-width:0; gap:8px; }
.workspace .field .value { text-align:right; overflow-wrap:anywhere; }
@container (max-width: 380px) {
  .grid2 { grid-template-columns:minmax(0,1fr); gap:7px; }
}

.workspace .pane-content { height:var(--pane-height,auto); }
.workspace-pane[data-view='map'] .pane-content { height:var(--pane-height,calc(100dvh - 230px)); }
.workspace.compact .workspace-pane[data-view='map'] .pane-content { height:var(--pane-height,52dvh); }

/* Release 1.3: warm cartographic palette and a viewport-sized desktop. */
:root { --bg:#101c20; --panel:#18292e; --panel-2:#20343a; --line:#365058; --text:#edf0e8; --muted:#b1c0bc; --accent:#dbb974; --radius:8px; }
button.primary { background:#dbb974; color:#17262a; border-color:#ead097; font-weight:700; }
button:hover:not(:disabled) { border-color:var(--accent); }
button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
#topbar { gap:8px 18px; padding:8px 16px; }
#topbar .brand { font-size:13px; }
#status { font-size:12px; gap:2px 12px; }
.top-actions { order:3; width:100%; gap:4px; overflow:visible; flex-wrap:wrap; }
.top-menu { position:relative; }
.top-menu summary { cursor:pointer; list-style:none; padding:5px 13px; border-radius:5px; font-size:14px; }
.top-menu summary::after { content:'⌄'; color:var(--muted); margin-left:12px; }
.top-menu[open] summary { background:var(--panel-2); color:var(--accent); }
.menu-popover { position:absolute; top:100%; left:0; z-index:25; width:270px; max-width:calc(100vw - 20px); max-height:65dvh; overflow:auto; display:flex; flex-direction:column; gap:5px; padding:10px; background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:0 18px 45px #0008; }
.menu-popover button { width:100%; text-align:left; }
.menu-popover .buttons { display:flex; flex-direction:column; gap:5px; }
.menu-check { display:flex; align-items:center; gap:10px; padding:3px 5px; cursor:pointer; }
.menu-check input { min-height:24px; accent-color:var(--accent); }
.layout-toolbar { padding:4px 12px; gap:5px 12px; }
.layout-toolbar button { min-height:28px; font-size:12px; }
.pane-header { padding:3px 9px; }
.pane-grip { min-height:26px; }
.workspace-pane { border-radius:7px; }
.workspace-pane[hidden] { display:none !important; }
.pane-resize { text-align:right; padding-right:8px; cursor:nwse-resize; }
.workspace.has-main.has-right { grid-template-columns:minmax(0,1fr) minmax(240px,min(var(--right-width,330px),45vw)); }
.workspace.has-left.has-main { grid-template-columns:minmax(240px,min(var(--left-width,300px),45vw)) minmax(0,1fr); }
.workspace.has-left.has-main.has-right { grid-template-columns:minmax(220px,min(var(--left-width,280px),30vw)) minmax(0,1fr) minmax(220px,min(var(--right-width,300px),30vw)); }
.layout-zone[data-zone="bottom"] { display:flex; flex-flow:row wrap; }
.layout-zone[data-zone="bottom"] > .workspace-pane { flex:1 1 var(--pane-width,280px); max-width:100%; }
.layout-zone[data-zone="main"] > .workspace-pane { max-width:var(--pane-width,100%); width:100%; }
@media(min-width:1051px) {
 body:not(.touch-layout) { overflow:hidden; }
 body:not(.touch-layout) #app { height:100dvh; min-height:0; overflow:hidden; }
 .workspace:not(.compact) { flex:1; min-height:0; grid-template-rows:minmax(0,1fr) auto; align-items:stretch; gap:8px; padding:8px; overflow:hidden; }
 .workspace:not(.compact) .layout-zone { min-height:0; overflow:auto; gap:8px; }
 .workspace:not(.compact) .layout-zone[data-zone="main"] > .workspace-pane[data-view="map"] { flex:1; min-height:200px; display:flex; flex-direction:column; }
 .workspace:not(.compact) .workspace-pane[data-view="map"] .pane-content { height:auto; flex:1; min-height:160px; }
 .workspace:not(.compact) .workspace-pane { flex-shrink:0; }
 .workspace:not(.compact) .layout-zone[data-zone="bottom"] { max-height:24dvh; }
 body .workspace:not(.compact) #log-panel { height:var(--pane-height,95px); padding:7px 12px; }
 .workspace:not(.compact) #log { min-height:40px; }
 .workspace:not(.compact) .pane-content > .panel { padding:9px; }
 .workspace:not(.compact) #minimap { max-height:120px; width:100%; }
 .workspace:not(.compact) .stack-picker { max-height:120px; margin-bottom:8px; }
 .workspace:not(.compact) .stack-entry { padding:5px; }
 .workspace:not(.compact).editing { overflow:auto; }
 .workspace:not(.compact).editing .layout-zone { overflow:visible; }
 .workspace:not(.compact).editing .workspace-pane[data-view="map"] .pane-content { flex:none; height:var(--pane-height,50dvh); }
}
.modal { border:1px solid #526762; border-radius:14px; box-shadow:0 30px 100px #0009; width:660px; }
.modal-title { padding:16px 22px; font-size:20px; background:var(--panel); }
.modal-body { padding:20px 24px; }
.modal-footer { padding:14px 24px; gap:10px; background:#132329; }
.modal-body h3 { margin:26px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line); color:var(--accent); font-size:13px; letter-spacing:.07em; }
.dialog-intro { color:var(--muted); margin:0 0 18px; }
.modal[data-dialog="newGame"] { width:920px; }
.modal[data-dialog="newGame"] .modal-body { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 24px; align-items:start; }
.modal[data-dialog="newGame"] .modal-body > h3,
.modal[data-dialog="newGame"] .modal-body > p.dialog-intro,
.modal[data-dialog="newGame"] .modal-body > .muted,
.modal[data-dialog="newGame"] .modal-body > .warn { grid-column:1/-1; }
.form-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 12px; }
.form-row > label { flex:1 1 160px; color:var(--text); }
.form-row > select,.form-row > input:not([type="checkbox"]) { flex:1 1 160px; min-width:0; width:auto; max-width:100%; border-radius:6px; }
.modal[data-dialog="newGame"] .form-row > label { flex-basis:100%; font-weight:600; }
.field-help { color:var(--muted); font-size:12px; line-height:1.6; margin:2px 0 0; flex:1 0 100%; }
.modal[data-dialog="options"] .form-row { padding:10px 0; border-bottom:1px solid #36505866; }
.modal[data-dialog="options"] label:has(input[type="checkbox"]) { display:flex; gap:12px; align-items:center; }
input[type="checkbox"],input[type="range"] { accent-color:var(--accent); }
.seed-reroll { align-self:center; justify-self:start; }
.combat-odds { font-size:25px; color:var(--accent); font-weight:650; }
.combat-table { border-collapse:collapse; width:100%; margin:12px 0; }
.combat-table th,.combat-table td { padding:7px 8px; text-align:right; border-bottom:1px solid var(--line); }
.combat-table th:first-child { text-align:left; font-weight:500; }
.combat-modal .primary { margin-top:18px; }
.research-tools { display:flex; gap:12px; flex-wrap:wrap; margin:16px 0; align-items:center; }
.research-tools input[type="search"] { flex:1; min-width:180px; }
.research-tools label { display:flex; align-items:center; gap:8px; }
.tech-card { padding:16px; border-radius:9px; }
.tech-prereq,.tech-unlocks { font-size:12px; line-height:1.6; }
.tech-card button { margin-top:12px; }
.tech-estimate { color:var(--accent); font-size:12px; margin-top:10px; }
.public-landing { position:fixed; inset:0; z-index:20; overflow:auto; background:#10242a; }
.landing-header { max-width:1240px; margin:auto; padding:30px 44px; display:flex; align-items:center; gap:16px; color:#a3b5ad; font-size:12px; border-bottom:1px solid #bba27633; }
.landing-header .brand { display:block; color:#e5c688; font-size:21px; }
.landing-header a { margin-left:auto; color:#dbe2d7; text-decoration:none; font-size:14px; }
.landing-content { display:grid; grid-template-columns:1.05fr 1fr; gap:38px; padding:55px 44px 35px; max-width:1240px; margin:auto; }
.landing-copy { align-self:center; }
.eyebrow { color:#d7b777; font-size:11px; letter-spacing:.2em; font-weight:700; margin:0 0 22px; }
.landing-copy h1 { font-family:Georgia,serif; font-size:clamp(38px,4.8vw,68px); font-weight:400; letter-spacing:-.04em; line-height:1.08; margin:0 0 24px; color:#f3edde; }
.landing-intro { max-width:460px; font-size:17px; line-height:1.8; color:#bbc9c3; }
.landing-play { padding:13px 27px; font-size:16px; margin:18px 0 10px; }
.landing-note { font-size:11px; color:#a9b9b3; line-height:1.7; }
.landing-map { position:relative; align-self:center; min-height:360px; aspect-ratio:1.15; overflow:hidden; border:1px solid #bba27644; border-radius:50% 50% 5px 5px; background:repeating-linear-gradient(0deg,transparent 0 38px,#9dad9f12 39px 40px),repeating-linear-gradient(90deg,transparent 0 38px,#9dad9f12 39px 40px),radial-gradient(ellipse at center,#2a474b,#142d32); }
.map-orbit { position:absolute; inset:12%; border:1px solid #cbb37655; border-radius:50%; transform:rotate(-25deg); }
.orbit-two { inset:24% 3%; transform:rotate(24deg); }
.map-land { position:absolute; background:#839276; box-shadow:inset 10px 10px 50px #c6b37a; }
.land-one { width:47%;height:52%;top:17%;left:12%;clip-path:polygon(12% 14%,40% 0,61% 18%,78% 5%,100% 33%,78% 55%,95% 72%,62% 100%,38% 77%,26% 45%,0 32%); }
.land-two { width:29%;height:46%;top:37%;right:9%;clip-path:polygon(31% 0,90% 10%,74% 40%,100% 55%,55% 100%,20% 76%,30% 52%,0 27%); }
.land-three { width:12%;height:10%;top:19%;right:16%;clip-path:polygon(0 50%,45% 0,100% 65%,25% 100%); }
.map-city { position:absolute;color:#fff1b9;font-size:26px;text-shadow:0 0 18px #efc785; }
.city-one { top:34%;left:34%; }.city-two { top:58%;right:21%; }
.map-north { position:absolute;top:7%;left:49%;color:#cfb77d;font-family:Georgia,serif; }
.map-caption { position:absolute;bottom:7%;left:0;right:0;text-align:center;color:#cfb77d;font-size:11px; }
.landing-features { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; border-top:1px solid #bba27644; padding-top:28px; }
.feature-number { color:#d7b777; font-size:11px; letter-spacing:.1em; }
.landing-features h2 { color:#f3edde; font-size:17px; letter-spacing:0; text-transform:none; margin:9px 0; font-weight:500; }
.landing-features p { color:#aebfb8; font-size:13px; line-height:1.7; margin:0; }
.modal[data-dialog="title"] { width:1060px; background:#10242a; }
.modal[data-dialog="title"] .landing-content { padding:10px; gap:25px; }
.modal[data-dialog="title"] .landing-copy h1 { font-size:48px; }
.modal[data-dialog="title"] .landing-map { min-height:250px; }
.modal[data-dialog="title"] .landing-features { gap:20px; }
@media(max-width:700px) {
 .landing-header { padding:20px; }.landing-content { grid-template-columns:1fr; padding:30px 22px; gap:25px; }
 .landing-map { min-height:230px; max-height:300px; width:100%; aspect-ratio:1.5; }
 .landing-features { grid-template-columns:1fr; gap:22px; }
 .landing-copy h1,.modal[data-dialog="title"] .landing-copy h1 { font-size:42px; }
 .modal[data-dialog="title"] .landing-map { display:none; }
 .modal[data-dialog="newGame"] .modal-body { grid-template-columns:1fr; }
 .modal-body { padding:16px; }.modal-title { padding:12px 16px; }
 .top-menu summary { padding:8px; font-size:13px; }.top-menu summary::after { margin-left:4px; }
 .top-menu:nth-child(n+5) .menu-popover { left:auto; right:0; }
 .menu-popover { position:fixed; top:150px; left:10px !important; right:10px !important; width:auto; }
 .workspace.compact .layout-zone[data-zone="bottom"] { flex-direction:column; }
 .workspace.compact .layout-zone[data-zone="bottom"] > .workspace-pane { flex-basis:auto !important; width:100%; }
 .workspace.compact .layout-zone[data-zone="main"] > .workspace-pane { max-width:100%; }
}

.modal-title { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.field-explanation { flex:1 0 100%; color:var(--muted); font-size:12px; }
.field-explanation summary { cursor:pointer; color:var(--accent); padding:3px 0; }
.modal[data-dialog="newGame"] .modal-body h3 { margin:8px 0 2px; }
.modal[data-dialog="newGame"] .form-row { margin:0; }
@media(min-width:1051px) {
 .workspace:not(.compact) [data-view="unit"] .grid2 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px 10px; font-size:12px; }
 .workspace:not(.compact) .stack-picker h3 { font-size:12px; margin:3px 0; }
 .workspace:not(.compact) [data-view="turn"] { position:sticky;bottom:0;z-index:4; }
}

/* 1.4: phone workspace with persistent controls and optional empire goals. */
#objectives { padding:12px; }
.objective-card { padding:12px; margin:10px 0; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); }
.objective-card h3 { margin:0 0 6px; font-size:15px; color:var(--accent); }
.objective-card p { margin:0 0 10px; color:var(--muted); font-size:13px; }
.objective-card progress { width:calc(100% - 80px); height:9px; accent-color:var(--accent); margin-right:10px; }
.objective-card button { margin:10px 6px 0 0; }
.objective-card[data-complete="true"] { border-color:#668d6f; }
.objective-total { color:var(--accent); }
.objective-teaser { flex:none; width:100%; border:0; border-radius:0; text-align:left; background:#243b3e; color:#efcf91; font-size:12px; padding:7px 12px; }
.objective-toast { position:fixed; top:15px; left:50%; transform:translateX(-50%); z-index:19; background:#244539; border:1px solid #82af7e; border-radius:10px; padding:12px 18px; max-width:90vw; pointer-events:none; opacity:0; transition:opacity .2s; }
.objective-toast.visible { opacity:1; }
.mobile-nav,.mobile-quick,.mobile-command-slot { display:none; }
body.phone-layout { overflow:hidden; overscroll-behavior:none; }
body.phone-layout #app { height:100dvh; min-height:0; min-width:0; overflow:hidden; padding-top:env(safe-area-inset-top); }
body.phone-layout #topbar { flex-wrap:wrap; padding:5px 10px 0; gap:3px; }
body.phone-layout #topbar .brand { display:none; }
body.phone-layout #status { flex:1 0 100%; flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; padding:2px; scrollbar-width:none; }
body.phone-layout #status .stat { flex:none; }
body.phone-layout .top-actions { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
body.phone-layout .top-menu { flex:none; }
body.phone-layout .top-menu summary { min-height:44px; display:flex; align-items:center; padding:8px 10px; }
body.phone-layout .menu-popover { position:fixed; top:82px; left:8px !important; right:8px !important; width:auto; max-height:calc(100dvh - 180px); }
body.phone-layout .layout-toolbar { display:none; }
body.phone-layout .workspace { display:block; flex:1; min-height:0; overflow:auto; padding:6px 8px; padding-bottom:62px; overscroll-behavior:contain; }
body.phone-layout .workspace .layout-zone { display:contents !important; }
body.phone-layout .workspace .workspace-pane { display:none !important; }
body.phone-layout .workspace .workspace-pane[data-phone-visible="true"] { display:block !important; width:100%; max-width:none; margin-bottom:8px; }
body.phone-layout .workspace .pane-content { height:auto; max-height:none; }
body.phone-layout .workspace .pane-header { padding:4px 10px; }
body.phone-layout .workspace .pane-grip { min-height:28px; }
body.phone-layout .workspace .pane-controls,body.phone-layout .workspace .pane-resize,body.phone-layout .zone-title { display:none !important; }
body.phone-layout .workspace [data-view="map"][data-phone-visible="true"] { height:100%; margin:0; display:flex !important; flex-direction:column; }
body.phone-layout .workspace [data-view="map"] .pane-header { display:none; }
body.phone-layout .workspace [data-view="map"] .pane-content { flex:1; height:100%; min-height:0; }
body.phone-layout .workspace #map-area { height:100%; min-height:0; }
body.phone-layout #map-wrap { flex:1; min-height:50px; }
body.phone-layout #map-bar { padding:4px 8px; flex-wrap:nowrap; min-height:48px; }
body.phone-layout #hover { max-height:40px; overflow:auto; font-size:11px; }
body.phone-layout .touch-hint { display:none; }
body.phone-layout .mobile-quick { display:flex; flex:none; border-top:1px solid var(--line); }
body.phone-layout .mobile-quick button { flex:1; min-width:0; border-radius:0; border:0; border-right:1px solid var(--line); font-size:12px; }
body.phone-layout .mobile-command-slot { display:block; padding:0 12px 12px; }
body.phone-layout #unit-commands .buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
body.phone-layout #unit-commands button { white-space:normal; height:auto; }
body.phone-layout .workspace [data-view="turn"][data-phone-visible="true"] { position:fixed; bottom:calc(58px + env(safe-area-inset-bottom)); left:8px; right:8px; width:auto; margin:0; z-index:6; border:0; box-shadow:0 -6px 15px #101c2080; }
body.phone-layout [data-view="turn"] .pane-header { display:none; }
body.phone-layout .workspace #turn-button { padding:4px 0; }
body.phone-layout .mobile-nav { display:flex; flex:none; height:calc(58px + env(safe-area-inset-bottom)); padding:4px 4px calc(4px + env(safe-area-inset-bottom)); background:#14262b; border-top:1px solid var(--line); z-index:7; }
body.phone-layout .mobile-nav button { flex:1; min-width:0; padding:5px 2px; font-size:12px; border:0; border-radius:8px; background:transparent; color:var(--muted); }
body.phone-layout .mobile-nav button[aria-current="page"] { background:#34463f; color:#f4d699; box-shadow:inset 0 3px var(--accent); font-weight:700; }
body.phone-layout button,body.phone-layout select,body.phone-layout input:not([type="checkbox"]),body.phone-layout summary { min-height:44px; touch-action:manipulation; }
body.phone-layout input,body.phone-layout select { font-size:16px; }
body.phone-layout #modal-host { padding:6px; padding-top:max(6px,env(safe-area-inset-top)); padding-bottom:max(6px,env(safe-area-inset-bottom)); z-index:30; }
body.phone-layout .modal { max-height:100%; width:100%; }
body.phone-layout .modal-footer { padding:10px 14px; flex-wrap:wrap; }
body.phone-layout .objective-teaser { min-height:44px; line-height:1.3; }
body.phone-layout .objective-toast { top:80px; }
@media(max-height:500px) {
 body.phone-layout #status { display:none; }
 body.phone-layout .objective-teaser { display:none; }
 body.phone-layout .workspace { padding-bottom:52px; }
 body.phone-layout .mobile-quick { position:absolute; right:12px; bottom:110px; border:1px solid var(--line); opacity:.95; }
 body.phone-layout .mobile-quick button { padding:4px 10px; }
 body.phone-layout .menu-popover { top:48px; }
}

body.phone-layout [data-view="unit"] .pane-content { display:flex; flex-direction:column; }
body.phone-layout #unit { display:contents; }
body.phone-layout #unit > .panel-title { order:-1; padding:12px 12px 0; }
body.phone-layout #unit > .stack-picker { order:0; margin:12px; }
body.phone-layout .mobile-command-slot { order:1; }
body.phone-layout #unit > .grid2 { order:2; padding:12px; }
body.phone-layout #unit > .small.muted { display:none; }
body.phone-layout [data-menu="commands"],body.phone-layout [data-menu="views"] { display:none; }

.objective-toast { width:max-content; }

/* 1.5: readable controls, negotiation cards and explicit map intent. */
:root { --text-scale:1; }
body { font-size:calc(14px * var(--text-scale)); }
.modal-body p,.modal-body label,.modal-body select,.modal-body input,.modal-body button,
.workspace .pane-content p,.workspace .pane-content button,.workspace .grid2,
.workspace .player-name,.workspace .relation { font-size:calc(14px * var(--text-scale)); }
[hidden] { display:none !important; }
.map-mode { display:flex; align-items:center; gap:8px; padding:5px 8px; background:#14262b; border-bottom:1px solid var(--line); flex:none; }
.map-mode button { flex:none; min-height:36px; }
.map-mode span { font-size:calc(11px * var(--text-scale)); color:var(--muted); line-height:1.3; }
.map-inspect[aria-pressed="true"],.map-mode.choosing { background:#34463f; color:#f4d699; }
.map-mode.choosing span { color:#f4d699; }
.negotiation-card { border:1px solid var(--line); border-radius:10px; padding:16px; }
.negotiation-card > input { display:block; width:100%; margin-top:8px; }
.negotiation-card > button { margin:8px 8px 0 0; }
.negotiation-card .gold-label { display:block; }
.negotiation-reasons { margin:12px 0; }
.negotiation-reasons summary { cursor:pointer; color:var(--accent); }
.negotiation-reasons dl { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 16px; }
.negotiation-reasons dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; }
.negotiation-forecast { border-left:3px solid #c89a6a; padding-left:12px; }
.negotiation-forecast[data-accepted="true"] { border-color:#82af7e; }
.negotiation-result { padding:12px; background:#243b3e; border-radius:8px; }
.player-row { flex-wrap:wrap; gap:8px; padding:12px 0; }
.player-row .player-name { flex:1 1 140px; overflow-wrap:anywhere; }
.player-row button { min-height:40px; }
button:focus-visible,summary:focus-visible,input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
body.phone-layout .map-mode { padding:4px 6px; }
body.phone-layout .map-mode button { min-height:44px; }
body.phone-layout .map-mode span { font-size:11px; }
body.phone-layout .mobile-nav button { font-size:11px; overflow-wrap:anywhere; line-height:1.2; }
body.phone-layout .player-row button { flex:1 1 120px; }
body.phone-layout .modal-body { overscroll-behavior:contain; }
body.phone-layout #map-bar #hover { flex:1; min-width:0; }
body.phone-layout .zoom { flex:none; }
body.phone-layout .zoom button { min-width:44px; }
@media(max-height:600px) {
 body.phone-layout .objective-teaser { display:none; }
 body.phone-layout .map-mode span { display:none; }
 body.phone-layout .mobile-quick { position:static; opacity:1; }
 body.phone-layout #hover { max-height:24px; }
}

/* 1.6: trade, garrison and explicit production queue. */
.trade-panel { border:1px solid var(--line); border-radius:10px; padding:14px; margin:12px 0; }
.trade-panel summary { cursor:pointer; padding:12px 0; color:var(--accent); }
.trade-panel fieldset { min-width:0; margin:12px 0; border:1px solid var(--line); border-radius:8px; }
.trade-panel .form-row { align-items:center; }
.trade-offer { padding:12px; background:var(--panel-2); margin-bottom:12px; }
.trade-offer button { margin:5px; }
.garrison-panel,.production-queue { border-top:1px solid var(--line); margin-top:18px; padding-top:12px; }
.garrison-row,.queue-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 0; }
.garrison-row span,.queue-row span { flex:1 1 150px; }
.queue-add { margin:4px 0 8px; width:100%; }
.trade-alert { width:100%; color:var(--accent); margin:8px 0; }

.map-mode { flex-wrap:wrap; }
.map-mode span { flex:1 1 100px; }
.map-confirm { background:#34463f; color:#f4d699; }

body.phone-layout .map-mode.choosing span { flex-basis:100%; order:-1; }
body.phone-layout .map-mode.choosing button { flex:1; padding-inline:8px; }

/* Actionable emergencies and supply, kept inside scrolling city pane. */
.crisis-card { border:1px solid #cf954b; border-left:4px solid #dca449; background:#32291f; border-radius:6px; padding:10px; margin:8px 0; }
.crisis-card p { margin:5px 0; }
.crisis-card button { margin:3px 4px 3px 0; }
.support-summary { padding:2px 8px 7px; opacity:.85; }
.negotiation-forecast { border-left:3px solid #c5a267; padding:8px 12px; }

.city-garrison-count { font-size:.8em; color:var(--muted); }
.garrison-row small { flex:1 1 180px; }

/* 1.9: softer surfaces and responsive negotiations. */
:root { --radius:10px; --muted:#a8b8b5; }
button,select,input:not([type="checkbox"]),summary { border-radius:var(--radius); }
button { min-height:38px; }
button:disabled { opacity:.55; cursor:not-allowed; }
button:focus-visible,select:focus-visible,summary:focus-visible,input:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.workspace-pane { border-radius:14px; }
.pane-header { padding:10px 14px; }
.workspace .pane-content { scrollbar-width:thin; scrollbar-color:#637d77 transparent; }
.modal { border-radius:18px; }
.modal-body { padding:20px; }
.modal-body h2 { font-size:1.1rem; letter-spacing:0; text-transform:none; color:var(--text); }
.city-row,.player-row { border-radius:10px; }
.city-row:hover,.player-row:hover { background:#ffffff08; }
.negotiation-nav { display:flex; gap:6px; background:var(--bg); padding:5px; border-radius:14px; margin:16px 0; }
.negotiation-nav button { flex:1; border:1px solid transparent; background:transparent; }
.negotiation-nav button[aria-pressed="true"] { background:var(--panel-2); border-color:var(--accent); color:var(--text); }
.negotiation-contracts > label { display:block; margin:12px 0 6px; }
.negotiation-contracts > select { width:100%; margin-bottom:14px; }
.negotiation-card,.trade-panel { background:var(--panel); border-radius:14px; }
.trade-panel { margin:0; }
.trade-panel > h3 { margin-top:0; }
.trade-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }

.trade-composer fieldset { margin:0; padding:12px; background:var(--panel-2); border-radius:12px; }
.trade-composer legend { padding:0 6px; font-weight:600; }
.trade-composer .form-row { display:flex; flex-direction:column; align-items:stretch; gap:6px; margin:8px 0; }
.trade-composer .form-row input,.trade-composer .form-row select { flex:none; width:100%; min-height:42px; }
.trade-composer > .form-row { display:flex; flex-wrap:wrap; align-items:center; }
.trade-summary { padding:12px 16px; border:1px solid var(--line); border-radius:12px; background:var(--bg); overflow-wrap:anywhere; }
.trade-summary p { margin:4px 0; }
.trade-offer { border-radius:12px; border:1px solid var(--accent); }
.negotiation-forecast { margin:0; border-radius:8px; background:#ffffff05; }
.negotiation-forecast[data-chance="high"] { border-color:#82af7e; }
.trade-composer > button.primary { width:100%; min-height:46px; }
body.phone-layout .modal-body { padding:14px; }
body.phone-layout .negotiation-nav button { min-height:44px; }
@media(max-width:540px) {
 .trade-fields { grid-template-columns:minmax(0,1fr); }
 .trade-panel { padding:10px; }
 .negotiation-card { padding:12px; }
}

.trade-composer .form-row > label { flex:none; }
.trade-composer > .form-row { flex-direction:row; justify-content:space-between; }
.trade-composer .form-row input[type="checkbox"] { width:24px; min-height:24px; }

.settlement-help { flex-basis:100%; padding:8px 10px; background:var(--panel-2); border-radius:10px; }
.settlement-help summary { cursor:pointer; color:var(--accent); }
.settlement-help p { margin:6px 0; max-width:60ch; }

.trade-composer > p,.trade-composer .trade-summary,.trade-composer .negotiation-forecast { margin:12px 0; }

/* Public entry and searchable in-game manual. */
.public-landing { color:#e7ede5; background:radial-gradient(ellipse at 80% 10%,#234b48 0,transparent 52%),#10242a; }
.public-landing button,.public-landing summary { min-height:44px; }
.landing-actions { display:flex;align-items:center;gap:16px;flex-wrap:wrap; }
.landing-login { border:1px solid #bca877;color:#f2e6c8;background:transparent;padding:12px 24px; }
.landing-account,.landing-faq { grid-column:1/-1; }
.landing-account { padding:32px;border:1px solid #acbbad44;background:#c7e3c509;border-radius:12px; }
.public-landing h2 { color:#f2e6c8;text-transform:none;font-size:26px;letter-spacing:0; }
.landing-account p,.landing-faq p { max-width:760px;line-height:1.8;color:#bdcbc6;font-size:15px; }
.landing-faq details { border-bottom:1px solid #acbbad33;padding:12px 0; }
.landing-faq summary { cursor:pointer;align-content:center;font-size:16px; }
.landing-footer { display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;max-width:1152px;margin:0 auto;padding:28px 22px 40px;border-top:1px solid #acbbad33;color:#abbdb6;font-size:12px; }
.guide-modal { width:min(1060px,96vw);max-width:1060px; }
.guide-modal .modal-body { padding:22px; }
.guide-intro { line-height:1.65;max-width:780px; }
.guide-search { width:100%;box-sizing:border-box;min-height:44px;margin:10px 0 18px;font-size:16px; }
.guide-toc { display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px; }
.guide-toc button { padding:7px 10px;font-size:12px;white-space:normal; }
.guide-section { border:1px solid var(--border,#65766b);border-radius:6px;margin:10px 0;scroll-margin-top:10px; }
.guide-section>summary { cursor:pointer;font-size:17px;font-weight:600;padding:15px; }
.guide-section[open]>summary { border-bottom:1px solid var(--border,#65766b); }
.guide-section-body { padding:4px 18px 16px; }
.guide-section p { line-height:1.75;max-width:82ch; }
.guide-rule,.guide-event { padding:12px 0;border-bottom:1px solid #88998b44;overflow-wrap:anywhere; }
.guide-rule h3,.guide-event h3 { font-size:16px;line-height:1.5; }
.guide-rule dl { display:grid;grid-template-columns:minmax(130px,1fr) 2fr;gap:6px 16px;font-size:13px;line-height:1.5; }
.guide-rule dt { opacity:.8; }.guide-rule dd { margin:0; }
.guide-modal [hidden] { display:none!important; }
@media(max-width:600px) {
 .landing-account { padding:22px; }.landing-header { flex-wrap:wrap; }
 .guide-modal .modal-body { padding:12px; }.guide-toc { gap:5px; }
 .guide-rule dl { grid-template-columns:1fr;gap:3px; }.guide-rule dd { margin-bottom:8px; }
}