/* Theme tokens and shared pieces, used by the map and by the admin page. */
:root {
  --bg: #05070d;        /* space / page background */
  --panel: #0b111c;     /* panels, bars */
  --panel-2: #111a29;   /* raised surfaces, inputs */
  --line: #1c2a3d;      /* borders, dividers */
  --text: #d7e3f4;      /* primary text */
  --muted: #7c8ba1;     /* secondary text */
  --accent: #2de2e6;    /* UI accent, atmosphere glow */
  --active: #ff3b4e;    /* confirmed, ongoing attack */
  --claimed: #ffb020;   /* unverified attacker claim */
  --resolved: #7c8ba1;  /* resolved, fading out */
  --ok: #3ddc97;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--accent); }
.hide { display: none !important; }
.sp { flex: 1; }

.logo { letter-spacing: .22em; font-weight: 700; color: var(--accent); font-family: var(--mono); text-decoration: none; }
.logo::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--active); margin-right: 10px; animation: pulse 1.6s infinite; }

.chip { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font: 12px var(--mono); text-decoration: none; color: var(--text); }
.chip.on { border-color: var(--accent); color: var(--accent); }

.badge { display: inline-block; font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; border: 1px solid currentColor; margin-right: 6px; }
.badge.active { color: var(--active); } .badge.claimed { color: var(--claimed); } .badge.resolved { color: var(--resolved); }
.badge.ok { color: var(--ok); } .badge.error { color: var(--active); } .badge.off { color: var(--muted); }

@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 78, .7); } 100% { box-shadow: 0 0 0 10px rgba(255, 59, 78, 0); } }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01s !important; transition-duration: .01s !important; } }