/* Thème « console » : barre du haut sombre, barre latérale, cartes bordées, accent vert.
   Chargé après pico.min.css et avant app.css (les styles des fonctionnalités restent dans app.css).
   Deux variantes pilotées par data-theme sur <html> (light / dark) : toutes les couleurs passent par
   des variables --ga-* définies ci-dessous, puis redéfinies dans le bloc [data-theme=dark]. */
:root, [data-theme=light] {
  color-scheme: light;
  --ga-bg: #ffffff;
  --ga-surface: #ffffff;
  --ga-panel: #f8f8f8;
  --ga-head: #f8f8f8;
  --ga-line: #e3e3e3;
  --ga-line-soft: #ececec;
  --ga-rule: #d9d9d9;
  --ga-ink: #1f1f1f;
  --ga-text: #2a2a2a;
  --ga-lead: #3a3a3a;
  --ga-muted: #6b6b6b;
  --ga-icon: #6b6b6b;
  --ga-card-icon: #4a4a4a;
  --ga-code: #f3f3f3;
  --ga-row-hover: #fbfbfb;
  --ga-logs-bg: #fbfbfb;

  --ga-side-link: #555555;
  --ga-side-hover: #efefef;
  --ga-side-active: #e9e9e9;

  --ga-accent: #2dbe60;
  --ga-accent-text: #1d8a44;
  --ga-accent-hover: #146a33;
  --ga-accent-soft: #e4f6e9;
  --ga-accent-soft-border: #9fd8b1;
  --ga-accent-soft-text: #1d6b38;
  --ga-accent-focus: rgba(45, 190, 96, .25);

  --ga-pill-bg: #f1f1f1;
  --ga-pill-text: #555555;
  --ga-pill-dot: #9a9a9a;
  --ga-info-bg: #e7f0fb;
  --ga-info-text: #1558a6;

  --ga-warn-bg: #fff8e6;
  --ga-warn-border: #f3dc9a;
  --ga-warn-text: #6b4e00;
  --ga-warn-dot: #e0a100;

  --ga-danger: #c62828;
  --ga-danger-bg: #fdecec;
  --ga-danger-border: #f2b8b8;
  --ga-danger-text: #8f1b1b;
  --ga-danger-hover: #a01e1e;

  --ga-btn-border: #cfcfcf;
  --ga-btn-text: #333333;
  --ga-btn-hover-bg: #f4f4f4;
  --ga-btn-hover-border: #a8a8a8;

  --ga-topbar: #1c1c1c;
  --ga-top-border: #333333;
  --ga-top-text: #c9c9c9;
  --ga-top-muted: #a3a3a3;
  --ga-top-sep: #666666;
  --ga-top-btn-border: #4a4a4a;
  --ga-top-btn-text: #d6d6d6;
  --ga-top-btn-hover-border: #8a8a8a;

  --ga-input-bg: #ffffff;
  --ga-input-border: #cfcfcf;
  --ga-input-text: var(--ga-ink);
  --ga-input-selected: #ececec;

  --pico-font-family-sans-serif: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --pico-font-family-monospace: ui-monospace, Menlo, Consolas, monospace;
  --pico-font-size: 14px;
  --pico-line-height: 1.5;
  --pico-border-radius: 4px;
  --pico-spacing: 1rem;
  --pico-typography-spacing-vertical: .9rem;
  --pico-block-spacing-vertical: 1rem;
  --pico-block-spacing-horizontal: 1.125rem;
  --pico-form-element-spacing-vertical: .45rem;
  --pico-form-element-spacing-horizontal: .75rem;
  --pico-background-color: var(--ga-bg);
  --pico-color: var(--ga-text);
  --pico-text-selection-color: var(--ga-accent-focus);
  --pico-h1-color: var(--ga-ink);
  --pico-h2-color: var(--ga-ink);
  --pico-h3-color: var(--ga-ink);
  --pico-h4-color: var(--ga-ink);
  --pico-h5-color: var(--ga-ink);
  --pico-h6-color: var(--ga-ink);
  --pico-muted-color: var(--ga-muted);
  --pico-muted-border-color: var(--ga-line);
  --pico-primary: var(--ga-accent-text);
  --pico-primary-background: var(--ga-accent);
  --pico-primary-border: var(--ga-accent);
  --pico-primary-underline: transparent;
  --pico-primary-hover: var(--ga-accent-hover);
  --pico-primary-hover-background: var(--ga-accent-text);
  --pico-primary-hover-border: var(--ga-accent-text);
  --pico-primary-hover-underline: transparent;
  --pico-primary-focus: var(--ga-accent-focus);
  --pico-primary-inverse: #ffffff;
  --pico-secondary: var(--ga-muted);
  --pico-secondary-background: var(--ga-muted);
  --pico-secondary-border: var(--ga-muted);
  --pico-secondary-hover: var(--ga-ink);
  --pico-secondary-inverse: var(--ga-bg);
  --pico-contrast: var(--ga-ink);
  --pico-contrast-background: var(--ga-ink);
  --pico-contrast-border: var(--ga-ink);
  --pico-contrast-inverse: var(--ga-bg);
  --pico-box-shadow: none;
  --pico-form-element-background-color: var(--ga-input-bg);
  --pico-form-element-selected-background-color: var(--ga-input-selected);
  --pico-form-element-border-color: var(--ga-input-border);
  --pico-form-element-color: var(--ga-input-text);
  --pico-form-element-placeholder-color: var(--ga-muted);
  --pico-form-element-active-background-color: var(--ga-input-bg);
  --pico-form-element-active-border-color: var(--ga-accent);
  --pico-form-element-focus-color: var(--ga-accent-focus);
  --pico-card-background-color: var(--ga-surface);
  --pico-card-border-color: var(--ga-line);
  --pico-card-sectioning-background-color: var(--ga-surface);
  --pico-card-box-shadow: none;
  --pico-dropdown-background-color: var(--ga-surface);
  --pico-dropdown-border-color: var(--ga-line);
  --pico-dropdown-color: var(--ga-text);
  --pico-dropdown-hover-background-color: var(--ga-side-hover);
  --pico-dropdown-box-shadow: none;
  --pico-table-border-color: var(--ga-line-soft);
  --pico-table-row-stripped-background-color: transparent;
  --pico-code-background-color: var(--ga-code);
  --pico-code-color: var(--ga-text);
  --pico-code-kbd-background-color: var(--ga-ink);
  --pico-code-kbd-color: var(--ga-bg);
  --pico-ins-color: var(--ga-accent-text);
  --pico-del-color: var(--ga-danger);
  --pico-mark-background-color: var(--ga-warn-bg);
  --pico-mark-color: var(--ga-warn-text);
  --pico-accordion-border-color: var(--ga-line);
  --pico-accordion-active-summary-color: var(--ga-accent-hover);
  --pico-accordion-close-summary-color: var(--ga-text);
  --pico-accordion-open-summary-color: var(--ga-muted);
  --pico-switch-background-color: var(--ga-btn-border);
  --pico-switch-checked-background-color: var(--ga-accent);
  --pico-range-border-color: var(--ga-line);
  --pico-range-active-border-color: var(--ga-btn-border);
  --pico-range-thumb-border-color: var(--ga-bg);
  --pico-range-thumb-color: var(--ga-muted);
  --pico-range-thumb-active-color: var(--ga-accent);
  --pico-progress-background-color: var(--ga-line);
  --pico-progress-color: var(--ga-accent);
  --pico-tooltip-background-color: var(--ga-ink);
  --pico-tooltip-color: var(--ga-bg);
  --pico-modal-overlay-background-color: rgba(0, 0, 0, .45);
}

/* Mode sombre : fond quasi noir, barre du haut encore plus sombre, accent vert éclairci pour le contraste. */
[data-theme=dark] {
  color-scheme: dark;
  --ga-bg: #141414;
  --ga-surface: #1b1b1b;
  --ga-panel: #1a1a1a;
  --ga-head: #202020;
  --ga-line: #2c2c2c;
  --ga-line-soft: #262626;
  --ga-rule: #303030;
  --ga-ink: #f2f2f2;
  --ga-text: #d9d9d9;
  --ga-lead: #d9d9d9;
  --ga-muted: #a0a0a0;
  --ga-icon: #9a9a9a;
  --ga-card-icon: #c4c4c4;
  --ga-code: #2a2a2a;
  --ga-row-hover: #202020;
  --ga-logs-bg: #181818;

  --ga-side-link: #b8b8b8;
  --ga-side-hover: #242424;
  --ga-side-active: #2b2b2b;

  --ga-accent-text: #62d98e;
  --ga-accent-hover: #8be8ab;
  --ga-accent-soft: #15301f;
  --ga-accent-soft-border: #2a6b43;
  --ga-accent-soft-text: #9ee3b6;
  --ga-accent-focus: rgba(98, 217, 142, .3);

  --ga-pill-bg: #2a2a2a;
  --ga-pill-text: #c4c4c4;
  --ga-pill-dot: #7a7a7a;
  --ga-info-bg: #1b2a40;
  --ga-info-text: #8ab4f8;

  --ga-warn-bg: #2d2611;
  --ga-warn-border: #6b5520;
  --ga-warn-text: #f1d47c;
  --ga-warn-dot: #e2b84a;

  --ga-danger: #f07070;
  --ga-danger-bg: #361a1a;
  --ga-danger-border: #7a2e2e;
  --ga-danger-text: #f5a3a3;
  --ga-danger-hover: #ffb4b4;

  --ga-btn-border: #454545;
  --ga-btn-text: #e2e2e2;
  --ga-btn-hover-bg: #2a2a2a;
  --ga-btn-hover-border: #6a6a6a;

  --ga-topbar: #0c0c0c;
  --ga-top-border: #242424;
  --ga-top-text: #c9c9c9;
  --ga-top-muted: #8f8f8f;
  --ga-top-sep: #555555;
  --ga-top-btn-border: #3a3a3a;
  --ga-top-btn-text: #d6d6d6;
  --ga-top-btn-hover-border: #6a6a6a;

  --ga-input-bg: #1f1f1f;
  --ga-input-border: #3f3f3f;
  --ga-input-selected: #2a2a2a;

  --pico-primary-inverse: #0c0c0c;
  --pico-modal-overlay-background-color: rgba(0, 0, 0, .7);
}

body { background: var(--ga-bg); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
code, kbd, samp { font-size: 12px; padding: 1px 5px; border-radius: 3px; }
pre { border: 1px solid var(--ga-line); background: var(--ga-head); border-radius: var(--pico-border-radius); }
small { font-size: .875em; }

/* ---------- cadre : barre du haut + barre latérale ---------- */
.ga-shell { display: flex; flex-direction: column; min-height: 100vh; }
.ga-topbar { display: flex; align-items: stretch; height: 56px; background: var(--ga-topbar); color: #ffffff; flex-shrink: 0; }
.ga-brand { display: flex; align-items: center; gap: 12px; width: 248px; box-sizing: border-box; padding: 0 20px; border-right: 1px solid var(--ga-top-border); flex-shrink: 0; color: #ffffff; }
.ga-brand:hover { text-decoration: none; color: #ffffff; }
.ga-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ga-accent); color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; text-transform: uppercase; }
.ga-brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ga-brand-text strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ffffff; }
.ga-brand-text span { font-size: 11px; color: var(--ga-top-muted); white-space: nowrap; }
.ga-topbar-main { display: flex; align-items: center; justify-content: space-between; flex: 1 1 auto; padding: 0 24px; min-width: 0; gap: 16px; }
.ga-host { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ga-top-text); min-width: 0; white-space: nowrap; overflow: hidden; }
.ga-host .sep { color: var(--ga-top-sep); }
.ga-topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ga-topbar form { margin: 0; }
.ga-topbar button.ga-topbtn { height: 32px; padding: 0 12px; border: 1px solid var(--ga-top-btn-border); border-radius: 4px; background: transparent; color: var(--ga-top-btn-text); font-size: 13px; font-weight: 400; margin: 0; width: auto; }
.ga-topbar button.ga-topbtn:is(:hover, :focus, :active):not(:disabled) { border-color: var(--ga-top-btn-hover-border); color: #ffffff; background: transparent; }
.ga-topbar button.ga-theme-toggle { width: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.ga-theme-toggle svg { display: block; }
/* lune en mode clair (« passer en sombre »), soleil en mode sombre */
.ga-theme-toggle .ga-icon-sun { display: none; }
[data-theme=dark] .ga-theme-toggle .ga-icon-sun { display: block; }
[data-theme=dark] .ga-theme-toggle .ga-icon-moon { display: none; }

.ga-body { display: flex; flex-wrap: wrap; flex: 1 1 auto; align-items: stretch; }
/* justify-content : Pico met `nav { justify-content: space-between }` ; en colonne étirée sur toute la hauteur
   de la page, les groupes se répartiraient sinon le long de la barre (grands vides entre sections). */
.ga-sidebar { width: 248px; flex: 0 1 248px; box-sizing: border-box; background: var(--ga-panel); border-right: 1px solid var(--ga-line); padding: 28px 0 40px; display: flex; flex-direction: column; justify-content: flex-start; align-content: flex-start; gap: 26px; font-size: 14px; }
.ga-navgroup { display: flex; flex-direction: column; gap: 2px; }
.ga-navgroup-title { display: flex; align-items: center; gap: 10px; padding: 0 22px 8px; font-size: 15px; font-weight: 600; color: var(--ga-ink); }
.ga-navgroup-title svg { flex-shrink: 0; color: var(--ga-icon); }
.ga-sidebar a { display: block; padding: 7px 22px 7px 48px; color: var(--ga-side-link); text-decoration: none; }
.ga-sidebar a:hover { color: var(--ga-ink); background: var(--ga-side-hover); text-decoration: none; }
.ga-sidebar a[aria-current=page] { color: var(--ga-ink); background: var(--ga-side-active); box-shadow: inset 3px 0 0 var(--ga-accent); }

.ga-main { flex: 999 1 560px; min-width: 0; box-sizing: border-box; padding: 24px 32px 56px; max-width: 1104px; }
.ga-main > :first-child { margin-top: 0; }

/* page de connexion : pas de barre latérale */
.ga-shell.ga-guest .ga-body { justify-content: center; align-items: flex-start; }
.ga-shell.ga-guest .ga-main { flex: 0 1 420px; padding-top: 72px; }

@media (max-width: 840px) {
  .ga-brand { width: auto; border-right: 0; }
  .ga-host { display: none; }
  .ga-topbar-main { justify-content: flex-end; padding: 0 16px; }
  .ga-sidebar { width: 100%; flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--ga-line); padding: 16px 0; flex-direction: row; flex-wrap: wrap; gap: 12px 0; }
  .ga-navgroup { flex: 1 1 50%; min-width: 180px; }
  .ga-sidebar a { padding: 6px 16px 6px 42px; }
  .ga-navgroup-title { padding: 0 16px 6px; }
  .ga-main { padding: 20px 16px 48px; }
}

/* ---------- titres ---------- */
/* Le premier h2 d'une page est son titre : grand, léger, souligné d'un filet. */
.ga-main > h2:first-of-type, .ga-main > .ga-page-title > h1 {
  font-size: 30px; font-weight: 400; letter-spacing: -0.2px; color: var(--ga-ink);
  margin: 0 0 1.25rem; padding-bottom: 14px; border-bottom: 1px solid var(--ga-rule);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.ga-page-title { margin-bottom: 1.75rem; }
.ga-page-title > h1 { margin-bottom: 14px; }
.ga-page-title > p { margin: 0; color: var(--ga-lead); }
.ga-main > h2:first-of-type small.badge { font-size: 12px; letter-spacing: 0; }
/* Titres de section : petites capitales grises. */
.ga-main h3, .ga-section-title {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ga-muted);
  margin: 1.75rem 0 .75rem;
}
.ga-main h3 small { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; }
.ga-main h4 { font-size: 14px; font-weight: 600; }
.ga-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 1.75rem 0 .75rem; }
.ga-section-head .ga-section-title { margin: 0; }
.ga-section-head > :not(.ga-section-title) { font-size: 13px; color: var(--ga-muted); }

/* ---------- cartes ---------- */
article {
  border: 1px solid var(--ga-line); border-radius: var(--pico-border-radius); box-shadow: none;
  background: var(--ga-surface); padding: 14px 18px; margin: 0 0 20px;
}
article > header, article > footer {
  margin: -14px -18px 14px; padding: 13px 18px; background: var(--ga-surface);
  border-bottom: 1px solid var(--ga-line-soft); border-radius: var(--pico-border-radius) var(--pico-border-radius) 0 0;
}
article > footer { margin: 14px -18px -14px; border-bottom: 0; border-top: 1px solid var(--ga-line-soft); border-radius: 0 0 var(--pico-border-radius) var(--pico-border-radius); }
article > header strong { font-size: 16px; font-weight: 600; color: var(--ga-ink); }
article > header { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.grid > article, .grid > div > article { margin-bottom: 0; }
.grid { gap: 20px; }
.grid + article { margin-top: 20px; }

/* ---------- boutons ---------- */
button, [type=submit], [type=button], [role=button], [type=reset] {
  --pico-background-color: var(--ga-surface);
  --pico-border-color: var(--ga-accent);
  --pico-color: var(--ga-accent-text);
  font-size: 13px; font-weight: 600; line-height: 1.2; padding: .6rem 1rem;
  border-radius: 4px; box-shadow: none;
}
:is(button, [type=submit], [type=button], [role=button]):is(:hover, :active, :focus):not(:disabled) {
  --pico-background-color: var(--ga-accent-soft);
  --pico-border-color: var(--ga-accent-text);
  --pico-color: var(--ga-accent-hover);
  box-shadow: none;
}
:is(button, [type=submit], [type=button], [role=button]):focus-visible { --pico-box-shadow: 0 0 0 3px var(--pico-primary-focus); box-shadow: var(--pico-box-shadow); }
:is(button, [type=submit], [type=button], [role=button]).secondary,
:is(button, [type=submit], [type=button], [role=button]).outline,
:is(button, [type=submit], [type=button], [role=button]).outline.secondary {
  --pico-background-color: var(--ga-surface);
  --pico-border-color: var(--ga-btn-border);
  --pico-color: var(--ga-btn-text);
  font-weight: 500;
}
:is(button, [type=submit], [type=button], [role=button]):is(.secondary, .outline):is(:hover, :active, :focus):not(:disabled) {
  --pico-background-color: var(--ga-btn-hover-bg);
  --pico-border-color: var(--ga-btn-hover-border);
  --pico-color: var(--ga-ink);
}
/* Action destructrice (Arrêter, Supprimer…). */
:is(button, [type=submit], [type=button], [role=button]).contrast,
:is(button, [type=submit], [type=button], [role=button]).outline.contrast {
  --pico-background-color: var(--ga-surface);
  --pico-border-color: var(--ga-danger-border);
  --pico-color: var(--ga-danger);
  font-weight: 600;
}
:is(button, [type=submit], [type=button], [role=button]).contrast:is(:hover, :active, :focus):not(:disabled) {
  --pico-background-color: var(--ga-danger-bg);
  --pico-border-color: var(--ga-danger);
  --pico-color: var(--ga-danger-hover);
}
button:disabled, [type=submit]:disabled, [role=button][disabled] { opacity: .45; }
button.small, .small[role=button], summary.small { padding: .35rem .7rem; font-size: 12px; }
.actions { gap: 8px; }
.actions.sticky { border-top: 1px solid var(--ga-line); padding: 12px 0; margin-top: 1rem; }

/* ---------- pastilles d'état ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 12px;
  background: var(--ga-pill-bg); color: var(--ga-pill-text); font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; vertical-align: middle;
}
.badge[class*=state-]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ga-pill-dot); flex-shrink: 0; }
.badge.state-active { background: var(--ga-accent-soft); color: var(--ga-accent-soft-text); }
.badge.state-active::before { background: var(--ga-accent); }
.badge:is(.state-activating, .state-deactivating, .state-reloading) { background: var(--ga-warn-bg); color: var(--ga-warn-text); }
.badge:is(.state-activating, .state-deactivating, .state-reloading)::before { background: var(--ga-warn-dot); }
.badge.state-failed { background: var(--ga-danger-bg); color: var(--ga-danger-text); }
.badge.state-failed::before { background: var(--ga-danger); }
.cm-badge { background: var(--ga-info-bg); color: var(--ga-info-text); }

/* ---------- messages ---------- */
p.success, p.error {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 14px; border-radius: 3px; font-size: 13px; width: fit-content; max-width: 100%;
}
p.success { background: var(--ga-accent-soft); border: 1px solid var(--ga-accent-soft-border); color: var(--ga-accent-soft-text); }
p.success::before { content: "✓"; font-weight: 700; color: var(--ga-accent-text); }
p.error { background: var(--ga-danger-bg); border: 1px solid var(--ga-danger-border); color: var(--ga-danger-text); }
.health-errors, .health-lint {
  border: 1px solid; border-left-width: 1px; border-radius: 3px; padding: 10px 12px; font-size: 13px;
}
.health-errors { background: var(--ga-danger-bg); border-color: var(--ga-danger-border); color: var(--ga-danger-text); }
.health-lint { background: var(--ga-warn-bg); border-color: var(--ga-warn-border); color: var(--ga-warn-text); }
.mod-note { border-left: 0; background: var(--ga-panel); border: 1px solid var(--ga-line); border-radius: 3px; }

/* ---------- tableaux ---------- */
table { font-size: 13px; border: 1px solid var(--ga-line); border-radius: var(--pico-border-radius); border-collapse: separate; border-spacing: 0; }
th, td { padding: 9px 16px; border-bottom: 1px solid var(--ga-line-soft); background: var(--ga-surface); vertical-align: middle; }
thead th, thead td { background: var(--ga-head); color: var(--ga-muted); font-weight: 600; border-bottom: 1px solid var(--ga-line); }
tbody tr:last-child > * { border-bottom: 0; }
table.striped tbody tr:nth-child(odd) > * { background: var(--ga-surface); }
tbody tr:hover > * { background: var(--ga-row-hover); }
article table { margin-bottom: .5rem; }
.ga-table-wrap { overflow-x: auto; margin-bottom: var(--pico-spacing); }
.ga-table-wrap > table { margin: 0; }

/* ---------- formulaires ---------- */
label, legend { font-size: 13px; font-weight: 500; color: var(--ga-ink); }
input:not([type=checkbox], [type=radio], [type=range], [type=file]), select, textarea {
  font-size: 13px; border-radius: 4px; box-shadow: none;
}
fieldset { margin-bottom: var(--pico-spacing); }
details > summary { font-size: 13px; color: var(--ga-side-link); }
details > summary:not([role]):hover { color: var(--ga-ink); }
details[open] > summary:not([role]) { margin-bottom: .5rem; }
.logs { background: var(--ga-logs-bg); border: 1px solid var(--ga-line); font-size: 12px; color: var(--ga-text); }
progress { border-radius: 4px; }

/* ---------- tableau de bord ---------- */
.ga-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 20px; }
.game-card { display: flex; flex-direction: column; padding-bottom: 0; margin: 0; }
.game-card > header { justify-content: space-between; }
.game-card > header .ga-game-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.game-card > header .ga-game-name svg { color: var(--ga-card-icon); flex-shrink: 0; }
.game-card > p { margin-bottom: 12px; }
.game-card .ga-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin: auto -18px 0; padding: 12px 18px; border-top: 1px solid var(--ga-line-soft);
}
.game-card .ga-card-foot .actions { margin: 0; }
.game-card .ga-card-foot details { margin: 0; flex: 1 1 100%; }
.game-card .ga-card-foot details:not([open]) { flex: 0 0 auto; }
.game-card .ga-card-foot details > summary { list-style: none; }
.ga-join td:first-child { width: 160px; font-weight: 600; color: var(--ga-ink); }
.ga-actions-table td:first-child { color: var(--ga-muted); white-space: nowrap; font-variant-numeric: tabular-nums; width: 110px; }
.ga-actions-table td:nth-child(2) { font-weight: 500; color: var(--ga-ink); }
.ga-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ga-accent); display: inline-block; }

/* ---------- connexion ---------- */
.login { margin: 0; }
.login form { margin: 0; }
.login button[type=submit] { width: 100%; margin-top: .25rem; }