/* INVADERS ARENA: green and magenta on deep violet while you are in its lobby or a round, plus the rule chips under
   the lobby. Shell styles live in platform/platform.css; this only overrides its variables. */
body[data-theme="invaders"] {
  --bg: #03020f;
  --accent: #5dff6a;
  --accent-hi: #d8ffd2;
  --accent-lo: #1f8a2a;
  --accent-ink: #032b08;
  --accent2: #ff4fd8;
  --cyan: #ff4fd8;
  --glow-a: rgba(93, 255, 106, 0.6);
  --glow-a2: rgba(40, 200, 90, 0.4);
  --glow-b: rgba(255, 79, 216, 0.6);
  --glow-b2: rgba(200, 60, 255, 0.4);
  --border: #7a3fc9;
  --panel: rgba(10, 4, 32, 0.86);
  --card: rgba(8, 3, 26, 0.6);
}
body[data-theme="invaders"] h2 { color: var(--accent); text-shadow: 0 0 8px var(--accent); }
body[data-theme="invaders"] .card { border-color: rgba(122, 63, 201, 0.6); }
.rules { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 14px 0 0; }
.rules li { --c: #fff; flex: 1 1 120px; max-width: 170px; padding: 9px 8px; border: 2px solid var(--c); background: rgba(0, 0, 0, 0.35); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 50%, transparent), inset 0 0 20px color-mix(in srgb, var(--c) 20%, transparent); text-align: center; }
.rules li b { display: block; font-size: 9px; color: var(--c); text-shadow: 0 0 8px var(--c); margin-bottom: 6px; }
.rules li span { font-size: 7px; line-height: 1.6; color: #cfd4f5; }
@media (max-width: 700px) { .rules li { flex-basis: 45%; } }