/* The GL side reads its colours off these custom properties at init, so a legend built from the same
   properties cannot drift from what the viewer actually paints. Override them on the canvas element to
   retheme one instance. */
:root {
  --bg: #0b0f14; --panel: #121820cc; --line: #1e2a36; --text: #d7e2ee; --dim: #7f8fa1;
  --allies: #4a9eff; --axis: #ff6a53; --neutral: #9aa7b4; --accent: #64e1a5;
  --role-respawn: #64e1a5; --role-capture: #ffc857; --role-battlearea: #7a86ff;
  --role-killeffects: #ff5c8a; --role-rearm: #4ad6e0; --role-waypoint: #c9a0ff;
  --role-runway: #e6ecf2; --role-spectator: #8fa1b3;
  --route: #8fd4ff; --link: #7f8fa1;
}

/* The canvas is one half of a split layout, so everything sizes to this box and never to the window. */
.mv-view { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
.mv-canvas { display: block; width: 100%; height: 100%; background: var(--bg); touch-action: none; cursor: crosshair; }
.mv-canvas:active { cursor: grabbing; }
.mv-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  color: var(--text); font: 12px/1.3 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; }

/* Self-sufficient rather than inheriting from .mv-labels: the overlay element is the caller's, and it does
   not have to be the one styled above. */
.mv-tag { position: absolute; top: 0; left: 0; white-space: nowrap; text-align: center;
  color: var(--text); font: 12px/1.3 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  text-shadow: 0 1px 3px #000, 0 0 8px #000; will-change: transform; }
.mv-tag .mv-name { display: block; font-weight: 600; font-size: 12px; }
.mv-tag .mv-sub { display: block; font-size: 10px; color: var(--dim); font-variant-numeric: tabular-nums; }
.mv-tag.mv-sel .mv-name { color: var(--accent); }
.mv-tag.mv-far { opacity: .45; }

.mv-fatal { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center;
  background: var(--bg); color: var(--text); font: 13px/1.5 ui-sans-serif, system-ui, sans-serif; }

/* Legend: markup is the caller's, the colours are the viewer's. */
.mv-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 10px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 6px; font-size: 11px; color: var(--dim); }
.mv-legend > * { display: flex; align-items: center; gap: 5px; }
.mv-swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; background: var(--neutral); }
.mv-swatch[data-role="Respawn"] { background: var(--role-respawn); }
.mv-swatch[data-role="Capture"] { background: var(--role-capture); }
.mv-swatch[data-role="BattleArea"] { background: var(--role-battlearea); }
.mv-swatch[data-role="KillEffects"] { background: var(--role-killeffects); }
.mv-swatch[data-role="Rearm"] { background: var(--role-rearm); }
.mv-swatch[data-role="Waypoint"] { background: var(--role-waypoint); }
.mv-swatch[data-role="Runway"] { background: var(--role-runway); }
.mv-swatch[data-role="Spectator"] { background: var(--role-spectator); }
.mv-swatch[data-army="1"] { background: var(--allies); }
.mv-swatch[data-army="2"] { background: var(--axis); }
.mv-swatch[data-kind="route"] { background: var(--route); }
.mv-swatch[data-kind="link"] { background: var(--link); }