/* Frontend v2 (Betreiberkonzept 9.8.): Vollbild-Raster ohne Body-Scroll.
   Main so groß wie möglich, Ränder so schlank wie nötig. */
:root {
  --bg: #0b100c;
  --panel: rgba(20, 28, 24, .94);
  --panel-soft: rgba(30, 40, 33, .82);
  --line: rgba(208, 190, 140, .22);
  --gold: #d0a951;
  --gold-soft: #e8d28a;
  --ink: #e8e4d2;
  --muted: #9aa393;
}
* { box-sizing: border-box; }
/* Livebeweis-Fund 9.8.: display-Regeln duerfen das hidden-Attribut nie
   ueberstimmen — sonst faengt ein unsichtbares Overlay alle Klicks. */
[hidden] { display: none !important; }
.pwa-update-banner {
  position: fixed; z-index: 3000; top: 10px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px);
  padding: 9px 12px; border: 1px solid var(--gold); background: #111713;
  color: var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.pwa-update-banner button { padding: 5px 9px; border: 1px solid var(--line-strong); background: var(--panel-soft); }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  color: var(--ink);
  background: radial-gradient(1200px 700px at 65% -10%, #1c2a20, var(--bg));
  font: 15px/1.45 "Segoe UI", system-ui, sans-serif;
}

.skip-link {
  position: fixed;
  top: 6px;
  left: 50%;
  z-index: 100;
  padding: 9px 14px;
  border: 2px solid var(--gold-soft);
  border-radius: 3px;
  background: #08100b;
  color: var(--gold-soft);
  font-weight: 750;
  transform: translate(-50%, -160%);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Einheitliche Hinweise für Maus, Tastatur und Touch-Langdruck. Die Position
   setzt der Client viewport-sicher; das Element selbst fängt keine Klicks. */
.game-tooltip {
  position: fixed;
  z-index: 100;
  width: max-content;
  max-width: min(360px, calc(100vw - 16px));
  padding: 8px 10px;
  pointer-events: none;
  border: 1px solid rgba(232, 201, 122, .7);
  border-radius: 3px;
  background: rgba(7, 12, 9, .98);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55), inset 3px 0 var(--gold);
  color: var(--ink);
  font-size: .76rem;
  line-height: 1.4;
  white-space: pre-line;
}
.game-tooltip::after {
  position: absolute;
  left: var(--tooltip-arrow-x, 50%);
  width: 8px;
  height: 8px;
  content: "";
  background: #070c09;
  transform: translateX(-50%) rotate(45deg);
}
.game-tooltip[data-placement="top"]::after {
  bottom: -5px;
  border-right: 1px solid rgba(232, 201, 122, .7);
  border-bottom: 1px solid rgba(232, 201, 122, .7);
}
.game-tooltip[data-placement="bottom"]::after {
  top: -5px;
  border-top: 1px solid rgba(232, 201, 122, .7);
  border-left: 1px solid rgba(232, 201, 122, .7);
}
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { font-family: Georgia, serif; }

/* Login */
.login-overlay { position: fixed; inset: 0; display: grid; place-items: center; }
.auth-shell { width: min-content; max-width: 96vw; max-height: 94vh; overflow: auto; scrollbar-width: thin; }
.login-card {
  display: grid; gap: 10px; width: min(420px, 92vw); padding: 26px;
  border: 1px solid var(--line); background: var(--panel); }
.login-wordmark {
  display: block;
  width: 100%;
  margin: -8px 0 3px;
}
.login-wordmark img { display: block; width: 100%; height: auto; }
.login-card h1 { margin: 0; color: var(--gold); letter-spacing: .06em; }
.login-card p { margin: 0 0 8px; color: var(--muted); font-size: .85rem; }
.login-card label { display: grid; gap: 4px; font-size: .85rem; color: var(--muted); }
.login-card input { padding: 9px; color: var(--ink); border: 1px solid var(--line); background: rgba(8, 13, 10, .8); }
.login-card button { padding: 11px; border: 0; background: linear-gradient(160deg, #e8c97a, #b8892f); color: #1c1608; font-weight: 700; }
.login-card button.auth-switch { border: 1px solid var(--line); background: transparent; color: var(--muted); font-weight: 600; }
.login-card button.auth-switch:hover { border-color: var(--gold); color: var(--gold-soft); }
.login-card small { min-height: 1em; color: #d98d7c; }
.login-card .field-note { display: inline; min-height: 0; margin-left: 4px; color: var(--muted); font-size: .7rem; }
.join-card-v2 {
  display: grid; gap: 16px; width: min(900px, 94vw); padding: 22px;
  border: 1px solid var(--gold); background: rgba(10, 16, 12, .96); box-shadow: 0 28px 90px rgba(0, 0, 0, .7); }
.join-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.join-heading > div:last-child { text-align: right; }
.join-heading h1 { margin: 0; color: var(--gold-soft); }
.join-heading p { margin: 3px 0 0; color: var(--muted); }
.join-factions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.join-factions legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.faction-choice { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; padding: 7px; border: 1px solid var(--line); background: rgba(18, 27, 21, .9); cursor: pointer; }
.faction-choice:hover { border-color: var(--gold); }
.faction-choice:has(input:focus-visible) { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.faction-choice:has(input:checked) { border-color: var(--faction-choice, var(--gold)); box-shadow: inset 0 -3px var(--faction-choice, var(--gold)); background: rgba(40, 48, 35, .96); }
.faction-choice input { position: absolute; opacity: 0; pointer-events: none; }
.faction-choice img { width: 64px; height: 52px; object-fit: cover; border: 1px solid rgba(232, 201, 122, .28); }
.faction-choice span { display: grid; min-width: 0; }
.faction-choice strong { color: var(--gold-soft); }
.faction-choice small { overflow: hidden; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.join-submit { display: grid; grid-template-columns: minmax(260px, 1fr) auto; align-items: end; gap: 12px; }
.join-submit label { display: grid; gap: 4px; color: var(--muted); font-size: .82rem; }
.join-submit input { padding: 10px; border: 1px solid var(--line); background: rgba(8, 13, 10, .9); color: var(--ink); }
.join-submit button { min-height: 42px; padding: 9px 20px; border: 0; background: linear-gradient(160deg, #e8c97a, #b8892f); color: #1c1608; font-weight: 750; }
.login-card button:disabled, .join-submit button:disabled { cursor: wait; opacity: .55; }
.join-card-v2 > small { min-height: 1em; color: #d98d7c; }

/* Spiel-Raster: Kopf / links · Main · rechts / Fuß — alles im Viewport. */
.game-shell {
  display: grid; height: 100vh;
  grid-template:
    "top top top" auto
    "left main right" minmax(0, 1fr)
    "bottom bottom bottom" auto / 230px minmax(0, 1fr) 280px;
  gap: 8px; padding: 8px;
}
.v2-topbar { position: relative; z-index: 20; grid-area: top; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); background: var(--panel); }
.ruler-chip { display: grid; line-height: 1.2; }
.ruler-chip strong { color: var(--gold-soft); font-family: Georgia, serif; }
.ruler-chip small { color: var(--muted); font-size: .74rem; }
.resource-bar { display: flex; gap: 8px; flex: 1; justify-content: center; flex-wrap: wrap; }
.resource-chip {
  display: grid; grid-template-columns: auto auto; gap: 2px 7px; align-items: center;
  padding: 5px 11px; border: 1px solid var(--line); background: var(--panel-soft); }
.resource-chip i { grid-row: 1 / span 2; font-style: normal; font-size: 1.15rem; }
.resource-chip b { font-size: .92rem; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.resource-chip small { color: var(--muted); font-size: .68rem; }
.resource-chip .rate {
  margin-left: 5px; font-style: normal; font-size: .66rem; color: #8fbf7a;
  font-variant-numeric: tabular-nums; }
.topbar-tail { display: flex; align-items: center; gap: 8px; }
.stat-chip { padding: 5px 10px; border: 1px solid var(--line); background: var(--panel-soft); font-size: .85rem; color: var(--gold-soft); }
.population-chip {
  display: grid;
  gap: 1px;
  min-width: 178px;
  padding: 4px 10px;
  text-align: left;
  cursor: pointer;
}
.population-chip span { line-height: 1.05; }
.population-chip b { color: #f2dfaa; font-variant-numeric: tabular-nums; }
.population-chip small { color: #8fbf7a; font-size: .63rem; font-variant-numeric: tabular-nums; }
.population-chip small.population-loss { color: #d78e7d; }
.population-chip:hover, .population-chip:focus-visible { border-color: var(--gold); background: rgba(38, 48, 34, .92); }
.ghost { padding: 6px 12px; border: 1px solid var(--line); background: transparent; }
.ghost:hover { border-color: var(--gold); }

.v2-left { grid-area: left; } .v2-right { grid-area: right; }
.v2-left, .v2-right { display: grid; gap: 8px; align-content: start; min-height: 0; overflow: hidden; }
.rail-card { padding: 10px 12px; border: 1px solid var(--line); background: var(--panel); min-height: 0; }
.rail-card h2 { margin: 0 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gold); }

/* Main: die Stadt als bildschirmfüllendes Kachelraster ohne Scroll. */
.v2-main {
  grid-area: main; position: relative; min-height: 0; padding: 14px;
  border: 1px solid var(--line);
  background:
    radial-gradient(900px 500px at 50% 20%, rgba(64, 84, 60, .35), transparent),
    var(--panel); }
.city-grid {
  display: grid; height: 100%; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-rows: minmax(0, 1fr); }
.building-tile {
  display: grid; grid-template-rows: 1fr auto auto; place-items: center; gap: 2px;
  padding: 10px; min-height: 0; text-align: center;
  border: 1px solid var(--line); background: var(--panel-soft); transition: border-color .15s; }
.building-tile:hover { border-color: var(--gold); }
.building-tile.selected { border-color: var(--gold-soft); box-shadow: inset 0 0 24px rgba(208, 169, 81, .16); }
.building-tile .glyph { font-size: clamp(1.6rem, 4.5vh, 3rem); }
.building-tile strong { font-size: .88rem; line-height: 1.15; }
.building-tile small { color: var(--gold-soft); font-size: .74rem; }
.building-tile.empty-slot { border-style: dashed; color: var(--muted); }

/* Rechte Spalte */
.minimap-card canvas { width: 100%; height: auto; display: block; border: 1px solid var(--line); background: #0a0f0b; }
.context-panel { display: grid; gap: 8px; align-content: start; }
.context-panel .empty { color: var(--muted); font-size: .85rem; }
.context-panel h3 { margin: 0; color: var(--gold-soft); }
.context-panel .ctx-meta { color: var(--muted); font-size: .8rem; margin: 0; }
.context-panel dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: .84rem; }
.context-panel dt { color: var(--muted); } .context-panel dd { margin: 0; text-align: right; color: var(--gold-soft); }
.primary {
  padding: 11px; border: 0; font-weight: 700; color: #1c1608;
  background: linear-gradient(160deg, #e8c97a, #b8892f); }
.primary:disabled { filter: saturate(.4) brightness(.7); cursor: default; }

/* Warteschlange links */
.queue-list { display: grid; gap: 6px; }
.queue-capacity { color: var(--muted); font: 700 .66rem/1 var(--sans); letter-spacing: .04em; }
.queue-entry { display: grid; gap: 3px; font-size: .82rem; }
.queue-entry b { color: var(--ink); font-weight: 600; }
.queue-entry progress { width: 100%; height: 6px; }
.queue-entry em { color: var(--muted); font-style: normal; font-size: .74rem; }
.queue-list[data-queue-capacity="5"] { gap: 4px; }
.queue-list[data-queue-capacity="5"] .queue-entry { gap: 2px; padding-bottom: 3px; font-size: .73rem; }
.queue-list[data-queue-capacity="5"] .queue-entry progress { height: 4px; }
.queue-list[data-queue-capacity="5"] .queue-entry em { font-size: .66rem; }
.queue-entry-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.queue-entry-foot button {
  width: 22px; height: 22px; padding: 0; border: 1px solid rgba(185, 95, 77, .5);
  color: #e3a397; background: rgba(52, 17, 13, .68); line-height: 1;
}
.queue-rail-card > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.queue-rail-card > header h2 { margin: 0; }
.queue-rail-card > header button { padding: 3px 8px; border: 1px solid var(--line-strong); color: var(--gold-soft); background: rgba(9, 15, 11, .82); font-size: .68rem; }
.city-switch { display: grid; gap: 5px; }
.city-switch button { padding: 7px 9px; text-align: left; border: 1px solid var(--line); background: var(--panel-soft); font-size: .84rem; }
.city-switch button.active { border-color: var(--gold); color: var(--gold-soft); }

.v2-bottom { grid-area: bottom; display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; border: 1px solid var(--line); background: var(--panel); font-size: .78rem; color: var(--muted); }
.v2-bottom a { color: var(--gold-soft); }
.server-state.ok { color: #8fbb7d; }

/* Ebenen-Stack (Roadmap Punkt 2): Umschalter + Knotenkarte ohne Scroll. */
.level-switch {
  position: absolute; top: 10px; left: 12px; z-index: 5;
  display: inline-flex; border: 1px solid var(--line); background: var(--panel); }
.level-switch button { padding: 6px 14px; border: 0; background: transparent; color: var(--muted); font-size: .84rem; }
.level-switch button[aria-selected="true"] { background: linear-gradient(160deg, #e8c97a, #b8892f); color: #1c1608; font-weight: 700; }
.build-mode-toggle {
  position: absolute; top: 12px; left: calc(50% + 150px); z-index: 6;
  min-height: 32px; padding: 5px 12px;
  border: 1px solid var(--line-strong); color: var(--gold-soft);
  background: rgba(8, 14, 10, .9); box-shadow: 0 5px 18px rgba(0, 0, 0, .34);
  font-size: .72rem; font-weight: 700;
}
.build-mode-toggle.active {
  border-color: #e7c25d; color: #171004;
  background: linear-gradient(160deg, #f0d783, #b8892f);
  box-shadow: 0 0 18px rgba(224, 181, 70, .44);
}
.v2-main[data-level="city"]:has(.build-mode-toggle.active) .building-tile { cursor: pointer; }
.v2-main[data-level="city"] .building-tile.upgrade-queued .building-hit-area {
  opacity: .9;
  border-color: rgba(241, 210, 112, .88);
  box-shadow: 0 0 18px rgba(238, 192, 72, .46), inset 0 0 18px rgba(238, 192, 72, .14);
}
.node-map { position: absolute; inset: 44px 12px 12px; }
.node-map .empty { color: var(--muted); display: grid; place-items: center; height: 100%; }
.map-node {
  position: absolute; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 3px;
  padding: 6px; border: 0; background: transparent; }
.map-node i {
  width: 11px; height: 11px; border-radius: 50%;
  background: #3a4a3c; border: 1px solid rgba(255, 255, 255, .12); }
.map-node.discovered i { background: #6f8a6a; }
.map-node.owned i { width: 14px; height: 14px; background: #e8c97a; box-shadow: 0 0 10px rgba(232, 201, 122, .55); }
.map-node.hidden i { opacity: .45; }
.map-node.selected i { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.map-node em { font-style: normal; font-size: .72rem; color: var(--gold-soft); text-shadow: 0 1px 3px #000; white-space: nowrap; }
.map-node:hover i { outline: 1px solid var(--gold); outline-offset: 2px; }
.minimap-card canvas { cursor: pointer; }

/* D3: Die Welt nutzt einen eigenen, serverseitig paginierten Kartenraum.
   Die lokale Region bleibt bewusst die kompakte .node-map darüber. */
.v2-world-map-shell {
  position: absolute;
  inset: 54px 14px 14px;
  z-index: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 7px;
  min-height: 0;
}
.v2-map-toolbar {
  display: grid;
  grid-template-columns: auto auto minmax(130px, 1fr) minmax(105px, .55fr) minmax(110px, .55fr) auto;
  gap: 6px;
  align-items: end;
  padding: 7px;
  border: 1px solid rgba(218, 195, 132, .34);
  background: rgba(7, 12, 9, .9);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .32);
}
.v2-map-toolbar > label,
.v2-map-coordinates label { display: grid; gap: 2px; min-width: 0; color: var(--muted); font-size: .62rem; }
.v2-map-toolbar input,
.v2-map-toolbar select {
  width: 100%; min-width: 0; height: 30px; padding: 4px 7px;
  border: 1px solid var(--line); color: var(--ink); background: rgba(10, 16, 12, .96); font-size: .72rem;
}
.v2-map-zoom, .v2-map-pan { display: flex; align-items: center; gap: 3px; }
.v2-map-zoom button, .v2-map-pan button, .v2-map-coordinates button {
  display: grid; place-items: center; min-width: 30px; height: 30px; padding: 3px 7px;
  border: 1px solid #806b34; color: var(--gold-soft); background: #211c11;
}
.v2-map-zoom output { min-width: 92px; color: var(--gold-soft); font-size: .67rem; text-align: center; }
.v2-map-coordinates { display: grid; grid-template-columns: 52px 52px auto; gap: 4px; align-items: end; margin: 0; }
.v2-map-coordinates input { font-variant-numeric: tabular-nums; }
.v2-interactive-map {
  position: relative;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  border: 1px solid rgba(218, 195, 132, .3);
  background: #07100c;
}
.world-map-art {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  background:
    linear-gradient(rgba(4, 9, 7, .28), rgba(4, 9, 7, .42)),
    image-set(url("/assets/world/world-map-background-v1.avif") type("image/avif"), url("/assets/world/world-map-background-v1.webp") type("image/webp")) center / cover no-repeat;
  will-change: left, top, transform;
  pointer-events: none;
}
.v2-interactive-map.is-dragging { cursor: grabbing; }
.v2-interactive-map::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .18;
  background-image: repeating-linear-gradient(25deg, transparent 0 35px, rgba(222, 213, 175, .15) 36px 37px);
}
.online-map-paths { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.online-map-paths line { stroke: rgba(208, 169, 81, .42); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.online-map-paths line.sea-lane { stroke: rgba(126, 178, 196, .5); stroke-dasharray: 6 5; }
.online-map-node {
  --node-color: #d3bb70;
  position: absolute; z-index: 3; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 42px; height: 42px; padding: 4px;
  border: 1px solid var(--node-color); border-radius: 50%; color: var(--node-color);
  background: rgba(8, 14, 10, .94); box-shadow: 0 0 18px color-mix(in srgb, var(--node-color) 28%, transparent);
  font-size: .7rem; font-variant-numeric: tabular-nums;
}
.online-map-node img { display: block; width: 32px; height: 32px; filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .45)); }
.online-map-node span {
  position: absolute; top: 45px; display: grid; width: max-content; max-width: 145px; padding: 3px 6px;
  color: var(--ink); background: rgba(7, 12, 9, .9); font-size: .66rem; text-align: center;
}
.online-map-node span b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-map-node span small { color: var(--muted); font-size: .58rem; }
.online-map[data-zoom="0"] .online-map-node span,
.online-map[data-zoom="1"] .online-map-node span { display: none; }
.online-map-node.owned { --node-color: #e0bd60; }
.online-map-node.hidden { --node-color: #74817a; opacity: .75; }
.online-map-node.hidden[data-map-hidden-summary="true"] {
  border-style: dashed;
  opacity: .48;
  background: radial-gradient(circle, rgba(61, 76, 68, .35), rgba(7, 12, 9, .72));
}
.online-map-node.sealed { --node-color: #a78aba; }
.online-map-node.empty { --node-color: #8aba9a; }
.online-map-node.under_attack { --node-color: #d8795d; }
.online-map-node.discovered-cluster { --node-color: #91b196; font-weight: 800; }
.online-map-node.discovered-cluster span { display: none; }
.online-map-node.selected { z-index: 3; outline: 2px solid var(--gold-soft); outline-offset: 3px; }
.online-map-node:hover, .online-map-node:focus-visible { z-index: 4; border-color: var(--gold-soft); }
.map-empty {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: min(360px, calc(100% - 32px)); padding: 14px; border: 1px dashed var(--line);
  color: var(--muted); background: rgba(7, 12, 9, .9); text-align: center;
}
.v2-map-status {
  display: flex; justify-content: space-between; gap: 12px; min-width: 0; padding: 5px 8px;
  border: 1px solid var(--line); background: rgba(7, 12, 9, .86); font-size: .62rem;
}
.v2-map-status > span { display: grid; min-width: 0; }
.v2-map-status strong { color: var(--gold-soft); }
.v2-map-status small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.world-cluster-choices { display: grid; gap: 5px; max-height: 220px; overflow-y: auto; }
.world-cluster-choices button {
  display: grid; gap: 2px; padding: 7px 8px; text-align: left;
  border: 1px solid var(--line); background: var(--panel-soft);
}
.world-cluster-choices button:hover, .world-cluster-choices button:focus-visible { border-color: var(--gold); }
.world-cluster-choices button strong { color: var(--gold-soft); font-size: .74rem; }
.world-cluster-choices button small { color: var(--muted); font-size: .64rem; }

/* Fenster-Unterbau (Roadmap Punkt 3): ein Fenster, alles auf einen Blick. */
.window-bar { display: flex; gap: 6px; }
.window-bar button { padding: 6px 13px; border: 1px solid var(--line); background: var(--panel-soft); font-size: .84rem; }
.window-bar button:hover { border-color: var(--gold); color: var(--gold-soft); }
.window-overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(5, 8, 6, .66); }
.v2-window {
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  width: min(880px, 92vw); max-height: 85vh;
  border: 1px solid var(--gold); background: var(--panel);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6); }
.window-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.window-head h2 { margin: 0; font-size: 1.1rem; color: var(--gold-soft); }
.window-head button { width: 34px; height: 34px; border: 1px solid var(--line); background: transparent; font-size: 1.1rem; }
.window-head button:hover { border-color: var(--gold); }
.window-body { padding: 14px; min-height: 0; display: grid; gap: 10px; align-content: start; }

/* Kaserne: eine kompakte Rekrutierungszeile pro Einheit. Detailwerte liegen
   am fokussierbaren Info-Symbol, operative Heeresführung in einem eigenen
   Fenster. So bleiben Name, Kurzbeschreibung, Anzahl und Auftrag im Blick. */
.v2-window[data-window="barracks"] { width: min(980px, 94vw); }
.v2-window[data-window="army"] { width: min(1180px, 96vw); max-height: 90vh; }
.recruitment-head {
  display: flex; align-items: end; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border: 1px solid var(--line-strong); background: rgba(192, 146, 55, .08); }
.recruitment-head span { display: grid; gap: 2px; }
.recruitment-head h3 { margin: 0; color: var(--gold-soft); font-size: 1rem; }
.recruitment-head small { color: var(--muted); }
.recruitment-head b { color: var(--ink); font-size: .78rem; }
.recruit-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 6px;
}
.recruit-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 28px auto;
  align-items: center; gap: 7px; min-width: 0; padding: 7px 8px;
  overflow: hidden; isolation: isolate;
  border: 1px solid var(--line); background: var(--panel-soft); }
.recruit-row:hover, .recruit-row:focus-within { border-color: var(--line-strong); }
.recruit-row.locked { background: rgba(50, 37, 29, .26); }
.recruit-icon { width: 38px; height: 38px; object-fit: contain; pointer-events: none; }
.recruit-copy { display: grid; gap: 1px; min-width: 0; }
.recruit-copy strong { overflow: hidden; color: var(--gold-soft); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.recruit-copy small {
  display: -webkit-box; overflow: hidden; color: var(--muted); font-size: .68rem; line-height: 1.25;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.recruit-copy em { color: var(--muted); font-size: .64rem; font-style: normal; }
.recruit-info {
  width: 26px; height: 26px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%;
  background: rgba(192, 146, 55, .08); color: var(--gold-soft); font-weight: 750; }
.recruit-info:hover, .recruit-info:focus-visible { border-color: var(--gold); background: rgba(192, 146, 55, .18); }
.recruit-controls { display: grid; grid-template-columns: 50px 42px minmax(88px, auto); gap: 4px; align-items: center; }
.recruit-controls label { grid-column: 1 / -1; color: var(--muted); font-size: .58rem; }
.recruit-controls input { width: 50px; min-width: 0; padding: 5px 6px; text-align: center; }
.recruit-controls button { min-height: 30px; padding: 5px 7px; border: 1px solid var(--line); background: rgba(192, 146, 55, .1); font-size: .67rem; }
.recruit-controls button.primary { border-color: var(--gold); color: var(--gold-soft); }
.recruit-controls button:hover:not(:disabled) { border-color: var(--gold); }
.recruit-controls button:disabled, .recruit-controls input:disabled { opacity: .45; }
.recruit-requirement {
  grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  color: #e8b3a6; font-size: .64rem; }
.recruit-requirement button { padding: 2px 6px; border: 1px solid rgba(217, 141, 124, .48); background: transparent; color: #e8b3a6; font-size: .62rem; }
.recruit-requirement button:hover, .recruit-requirement button:focus-visible { border-color: var(--gold); color: var(--gold-soft); }
.unit-train { display: flex; gap: 6px; }
.unit-train button {
  min-width: 46px; padding: 7px 0; border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(232, 201, 122, .16), rgba(184, 137, 47, .16)); font-weight: 600; }
.unit-train button:hover { border-color: var(--gold); }
.unit-train button:disabled { opacity: .45; }
.siege-workshop { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); background: rgba(76, 55, 19, .10); }
.siege-workshop > span { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.siege-workshop h3 { margin: 0; color: var(--gold-soft); font-size: .9rem; }
.siege-workshop > span small { color: var(--muted); }
.siege-unit-grid { grid-template-columns: 1fr; }
.siege-unit-card { background: linear-gradient(155deg, rgba(91, 66, 24, .24), var(--panel-soft)); }
.siege-unit-card .recruit-icon { width: 40px; height: 40px; }
.siege-workshop .ctx-meta { margin: 0; }
.window-notice { margin: 0; padding: 8px 11px; border: 1px solid rgba(217, 141, 124, .5); background: rgba(120, 50, 40, .25); color: #e8b3a6; font-size: .84rem; }

/* Kriegswesen U1: Garnisons-Stellhebel — Ruhe/Alarm mit Tagesverbrauch. */
.garrison-control {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--line); background: var(--panel-soft); }
.garrison-control strong { font-size: .86rem; color: var(--gold-soft); }
.garrison-control .ctx-meta { flex-basis: 100%; margin: 0; }
.garrison-control[data-garrison-stance="alert"] { border-color: rgba(217, 141, 124, .55); }
.garrison-control[data-garrison-stance="alert"] strong { color: #e8b3a6; }
.garrison-control button.primary { border-color: var(--gold); color: var(--gold-soft); }

.support-deployments-v2 {
  display: grid; gap: 7px; padding: 10px;
  border: 1px solid rgba(91, 171, 161, .42); background: rgba(22, 64, 60, .12); }
.support-deployments-v2 > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.support-deployments-v2 > header span { display: grid; gap: 2px; }
.support-deployments-v2 h3 { margin: 0; color: #9dd8cf; font-size: .9rem; }
.support-deployments-v2 small { color: var(--muted); }
.support-deployment-v2 {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 9px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line); background: var(--panel-soft); font-size: .78rem; }
.support-deployment-v2 > span { display: grid; gap: 2px; min-width: 0; }
.support-deployment-v2 > b { color: var(--gold-soft); white-space: nowrap; }
.support-deployment-v2.returning { border-left: 2px solid var(--gold); }
.support-deployment-v2 button { padding: 5px 9px; border: 1px solid var(--line); background: rgba(232, 201, 122, .12); }
.support-deployment-v2 button:hover { border-color: var(--gold); }

/* Kriegswesen U5a: Verbände in der Kaserne. */
.army-list { display: grid; gap: 8px; }
.army-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 8px 11px; border: 1px solid var(--line); background: var(--panel-soft);
  font-size: .84rem; }
.army-card strong { color: var(--gold-soft); }
.army-card.hungry { border-color: rgba(217, 141, 124, .55); }
.army-card.hungry b { color: #e8b3a6; }
.army-card button {
  margin-left: auto; padding: 5px 10px; border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(232, 201, 122, .16), rgba(184, 137, 47, .16)); }
.army-card button:hover { border-color: var(--gold); }
.army-card button:disabled { opacity: .45; }
.army-card.moving { border-color: rgba(91, 171, 161, .5); }
.army-card.hosted { border-color: rgba(91, 171, 161, .45); background: rgba(22, 64, 60, .16); }
.army-card.hosted > strong { color: #9dd8cf; }
.army-card-actions { display: flex; flex-wrap: wrap; gap: 5px; align-items: end; }
.army-destination { display: grid; min-width: min(260px, 100%); gap: 2px; color: var(--muted); font-size: .66rem; }
.army-destination select { min-width: 0; max-width: 280px; }
.army-movement { display: block; padding: 6px 8px; border-left: 2px solid #5baba1; background: rgba(22, 64, 60, .22); color: var(--muted); font-size: .7rem; }
.army-movement b { color: #9dd8cf; }
.army-movement.returning { border-left-color: var(--gold); background: rgba(111, 80, 24, .18); }
.army-movement.returning b { color: var(--gold-soft); }
.army-stationed { display: block; flex-basis: 100%; padding: 6px 8px; border-left: 2px solid #5baba1; background: rgba(22, 64, 60, .22); color: var(--muted); font-size: .7rem; }
.army-stationed b { color: #9dd8cf; }
.army-supply-readout { display: block; flex-basis: 100%; color: var(--muted); font-size: .7rem; }
.army-supply-readout b { color: #9ed39a; }
.army-supply-readout.low b { color: var(--gold-soft); }
.army-supply-readout.critical b, .army-supply-readout.hungry b { color: #ef9d82; }
.army-supply-status { display: block; flex-basis: 100%; padding: 6px 8px; border-left: 2px solid var(--gold); background: rgba(111, 80, 24, .18); color: var(--muted); font-size: .7rem; }
.army-supply-status b { color: var(--gold-soft); }
.army-cargo { display: block; flex-basis: 100%; padding: 6px 8px; border-left: 2px solid #b98a3b; background: rgba(123, 83, 25, .2); color: var(--muted); font-size: .7rem; }
.army-cargo b { color: #efc875; }
.army-cargo.returning { border-left-color: #d7aa4d; background: rgba(151, 103, 26, .24); }
.army-supply-controls { display: flex; flex-wrap: wrap; gap: 5px; align-items: end; padding-left: 6px; border-left: 1px solid var(--line); }
.army-supply-controls label { display: grid; gap: 2px; color: var(--muted); font-size: .66rem; }
.army-supply-controls input { width: 78px; }
.army-form .army-fields { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.army-form input { max-width: 130px; }
.army-form input[type="number"] { max-width: 80px; }
.army-form-unit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 5px; width: 100%; }
.army-form-unit { display: grid; grid-template-columns: 30px minmax(0, 1fr) 54px; gap: 6px; align-items: center; min-width: 0; padding: 5px; border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); background: rgba(255,255,255,.02); }
.army-form-unit img { width: 30px; height: 30px; object-fit: contain; }
.army-form-unit span { display: grid; min-width: 0; font-size: .7rem; }
.army-form-unit small { color: var(--muted); font-size: .6rem; }
.army-form-unit input[type="number"] { width: 54px; max-width: 54px; }
.army-formation { display: grid; gap: 2px; min-width: 180px; color: var(--muted); font-size: .66rem; }
.army-formation select { max-width: 230px; }
.army-form .ctx-meta { flex-basis: 100%; margin: 0; }

/* U6d: serverautoritatives Lagebild laufender Mehrrundenschlachten. */
.running-battles { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line-strong); background: rgba(120, 50, 40, .1); }
.running-battles > header, .running-battle-card > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.running-battles > header span, .running-battle-card > header span { display: grid; gap: 2px; }
.running-battles h3 { margin: 0; color: var(--gold-soft); }
.running-battles small { color: var(--muted); }
.running-battle-card { display: grid; gap: 8px; padding: 10px; border: 1px solid rgba(217, 141, 124, .45); background: var(--panel-soft); }
.running-battle-card > progress { width: 100%; accent-color: #c86e58; }
.running-battle-card > p { margin: 0; color: var(--muted); font-size: .72rem; }
.running-battle-forces { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px; }
.running-battle-force { display: grid; gap: 5px; padding: 7px; border-left: 2px solid var(--gold); background: rgba(5, 9, 7, .28); font-size: .74rem; }
.running-battle-force > span { display: grid; gap: 1px; }
.running-battle-force.withdrawn, .running-battle-force.destroyed, .running-battle-force.routed { opacity: .7; border-left-color: #8a695d; }
.battle-force-vitals { display: flex !important; flex-wrap: wrap; gap: 5px; color: var(--muted); }
.battle-force-vitals b { padding: 2px 5px; border: 1px solid var(--line); font-weight: 500; }
.running-battle-force button { justify-self: start; padding: 5px 9px; border: 1px solid rgba(217, 141, 124, .55); background: rgba(120, 50, 40, .24); }
.running-battle-card details { border-top: 1px solid var(--line); padding-top: 6px; }
.running-battle-card summary { cursor: pointer; color: var(--gold-soft); font-size: .76rem; }
.running-battle-card ol { display: grid; gap: 5px; margin: 7px 0 0; padding: 0; list-style: none; }
.running-battle-card li { display: flex; flex-wrap: wrap; gap: 5px 10px; padding: 6px; border: 1px solid var(--line); font-size: .7rem; color: var(--muted); }
.running-battle-card li time { margin-left: auto; }
.running-battle-card li span { flex-basis: 100%; }
.running-battle-card li span small { display: block; margin-top: 3px; color: var(--muted); }
.battle-playback { display: grid; gap: 7px; padding: 8px; border: 1px solid var(--line); background: rgba(6, 13, 9, .4); }
.battle-playback > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.battle-playback > header span { display: grid; gap: 2px; }
.battle-playback > header strong { color: var(--gold-soft); font-size: .78rem; }
.battle-playback-controls { display: grid; grid-template-columns: auto auto auto minmax(120px, 1fr); align-items: center; gap: 5px; }
.battle-playback-controls button { min-width: 34px; padding: 5px 8px; border: 1px solid var(--line-strong); background: var(--panel); }
.battle-playback-controls input[type="range"] { width: 100%; accent-color: var(--gold); }
.battle-timeline { display: grid; gap: 5px; max-height: 224px; margin: 7px 0 0; padding: 0; overflow: auto; scrollbar-gutter: stable; list-style: none; }
.battle-timeline li { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; padding: 6px; border: 1px solid var(--line); font-size: .7rem; color: var(--muted); transition: opacity .15s ease, border-color .15s ease, background .15s ease; }
.battle-timeline li span { display: grid; gap: 2px; }
.battle-timeline li time { margin-left: auto; }
.battle-timeline li.current { border-color: var(--gold); background: rgba(192, 146, 55, .12); color: var(--text); }
.battle-timeline li.past { opacity: .72; }
.battle-timeline li.future { opacity: .32; }
.battle-timeline li.current::before { content: "◆"; color: var(--gold); }
.report-archive-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.report-archive-controls p { margin: 0; }
.report-archive-controls button { padding: 6px 10px; border: 1px solid var(--line-strong); background: var(--panel); }
.report-chronicle-load { width: 100%; padding: 7px 10px; border: 1px solid var(--line-strong); background: rgba(192, 146, 55, .08); }
.report-detail .battle-playback { margin-top: 8px; }

/* Kronenpfad (Roadmap Punkt 5): drei serverseitig nachweisbare Schritte. */
.crown-path { display: grid; gap: 6px; }
.crown-progress { margin: 0; font-size: .72rem; color: var(--muted); }
.crown-step {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 5px 8px; border: 1px solid var(--line); background: var(--panel-soft);
  font-size: .8rem; color: var(--muted); }
.crown-step.done { color: #8fbf7a; border-color: rgba(143, 191, 122, .35); }
.crown-step.current { color: var(--gold-soft); border-color: var(--gold); }
.crown-step button {
  padding: 4px 9px; border: 1px solid var(--line); font-size: .72rem;
  background: linear-gradient(160deg, rgba(232, 201, 122, .16), rgba(184, 137, 47, .16)); }
.crown-step button:hover { border-color: var(--gold); }
.crown-claim button { width: 100%; padding: 7px 0; border: 1px solid var(--gold);
  background: linear-gradient(160deg, #e8c97a, #b8892f); color: #1c1608; font-weight: 700; }
.crown-claim button:disabled { opacity: .5; }
.crown-status { margin: 0; font-size: .74rem; color: var(--gold-soft); }

/* Chronik-Ecke: zuklappbar, verdrängt das Kontextpanel nie dauerhaft. */
.chronicle-card h2 button {
  padding: 0; border: 0; background: transparent; color: var(--gold);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; }
.chronicle-list { display: grid; gap: 5px; }
.chronicle-entry {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: .76rem; color: var(--muted); }
.chronicle-entry em { font-style: normal; white-space: nowrap; color: rgba(200, 200, 190, .55); }

/* Kronenbund-Bote als Fenster: Zeitungssatz, begrenzte Meldungen, kein Scroll. */
.gazette { font-family: Georgia, "Times New Roman", serif; display: grid; gap: 10px; }
.gazette-masthead { text-align: center; border-top: 3px double var(--gold); border-bottom: 3px double var(--gold); padding: 8px 0; }
.gazette-masthead h3 { margin: 0; font-size: 1.5rem; letter-spacing: .06em; color: var(--gold-soft); }
.gazette-masthead p { margin: 2px 0 0; font-size: .74rem; color: var(--muted); }
.gazette-article { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.gazette-article .eyebrow { margin: 0; font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); }
.gazette-article h3 { margin: 2px 0 4px; font-size: .98rem; color: var(--ink); }
.gazette-article.lead h3 { font-size: 1.25rem; }
.gazette-article p { margin: 0; font-size: .8rem; color: var(--muted); }
.gazette-article small { color: rgba(200, 200, 190, .5); font-size: .68rem; }
.gazette-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.gazette-grid .gazette-article { border-bottom: 0; border-top: 1px solid var(--line); padding-top: 6px; }

/* Berichte-Fenster: kompakte Karten, Ausgang faerbt den Rand. */
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.shared-report-card {
  display: grid; gap: 8px; margin-bottom: 12px; padding: 12px;
  border: 1px solid var(--gold); background: rgba(184, 137, 47, .09);
}
.shared-report-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.shared-report-card header span { display: grid; gap: 2px; }
.shared-report-card header small { color: var(--gold-soft); text-transform: uppercase; letter-spacing: .08em; }
.shared-report-card header img { width: 36px; height: 36px; }
.shared-report-card p { margin: 0; color: var(--muted); }
.shared-report-card dl { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; }
.shared-report-card dl div { display: grid; gap: 2px; }
.shared-report-card dt { color: var(--muted); font-size: .68rem; }
.shared-report-card dd { margin: 0; color: var(--ink); }
.shared-report-card > button { justify-self: start; padding: 6px 10px; border: 1px solid var(--line-strong); background: var(--panel); }
.report-card {
  display: grid; gap: 4px; padding: 10px 12px;
  border: 1px solid var(--line); background: var(--panel-soft); font-size: .8rem; }
.report-card:hover { border-color: var(--gold); }
.report-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.report-card header em { font-style: normal; font-size: .7rem; color: rgba(200, 200, 190, .55); white-space: nowrap; }
.report-outcome { font-weight: 600; color: var(--gold-soft); }
.report-card.victory, .report-card.ruin_rich_find, .report-card.ruin_find { border-left: 3px solid rgba(143, 191, 122, .7); }
.report-card.defeat, .report-card.ruin_loss { border-left: 3px solid rgba(217, 141, 124, .7); }
.report-card.conquered { border-left: 3px solid var(--gold); }
.report-card strong { color: var(--ink); }
.report-line { color: var(--muted); font-size: .76rem; }
.report-route { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 5px; margin: 3px 0; }
.report-route > span { display: grid; gap: 1px; padding: 5px 7px; border: 1px solid var(--line); background: rgba(4, 9, 6, .28); }
.report-route small { color: var(--muted); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }
.report-route strong { color: var(--ink-soft); font-size: .7rem; overflow-wrap: anywhere; }
.report-outcome { display: inline-flex; align-items: center; gap: 6px; }
.report-outcome img { width: 22px; height: 22px; }
.report-card.favorite { box-shadow: inset 0 0 0 1px rgba(232, 201, 122, .35); }
.report-detail { margin-top: 3px; border-top: 1px solid var(--line); padding-top: 5px; }
.report-detail summary { cursor: pointer; color: var(--gold-soft); font-size: .72rem; }
.report-detail dl { display: grid; gap: 4px; margin: 7px 0 0; }
.report-detail dl > div { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 6px; }
.report-detail dt { color: var(--muted); font-size: .69rem; }
.report-detail dd { margin: 0; color: var(--ink-soft); font-size: .72rem; }
.report-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.report-actions button { padding: 5px 8px; border: 1px solid var(--line); background: var(--panel-soft); font-size: .7rem; }
.report-actions button:hover:not(:disabled) { border-color: var(--gold); }
.report-actions button:disabled { opacity: .55; }

/* Markt-Fenster: Schatzstand, Kurszeilen, Formular, eigene Auftraege. */
.market-balance { display: flex; align-items: baseline; gap: 12px; }
.market-balance b { color: var(--gold-soft); font-size: 1.05rem; }
.market-balance small { color: var(--muted); }
.market-prices { display: grid; gap: 4px; }
.market-price-row {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.1fr; gap: 8px;
  padding: 5px 9px; border: 1px solid var(--line); background: var(--panel-soft);
  font-size: .78rem; align-items: baseline; }
.market-price-row:hover { border-color: var(--gold); }
.market-price-row span { color: var(--ink); }
.market-price-row em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.market-form { display: grid; grid-template-columns: auto 1.2fr 1fr 1.2fr auto; gap: 6px; }
.market-form select, .market-form input {
  padding: 6px 8px; border: 1px solid var(--line); background: var(--panel-soft);
  color: var(--ink); font-size: .82rem; }
.market-form button {
  padding: 6px 14px; border: 1px solid var(--gold);
  background: linear-gradient(160deg, #e8c97a, #b8892f); color: #1c1608; font-weight: 700; }
.market-form button:disabled { opacity: .5; }
.market-heading { margin: 4px 0 0; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gold); }
.market-order-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 5px 9px; border: 1px solid var(--line); background: var(--panel-soft); font-size: .78rem; }
.market-order-row em { color: var(--muted); font-style: normal; }
.market-order-row button { padding: 4px 10px; border: 1px solid var(--line); font-size: .72rem; }
.market-order-row button:hover { border-color: var(--gold); }
.market-details { border: 1px solid var(--line); background: rgba(5, 9, 7, .18); }
.market-details summary { padding: 7px 9px; cursor: pointer; color: var(--gold-soft); font-size: .76rem; }
.market-details[open] summary { border-bottom: 1px solid var(--line); }
.market-history-grid { display: grid; grid-template-columns: repeat(5, minmax(100px, 1fr)); gap: 6px; }
.market-history-card { display: grid; gap: 5px; padding: 7px; border: 1px solid var(--line); background: var(--panel-soft); }
.market-history-card > strong { color: var(--ink); font-size: .74rem; }
.market-history-bars { display: flex; align-items: end; gap: 2px; height: 46px; border-bottom: 1px solid var(--line); }
.market-history-bars i { display: block; flex: 1 1 4px; min-width: 2px; max-width: 8px; background: #7ca66c; }
.market-history-bars i.falling { background: #c86e58; }
.market-history-bars span { margin: auto; color: var(--muted); font-size: .65rem; }
.market-secondary-grid { display: grid; grid-template-columns: 1.25fr .9fr .9fr; gap: 10px; margin-top: 12px; }
.market-secondary-grid > section { display: grid; align-content: start; gap: 5px; min-width: 0; }
.market-section-head { display: flex; align-items: end; justify-content: space-between; gap: 8px; }
.market-section-head label, .queue-sort { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .68rem; }
.market-section-head select, .queue-sort select { min-width: 108px; padding: 4px 6px; border: 1px solid var(--line); background: var(--panel-soft); color: var(--ink); }
.market-shipment-v2, .market-ledger-row {
  display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px;
  border: 1px solid var(--line); background: var(--panel-soft); font-size: .72rem;
}
.market-shipment-v2 > span { display: grid; gap: 2px; }
.market-shipment-v2 small, .market-shipment-v2 em, .market-ledger-row em { color: var(--muted); font-style: normal; }
.market-shipment-v2.travelling { border-left: 3px solid var(--gold); }
.market-ledger-row.credit em { color: #8fbf7a; }
.market-ledger-row.debit em { color: #d9a48c; }

/* Forschungs-Fenster: zwei Gruppen, Sperrgruende sichtbar an der Zeile. */
.research-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.research-group { display: grid; gap: 5px; align-content: start; }
.research-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 7px 10px; border: 1px solid var(--line); background: var(--panel-soft); font-size: .8rem; }
.research-row:hover { border-color: var(--gold); }
.research-row span { display: grid; gap: 2px; }
.research-row strong { color: var(--ink); }
.research-row small { color: var(--muted); font-size: .72rem; }
.research-row .research-lock { color: #d9a48c; }
.research-row.completed { border-left: 3px solid rgba(143, 191, 122, .7); }
.research-row.researching { border-left: 3px solid var(--gold); }
.research-row.locked { opacity: .8; }
.research-row.highlighted {
  border-color: var(--gold); outline: 2px solid rgba(208, 169, 81, .42); outline-offset: 2px;
  background: rgba(192, 146, 55, .14); }
.research-row button {
  padding: 5px 11px; border: 1px solid var(--line); font-size: .74rem; white-space: nowrap;
  background: linear-gradient(160deg, rgba(232, 201, 122, .16), rgba(184, 137, 47, .16)); }
.research-row button:hover:not(:disabled) { border-color: var(--gold); }
.research-row button:disabled { opacity: .55; }
.culture-journey-v2 { margin-top: 18px; }
.journey-steps { display: grid; gap: 6px; }
.journey-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}
.journey-step > i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--gold-soft);
  font-style: normal;
  font-size: .72rem;
}
.journey-step > span { display: grid; gap: 2px; }
.journey-step strong { color: var(--ink); }
.journey-step small { color: var(--muted); font-size: .71rem; }
.journey-step.completed { border-left: 3px solid rgba(143, 191, 122, .72); }
.journey-step.queued { border-left: 3px solid var(--gold); }
.journey-step.locked { opacity: .76; }
.journey-step .research-lock { color: #d9a48c; }
.journey-step .journey-map-hint { color: var(--gold-soft); }
.culture-diplomacy-v2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 7px 0 10px;
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  background: rgba(232, 201, 122, .06);
}
.culture-diplomacy-v2 > span { display: grid; gap: 2px; }
.culture-diplomacy-v2 small { color: var(--muted); font-size: .71rem; }
.culture-diplomacy-v2 > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.culture-diplomacy-v2 button { padding: 6px 9px; border: 1px solid var(--line-strong); }
.culture-diplomacy-v2 button:disabled { opacity: .5; }
.culture-diplomacy-v2 em { align-self: center; color: #8fbf7a; font-size: .72rem; font-style: normal; }
.culture-diplomacy-v2.unknown { color: var(--muted); font-size: .76rem; }

/* Rituale-Fenster: Startzeilen + laufende Rituale mit Fortschrittsbalken. */
.ritual-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 7px 10px; border: 1px solid var(--line); background: var(--panel-soft); font-size: .8rem; }
.ritual-row:hover { border-color: var(--gold); }
.ritual-row > span { display: grid; gap: 3px; min-width: 0; }
.ritual-row strong { color: var(--ink); }
.ritual-row small { color: var(--muted); font-size: .72rem; }
.ritual-row button {
  padding: 5px 12px; border: 1px solid var(--line); font-size: .74rem; white-space: nowrap;
  background: linear-gradient(160deg, rgba(232, 201, 122, .16), rgba(184, 137, 47, .16)); }
.ritual-row button:hover:not(:disabled) { border-color: var(--gold); }
.ritual-row button:disabled { opacity: .55; }
.ritual-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ritual-actions .danger { border-color: rgba(196, 112, 94, .52); color: #e3a08e; }
.ritual-actions .danger:hover:not(:disabled) { border-color: #d27c68; background: rgba(145, 53, 40, .18); }
.ritual-row.collecting { border-left: 3px solid var(--gold); }
.ritual-row.active { border-left: 3px solid rgba(143, 191, 122, .7); }
.ritual-row.locked { border-left: 3px solid rgba(196, 112, 94, .72); }
.ritual-row.locked small { color: #d7a08f; }
.ritual-progress { display: block; height: 4px; background: rgba(255, 255, 255, .08); }
.ritual-progress i { display: block; height: 100%; background: linear-gradient(90deg, #e8c97a, #b8892f); }
.ritual-own { font-style: normal; color: #8fbf7a; font-size: .74rem; white-space: nowrap; }
.ritual-contribution-detail {
  grid-column: 2 / -1; width: 100%; padding-top: 5px; border-top: 1px solid rgba(218, 195, 132, .12);
}
.ritual-contribution-detail summary {
  width: fit-content; color: var(--gold-soft); cursor: pointer; font-size: .72rem; line-height: 1.4;
}
.ritual-contribution-detail summary:hover,
.ritual-contribution-detail summary:focus-visible { color: var(--gold); }
.ritual-contribution-list {
  display: grid; gap: 5px; margin: 7px 0 1px; padding: 0; list-style: none;
}
.ritual-contribution-list li {
  display: grid; grid-template-columns: minmax(9rem, .7fr) minmax(0, 1.3fr); gap: 8px;
  align-items: baseline; padding: 5px 7px; border: 1px solid rgba(218, 195, 132, .1);
  background: rgba(3, 9, 6, .32);
}
.ritual-contribution-list strong { color: var(--ink); font-size: .74rem; }
.ritual-contribution-list span { color: var(--muted); font-size: .7rem; overflow-wrap: anywhere; }

/* Rankings-Fenster: Kategorien-Tabs + kompakte Zeilen, eigene hervorgehoben. */
.ranking-tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.ranking-tabs button {
  padding: 5px 11px; border: 1px solid var(--line); background: var(--panel-soft); font-size: .76rem; }
.ranking-tabs button:hover { border-color: var(--gold); }
.ranking-tabs button.selected {
  background: linear-gradient(160deg, #e8c97a, #b8892f); color: #1c1608; font-weight: 700; border-color: var(--gold); }
.ranking-row {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: baseline;
  padding: 6px 10px; border: 1px solid var(--line); background: var(--panel-soft); font-size: .8rem; }
.ranking-row b { color: var(--gold); font-variant-numeric: tabular-nums; }
.ranking-row span { color: var(--ink); }
.ranking-row em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.ranking-row.own { border-color: var(--gold); background: rgba(232, 201, 122, .1); }
.ranking-row.eliminated { opacity: .55; }

/* Einstellungen-Fenster: zwei Bloecke + Fusszeile. */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.settings-block { display: grid; gap: 8px; align-content: start; }
.settings-block a { color: var(--gold-soft); }
.settings-block select, .settings-block textarea {
  padding: 7px 9px; border: 1px solid var(--line); background: var(--panel-soft);
  color: var(--ink); font-size: .82rem; font-family: inherit; resize: none; }
.settings-block button[data-settings-feedback] {
  justify-self: start; padding: 6px 14px; border: 1px solid var(--gold);
  background: linear-gradient(160deg, #e8c97a, #b8892f); color: #1c1608; font-weight: 700; }
.settings-block button:disabled { opacity: .5; }
button.danger {
  justify-self: start; padding: 6px 12px; border: 1px solid rgba(217, 141, 124, .6);
  background: rgba(120, 50, 40, .25); color: #e8b3a6; font-size: .78rem; }
button.danger:hover { border-color: #d98d7c; }
.settings-foot { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.settings-foot button { padding: 6px 14px; border: 1px solid var(--line); background: var(--panel-soft); }
.settings-foot button:hover { border-color: var(--gold); }
.premium-v2 { margin-top: 14px; border: 1px solid var(--line); background: rgba(5, 9, 7, .2); }
.premium-v2 > summary { padding: 9px 10px; cursor: pointer; color: var(--gold-soft); }
.premium-v2[open] > summary { border-bottom: 1px solid var(--line); }
.premium-v2 > p { padding: 0 10px; }
.premium-v2 > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 10px 10px; }
.premium-item-v2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); background: var(--panel-soft); }
.premium-item-v2 > span { display: grid; gap: 2px; }
.premium-item-v2 small, .premium-item-v2 em { color: var(--muted); font-size: .68rem; font-style: normal; }
.premium-item-v2 b { color: #8fbf7a; font-size: .7rem; }
.premium-item-v2 button { padding: 5px 8px; border: 1px solid var(--gold); font-size: .7rem; }

/* Gesandtschaft: Postfach links, Faden/neue Botschaft rechts. */
.embassy-grid { display: grid; grid-template-columns: 280px 1fr; gap: 12px; align-items: start; }
.embassy-list { display: grid; gap: 5px; align-content: start; max-height: 64vh; overflow-y: auto; }
.embassy-item {
  display: grid; gap: 2px; text-align: left; padding: 7px 10px;
  border: 1px solid var(--line); background: var(--panel-soft); font-size: .78rem; }
.embassy-item:hover { border-color: var(--gold); }
.embassy-item.selected { border-color: var(--gold); background: rgba(232, 201, 122, .1); }
.embassy-item b { color: var(--ink); font-weight: 600; }
.embassy-item small { color: var(--muted); }
.embassy-new { padding: 6px 10px; border: 1px dashed var(--line); background: transparent; font-size: .76rem; color: var(--muted); }
.embassy-new:hover { border-color: var(--gold); color: var(--gold-soft); }
.embassy-detail { display: grid; gap: 8px; align-content: start; }
.embassy-message {
  display: grid; gap: 3px; padding: 7px 10px; border: 1px solid var(--line);
  background: var(--panel-soft); font-size: .8rem; }
.embassy-message.own { border-left: 3px solid var(--gold); }
.embassy-message small { color: var(--muted); font-size: .7rem; }
.embassy-message span { color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.embassy-compose { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: end; }
.embassy-compose textarea, .embassy-detail select, .embassy-detail input, .embassy-detail textarea {
  padding: 7px 9px; border: 1px solid var(--line); background: var(--panel-soft);
  color: var(--ink); font-size: .82rem; font-family: inherit; resize: none; }
.embassy-compose button, .embassy-detail button[data-embassy-send] {
  padding: 7px 14px; border: 1px solid var(--gold); justify-self: start;
  background: linear-gradient(160deg, #e8c97a, #b8892f); color: #1c1608; font-weight: 700; }
.embassy-compose button:disabled, .embassy-detail button:disabled { opacity: .5; }

/* Buendnis-Fenster: nutzt ranking-row-Zeilen, Rolle als Beischrift. */
.member-role { font-style: normal; color: var(--muted); font-size: .72rem; margin-left: 6px; }
.alliance-create-v2 { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 6px; align-items: end; margin-top: 14px; }
.alliance-create-v2 h3 { grid-column: 1 / -1; }
.alliance-create-v2 input, .alliance-controls-v2 input, .alliance-controls-v2 select {
  min-width: 0; padding: 7px 8px; border: 1px solid var(--line); background: var(--panel-soft); color: var(--ink);
}
.alliance-create-v2 button, .alliance-controls-v2 button, .alliance-members-v2 button {
  padding: 6px 10px; border: 1px solid var(--line-strong); background: var(--panel-soft);
}
.alliance-members-v2 { display: grid; gap: 5px; }
.alliance-members-v2 .ranking-row { grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; }
.alliance-controls-v2 {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr) 130px minmax(180px, 1fr) auto;
  gap: 6px;
  align-items: end;
  margin-top: 14px;
}
.alliance-controls-v2 h3 { grid-column: 1 / -1; }
.alliance-controls-v2 label { display: grid; gap: 3px; color: var(--muted); font-size: .7rem; }
.alliance-secondary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.alliance-marker-v2 { display: grid; gap: 2px; padding: 7px 9px; border: 1px solid var(--line); background: var(--panel-soft); }
.alliance-marker-v2.attack { border-left: 3px solid #c86e58; }
.alliance-marker-v2.support { border-left: 3px solid #7ca66c; }
.alliance-marker-v2 small { color: var(--muted); font-size: .7rem; }

.alliance-hub-tabs {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 3px 0 10px;
}
.alliance-command-center { display: grid; gap: 8px; margin-bottom: 8px; padding: 10px; border: 1px solid var(--line-strong); background: linear-gradient(145deg, rgba(35, 49, 37, .92), rgba(8, 15, 11, .9)); }
.alliance-command-center > header { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.alliance-command-center > header > span { display: grid; }
.alliance-command-center > header small { color: var(--gold); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.alliance-command-center > header strong { color: var(--gold-soft); font: 700 1rem/1.2 Georgia, serif; }
.alliance-command-center > header em { color: var(--muted); font-size: .7rem; font-style: normal; }
.alliance-command-center > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.alliance-command-center button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; min-width: 0; padding: 7px 8px; border: 1px solid var(--line); background: rgba(6, 12, 8, .64); text-align: left; }
.alliance-command-center button:hover { border-color: var(--gold); }
.alliance-command-center button span { color: var(--ink); font-weight: 700; }
.alliance-command-center button b { color: var(--gold-soft); font-size: 1rem; }
.alliance-command-center button small { grid-column: 1 / -1; color: var(--muted); font-size: .64rem; }
.alliance-member-profile { padding: 0; border: 0; color: var(--ink); background: transparent; font: inherit; text-align: left; }
.alliance-member-profile:hover { color: var(--gold-soft); text-decoration: underline; }
.alliance-hub-tabs button { min-width: 0; min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); background: var(--panel-soft); color: var(--muted); }
.alliance-hub-tabs button.selected { border-color: var(--gold); background: rgba(184, 143, 54, .18); color: var(--gold-soft); }
.alliance-hub-tabs button b { min-width: 18px; margin-left: 4px; padding: 1px 5px; border-radius: 9px; background: #8f392f; color: #fff; }
.alliance-hub-section, .alliance-hub-card, .alliance-hub-grid { min-width: 0; }
.alliance-hub-card { display: grid; gap: 8px; margin-bottom: 10px; padding: 10px; border: 1px solid var(--line); background: rgba(8, 15, 11, .7); }
.alliance-hub-card > h3 { margin: 0; color: var(--gold-soft); font-size: .82rem; }
.alliance-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.alliance-compose { display: grid; gap: 6px; }
.alliance-compose input, .alliance-compose textarea, .alliance-compose select,
.alliance-inline-decision input, .alliance-operation-create-v2 input, .alliance-operation-create-v2 select,
.alliance-operation-commit-v2 input, .alliance-operation-commit-v2 select,
.alliance-logistics-form input, .alliance-logistics-form select {
  width: 100%; min-width: 0; padding: 7px 8px; border: 1px solid var(--line); background: #0a120d; color: var(--ink);
}
.alliance-diplomacy-compose { margin-top: 8px; grid-template-columns: minmax(140px, 1fr) minmax(130px, .7fr); }
.alliance-diplomacy-compose textarea, .alliance-diplomacy-compose button { grid-column: 1 / -1; }
.alliance-governance-item, .alliance-circular-v2, .alliance-post, .alliance-operation-v2, .alliance-contribution, .alliance-convoy-v2, .alliance-relation {
  display: grid; gap: 6px; padding: 8px; border: 1px solid var(--line); background: var(--panel-soft);
}
.alliance-governance-item + .alliance-governance-item, .alliance-circular-v2 + .alliance-circular-v2,
.alliance-post + .alliance-post, .alliance-operation-v2 + .alliance-operation-v2 { margin-top: 6px; }
.alliance-governance-item header, .alliance-circular-v2 header, .alliance-post header, .alliance-operation-v2 > header,
.alliance-contribution, .alliance-convoy-v2, .alliance-relation { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.alliance-governance-item header span, .alliance-circular-v2 header span, .alliance-post header span,
.alliance-operation-v2 header span, .alliance-contribution span, .alliance-convoy-v2 span, .alliance-relation span { display: grid; gap: 2px; min-width: 0; }
.alliance-governance-item time, .alliance-circular-v2 time, .alliance-post time, .alliance-thread-row time,
.alliance-contribution small, .alliance-convoy-v2 small, .alliance-relation small { color: var(--muted); font-size: .66rem; }
.alliance-governance-item p, .alliance-circular-v2 p, .alliance-post p, .alliance-operation-v2 p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.alliance-inline-decision { display: grid; grid-template-columns: minmax(150px, 1fr) auto auto; gap: 5px; align-items: center; }
.alliance-relation.allied { border-left: 3px solid #6f9f79; }
.alliance-relation.war { border-left: 3px solid #b85d52; }
.alliance-circular-v2.unread, .alliance-thread-row.unread { border-color: rgba(224, 189, 96, .78); box-shadow: inset 3px 0 var(--gold); }
.hidden-content { opacity: .58; filter: grayscale(.55); }
.alliance-circular-v2 footer, .alliance-post footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.alliance-thread-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.alliance-thread-toolbar span { display: grid; gap: 2px; }
.alliance-thread-row { display: flex; width: 100%; justify-content: space-between; gap: 10px; padding: 8px; border: 1px solid var(--line); background: var(--panel-soft); text-align: left; }
.alliance-thread-row + .alliance-thread-row { margin-top: 5px; }
.alliance-thread-row span { display: grid; gap: 2px; }
.alliance-thread-row b { justify-self: end; min-width: 20px; padding: 2px 6px; border-radius: 10px; background: #8f392f; color: #fff; text-align: center; }
.alliance-audit { margin-top: 8px; padding: 8px; border: 1px solid var(--line); }
.alliance-audit ul, .alliance-rights-v2 ul { display: grid; gap: 5px; margin: 7px 0 0; padding: 0; list-style: none; }
.alliance-audit li { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .68rem; }
.alliance-operation-create-v2 { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(110px, .55fr) minmax(140px, 1fr); gap: 6px; align-items: end; }
.alliance-operation-create-v2 label, .alliance-operation-commit-v2 label, .alliance-logistics-form label { display: grid; gap: 3px; color: var(--muted); font-size: .67rem; }
.alliance-operation-create-v2 [data-operation-note] { grid-column: span 2; }
.alliance-contribution-list { display: grid; gap: 5px; }
.alliance-operation-commit-v2 { display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)); gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.alliance-operation-commit-v2 > select, .alliance-operation-commit-v2 .alliance-check,
.alliance-operation-commit-v2 > button { grid-column: span 3; }
.alliance-check { display: flex !important; align-items: center; grid-template-columns: auto 1fr; }
.alliance-check input { width: auto; }
.alliance-rights-v2 { margin-bottom: 10px; padding: 8px; border: 1px solid var(--line); }
.alliance-rights-v2 li { display: grid; grid-template-columns: minmax(130px, 1fr) auto auto auto auto; gap: 6px; align-items: center; padding: 6px; background: var(--panel-soft); }
.alliance-rights-v2 li > span { display: grid; }
.alliance-rights-v2 label { white-space: nowrap; }
.alliance-logistics-form { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 6px; align-items: end; }
.alliance-logistics-form button { grid-column: 1 / -1; }

/* Kaiserpfad: Kulturen dreispaltig, Staedte zweispaltig - kein Scroll. */
.endgame-cultures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.endgame-cities { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.endgame-claim-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.endgame-systems { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 10px; margin-top: 16px; }
.endgame-system { display: grid; align-content: start; gap: 8px; padding: 11px; border: 1px solid var(--line); background: var(--panel-soft); }
.endgame-system > header { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 9px; }
.endgame-system > header img { width: 54px; height: 54px; }
.endgame-system > header span { display: grid; gap: 1px; }
.endgame-system > header small { color: var(--gold); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.endgame-system > header strong { color: var(--ink); }
.endgame-system > header em { color: var(--muted); font-size: .72rem; font-style: normal; }
.endgame-meter { height: 5px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.endgame-meter i { display: block; height: 100%; background: linear-gradient(90deg, #b8892f, #e8c97a); }
.dragon-aspects { display: grid; gap: 5px; }
.dragon-aspect { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px; border: 1px solid var(--line); }
.dragon-aspect span { display: grid; gap: 2px; }
.dragon-aspect small { color: var(--muted); font-size: .69rem; }
.dragon-aspect button, .dragon-contribute button, .defense-system > button { padding: 6px 10px; border: 1px solid var(--gold); }
.dragon-contributions { display: flex; flex-wrap: wrap; gap: 4px; }
.dragon-contributions span { padding: 3px 6px; border: 1px solid var(--line); color: var(--muted); font-size: .69rem; }
.dragon-contribute { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 5px; }
.dragon-contribute select, .dragon-contribute input { min-width: 0; padding: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.defense-system > button { justify-self: start; }
.defense-system > button:disabled { opacity: .5; }

/* Ausbau A1: echte v1-Assets — Icon- und Gemaeldegroessen. */
.resource-chip i img { width: 24px; height: 24px; display: block; }
.res-ic { width: 15px; height: 15px; vertical-align: -3px; }
.ctx-icon { width: 24px; height: 24px; vertical-align: -5px; }
.building-tile img.tile-art { width: 100%; height: 92px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.building-tile img.tile-icon { width: 46px; height: 46px; margin: 23px 0; }
.building-tile img.tile-icon.dim { opacity: .45; filter: grayscale(.65); }
.unit-icon img { width: 46px; height: 46px; }

/* Feldzuege (Ausbau A2): Mengenfeld + Einheitenwahl im Kontextpanel. */
.node-attack { display: flex; gap: 6px; }
.node-attack input {
  width: 76px; padding: 6px 8px; border: 1px solid var(--line);
  background: var(--panel-soft); color: var(--ink); font-size: .84rem; }
.node-army { display: flex; gap: 6px; }
.node-army-field {
  display: grid; justify-items: center; gap: 3px; padding: 5px 6px;
  border: 1px solid var(--line); background: var(--panel-soft); }
.node-army-field img { width: 26px; height: 26px; }
.node-army-field input {
  width: 52px; padding: 3px 5px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font-size: .8rem; text-align: center; }
.node-actions, .founding-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.siege-engine-picker {
  display: grid;
  gap: 4px;
  margin-top: 7px;
  padding: 7px;
  border: 1px solid var(--line);
  background: rgba(5, 9, 7, .24);
}
.siege-engine-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px auto;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
  font-size: .75rem;
}
.siege-engine-field input {
  width: 58px;
  padding: 4px 5px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  text-align: center;
}
.siege-engine-field small { color: var(--muted); white-space: nowrap; }
.node-formation { display: grid; gap: 3px; margin-top: 7px; color: var(--muted); font-size: .71rem; }
.node-formation select { padding: 6px 7px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.node-siege-state { display: grid; gap: 6px; margin-top: 9px; padding: 8px; border: 1px solid var(--line-strong); background: rgba(120, 50, 40, .12); }
.node-siege-state > strong { color: var(--gold-soft); font-size: .75rem; }
.node-siege-state label { display: grid; grid-template-columns: 1fr 110px; gap: 6px; color: var(--muted); font-size: .7rem; }
.node-siege-state progress { width: 110px; accent-color: var(--gold); }

/* A2-Livebeweis-Fund: Nebel-Knoten fingen Klicks benachbarter Orte ab -
   Stapelordnung nach Wichtigkeit, damit Entdecktes immer bedienbar bleibt. */
.map-node.hidden { z-index: 1; }
.map-node.discovered { z-index: 2; }
.map-node.owned { z-index: 3; }
.map-node.selected { z-index: 4; }

/* A2-Fund #3: Bei 720p verdeckte die Chronik den Feldzug-Knopf im
   Kontextpanel. Rechte Rail mit fester Zeilenaufteilung: Minimap fix,
   Kontextpanel nimmt den flexiblen Platz (Sicherheitsventil overflow-y
   nur im Panel, Main und Fenster bleiben scrollfrei), Chronik unten. */
.v2-right { grid-template-rows: auto minmax(0, 1fr) auto; }
.context-panel { overflow-y: auto; }

/* Ausbau A3: Ungelesen-Badges + Wirtschaftsbericht. */
.window-bar button { position: relative; }
.window-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
  padding: 0 4px; border-radius: 9px; display: grid; place-items: center;
  background: #b8452f; color: #fff; font-size: .66rem; font-weight: 700;
  border: 1px solid rgba(0, 0, 0, .4); }
.eco-row {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.4fr; gap: 8px;
  padding: 6px 10px; border: 1px solid var(--line); background: var(--panel-soft);
  font-size: .8rem; align-items: baseline; }
.eco-row span { color: var(--ink); }
.eco-row em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.eco-row .eco-pos { color: #8fbf7a; }
.eco-row .eco-neg { color: #d98d7c; }
.eco-row.eco-market { border-left: 3px solid var(--gold); }

/* A4 Fremdforschung: Volks-Tabs (nutzt ranking-tabs), unbekannte gedimmt. */
.research-tabs button.unknown { opacity: .45; }
.research-tabs button small { margin-left: 3px; font-size: .66rem; }

/* A6: Beziehungs-Knoepfe im Faden. */
.embassy-relations { display: flex; gap: 6px; }
.embassy-relations button {
  padding: 4px 10px; border: 1px solid var(--line); background: var(--panel-soft); font-size: .72rem; }
.embassy-relations button:hover { border-color: #d98d7c; color: #e8b3a6; }
.embassy-report { margin-top: 4px; color: var(--muted); font-size: .7rem; }
.embassy-report summary { cursor: pointer; color: #d9a48c; }
.embassy-report[open] { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 5px; }
.embassy-report[open] summary { grid-column: 1 / -1; }
.embassy-report button {
  padding: 5px 9px;
  border: 1px solid rgba(217, 141, 124, .55);
  background: rgba(120, 50, 40, .2);
  color: #e8b3a6;
}

/* Schoenheits-Phase S1: gemalte Buehnen fuer Login und alle drei Ebenen. */
.login-overlay {
  background:
    linear-gradient(rgba(8, 12, 9, .72), rgba(8, 12, 9, .88)),
    url("/assets/world/world-map-background-v1.webp") center / cover no-repeat; }
.v2-main::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--stage-art, none) center / cover no-repeat;
  opacity: .85; }
.v2-main::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(rgba(11, 16, 12, .55), rgba(11, 16, 12, .35) 40%, rgba(11, 16, 12, .72)); }
.node-map { z-index: 1; }
.city-grid { position: absolute; inset: 44px 12px 12px; z-index: 1; }
.city-scene { display: contents; }
.building-tile { background: rgba(20, 28, 24, .78); backdrop-filter: blur(2px); }
.building-tile:hover { background: rgba(30, 40, 33, .88); }
.map-node i { box-shadow: 0 0 8px rgba(0, 0, 0, .8); }
.map-node em { text-shadow: 0 1px 4px #000, 0 0 12px rgba(0, 0, 0, .9); }
.map-node.npc .map-node-art {
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(204, 166, 85, .78), 0 0 18px rgba(129, 92, 176, .58);
}
.npc-map-badge {
  position: absolute;
  top: -6px;
  right: -7px;
  z-index: 5;
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid #d5ae58;
  border-radius: 50%;
  background: #1b1523;
  color: #f2d78c;
  box-shadow: 0 2px 8px #000;
  font: 700 .58rem/1 Georgia, serif;
}
.map-node.npc > em { color: #ead99f; }
.culture-dossier {
  display: grid;
  gap: 8px;
  margin: 8px 0;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--dossier-accent) 48%, rgba(218, 195, 132, .24));
  border-left: 3px solid var(--dossier-accent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--dossier-accent) 10%, rgba(8, 15, 11, .94)), rgba(7, 13, 9, .94));
  box-shadow: inset 0 0 24px color-mix(in srgb, var(--dossier-accent) 7%, transparent);
}
.culture-dossier > header { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 8px; }
.culture-dossier > header > span:last-child { display: grid; min-width: 0; gap: 1px; }
.culture-dossier-sigil {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--dossier-accent);
  border-radius: 50%;
  color: #f0d891;
  background: rgba(4, 8, 6, .72);
  font: 700 1rem/1 Georgia, serif;
}
.culture-dossier header small, .culture-dossier-biomes > small, .culture-dossier-forces > summary {
  color: var(--dossier-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.culture-dossier-forces > summary { cursor: pointer; }
.culture-dossier-forces[open] > summary { margin-bottom: 5px; }
.culture-dossier header strong { color: #f1dda4; font: 700 .92rem/1.15 Georgia, serif; }
.culture-dossier header em { overflow: hidden; color: #bdb4a2; font-size: 11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.culture-dossier > p { margin: 0; color: #cbc2b1; font-size: 11px; line-height: 1.4; }
.culture-dossier-facts { display: grid; gap: 4px; }
.culture-dossier-facts > span { display: grid; grid-template-columns: minmax(82px, .72fr) minmax(0, 1.28fr); gap: 6px; align-items: baseline; }
.culture-dossier-facts small { color: #8f998f; font-size: 11px; }
.culture-dossier-facts strong { color: #dfcf9f; font-size: 11px; line-height: 1.3; text-align: right; }
.culture-dossier-biomes, .culture-dossier-forces { display: grid; gap: 5px; padding-top: 6px; border-top: 1px solid rgba(218, 195, 132, .14); }
.culture-dossier-biomes > div { display: flex; flex-wrap: wrap; gap: 4px; }
.culture-biome-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  border: 1px solid rgba(218, 195, 132, .2);
  border-radius: 10px;
  color: #cfc4a5;
  background: rgba(4, 9, 6, .5);
  font-size: 11px;
}
.culture-biome-pill img { width: 13px; height: 13px; }
.culture-biome-pill.current { border-color: var(--dossier-accent); color: #f0d891; }
.culture-biome-verdict { color: #b1b8ad; font-size: 11px; line-height: 1.3; }
.culture-biome-verdict.compatible { color: #a9ca8f; }
.culture-biome-verdict.incompatible { color: #dfa080; }
.culture-dossier-forces > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.culture-dossier-unit {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 3px 4px;
  border: 1px solid rgba(218, 195, 132, .13);
  background: rgba(4, 9, 6, .42);
}
.culture-dossier-unit > img { width: 22px; height: 22px; object-fit: contain; }
.culture-dossier-unit > span { display: grid; min-width: 0; }
.culture-dossier-unit strong { overflow: hidden; color: #dfd0a3; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.culture-dossier-unit small { overflow: hidden; color: #8f998f; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.location-dossier, .owner-dossier, .founding-command-panel, .node-operation-panel {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(218, 195, 132, .22);
  background: linear-gradient(145deg, rgba(15, 25, 18, .94), rgba(5, 10, 7, .94));
}
.location-dossier > header, .owner-dossier > header, .founding-command-panel > header, .node-operation-panel > header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.location-dossier > header img { width: 30px; height: 30px; padding: 4px; border: 1px solid rgba(218, 195, 132, .28); border-radius: 50%; background: rgba(4, 8, 6, .7); }
.location-dossier > header span, .owner-dossier > header > span:last-child, .founding-command-panel > header, .node-operation-panel > header { display: grid; gap: 1px; }
.location-dossier header small, .owner-dossier header small, .founding-command-panel header small, .node-operation-panel header small {
  color: #9daf91;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.location-dossier header strong, .owner-dossier header strong, .founding-command-panel header strong, .node-operation-panel header strong { color: #ecd99f; font: 700 .8rem/1.15 Georgia, serif; }
.location-dossier > p, .owner-dossier > p, .founding-suitability > p { margin: 0; color: #aaa99e; font-size: 11px; line-height: 1.42; }
.location-facts { padding-top: 5px; border-top: 1px solid rgba(218, 195, 132, .12); }
.location-facts.redacted { padding-top: 0; border-top: 0; }
.location-route { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.location-route > span { display: grid; gap: 1px; padding: 5px 6px; border: 1px solid rgba(117, 157, 111, .18); background: rgba(8, 18, 11, .58); }
.location-route small { color: #81917f; font-size: 11px; text-transform: uppercase; }
.location-route strong { overflow: hidden; color: #cfdaa9; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.location-loading { margin: 0; color: #91a28c; font-size: 11px; }
.location-loading.warning { color: #d1a073; }
.owner-dossier { border-color: rgba(126, 164, 115, .32); }
.owner-dossier.relation-unbound, .owner-dossier.relation-hostile, .owner-dossier.relation-war { border-color: rgba(188, 103, 78, .42); }
.owner-sigil {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--owner-accent);
  border-radius: 50%;
  color: #f0d891;
  background: color-mix(in srgb, var(--owner-accent) 10%, rgba(4, 8, 6, .82));
  font: 700 .95rem/1 Georgia, serif;
}
.owner-dossier header em { color: #a8aa9f; font-size: 11px; font-style: normal; }
.owner-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.owner-actions button { min-width: 0; padding: 6px 5px; border-color: rgba(218, 195, 132, .28); font-size: 12px; }
.owner-actions button:disabled { opacity: .48; }
.founding-suitability {
  padding: 8px;
  border: 1px solid rgba(102, 150, 100, .28);
  background: rgba(7, 14, 9, .72);
}
.founding-suitability > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #dccc99; font-size: 11px; cursor: pointer; }
.founding-suitability > summary b { color: #a7c28e; font-size: 11px; }
.founding-suitability[open] > summary { margin-bottom: 7px; }
.founding-culture-list { display: grid; gap: 4px; margin-top: 7px; }
.founding-culture {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border: 1px solid rgba(218, 195, 132, .13);
  background: rgba(4, 9, 6, .5);
}
.founding-culture > span:first-child { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--culture-accent); border-radius: 50%; color: #e8cf88; font: 700 .72rem/1 Georgia, serif; }
.founding-culture > span:last-child { display: grid; gap: 1px; min-width: 0; }
.founding-culture strong { color: #ddcfa3; font-size: 11px; }
.founding-culture small { overflow: hidden; color: #929c91; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.founding-culture.ready { border-color: rgba(127, 184, 104, .5); box-shadow: inset 2px 0 #79aa66; }
.founding-culture.ready small { color: #a9ca8f; }
.founding-culture.blocked { border-color: rgba(188, 130, 75, .32); }
.founding-unsuitable { display: block; margin-top: 6px; color: #8c968e; font-size: 11px; line-height: 1.35; }
.founding-command-panel button, .node-operation-panel button { font-size: 12px; }
.founding-blockers { margin: 0; padding: 7px 8px; border-left: 2px solid #c88752; color: #d9b58e; background: rgba(91, 49, 27, .22); font-size: 11px; line-height: 1.4; }
.founding-blockers strong { color: #edca9b; }
.founding-command-panel, .node-operation-panel { margin-top: 2px; }
.node-operation-panel .node-army { flex-wrap: wrap; }
.market-focus-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 12px;
  padding: 9px 10px;
  border: 1px solid rgba(107, 154, 106, .4);
  background: linear-gradient(145deg, rgba(24, 42, 26, .92), rgba(8, 16, 11, .94));
}
.market-focus-card > span { display: grid; }
.market-focus-card small { color: #9bb38d; font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.market-focus-card strong { color: #ebd69d; }
.market-focus-card p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .68rem; }
.market-focus-card button { grid-column: 2; grid-row: 1; }
.npc-realm-card {
  display: grid;
  gap: 9px;
  margin: 12px 0;
  padding: 11px;
  border: 1px solid rgba(180, 139, 216, .48);
  background: linear-gradient(145deg, rgba(36, 25, 45, .92), rgba(14, 24, 18, .94));
  box-shadow: inset 0 0 28px rgba(119, 78, 157, .1);
}
.npc-realm-card header { display: grid; gap: 2px; }
.npc-realm-card header small { color: #c9a9de; font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.npc-realm-card header strong { color: #f1dda4; font: 700 1rem/1.2 Georgia, serif; }
.npc-realm-card p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.npc-realm-card dl { margin: 0; }
.npc-realm-card blockquote { display: grid; gap: 3px; margin: 0; padding: 8px 9px; border-left: 2px solid #9c6fc0; background: rgba(5, 8, 6, .4); }
.npc-realm-card blockquote strong { color: #dfc98d; font-size: .72rem; }
.npc-realm-card blockquote span { color: #c9c1b0; font-size: .68rem; line-height: 1.4; }
.npc-court-directory { display: grid; gap: 9px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.npc-court-directory > header { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.npc-court-directory > header div { display: grid; gap: 2px; }
.npc-court-directory > header small { color: #c9a9de; font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.npc-court-directory > header h3 { margin: 0; color: #ead59b; font: 700 1.05rem/1.2 Georgia, serif; }
.npc-court-directory > header b { color: #d9bd80; font-size: .72rem; }
.npc-court-directory > p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.npc-court-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 7px; }
.npc-court-card { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 10px; border: 1px solid rgba(180, 139, 216, .35); background: linear-gradient(145deg, rgba(34, 25, 42, .78), rgba(13, 22, 17, .88)); }
.npc-court-card header { display: flex; align-items: center; gap: 9px; }
.npc-court-card header > span { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border: 1px solid #9d73b9; border-radius: 50%; color: #e5c878; font: 700 1rem/1 Georgia, serif; }
.npc-court-card header div { display: grid; min-width: 0; }
.npc-court-card header small { color: #bda5ca; font-size: .57rem; letter-spacing: .08em; text-transform: uppercase; }
.npc-court-card header strong { overflow: hidden; color: #eddaa1; font: 700 .82rem/1.25 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.npc-court-card p { margin: 0; color: #c8c0b1; font-size: .65rem; line-height: 1.45; }
.npc-court-card p b { color: #dbc28a; }
.npc-court-card footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px; color: var(--muted); font-size: .58rem; }
.npc-court-card blockquote { display: grid; gap: 2px; margin: 0; padding: 7px 8px; border-left: 2px solid #9166b0; background: rgba(4, 8, 6, .38); }
.npc-court-card blockquote strong { color: #d9c084; font-size: .64rem; }
.npc-court-card blockquote span { color: #bdb5a7; font-size: .6rem; line-height: 1.4; }
.npc-court-card .npc-location-note { color: #79907f; font-size: .56rem; }

/* S1-Nachjustierung: die Buehne muss atmen - Kacheln durchlaessiger,
   Verlauf sanfter, Panorama voll deckend. */
.v2-main::before { opacity: 1; }
.v2-main::after {
  background: linear-gradient(rgba(11, 16, 12, .42), rgba(11, 16, 12, .2) 40%, rgba(11, 16, 12, .58)); }
.building-tile { background: rgba(16, 22, 18, .58); }
.building-tile:hover { background: rgba(24, 32, 27, .8); }
.building-tile.empty-slot { background: rgba(16, 22, 18, .42); }

/* S2: Fenster-Buehnen + Volks-Akzent. */
:root { --faction-accent: var(--gold); }
.v2-window { position: relative; overflow: hidden; }
.v2-window::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--window-art, none) center / cover no-repeat; }
.v2-window::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(rgba(13, 18, 14, .8), rgba(13, 18, 14, .68)); }
.window-head, .window-body { position: relative; z-index: 1; }
.level-switch button[aria-selected="true"] {
  background: linear-gradient(160deg, var(--faction-accent), #8a6a28); color: #14100a; }
.ranking-tabs button.selected {
  background: linear-gradient(160deg, var(--faction-accent), #8a6a28); border-color: var(--faction-accent); }
.building-tile.selected { border-color: var(--faction-accent); }
.city-switch button.active { border-color: var(--faction-accent); }
.ruler-chip strong { color: var(--faction-accent); }

/* S2-Fund: Kacheln ragten mit z-index ueber den Main-Rand und fingen
   Klicks der Fensterleiste ab - der Main schneidet jetzt strikt ab. */
.v2-main { overflow: hidden; }

/* Schoenheit S3: Bewegung - kurz, dezent, abschaltbar. */
@keyframes win-in { from { opacity: 0; transform: scale(.97); } }
.v2-window { animation: win-in .16s ease-out; }
.building-tile { transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.building-tile:hover { transform: translateY(-3px); }
.window-bar button, .ranking-tabs button, .level-switch button,
.unit-train button, .research-row button, .ritual-row button {
  transition: border-color .15s ease, background .15s ease, color .15s ease; }
#main-stage::before { transition: opacity .25s ease; }
.v2-main.stage-dip::before { opacity: .2; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* S4: kollidierende Labels eigener Nachbarstaedte unter den Punkt. */
.map-node em.label-below { transform: translateY(20px); }

/* Audit-Fixes: Kostenzeile im Ausbau-Panel, Markt-Helfer. */
.cost-line { display: flex; flex-wrap: wrap; gap: 6px; }
.building-requirements {
  display: grid;
  gap: 6px;
  margin: 10px 0;
  padding: 9px 10px;
  border: 1px solid rgba(125, 180, 115, .38);
  background: rgba(30, 70, 40, .2);
  font: 600 .72rem/1.35 "Segoe UI", system-ui, sans-serif;
}
.building-requirements.blocked {
  border-color: rgba(217, 141, 124, .55);
  background: rgba(120, 50, 40, .2);
}
.building-requirements > span {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 5px;
  align-items: baseline;
}
.building-requirements .met { color: #a8d49b; }
.building-requirements .missing { color: #f0b9aa; }
.building-requirements small { color: var(--muted); font-weight: 500; }
.cost-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
  border: 1px solid var(--line); background: var(--panel-soft);
  font-size: .78rem; font-variant-numeric: tabular-nums; }
.cost-chip.cost-miss { border-color: rgba(217, 141, 124, .6); color: #d98d7c; }
button[data-market-best] {
  padding: 6px 10px; border: 1px solid var(--line); background: var(--panel-soft); font-size: .76rem; }
button[data-market-best]:hover { border-color: var(--gold); }
.market-form { grid-template-columns: auto 1.2fr 1fr 1.2fr auto auto; }

/* -----------------------------------------------------------------------
   Produktions-Shell 10.8.: weniger gleichzeitige Navigation, klare
   Hierarchie und belastbare kleine Viewports. Die Spielfläche bleibt fest;
   nur inhaltlich lange Listen und Dialoge erhalten gezielten Scrollraum. */
:root {
  --bg-deep: #070b08;
  --panel: rgba(15, 23, 18, .95);
  --panel-soft: rgba(25, 36, 29, .88);
  --panel-raised: #0c1510;
  --line: rgba(218, 195, 132, .24);
  --line-strong: rgba(218, 190, 112, .48);
  --gold: #d6ad54;
  --gold-soft: #f0d98d;
  --ink: #f0eee3;
  --muted: #a4ad9f;
  --danger: #df9b88;
  --success: #94c582;
  --shadow: 0 22px 70px rgba(0, 0, 0, .48);
}

body {
  background:
    radial-gradient(1100px 700px at 52% -20%, rgba(48, 73, 55, .7), transparent 62%),
    linear-gradient(145deg, #0c130e, var(--bg-deep));
}

button, summary, input, select, textarea { outline-offset: 3px; }
button:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold-soft);
}

.game-shell {
  grid-template:
    "top top top" 70px
    "left main right" minmax(0, 1fr)
    "bottom bottom bottom" 68px / 240px minmax(0, 1fr) 280px;
  gap: 10px;
  padding: 10px;
}

.v2-topbar {
  display: grid;
  grid-template-columns: auto minmax(150px, auto) minmax(420px, 1fr) auto;
  gap: 16px;
  padding: 8px 14px;
  border-color: var(--line);
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.brand-lockup, .login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.brand-lockup > span:last-child, .login-brand > span:last-child {
  display: grid;
  line-height: 1.02;
}
.brand-lockup b, .login-brand strong {
  color: var(--ink);
  font: 700 1rem/1 Georgia, serif;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.brand-lockup small, .login-brand small {
  color: var(--gold);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.brand-emblem {
  display: block;
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(214, 173, 84, .18));
}

.ruler-chip {
  padding-left: 14px;
  border-left: 1px solid var(--line);
}
.ruler-chip strong { font-size: .98rem; }

.resource-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(92px, 1fr));
  gap: 7px;
  justify-content: stretch;
  flex-wrap: nowrap;
}
.resource-chip {
  min-width: 0;
  padding: 5px 8px;
  border-radius: 3px;
  background: linear-gradient(145deg, rgba(35, 48, 39, .9), rgba(20, 30, 24, .86));
}
.resource-chip b { overflow: hidden; text-overflow: ellipsis; }
.resource-chip small { white-space: nowrap; }
.resource-chip i img { width: 22px; height: 22px; }

.topbar-tail { justify-content: flex-end; }
.active-bonus-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 150px;
  padding-right: 7px;
  border-right: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: thin;
}
.active-bonus-bar[hidden] { display: none !important; }
.active-bonus-chip {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 42px;
  padding: 3px 3px 12px;
  border: 1px solid rgba(209, 166, 72, .52);
  border-radius: 5px;
  background: radial-gradient(circle at 50% 38%, rgba(198, 155, 65, .18), rgba(12, 22, 17, .96) 70%);
  box-shadow: inset 0 0 12px rgba(185, 224, 153, .06), 0 0 10px rgba(209, 166, 72, .08);
}
.active-bonus-chip:hover, .active-bonus-chip:focus-visible {
  border-color: var(--gold);
  box-shadow: inset 0 0 14px rgba(209, 166, 72, .16), 0 0 12px rgba(209, 166, 72, .18);
}
.active-bonus-chip img { width: 24px; height: 24px; object-fit: contain; }
.active-bonus-chip small {
  position: absolute;
  right: 3px;
  bottom: 2px;
  left: 3px;
  overflow: hidden;
  color: var(--gold-soft);
  font-size: .57rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.active-bonus-pulse {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94d97c;
  box-shadow: 0 0 7px #94d97c;
}
.active-bonus-count {
  position: absolute;
  top: -4px;
  left: -4px;
  min-width: 16px;
  padding: 1px 3px;
  border: 1px solid var(--gold);
  border-radius: 9px;
  background: #142119;
  color: var(--gold-soft);
  font-size: .58rem;
  line-height: 1.25;
  text-align: center;
}
.stat-chip { white-space: nowrap; background: rgba(25, 36, 29, .68); }
.rail-toggle { display: none; }

.v2-left, .v2-right {
  align-content: stretch;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.v2-left { grid-template-rows: auto auto minmax(0, 1fr); }
.rail-card {
  border-radius: 4px;
  background: linear-gradient(145deg, rgba(20, 30, 24, .96), rgba(13, 21, 16, .94));
  box-shadow: 0 14px 36px rgba(0, 0, 0, .16);
}
.rail-card h2 { font-size: .72rem; }

.v2-main {
  padding: 12px;
  border-color: var(--line-strong);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.v2-main::after {
  background:
    linear-gradient(90deg, rgba(6, 9, 7, .42), transparent 16%, transparent 84%, rgba(6, 9, 7, .42)),
    linear-gradient(rgba(7, 11, 8, .28), rgba(7, 11, 8, .08) 46%, rgba(7, 11, 8, .58));
}
.v2-main[data-level="region"]::before { background-position: center 48%; }
.v2-main[data-level="region"]::after {
  background:
    var(--region-state-layer, linear-gradient(transparent, transparent)),
    var(--region-crown-layer, radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--faction-accent) 12%, transparent), transparent 52%)),
    linear-gradient(var(--region-biome-tint, rgba(24, 38, 25, .08)), var(--region-biome-shadow, rgba(7, 11, 8, .34))),
    linear-gradient(90deg, rgba(6, 9, 7, .32), transparent 15%, transparent 85%, rgba(6, 9, 7, .32));
}
.v2-main[data-level="region"]::before { filter: var(--region-biome-filter, saturate(1)); }
.v2-main[data-level="region"][data-region-biome="plains"] { --region-biome-filter: saturate(.94) sepia(.08); --region-biome-tint: rgba(129, 105, 52, .08); --region-biome-shadow: rgba(34, 28, 14, .28); }
.v2-main[data-level="region"][data-region-biome="forest"] { --region-biome-filter: saturate(1.18) hue-rotate(-7deg) brightness(.88); --region-biome-tint: rgba(23, 67, 36, .17); --region-biome-shadow: rgba(5, 22, 13, .44); }
.v2-main[data-level="region"][data-region-biome="mountains"] { --region-biome-filter: saturate(.76) contrast(1.12) brightness(.91); --region-biome-tint: rgba(86, 94, 101, .13); --region-biome-shadow: rgba(18, 22, 26, .42); }
.v2-main[data-level="region"][data-region-biome="coast"] { --region-biome-filter: saturate(1.08) hue-rotate(12deg) brightness(.98); --region-biome-tint: rgba(31, 94, 106, .13); --region-biome-shadow: rgba(8, 29, 35, .38); }
.v2-main[data-level="region"][data-region-biome="highlands"] { --region-biome-filter: saturate(.9) contrast(1.08); --region-biome-tint: rgba(75, 88, 73, .11); --region-biome-shadow: rgba(22, 29, 23, .38); }
.v2-main[data-level="region"][data-region-biome="marsh"] { --region-biome-filter: saturate(.78) hue-rotate(18deg) brightness(.82); --region-biome-tint: rgba(47, 61, 49, .2); --region-biome-shadow: rgba(11, 20, 16, .5); }
.v2-main[data-level="region"][data-region-biome="badlands"] { --region-biome-filter: saturate(1.2) sepia(.2) brightness(.9); --region-biome-tint: rgba(123, 65, 36, .17); --region-biome-shadow: rgba(41, 20, 12, .44); }
.v2-main[data-level="region"][data-region-development="frontier"] { --region-crown-layer: radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--faction-accent) 7%, transparent), transparent 42%); }
.v2-main[data-level="region"][data-region-development="growing"] { --region-crown-layer: radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--faction-accent) 13%, transparent), transparent 48%); }
.v2-main[data-level="region"][data-region-development="established"] { --region-crown-layer: radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--faction-accent) 19%, transparent), transparent 55%); }
.v2-main[data-level="region"][data-region-development="metropolitan"] { --region-crown-layer: radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--faction-accent) 26%, transparent), transparent 62%); }
.v2-main[data-level="region"][data-region-activity="mobilized"] { --region-state-layer: linear-gradient(115deg, transparent 20%, rgba(214, 173, 84, .11) 48%, transparent 76%); }
.v2-main[data-level="region"][data-region-activity="flourishing"] { --region-state-layer: linear-gradient(rgba(96, 145, 83, .1), transparent 54%); }
.v2-main[data-level="region"][data-region-activity="strained"] { --region-state-layer: linear-gradient(135deg, rgba(117, 38, 28, .2), transparent 58%, rgba(72, 26, 20, .16)); }
.v2-main[data-level="region"] .node-map::before {
  content: "";
  position: absolute;
  right: 2%;
  bottom: 2%;
  width: clamp(92px, 15%, 154px);
  aspect-ratio: 1;
  background: var(--region-biome-icon) center / contain no-repeat;
  opacity: .1;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .65));
  pointer-events: none;
}
.level-switch {
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  border-color: var(--line-strong);
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .34);
}
.level-switch button { min-width: 88px; padding: 7px 16px; }
.city-grid {
  inset: 54px 14px 14px;
  grid-template-columns: repeat(4, minmax(118px, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.building-tile {
  position: relative;
  overflow: hidden;
  border-color: rgba(218, 195, 132, .26);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(21, 31, 25, .48), rgba(10, 16, 12, .82));
  text-shadow: 0 1px 5px #000;
}
.building-tile::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 44%;
  z-index: -1;
  background: linear-gradient(transparent, rgba(5, 8, 6, .7));
}
.building-tile img.tile-art { height: clamp(64px, 12vh, 118px); }
.building-tile strong { font-size: .9rem; }
.building-tile.selected { box-shadow: inset 0 0 0 1px var(--faction-accent), inset 0 0 34px rgba(214, 173, 84, .14); }

.v2-bottom {
  position: relative;
  justify-content: center;
  padding: 6px 12px;
  overflow: visible;
  border-radius: 4px;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .18);
}
.server-state {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .72rem;
}
.server-state::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--muted);
}
.server-state.ok::before { background: var(--success); box-shadow: 0 0 9px rgba(148, 197, 130, .6); }

.command-dock {
  display: grid;
  grid-template-columns: repeat(5, minmax(96px, 132px));
  justify-content: center;
  gap: 6px;
}
.command-group { position: relative; }
.command-group > summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 5px 10px;
  list-style: none;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.command-group > summary::-webkit-details-marker { display: none; }
.command-group > summary img, .command-group > summary .css-gear {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  opacity: .82;
}
.command-group > summary span:not(.group-badge) { font-weight: 650; font-size: .82rem; }
.command-group > summary:hover, .command-group[open] > summary {
  color: var(--gold-soft);
  border-color: var(--line-strong);
  background: linear-gradient(145deg, rgba(44, 53, 35, .72), rgba(24, 33, 27, .9));
}
.command-group[open] > summary::before {
  content: "";
  position: absolute;
  inset: auto 10px -7px;
  height: 2px;
  background: var(--faction-accent);
}
.command-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 16px);
  z-index: 30;
  display: none;
  width: 290px;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--panel-raised);
  box-shadow: var(--shadow);
}
.command-group[open] > .command-menu { display: grid; }
.command-menu-end { left: auto; right: 0; }
.command-menu button {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 7px 10px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
}
.command-menu button:hover { border-color: var(--line); background: var(--panel-soft); }
.command-menu button > img, .command-menu button > .css-gear { width: 34px; height: 34px; }
.command-menu button > span:nth-child(2) { display: grid; min-width: 0; }
.command-menu b { color: var(--ink); font-size: .84rem; }
.command-menu small { color: var(--muted); font-size: .7rem; }
.css-gear {
  display: inline-block;
  border: 3px dotted var(--gold);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 24%, var(--gold) 26% 36%, transparent 38%);
}
.group-badge, .window-badge {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #b94c38;
  color: #fff;
  font-size: .64rem;
  font-weight: 750;
  border: 1px solid rgba(0, 0, 0, .5);
}
.group-badge { top: 1px; right: 5px; }
.group-badge[hidden] { display: none !important; }
.command-menu .window-badge { top: 4px; right: 5px; }

.window-overlay {
  padding: 22px;
  background: rgba(3, 6, 4, .76);
  backdrop-filter: blur(4px);
}
.v2-window {
  width: min(960px, 94vw);
  height: auto;
  max-height: calc(100vh - 44px);
  border-radius: 5px;
  background: var(--panel-raised);
}
.v2-window::after {
  background: linear-gradient(rgba(10, 17, 13, .94), rgba(10, 17, 13, .975));
}
.window-head { min-height: 70px; padding: 10px 16px; background: rgba(7, 12, 9, .5); }
.window-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.window-heading > img { width: 40px; height: 40px; flex: 0 0 40px; }
.window-heading > span { display: grid; min-width: 0; }
.window-heading small {
  color: var(--gold);
  font-size: .62rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.window-heading h2 { line-height: 1.15; }
.window-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.rail-scrim { display: none; }

@media (max-width: 1500px) {
  .game-shell { grid-template-columns: 225px minmax(0, 1fr) 260px; }
  .v2-topbar { grid-template-columns: auto minmax(130px, auto) minmax(390px, 1fr) auto; gap: 10px; }
  .brand-lockup > span:last-child { display: none; }
  .resource-chip { padding-inline: 6px; }
  .stat-chip { padding-inline: 7px; }
}

@media (max-width: 1180px) {
  .game-shell {
    grid-template:
      "top" auto
      "main" minmax(0, 1fr)
      "bottom" 66px / minmax(0, 1fr);
  }
  .v2-topbar { position: relative; z-index: 27; }
  .v2-left, .v2-right {
    position: fixed;
    top: 88px;
    bottom: 84px;
    z-index: 26;
    width: min(330px, calc(100vw - 36px));
    padding: 8px;
    background: rgba(6, 10, 7, .94);
    box-shadow: var(--shadow);
    transition: transform .2s ease;
  }
  .v2-left { left: 10px; transform: translateX(calc(-100% - 20px)); }
  .v2-right { right: 10px; transform: translateX(calc(100% + 20px)); }
  .realm-rail-open .v2-left, .context-rail-open .v2-right { transform: translateX(0); }
  .rail-toggle {
    display: inline-flex;
    padding: 6px 9px;
    border: 1px solid var(--line);
    background: transparent;
  }
  .rail-toggle[aria-expanded="true"] { border-color: var(--gold); color: var(--gold-soft); }
  .rail-scrim {
    position: fixed;
    inset: 0;
    z-index: 24;
    display: block;
    border: 0;
    background: rgba(2, 5, 3, .58);
  }
  .rail-scrim[hidden] { display: none !important; }
}

@media (max-width: 980px) {
  .build-mode-toggle { top: 8px; left: auto; right: 8px; }
  .v2-topbar {
    grid-template:
      "brand ruler tail" auto
      "resources resources resources" auto / auto minmax(0, 1fr) auto;
    gap: 7px 10px;
  }
  .brand-lockup { grid-area: brand; }
  .ruler-chip { grid-area: ruler; }
  .resource-bar { grid-area: resources; }
  .topbar-tail { grid-area: tail; }
  .stat-chip { display: none; }
  .v2-left, .v2-right { top: 132px; }
  .city-grid { grid-template-columns: repeat(3, minmax(110px, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .command-dock { width: min(630px, calc(100vw - 120px)); grid-template-columns: repeat(5, 1fr); }
  .server-state { width: 12px; overflow: hidden; white-space: nowrap; color: transparent; }
  .server-state::before { margin-right: 0; }
  .research-columns, .settings-grid, .embassy-grid { grid-template-columns: 1fr; }
  .v2-map-toolbar { grid-template-columns: auto auto minmax(120px, 1fr); }
  .v2-map-coordinates { grid-column: span 2; justify-self: end; }
  .market-form { grid-template-columns: 1fr 1fr; }
  .market-form > button { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .build-mode-toggle { width: 38px; padding-inline: 0; font-size: 0; }
  .build-mode-toggle span { font-size: .9rem; }
}

@media (max-width: 700px) {
  .siege-unit-grid { grid-template-columns: 1fr; }
  .auth-shell { max-width: 100vw; max-height: 100dvh; }
  .login-card { width: min(360px, calc(100vw - 24px)); padding: 20px; }
  .join-card-v2 { width: 100vw; min-height: 100dvh; padding: 14px; border-width: 0; }
  .join-heading { display: grid; gap: 10px; }
  .join-heading > div:last-child { text-align: left; }
  .join-factions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faction-choice { grid-template-columns: 48px minmax(0, 1fr); gap: 7px; }
  .faction-choice img { width: 48px; height: 44px; }
  .join-submit { grid-template-columns: 1fr; }
  .embassy-report[open] { grid-template-columns: 1fr; }
  .endgame-cultures, .endgame-cities, .endgame-systems { grid-template-columns: 1fr; }
  .dragon-aspect { grid-template-columns: 44px minmax(0, 1fr); }
  .dragon-aspect img { width: 44px; height: 44px; }
  .dragon-aspect button { grid-column: 1 / -1; }
  .dragon-contribute { grid-template-columns: 1fr 82px; }
  .dragon-contribute button { grid-column: 1 / -1; }
  .alliance-create-v2, .alliance-controls-v2, .alliance-secondary-grid { grid-template-columns: 1fr; }
  .alliance-create-v2 h3, .alliance-controls-v2 h3 { grid-column: 1; }
  .alliance-members-v2 .ranking-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .alliance-members-v2 .ranking-row > button { grid-column: 2 / -1; }
  .alliance-hub-grid, .alliance-operation-create-v2, .alliance-operation-commit-v2, .alliance-logistics-form { grid-template-columns: 1fr; }
  .alliance-operation-create-v2 [data-operation-note], .alliance-operation-commit-v2 > select,
  .alliance-operation-commit-v2 .alliance-check, .alliance-operation-commit-v2 > button,
  .alliance-logistics-form button { grid-column: 1; }
  .alliance-inline-decision { grid-template-columns: 1fr 1fr; }
  .alliance-inline-decision input { grid-column: 1 / -1; }
  .alliance-rights-v2 li { grid-template-columns: 1fr 1fr; }
  .alliance-rights-v2 li > span { grid-column: 1 / -1; }
  .alliance-hub-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alliance-hub-tabs button { white-space: normal; }
  .alliance-hub-tabs button:last-child { grid-column: 1 / -1; }
  .alliance-command-center > header { display: grid; }
  .alliance-command-center > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-secondary-grid { grid-template-columns: 1fr; }
  .market-shipment-v2, .market-ledger-row { display: grid; }
  .culture-diplomacy-v2 { display: grid; }
  .culture-diplomacy-v2 > div { justify-content: stretch; }
  .premium-v2 > div { grid-template-columns: 1fr; }
  .game-shell { gap: 6px; padding: 6px; grid-template-rows: auto minmax(0, 1fr) 62px; }
  .v2-topbar { padding: 6px 8px; }
  .brand-emblem { width: 32px; height: 32px; flex-basis: 32px; }
  .ruler-chip { padding-left: 8px; }
  .ruler-chip strong { font-size: .84rem; }
  .ruler-chip small { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-tail { gap: 4px; }
  .topbar-tail button { padding: 5px 7px; font-size: .72rem; }
  .resource-bar { gap: 3px; }
  .resource-bar { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .resource-chip { display: grid; grid-template-columns: 18px 1fr; gap: 0 3px; padding: 3px; }
  .resource-chip i img { width: 17px; height: 17px; }
  .resource-chip b { font-size: .72rem; }
  .resource-chip small { font-size: 0; }
  .resource-chip .rate { display: none; }
  .v2-left, .v2-right { top: 104px; bottom: 74px; }
  .v2-main { padding: 7px; }
  .level-switch { top: 8px; }
  .level-switch button { min-width: 70px; padding: 6px 10px; font-size: .76rem; }
  .city-grid {
    inset: 45px 7px 7px;
    grid-template-columns: repeat(2, minmax(118px, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 150px;
    overflow-y: auto;
    padding-right: 2px;
  }
  .building-tile img.tile-art { height: 78px; }
  .node-map { inset: 45px 7px 7px; }
  .v2-world-map-shell { inset: 45px 7px 7px; gap: 4px; }
  .v2-map-toolbar { grid-template-columns: 1fr 1fr; gap: 4px; max-height: 184px; overflow-y: auto; }
  .v2-map-zoom, .v2-map-pan { justify-content: center; }
  .v2-map-zoom output { min-width: 76px; }
  .v2-map-coordinates { grid-column: 1 / -1; justify-self: stretch; grid-template-columns: 1fr 1fr auto; }
  .v2-map-status { display: grid; gap: 2px; }
  .v2-map-status > span:last-child small { display: none; }
  .online-map-node { width: 38px; height: 38px; }
  .online-map-node img { width: 28px; height: 28px; }
  .v2-interactive-map .online-map-node span { display: none; }
  .v2-bottom { padding: 4px; }
  .command-dock { width: 100%; grid-template-columns: repeat(5, 1fr); gap: 2px; }
  .command-group > summary { height: 52px; padding: 3px; display: grid; justify-items: center; gap: 1px; }
  .command-group > summary img { width: 24px; height: 24px; }
  .command-group > summary span:not(.group-badge) { font-size: .65rem; }
  .command-menu, .command-menu-end {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 70px;
    width: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .command-menu button { grid-template-columns: 30px 1fr; min-height: 50px; padding: 5px 7px; }
  .command-menu button > img, .command-menu button > .css-gear { width: 28px; height: 28px; }
  .command-menu small { display: none; }
  .server-state { display: none; }
  .window-overlay { padding: 0; align-items: end; }
  .v2-window {
    width: 100vw;
    height: min(91dvh, 860px);
    max-height: 91dvh;
    border-width: 1px 0 0;
    border-radius: 10px 10px 0 0;
  }
  .window-head { min-height: 62px; padding: 8px 12px; }
  .window-heading > img { width: 34px; height: 34px; flex-basis: 34px; }
  .window-head h2 { font-size: 1rem; }
  .window-body { padding: 10px; }
  .unit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .unit-card { padding: 10px 6px; }
  .eco-row { grid-template-columns: 1fr 1fr; }
  .market-price-row { grid-template-columns: 1fr 1fr; }
  .endgame-cultures { grid-template-columns: 1fr 1fr; }
}

/* Desktop-Arbeitsplatz: Werkzeugfenster bleiben parallel sichtbar und
   lassen sich wie Betriebssystemfenster verschieben. Die aktive Instanz ist
   voll bedienbar; ein Klick auf ein ruhendes Fenster aktiviert und
   aktualisiert es. Mobil bleibt der bewaehrte Fokusdialog erhalten. */
@media (min-width: 981px) {
  .window-overlay {
    display: block;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    pointer-events: none;
  }
  .v2-window {
    position: absolute;
    min-width: 520px;
    min-height: 300px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 82px);
    resize: both;
    pointer-events: auto;
  }
  .v2-window[data-window="barracks"] { max-width: calc(100vw - 16px); }
  .v2-window .window-head { cursor: move; touch-action: none; user-select: none; }
  .v2-window.is-dragging { opacity: .96; box-shadow: 0 32px 100px rgba(0, 0, 0, .78); }
  .v2-window-snapshot {
    filter: saturate(.72) brightness(.78);
    opacity: .88;
    cursor: pointer;
  }
  .v2-window-snapshot:hover,
  .v2-window-snapshot:focus-visible {
    filter: saturate(.92) brightness(.9);
    opacity: 1;
    outline: 2px solid var(--gold-soft);
    outline-offset: 2px;
  }
  .v2-window-snapshot .window-body {
    overflow: hidden;
    mask-image: linear-gradient(#000 72%, transparent);
    pointer-events: none;
  }
}

/* Kaserne: Rekrutierung links, serverbestaetigte Produktionsfolge rechts. */
.v2-window[data-window="barracks"] { width: min(1220px, 96vw); }
.barracks-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 340px);
  gap: 12px;
  min-height: 0;
}
.v2-window[data-window="barracks"] .window-body { container-type: inline-size; }
.barracks-recruitment-column { display: grid; align-content: start; gap: 9px; min-width: 0; }
.barracks-recruitment-column > .ctx-meta { margin: 0; }
.barracks-queue-column {
  min-width: 0;
  padding-left: 12px;
  border-left: 1px solid var(--line-strong);
  background: linear-gradient(90deg, rgba(214, 173, 84, .05), transparent 28%);
}
.barracks-queue-column .training-queue { margin: 0; }
.barracks-queue-column .training-queue > summary { cursor: default; }

@container (max-width: 760px) {
  .barracks-workspace { grid-template-columns: 1fr; }
  .barracks-queue-column {
    padding: 10px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line-strong);
    background: transparent;
  }
}

/* Die Karte bleibt die Hauptflaeche; Steuerung und Status docken kompakt am
   unteren Kartenrand an. */
.v2-world-map-shell { grid-template-rows: minmax(0, 1fr) auto auto; }
.v2-main[data-level="world"] .v2-world-map-shell { inset: 0; }
#main-stage[data-level="world"]::before { opacity: 0; transition: none; }
#main-stage[data-level="world"]::after { background: none; }
.v2-world-map-shell > .v2-interactive-map { grid-row: 1; }
.v2-world-map-shell > .v2-map-status { grid-row: 2; }
.v2-world-map-shell > .v2-map-toolbar { grid-row: 3; }
.v2-map-toolbar {
  border-color: rgba(218, 195, 132, .48);
  background: linear-gradient(180deg, rgba(9, 15, 11, .96), rgba(5, 9, 7, .98));
  box-shadow: 0 -10px 26px rgba(0, 0, 0, .34);
}

@media (max-width: 980px) {
  .barracks-workspace { grid-template-columns: 1fr; }
  .barracks-queue-column {
    padding: 10px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line-strong);
    background: transparent;
  }
}

@media (max-width: 420px) {
  .join-factions { grid-template-columns: 1fr; }
  .ghost#logout { font-size: 0; width: 31px; }
  .ghost#logout::after { content: "↗"; font-size: .9rem; }
  .ruler-chip small { max-width: 112px; }
  .command-menu, .command-menu-end { grid-template-columns: 1fr; }
  .unit-grid { grid-template-columns: 1fr; }
  .market-form, .settings-grid, .embassy-grid, .research-columns { grid-template-columns: 1fr; }
  .endgame-cities, .endgame-cultures { grid-template-columns: 1fr; }
}

/* Visueller Ausbau 10.8.: vorhandene Produktionskunst wird als Spielwelt
   inszeniert, ohne die ruhige Drei-Ebenen-Shell oder Serververträge zu ändern. */
.v2-left { grid-template-rows: auto auto auto minmax(0, 1fr); }
.culture-banner {
  position: relative;
  isolation: isolate;
  min-height: 116px;
  overflow: hidden;
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--faction-accent) 58%, var(--line));
  border-radius: 4px;
  background: #0b120d;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .25);
}
.culture-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--culture-art) center 38% / cover no-repeat;
  filter: saturate(.9) contrast(1.05);
  transform: scale(1.02);
}
.culture-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5, 9, 7, .08), rgba(5, 9, 7, .4) 48%, rgba(5, 9, 7, .95));
}
.culture-banner-copy { display: grid; gap: 2px; min-width: 0; text-shadow: 0 2px 8px #000; }
.culture-banner-copy small {
  color: var(--faction-accent);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.culture-banner-copy strong { color: #f4e7bf; font: 700 1.05rem/1.1 Georgia, serif; }
.culture-banner-copy span { overflow: hidden; color: rgba(244, 231, 191, .72); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.culture-banner-sigil {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid color-mix(in srgb, var(--faction-accent) 72%, transparent);
  border-radius: 50%;
  color: var(--faction-accent);
  background: rgba(4, 8, 5, .74);
  box-shadow: 0 0 22px color-mix(in srgb, var(--faction-accent) 28%, transparent);
}

.stage-caption {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 4;
  display: grid;
  max-width: min(29%, 310px);
  padding-left: 9px;
  border-left: 2px solid var(--faction-accent);
  text-shadow: 0 2px 8px #000;
  pointer-events: none;
}
.stage-caption small { color: var(--faction-accent); font-size: .54rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.stage-caption strong { overflow: hidden; color: #f5e8c4; font: 700 .9rem/1.15 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.stage-caption span { overflow: hidden; color: rgba(242, 232, 203, .65); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }

.building-tile {
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: stretch;
  gap: 0;
  padding: 0;
  text-align: left;
  border-color: rgba(218, 195, 132, .3);
  background: rgba(10, 16, 12, .48);
}
.building-scene {
  position: relative;
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--faction-accent) 14%, transparent), transparent 58%),
    linear-gradient(180deg, rgba(8, 13, 10, .04), rgba(8, 13, 10, .34));
}
.building-tile img.tile-art {
  width: min(98%, 210px);
  height: 100%;
  min-height: 82px;
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .58));
  transform: scale(1.08);
  transform-origin: 50% 63%;
  transition: transform .18s ease, filter .18s ease;
}
.building-tile:hover img.tile-art { transform: scale(1.15); filter: drop-shadow(0 13px 17px rgba(0, 0, 0, .7)) brightness(1.07); }
.building-tile img.tile-icon { width: 54px; height: 54px; margin: 0; }
.building-level {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border: 1px solid color-mix(in srgb, var(--faction-accent) 64%, var(--line));
  border-radius: 50%;
  color: #f8e7b4;
  background: rgba(7, 12, 9, .84);
  box-shadow: 0 5px 13px rgba(0, 0, 0, .4);
  font: 700 .67rem/1 Georgia, serif;
}
.building-level.unbuilt { color: var(--muted); border-style: dashed; }
.building-caption {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 7px 9px 8px;
  border-top: 1px solid rgba(218, 195, 132, .16);
  background: linear-gradient(90deg, rgba(6, 10, 7, .93), rgba(15, 23, 18, .86));
}
.building-caption strong { color: #f1e5c4; }
.building-caption small { color: color-mix(in srgb, var(--faction-accent) 70%, #d3c8aa); }
.building-tile.empty-slot .building-scene { opacity: .72; }
.building-tile.empty-slot .building-caption { background: rgba(8, 13, 10, .8); }

.map-node {
  width: 48px;
  min-height: 48px;
  place-content: center;
  padding: 4px;
}
.map-node-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 1px solid rgba(229, 211, 158, .46);
  border-radius: 50% 50% 46% 46%;
  background: rgba(10, 16, 12, .9);
  box-shadow: 0 7px 15px rgba(0, 0, 0, .62), 0 0 0 2px rgba(7, 12, 9, .58);
  transition: transform .15s ease, box-shadow .15s ease;
}
.map-node-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 9px rgba(0, 0, 0, .54);
}
.map-node-art img { width: 78%; height: 78%; object-fit: contain; }
.map-node-art.realm img { width: 100%; height: 100%; object-fit: cover; }
.map-node-art.realm { border-color: var(--faction-accent); }
.map-node-art.settlement { border-color: #c8ad6c; }
.map-node-art.site { border-color: #8eb28a; }
.map-node-art.source {
  width: 42px;
  height: 42px;
  border-color: #a8bd72;
  background: radial-gradient(circle at 50% 40%, rgba(77, 105, 67, .96), rgba(8, 14, 10, .94));
  box-shadow: 0 8px 18px rgba(0, 0, 0, .7), 0 0 16px rgba(126, 157, 89, .28);
}
.map-node-art.source img { width: 88%; height: 88%; }
.map-node-art.dragon { border-color: #d67d55; box-shadow: 0 0 18px rgba(211, 92, 52, .48); }
.map-node:hover .map-node-art, .map-node.selected .map-node-art {
  transform: translateY(-2px) scale(1.13);
  box-shadow: 0 9px 20px rgba(0, 0, 0, .7), 0 0 0 2px var(--faction-accent);
}
.map-node.hidden { width: 26px; min-height: 26px; padding: 2px; }
.map-node-art.fog { width: 15px; height: 15px; border-color: rgba(190, 207, 192, .2); background: rgba(61, 78, 65, .36); box-shadow: 0 0 9px rgba(142, 166, 147, .16); }
.map-node-art.fog i { width: 5px; height: 5px; border: 0; background: rgba(211, 223, 213, .44); }
.map-node.selected { z-index: 8; }
.map-node em {
  position: absolute;
  top: calc(100% - 2px);
  padding: 2px 6px;
  border: 1px solid rgba(222, 199, 133, .2);
  border-radius: 10px;
  color: #f3dfaa;
  background: rgba(5, 9, 7, .8);
  font-size: .64rem;
}
.map-node em.label-below { transform: translateY(18px); }

.context-visual {
  position: relative;
  min-height: 112px;
  overflow: hidden;
  display: grid;
  place-items: center;
  margin: -2px -4px 2px;
  border: 1px solid rgba(218, 195, 132, .22);
  border-radius: 3px;
  background: rgba(7, 12, 9, .72);
}
.context-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(transparent 38%, rgba(5, 9, 7, .9));
}
.context-visual img { width: 100%; height: 126px; object-fit: cover; }
.context-visual.building-visual img { object-fit: contain; filter: drop-shadow(0 9px 13px rgba(0, 0, 0, .55)); }
.context-visual.building-visual.unbuilt img, .context-visual.node-visual:not(.realm) img { width: 72px; height: 72px; object-fit: contain; }
.context-visual span:not(.context-fog) {
  position: absolute;
  z-index: 1;
  right: 8px;
  bottom: 6px;
  left: 8px;
  color: #e9d8aa;
  font-size: .62rem;
  letter-spacing: .08em;
  text-align: right;
  text-transform: uppercase;
}
.context-fog { width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle, rgba(197, 211, 200, .32), transparent 68%); }

/* Region -> Stadt -> Fertigware: Quellen bleiben im Umland, die
   produktive Verarbeitung ist als eigener, serverbestaetigter Weg sichtbar. */
.production-chain {
  display: grid;
  gap: 5px;
  margin: 9px 0;
  padding: 8px;
  border: 1px solid rgba(168, 189, 114, .34);
  background: linear-gradient(145deg, rgba(25, 39, 27, .9), rgba(8, 15, 11, .92));
}
.production-chain > span { display: grid; gap: 1px; padding: 6px 7px; border: 1px solid rgba(218, 195, 132, .16); background: rgba(4, 9, 6, .42); }
.production-chain small { color: #9db47d; font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.production-chain strong { color: #eddaa4; font-size: .76rem; }
.production-chain em { color: var(--muted); font-size: .62rem; font-style: normal; }
.production-chain > b { color: #af985c; font-size: .74rem; line-height: 1; text-align: center; }
.production-chain .pipeline-blocked { border-color: rgba(190, 112, 78, .58); background: rgba(73, 26, 18, .38); }
.production-chain .pipeline-blocked em { color: #e2a084; }
.regional-context-card { display: grid; gap: 7px; margin: 9px 0; padding: 9px; border: 1px solid rgba(218, 195, 132, .24); background: rgba(7, 14, 10, .72); }
.regional-context-card > small { color: #9db47d; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; }
.regional-context-card > strong { color: #eddaa4; }
.regional-context-card > p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.regional-context-card dl { margin: 0; }
.regional-context-actions { display: grid; gap: 5px; }
.regional-context-actions button { padding: 7px; border: 1px solid var(--line); background: var(--panel-soft); }
.regional-discovery-card { border-style: dashed; border-color: rgba(133, 164, 126, .46); }
.regional-charter { display: grid; gap: 6px; padding: 7px; border: 1px solid rgba(218, 195, 132, .2); background: rgba(5, 10, 7, .46); }
.regional-charter > summary { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); cursor: pointer; font-size: 11px; }
.regional-charter > summary strong { color: var(--gold-soft); text-align: right; }
.regional-charter > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.regional-charter > div { display: grid; gap: 4px; }
.regional-charter button { display: grid; gap: 2px; padding: 6px 7px; text-align: left; border: 1px solid var(--line); background: var(--panel-soft); }
.regional-charter button strong { color: var(--gold-soft); font-size: 11px; }
.regional-charter button small { color: var(--muted); font-size: 11px; line-height: 1.3; }
.regional-transport-quote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.regional-transport-quote span { display: grid; gap: 2px; padding: 6px; border: 1px solid rgba(218, 195, 132, .16); background: rgba(4, 9, 6, .42); }
.regional-transport-quote small { color: #9db47d; font-size: .55rem; letter-spacing: .06em; text-transform: uppercase; }
.regional-transport-quote strong { color: #eddaa4; font-size: .66rem; line-height: 1.25; }
.regional-delivery-status { padding-left: 7px; border-left: 2px solid rgba(202, 163, 69, .62); }

.research-hero {
  position: relative;
  min-height: 132px;
  overflow: hidden;
  display: flex;
  align-items: end;
  padding: 16px;
  border: 1px solid var(--line-strong);
  background: #0c130e;
}
.research-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 10, 7, .94), rgba(6, 10, 7, .25) 68%, rgba(6, 10, 7, .45)); }
.research-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.research-hero > span { position: relative; z-index: 1; display: grid; max-width: 60%; text-shadow: 0 2px 9px #000; }
.research-hero small { color: var(--faction-accent); font-size: .58rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.research-hero strong { color: #f5e6bd; font: 700 1.2rem/1.15 Georgia, serif; }
.research-hero em { color: rgba(245, 230, 189, .72); font-size: .7rem; font-style: normal; }
@media (min-width: 981px) {
  .v2-window[data-window="research"] {
    width: min(1120px, 96vw);
    min-width: min(760px, calc(100vw - 16px));
    min-height: min(500px, calc(100vh - 82px));
  }
  .v2-window[data-window="market"] {
    width: min(1220px, 97vw);
    min-width: min(820px, calc(100vw - 16px));
    min-height: min(540px, calc(100vh - 82px));
  }
}
.research-tabs {
  flex-wrap: nowrap;
  min-height: 56px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 1px 7px;
  scrollbar-width: thin;
}
.research-tabs button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  flex: 0 0 145px;
  min-width: 145px;
  min-height: 46px;
  padding: 6px 8px;
  text-align: left;
}
.research-tabs button img { width: 28px; height: 28px; }
.research-tabs button > span { display: grid; min-width: 0; gap: 1px; }
.research-tabs button strong { overflow: hidden; color: inherit; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.research-tabs button small { margin: 0; color: inherit; font-size: .6rem; white-space: nowrap; }

/* Kontormarkt: Marktlage, Auftrag und laufende Logistik sind als klarer
   Arbeitsablauf angeordnet. Alle Kurse und Reservierungen bleiben
   serverbestaetigt; das Layout fasst nur die vorhandenen Daten zusammen. */
.v2-window[data-window="market"] { width: min(1220px, 97vw); }
.market-command-summary {
  display: grid;
  grid-template-columns: 1.35fr repeat(2, minmax(160px, .8fr));
  gap: 8px;
}
.market-command-summary > span {
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid rgba(218, 195, 132, .26);
  background: linear-gradient(145deg, rgba(36, 48, 38, .9), rgba(11, 18, 13, .76));
}
.market-command-summary small,
.market-quotes header small,
.market-order-ticket header small,
.market-order-books header small,
.market-details summary small {
  color: #a8bc96;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.market-command-summary strong,
.market-command-summary b { color: #f1dda6; font: 700 1.25rem/1.1 Georgia, serif; }
.market-command-summary em { color: var(--muted); font-size: .66rem; font-style: normal; }
.market-command-summary .market-balance { display: grid; align-items: initial; gap: 2px; }
.market-cockpit {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(315px, .85fr);
  gap: 10px;
  align-items: start;
}
.market-quotes,
.market-order-ticket,
.market-order-books > section,
.market-order-books > details {
  min-width: 0;
  border: 1px solid var(--line);
  background: rgba(5, 11, 7, .58);
}
.market-quotes > header,
.market-order-ticket > header,
.market-order-books > section > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.market-quotes h3,
.market-order-ticket h3,
.market-order-books h3 { margin: 2px 0 0; color: var(--gold-soft); font: 700 .95rem/1.15 Georgia, serif; }
.market-quotes header p,
.market-order-ticket header p { max-width: 310px; margin: 0; color: var(--muted); font-size: .67rem; line-height: 1.4; }
.market-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; }
.market-quote-card {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(218, 195, 132, .2);
  background: linear-gradient(145deg, rgba(24, 35, 27, .94), rgba(8, 14, 10, .82));
}
.market-quote-card:hover { border-color: rgba(218, 195, 132, .48); }
.market-quote-card > header,
.market-quote-card > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.market-quote-card > header { padding-bottom: 6px; border-bottom: 1px solid rgba(218, 195, 132, .14); }
.market-quote-card > header > span { display: flex; align-items: center; gap: 6px; }
.market-quote-card > header > span img { width: 22px; height: 22px; }
.market-quote-card > header strong { color: var(--ink); font-size: .78rem; }
.market-quote-card > header small { display: grid; color: var(--muted); font-size: .58rem; text-align: right; }
.market-quote-card > header b { color: var(--gold-soft); font-size: .65rem; }
.market-quote-card > div > span { display: grid; gap: 1px; }
.market-quote-card > div small { color: var(--muted); font-size: .57rem; }
.market-quote-card > div strong { color: #e8d6a4; font-size: .7rem; font-variant-numeric: tabular-nums; }
.market-quote-card button {
  min-width: 70px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  background: rgba(34, 47, 37, .92);
  font-size: .66rem;
}
.market-quote-card button:hover { border-color: var(--gold); color: var(--gold-soft); }
.market-order-ticket .market-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.market-form label { display: grid; gap: 4px; color: var(--muted); font-size: .64rem; }
.market-order-ticket .market-form > button { grid-column: 1 / -1; }
.market-order-ticket button[data-market-best] {
  color: var(--ink-soft);
  background: rgba(34, 47, 37, .94);
}
.market-order-ticket button[data-market-best]:hover,
.market-order-ticket button[data-market-best]:focus-visible { color: var(--gold-soft); }
.market-order-ticket .market-form .market-preview {
  grid-column: 1 / -1;
  min-height: 38px;
  margin: 0;
  padding: 8px;
  border-left: 3px solid rgba(214, 173, 84, .68);
  background: rgba(214, 173, 84, .07);
  color: var(--ink-soft);
  font-size: .68rem;
  line-height: 1.4;
}
.market-order-ticket .market-primary-action { min-height: 38px; font-size: .78rem; }
.market-order-books { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.market-order-list { display: grid; gap: 5px; padding: 8px; }
.market-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 54px;
  padding: 9px 12px;
}
.market-details summary > span { display: grid; gap: 2px; }
.market-details summary strong { color: var(--gold-soft); font: 700 .9rem/1.15 Georgia, serif; }
.market-details summary b { color: var(--muted); font-size: .66rem; }
.market-order-row { min-height: 34px; line-height: 1.35; }

@media (max-width: 900px) {
  .market-command-summary,
  .market-cockpit,
  .market-order-books { grid-template-columns: 1fr; }
  .market-prices { grid-template-columns: 1fr; }
}
.research-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  min-height: 66px;
  padding: 8px 10px;
}
.research-row > .research-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(218, 195, 132, .2);
  border-radius: 50%;
  background: rgba(5, 10, 7, .52);
}
.research-icon img { width: 34px; height: 34px; }
.research-row > .research-copy { display: grid; gap: 2px; }
.research-row.completed .research-icon { box-shadow: 0 0 14px rgba(143, 191, 122, .24); }
.research-row.locked .research-icon { filter: grayscale(.65); opacity: .58; }

.ritual-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; min-height: 62px; }
.ritual-icon { width: 38px; height: 38px; padding: 4px; border: 1px solid rgba(218, 195, 132, .2); border-radius: 50%; background: rgba(5, 10, 7, .52); }
.ritual-icon.spell { border-color: color-mix(in srgb, var(--faction-accent) 70%, var(--line)); box-shadow: 0 0 14px color-mix(in srgb, var(--faction-accent) 24%, transparent); }

@media (max-width: 1500px) {
  .stage-caption span { display: none; }
  .culture-banner { min-height: 104px; }
}

@media (max-width: 1180px) {
  .v2-left { grid-template-rows: auto auto auto minmax(0, 1fr); }
  .culture-banner { min-height: 126px; }
}

@media (max-width: 700px) {
  .stage-caption { display: none; }
  .building-tile { min-height: 150px; }
  .building-tile img.tile-art { height: 100%; min-height: 82px; }
  .building-caption { padding: 6px 8px; }
  .building-caption strong { font-size: .78rem; }
  .building-caption small { font-size: .64rem; }
  .map-node { width: 40px; min-height: 40px; }
  .map-node-art { width: 29px; height: 29px; }
  .map-node.hidden { width: 22px; min-height: 22px; }
  .research-hero { min-height: 108px; padding: 12px; }
  .research-hero > span { max-width: 78%; }
  .research-row { grid-template-columns: 40px minmax(0, 1fr); }
  .research-row > button { grid-column: 2; justify-self: start; }
  .research-row > .research-icon { width: 36px; height: 36px; }
  .research-icon img { width: 29px; height: 29px; }
  .ritual-row { grid-template-columns: 38px minmax(0, 1fr); }
  .ritual-row > button, .ritual-row > .ritual-own { grid-column: 2; justify-self: start; }
  .ritual-contribution-detail { grid-column: 1 / -1; }
  .ritual-contribution-list li { grid-template-columns: 1fr; gap: 2px; }
  .ritual-icon { width: 33px; height: 33px; }
}

/* Räumliche Hauptstadt: Auf großen Flächen werden die elf Gebäude zu
   Landmarken einer zusammenhängenden Stadt. Unter 900 px bleibt das robuste
   Kartenraster bestehen. */
@media (min-width: 900px) {
  .v2-main[data-level="city"]::before {
    background: var(--stage-art, none) center / cover no-repeat;
    opacity: .5;
    filter: blur(7px) brightness(.42) saturate(.72);
    transform: scale(1.035);
  }
  .v2-main[data-level="city"]::after {
    background:
      radial-gradient(ellipse at 50% 52%, transparent 0 24%, rgba(5, 9, 7, .06) 48%, rgba(5, 9, 7, .48) 100%),
      linear-gradient(rgba(8, 13, 10, .18), rgba(8, 13, 10, .04) 48%, rgba(8, 13, 10, .3));
  }
  .v2-main[data-level="city"] .city-grid {
    display: grid;
    place-items: center;
    height: auto;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: 0;
    overflow: hidden;
    isolation: isolate;
    container-type: size;
  }
  .v2-main[data-level="city"] .city-grid::before {
    display: none;
  }
  .v2-main[data-level="city"] .city-scene {
    position: relative;
    display: block;
    width: min(100cqw, 177.683cqh);
    height: min(100cqh, 56.280cqw);
    overflow: hidden;
    isolation: isolate;
    background: var(--stage-art, none) center / 100% 100% no-repeat;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(221, 198, 133, .12);
  }
  .v2-main[data-level="city"] .city-grid[data-city-aspect="three-two"] .city-scene {
    width: min(100cqw, 150cqh);
    height: min(100cqh, 66.667cqw);
  }
  .v2-main[data-level="city"] .city-scene::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 50% 48%, transparent 0 58%, rgba(5, 9, 7, .24) 88%, rgba(5, 9, 7, .5) 100%),
      linear-gradient(rgba(8, 13, 10, .04), rgba(8, 13, 10, .08));
  }
  .v2-main[data-level="city"] .city-landmark {
    position: absolute;
    left: var(--city-x);
    top: var(--city-y);
    z-index: var(--city-depth, 2);
    width: 15%;
    height: 20%;
    min-height: 0;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: translate(-50%, -50%);
    backdrop-filter: none;
    pointer-events: none;
    transition: transform .16s ease, filter .16s ease;
  }
  .v2-main[data-level="city"] .city-landmark.city-center { width: 15%; height: 20%; }
  .v2-main[data-level="city"] .city-landmark.city-prominent { width: 19%; height: 25%; }
  .v2-main[data-level="city"] .city-landmark.city-compact { width: 15%; height: 20%; }
  .v2-main[data-level="city"] .city-landmark::after { display: none; }
  .v2-main[data-level="city"] .city-landmark:hover {
    z-index: 100;
    background: transparent;
    transform: translate(-50%, calc(-50% - 4px));
  }
  .v2-main[data-level="city"] .city-landmark:focus-visible {
    z-index: 101;
    outline: none;
  }
  .v2-main[data-level="city"] .building-hit-area {
    position: absolute;
    inset: 20%;
    z-index: 8;
    border-radius: 0;
    pointer-events: auto;
    cursor: pointer;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
  }
  .v2-main[data-level="city"] .building-scene {
    width: 100%;
    height: 100%;
    overflow: visible;
    background: transparent;
    pointer-events: none;
  }
  .v2-main[data-level="city"] .building-scene::before {
    content: "";
    position: absolute;
    inset: 58% 12% 5%;
    z-index: -1;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(5, 9, 7, .46), transparent 72%);
    filter: blur(5px);
  }
  .v2-main[data-level="city"] .building-scene::after {
    display: none;
  }
  .v2-main[data-level="city"] .city-landmark:hover .building-hit-area,
  .v2-main[data-level="city"] .city-landmark:focus-within .building-hit-area,
  .v2-main[data-level="city"] .city-landmark:focus-visible .building-hit-area,
  .v2-main[data-level="city"] .city-landmark.selected .building-hit-area {
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
  }
  .v2-main[data-level="city"] .city-landmark img.tile-art {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    /* Nicht die quadratische Transparenz-Leinwand, sondern der aus den
       sichtbaren Pixeln vermessene Fundamentpunkt sitzt auf dem Bauanker. */
    transform: translate(var(--building-shift-x, 0%), var(--building-shift-y, -68%)) scale(1.88);
    transform-origin: 50% 50%;
    filter: drop-shadow(0 13px 12px rgba(0, 0, 0, .68));
    transition: transform .16s ease, filter .16s ease;
  }
  .v2-main[data-level="city"] .city-landmark.city-prominent img.tile-art {
    transform: translate(var(--building-shift-x, 0%), var(--building-shift-y, -71%)) scale(1.98);
  }
  .v2-main[data-level="city"] .city-landmark:hover img.tile-art,
  .v2-main[data-level="city"] .city-landmark:focus-within img.tile-art {
    filter:
      drop-shadow(0 13px 12px rgba(0, 0, 0, .68))
      drop-shadow(0 0 7px color-mix(in srgb, var(--faction-accent) 76%, #f7e8b6));
  }
  .v2-main[data-level="city"] .city-landmark.selected img.tile-art {
    filter:
      drop-shadow(0 13px 12px rgba(0, 0, 0, .68))
      drop-shadow(0 0 6px color-mix(in srgb, var(--faction-accent) 92%, #fff3c8))
      drop-shadow(0 0 18px color-mix(in srgb, var(--faction-accent) 64%, transparent));
  }
  .v2-main[data-level="city"] .city-landmark img.tile-icon {
    width: 52px;
    height: 52px;
    margin: 0;
    padding: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .62));
    transition: filter .16s ease;
  }
  .v2-main[data-level="city"] .city-landmark:hover img.tile-icon,
  .v2-main[data-level="city"] .city-landmark:focus-within img.tile-icon,
  .v2-main[data-level="city"] .city-landmark.selected img.tile-icon {
    filter:
      drop-shadow(0 4px 7px rgba(0, 0, 0, .62))
      drop-shadow(0 0 9px color-mix(in srgb, var(--faction-accent) 78%, #f7e8b6));
  }
  .v2-main[data-level="city"] .building-level { display: none; }
  .v2-main[data-level="city"] .city-landmark.empty-slot .building-level {
    top: 11%;
    right: 10%;
    display: grid;
    min-width: 21px;
    height: 21px;
    color: color-mix(in srgb, var(--faction-accent) 76%, #f4e4b4);
    background: rgba(7, 12, 9, .88);
  }
  .v2-main[data-level="city"] .building-caption {
    position: absolute;
    right: 50%;
    bottom: -3px;
    z-index: 4;
    width: max-content;
    max-width: 150%;
    min-width: 78px;
    pointer-events: none;
    padding: 4px 9px 5px;
    border: 1px solid rgba(224, 199, 127, .28);
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(5, 9, 7, .88), rgba(16, 24, 18, .94), rgba(5, 9, 7, .88));
    box-shadow: 0 6px 14px rgba(0, 0, 0, .42);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translate(50%, 5px);
    transition: opacity .15s ease, visibility 0s linear .15s, transform .15s ease, border-color .15s ease, background .15s ease;
  }
  .v2-main[data-level="city"] .building-caption strong { font-size: .75rem; }
  .v2-main[data-level="city"] .building-caption small { font-size: .58rem; white-space: nowrap; }
  .v2-main[data-level="city"] .city-landmark:hover .building-caption,
  .v2-main[data-level="city"] .city-landmark:focus-within .building-caption,
  .v2-main[data-level="city"] .city-landmark:focus-visible .building-caption,
  .v2-main[data-level="city"] .city-landmark.selected .building-caption {
    border-color: var(--faction-accent);
    background: rgba(7, 12, 9, .97);
    opacity: 1;
    visibility: visible;
    transform: translate(50%, 0);
    transition-delay: 0s;
  }
  .v2-main[data-level="city"] .city-landmark:focus-visible .building-caption {
    outline: 2px solid color-mix(in srgb, var(--faction-accent) 82%, #fff3c8);
    outline-offset: 2px;
  }
  .v2-main[data-level="city"] .city-landmark.empty-slot .building-scene { opacity: .78; }
  .v2-main[data-level="city"] .city-landmark.empty-slot .building-caption { background: rgba(7, 12, 9, .78); }
  .v2-main[data-level="city"] .city-landmark.empty-slot .building-hit-area {
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
  }
}

.minimap-card canvas {
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  border-color: rgba(218, 195, 132, .3);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .58);
}

@media (min-width: 701px) and (max-width: 1100px) {
  .v2-topbar {
    grid-template:
      "brand ruler tail" auto
      "resources resources resources" auto / auto minmax(0, 1fr) auto;
    gap: 7px 10px;
  }
  .brand-lockup { grid-area: brand; }
  .ruler-chip { grid-area: ruler; }
  .resource-bar { grid-area: resources; }
  .topbar-tail { grid-area: tail; }
  .stat-chip { display: none; }
}

/* Spielerreview 10.8.: kompakte Kopfleiste, direkter Werkzeugzugriff und
   eine linke Reichsspalte, die Stadtwahl und Garnison auch mit vielen
   Städten beherrschbar hält. */
.resource-bar {
  grid-template-columns: repeat(5, minmax(96px, 132px));
  justify-content: start;
  align-content: center;
}

.city-switch label { display: grid; gap: 4px; }
.city-switch label > span { color: var(--muted); font-size: .68rem; }
.city-switch select, .city-switch input {
  width: 100%;
  min-width: 0;
  padding: 7px 26px 7px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: rgba(9, 15, 11, .92);
  color: var(--gold-soft);
  font: 650 .8rem/1.2 "Segoe UI", system-ui, sans-serif;
}
.city-switch > small { color: var(--muted); font-size: .66rem; }
.city-switch { grid-template-columns: minmax(0, 1fr) 72px; align-items: end; }
.city-switch .city-search { grid-column: 1; }
.city-switch .city-group { grid-column: 2; }
.city-switch .city-selection { grid-column: 1; }
.city-switch > small { grid-column: 1 / -1; }
.city-switch .city-manage-button { display: grid; place-items: center; min-height: 32px; padding: 6px; color: var(--gold-soft); text-align: center; }

/* Die Gebaeudemaster besitzen absichtlich eine quadratische transparente
   Leinwand. In der schmalen Kontextvorschau wird nicht die ganze Leinwand
   eingepasst, sondern das freigestellte Bauwerk bildfuellend inszeniert. */
.context-visual.building-visual {
  min-height: 152px;
}
.context-visual.building-visual.painted img {
  position: absolute;
  top: 8px;
  left: 11%;
  width: 78%;
  height: auto;
  max-width: none;
  object-fit: initial;
  transform: none;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, .62));
}
.context-visual.building-visual.unbuilt img {
  position: static;
  width: 72px;
  height: 72px;
  object-fit: contain;
  transform: none;
}

.node-neutral-army { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.node-neutral-army .node-army-field { min-width: 0; }
.node-neutral-army .node-army-field span { overflow: hidden; max-width: 100%; color: var(--muted); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.node-neutral-army .node-army-field input { width: 100%; }
.node-neutral-army + .node-attack { margin-top: 7px; }

.report-army-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 5px; margin: 7px 0; }
.report-army-side { display: grid; gap: 2px; margin-top: 7px; }
.report-army-side > em { color: var(--gold); font-family: var(--serif); font-size: .68rem; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.report-army-breakdown > span { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 1px 6px; align-items: center; padding: 5px 7px; border: 1px solid var(--line); background: rgba(4, 9, 6, .35); }
.report-army-breakdown img { grid-row: 1 / span 2; width: 24px; height: 24px; }
.report-army-breakdown b { font-size: .7rem; }
.report-army-breakdown small { color: var(--muted); font-size: .64rem; }

.ranking-profile-link { overflow: hidden; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; text-decoration: underline; text-decoration-color: rgba(232, 201, 122, .42); text-overflow: ellipsis; white-space: nowrap; text-underline-offset: 3px; }
.ranking-profile-link:hover, .ranking-profile-link:focus-visible { color: var(--gold-soft); text-decoration-color: currentColor; }
.profile-direct-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.profile-known-settlements { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); max-height: 18rem; overflow: auto; }
.profile-known-settlements > header { display: flex; align-items: end; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 1; padding: 4px 0 8px; background: rgba(12, 22, 16, .96); }
.profile-known-settlements > header span { display: grid; }
.profile-known-settlements > header small, .profile-settlement-v2 small { color: var(--muted); text-transform: uppercase; letter-spacing: .09em; }
.profile-settlement-v2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line); background: rgba(5, 10, 7, .46); }
.profile-settlement-v2 header { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 9px; align-items: center; }
.profile-settlement-v2 header img { width: 52px; height: 44px; object-fit: cover; border: 1px solid var(--line); }
.profile-settlement-v2 header span { display: grid; min-width: 0; }
.profile-settlement-v2 header em { color: var(--muted); font-style: normal; font-size: .72rem; }
.profile-settlement-v2 > div { display: flex; flex-wrap: wrap; justify-content: end; gap: 5px; }
.profile-settlement-v2 button, .profile-direct-actions button { padding: 6px 9px; }
@media (max-width: 700px) { .profile-settlement-v2 { grid-template-columns: 1fr; } .profile-settlement-v2 > div { justify-content: start; } }
.player-profile-v2 { --profile-banner: #caa34b; display: grid; grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.2fr); min-height: 350px; overflow: hidden; border: 1px solid var(--profile-banner); background: linear-gradient(135deg, color-mix(in srgb, var(--profile-banner) 13%, #0d1510), var(--panel)); box-shadow: inset 0 4px var(--profile-banner); }
.player-profile-v2.banner-oak { --profile-banner: #739259; }
.player-profile-v2.banner-mountain { --profile-banner: #9a9384; }
.player-profile-v2.banner-wave { --profile-banner: #4f8eaa; }
.player-profile-v2.banner-wind { --profile-banner: #a7bcb8; }
.player-profile-v2.banner-moon { --profile-banner: #8a78b1; }
.player-profile-v2.banner-sun { --profile-banner: #d5a846; }
.player-profile-v2.banner-frost { --profile-banner: #8dc6d1; }
.player-profile-v2.banner-ember { --profile-banner: #bd6748; }
.player-profile-v2.eliminated { filter: saturate(.55); }
.player-profile-art { position: relative; overflow: hidden; }
.player-profile-art img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.player-profile-art::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, transparent 58%, var(--panel)); }
.player-profile-copy { display: grid; align-content: center; gap: 8px; padding: 22px; }
.player-profile-copy h3 { margin: 0; color: var(--gold-soft); font: 500 clamp(1.35rem, 2.5vw, 2rem) Georgia, serif; }
.player-profile-copy blockquote { margin: 0; padding: 7px 11px; border-left: 3px solid var(--profile-banner); color: #dfc983; font-family: Georgia, serif; font-style: italic; }
.player-profile-copy > p { margin: 0; line-height: 1.45; white-space: pre-line; }
.player-profile-copy dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin: 5px 0; }
.player-profile-copy dl div { padding: 6px 8px; border: 1px solid var(--line); background: rgba(4, 8, 6, .35); }
.player-profile-copy dt { color: var(--muted); font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; }
.player-profile-copy dd { margin: 2px 0 0; font-size: .76rem; font-weight: 700; }
.profile-eliminated { color: #d98d7c; }
.city-organization-v2 label, .profile-settings-v2 label { display: grid; gap: 4px; color: var(--muted); font-size: .72rem; }
.settings-block input, .settings-block select, .settings-block textarea { width: 100%; min-width: 0; padding: 7px 9px; border: 1px solid var(--line); background: var(--panel-soft); color: var(--ink); font: inherit; }
.city-organization-v2 label small { opacity: .76; }
.profile-settings-v2 { grid-column: 1 / -1; }
.profile-live-preview-v2 { display: grid; gap: 5px; margin-top: 6px; }
.research-tree { position: relative; display: grid; gap: 9px; padding: 5px 0; }
.research-branch-heading {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 12px 0 0;
  padding: 8px 10px 6px;
  border-bottom: 1px solid rgba(208, 169, 81, .34);
  color: var(--ink);
}
.research-branch-heading:first-child { margin-top: 0; }
.research-branch-heading small { color: var(--muted); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.research-branch-heading strong { color: var(--gold-bright); font-family: var(--display-font); letter-spacing: .04em; }
.research-tree .research-node { position: relative; width: calc(100% - min(96px, var(--research-depth) * 48px)); margin-left: min(96px, var(--research-depth) * 48px); }
.research-tree .research-node.branch::before { position: absolute; top: -10px; bottom: 50%; left: -25px; width: 22px; content: ""; border-bottom: 1px solid rgba(208, 169, 81, .5); border-left: 1px solid rgba(208, 169, 81, .5); }
.research-tree .research-node.root { border-color: rgba(208, 169, 81, .65); box-shadow: inset 3px 0 var(--gold); }
.research-prerequisite { color: #c8aa62 !important; font-size: .64rem !important; }
.eco-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.eco-kpis > span { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); background: var(--panel-soft); }
.eco-kpis small { color: var(--muted); font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; }
.eco-kpis b { color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.eco-history { display: grid; gap: 7px; padding: 9px 10px; border: 1px solid var(--line); background: rgba(4, 9, 6, .3); }
.eco-history header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.eco-history header small { color: var(--muted); font-size: .66rem; }
.eco-history-bars { display: flex; align-items: end; gap: 5px; height: 145px; padding: 14px 4px 0; border-bottom: 1px solid var(--line); }
.eco-history-bars > span { display: grid; grid-template-rows: 1fr auto auto; align-items: end; justify-items: center; gap: 2px; height: 100%; min-width: 28px; flex: 1; }
.eco-history-bars i { display: block; width: min(24px, 74%); min-height: 4px; background: linear-gradient(180deg, var(--gold-soft), #806525); box-shadow: 0 0 10px rgba(208, 169, 81, .16); }
.eco-history-bars b { font-size: .61rem; font-variant-numeric: tabular-nums; }
.eco-history-bars small { color: var(--muted); font-size: .58rem; }
.eco-city-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 7px; }
.eco-city-card { display: grid; gap: 6px; padding: 9px; border: 1px solid var(--line); background: var(--panel-soft); }
.eco-city-card header { display: flex; justify-content: space-between; gap: 8px; }
.eco-city-card header small { color: var(--muted); font-size: .64rem; }
.eco-city-card > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.eco-city-card > div span { display: grid; justify-items: center; gap: 1px; min-width: 0; padding: 4px 2px; border: 1px solid rgba(255,255,255,.06); }
.eco-city-card .res-ic { width: 18px; height: 18px; }
.eco-city-card small, .eco-city-card footer { color: var(--muted); font-size: .6rem; }
.eco-city-card b { font-size: .7rem; }
.eco-city-card em { color: #8fbf7a; font-size: .58rem; font-style: normal; }
.population-ledger { display: grid; gap: 8px; margin-bottom: 14px; }
.population-ledger > header { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 10px 12px; border: 1px solid rgba(208, 169, 81, .32); background: linear-gradient(120deg, rgba(40, 47, 31, .8), rgba(15, 24, 18, .8)); }
.population-ledger > header div { display: grid; gap: 2px; }
.population-ledger > header small { color: #91bd78; font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.population-ledger > header h3 { margin: 0; color: #ead59b; font: 700 1.05rem/1.2 Georgia, serif; }
.population-ledger > header p { max-width: 470px; margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.4; text-align: right; }
.population-totals { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.population-totals > span { display: grid; gap: 2px; padding: 9px 10px; border: 1px solid var(--line); background: rgba(12, 20, 15, .72); }
.population-totals small { color: var(--muted); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; }
.population-totals b { color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.population-totals .eco-pos, .population-city-card .eco-pos { color: #8fbf7a; }
.population-totals .eco-neg, .population-city-card .eco-neg { color: #d98d7c; }
.population-city-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 7px; }
.population-city-card { display: grid; gap: 7px; padding: 9px; border: 1px solid var(--line); background: var(--panel-soft); }
.population-city-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.population-city-card header small { color: var(--muted); font-size: .62rem; }
.population-city-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.population-city-kpis > span { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 6px; border: 1px solid rgba(255,255,255,.06); }
.population-city-kpis small { color: var(--muted); font-size: .58rem; }
.population-city-kpis b { color: var(--gold-soft); font-size: .72rem; font-variant-numeric: tabular-nums; }
.population-city-kpis em { overflow: hidden; color: var(--muted); font-size: .56rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.population-forecast { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 4px; }
.population-forecast > span { display: grid; gap: 2px; min-width: 0; padding: 7px; border-top: 1px solid rgba(208, 169, 81, .2); background: rgba(7, 13, 10, .28); }
.population-forecast small { color: var(--muted); font-size: .57rem; letter-spacing: .04em; text-transform: uppercase; }
.population-forecast b { color: var(--gold-soft); font-size: .68rem; font-variant-numeric: tabular-nums; }
.population-forecast em { color: var(--muted); font-size: .55rem; font-style: normal; line-height: 1.3; }
.population-forecast .eco-pos { color: #8fbf7a; }
.population-forecast .eco-neg { color: #d98d7c; }

@media (max-width: 700px) {
  .player-profile-v2 { grid-template-columns: 1fr; }
  .player-profile-art img { min-height: 170px; max-height: 220px; }
  .player-profile-art::after { background: linear-gradient(180deg, transparent 54%, var(--panel)); }
  .player-profile-copy { padding: 14px; }
  .research-tree .research-node { width: calc(100% - min(38px, var(--research-depth) * 19px)); margin-left: min(38px, var(--research-depth) * 19px); }
  .research-tree .research-node.branch::before { left: -11px; width: 9px; }
  .eco-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eco-history header { display: grid; }
  .population-ledger > header { display: grid; }
  .population-ledger > header p { text-align: left; }
  .population-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .population-city-grid { grid-template-columns: 1fr; }
  .population-city-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .population-forecast { grid-template-columns: 1fr; }
}

.troop-summary {
  display: grid;
  width: 100%;
  gap: 5px;
  padding: 8px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(8, 14, 10, .62);
}
.troop-summary:hover { border-color: var(--faction-accent); }
.troop-summary strong { color: var(--gold-soft); font-size: .78rem; }
.troop-summary small { color: var(--muted); font-size: .66rem; }
.troop-summary-icons { display: flex; flex-wrap: wrap; gap: 4px; color: var(--muted); font-size: .68rem; }
.troop-summary-icons > span { display: inline-flex; align-items: center; gap: 2px; }
.troop-summary-icons img { width: 21px; height: 21px; }
.v2-left {
  grid-template-rows: none;
  grid-auto-rows: max-content;
  align-content: start;
}

.build-phase {
  width: max-content;
  max-width: 100%;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  font-size: .64rem;
}
.build-phase.architect { border-color: rgba(116, 158, 197, .52); color: #a9c9e7; }
.build-phase.crew { border-color: rgba(190, 145, 78, .58); color: #e3bd80; }
.build-phase.waiting { border-style: dashed; }

.training-queue { margin-bottom: 10px; border: 1px solid var(--line); background: rgba(7, 12, 9, .54); }
.training-queue > summary {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  color: var(--gold-soft);
  cursor: pointer;
}
.training-queue > summary span { color: var(--muted); font-size: .72rem; }
.training-queue > .queue-sort { justify-content: flex-end; padding: 6px 8px; border-top: 1px solid var(--line); }
.training-queue > div { display: grid; gap: 4px; padding: 7px; border-top: 1px solid var(--line); }
.training-queue-row {
  display: grid;
  grid-template-columns: 24px 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border: 1px solid rgba(218, 195, 132, .16);
  background: var(--panel-soft);
}
.training-queue-row > img { width: 30px; height: 30px; }
.training-queue-row > span:nth-child(3) { display: grid; }
.training-queue-row small, .training-queue-row time { color: var(--muted); font-size: .68rem; }
.campaign-queue-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(181, 145, 64, .24);
  background: rgba(21, 33, 25, .74);
}
.campaign-order-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  color: var(--gold-soft);
  background: rgba(181, 145, 64, .08);
}
.campaign-queue-row > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.campaign-queue-row small { color: var(--muted); font-size: .68rem; overflow-wrap: anywhere; }
.realm-timeline { display: grid; gap: 10px; }
.realm-timeline > header { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.realm-timeline > header h3, .realm-timeline > header p { margin: 0; }
.realm-timeline > header > small { color: var(--muted); font-size: .68rem; text-align: right; }
.realm-timeline-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.realm-timeline-filters button { display: inline-flex; gap: 6px; padding: 6px 9px; border: 1px solid var(--line); color: var(--muted); background: rgba(7, 12, 9, .58); }
.realm-timeline-filters button.active { border-color: var(--gold); color: var(--gold-soft); background: rgba(172, 124, 34, .16); }
.realm-timeline-filters button span { font-variant-numeric: tabular-nums; }
.realm-timeline-list { display: grid; gap: 6px; }
.realm-timeline-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 9px; border: 1px solid var(--line); background: rgba(7, 12, 9, .6); }
.realm-timeline-kind { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(214, 174, 77, .28); }
.realm-timeline-row[data-timeline-category="recruitment"] .realm-timeline-kind,
.realm-timeline-row[data-timeline-category="march"] .realm-timeline-kind,
.realm-timeline-row[data-timeline-category="return"] .realm-timeline-kind,
.realm-timeline-row[data-timeline-category="battle"] .realm-timeline-kind { background: #b96c59; }
.realm-timeline-row[data-timeline-category="research"] .realm-timeline-kind,
.realm-timeline-row[data-timeline-category="ritual"] .realm-timeline-kind { background: #8663ad; }
.realm-timeline-row[data-timeline-category="trade"] .realm-timeline-kind { background: #7ca267; }
.realm-timeline-row > span:nth-child(2), .realm-timeline-row time { display: grid; gap: 2px; min-width: 0; }
.realm-timeline-row small { color: var(--muted); font-size: .66rem; }
.realm-timeline-row time { justify-items: end; font-size: .7rem; font-style: normal; text-align: right; }
.realm-timeline-row time b { color: var(--gold-soft); }
.campaign-route { display: grid; gap: 2px; text-align: right; color: var(--gold-soft); font-size: .72rem; }
.training-order { color: var(--gold); font-variant-numeric: tabular-nums; }

.command-navigation { width: min(1200px, calc(100vw - 150px)); }
.command-direct {
  display: grid;
  grid-template-columns: repeat(13, minmax(64px, 1fr));
  gap: 3px;
}
.command-direct button {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-width: 0;
  height: 52px;
  padding: 3px 5px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
}
.command-direct button:hover { border-color: var(--line-strong); color: var(--gold-soft); background: var(--panel-soft); }
.command-direct img, .command-direct .css-gear { width: 25px; height: 25px; }
.command-direct button > span:last-child { overflow: hidden; max-width: 100%; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.command-direct .window-badge { top: 1px; right: 4px; }
.command-dock { display: none; }

@media (max-width: 1320px) {
  .command-navigation { width: min(630px, calc(100vw - 120px)); }
  .command-direct { display: none; }
  .command-dock { display: grid; }
}

@media (max-width: 1180px) {
  .v2-left {
    grid-template-rows: none;
    grid-auto-rows: max-content;
    align-content: start;
  }
}

@media (max-width: 700px) {
  .active-bonus-bar { max-width: 76px; gap: 3px; padding-right: 3px; }
  .active-bonus-chip { flex-basis: 34px; width: 34px; height: 34px; padding: 2px; }
  .active-bonus-chip img { width: 21px; height: 21px; }
  .active-bonus-chip small { display: none; }
  .resource-bar { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .command-navigation { width: 100%; }
  .training-queue-row { grid-template-columns: 22px 30px minmax(0, 1fr); }
  .training-queue-row time { grid-column: 3; }
  .campaign-queue-row { grid-template-columns: 30px minmax(0, 1fr); }
  .realm-timeline > header { align-items: start; flex-direction: column; }
  .realm-timeline > header > small { text-align: left; }
  .realm-timeline-row { grid-template-columns: 8px minmax(0, 1fr); }
  .realm-timeline-row time { grid-column: 2; justify-items: start; text-align: left; }
  .campaign-route { grid-column: 2; text-align: left; }
  .support-deployment-v2 { grid-template-columns: minmax(0, 1fr) auto; }
  .support-deployment-v2 button { grid-column: 1 / -1; justify-self: start; }
  .recruit-list { grid-template-columns: 1fr; }
  .recruit-row { grid-template-columns: 38px minmax(0, 1fr) 28px; }
  .recruit-controls { grid-column: 2 / -1; grid-template-columns: 54px 46px minmax(92px, 1fr); width: 100%; }
  .recruit-requirement { grid-column: 2 / -1; }
}