/* The Imfect group list (groups.js), in the game's colours. Scoped to .imfect-groups. */
.imfect-groups {
  --ig-panel: rgba(255,255,255,0.94); --ig-ink: #1d2b33; --ig-muted: #5b6b73; --ig-line: #d5dde0;
  --ig-immunity: #2f6fd6; --ig-agens: #8a3fc2; --ig-go: #1f9d6b;
  --ig-free: #1f9d6b; --ig-waiting: #c98a12; --ig-playing: #7a8790; --ig-down: #b3261e;
  color: var(--ig-ink);
  font-size: 1em; line-height: 1.4; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.imfect-groups * { box-sizing: border-box; }
.imfect-groups .ig-group { background: var(--ig-panel); border-radius: 0.7em; padding: 0.6em 0.8em; margin: 0 0 0.5em;
  box-shadow: 0 0.2em 0.7em rgba(0,0,0,0.15); display: grid; gap: 0.4em; grid-template-columns: 1fr auto; align-items: center; }
.imfect-groups .ig-title { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }
.imfect-groups .ig-title h2 { margin: 0; font-size: 1.2em; }
.imfect-groups .ig-badge { font-size: 0.8em; font-weight: 600; padding: 0.1em 0.5em; border-radius: 999px; color: #fff; }
.imfect-groups .ig-badge.free { background: var(--ig-free); }
.imfect-groups .ig-badge.waiting { background: var(--ig-waiting); }
.imfect-groups .ig-badge.playing, .imfect-groups .ig-badge.finished,
.imfect-groups .ig-badge.starting { background: var(--ig-playing); }
.imfect-groups .ig-badge.down { background: var(--ig-down); }
.imfect-groups .ig-teams { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }
.imfect-groups .ig-team { border-top: 0.15em solid; padding-top: 0.25em; min-width: 0; }
.imfect-groups .ig-team.immunity { border-color: var(--ig-immunity); }
.imfect-groups .ig-team.agens { border-color: var(--ig-agens); }
.imfect-groups .ig-team h3 { margin: 0 0 0.1em; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.05em; }
.imfect-groups .ig-team.immunity h3 { color: var(--ig-immunity); }
.imfect-groups .ig-team.agens h3 { color: var(--ig-agens); }
.imfect-groups .ig-team ul { list-style: none; margin: 0; padding: 0; overflow-wrap: anywhere; }
.imfect-groups .ig-empty { color: var(--ig-muted); font-style: italic; }
.imfect-groups .ig-join { grid-row: 1; grid-column: 2; font: inherit; font-weight: 600; padding: 0.4em 0.9em; border: 0;
  border-radius: 0.5em; background: var(--ig-go); color: #fff; cursor: pointer; text-decoration: none; white-space: nowrap; }
.imfect-groups .ig-join:hover { filter: brightness(1.08); }
.imfect-groups .ig-join:disabled, .imfect-groups .ig-join[aria-disabled="true"] {
  background: var(--ig-line); color: var(--ig-muted); cursor: default; pointer-events: none; }
.imfect-groups .ig-note { grid-column: 1 / -1; margin: 0; color: var(--ig-muted); font-size: 0.9em; }
.imfect-groups .ig-message { background: #fff7df; border-left: 0.25em solid var(--ig-waiting); border-radius: 0.5em;
  padding: 0.5em 0.7em; margin: 0 0 0.5em; }
.imfect-groups .ig-message[hidden] { display: none; }
.imfect-groups .ig-line { text-align: center; font-size: 0.85em; margin: 0.3em 0 0; opacity: 0.85; }
.imfect-groups .ig-empty-state { background: var(--ig-panel); border-radius: 0.7em; padding: 0.9em; text-align: center; }