:root {
  --ink: #e8ece8;
  --muted: #91a3a6;
  --surface: #14242b;
  --surface-2: #1a2d34;
  --line: #2b4048;
  --accent: #d6b97c;
  --green: #8ac7ae;
  --bg: #0c181e;
  --sidebar: 325px;
  --bs-body-font-family: Inter, "Segoe UI", system-ui, sans-serif;
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-border-color: var(--line);
  --bs-primary: #8ac7ae;
  --bs-secondary-color: var(--muted);
}
.moderation-report{padding:18px 0;border-top:1px solid #34505a}
.moderation-report:first-of-type{margin-top:18px}
.moderation-report .flex-row-game{gap:8px;flex-wrap:wrap}
.moderation-report .plain-text{margin:12px 0;padding:12px;background:#10232c;border-radius:5px;white-space:pre-wrap;overflow-wrap:anywhere}
.moderation-report .kv{margin-top:8px}
.government-summary { margin-bottom: 22px; }
.government-summary .negative, .government-columns .negative, .government-budget-grid .negative { color:#f09992; }
.government-summary .stat-value { font-size:clamp(18px,1.6vw,24px); overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.government-columns { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 20px; margin: 22px 0; align-items: start; }
.government-budget-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.government-section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin:32px 0 18px; }
.government-section-heading h2 { margin:6px 0 0; }
.government-section-heading > .small-copy { max-width:400px; }
.government-budget-card .field label { display:flex; justify-content:space-between; gap:12px; font-weight:600; margin:12px 0; }
.government-budget-card output { color:var(--accent); font-variant-numeric:tabular-nums; }
.government-budget-card > strong { display:block; margin:12px 0; font-size:1.12rem; }
.government-budget-card input[type=range], .government-budget-form input[type=range] { width:100%; accent-color:var(--accent); }
.government-budget-card select { width:100%; }
.government-budget-card small { color:var(--muted); display:block; line-height:1.6; }
.government-expenses .kv { padding:10px 0; border-bottom:1px solid var(--line); gap:16px; }
.government-expenses strong { text-align:right; font-variant-numeric:tabular-nums; }
.government-advisor { display:flex; flex-direction:column; gap:12px; }
.government-advisor h3 { margin:0; font-size:1.1rem; }
.government-advisor p { color:var(--muted); line-height:1.7; }
.government-advisor .army-actions { margin-top:auto; flex-wrap:wrap; }
.government-budget-preview { border-color:var(--accent); }
.government-columns .kv { flex-wrap:wrap; gap:8px 16px; }
.government-budget-form .field label { display:flex; justify-content:space-between; gap:12px; }
@media(max-width:1200px) { .government-budget-grid {grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:760px) { .government-budget-grid,.government-columns {grid-template-columns:1fr;} .government-section-heading {align-items:start;flex-direction:column;} }
#map-render { position: relative; }
.province-orders { margin: 20px 0; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #102127; }
.province-orders .section-title { margin: 0 0 12px; }
.province-order-buttons { display: grid; gap: 8px; }
.province-order-buttons .btn-game { justify-content: flex-start; white-space: normal; }
.landing-guide { margin-top: 12px; font-size: 12px; color: var(--muted); }
.landing-guide summary { color: var(--accent); cursor: pointer; }
.landing-guide ol { padding-left: 18px; margin: 12px 0; }
.landing-guide li { margin-bottom: 8px; }
.province-bonuses .kv { align-items: baseline; gap: 12px; }
.province-bonuses .kv strong { max-width: 58%; text-align: right; font-size: 12px; color: var(--green); overflow-wrap: anywhere; }
.route-map-preview { display: block; width: 100%; height: 190px; margin: 12px 0 6px; border: 1px solid var(--line); border-radius: 6px; background: #0f2732; }
.map-stage .map-legend-expanded { max-width: min(580px, calc(100% - 84px)); padding: 10px 12px; line-height: 1.4; }
.map-legend-expanded summary { color: var(--accent); cursor: pointer; font-weight: 600; }
.map-legend-expanded p { font-size: 11px; margin: 8px 0; }
.map-legend-expanded small { display: block; font-size: 10px; margin-top: 7px; color: var(--muted); }
.legend-items { display: flex; gap: 5px 14px; flex-wrap: wrap; font-size: 11px; }
.resource-map-label { pointer-events: none; text-anchor: middle; fill: #eef1de; font-size: 10px; paint-order: stroke; stroke: #193239; stroke-width: 2px; }
.map-object-popover { position: absolute; z-index: 20; width: min(310px, calc(100% - 16px)); max-height: 65%; overflow: auto; padding: 18px; background: #102127f7; border: 1px solid #637e79; border-radius: 9px; box-shadow: 0 16px 45px #0007; font-size: 13px; }
.map-object-popover[hidden] { display: none; }
.map-object-popover.is-hover { pointer-events: none; }
.map-object-popover > strong { display: block; padding-right: 22px; color: var(--accent); }
.map-object-popover p { margin: 10px 0; }
.map-object-popover .kv { font-size: 12px; }
.popover-close { position: absolute; top: 7px; right: 8px; border: 0; background: transparent; color: var(--ink); font-size: 24px; }
.world-map [data-object] { cursor: pointer; pointer-events: all; }
.world-map [data-object]:focus-visible { outline: none; filter: drop-shadow(0 0 5px #ead6a7); }
.world-map .movement-path.domain-sea { stroke: #8dbbd4; }
.world-map .movement-path.domain-air { stroke: #d6b97c; }
.world-map .movement-path.hostile-route { stroke: #d89178; }
.world-map .movement-path { pointer-events: stroke; vector-effect: non-scaling-stroke; }
.missile-path { stroke: #e5aa87; stroke-width: 1.6px; stroke-dasharray: 9 5; vector-effect: non-scaling-stroke; pointer-events: none; }
.missile-marker circle { fill: #382d28; stroke: #e5aa87; stroke-width: 1.5; }
.missile-marker path { fill: #f2be92; }
.conflict-target { stroke: #df997e; fill: #df997e18; stroke-width: 1.5; pointer-events: none; }
@media (max-width: 700px) {
  .map-stage .map-legend-expanded { max-width: calc(100% - 72px); }
  .map-legend-expanded small { display: none; }
  .map-object-popover { max-height: 58%; }
}
.atlas-navigation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.atlas-navigation label { font-size: 13px; color: var(--muted); }
.atlas-navigation select { width: auto; max-width: 100%; font-size: 13px; }
.region-label { font-size: 100px; fill: #e7e1c7; text-anchor: middle; paint-order: stroke; stroke: #16272c; stroke-width: 8px; cursor: pointer; }
.region-note { font-size: 60px; fill: #a6c4bf; text-anchor: middle; cursor: pointer; }
.plain-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.own-row {
  background: rgba(138, 199, 174, 0.09);
}
.world-chart {
  display: block;
  width: 100%;
  max-height: 210px;
}
.market-price-summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.market-price-summary strong { color: var(--green); font-size: 18px; }
.market-price-summary span { color: var(--muted); font-size: 12px; }
.market-price-chart { display: block; width: 100%; margin-top: 12px; overflow: visible; }
.market-price-chart text { fill: var(--muted); font-size: 11px; }
.market-price-axis { stroke: var(--line); stroke-width: 1.5; }
.market-price-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 5; }
.market-price-simulated, .market-price-observed { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.market-price-simulated { stroke: var(--muted); stroke-dasharray: 4 4; }
.market-price-observed { stroke: var(--green); }
.market-price-dot-simulated { fill: var(--muted); }
.market-price-dot-observed { fill: var(--green); }
.market-price-range { display: flex; justify-content: space-between; margin: 0 0 10px; }
.market-price-details summary { color: var(--accent); cursor: pointer; font-size: 13px; }
.market-price-details .table-wrap { margin-top: 12px; max-height: 320px; overflow: auto; }
.shared-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.shared-item small {
  display: block;
  color: var(--muted);
}
.shared-item button {
  margin: 4px;
}
.chat-thread {
  min-height: 180px;
  max-height: 420px;
  overflow: auto;
  margin: 20px 0;
  padding-right: 8px;
}
.chat-message {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.chat-message header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.chat-message time {
  font-size: 12px;
  color: var(--muted);
}
.chat-message p {
  margin: 6px 0;
}
.community-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.community-toolbar button {
  min-width: 34px;
}
.community-file {
  display: none;
}
.community-editor textarea {
  min-height: 120px;
}
.community-editor small,
.community-upload-status {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}
.community-preview-label {
  margin: 14px 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.community-preview {
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #102027;
}
.community-content {
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.55;
}
.community-content img,
.community-content iframe {
  display: block;
  max-width: min(100%, 620px);
  margin: 10px 0;
  border-radius: 6px;
}
.community-content img {
  max-height: 420px;
  object-fit: contain;
}
.community-content iframe {
  width: min(100%, 620px);
  aspect-ratio: 16 / 9;
  border: 0;
}
.community-content blockquote {
  margin: 10px 0;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  background: rgba(255, 255, 255, .04);
}
.community-content a {
  text-decoration: underline;
}
[data-shared][aria-current="page"] {
  border-color: var(--accent);
  color: var(--accent);
}
@media (max-width: 600px) {
  .shared-item {
    flex-direction: column;
  }
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
a {
  color: var(--green);
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
svg.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.muted {
  color: var(--muted);
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 650;
}
.initial-loading {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}
.loading-ring {
  width: 36px;
  height: 36px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  background: #101e25;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  z-index: 30;
  padding: 30px 18px 16px;
}
.brand {
  font-size: 21px;
  letter-spacing: 0.17em;
  font-weight: 650;
  color: #f1e5c8;
  margin: 0 0 32px 10px;
}
.brand small {
  display: block;
  letter-spacing: 0.22em;
  font-size: 10px;
  margin-top: 6px;
  color: var(--muted);
  font-weight: 400;
}
.nation-badge {
  padding: 15px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 24px;
  background: #172931;
}
.nation-badge strong {
  font-size: 16px;
  display: block;
}
.nation-badge span {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
}
.nav-group {
  font-size: 11px;
  color: #637e86;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  padding: 17px 12px 7px;
}
.nav-link-game {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  color: #a7b8bc;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
}
.nav-link-game:hover {
  background: #21363e;
  color: #fff;
}
.nav-link-game.active {
  color: #f2e3bc;
  background: #2b3534;
  box-shadow: inset 3px 0 var(--accent);
}
.sidebar-bottom {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.sidebar-bottom button {
  border: 0;
  background: none;
  color: var(--muted);
  display: flex;
  gap: 10px;
  padding: 9px 12px;
  width: 100%;
  font-size: 14px;
}
.main-shell {
  margin-left: var(--sidebar);
  min-height: 100vh;
}
.topbar {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  border-bottom: 1px solid var(--line);
  background: #101e25;
}
.topbar-title {
  font-size: 15px;
  color: var(--muted);
}
.topbar-title strong {
  color: var(--ink);
  font-weight: 500;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
}
.live-status {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}
.live-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.live-status.offline i {
  background: #ca936e;
}
.resource-bar {
  min-height: 88px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px,100%),1fr));
  border-bottom: 1px solid var(--line);
  background: #14242b;
}
.resource {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 15px 23px;
  border-right: 1px solid var(--line);
}
.resource:last-child {
  border: 0;
}
.resource-icon {
  width: 39px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: #233438;
  border: 1px solid #3b4a43;
  border-radius: 7px;
}
.resource-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.resource label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}
.resource strong {
  display: block;
  font-size: 21px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.resource small {
  font-size: 12px;
  color: var(--green);
}
.resource small.negative {
  color: #d78e81;
}
.content {
  padding: 28px 32px 40px;
}
.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}
.page-heading h1 {
  font-size: 28px;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin: 5px 0 7px;
}
.page-heading p {
  color: var(--muted);
  margin: 0;
  font-size: 15px;
}
.btn-game {
  background: var(--accent);
  color: #152027;
  border: 1px solid var(--accent);
  border-radius: 5px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.btn-game:hover {
  background: #e7cb91;
  color: #132128;
}
.btn-game:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-game.secondary {
  background: #20323a;
  border-color: #3c535b;
  color: var(--ink);
}
.btn-game.secondary:hover {
  background: #2b424a;
}
.btn-game.danger {
  background: #482d2e;
  border-color: #85514e;
  color: #f0b3a6;
}
.btn-game.small {
  padding: 7px 11px;
  font-size: 13px;
}
.icon-button {
  border: 1px solid var(--line);
  background: #14262e;
  color: var(--ink);
  padding: 8px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
}
.panel h2 {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 18px;
}
.panel h3 {
  font-size: 16px;
  margin: 0 0 10px;
}
.revenue-detail .kv {
  align-items: baseline;
}
.revenue-detail .kv span small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}
.revenue-detail .kv strong {
  text-align: right;
}
.revenue-total {
  margin-top: 14px;
  border-top: 1px solid var(--line);
}
.revenue-total .kv:last-child {
  font-weight: 700;
}
.revenue-actions ol {
  padding-left: 20px;
  margin: 0 0 16px;
}
.revenue-actions li {
  margin-bottom: 14px;
}
.grid {
  display: grid;
  gap: 18px;
}
.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.panel input[type="range"] {
  width: 100%;
  accent-color: var(--green);
  cursor: pointer;
}
.panel input[data-workforce-number] {
  text-align: right;
}
.stat-value {
  font-size: 30px;
  letter-spacing: -0.025em;
  margin: 6px 0;
}
.stat-label {
  color: var(--muted);
  font-size: 14px;
}
.stat-note {
  font-size: 13px;
  color: var(--green);
}
.stat-note.warn {
  color: #d4a575;
}
.meter {
  height: 6px;
  background: #263c44;
  border-radius: 4px;
  overflow: hidden;
  margin: 12px 0;
}
.meter span {
  display: block;
  height: 100%;
  background: var(--green);
  border-radius: 4px;
}
.meter.gold span {
  background: var(--accent);
}
.meter.red span {
  background: #c68472;
}
.kv {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-size: 14px;
  padding: 8px 0;
  border-bottom: 1px solid #243840;
}
.kv:last-child {
  border: 0;
}
.kv span:first-child {
  color: var(--muted);
}
.catalogue-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.catalogue-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.catalogue-visual {
  aspect-ratio: 1 / 1;
  width: 100%;
  align-self: start;
  overflow: hidden;
  background: linear-gradient(140deg, #253d43, #172831);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.catalogue-visual .icon {
  width: 48px;
  height: 48px;
  stroke-width: 1;
  color: #829e9e;
}
.catalogue-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.catalogue-visual img[hidden] { display: none; }
.illustration-placeholder { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 12px; text-align: center; color: #829e9e; }
.illustration-placeholder > span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.has-image:not(.image-unavailable) .illustration-placeholder { visibility: hidden; }
.catalogue-grid:has(> .catalogue-card--illustrated) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); align-items: stretch; gap: 22px; }
.catalogue-card--illustrated { min-width: 0; box-shadow: 0 14px 30px #030c1020; }
.catalogue-main { display: grid; grid-template-columns: minmax(160px, 38%) minmax(0, 1fr); align-items: start; flex: 1; }
.catalogue-card--illustrated .catalogue-body { min-width: 0; padding: 22px; }
.catalogue-card--illustrated .catalogue-body h3 { margin-top: 10px; font-size: 20px; overflow-wrap: anywhere; }
.catalogue-card--illustrated .catalogue-body p { min-height: 0; line-height: 1.65; }
.catalogue-card--illustrated .eyebrow { font-size: 10px; color: var(--muted); }
.catalogue-card--illustrated .effect-row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
.catalogue-card--illustrated .effect-row > strong { text-align: left; overflow-wrap: anywhere; }
.catalogue-card--illustrated .kv { flex-wrap: wrap; gap: 4px 12px; }
.catalogue-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 20px; border-top: 1px solid var(--line); background: #102127; }
.catalogue-cost { flex: 1 1 180px; min-width: 0; }
.catalogue-cost .costs { margin: 6px 0; }
.catalogue-footer small { display: block; color: var(--muted); font-size: 12px; }
.catalogue-action { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-left: auto; }
.catalogue-footer .btn-game { white-space: normal; }
.unit-preview-heading { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 20px; align-items: center; margin: 20px 0; }
.unit-preview-heading .catalogue-visual { border: 1px solid var(--line); border-radius: 8px; }
.unit-preview-heading h3 { font-size: 20px; }
#asset-preview:not(:empty) { width: min(220px, 100%); margin-top: 12px; }
#asset-preview .catalogue-visual { border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 600px) {
  .catalogue-main { grid-template-columns: minmax(0, 1fr); }
  .catalogue-card--illustrated .catalogue-body { padding: 18px; }
  .catalogue-footer { padding: 16px 18px; }
  .unit-preview-heading { grid-template-columns: 108px minmax(0, 1fr); gap: 14px; }
}
.catalogue-visual .level {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #102127da;
  color: var(--accent);
  padding: 4px 8px;
  border: 1px solid #607364;
  border-radius: 4px;
  font-size: 12px;
}
.catalogue-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.catalogue-body h3 {
  font-size: 17px;
  margin: 0 0 7px;
}
.catalogue-body p {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 14px;
  min-height: 42px;
}
.effect-summary {
  display: grid;
  gap: 7px;
  margin: 2px 0 12px;
}
.effect-row {
  padding: 9px 10px;
  border: 1px solid #304950;
  border-radius: 5px;
  background: #102127;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  align-items: baseline;
}
.effect-row > span {
  color: #b6c6c7;
  font-size: 12px;
}
.effect-row > strong {
  color: var(--green);
  font-size: 13px;
  font-weight: 650;
  text-align: right;
}
.effect-row > small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.law-effects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 2px 0 12px; }
.law-effect-group { padding: 9px; border: 1px solid #304950; border-radius: 5px; background: #102127; }
.law-effect-group > span { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.law-effect-group.benefit { border-color: #3d7061; }.law-effect-group.benefit > span, .law-effect-group.benefit strong { color: var(--green); }
.law-effect-group.tradeoff { border-color: #834a4a; background: #321e22; }.law-effect-group.tradeoff > span, .law-effect-group.tradeoff strong { color: #ef9898; }
.law-effect-group > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 9px 0; border-top: 1px solid #ffffff12; }
.law-effect-group small { color: #c2ced0; font-size: 12px; line-height: 1.5; }
.law-effect-group strong { font-size: 15px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.catalogue-grid:has(> .law-card) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }
.law-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 22px; container-type: inline-size; }
.law-card.is-active { border-color: #4c8975; }
.law-card-header { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.law-thumbnail { width: 56px; height: 56px; flex: 0 0 56px; display: grid; place-items: center; background: #243b40; border: 1px solid #3b5359; border-radius: 10px; overflow: hidden; }
.law-thumbnail > .icon { width: 28px; height: 28px; color: var(--accent); }
.law-thumbnail .catalogue-visual { width: 56px; }
.law-thumbnail .illustration-placeholder { padding: 4px; }.law-thumbnail .illustration-placeholder span { display: none; }
.law-card-title { flex: 1 1 180px; min-width: 0; }.law-card-title h3 { margin: 5px 0 0; font-size: 19px; line-height: 1.35; overflow-wrap: anywhere; }
.law-card-title .eyebrow { font-size: 10px; color: var(--muted); }
.law-status { padding: 4px 8px; border-radius: 5px; background: #ffffff08; color: #b4c6c9; font-size: 11px; }.law-status.active { color: var(--green); background: #244739; }
.law-description { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 16px 0; }
.law-card .law-effects { gap: 12px; margin: 0 0 18px; }.law-card .law-effect-group { padding: 12px; min-width: 0; border-radius: 8px; }
.law-replacement { padding: 10px 12px; border-left: 2px solid var(--accent); background: #ffffff05; color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0 0 16px; }
.law-card-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.law-card-footer > div { flex: 1 1 180px; min-width: 0; }.law-card-footer .costs { margin: 7px 0 0; gap: 8px 14px; }.law-card-footer .costs span { overflow-wrap: anywhere; }
.law-cost-label { display: block; font-size: 11px; color: #bccbc9; }.law-card-footer small { display: block; margin-top: 7px; font-size: 12px; color: var(--muted); }
@container (max-width: 350px) { .law-card .law-effects { grid-template-columns: 1fr; } }
.costs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #bac9c9;
  margin: 8px 0 14px;
}
.costs span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.costs .icon {
  width: 14px;
  height: 14px;
  color: var(--accent);
}
.requirements {
  font-size: 12px;
  color: #d8a577;
  margin-bottom: 12px;
}
.card-footer-game {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.card-footer-game small {
  font-size: 12px;
  color: var(--muted);
}
.card-actions-game {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.tabs {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.tabs button {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  border-radius: 5px;
  font-size: 14px;
}
.tabs button.active {
  background: #263a41;
  color: var(--ink);
  border-color: #405860;
}
.research-view-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--line);
}
.research-view-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  background: transparent;
  font-size: 13px;
}
.research-view-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.research-view-tabs .icon { width: 16px; height: 16px; }
.research-tree-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.tech-tree-panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #102127; }
.tech-tree-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.tech-tree-toolbar h2 { margin: 4px 0 0; font-size: 16px; font-weight: 500; }
.tech-tree-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; font-size: 10px; color: var(--muted); }
.tech-tree-legend .complete { color: #8ac7ae; }.tech-tree-legend .current { color: var(--accent); }.tech-tree-legend .available { color: #a9d7cc; }.tech-tree-legend .locked { color: #718588; }
.tech-tree-scroll { max-height: 730px; overflow: auto; padding: 10px; background-image: radial-gradient(#34525955 1px, transparent 1px); background-size: 18px 18px; }
.tech-tree-canvas { position: relative; min-height: 480px; }
.tech-tree-canvas svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.tech-tree-canvas path { fill: none; stroke: #48646a; stroke-width: 2; }.tech-tree-canvas path.ready { stroke: #639c87; }.tech-tree-canvas path.orbit { stroke: #b89456; stroke-dasharray: 6 6; }
.tech-tree-branch { position: absolute; left: 25px; color: #809695; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tech-tree-node { position: absolute; width: 166px; min-height: 94px; padding: 10px; text-align: left; color: var(--ink); border: 1px solid #3b565c; border-radius: 7px; background: #172b32; box-shadow: 0 12px 25px #020a0d66; transition: transform .15s ease, border-color .15s ease; }
.tech-tree-node:hover, .tech-tree-node.selected { transform: translateY(-2px); border-color: var(--accent); }.tech-tree-node.selected { box-shadow: 0 0 0 1px #d6b97c66, 0 14px 28px #0008; }
.tech-tree-node > span { display: flex; justify-content: space-between; gap: 6px; color: #91a3a6; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }.tech-tree-node > span b { color: inherit; font-size: 8px; }
.tech-tree-node strong { display: block; margin-top: 9px; font-size: 12px; line-height: 1.25; }.tech-tree-node small { display: block; margin-top: 5px; color: #9dafaf; font-size: 10px; }
.tech-tree-node.complete { border-color: #477d6d; background: #17332f; }.tech-tree-node.complete > span b { color: #8ac7ae; }.tech-tree-node.current { border-color: #9d814a; background: #352e22; }.tech-tree-node.current > span b { color: #e3c77e; }.tech-tree-node.available { border-color: #5f9484; }.tech-tree-node.available > span b { color: #a9d7cc; }.tech-tree-node.locked { opacity: .68; border-style: dashed; }
.tech-detail { position: sticky; top: 18px; padding: 14px; }.tech-detail h2 { margin: 6px 0 8px; font-size: 20px; }.tech-detail-visual { margin: -14px -14px 15px; overflow: hidden; border-bottom: 1px solid var(--line); }.tech-detail-visual .catalogue-visual { aspect-ratio: 16 / 8; }.tech-detail-visual .level { top: 9px; right: 9px; font-size: 10px; }
.tech-detail-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 13px 0; overflow: hidden; border: 1px solid #304950; border-radius: 6px; background: #304950; }.tech-detail-metrics div { padding: 9px; background: #102127; }.tech-detail-metrics span { display: block; color: var(--muted); font-size: 10px; }.tech-detail-metrics strong { display: block; margin-top: 4px; color: var(--green); font-size: 12px; }
.tech-detail-requirements, .tech-detail-orbit { padding: 10px; margin: 12px 0; border: 1px solid #735842; border-radius: 6px; background: #2a2622; }.tech-detail-requirements.ready { border-color: #416e60; background: #19332e; }.tech-detail-requirements > span, .tech-detail-orbit .eyebrow { color: #d8a577; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }.tech-detail-requirements.ready > span { color: var(--green); }.tech-detail-requirements p, .tech-detail-orbit p { margin: 5px 0 0; color: #c4c8c1; font-size: 11px; line-height: 1.45; }.tech-detail-orbit strong { display: block; margin-top: 5px; font-size: 13px; }.tech-detail-orbit .btn-game { margin-top: 10px; }
.tech-detail-cost { margin: 8px 0; }.tech-detail > .btn-game { width: 100%; }
.globe-orbital-assets { position: absolute; inset: 0; z-index: 4; pointer-events: none; }.globe-orbit-ring { position: absolute; left: 50%; top: 50%; width: 83%; height: 37%; border: 1px solid #d6b97c66; border-radius: 50%; transform: translate(-50%, -50%) rotate(-18deg); }.globe-satellite { position: absolute; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #e8c978; border-radius: 50%; background: #1c3035; color: #f1d58e; box-shadow: 0 0 14px #e8c97888; font-size: 14px; pointer-events: auto; }.globe-satellite:hover { transform: scale(1.14); }.globe-satellite::after { content: attr(data-label); position: absolute; top: 28px; left: 50%; transform: translateX(-50%); min-width: max-content; padding: 3px 6px; border: 1px solid #566a62; border-radius: 3px; background: #102127eF; color: #e5e5d2; font-size: 9px; opacity: 0; pointer-events: none; }.globe-satellite:hover::after { opacity: 1; }
@media (max-width: 1000px) { .research-tree-layout { grid-template-columns: 1fr; }.tech-detail { position: static; }.tech-tree-scroll { max-height: 620px; } }
@media (max-width: 650px) { .research-view-tabs { overflow-x: auto; }.research-view-tabs button { flex: 0 0 auto; }.tech-tree-toolbar { align-items: flex-start; flex-direction: column; }.tech-tree-legend { justify-content: flex-start; }.tech-tree-scroll { max-height: 560px; }.tech-detail-metrics, .law-effects { grid-template-columns: 1fr; }.globe-satellite::after { display: none; } }
.form-label {
  font-size: 14px;
  color: #a9babd;
}
.form-control,
.form-select {
  background: #102027;
  border-color: #34505a;
  color: var(--ink);
  font-size: 15px;
}
.form-control:focus,
.form-select:focus {
  background: #13262e;
  color: #fff;
  border-color: var(--green);
  box-shadow: 0 0 0 3px #8ac7ae18;
}
.form-range {
  accent-color: var(--green);
}
.field {
  margin-bottom: 17px;
}
.field label {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 14px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid #34505a;
  background: #102027;
  border-radius: 5px;
  color: var(--ink);
  padding: 10px 12px;
}
.field textarea {
  min-height: 110px;
}
.field input[type="checkbox"] {
  width: auto;
}
.field input[type="range"] {
  padding: 0;
}
.field small {
  font-size: 12px;
  color: var(--muted);
  display: block;
  margin-top: 6px;
}
.badge-game {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #415951;
  color: var(--green);
  background: #20372e;
}
.badge-game.gold {
  color: var(--accent);
  border-color: #5d5541;
  background: #33362b;
}
.badge-game.red {
  color: #e3a191;
  border-color: #6b4744;
  background: #36282a;
}
.badge-game.gray {
  color: var(--muted);
  border-color: var(--line);
  background: #1b2b33;
}
.table-game {
  width: 100%;
  font-size: 14px;
  border-collapse: collapse;
}
.table-game th {
  color: var(--muted);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.table-game td {
  padding: 14px;
  border-bottom: 1px solid #243840;
}
.table-game tr:last-child td {
  border-bottom: 0;
}
.table-game tr:hover td {
  background: #1b3038;
}
.table-wrap {
  overflow-x: auto;
}
.territory-table {
  min-width: 950px;
}
.territory-table th:not(:first-child),
.territory-table td:not(:first-child) {
  white-space: nowrap;
}
.territory-details summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}
.territory-details[open] summary {
  margin-bottom: 14px;
}
.table-game td .muted {
  font-size: 12px;
}
.timeline-item {
  display: flex;
  gap: 13px;
  padding: 14px 0;
  border-bottom: 1px solid #263b43;
}
.timeline-item:last-child {
  border: 0;
}
.timeline-icon {
  background: #243940;
  color: var(--accent);
  width: 33px;
  height: 33px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.timeline-item strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
}
.timeline-item time {
  font-size: 12px;
  color: var(--muted);
}
.empty-state {
  padding: 30px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.notice {
  border: 1px solid #6b6246;
  background: #302f25;
  color: #d7c99f;
  border-radius: 6px;
  padding: 13px 16px;
  font-size: 14px;
  margin-bottom: 20px;
}
.notice.info {
  border-color: #395c67;
  background: #193039;
  color: #b3d1d8;
}
.notice.red {
  border-color: #78534c;
  background: #35292a;
  color: #e5b4a7;
}
.spacer {
  height: 22px;
}
.flex-row-game {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.section-title {
  font-size: 18px;
  font-weight: 500;
  margin: 26px 0 15px;
}
.small-copy {
  font-size: 14px;
  color: var(--muted);
}
.world-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 294px;
  gap: 0;
  border: 1px solid #344b52;
  border-radius: 9px;
  overflow: hidden;
  height: calc(100vh - 270px);
  min-height: 560px;
}
.atlas-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.atlas-actions [aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.atlas-workspace > .page-heading { gap: 18px; flex-wrap: wrap; }
body.atlas-expanded { overflow: hidden; }
.atlas-workspace.is-expanded { position: fixed; inset: 0; z-index: 1100; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--bg); }
.atlas-workspace.is-expanded > .page-heading { margin: 0; flex: 0 0 auto; align-items: center; }
.atlas-workspace.is-expanded > .page-heading h1 { font-size: 20px; margin: 0; }
.atlas-workspace.is-expanded > .page-heading p,
.atlas-workspace.is-expanded > .page-heading .eyebrow { display: none; }
.atlas-workspace.is-expanded .atlas-navigation { margin: 0; flex: 0 0 auto; }
.atlas-workspace.is-expanded > .world-layout { flex: 1 1 auto; height: auto; min-height: 0; }
.atlas-workspace.is-expanded > .operation-strip { margin: 0; flex: 0 0 auto; }
.atlas-workspace.is-expanded > .map-bottom { display: none; }
.atlas-workspace.is-expanded .province-panel { min-height: 0; overflow: auto; }
.atlas-workspace.is-expanded .map-stage { height: 100%; min-height: 0; }
.atlas-graticule { fill: none; stroke: #bad0cf; stroke-opacity: .09; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.atlas-continent-label { fill: #ece8ce; font-size: 190px; letter-spacing: 28px; text-anchor: middle; paint-order: stroke; stroke: #132931; stroke-width: 10px; pointer-events: none; }
.atlas-ocean-name { fill: #c0dde2; opacity: .5; font-size: 130px; letter-spacing: 22px; text-anchor: middle; font-style: italic; pointer-events: none; }
.map-stage.is-overview .map-toolbar,
.map-stage.is-overview .map-legend { display: none; }
@media (max-width: 700px) {
  .atlas-workspace.is-expanded { padding: 8px; gap: 6px; }
  .atlas-workspace.is-expanded .atlas-actions { justify-content: flex-start; gap: 5px; }
  .atlas-workspace.is-expanded .atlas-actions .btn-game { font-size: 11px; padding: 6px 8px; }
  .atlas-workspace.is-expanded > .world-layout:not(.globe-layout) { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(180px,1fr) minmax(0,32%); }
  .atlas-workspace.is-expanded > .world-layout.globe-layout { grid-template-rows: minmax(0,1fr); }
  .atlas-workspace.is-expanded .province-panel { border-top: 1px solid var(--line); }
  .atlas-workspace.is-expanded > .operation-strip { display: none; }
  .atlas-workspace.is-expanded .atlas-navigation .small-copy { display: none; }
}
.map-stage {
  position: relative;
  background: #0f2732;
  overflow: hidden;
}
.world-map {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}
.world-map.panning {
  cursor: grabbing;
}
.globe-scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #071722;
  background-image: radial-gradient(circle at 50% 50%, #214354 0, #0b2534 48%, #071722 85%),
    radial-gradient(circle, #b9d6df99 0 1px, transparent 1.5px),
    radial-gradient(circle, #abc9d477 0 1px, transparent 1.5px);
  background-size: 100% 100%, 137px 151px, 221px 193px;
  background-position: 0 0, 19px 37px, 96px 71px;
}
.globe-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: #0d3347;
  box-shadow: 0 0 18px 5px #4590a262, 0 0 55px 12px #34769355;
}
.globe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}
.globe-canvas.dragging { cursor: grabbing; }
.globe-caption {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #d4e2df;
  text-shadow: 0 2px 8px #061721;
}
.globe-caption strong {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #e6d7aa;
}
.globe-caption span { font-size: 12px; color: #aac2c7; }
.globe-hover {
  position: absolute;
  left: 18px;
  bottom: 24px;
  max-width: calc(100% - 92px);
  min-height: 20px;
  color: #e9e2c7;
  font-size: 13px;
  text-shadow: 0 2px 8px #061721;
  pointer-events: none;
}
.globe-fallback .globe-halo {
  background-size: 200% 100%;
  background-position: center;
}
.map-stage.is-globe .map-toolbar,
.map-stage.is-globe .map-compass,
.map-stage.is-globe .map-legend { display: none; }
.map-stage.is-globe .map-zoom { z-index: 3; }
.world-layout.globe-layout { grid-template-columns: minmax(0, 1fr); }
.world-layout.globe-layout > .province-panel { display: none; }
.province {
  cursor: pointer;
  transition:
    fill-opacity 0.2s,
    stroke 0.2s;
}
.province:hover {
  fill-opacity: 0.6 !important;
  stroke: #ecdfb6 !important;
  stroke-width: 2.4 !important;
}
.province.selected {
  stroke: #f1dca8 !important;
  stroke-width: 3 !important;
  fill-opacity: 0.5 !important;
}
.nation-label {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 3px;
  fill: #e7e1c7;
  paint-order: stroke;
  stroke: #16272c;
  stroke-width: 4px;
  pointer-events: none;
  text-anchor: middle;
}
.capital-label {
  font-size: 13px;
  fill: #e6e8da;
  paint-order: stroke;
  stroke: #14242b;
  stroke-width: 3px;
  pointer-events: none;
}
.ocean-label {
  font-size: 17px;
  font-style: italic;
  letter-spacing: 5px;
  fill: #73949f;
  opacity: 0.55;
  pointer-events: none;
}
.map-toolbar {
  position: absolute;
  top: 18px;
  left: 18px;
  display: flex;
  gap: 4px;
  padding: 5px;
  background: #14252ce8;
  backdrop-filter: blur(8px);
  border: 1px solid #40525a;
  border-radius: 7px;
  z-index: 2;
}
.map-toolbar button {
  font-size: 12px;
  padding: 7px 12px;
  border: 0;
  background: none;
  color: #a7bcc1;
  border-radius: 4px;
}
.map-toolbar button.active {
  background: #3a4540;
  color: #eaddb8;
}
.map-zoom {
  position: absolute;
  bottom: 22px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.map-zoom button {
  width: 34px;
  height: 34px;
  background: #14252cdd;
  border: 1px solid #46616b;
  color: #c9d5d7;
  border-radius: 5px;
  font-size: 20px;
}
.map-legend {
  position: absolute;
  bottom: 18px;
  left: 18px;
  background: #13232bea;
  border: 1px solid #3a5058;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 12px;
  color: #a9bec2;
}
.legend-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 6px;
}
.map-compass {
  position: absolute;
  top: 24px;
  right: 24px;
  color: #d4ccae;
  font-size: 12px;
  text-align: center;
  pointer-events: none;
}
.map-compass span {
  display: block;
  font-size: 27px;
  line-height: 1;
}
.map-scale {
  position: absolute;
  bottom: 68px;
  left: 18px;
  color: #7e9ca5;
  font-size: 11px;
  border-top: 1px solid #728a92;
  padding-top: 3px;
  width: 70px;
  text-align: center;
}
.province-panel {
  background: #15272e;
  border-left: 1px solid #354c53;
  overflow-y: auto;
  padding: 23px;
}
.province-panel h2 {
  font-size: 22px;
  font-weight: 500;
  margin: 8px 0;
}
.province-panel .country {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 22px;
  font-size: 14px;
  color: var(--muted);
}
.province-panel .country i {
  height: 8px;
  width: 8px;
  border-radius: 50%;
}
.province-type {
  height: 78px;
  background: #21393a;
  border: 1px solid #3c5347;
  margin: 18px 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border-radius: 6px;
}
.province-type .icon {
  width: 32px;
  height: 32px;
  color: #9db69e;
}
.province-type span {
  font-size: 14px;
  color: #b4c8ba;
}
.province-panel .btn-game {
  width: 100%;
  margin-top: 10px;
}
.map-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 15px;
  font-size: 12px;
  color: var(--muted);
}
.army-marker {
  pointer-events: none;
}
.army-marker circle {
  stroke-width: 1.5;
}
.army-marker text {
  font-size: 12px;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: #0c2427;
  font-weight: bold;
}
.movement-path {
  fill: none;
  stroke: #a6d4c0;
  stroke-width: 2;
  stroke-dasharray: 6 5;
  opacity: 0.7;
  pointer-events: none;
}
.operation-label {
  fill: #e8dfb8;
  font-size: 11px;
  font-weight: 600;
  paint-order: stroke;
  stroke: #10252c;
  stroke-width: 3px;
  pointer-events: none;
}
.radar-zone {
  fill: #9edcc0;
  fill-opacity: 0.04;
  stroke: #9edcc0;
  stroke-width: 1;
  stroke-dasharray: 4 8;
  stroke-opacity: 0.25;
  pointer-events: none;
}
.operation-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 8px;
  margin-top: 12px;
  padding: 8px;
  border: 1px solid #344f55;
  border-radius: 7px;
  background: #122830;
}
.operation-strip.empty { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; padding: 12px 14px; }
.operation-strip a, .operation-link { color: #e4d2a0; text-decoration: none; align-self: center; font-size: 12px; white-space: nowrap; }
.operation-item, .operation-card {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  border-radius: 5px;
  background: #193139;
  padding: 8px 10px;
}
.operation-item .icon { width: 17px; color: #a4d5bf; }
.operation-item div, .operation-card div { min-width: 0; display: grid; }
.operation-item strong, .operation-card strong { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operation-item small, .operation-card small { color: #91a8a7; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operation-item time, .operation-card time { margin-left: auto; color: #b9dfc9; font-size: 11px; white-space: nowrap; }
.force-list, .operation-list { border: 1px solid #354e53; border-radius: 6px; overflow: hidden; }
.force-list .small-copy, .operation-list .small-copy { padding: 0 12px; }
.force-row { display: flex; justify-content: space-between; gap: 8px; padding: 11px 12px; border-bottom: 1px solid #30474d; }
.force-row:last-child { border-bottom: 0; }
.force-row div { min-width: 0; display: grid; gap: 3px; }
.force-row strong { font-size: 13px; font-weight: 500; }
.force-row span { color: #92a9a8; font-size: 11px; }
.text-button { align-self: center; border: 0; background: none; color: #e2ce9a; font-size: 11px; }
.operation-list .operation-card { border-radius: 0; background: transparent; border-bottom: 1px solid #30474d; }
.operation-list .operation-card:last-child { border-bottom: 0; }
.operation-card.enemy time { color: #e0b38a; }
.intel-status { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #4d5a50; border-radius: 6px; overflow: hidden; margin: 18px 0 4px; }
.intel-status > div { padding: 10px; background: #203439; }
.intel-status > div + div { border-left: 1px solid #4d5a50; background: #1a2d33; }
.intel-status span { display: block; color: #91a9a9; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.intel-status strong { display: block; margin-top: 4px; font-size: 12px; color: #e5d2a0; }
.drone-card { margin-top: 18px; padding: 13px; border: 1px solid #765640; border-radius: 7px; background: #302a25; }
.drone-card h3 { margin: 7px 0 4px; font-size: 16px; }
.drone-path { stroke: #e4bf67; stroke-width: 2.4; stroke-dasharray: 10 8; fill: none; opacity: .85; animation: drone-dash 1.1s linear infinite; }
.drone-path.returning { stroke: #82d6c0; }
.drone-marker circle { fill: #172d37; stroke: #f1cb70; stroke-width: 2; }
.drone-marker.returning circle { stroke: #82d6c0; }
.drone-marker path { fill: #f5d47f; stroke: none; }
.drone-marker.returning path { fill: #9be1cf; transform: scaleX(-1); transform-origin: center; }
@keyframes drone-dash { to { stroke-dashoffset: -18; } }
.drone-card p { margin: 0; color: #c3b5a6; font-size: 12px; line-height: 1.45; }
.drone-card .btn-game { margin-top: 12px; }
dialog {
  max-width: 620px;
  width: calc(100% - 32px);
  max-height: 88vh;
  border: 1px solid #45606a;
  border-radius: 10px;
  background: #14252d;
  color: var(--ink);
  padding: 0;
  box-shadow: 0 30px 100px #0008;
}
dialog::backdrop {
  background: #071319b5;
  backdrop-filter: blur(3px);
}
.modal-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 21px 25px;
}
.modal-heading h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 500;
}
.modal-body-game {
  padding: 24px 25px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 18px 25px;
}
#toasts {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast-game {
  background: #223c38;
  border: 1px solid #648775;
  color: #e1ede5;
  border-radius: 7px;
  padding: 14px 20px;
  max-width: 370px;
  font-size: 14px;
  box-shadow: 0 10px 30px #0004;
}
.toast-game.error {
  background: #3a2729;
  border-color: #81554f;
}
.auth-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  background: #102128;
}
.auth-world {
  background:
    linear-gradient(180deg, #0c222655, #0b1b25bb),
    url("/assets/terrain.png") center/cover;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 54px;
  position: relative;
}
.auth-world:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 70%, #102128);
  pointer-events: none;
}
.auth-world .brand {
  margin: 0;
  position: relative;
  z-index: 1;
  font-size: 26px;
}
.auth-intro {
  max-width: 560px;
  position: relative;
  z-index: 1;
}
.auth-intro h1 {
  font-size: 48px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 15px 0 20px;
}
.auth-intro p {
  font-size: 17px;
  color: #bdcfcc;
  max-width: 400px;
}
.auth-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 45px;
}
.auth-form-inner {
  max-width: 380px;
  width: 100%;
}
.auth-form h2 {
  font-size: 28px;
  font-weight: 500;
  margin: 10px 0 12px;
}
.auth-form p {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 28px;
}
.auth-form .btn-game {
  width: 100%;
}
.auth-divider {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 22px 0;
  color: var(--muted);
  font-size: 12px;
}
.auth-divider:before,
.auth-divider:after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}
.auth-switch {
  background: none;
  border: 0;
  color: var(--green);
  font-size: 14px;
  padding: 0;
  margin-top: 18px;
}
.auth-site-link {
  display: block;
  margin-top: 22px;
  color: var(--green);
  font-size: 14px;
}
.admin-nav {
  display: flex;
  gap: 6px;
  overflow: auto;
  padding-bottom: 10px;
  margin-bottom: 18px;
}
.admin-nav button {
  font-size: 13px;
  white-space: nowrap;
  padding: 9px 13px;
  border: 1px solid var(--line);
  background: #14262d;
  color: var(--muted);
  border-radius: 5px;
}
.admin-nav button.active {
  background: #33433c;
  color: #e6d6ad;
  border-color: #6c7155;
}
.admin-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 18px;
}
.admin-tools input {
  max-width: 320px;
}
.code-editor {
  font-family: ui-monospace, SFMono-Regular, monospace !important;
  font-size: 13px !important;
  min-height: 230px !important;
}
.json-view {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font:
    13px/1.6 ui-monospace,
    monospace;
  color: #c2d5d7;
  max-height: 450px;
  overflow: auto;
}
.admin-table td {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.online-clock {
  font-variant-numeric: tabular-nums;
}
.task-progress {
  height: 8px;
  background: #32454b;
  overflow: hidden;
  border-radius: 4px;
  margin-top: 9px;
}
.task-progress span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.25s ease;
}
.task-progress + [data-progress-value] {
  display: block;
  margin-top: 6px;
}
.alert-count {
  background: #34473e;
  color: var(--accent);
  font-size: 11px;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: auto;
}
.mobile-brand {
  display: none;
}
@media (min-width: 1750px) {
  .world-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
  .catalogue-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1250px) {
  :root {
    --sidebar: 200px;
  }
  .resource {
    padding: 12px;
    gap: 8px;
  }
  .resource-icon {
    width: 32px;
    height: 35px;
  }
  .resource strong {
    font-size: 18px;
  }
  .content {
    padding: 24px;
  }
  .topbar {
    padding: 0 24px;
  }
  .world-layout {
    grid-template-columns: minmax(0, 1fr) 265px;
  }
  .province-panel {
    padding: 18px;
  }
  .catalogue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .topbar-right {
    gap: 12px;
  }
  .map-toolbar button {
    padding: 7px 8px;
  }
}
@media (max-width: 950px) {
  :root {
    --sidebar: 0px;
  }
  .sidebar {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
  }
  .sidebar > .brand,
  .nation-badge,
  .nav-group,
  .sidebar-bottom {
    display: none;
  }
  .sidebar nav {
    display: flex;
    overflow-x: auto;
    padding: 8px;
  }
  .nav-link-game {
    padding: 9px 12px;
    font-size: 13px;
  }
  .nav-link-game.active {
    box-shadow: none;
  }
  .main-shell {
    margin: 0;
  }
  .topbar {
    height: 62px;
  }
  .mobile-brand {
    display: inline;
    font-size: 17px;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-right: 18px;
  }
  .topbar-title {
    font-size: 13px;
  }
  .resource-bar {
    min-height: 80px;
  }
  .resource label {
    font-size: 10px;
  }
  .resource small {
    font-size: 11px;
  }
  .world-layout {
    height: 600px;
  }
  .grid.three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .auth-world {
    padding: 32px;
  }
  .auth-intro h1 {
    font-size: 38px;
  }
}
@media (max-width: 650px) {
  .topbar {
    padding: 0 16px;
  }
  .topbar-title {
    display: none;
  }
  .topbar-right {
    font-size: 12px;
  }
  .live-status {
    display: none;
  }
  .resource-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .resource {
    display: block;
    padding: 11px 7px;
    text-align: center;
  }
  .resource-icon {
    display: none;
  }
  .resource strong {
    font-size: 15px;
  }
  .resource label {
    font-size: 9px;
    letter-spacing: 0;
  }
  .resource small {
    font-size: 10px;
  }
  .content {
    padding: 20px 14px;
  }
  .page-heading {
    align-items: flex-start;
    margin-bottom: 18px;
  }
  .page-heading h1 {
    font-size: 24px;
  }
  .page-heading p {
    font-size: 14px;
  }
  .page-heading > .btn-game {
    padding: 8px;
    font-size: 12px;
  }
  .world-layout {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .map-stage {
    height: 410px;
  }
  .province-panel {
    border-left: 0;
    border-top: 1px solid var(--line);
    max-height: none;
  }
  .province-type {
    height: 55px;
    margin: 10px 0;
    padding: 10px;
  }
  .province-panel h2 {
    font-size: 20px;
  }
  .province-panel .country {
    margin: 8px 0 12px;
  }
  .map-toolbar {
    top: 10px;
    left: 10px;
  }
  .map-toolbar button {
    font-size: 11px;
    padding: 6px 8px;
  }
  .map-compass {
    right: 14px;
    top: 18px;
  }
  .map-legend {
    left: 10px;
    bottom: 10px;
    font-size: 11px;
    padding: 8px;
  }
  .map-scale {
    display: none;
  }
  .map-bottom {
    font-size: 11px;
    align-items: flex-start;
    gap: 12px;
  }
  .grid.two,
  .grid.three,
  .catalogue-grid {
    grid-template-columns: 1fr;
  }
  .grid.four {
    gap: 10px;
  }
  .grid.four .panel {
    padding: 14px;
  }
  .stat-value {
    font-size: 24px;
  }
  .panel {
    padding: 18px;
  }
  .auth-screen {
    display: block;
  }
  .auth-world {
    min-height: 260px;
    padding: 28px;
  }
  .auth-world .brand {
    font-size: 22px;
  }
  .auth-intro h1 {
    font-size: 30px;
    margin: 28px 0 10px;
  }
  .auth-intro p {
    font-size: 14px;
    margin-bottom: 0;
  }
  .auth-form {
    padding: 28px 24px;
  }
  .admin-tools {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-tools input {
    max-width: none;
  }
  .modal-body-game {
    padding: 20px;
  }
  .modal-heading,
  .modal-actions {
    padding: 17px 20px;
  }
  #toasts {
    right: 12px;
    left: 12px;
    bottom: 12px;
  }
  .toast-game {
    max-width: none;
  }
  .table-game td,
  .table-game th {
    padding: 10px;
  }
  .nav-link-game .icon {
    width: 17px;
    height: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.map-compass svg {
  width: 24px;
  height: 27px;
}
.map-zoom .icon {
  width: 18px;
  height: 18px;
}
.sidebar {
  overflow-y: auto;
}
.resource strong {
  white-space: normal;
  overflow-wrap:anywhere;
}
@media (max-width: 650px) {
  .resource strong {
    font-size: 14px;
  }
  .resource small {
    display: block;
    line-height: 1.4;
    margin-top: 5px;
  }
  .map-compass {
    top: 65px;
  }
  .map-stage {
    height: 430px;
  }
}

.admin-advanced {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.admin-advanced summary {
  color: var(--accent);
  cursor: pointer;
  font-size: 15px;
}

@media (max-width: 650px) {
  .resource:last-child strong {
    white-space: normal;
  }
  .map-toolbar {
    max-width: calc(100% - 20px);
    overflow-x: auto;
  }
  .map-toolbar button {
    white-space: nowrap;
    flex-shrink: 0;
  }
  .map-legend {
    max-width: calc(100% - 80px);
  }
  .map-zoom button {
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 360px) {
  .map-toolbar button {
    font-size: 10px;
    padding: 6px;
  }
  .topbar-right {
    gap: 6px;
  }
  .mobile-brand {
    font-size: 15px;
    margin-right: 8px;
  }
}

.panel,
.field,
.content {
  min-width: 0;
}
.table-wrap {
  max-width: 100%;
}
.admin-tools form {
  min-width: 0;
  flex: 1;
}
.admin-tools input {
  min-width: 0;
}
.admin-tools form button {
  flex-shrink: 0;
}
@media (max-width: 650px) {
  .flex-row-game {
    flex-wrap: wrap;
  }
  .admin-tools form {
    width: 100%;
  }
}
.army-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.tutorial-prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.tutorial-prompt > div {
  flex: 1;
  min-width: 0;
}
.tutorial-prompt strong,
.tutorial-prompt span {
  display: block;
}
.tutorial-prompt span {
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
}
.tutorial-step {
  display: flex;
  flex-direction: column;
}
.tutorial-step .army-actions {
  margin-top: auto;
}
@media (max-width: 480px) {
  .tutorial-prompt {
    gap: 7px;
    padding: 12px;
  }
  .tutorial-prompt .btn-game {
    padding: 8px;
    font-size: 12px;
  }
}

@media (min-width: 951px) {
  .sidebar nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .sidebar > .brand,
  .sidebar > .nation-badge,
  .sidebar-bottom {
    flex-shrink: 0;
  }
}
.kv > :first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.kv > :last-child {
  flex-shrink: 0;
  text-align: right;
}
@media (max-width: 650px) {
  .kv {
    align-items: flex-start;
  }
}

.workforce-toolbar,
.workforce-submit,
.workforce-actions,
.workforce-control {
  display: flex;
  gap: 14px;
}
.workforce-toolbar,
.workforce-submit {
  align-items: center;
  justify-content: space-between;
}
.workforce-toolbar > div:first-child,
.workforce-submit > span {
  min-width: 0;
}
.workforce-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.workforce-sector {
  display: flex;
  flex-direction: column;
}
.workforce-yield {
  color: var(--green);
  white-space: nowrap;
}
.workforce-control {
  flex-direction: column;
  margin: 14px 0;
}
.workforce-control label {
  color: var(--muted);
  font-size: 13px;
}
.workforce-control input[type="range"] {
  width: 100%;
  accent-color: var(--gold);
  cursor: pointer;
}
.workforce-control input[type="number"] {
  max-width: 180px;
  text-align: right;
}
.workforce-impact {
  gap: 12px;
  font-size: 13px;
}
.workforce-impact strong {
  overflow-wrap: anywhere;
}
.workforce-preview .grid > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.workforce-preview .grid > div > span,
.workforce-preview .grid > div > small {
  color: var(--muted);
  font-size: 12px;
}
.workforce-preview-error {
  border-color: var(--red);
}
.battle-report {
  display: grid;
  gap: 16px;
}
.battle-outcome,
.battle-side,
.battle-gain,
.battle-defenders {
  border: 1px solid #29434c;
  border-radius: 8px;
  padding: 16px;
  background: #10252d;
}
.battle-outcome.victory {
  border-color: #427b68;
}
.battle-outcome.defeat {
  border-color: #8b5f59;
}
.battle-outcome h2,
.battle-side h3,
.battle-defenders > h3,
.battle-gain h3 {
  margin: 5px 0 8px;
}
.battle-outcome > p {
  margin: 0;
}
.battle-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 15px 0 10px;
  background: #29434c;
  border: 1px solid #29434c;
}
.battle-summary > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  background: #0d2028;
}
.battle-summary span,
.battle-power small,
.battle-unit-table small,
.battle-loot-row small {
  color: var(--muted);
  font-size: 12px;
}
.battle-side-heading,
.battle-loot-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.battle-side-heading p {
  margin: 0;
}
.battle-power {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--accent);
  white-space: nowrap;
}
.battle-unit-table {
  overflow-x: auto;
  margin-top: 12px;
}
.battle-unit-table .table-game {
  min-width: 650px;
}
.battle-unit-table td:first-child small {
  display: block;
  margin-top: 3px;
}
.battle-loss {
  color: #dd9b8a;
}
.battle-details {
  margin-top: 12px;
}
.battle-details summary {
  cursor: pointer;
  color: var(--accent);
}
.battle-factor-list {
  margin-top: 8px;
}
.battle-defenders {
  display: grid;
  gap: 12px;
}
.battle-defenders .battle-side {
  padding: 13px;
  background: #0d2028;
}
.battle-loot-list {
  display: grid;
  gap: 1px;
  margin-top: 12px;
  border: 1px solid #29434c;
  background: #29434c;
}
.battle-loot-row {
  padding: 10px;
  background: #0d2028;
}
.battle-loot-row small {
  display: block;
  line-height: 1.5;
  margin-top: 4px;
}
.battle-loot-row > strong {
  color: var(--green);
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 780px) {
  .workforce-toolbar,
  .workforce-submit {
    align-items: flex-start;
    flex-direction: column;
  }
  .workforce-actions {
    justify-content: flex-start;
  }
  .battle-summary {
    grid-template-columns: 1fr;
  }
  .battle-side-heading,
  .battle-loot-row {
    flex-direction: column;
  }
  .battle-power,
  .battle-loot-row > strong {
    align-items: flex-start;
    text-align: left;
  }
}