/* SILENT AREA — homepage hierarchy and faction preview refinement */
:root {
  --bg-deep: #030806;
  --bg-primary: #07100d;
  --bg-panel: #0b1713;
  --bg-panel-hover: #10221b;
  --bg-surface: #0d1c18;
  --bg-active: #142920;
  --text-primary: #e7ece8;
  --text-secondary: #91a59a;
  --text-dim: #667970;
  --accent-tactical: #68c99b;
  --accent-amber: #d6a34a;
  --border-subtle: rgba(128, 164, 145, 0.22);
  --border-active: rgba(104, 201, 155, 0.72);
  --status-danger: #8d3438;

  /* Backward-compatible aliases used by the existing components. */
  --text-info: var(--accent-tactical);
  --text-warning: var(--accent-amber);
  --text-alert: var(--status-danger);
  --text-secure: #82c89b;
  --line: var(--border-subtle);
}

body {
  background:
    radial-gradient(circle at 75% 12%, rgba(33, 78, 60, 0.13), transparent 32rem),
    linear-gradient(180deg, var(--bg-deep), var(--bg-primary));
}

.tac-panel,
.command-card,
.unit-card {
  border-color: var(--border-subtle);
  box-shadow: none;
}

.tac-button,
.console-btn,
.faction-btn,
.type-tab {
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 120ms ease;
}

.tac-button:hover:not(:disabled),
.console-btn:hover:not(:disabled),
.faction-btn:hover:not(:disabled),
.type-tab:hover:not(:disabled) {
  border-color: var(--border-active);
}

.tac-button:active:not(:disabled),
.console-btn:active:not(:disabled),
.faction-btn:active:not(:disabled),
.type-tab:active:not(:disabled) { transform: translateY(1px); }

.tac-button:focus-visible,
.console-btn:focus-visible,
.faction-btn:focus-visible,
.type-tab:focus-visible,
.situation-marker:focus-visible,
.development-stages:focus-visible {
  outline: 2px solid var(--accent-amber);
  outline-offset: 3px;
}

button:disabled { cursor: not-allowed; opacity: 0.42; }

.tac-button.primary {
  color: #171105;
  border-color: var(--accent-amber);
  background: var(--accent-amber);
  text-shadow: none;
  box-shadow: 0 0 18px rgba(214, 163, 74, 0.16);
}

.tac-button.primary:hover { background: #e2b55f; }

/* Header: useful project information replaces fictional telemetry. */
.sys-status { align-items: center; gap: 12px; }
.sys-flags { display: grid; grid-template-columns: repeat(3, max-content); gap: 4px 12px; }
.sys-flags b { color: var(--text-primary); }
.sys-flags span { color: var(--text-secondary); }

.header-right { gap: 16px; }
.development-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 1px;
  color: var(--text-primary);
  text-decoration: none;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
}
.development-stages > span { padding: 7px 10px; background: var(--bg-panel); }
.development-stages b { display: block; font-size: 11px; font-weight: 650; }
.development-stages small { display: block; margin-top: 2px; color: var(--text-secondary); font-size: 8px; }
.development-stages:hover > span { background: var(--bg-panel-hover); }

.development-status { display: flex; align-items: center; gap: 8px; color: var(--accent-amber); }
.development-status > i {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 10px rgba(214, 163, 74, 0.45);
}
.development-status b, .development-status small { display: block; }
.development-status b { font-size: 9px; }
.development-status small { margin-top: 2px; color: var(--text-secondary); font: 11px/1.2 system-ui, sans-serif; }

/* Hero: title and game proposition remain the visual focus. */
.hero { min-height: auto; padding-top: clamp(82px, 9vh, 116px); }
.hero-main { align-items: start; }
.hero-copy { max-width: 700px; }
.signal-word { opacity: 0.32; }
.hero-tagline { color: var(--accent-tactical); }
.lead { max-width: 65ch; color: var(--text-secondary); line-height: 1.78; }

.mission-terminal { display: grid; gap: 0; font-family: inherit; }
.mission-terminal p { display: grid; gap: 3px; padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); }
.mission-terminal p:last-child { border-bottom: 0; }
.mission-terminal small { color: var(--text-dim); font-size: 9px; letter-spacing: 0.08em; }
.mission-terminal b { color: var(--text-primary); font-size: 13px; font-weight: 560; }

.hero-tags span { display: inline-flex; align-items: center; gap: 7px; font-family: inherit; }
.hero-tags span i { width: 16px; color: var(--accent-tactical); font-style: normal; text-align: center; }
.hero-tags span:hover { box-shadow: none; }

.situation-card { overflow: visible; }
.situation-card .panel-titlebar { min-height: 52px; }
.situation-card .panel-titlebar > span:first-child { display: grid; gap: 2px; }
.situation-card .panel-titlebar b { color: var(--text-primary); font-size: 14px; }
.situation-card .panel-titlebar small,
.preview-label { color: var(--text-secondary); font-size: 9px; }

.tactical-situation {
  position: relative;
  min-height: 300px;
  overflow: visible;
  border-bottom: 1px solid var(--border-subtle);
  background:
    linear-gradient(rgba(104,201,155,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104,201,155,.055) 1px, transparent 1px),
    radial-gradient(circle at 55% 45%, rgba(38, 92, 67, .22), transparent 52%),
    #07110e;
  background-size: 32px 32px, 32px 32px, auto, auto;
}
.tactical-situation::before,
.tactical-situation::after { opacity: 0.28; }
.terrain-lines {
  position: absolute; inset: 12% 8%; opacity: .34;
  background: repeating-radial-gradient(ellipse at 35% 55%, transparent 0 22px, rgba(137,166,151,.24) 23px 24px, transparent 25px 42px);
  transform: rotate(-8deg);
}
.objective-zone {
  position: absolute; left: 59%; top: 29%; width: 24%; height: 34%;
  border: 1px dashed var(--accent-amber); background: rgba(214,163,74,.07);
}
.objective-zone span { position: absolute; right: 5px; top: 4px; color: var(--accent-amber); font: 9px/1 monospace; }
.jam-zone {
  position: absolute; left: 21%; top: 24%; width: 25%; aspect-ratio: 1; border-radius: 50%;
  border: 1px dashed rgba(141,52,56,.85); background: repeating-radial-gradient(circle, rgba(141,52,56,.08) 0 6px, transparent 7px 13px);
}
.supply-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.supply-route path { fill: none; stroke: var(--accent-amber); stroke-width: 1.1; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; opacity: .76; }
.situation-marker {
  position: absolute; z-index: 3; width: 17px; height: 17px; padding: 0;
  border: 2px solid currentColor; background: var(--bg-deep); color: var(--accent-tactical); cursor: help;
}
.situation-marker::after,
.objective-zone::after,
.jam-zone::after {
  content: attr(data-tip); position: absolute; z-index: 10; left: 50%; bottom: calc(100% + 10px);
  width: max-content; max-width: 230px; padding: 7px 9px; border: 1px solid var(--border-active);
  background: #07100df2; color: var(--text-primary); font: 11px/1.45 system-ui, sans-serif;
  opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity 140ms ease, transform 140ms ease;
}
.situation-marker:hover::after,
.situation-marker:focus-visible::after,
.objective-zone:hover::after,
.jam-zone:hover::after { opacity: 1; transform: translate(-50%, 0); }
.situation-marker.friendly { transform: rotate(45deg); }
.situation-marker.friendly::after { transform: translate(-50%, 4px) rotate(-45deg); }
.situation-marker.friendly:hover::after,
.situation-marker.friendly:focus-visible::after { transform: translate(-50%, 0) rotate(-45deg); }
.situation-marker.enemy { color: #a34a4e; border-radius: 50%; }
.situation-marker.unknown { color: var(--accent-amber); border-style: dashed; border-radius: 50%; }
.situation-marker.m1 { left: 15%; top: 69%; }
.situation-marker.m2 { left: 48%; top: 56%; }
.situation-marker.m3 { left: 72%; top: 38%; }
.situation-marker.m4 { left: 38%; top: 25%; }
.situation-note { position: absolute; left: 14px; bottom: 10px; margin: 0; color: var(--text-secondary); font-size: 11px; }

.situation-legend {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px 12px; margin: 0; padding: 12px 16px;
  list-style: none; color: var(--text-secondary); font-size: 10px; border-bottom: 1px solid var(--border-subtle);
}
.situation-legend li { display: flex; align-items: center; gap: 7px; }
.situation-legend i { width: 10px; height: 10px; border: 1px solid currentColor; }
.legend-friendly { color: var(--accent-tactical); transform: rotate(45deg); }
.legend-enemy { color: #a34a4e; border-radius: 50%; }
.legend-unknown { color: var(--accent-amber); border-radius: 50%; border-style: dashed !important; }
.legend-jam { color: #8d3438; border-style: dashed !important; }
.legend-route { height: 1px !important; color: var(--accent-amber); border-width: 1px 0 0 !important; border-style: dashed !important; }
.legend-objective { color: var(--accent-amber); }

.system-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.system-grid article { min-width: 0; padding: 12px; border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.system-grid article:nth-child(3n) { border-right: 0; }
.system-grid small, .system-grid b { display: block; }
.system-grid small { color: var(--accent-tactical); font-size: 9px; }
.system-grid b { margin-top: 3px; color: var(--text-primary); font-size: 12px; }
.system-grid p { margin: 4px 0 0; color: var(--text-secondary); font-size: 10px; line-height: 1.4; }

.mechanics-ticker { overflow: hidden; }
.mechanics-track {
  display: flex; width: max-content; animation: mechanics-scroll 70s linear infinite;
  color: var(--text-secondary); font-size: 12px;
}
.mechanics-track span { padding: 10px 36px; white-space: nowrap; }
.mechanics-track span::before { content: "◆"; margin-right: 10px; color: var(--accent-tactical); }
.mechanics-ticker:hover .mechanics-track { animation-play-state: paused; }
@keyframes mechanics-scroll { to { transform: translateX(-50%); } }

/* Faction preview uses one layout and switches only four variables. */
.units-section {
  --faction-accent: #763038;
  --faction-accent-muted: rgba(118, 48, 56, .26);
  --faction-surface: rgba(92, 31, 36, .12);
  --faction-border: rgba(139, 48, 56, .68);
}
.units-section.faction-usa {
  --faction-accent: #27577a;
  --faction-accent-muted: rgba(39, 87, 122, .27);
  --faction-surface: rgba(23, 50, 77, .14);
  --faction-border: rgba(58, 105, 139, .68);
}
.units-section.faction-russia {
  --faction-accent: #32684e;
  --faction-accent-muted: rgba(50, 104, 78, .26);
  --faction-surface: rgba(31, 70, 53, .14);
  --faction-border: rgba(65, 122, 92, .7);
}
.units-section { background-color: transparent; }
.units-panel { background: linear-gradient(135deg, var(--faction-surface), transparent 28%), var(--bg-panel); }
.units-section .unit-heading h2,
.units-section .unit-card .uc-name { color: var(--text-primary); }
.units-section .faction-btn.is-active,
.units-section .type-tab.is-active,
.units-section .unit-card:hover { border-color: var(--faction-border); background: var(--faction-surface); }
.units-section .faction-btn.is-active .emblem,
.units-section .type-tab.is-active svg,
.units-section .unit-card svg { color: var(--faction-accent); stroke: var(--faction-accent) !important; }
.unit-image-wrap { display: grid; place-items: center; min-height: 138px; padding: 12px; background: rgba(0,0,0,.16); border-bottom: 1px solid var(--border-subtle); }
.unit-image { width: 100%; height: 126px; object-fit: contain; object-position: center; }
.unit-silhouette { width: min(82%, 210px); height: 112px; color: var(--faction-accent); opacity: .72; }
.unit-card .uc-body { display: grid; gap: 5px; padding: 13px; text-align: left; }
.unit-card .uc-code { color: var(--text-secondary); }
.unit-card .uc-desc { margin: 0; color: var(--text-secondary); font: 11px/1.5 system-ui, sans-serif; }
.unit-card::after { display: none; }
.unit-card:hover .uc-bars { max-height: 0; }

.archive-notice { grid-column: 1 / -1; padding: 14px 16px; border: 1px solid var(--faction-border); background: var(--faction-surface); }
.archive-notice b, .archive-notice span { display: block; }
.archive-notice b { color: var(--text-primary); font-weight: 560; }
.archive-notice span { margin-top: 5px; color: var(--text-secondary); font-size: 10px; }
.archive-card { cursor: default; }
.archive-card .unit-image-wrap { position: relative; overflow: hidden; }
.archive-card .unit-silhouette { filter: blur(5px); opacity: .32; }
.archive-card .redaction { position: absolute; inset: 25% 12%; background: repeating-linear-gradient(0deg, #050a08 0 7px, #14271e 8px 11px); opacity: .82; }
.archive-card .uc-name { letter-spacing: .16em; }

.ud-image { width: 100%; height: min(34vh, 280px); object-fit: contain; object-position: center; }
.ud-fallback { width: min(80%, 360px); height: 220px; color: var(--faction-accent); }
.ud-right { align-content: start; }

@media (max-width: 1280px) {
  .development-stages { display: none; }
  .sys-flags { grid-template-columns: repeat(2, max-content); }
  .sys-flags span:last-child { display: none; }
}

@media (max-width: 767px) {
  .sys-status, .header-right { display: none; }
  .hero { padding-top: 82px; overflow-x: clip; }
  .hero-main { gap: 28px; }
  .mission-terminal b { font-size: 12px; }
  .hero-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-tags span { min-width: 0; font-size: 11px; }
  .situation-card { min-width: 0; padding: 0 0 12px; }
  .tactical-situation { width: 100%; min-height: 260px; margin: 0; overflow: hidden; border-radius: 0; }
  .situation-marker::after, .objective-zone::after, .jam-zone::after { display: none; }
  .situation-legend { grid-template-columns: repeat(2, 1fr); }
  .system-grid { grid-template-columns: repeat(2, 1fr); }
  .system-grid article:nth-child(3n) { border-right: 1px solid var(--border-subtle); }
  .system-grid article:nth-child(2n) { border-right: 0; }
  .mechanics-track { width: auto; animation: none; }
  .mechanics-track span { display: none; white-space: normal; }
  .mechanics-track span:first-child { display: block; padding: 11px 16px; }
  .faction-switch { width: 100%; grid-template-columns: repeat(3, 1fr); }
  .faction-btn { min-width: 0; }
  .unit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unit-image-wrap { min-height: 108px; }
  .unit-image, .unit-silhouette { height: 92px; }

  /* The existing globe canvas sizes itself in pixels. Constrain its flex
     children so it cannot widen the document on narrow screens. */
  .campaign-globe-section,
  .theater-panel,
  .theater-layout,
  .theater-drawers,
  .globe-panel,
  .globe-stage,
  .intel-panel,
  .intel-body,
  .theater-console {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .campaign-globe-section,
  .theater-panel,
  .globe-panel,
  .globe-stage { overflow: hidden; }
  .globe-canvas { max-width: 100% !important; }
  .theater-drawers { width: 100% !important; overflow-x: auto; }
  .intel-row { grid-template-columns: minmax(88px, auto) minmax(0, 1fr); }
  .intel-row b, .intel-sitrep p, .intel-units { min-width: 0; overflow-wrap: anywhere; }
  .footer-ticker { max-width: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
  .mechanics-track { width: auto; animation: none; }
  .mechanics-track span { display: none; white-space: normal; }
  .mechanics-track span:first-child { display: block; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}