/* Ars Imperii prototype. These are the artwork-free original theme and renderer fallbacks;
   selectable themes override them in themes.css. */

:root {
  --bg: #f1ece0;
  --panel: #fffcf4;
  --ink: #23201b;
  --muted: #6d6556;
  --line: #d9d0bc;
  --accent: #8a3b12;
  --accent-ink: #fff;
  --error: #a3261c;
  --info: #2d5b86;
  --focus: #f2c200;

  /* Faction colours: counter face and printed ink. */
  --p0-face: #9dbde0;
  --p0-ink: #10233d;
  --p1-face: #e3a391;
  --p1-ink: #3a120c;
  --neutral-face: #d6d0c4;
  --neutral-ink: #4a453c;

  /* Type. System stacks only: the CSP allows no third-party font hosts (themes may self-host). */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-ui);
  --font-map: var(--font-ui);
  --font-counter: "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow", sans-serif;
  --radius: 6px;
  --counter-radius: 2px;

  /* The printed map. */
  --map-bg: var(--bg);
  --hex-line: #857b66;
  --hex-line-width: .8;
  --hex-number: #8f8672;
  --t-plains: #ece4ba;
  --t-forest: #a3bf8b;
  --t-hills: #dcc094;
  --t-mountains: #b3a797;
  --t-city: #e8dfc6;
  --t-water: #a8cade;
  --unexplored: #5d574b;
  --unexplored-line: #6a6356;
  --fogged: rgb(70 64 52 / .32);
  --glyph-forest: #5f8750;
  --glyph-hills: #98774a;
  --glyph-mountains: #7b6f61;
  --city-block: #3b3630;
  --city-block-line: #f6f0df;
  --road: #8b5a2b;
  --river: #3f7fb8;
  --label: #2e2a25;
  --label-halo: #f5efdc;
  --capital-star: #7a1d12;

  color-scheme: light dark;
}

/* The original theme has this dark UI; the other themes set fixed palettes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root[data-theme="boxed"] {
    --bg: #1c1a16;
    --panel: #26231e;
    --ink: #ece6d8;
    --muted: #a8a08f;
    --line: #3d382f;
    --accent: #c8672f;
    --error: #ef8a7e;
    --info: #8cb8e0;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 var(--font-ui);
}

h1, h2, h3 { margin: 0; line-height: 1.2; font-family: var(--font-display); }
h1 { font-size: 1.15rem; }
h2 { font-size: 1.05rem; margin-bottom: .6rem; }
h3 { font-size: .95rem; margin-bottom: .4rem; }
p { margin: .3rem 0; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.error { color: var(--error); }

button {
  font: inherit;
  padding: .4rem .8rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.small { padding: .1rem .5rem; font-size: .85rem; margin-left: .4rem; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

input, select {
  font: inherit;
  padding: .35rem .5rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink);
  width: 100%;
}
input[type="checkbox"], input[type="radio"] { width: auto; margin: 0; }

.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .6rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.topbar .spacer { flex: 1; }
.topbar .back { text-decoration: none; }
.turn-info { display: flex; gap: .6rem; align-items: center; }
.phase { text-transform: capitalize; color: var(--muted); }

/* The game header is a single toolbar. Long scenario names surrender space before
   turn controls wrap; exceptionally narrow screens can scroll the row horizontally. */
.game-topbar { flex-wrap: nowrap; overflow-x: auto; gap: .75rem; }
.game-topbar .topbar-nav, .game-topbar .topbar-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
}
.game-topbar .game-title {
  flex: 1 1 auto;
  min-width: 4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-topbar .turn-info { flex: none; white-space: nowrap; }

.chip {
  display: inline-block;
  padding: .05rem .5rem;
  border-radius: 3px;
  font-weight: 600;
  font-size: .85rem;
}
.chip.owner-0 { background: var(--p0-face); color: var(--p0-ink); }
.chip.owner-1 { background: var(--p1-face); color: var(--p1-ink); }

/* ---- lobby ---- */

.lobby {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 1rem;
  padding: 1rem;
  max-width: 1100px;
  margin: 0 auto;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1rem;
}
ul.game-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.game-group h2 { font-size: .95rem; margin: .4rem 0 .3rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.game-list li.your-turn strong::before { content: "● "; color: var(--accent); }
.game-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  row-gap: .1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line);
}
.game-list li > :not(button) { grid-column: 1; }
.game-list li > button { grid-column: 2; grid-row: 1 / span 2; }
.game-list .status { font-size: .88rem; color: var(--muted); }
.game-list li.your-turn .status { color: var(--accent); font-weight: 600; }
.game-list li:last-child { border-bottom: 0; }
.game-list a { text-decoration: none; color: var(--ink); }
.game-list a:hover strong { color: var(--accent); }
.status.completed { color: var(--muted); }
.new-game { display: flex; flex-direction: column; gap: .7rem; align-self: start; }
.field { display: flex; flex-direction: column; gap: .2rem; font-size: .9rem; }
.field span { color: var(--muted); }
.row { display: flex; gap: .7rem; }
.row > * { flex: 1; min-width: 0; }
[hidden] { display: none !important; }
fieldset.mode { border: 0; margin: 0; padding: 0; gap: .3rem; }
fieldset.mode legend { color: var(--muted); padding: 0; margin-bottom: .2rem; }
fieldset.mode label { display: flex; gap: .4rem; align-items: center; color: var(--ink); }
.mode-fields { display: flex; flex-direction: column; gap: .7rem; }
.mode-fields.row { flex-direction: row; }

.auth-wrap { display: grid; place-items: start center; padding: 2rem 1rem; }
.auth { width: min(100%, 24rem); display: flex; flex-direction: column; gap: .8rem; }
.small-print { font-size: .85rem; }
button.link { border: 0; background: none; color: var(--accent); padding: 0; text-decoration: underline; align-self: flex-start; }
.boot-error { padding: 1rem; }

.your-turn-badge { background: var(--accent); color: var(--accent-ink); border-radius: 3px; padding: .05rem .5rem; font-weight: 700; font-size: .85rem; }
.waiting { color: var(--muted); font-style: italic; }
.card.waiting-card { border-color: var(--info); }
.card.since { display: flex; gap: .5rem; align-items: center; justify-content: space-between; border-color: var(--accent); }

/* ---- game ---- */

.game {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  height: calc(100vh - 52px);
}
.map-area { position: relative; min-width: 0; min-height: 0; }
.map-wrap {
  position: absolute;
  inset: 0;
  overflow: auto;
  cursor: grab;
}
.map-wrap.panning, .map-wrap.panning .cell, .map-wrap.panning .counter { cursor: grabbing; }
.zoom-controls {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  gap: .3rem;
  box-shadow: 0 1px 4px rgb(0 0 0 / .25);
  border-radius: 4px;
}
.zoom-controls button { min-width: 2.4rem; font-weight: 700; }
.side {
  overflow-y: auto;
  border-left: 1px solid var(--line);
  background: var(--panel);
  padding: .75rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .75rem; }
.card.help p { color: var(--muted); font-size: .9rem; }
.card.over { border-color: var(--accent); }
.card.advance { border-color: #2f6b2f; }
.card .buttons { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }
.card ul { list-style: none; margin: .3rem 0; padding: 0; }
.card li { padding: .15rem 0; }
.odds { font-weight: 600; }
.last-combat p { font-size: .9rem; }

.log-card { flex: 1; display: flex; flex-direction: column; min-height: 12rem; }
.log {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 22rem;
  font-size: .85rem;
}
.log li { padding: .12rem 0 .12rem .5rem; border-left: 3px solid transparent; }
.log li.owner-0 { border-left-color: var(--p0-face); }
.log li.owner-1 { border-left-color: var(--p1-face); }
.log li.turn { margin-top: .5rem; font-weight: 700; }
.log li.combat, .log li.capture, .log li.over { font-weight: 600; }
.log li.loss { color: var(--error); }
.log li.sighting { font-style: italic; }
.log li.contact { font-weight: 600; }
.log li.production { color: var(--muted); }
.production-controls { display: flex; flex-direction: column; gap: .4rem; margin-top: .4rem; }
.production-controls .buttons { margin-top: 0; }
progress { width: 100%; height: .5rem; accent-color: var(--accent); }
.city-list li { display: flex; justify-content: space-between; gap: .5rem; cursor: pointer; }
.city-list li:hover { color: var(--accent); }
.treasury { font-weight: 600; }
.log li.fresh { background: color-mix(in srgb, var(--accent) 12%, transparent); }

.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / .45);
  padding: 1rem;
}
.overlay[hidden] { display: none; }
.overlay.opaque { background: var(--bg); }
.overlay-card {
  background: var(--panel);
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 24rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%) translateY(200%);
  max-width: calc(100vw - 2rem);
  padding: .6rem 1rem;
  border-radius: 6px;
  background: var(--error);
  color: #fff;
  transition: transform .2s;
  pointer-events: none;
}
.toast.info { background: var(--info); }
.toast.show { transform: translateX(-50%) translateY(0); }

@media (max-width: 900px) {
  .lobby { grid-template-columns: minmax(0, 1fr); }
  .game { grid-template-columns: minmax(0, 1fr); height: auto; }
  .map-area { height: 70vh; }
  .side { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---- board (original printed-map fallbacks) ----------------------------- */

svg.board { display: block; user-select: none; }
.cell { cursor: pointer; }
.hex { stroke: var(--hex-line); stroke-width: var(--hex-line-width); }
.t-plains { fill: var(--t-plains); }
.t-forest { fill: var(--t-forest); }
.t-hills { fill: var(--t-hills); }
.t-mountains { fill: var(--t-mountains); }
.t-city { fill: var(--t-city); }
.t-water { fill: var(--t-water); }
.hex.unexplored { fill: var(--unexplored); stroke: var(--unexplored-line); }
.fogged { fill: var(--fogged); pointer-events: none; }
.glyph-forest { fill: var(--glyph-forest); }
.glyph-hills { fill: none; stroke: var(--glyph-hills); stroke-width: 1.6; stroke-linecap: round; }
.glyph-mountains { fill: var(--glyph-mountains); }
.hex-number { font: 6px var(--font-ui); fill: var(--hex-number); text-anchor: middle; pointer-events: none; }

.city-block { fill: var(--city-block); stroke: var(--city-block-line); stroke-width: 1.2; pointer-events: none; }
.city-block.capital { stroke-width: 2.4; }
.city-name.capital { font-size: 8.5px; }
.city-name.town { font-weight: 600; font-size: 7px; }
.road { stroke: var(--road); stroke-width: 2.2; stroke-dasharray: 5 2.5; stroke-linecap: round; pointer-events: none; opacity: .85; }
.river { stroke: var(--river); stroke-width: 3.2; stroke-linecap: round; pointer-events: none; }
.road.building { stroke-dasharray: 1.5 3; opacity: .7; }
.airfield { pointer-events: none; }
.airfield .runway { fill: var(--city-block); stroke: var(--city-block-line); stroke-width: .8; }
.airfield.owner-0 .runway { stroke: var(--p0-face); stroke-width: 1.4; }
.airfield.owner-1 .runway { stroke: var(--p1-face); stroke-width: 1.4; }
.airfield.building .runway { fill: none; stroke: var(--city-block); stroke-dasharray: 2 2; }
.hl-work { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 3 2; }
.hl-goal { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.goal-line { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 1.5 3; stroke-linecap: round; opacity: .55; pointer-events: none; }
.goal-line.strong { stroke-width: 2.2; opacity: .9; }
.orders-mark { font: 700 7px var(--font-counter); fill: var(--accent); pointer-events: none; }
.counter.arrived .face { stroke: var(--accent); stroke-width: 2.6; }
.counter.picked .face { stroke: var(--focus); stroke-width: 3; }
.city-name {
  font: 700 7.5px var(--font-map);
  fill: var(--label);
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--label-halo);
  stroke-width: 2.4px;
  pointer-events: none;
}
.flag { pointer-events: none; }
.flag-pole { stroke: var(--city-block); stroke-width: 1; }
.flag-cloth { stroke-width: .8; }
.flag.owner-0 .flag-cloth { fill: var(--p0-face); stroke: var(--p0-ink); }
.flag.owner-1 .flag-cloth { fill: var(--p1-face); stroke: var(--p1-ink); }
.flag.neutral .flag-cloth { fill: var(--neutral-face); stroke: var(--neutral-ink); }
.capital-star { font-size: 8px; fill: var(--capital-star); }

.hl { pointer-events: none; }
.hl-reach { fill: rgb(255 255 255 / .5); stroke: #2f6b2f; stroke-width: 1.6; }
.hl-zoc { fill: rgb(255 200 110 / .6); stroke: #b5651d; stroke-width: 1.6; }
.hl-target { fill: rgb(200 40 20 / .14); stroke: #b3261e; stroke-width: 1.8; stroke-dasharray: 4 3; }
.hl-target.chosen { fill: rgb(200 40 20 / .3); stroke-dasharray: none; stroke-width: 3; }
.hl-attacked { fill: url(#hatch); }
.hatch-line { stroke: rgb(90 80 60 / .35); stroke-width: 2; }
.hl-advance { fill: rgb(60 160 60 / .3); stroke: #2f6b2f; stroke-width: 3; animation: pulse 1.4s ease-in-out infinite; }
.hl-selected { fill: none; stroke: var(--focus); stroke-width: 3; }
@keyframes pulse { 50% { stroke-opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .hl-advance { animation: none; } }

.move-path { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 5 4; stroke-linecap: round; pointer-events: none; }

.counter { cursor: pointer; }
.counter-art { pointer-events: none; }
.counter .face { stroke-width: 1; rx: var(--counter-radius); }
.counter.owner-0 .face { fill: var(--p0-face); stroke: var(--p0-ink); }
.counter.owner-1 .face { fill: var(--p1-face); stroke: var(--p1-ink); }
.counter .ink { fill: none; stroke-width: 1.3; }
.counter.owner-0 .ink { stroke: var(--p0-ink); }
.counter.owner-1 .ink { stroke: var(--p1-ink); }
.counter .factors, .counter .ink-text { font: 700 9px var(--font-counter); text-anchor: middle; }
.counter.owner-0 .factors, .counter.owner-0 .ink-text { fill: var(--p0-ink); }
.counter.owner-1 .factors, .counter.owner-1 .ink-text { fill: var(--p1-ink); }
.counter.owner--1 .face { fill: var(--neutral-face); stroke: var(--neutral-ink); }
.counter.owner--1 .ink { stroke: var(--neutral-ink); }
.counter.owner--1 .factors, .counter.owner--1 .ink-text { fill: var(--neutral-ink); }
.counter .ink-fill { stroke: none; }
.counter.owner-0 .ink-fill { fill: var(--p0-ink); }
.counter.owner-1 .ink-fill { fill: var(--p1-ink); }
.counter.owner--1 .ink-fill { fill: var(--neutral-ink); }
.chip.owner--1 { background: var(--neutral-face); color: var(--neutral-ink); }
.counter.spent { opacity: .55; }
.counter.ghost { opacity: .5; }
.counter.out-of-supply .face { stroke: #d97706; stroke-width: 2.5; stroke-dasharray: 4 2; }
.counter .supply-mark { font: 700 6px sans-serif; fill: #b45309; }
.counter .cargo-mark { font: 700 6.5px sans-serif; text-anchor: end; fill: #1e3a5f; }
.counter .hull { stroke-width: 1.2; }
.counter .hull.submerged { stroke-dasharray: 2 1.5; }
.counter .ship-code { font-size: 6.5px; }
.counter.ghost .face { stroke-dasharray: 3 2; }
.counter .ghost-turn { font: 700 6px sans-serif; text-anchor: end; fill: #3b3630; }
.counter.selected .face { stroke: var(--focus); stroke-width: 3; }
.counter.attacker .face { stroke: #b3261e; stroke-width: 3; }
.counter.supporter .face { stroke: #b3261e; stroke-width: 2.5; stroke-dasharray: 4 2; }
.counter.ranged .face { stroke: #6b4a1f; stroke-width: 2; stroke-dasharray: 3 2; }
.hl-range { fill: rgb(107 74 31 / .12); stroke: #6b4a1f; stroke-width: 1.5; stroke-dasharray: 2 3; }
.range-note { font-size: .9em; }
.counter.advancer .face { stroke: #2f8a2f; stroke-width: 3.5; animation: pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .counter.advancer .face { animation: none; } }

/* ---- Rules reference ---------------------------------------------------- */
.nav-link { color: var(--ink); text-decoration: none; padding: .3rem .6rem; border-radius: 4px; }
.nav-link:hover, .nav-link:focus-visible { background: var(--line); }
main.rules { max-width: 1000px; margin: 0 auto; padding: 1rem 16px 3rem; display: grid; gap: 1rem; }
.rules-intro { color: var(--muted); }
.rules-section h2 { font-size: 1.2rem; }
.rules-section ul, .rules-section ol { padding-left: 1.3rem; list-style: disc; }
.rules-section ol { list-style: decimal; }
.rules-toc ol { list-style: decimal; }
.rules-section li { margin: .25rem 0; }
.rules-toc ol { columns: 2; padding-left: 1.3rem; margin: 0; }
.table-wrap { overflow-x: auto; margin: .5rem 0; }
.rules-table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.rules-table th, .rules-table td { border-bottom: 1px solid var(--line); padding: .35rem .5rem; text-align: left; vertical-align: middle; }
.rules-table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rules-table tbody th { font-weight: 600; white-space: nowrap; }
.units-table td:nth-child(n+2):nth-child(-n+7) { text-align: center; }
.unit-cell { display: inline-flex; align-items: center; gap: .5rem; }
.rules-counter { flex: none; }
.rules-counter .counter { pointer-events: none; }
.crt td { text-align: center; font-family: ui-monospace, monospace; font-weight: 600; }
.crt-AE { color: #a3261c; } .crt-AR { color: #b8641a; } .crt-EX { color: #7a5a14; }
.crt-DR { color: #2d6a3a; } .crt-DE { color: #1d4d8a; } .crt-NE { color: var(--muted); }
.crt-legend { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .8rem; margin: .5rem 0; }
.crt-legend dt { font-family: ui-monospace, monospace; font-weight: 700; }
.crt-legend dd { margin: 0; }
@media (max-width: 640px) { .rules-toc ol { columns: 1; } }

/* ---- Login title panel ---------------------------------------------------- */
.auth-wrap { gap: 1rem; }
.hero { width: min(760px, 100%); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.hero-strip { display: block; width: 100%; height: auto; }
.hero-title { padding: .8rem 1rem 1rem; }
.hero-title h2 { font-size: 1.8rem; margin-bottom: .3rem; }
.hero-title p { color: var(--muted); max-width: 44rem; }

.group-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.group-list .group-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.group-list .buttons, .group-list .arrived-list { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }

/* Replaying the opponent's attacks on the map. */
.layer-fx { pointer-events: none; }
.fx-hidden { visibility: hidden; }
.fx-target { fill: rgb(200 40 20 / .18); stroke: var(--error); stroke-width: 3; animation: fx-pulse .6s ease-in-out infinite alternate; }
@keyframes fx-pulse { from { stroke-opacity: .35; } to { stroke-opacity: 1; } }
.fx-arrow { stroke: var(--error); stroke-width: 3.2; stroke-linecap: round; }
.fx-arrow.support { stroke-width: 2; stroke-dasharray: 5 3; }
.fx-head { fill: var(--error); }
.fx-badge rect { fill: var(--panel); stroke: var(--ink); stroke-width: 1; }
.fx-badge text { font: 700 9px var(--font-ui); fill: var(--ink); text-anchor: middle; }
.fx-badge.result-DE rect, .fx-badge.result-DR rect { stroke: var(--error); stroke-width: 2; }
.fx-lost { animation: fx-fade 1.6s ease-in forwards; }
.fx-cross { stroke: var(--error); stroke-width: 3.2; stroke-linecap: round; }
@keyframes fx-fade { 0%, 45% { opacity: 1; } 100% { opacity: 0; } }
.fx-retreat.out { animation: fx-fade 1.2s ease-in forwards; }
.replay-bar { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 5; display: flex; gap: 8px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; box-shadow: 0 2px 8px rgb(0 0 0 / .2); max-width: calc(100% - 32px); }
@media (prefers-reduced-motion: reduce) { .fx-target, .fx-lost, .fx-retreat.out { animation: none; } }