/* Shared chrome for every Orbital screen. */
:root {
  --bg: #0a0710;
  --panel: #17101f;
  --line: #2e2340;
  --text: #e9e0f2;
  --dim: #9a8bb0;
  --a: #6ec8ff;          /* player A */
  --b: #ffab5e;          /* player B */
  --kill: #ff6b81;
  --ok: #7ee0a8;
  --warn: #ffd166;
  --dock: #c9a9ff;
  --slide: 260ms;
  --death: 420ms;
}
* { box-sizing: border-box; }
/* Several rules below set `display`, which outranks the user-agent's `[hidden]` rule and
   would leave hidden elements on screen. Anything toggled with `el.hidden` needs this. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex; flex-direction: column; min-height: 100vh; align-items: center;
}
a { color: var(--a); }
header { padding: 18px 16px 6px; text-align: center; }
h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
header .sub { color: var(--dim); font-size: 12px; margin-top: 4px; }

svg { width: 100%; height: auto; display: block; }
.hex-tile, .body, .ship, .pips {
  transition: transform var(--slide) cubic-bezier(.33,.02,.28,1), opacity 320ms linear;
}
.ring { fill: none; stroke: #43335c; stroke-width: 1; opacity: .55; }

/* Destruction: flare red, char, then fade. Scaled with playback speed. */
.ship.dying { animation: die var(--death) ease-in forwards; }
@keyframes die {
  0%   { filter: none;                                                    opacity: 1; }
  28%  { filter: brightness(2.4) sepia(1) saturate(9) hue-rotate(-38deg); opacity: 1; }
  62%  { filter: brightness(.35) sepia(1) saturate(6) hue-rotate(-38deg); opacity: .85; }
  100% { filter: brightness(.1);                                          opacity: 0; }
}
.ship.gone { opacity: 0; }

.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 14px;
}
button {
  background: #241a31; color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 12px; cursor: pointer; font: inherit;
}
button:hover:not(:disabled) { background: #2f2240; }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: #33254a; border-color: #4a3a68; }
label { color: var(--dim); font-size: 12px; display: flex; align-items: center; gap: 6px; }
input[type=range] { accent-color: var(--a); }
.mv { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ev { color: var(--kill); font-weight: 600; }
.side-a { color: var(--a); font-weight: 600; }
.side-b { color: var(--b); font-weight: 600; }
.dim { color: var(--dim); }
.dead { opacity: .3; text-decoration: line-through; }