/* ALIEN ARENA: acid green and warning amber on hull black while you are in its lobby or a round. Shell styles live
   in platform/platform.css and the rule chips under the lobby (.rules) in invaders/style.css; this overrides the
   variables, tints the chips and styles the loadout picker, plus the arena's own two canvases (the deck in WebGL and
   the HUD over it), which sit over the shared #game canvas while the arena is open. */
body[data-theme="alien"] {
  --bg: #04060a;
  --accent: #7dff8a;
  --accent-hi: #d8ffde;
  --accent-lo: #1f7a33;
  --accent-ink: #03200a;
  --accent2: #ffb02e;
  --cyan: #ffb02e;
  --glow-a: rgba(125, 255, 138, 0.55);
  --glow-a2: rgba(60, 200, 100, 0.35);
  --glow-b: rgba(255, 176, 46, 0.55);
  --glow-b2: rgba(200, 120, 30, 0.35);
  --border: #2f6a3c;
  --panel: rgba(6, 12, 10, 0.9);
  --card: rgba(5, 10, 8, 0.66);
}
body[data-theme="alien"] h2 { color: var(--accent); text-shadow: 0 0 8px var(--accent); }
body[data-theme="alien"] .card { border-color: rgba(47, 106, 60, 0.7); }
body[data-theme="alien"] .rules li { background: rgba(6, 14, 10, 0.6); }
#alienGl, #alienHud { position: fixed; left: 0; top: 0; display: none; z-index: 1; }
#alienHud { touch-action: none; cursor: crosshair; }
#alienGl { image-rendering: pixelated; image-rendering: crisp-edges; background: #04060a; }
/* the loadout picker in the lobby */
#alienLobby { margin: 14px 0 0; text-align: left; }
.loHead { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.loMode { --c: #fff; font-size: 9px; color: #cfd4f5; line-height: 1.8; }
.loMode b { color: var(--c); text-shadow: 0 0 8px var(--c); font-size: 11px; }
.loMode i { display: block; font-style: normal; font-size: 7px; color: #aab2de; }
.loRank { font-size: 9px; color: #cfd4f5; line-height: 1.8; min-width: 220px; }
.loRank b { color: #ffe14d; }
.loRank em { display: block; font-style: normal; font-size: 7px; color: #aab2de; }
.xpBar { display: block; height: 6px; background: #0a1a10; border: 1px solid #2f6a3c; margin-top: 4px; }
.xpBar span { display: block; height: 100%; background: linear-gradient(90deg, #7dff8a, #ffe14d); box-shadow: 0 0 8px #7dff8a; }
.loRow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin: 6px 0; }
.loRow > b { flex: 0 0 76px; font-size: 8px; color: #aab2de; align-self: center; }
button.lo { --c: #cfd4f5; flex: 1 1 110px; max-width: 170px; padding: 7px 6px; font-family: inherit; font-size: 8px; color: var(--c); background: rgba(0, 0, 0, 0.4); border: 2px solid color-mix(in srgb, var(--c) 45%, transparent); cursor: pointer; text-align: center; line-height: 1.5; }
button.lo i { display: block; font-style: normal; font-size: 6px; color: #8a93b8; margin-top: 3px; }
button.lo.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, rgba(0, 0, 0, 0.5)); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 55%, transparent); color: #fff; }
button.lo.locked { opacity: 0.45; cursor: default; }
button.lo:not(.locked):hover, button.lo.gpfocus { border-color: var(--c); color: #fff; }
@media (max-width: 820px), (pointer: coarse) {
  .loRow > b { flex-basis: 100%; font-size: 9px !important; }
  button.lo { font-size: 9px !important; flex-basis: 45%; }
  button.lo i, .loMode i, .loRank em { font-size: 8px !important; }
}