:root {
      --bg: #0d0d12;
      --surface: #16161f;
      --surface2: #1e1e2a;
      --border: rgba(255,255,255,0.08);
      --text: #f0eeff;
      --muted: rgba(240,238,255,0.45);
      --accent: #7c6fff;
      --accent2: #c084fc;
      --accent3: #38bdf8;
      --green: #34d399;
      --pink: #f472b6;
      --amber: #fbbf24;
      --radius: 14px;
      --radius-lg: 20px;

      /* ── Tokens "refonte mobile" (introduit pour la refonte progressive) ──
       * Ces tokens viennent de mockup.html. Ils coexistent avec les tokens
       * historiques au-dessus pour permettre une migration écran par écran
       * sans casser l'existant. Utilisés uniquement par les sections refaites. */
      --bg-soft: #0f0f18;
      --surface-2: #1c1c28;        /* alias propre de --surface2 (cohérence avec mockup) */
      --surface-3: #232333;
      --border-strong: rgba(255,255,255,0.14);
      --text-2: #b9b9c8;            /* gris intermédiaire entre --text et --muted */
      --accent-3: #f472b6;          /* alias de --pink */
      --good: #34d399;
      --warn: #f59e0b;
      --bad:  #f87171;

      /* Gradients réutilisables — héros + cartes */
      --grad-hero: linear-gradient(135deg, #7c6fff 0%, #c084fc 50%, #f472b6 100%);
      --grad-card: linear-gradient(155deg, rgba(124,111,255,0.18), rgba(244,114,182,0.06) 60%, transparent);

      /* Échelle de border-radius cohérente */
      --r-sm: 10px;
      --r-md: 14px;
      --r-lg: 20px;
      --r-xl: 28px;

      /* Ombres réutilisables */
      --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
      --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
      --shadow-glow: 0 0 30px rgba(124,111,255,0.25);

      /* Safe areas raccourcies (iOS notch + home indicator) */
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bot: env(safe-area-inset-bottom, 0px);
      --safe-left: env(safe-area-inset-left, 0px);
      --safe-right: env(safe-area-inset-right, 0px);

      /* Hauteurs de nav (utilisées par bottom tab bar et header refondus) */
      --tab-h: 64px;
      --header-h: 56px;

      /* Easings pour micro-animations */
      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    /* Variante claire : on aligne les nouveaux tokens sur les valeurs claires
     * existantes pour éviter qu'une section refondue n'apparaisse trop sombre
     * sur fond clair. Voir [data-theme="light"] plus bas pour les valeurs
     * historiques mappées. */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    /* Polish étape 12 : suppression du tap-highlight bleu Android par défaut sur
     * tous les éléments interactifs ; smooth scroll global ; focus-visible
     * cohérent (anneau accent au lieu du contour bleu natif). */
    html { scroll-behavior: smooth; }
    button, a, label, input, [role="button"], [role="tab"] {
      -webkit-tap-highlight-color: transparent;
    }
    button:focus-visible, a:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: inherit;
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }
    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      /* Safe area : sur iPhone notch en mode PWA standalone, le contenu top
       * passe sous la barre de statut. On combine padding minimal + safe-area-inset
       * pour que les chips (back, settings, leave) restent toujours accessibles. */
      padding:
        max(24px, calc(env(safe-area-inset-top) + 12px))
        max(16px, calc(env(safe-area-inset-right) + 8px))
        max(48px, calc(env(safe-area-inset-bottom) + 16px))
        max(16px, calc(env(safe-area-inset-left) + 8px));
      overflow-x: hidden;
    }
    @media (max-width: 380px) {
      body {
        padding:
          max(20px, calc(env(safe-area-inset-top) + 8px))
          max(12px, calc(env(safe-area-inset-right) + 6px))
          max(40px, calc(env(safe-area-inset-bottom) + 12px))
          max(12px, calc(env(safe-area-inset-left) + 6px));
      }
    }
    body::before {
      content: '';
      position: fixed;
      top: -200px; left: -200px;
      width: 600px; height: 600px;
      background: radial-gradient(circle, rgba(124,111,255,0.12) 0%, transparent 70%);
      pointer-events: none; z-index: 0;
    }
    body::after {
      content: '';
      position: fixed;
      bottom: -200px; right: -100px;
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(192,132,252,0.08) 0%, transparent 70%);
      pointer-events: none; z-index: 0;
    }
    .wrap { width: 100%; max-width: 460px; position: relative; z-index: 1; }
    .header { text-align: center; margin-bottom: 2rem; padding-top: 0.5rem; }
    .header .badge {
      display: inline-block;
      font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--accent);
      background: rgba(124,111,255,0.12);
      border: 1px solid rgba(124,111,255,0.25);
      padding: 4px 12px; border-radius: 100px; margin-bottom: 12px;
    }
    h1 {
      font-family: 'Syne', sans-serif;
      font-size: 38px; font-weight: 800; letter-spacing: -0.02em;
      background: linear-gradient(135deg, var(--text) 30%, var(--accent2));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      line-height: 1;
    }
    .section-label {
      font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 10px;
    }
    .name-row {
      display: flex; gap: 8px; margin-bottom: 10px;
    }
    .names-input {
      flex: 1; padding: 13px 16px; font-size: 16px;
      font-family: 'DM Sans', sans-serif;
      border: 1px solid var(--border); border-radius: var(--radius);
      background: var(--surface); color: var(--text);
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .names-input::placeholder { color: var(--muted); }
    .names-input:focus { outline: none; border-color: rgba(124,111,255,0.5); box-shadow: 0 0 0 3px rgba(124,111,255,0.12); }
    .add-btn {
      padding: 13px 18px; font-size: 20px; line-height: 1;
      border: 1px solid var(--border); border-radius: var(--radius);
      background: var(--surface2); color: var(--text);
      cursor: pointer; transition: background 0.15s, border-color 0.15s; flex-shrink: 0;
    }
    .add-btn:hover { background: rgba(124,111,255,0.15); border-color: rgba(124,111,255,0.4); }
    .add-btn:active { transform: scale(0.95); }
    .players-list {
      display: flex; flex-direction: row; gap: 6px;
      margin-bottom: 0.5rem; flex-wrap: wrap;
    }
    .players-list:empty { display: none; }
    .players-empty {
      font-size: 12px; color: var(--muted); text-align: center;
      padding: 14px 10px; border: 1px dashed var(--border); border-radius: 10px;
      margin-bottom: 1rem; letter-spacing: 0.02em;
    }
    .players-count {
      font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--muted); margin: 6px 0 12px;
    }
    .players-count strong { color: var(--accent); font-weight: 800; }
    .player-row {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 5px 8px 5px 5px; border-radius: 100px;
      border: 1px solid var(--border); background: var(--surface);
      animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      flex-shrink: 0; max-width: 100%;
      transition: border-color 0.18s, transform 0.15s;
    }
    .player-row:hover { border-color: rgba(255,255,255,0.18); }
    .player-row > span { font-size: 13.5px; display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
    .player-avatar {
      width: 24px; height: 24px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 800;
      color: #fff; flex-shrink: 0;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
    }
    .player-points {
      font-size: 10.5px; font-weight: 700;
      color: var(--accent); padding: 2px 8px; border-radius: 10px;
      background: rgba(124,111,255,0.14);
      border: 1px solid rgba(124,111,255,0.3);
      letter-spacing: 0.02em;
    }
    .player-points.zero { opacity: 0.35; }
    .player-row .remove-player {
      background: none; border: none; color: var(--muted); cursor: pointer;
      font-size: 13px; padding: 0; line-height: 1;
      width: 20px; height: 20px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      transition: color 0.15s, background 0.15s, transform 0.1s;
    }
    .player-row .remove-player:hover { color: var(--pink); background: rgba(244,114,182,0.15); }
    .player-row .remove-player:active { transform: scale(0.88); }
    @keyframes popIn {
      0%   { opacity: 0; transform: scale(0.6) translateY(-4px); }
      60%  { opacity: 1; transform: scale(1.06); }
      100% { opacity: 1; transform: scale(1) translateY(0); }
    }
    .scoreboard-summary {
      margin: 2px 0 1.1rem; padding: 12px 14px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(124,111,255,0.09), rgba(192,132,252,0.05));
      border: 1px solid rgba(124,111,255,0.25);
      display: flex; align-items: center; gap: 12px;
      animation: slideIn 0.3s ease both;
    }
    .scoreboard-trophy { font-size: 26px; line-height: 1; filter: drop-shadow(0 0 12px rgba(251,191,36,0.4)); }
    .scoreboard-leader { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
    .scoreboard-label {
      font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--muted);
    }
    .scoreboard-name {
      font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 800;
      letter-spacing: -0.01em; color: var(--text); line-height: 1.15;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .scoreboard-name .sb-points {
      font-size: 12px; color: var(--accent2); margin-left: 6px; font-weight: 700;
    }
    .scoreboard-reset {
      background: transparent; border: 1px solid var(--border); color: var(--muted);
      font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
      padding: 6px 10px; border-radius: 8px; cursor: pointer;
      font-family: inherit; transition: all 0.15s;
    }
    .scoreboard-reset:hover { border-color: rgba(244,114,182,0.5); color: var(--pink); }
    @keyframes slideIn {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    /* Points gain toast on player chips */
    @keyframes pointsGain {
      0%   { transform: scale(1); background: rgba(124,111,255,0.14); }
      30%  { transform: scale(1.4); background: rgba(52,211,153,0.3); color: var(--green); box-shadow: 0 0 18px rgba(52,211,153,0.5); }
      100% { transform: scale(1); }
    }
    .player-points.bump { animation: pointsGain 0.9s ease; }
    .cat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
    .select-all { font-size: 12px; font-weight: 500; color: var(--accent); cursor: pointer; opacity: 0.8; transition: opacity 0.15s; }
    .select-all:hover { opacity: 1; text-decoration: underline; }
    /* Categories grid : 2 cols sur mobile, auto-fill au-delà de 600 px */
    .categories-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 1.5rem;
    }
    @media (min-width: 600px) {
      .categories-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    }

    /* Bouton catégorie : icône emoji à gauche, libellé, pill statut optionnel.
     * Filet de couleur ::before sur la gauche, révélé en .active. */
    .cat-btn {
      position: relative;
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px 10px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      color: var(--muted);
      font-size: 13px; font-weight: 500;
      font-family: 'DM Sans', sans-serif;
      cursor: pointer; text-align: left;
      transition: background-color 0.18s, border-color 0.18s, color 0.18s, transform 0.1s;
      overflow: hidden;
      min-height: 44px; /* confort tactile */
    }
    .cat-btn::before {
      content: '';
      position: absolute;
      top: 0; bottom: 0; left: 0;
      width: 3px;
      background: transparent;
      transition: background-color 0.2s;
    }
    .cat-btn:hover {
      background: var(--surface2);
      color: var(--text);
      border-color: rgba(255,255,255,0.14);
      transform: translateY(-1px);
    }
    .cat-btn:active { transform: translateY(0); }

    .cat-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px;
      font-size: 16px; line-height: 1;
      flex-shrink: 0;
      filter: grayscale(0.4) brightness(0.85);
      transition: filter 0.18s, transform 0.18s;
    }
    .cat-btn:hover .cat-icon,
    .cat-btn.active .cat-icon { filter: grayscale(0) brightness(1); }
    .cat-btn.active .cat-icon { transform: scale(1.05); }

    .cat-label {
      flex: 1; min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .cat-status {
      flex-shrink: 0;
      font-size: 10px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.02em;
      padding: 2px 7px;
      border-radius: 999px;
      background: rgba(234,179,8,0.16);
      color: #fde047;
      border: 1px solid rgba(234,179,8,0.35);
      line-height: 1.2;
    }
    [data-theme="light"] .cat-status {
      background: rgba(180,83,9,0.10);
      color: #92400e;
      border-color: rgba(180,83,9,0.30);
    }

    /* Active : fond accent doux + bordure + filet violet par défaut */
    .cat-btn.active {
      border-color: rgba(124,111,255,0.45);
      background: rgba(124,111,255,0.10);
      color: var(--text);
    }
    .cat-btn.active::before { background: var(--accent); }

    /* Partial : amber teinté */
    .cat-btn.partial-sub {
      border-color: rgba(234,179,8,0.40);
      background: rgba(234,179,8,0.07);
    }
    .cat-btn.partial-sub::before { background: var(--amber); }

    /* Bouton d'ouverture de l'overlay sous-catégories */
    .subcat-action {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      margin-top: 10px; padding: 8px 12px;
      background: var(--surface); border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px; font-size: 13px; color: var(--muted);
    }
    .subcat-combo-count {
      flex-shrink: 0;                /* jamais compressé même si titre long */
      display: inline-block;
      font-size: 11px; font-weight: 600;
      color: var(--accent);
      padding: 2px 8px; border-radius: 10px;
      background: rgba(124,111,255,0.12);
      border: 1px solid rgba(124,111,255,0.25);
      white-space: nowrap;
    }
    .subcat-action-btn {
      padding: 5px 12px; border-radius: 8px;
      border: 1px solid rgba(124,111,255,0.3);
      background: rgba(124,111,255,0.08);
      color: var(--text); font-size: 12px; cursor: pointer; font-family: inherit;
    }
    .subcat-action-btn:hover { background: rgba(124,111,255,0.15); }

    /* Overlay sous-catégories */
    .subcat-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.78);
      z-index: 1000; display: none;
      align-items: stretch; justify-content: center;
      padding: 20px; backdrop-filter: blur(4px);
    }
    .subcat-overlay.open { display: flex; }
    .subcat-modal {
      background: #0d0d12; border: 1px solid rgba(255,255,255,0.1);
      border-radius: 14px; width: 100%; max-width: 900px;
      display: flex; flex-direction: column; overflow: hidden;
    }
    .subcat-modal-header {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    /* Tout cocher / Tout décocher groupés dans un bloc unique : ils
     * restent solidaires et wrappent ensemble au lieu de remonter sur
     * la ligne du titre + badge quand celui-ci change de largeur. */
    .subcat-modal-actions {
      display: flex; gap: 6px; flex-shrink: 0;
    }
    /* h2 = flex container : titre shrinkable + badge inflexible. Garantit que
     * le titre tronque (ellipsis) et que le badge ne passe JAMAIS à la ligne
     * quand il grossit (« 12345 combinaisons »). */
    .subcat-modal-header h2 {
      flex: 1; min-width: 0;
      display: flex; align-items: center; gap: 8px;
      margin: 0;
      font-size: 16px; font-weight: 700;
    }
    .subcat-modal-title {
      flex: 1; min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .subcat-modal-close {
      background: transparent; border: none; color: var(--muted);
      font-size: 22px; cursor: pointer; padding: 4px 10px;
      border-radius: 6px; font-family: inherit;
    }
    .subcat-modal-close:hover { background: rgba(255,255,255,0.06); color: var(--text); }
    .subcat-modal-body {
      flex: 1; overflow-y: auto; padding: 16px 18px;
      display: flex; flex-direction: column; gap: 14px;
    }
    .subcat-modal-cat {
      background: var(--surface); border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px; padding: 12px 14px;
    }
    .subcat-modal-cat-header {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 10px; font-weight: 700; font-size: 15px;
    }
    .subcat-modal-cat-header .spacer { flex: 1; }
    .subcat-modal-cat-header .subcat-cat-count {
      margin-left: auto; font-size: 11px; font-weight: 500;
      color: var(--muted); padding: 2px 7px;
      border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
    }
    .subcat-modal-cat-actions { display: flex; gap: 4px; }
    .subcat-modal-cat-actions button {
      font-size: 11px; padding: 3px 9px; border-radius: 4px;
      border: 1px solid rgba(255,255,255,0.12);
      background: transparent; color: var(--accent);
      cursor: pointer; font-family: inherit;
    }
    .subcat-modal-cat-actions button:hover { background: rgba(124,111,255,0.1); }
    .subcat-modal-pills { display: flex; flex-wrap: wrap; gap: 6px; }
    .subcat-modal-pill {
      font-size: 12px; padding: 5px 12px; border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.12);
      background: var(--surface2); color: var(--muted);
      cursor: pointer; user-select: none; transition: all .12s;
    }
    .subcat-modal-pill:hover { border-color: rgba(255,255,255,0.25); color: var(--text); }
    .subcat-modal-pill.active {
      border-color: var(--accent); background: rgba(124,111,255,0.15);
      color: var(--text); font-weight: 600;
    }
    .subcat-modal-pill .pill-count { opacity: 0.55; margin-left: 4px; }

    /* ─────────────────────────────────────────────────────────────────────
     * MOBILE-FRIENDLY : adaptation de l'overlay sous-catégories pour les
     * petits écrans (< 600px). Optimisations :
     *   1. Header overlay : titre + ✕ sur la 1re ligne, "Tout cocher /
     *      décocher" descendent sur une 2e row (évite l'écrasement).
     *   2. Header par catégorie : label en haut, actions en bas (2 rows).
     *   3. Pills : passées à un format plus tap-friendly (~38px de hauteur,
     *      padding plus large, gap aéré).
     *   4. Bandeau "Affiner par sous-catégorie" devient cliquable plein
     *      largeur (toute la zone agit comme bouton, comme une "row").
     *   5. Padding overlay réduit sur très petits écrans (≤ 380px) pour
     *      maximiser la zone utile sans rogner.
     * Aucun changement de structure HTML : le markup reste identique en
     * local et en distance, seul le layout CSS change.
     * ───────────────────────────────────────────────────────────────────── */

    /* (1) Bandeau "Affiner par sous-catégorie" plus tap-friendly :
     * sur mobile, on le rend stack verticalement quand l'espace manque,
     * et le bouton déborde à pleine largeur pour un tap confortable. */
    @media (max-width: 480px) {
      .subcat-action {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 10px;
        padding: 12px;
      }
      .subcat-action > span { font-size: 13px; }
      .subcat-action-btn {
        min-height: 40px;
        font-size: 14px;
        padding: 10px 16px;
        font-weight: 600;
      }
    }

    /* (5) Overlay : padding réduit sur très petits écrans pour que la
     * modal ne soit pas étouffée par les marges. */
    @media (max-width: 480px) {
      .subcat-overlay { padding: 10px; }
    }
    @media (max-width: 380px) {
      .subcat-overlay { padding: 6px; }
    }

    /* (1) Header de l'overlay sur mobile : passe en 2 rows.
     *  Row 1 : [h2 (titre + badge)]                       [✕]
     *  Row 2 : [Tout cocher / Tout décocher groupés]
     * On masque le spacer <div style="flex:1"> qui pousserait les actions
     * sur une 3ᵉ ligne. */
    @media (max-width: 600px) {
      .subcat-modal-header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 14px;
      }
      .subcat-modal-header > div[style*="flex:1"] { display: none; }
      .subcat-modal-header h2 {
        flex: 1 1 auto;
        order: 1;
        font-size: 14px;
        line-height: 1.2;
        gap: 6px;
      }
      .subcat-modal-header .subcat-combo-count {
        font-size: 10px;
        padding: 2px 6px;
      }
      .subcat-modal-header #subcatCloseBtn {
        order: 2;
        margin-left: auto;
        min-width: 40px; min-height: 40px;
        font-size: 16px;
      }
      .subcat-modal-header .subcat-modal-actions {
        order: 3;
        flex: 1 1 100%;        /* row 2 entière */
      }
      .subcat-modal-header .subcat-modal-actions .subcat-action-btn {
        flex: 1 1 0;           /* split 50/50 dans le groupe */
        min-height: 38px;
        font-size: 13px;
        font-weight: 600;
        padding: 8px 10px;
      }
    }

    /* (2) Header par catégorie : 2 rows sur mobile.
     * Row 1 : icône + label + count
     * Row 2 : boutons "Tout" / "Aucun" (50/50)
     * Sans cette adaptation, sur 360-400px le contenu déborde / s'écrase. */
    @media (max-width: 600px) {
      .subcat-modal-cat { padding: 12px; }
      .subcat-modal-cat-header {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 14px;
      }
      /* Le span (icône + label) prend la 1re row entière (jusqu'au count) */
      .subcat-modal-cat-header > span:first-child {
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .subcat-modal-cat-header .subcat-cat-count {
        flex-shrink: 0;
      }
      /* Boutons "Tout" / "Aucun" : descendent sur 2e row, partagent la largeur. */
      .subcat-modal-cat-header [data-act] {
        flex: 1 1 calc(50% - 4px);
        min-height: 36px;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 12px;
      }
    }

    /* (3) Pills : tap-friendly. Sur mobile, on augmente le padding vertical
     * et le gap pour éviter les frappes adjacentes accidentelles. */
    @media (max-width: 600px) {
      .subcat-modal-pills { gap: 8px; }
      .subcat-modal-pill {
        font-size: 13px;
        padding: 9px 14px;
        min-height: 38px;
        border-radius: 999px; /* pill complète */
        display: inline-flex;
        align-items: center;
      }
    }

    /* Couleur par catégorie : surcharge le filet ::before + fond/bordure quand active.
     * Le filet domine visuellement, le fond reste discret (opacité basse) pour
     * ne pas surcharger l'écran avec trop de couleur. */
    .cat-btn[data-cat="celebrities"].active,
    .cat-btn[data-cat="crossover"].active,
    .cat-btn[data-cat="general"].active   { border-color: rgba(251,191,36,0.40); background: rgba(251,191,36,0.07); }
    .cat-btn[data-cat="celebrities"].active::before,
    .cat-btn[data-cat="crossover"].active::before,
    .cat-btn[data-cat="general"].active::before  { background: var(--amber); }

    .cat-btn[data-cat="youtubers"].active { border-color: rgba(56,189,248,0.40); background: rgba(56,189,248,0.07); }
    .cat-btn[data-cat="youtubers"].active::before { background: var(--accent3); }

    .cat-btn[data-cat="fruits"].active,
    .cat-btn[data-cat="trends"].active    { border-color: rgba(52,211,153,0.40); background: rgba(52,211,153,0.07); }
    .cat-btn[data-cat="fruits"].active::before,
    .cat-btn[data-cat="trends"].active::before    { background: var(--green); }

    .cat-btn[data-cat="films"].active,
    .cat-btn[data-cat="anime"].active     { border-color: rgba(244,114,182,0.40); background: rgba(244,114,182,0.07); }
    .cat-btn[data-cat="films"].active::before,
    .cat-btn[data-cat="anime"].active::before     { background: var(--pink); }

    .cat-btn[data-cat="superheroes"].active { border-color: rgba(192,132,252,0.40); background: rgba(192,132,252,0.08); }
    .cat-btn[data-cat="superheroes"].active::before { background: var(--accent2); }
    .start-btn {
      width: 100%; padding: 14px; font-size: 15px; font-weight: 700;
      font-family: 'Syne', sans-serif; letter-spacing: 0.02em;
      border: none; border-radius: var(--radius);
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff; cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s;
      box-shadow: 0 4px 24px rgba(124,111,255,0.35);
    }
    .start-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 30px rgba(124,111,255,0.5); }
    .start-btn:active { transform: scale(0.98); }
    .setup-section { margin-bottom: 1.5rem; }

    /* Generic card (done screen) */
    .card {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
      padding: 2.5rem 2rem; text-align: center;
    }
    .card h2 { font-family: 'Syne', sans-serif; font-size: 28px; font-weight: 800; margin-bottom: 8px; letter-spacing: -0.01em; }
    .card p { font-size: 14px; color: var(--muted); margin-bottom: 2rem; line-height: 1.6; }
    .card-btn {
      display: inline-block; padding: 12px 28px; font-size: 14px; font-weight: 700;
      font-family: 'Syne', sans-serif; letter-spacing: 0.03em;
      border: 1px solid rgba(124,111,255,0.35); border-radius: var(--radius);
      background: rgba(124,111,255,0.1); color: var(--accent);
      cursor: pointer; transition: all 0.18s;
    }
    .card-btn:hover { background: rgba(124,111,255,0.2); border-color: rgba(124,111,255,0.55); }
    .card-btn.primary {
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      border: none; color: #fff; box-shadow: 0 4px 20px rgba(124,111,255,0.35);
    }
    .done-icon { font-size: 48px; margin-bottom: 1rem; display: block; }

    /* Progress dots */
    .progress { display: flex; justify-content: center; gap: 6px; margin-bottom: 1.75rem; }
    .progress-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: background 0.2s; }
    .progress-dot.done { background: var(--accent); }
    .progress-dot.current { background: var(--accent2); box-shadow: 0 0 6px var(--accent2); }

    /* ── Slide-reveal card ── */
    .reveal-wrap {
      position: relative;
      user-select: none;
      touch-action: none;
    }
    .reveal-back {
      background: radial-gradient(ellipse at top, rgba(124,111,255,0.10), transparent 60%), var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem 1.5rem;
      text-align: center;
      /* Hauteur fixe : la longueur du mot ne doit pas faire bouger la carte
         ou le bouton qui suit. Le contenu est centré et auto-rétréci si besoin. */
      height: 240px;
      display: flex; flex-direction: column; justify-content: center; align-items: center;
      position: relative; overflow: hidden;
    }
    /* PAS d'override de fond/bordure/ombre pour l'impostor : pendant le nudge
     * la zone supérieure du back est exposée et un gradient rose y trahirait
     * le rôle. La différenciation visuelle reste portée par le mot lui-même
     * (couleur), le label ("Ton indice 🎯" vs "Ton mot secret") et le badge
     * "Tu es l'imposteur" — tous au centre/bas, masqués par le front pendant
     * le sautillement. */
    .reveal-back::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(circle at 20% 30%, rgba(124,111,255,0.08), transparent 50%);
      pointer-events: none;
    }
    .reveal-back > * { position: relative; z-index: 1; }
    .reveal-back .word-label {
      font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 1rem;
    }
    .word-display {
      font-family: 'Syne', sans-serif;
      /* Police adaptative : 30px pour les mots courts, descend jusqu'à 18px
         pour les noms longs (ex. "Saint Marcus Mars"). Évite de pousser le
         bouton du dessous. */
      font-size: clamp(18px, 6vw, 30px);
      font-weight: 800; letter-spacing: -0.025em;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      line-height: 1.1; margin-bottom: 0.75rem;
      animation: wordReveal 0.6s cubic-bezier(0.34, 1.45, 0.64, 1) both;
      /* Mots longs : on autorise le retour à la ligne et la coupure d'urgence. */
      max-width: 100%;
      word-break: break-word;
      overflow-wrap: anywhere;
      hyphens: auto;
    }
    .reveal-back.is-impostor .word-display {
      background: linear-gradient(135deg, var(--pink), var(--accent2));
      -webkit-background-clip: text; background-clip: text;
    }
    /* Variante description (mode Hardcore : l'imposteur reçoit une phrase
       d'indice, pas un mot court). Police plus petite, retours à la ligne
       autorisés, line-height confortable, italique discret pour distinguer
       de l'affichage "mot secret" classique. */
    .word-display.is-description {
      font-size: clamp(15px, 4.5vw, 22px);
      line-height: 1.35;
      letter-spacing: -0.01em;
      font-style: italic;
      max-width: 32ch;
      margin-left: auto;
      margin-right: auto;
      padding: 0 8px;
    }
    @keyframes wordReveal {
      0%   { opacity: 0; transform: scale(0.7); letter-spacing: 0.1em; }
      60%  { opacity: 1; transform: scale(1.04); }
      100% { opacity: 1; transform: scale(1); letter-spacing: -0.025em; }
    }
    .word-subcat {
      display: inline-block; font-size: 12px; font-weight: 600;
      color: var(--muted); letter-spacing: 0.04em;
      padding: 4px 12px; border-radius: 100px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      margin-bottom: 0.75rem;
    }
    .undercover-badge {
      display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
      padding: 5px 14px; border-radius: 100px;
      background: rgba(244,114,182,0.12); border: 1px solid rgba(244,114,182,0.3); color: var(--pink);
    }
    /* Mister White : variante du word-display (argent froid au lieu d'or/violet) */
    .word-display.mrwhite {
      background: linear-gradient(135deg, #cbd5e1, #94a3b8);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    [data-theme="light"] .word-display.mrwhite {
      background: linear-gradient(135deg, #475569, #64748b);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .mrwhite-hint {
      display: inline-block; font-size: 12px; font-weight: 500;
      padding: 6px 14px; border-radius: 100px; margin-top: 0.5rem;
      background: rgba(203,213,225,0.10); border: 1px solid rgba(203,213,225,0.30);
      color: #cbd5e1; line-height: 1.4;
    }
    [data-theme="light"] .mrwhite-hint {
      background: rgba(71,85,105,0.08); border-color: rgba(71,85,105,0.25); color: #475569;
    }
    .reveal-front {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem 1.5rem;
      text-align: center;
      position: absolute;
      top: 0; left: 0; right: 0;
      /* Doit recouvrir exactement la reveal-back (même hauteur fixe). */
      height: 240px;
      display: flex; flex-direction: column; justify-content: center; align-items: center;
      z-index: 2;
      transform: translateY(0%);
      transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform;
      cursor: grab;
      box-shadow: 0 8px 32px rgba(0,0,0,0.35);
    }
    .reveal-front.dragging { transition: none; cursor: grabbing; }
    .reveal-front.open { transform: translateY(110%); }

    /* ── Sceau "carte non ouverte" ─────────────────────────────────────────
     * Visible uniquement quand le front a la classe .sealed ou .opening.
     * Foil = balayage holographique permanent. Wax = pastille centrale.
     * Aucune intéraction (pointer-events:none) → le drag passe au travers.
     * Overlay au-dessus du contenu (z-index 2) pour masquer titre/hint. */
    .seal-overlay {
      position: absolute; inset: 0;
      display: none;
      pointer-events: none;
      z-index: 2;
      border-radius: var(--radius-lg);
      overflow: hidden;
    }
    .reveal-front.sealed .seal-overlay,
    .reveal-front.opening .seal-overlay { display: block; }

    .reveal-front.sealed { box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(251,191,36,0.30); }

    /* Foil holographique : gradient diagonal statique avec plusieurs stops
     * de couleurs pour évoquer un reflet métallique. Pas d'animation de
     * balayage. Aucune teinte sur le contenu (pointer-events:none côté parent). */
    .seal-foil {
      position: absolute; inset: 0;
      background:
        linear-gradient(135deg,
          rgba(251,191,36,0.32) 0%,
          rgba(244,114,182,0.26) 25%,
          rgba(192,132,252,0.30) 50%,
          rgba(124,111,255,0.26) 75%,
          rgba(56,189,248,0.28) 100%);
      opacity: 0.80;
    }
    [data-theme="light"] .seal-foil {
      opacity: 0.45;
      background:
        linear-gradient(135deg,
          rgba(217,119,6,0.40) 0%,
          rgba(219,39,119,0.30) 25%,
          rgba(168,85,247,0.35) 50%,
          rgba(99,102,241,0.30) 75%,
          rgba(14,165,233,0.32) 100%);
    }

    /* Animation d'ouverture (~550 ms) : le foil s'efface */
    .reveal-front.opening .seal-foil {
      animation: sealFoilFade 0.55s ease-out forwards;
    }
    @keyframes sealFoilFade {
      from { opacity: 0.80; }
      to   { opacity: 0; }
    }
    [data-theme="light"] .reveal-front.opening .seal-foil {
      animation: sealFoilFadeLight 0.55s ease-out forwards;
    }
    @keyframes sealFoilFadeLight {
      from { opacity: 0.45; }
      to   { opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .reveal-front.opening .seal-foil { transition: opacity 0.3s; opacity: 0; animation: none; }
    }
    .reveal-front h2 {
      font-family: 'Syne', sans-serif; font-size: 30px; font-weight: 800;
      letter-spacing: -0.02em; margin-bottom: 0.5rem;
    }
    .reveal-front .hint {
      font-size: 13px; color: var(--muted); margin-bottom: 2rem; line-height: 1.5;
    }
    .pull-handle {
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
      text-transform: uppercase; padding-top: 0.25rem;
    }
    /* Le spacer réserve la zone d'arrivée du front quand il glisse vers le bas.
       Même hauteur fixe que la reveal-back/front pour un slide propre. */
    .reveal-spacer { visibility: hidden; padding: 2rem 1.5rem; pointer-events: none; height: 240px; }
    .reveal-spacer h2 { font-family: 'Syne', sans-serif; font-size: 30px; font-weight: 800; line-height: 1; margin-bottom: 0.5rem; }
    .reveal-spacer .hint { font-size: 13px; margin-bottom: 2rem; line-height: 1.5; }
    .reveal-spacer .pull-handle { padding-top: 0.25rem; font-size: 12px; }
    .reveal-footer {
      margin-top: 1.5rem;
      text-align: center;
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
      position: relative;
      z-index: 3;
    }
    .next-btn {
      display: inline-block; padding: 13px 36px; font-size: 15px; font-weight: 700;
      font-family: 'Syne', sans-serif; letter-spacing: 0.03em;
      border: none; border-radius: var(--radius);
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff; cursor: pointer; box-shadow: 0 4px 20px rgba(124,111,255,0.3);
      transition: box-shadow 0.18s, transform 0.15s;
      width: 100%;
    }
    .next-btn:hover { box-shadow: 0 6px 28px rgba(124,111,255,0.5); transform: translateY(-1px); }
    .next-btn:active { transform: scale(0.98); }

    /* Bouton "?" — recherche Google Images du personnage (mode distance, après seal-break). */
    .reveal-footer:has(.card-search-btn) {
      display: flex; align-items: center; gap: 10px; justify-content: center;
    }
    .reveal-footer:has(.card-search-btn) .next-btn { flex: 1; width: auto; }
    .card-search-btn {
      flex: 0 0 auto;
      display: inline-flex; align-items: center; justify-content: center;
      width: 46px; height: 46px; border-radius: 50%;
      background: rgba(255,255,255,0.06);
      color: var(--muted);
      font-family: 'Syne', sans-serif; font-weight: 800; font-size: 20px;
      text-decoration: none;
      border: 1px solid rgba(255,255,255,0.14);
      transition: background .15s, color .15s, transform .1s, border-color .15s;
    }
    .card-search-btn:hover { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.28); }
    .card-search-btn:active { transform: scale(0.94); }

    /* Reveal-footer flottant (mobile) — utilisé en mode distant pour le bouton
     * "Prêt à voter" : la carte (back+spacer = 480px) pousse le bouton sous le
     * fold sur petit écran. On l'épingle en bas du viewport et on ajoute du
     * padding-bottom au body pour que le scroll puisse révéler le bas de la
     * carte sans que le bouton ne masque quoi que ce soit. */
    @media (max-width: 720px) {
      .reveal-footer.is-floating-mobile {
        position: fixed;
        left: 0; right: 0;
        bottom: 0;
        margin: 0;
        padding:
          14px max(12px, env(safe-area-inset-right, 0px))
          calc(env(safe-area-inset-bottom, 0px) + 14px)
          max(12px, env(safe-area-inset-left, 0px));
        background: linear-gradient(to top, var(--bg) 72%, transparent);
        z-index: 50;
        pointer-events: auto;
      }
      .reveal-footer.is-floating-mobile .next-btn {
        max-width: 460px;
        margin: 0 auto;
        display: block;
      }
      body:has(.reveal-footer.is-floating-mobile) {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
      }
    }

    /* ── Done screen countdown ── */
    @keyframes countdown {
      from { width: 100%; }
      to   { width: 0%; }
    }
    .done-countdown-track {
      margin-top: 1.75rem; height: 3px;
      background: var(--surface2); border-radius: 2px; overflow: hidden;
    }
    .done-countdown-bar {
      height: 100%; border-radius: 2px;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      animation: countdown 10s linear forwards;
    }

    /* ── Vote screen ── */
    .vote-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 1.25rem 0 1.5rem;
    }
    .vote-btn {
      padding: 14px 10px; border: 1px solid var(--border); border-radius: var(--radius);
      background: var(--surface2); color: var(--muted);
      font-size: 14px; font-family: 'DM Sans', sans-serif; font-weight: 500;
      cursor: pointer; text-align: center; transition: all 0.18s;
    }
    .vote-btn:hover { background: rgba(244,114,182,0.08); color: var(--text); border-color: rgba(244,114,182,0.3); }
    .vote-btn.selected {
      border-color: rgba(244,114,182,0.55); background: rgba(244,114,182,0.12); color: var(--text);
      box-shadow: 0 0 14px rgba(244,114,182,0.15);
    }
    /* Soi-même dans la grille de vote : visible mais non interactif. */
    .vote-btn.is-self { font-style: italic; opacity: 0.55; cursor: default; }
    .vote-btn.is-self:hover { background: var(--surface2); color: var(--muted); border-color: var(--border); }
    /* Joueur visible mais non cliquable (ex. non-candidat en runoff). */
    .vote-btn.non-clickable { opacity: 0.4; cursor: not-allowed; }
    .vote-btn.non-clickable:hover { background: var(--surface2); color: var(--muted); border-color: var(--border); }
    .start-btn:disabled { opacity: 0.38; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

    /* Refonte étape 6 : vote targets en cartes (avatar + nom + badge votes).
     * .vote-target cohabite avec .vote-btn (back-compat wiring). Quand .vote-btn
     * a aussi .vote-target, on neutralise le padding/text-align hérité et on
     * adopte le layout colonne (avatar haut, nom bas, badge en abs top). */
    .vote-btn.vote-target {
      padding: 16px 12px;
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      min-height: 110px;
      position: relative;
      background: var(--surface);
      color: var(--text);
      border-radius: var(--r-md, 14px);
      transition: transform 0.15s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)), border-color 0.15s, background 0.18s, box-shadow 0.18s;
    }
    .vote-btn.vote-target:hover {
      border-color: rgba(124,111,255,0.45);
      background: rgba(124,111,255,0.06);
    }
    .vote-btn.vote-target:active { transform: scale(0.97); }
    .vote-btn.vote-target.voting,
    .vote-btn.vote-target.selected {
      border-color: rgba(192,132,252,0.6);
      background: rgba(124,111,255,0.12);
      box-shadow: 0 0 18px rgba(124,111,255,0.2);
    }
    .vote-btn.vote-target.self,
    .vote-btn.vote-target.is-self {
      opacity: 0.6;
      cursor: not-allowed;
      background: rgba(255,255,255,0.02);
    }
    [data-theme="light"] .vote-btn.vote-target.self,
    [data-theme="light"] .vote-btn.vote-target.is-self { background: rgba(0,0,0,0.02); }
    .vote-btn.vote-target.self::before,
    .vote-btn.vote-target.is-self::before {
      content: 'TOI'; position: absolute; top: 8px; right: 8px;
      font-size: 9px; font-weight: 700; letter-spacing: 0.15em;
      color: var(--muted);
      padding: 2px 6px; border-radius: 4px;
      background: rgba(255,255,255,0.05);
    }
    .vote-btn.vote-target .vt-avatar {
      width: 48px; height: 48px; border-radius: 50%;
      display: grid; place-items: center;
      font-size: 18px; font-weight: 800;
      color: #0a0a12;
      flex-shrink: 0;
    }
    .vote-btn.vote-target .vt-name {
      font-size: 13px; font-weight: 600;
      color: var(--text);
      text-align: center;
      line-height: 1.2;
      max-width: 100%;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .vote-btn.vote-target .vt-votes {
      position: absolute; top: 8px; left: 8px;
      background: var(--accent-2, #c084fc); color: #0a0a12;
      font-size: 11px; font-weight: 800;
      min-width: 22px; height: 22px;
      border-radius: 999px; padding: 0 7px;
      display: grid; place-items: center;
    }

    /* ── Result — flip card ── */
    @keyframes flipCardPulse {
      0%, 100% { box-shadow: 0 4px 24px rgba(124,111,255,0.1);  border-color: rgba(255,255,255,0.08); }
      50%       { box-shadow: 0 8px 36px rgba(124,111,255,0.28); border-color: rgba(124,111,255,0.35); }
    }
    .flip-scene { perspective: 900px; margin: 1.25rem 0; }
    .flip-card {
      position: relative; transform-style: preserve-3d;
      transition: transform 0.75s cubic-bezier(0.4, 0.15, 0.2, 1);
      cursor: pointer; border-radius: var(--radius-lg);
    }
    .flip-card.flipped { transform: rotateY(180deg); cursor: default; }
    .flip-face {
      backface-visibility: hidden; -webkit-backface-visibility: hidden;
      border-radius: var(--radius-lg); padding: 2.25rem 2rem; text-align: center;
    }
    .flip-face-front {
      background: var(--surface2); border: 1px solid rgba(255,255,255,0.08);
      animation: flipCardPulse 2.2s ease-in-out infinite;
    }
    .flip-card.flipped .flip-face-front { animation: none; }
    .flip-face-back {
      position: absolute; inset: 0;
      transform: rotateY(180deg);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
    }
    .flip-face-back.is-win  { background: rgba(52,211,153,0.07);  border: 1px solid rgba(52,211,153,0.28);  box-shadow: 0 0 40px rgba(52,211,153,0.08); }
    .flip-face-back.is-loss { background: rgba(244,114,182,0.08); border: 1px solid rgba(244,114,182,0.32); box-shadow: 0 0 40px rgba(244,114,182,0.08); }
    .flip-question {
      font-family: 'Syne', sans-serif; font-size: 54px; font-weight: 800; line-height: 1;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      margin-bottom: 0.75rem;
    }
    .flip-player-name {
      font-family: 'Syne', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
    }
    .flip-hint {
      font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--muted); margin-top: 1rem;
    }
    .flip-role-icon { font-size: 48px; line-height: 1; margin-bottom: 0.75rem; }
    .flip-role-label {
      font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700;
      letter-spacing: 0.16em; text-transform: uppercase; margin-top: 0.4rem;
    }
    .flip-face-back.is-win  .flip-player-name, .flip-face-back.is-win  .flip-role-label { color: var(--green); }
    .flip-face-back.is-loss .flip-player-name, .flip-face-back.is-loss .flip-role-label { color: var(--pink); }
    .result-outcome {
      text-align: center; opacity: 0;
      transition: opacity 0.45s ease;
    }
    .result-outcome h2 {
      font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 800;
      letter-spacing: -0.01em; margin-bottom: 0.5rem;
    }
    .result-outcome p { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 0.75rem; }
    .result-real-undercovers { margin-top: 1rem; margin-bottom: 0.25rem; }
    .result-real-undercovers .sublabel {
      font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 6px;
    }
    .result-real-name {
      font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 800; color: var(--pink);
    }

    /* ── Vote reveal overlay ── */
    .vote-overlay {
      position: fixed; inset: 0; z-index: 200;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 28px; gap: 1.75rem;
      background: transparent; pointer-events: none;
      transition: background 0.35s ease;
      /* Scroll si le contenu dépasse (cas mobile petit écran : carte +
       * outcome + points + bouton + countdown peuvent déborder verticalement
       * et masquer le haut OU le bouton du bas). */
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .vote-overlay.visible { background: rgba(13,13,18,0.93); pointer-events: auto; }
    [data-theme="light"] .vote-overlay.visible { background: rgba(20, 18, 40, 0.78); }
    .vr-wrap {
      perspective: 1200px;
      width: 86%; max-width: 320px;
      aspect-ratio: 5 / 7;
      flex-shrink: 0;        /* ne pas écraser la card si l'overlay scroll */
      transform: scale(0.2); opacity: 0;
      transition: transform 0.55s cubic-bezier(0.34, 1.45, 0.64, 1), opacity 0.3s ease;
    }
    /* Mobile : réduit fortement la flip card pour que la card + l'outcome +
     * le bouton tiennent dans le viewport sans scroll. Si malgré ça le
     * contenu dépasse (petits écrans / outcome long), l'overflow-y:auto
     * du parent permet un scroll fluide. */
    @media (max-width: 480px) {
      .vote-overlay {
        padding: 16px;
        gap: 1rem;
        padding-top: max(env(safe-area-inset-top, 0px), 16px);
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
      }
      .vr-wrap {
        width: 60%;
        max-width: 200px;
      }
      .vr-face { padding: 1.25rem 1rem; gap: 0.4rem; }
      .vr-question { font-size: 64px; }
      .vr-name { font-size: 20px; }
      .vr-role { font-size: 11px; letter-spacing: 0.14em; }
      .vr-icon-big { font-size: 44px; margin-bottom: 0.2rem; }
      .vr-outcome h2 { font-size: 18px; margin-bottom: 0.3rem; }
      .vr-outcome p { font-size: 13px; line-height: 1.45; margin-bottom: 0.6rem; }
      .vr-outcome .start-btn { min-height: 48px; padding: 12px 1.75rem; font-size: 15px; }
    }
    @media (max-width: 360px) {
      .vr-wrap { width: 56%; max-width: 170px; }
      .vr-face { padding: 1rem 0.85rem; }
      .vr-question { font-size: 54px; }
      .vr-name { font-size: 18px; }
      .vr-icon-big { font-size: 38px; }
    }
    .vr-wrap.grown { transform: scale(1); opacity: 1; }
    @keyframes lossShake {
      0%,100% { transform: scale(1) translateX(0); }
      15%      { transform: scale(1) translateX(-14px) rotate(-1.5deg); }
      30%      { transform: scale(1) translateX(12px)  rotate(1.5deg); }
      45%      { transform: scale(1) translateX(-9px); }
      60%      { transform: scale(1) translateX(7px); }
      75%      { transform: scale(1) translateX(-4px); }
    }
    .vr-wrap.shake { animation: lossShake 0.65s ease-in-out; }
    @keyframes cardFlip {
      0%   { transform: rotateY(0deg);   animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.5); }
      47%  { transform: rotateY(90deg);  animation-timing-function: linear; }
      53%  { transform: rotateY(90deg);  animation-timing-function: cubic-bezier(0.1, 0.5, 0.45, 1); }
      100% { transform: rotateY(180deg); }
    }
    .vr-inner {
      position: relative; width: 100%; height: 100%;
      transform-style: preserve-3d;
      border-radius: var(--r-xl, var(--radius-lg));
    }
    .vr-inner.flipped { animation: cardFlip 0.6s forwards; }
    .vr-face {
      position: absolute; inset: 0;
      backface-visibility: hidden; -webkit-backface-visibility: hidden;
      border-radius: var(--r-xl, var(--radius-lg));
      padding: 2rem 1.5rem;
      text-align: center;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 0.5rem;
    }
    .vr-front {
      background: linear-gradient(155deg, #1a1a2a, #0d0d18);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-md, 0 12px 48px rgba(0,0,0,0.6));
      animation: flipCardPulse 2.2s ease-in-out infinite;
    }
    [data-theme="light"] .vr-front {
      background: linear-gradient(155deg, #ffffff, #eaeaf2);
    }
    .vr-back {
      transform: rotateY(180deg);
    }
    .vr-back.is-win {
      background: linear-gradient(155deg, rgba(52,211,153,0.22), rgba(56,189,248,0.06));
      border: 1px solid rgba(52,211,153,0.4);
      box-shadow: 0 0 70px rgba(52,211,153,0.28);
    }
    .vr-back.is-loss {
      background: linear-gradient(155deg, rgba(248,113,113,0.20), rgba(244,114,182,0.06));
      border: 1px solid rgba(248,113,113,0.4);
      box-shadow: 0 0 70px rgba(239,68,68,0.22);
    }
    /* Mister White voté : flip dédié (argent froid) */
    .vr-back.is-mrwhite {
      background: linear-gradient(155deg, rgba(203,213,225,0.18), rgba(148,163,184,0.04));
      border: 1px solid rgba(203,213,225,0.45);
      box-shadow: 0 0 70px rgba(203,213,225,0.25);
    }
    .vr-back.is-mrwhite .vr-name { color: #cbd5e1; }
    .vr-back.is-mrwhite .vr-role { color: #cbd5e1; }
    .vr-question {
      font-family: 'Syne', sans-serif; font-size: 96px; font-weight: 800; line-height: 1;
      color: rgba(255,255,255,0.10);
      margin-bottom: 0.25rem;
    }
    [data-theme="light"] .vr-question { color: rgba(20,18,40,0.10); }
    .vr-name {
      font-family: 'Syne', sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
      color: var(--text);
    }
    .vr-back.is-win .vr-name  { color: var(--green); }
    .vr-back.is-loss .vr-name { color: #ef4444; }
    .vr-role {
      font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700;
      letter-spacing: 0.18em; text-transform: uppercase; margin-top: 0.25rem;
    }
    .vr-back.is-win .vr-role  { color: var(--green); }
    .vr-back.is-loss .vr-role { color: #ef4444; }
    .vr-icon-big { font-size: 64px; line-height: 1; margin-bottom: 0.4rem; }
    .vr-outcome {
      text-align: center; opacity: 0;
      transition: opacity 0.45s ease; width: 100%; max-width: 360px;
    }
    .vr-outcome .start-btn {
      width: auto;
      padding: 14px 2.25rem;
      min-height: 52px;
      background: var(--grad-hero);
      border: 0;
      border-radius: var(--r-lg, 18px);
      color: #fff;
      font-family: 'Syne', sans-serif;
      font-size: 15px; font-weight: 700; letter-spacing: 0.01em;
      box-shadow: var(--shadow-glow, 0 8px 28px rgba(124,111,255,0.45));
      transition: transform 0.12s var(--ease-out, ease), box-shadow 0.18s;
    }
    .vr-outcome .start-btn:hover { box-shadow: 0 10px 32px rgba(124,111,255,0.55); }
    .vr-outcome .start-btn:active { transform: scale(0.98); }
    .vr-outcome.visible { opacity: 1; }
    .vr-outcome h2 {
      font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 800;
      letter-spacing: -0.01em; margin-bottom: 0.4rem;
    }
    .vr-outcome.is-win h2  { color: var(--green); }
    .vr-outcome.is-loss h2 { color: #ef4444; }
    .vr-outcome p { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 1.25rem; }
    .vr-culprit {
      background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.28);
      border-radius: 12px; padding: 0.75rem 1.1rem; margin-bottom: 1.1rem;
      font-size: 12px; color: var(--muted); line-height: 1.4;
    }
    .vr-culprit strong {
      display: block; font-family: 'Syne', sans-serif; font-size: 22px;
      font-weight: 800; color: #ef4444; letter-spacing: -0.01em; margin-top: 0.3rem;
    }

    /* Confetti */
    .confetti-p {
      position: fixed; top: -14px; pointer-events: none; z-index: 400;
      animation: confettiFall linear forwards;
    }
    @keyframes confettiFall {
      0%   { transform: translateY(0)      rotate(0deg)   scale(1);   opacity: 1; }
      85%  { opacity: 1; }
      100% { transform: translateY(108vh)  rotate(840deg) scale(0.4); opacity: 0; }
    }

    /* ── Idle nudge ── */
    @keyframes nudgeCard {
      0%, 100% { transform: translateY(0);    box-shadow: 0 8px 32px rgba(0,0,0,0.35); }
      8%        { transform: translateY(22px); box-shadow: 0 24px 48px rgba(124,111,255,0.18); }
      16%       { transform: translateY(-4px); }
      23%       { transform: translateY(0);    box-shadow: 0 8px 32px rgba(0,0,0,0.35); }
    }
    @keyframes chevronPulse {
      0%, 55%, 100% { opacity: 0.2; transform: translateY(0); }
      25%            { opacity: 1;   transform: translateY(5px); }
      42%            { opacity: 0.45; transform: translateY(1px); }
    }
    .pull-chevrons {
      display: flex; flex-direction: column; align-items: center; gap: 0px;
    }
    .pull-chevron { opacity: 0.3; transition: opacity 0.2s; display: block; }
    .reveal-front.idle {
      animation: nudgeCard 5s cubic-bezier(0.22, 1, 0.36, 1) 2.5s infinite;
    }
    .reveal-front.idle .pull-handle { color: var(--accent); }
    .reveal-front.idle .pull-chevron {
      animation: chevronPulse 1.6s ease-in-out infinite;
    }
    .reveal-front.idle .pull-chevron:nth-child(1) { animation-delay: 0s; }
    .reveal-front.idle .pull-chevron:nth-child(2) { animation-delay: 0.18s; }
    .reveal-front.idle .pull-chevron:nth-child(3) { animation-delay: 0.36s; }

    /* ── GM player selector ── */
    /* ─────────────────────────────────────────────────────────────
     * GM panel (refonte mockup) — card distincte couronne + radios
     * stylés (avatar gradient + nom + check 👑/○) + hint dynamique.
     * Cohabite avec les anciennes .gm-player-btn / .gm-player-grid
     * (gardées pour le wiring events.js et le rendu remote lobby host).
     * ───────────────────────────────────────────────────────────── */
    .gm-panel {
      background: linear-gradient(155deg, rgba(251,191,36,0.10), rgba(244,114,182,0.04) 70%, transparent);
      border: 1px solid rgba(251,191,36,0.30);
      border-radius: var(--r-lg, 18px);
      padding: 16px;
      display: flex; flex-direction: column; gap: 12px;
    }
    .gm-panel-head {
      display: flex; align-items: center; gap: 12px;
    }
    .gm-crown {
      width: 38px; height: 38px;
      border-radius: 12px;
      display: grid; place-items: center;
      font-size: 19px;
      background: linear-gradient(135deg, rgba(251,191,36,0.25), rgba(244,114,182,0.15));
      border: 1px solid rgba(251,191,36,0.4);
      flex-shrink: 0;
    }
    .gm-panel-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .gm-panel-name {
      font-family: 'Syne', sans-serif;
      font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
      color: var(--text);
    }
    .gm-panel-sub {
      font-size: 12px; color: var(--text-2);
      line-height: 1.35;
    }
    .gm-section-label {
      display: flex; align-items: center; gap: 8px;
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--text-2);
      margin: 0;
    }
    .gm-required {
      display: inline-flex; align-items: center;
      font-size: 9px; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--bad, #f87171);
      padding: 2px 7px; border-radius: 999px;
      background: rgba(239,68,68,0.10);
      border: 1px solid rgba(239,68,68,0.30);
    }
    .gm-picker {
      display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    }
    .gm-radio {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px;
      min-height: 56px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md, 12px);
      color: var(--text);
      font-family: inherit;
      cursor: pointer;
      transition: transform 0.12s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)), border-color 0.15s, background 0.15s;
    }
    .gm-radio:hover { border-color: rgba(251,191,36,0.4); }
    .gm-radio:active { transform: scale(0.97); }
    .gm-radio .gm-r-avatar {
      width: 36px; height: 36px; border-radius: 50%;
      display: grid; place-items: center;
      font-weight: 800; font-size: 13px;
      color: #0a0a12;
      flex-shrink: 0;
    }
    .gm-radio .gm-r-name {
      flex: 1; min-width: 0;
      font-size: 14px; font-weight: 600;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .gm-radio .gm-r-check {
      font-size: 16px; line-height: 1;
      color: var(--text-2);
      flex-shrink: 0;
    }
    .gm-radio.active {
      background: rgba(251,191,36,0.14);
      border-color: rgba(251,191,36,0.55);
    }
    .gm-radio.active .gm-r-check { color: var(--amber, #fbbf24); }
    .gm-empty {
      grid-column: 1 / -1;
      font-size: 13px; color: var(--text-2);
      text-align: center; padding: 12px 8px;
    }
    .gm-hint {
      font-size: 12px; color: var(--text-2);
      padding: 8px 10px;
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--border);
      border-radius: var(--r-sm, 10px);
      line-height: 1.4;
    }
    [data-theme="light"] .gm-panel {
      background: linear-gradient(155deg, rgba(217,119,6,0.06), rgba(236,72,153,0.03) 70%, transparent);
      border-color: rgba(217,119,6,0.25);
    }
    [data-theme="light"] .gm-hint { background: rgba(28,22,56,0.03); }
    @media (max-width: 380px) {
      .gm-picker { grid-template-columns: 1fr; }
    }

    .gm-player-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .gm-player-btn {
      display: flex; align-items: center; gap: 10px;
      padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius);
      background: var(--surface); color: var(--muted);
      font-size: 13px; font-family: 'DM Sans', sans-serif; font-weight: 400;
      cursor: pointer; text-align: left; transition: all 0.18s; width: 100%;
    }
    .gm-player-btn:hover { background: var(--surface2); color: var(--text); border-color: rgba(255,255,255,0.14); }
    .gm-player-btn.active { border-color: rgba(251,191,36,0.45); background: rgba(251,191,36,0.09); color: var(--text); }
    .gm-player-btn.active .gm-player-dot { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
    .gm-player-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.15); flex-shrink: 0; transition: all 0.18s; }

    /* ── Toggle switch "imposteur" ── */
    .toggle-label {
      display: inline-flex; align-items: center; justify-content: space-between;
      gap: 10px; cursor: pointer;
      padding: 7px 11px;
      border: 1px solid var(--border); border-radius: var(--radius);
      background: var(--surface);
      transition: border-color 0.18s, background 0.18s;
      user-select: none;
    }
    .toggle-label:hover { background: var(--surface2); border-color: rgba(255,255,255,0.14); }
    .toggle-label.on { border-color: rgba(124,111,255,0.4); background: rgba(124,111,255,0.08); }
    .toggle-label-text {
      display: flex; align-items: center; gap: 10px;
      font-size: 13px; font-family: 'DM Sans', sans-serif; color: var(--muted);
      transition: color 0.18s;
    }
    .toggle-label.on .toggle-label-text { color: var(--text); }
    .toggle-label-text .toggle-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: rgba(255,255,255,0.15); flex-shrink: 0;
      transition: background 0.18s, box-shadow 0.18s;
    }
    .toggle-label.on .toggle-dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
    .toggle-checkbox { display: none; }
    .toggle-track {
      flex-shrink: 0;
      width: 38px; height: 22px; border-radius: 100px;
      background: var(--surface2);
      border: 1px solid rgba(255,255,255,0.1);
      position: relative;
      transition: background 0.22s, border-color 0.22s, box-shadow 0.22s;
    }
    .toggle-label.on .toggle-track {
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      border-color: transparent;
      box-shadow: 0 0 12px rgba(124,111,255,0.4);
    }
    .toggle-thumb {
      position: absolute;
      top: 3px; left: 3px;
      width: 14px; height: 14px; border-radius: 50%;
      background: rgba(255,255,255,0.35);
      transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.22s;
    }
    .toggle-label.on .toggle-thumb {
      transform: translateX(16px);
      background: #fff;
    }
    .toggle-label.gm-on { border-color: rgba(251,191,36,0.4); background: rgba(251,191,36,0.07); }
    .toggle-label.gm-on .toggle-label-text { color: var(--text); }
    .toggle-label.gm-on .toggle-dot { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
    .toggle-label.gm-on .toggle-track { background: linear-gradient(135deg, var(--amber), #f59e0b); border-color: transparent; box-shadow: 0 0 12px rgba(251,191,36,0.4); }
    .toggle-label.gm-on .toggle-thumb { transform: translateX(16px); background: #fff; }
    .toggle-label.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

    /* ── Maître du jeu — écran saisie ── */
    .gm-badge {
      display: inline-block;
      font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--amber);
      background: rgba(251,191,36,0.1);
      border: 1px solid rgba(251,191,36,0.28);
      padding: 4px 12px; border-radius: 100px; margin-bottom: 14px;
    }
    /* Card wrapper du formulaire GM (saisie des 2 mots).
     * Inspirée visuellement de .reveal-back (gradient violet doux), mais
     * SANS hauteur fixe ni overflow:hidden — le contenu (2 champs + divider
     * + choix imposteur) doit pouvoir grandir librement sans être clippé. */
    .gm-form-card {
      background: radial-gradient(ellipse at top, rgba(124,111,255,0.10), transparent 60%), var(--surface2);
      border: 1px solid rgba(251,191,36,0.25);
      border-radius: var(--radius-lg);
      padding: 1.5rem 1.25rem;
      margin-bottom: 1.5rem;
      position: relative;
    }
    @media (max-width: 480px) {
      .gm-form-card { padding: 1.25rem 1rem; }
    }
    .gm-word-field { margin-bottom: 1rem; }
    .gm-word-field-label {
      display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
    }
    .gm-word-input {
      width: 100%; padding: 13px 16px; font-size: 16px;
      font-family: 'DM Sans', sans-serif;
      border: 1px solid var(--border); border-radius: var(--radius);
      background: var(--surface); color: var(--text);
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .gm-word-input::placeholder { color: var(--muted); }
    .gm-word-input:focus { outline: none; border-color: rgba(251,191,36,0.5); box-shadow: 0 0 0 3px rgba(251,191,36,0.1); }
    .gm-input-wrap { position: relative; }
    .gm-suggest {
      position: absolute; top: calc(100% + 4px); left: 0; right: 0;
      z-index: 20;
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
      max-height: 220px; overflow-y: auto;
      display: none;
      box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    }
    .gm-suggest.open { display: block; }
    .gm-suggest-item {
      padding: 8px 12px; font-size: 14px; cursor: pointer; color: var(--text);
      border-bottom: 1px solid var(--border);
    }
    .gm-suggest-item:last-child { border-bottom: none; }
    .gm-suggest-item:hover { background: rgba(251,191,36,0.08); color: var(--text); }

    /* Bouton "Inspire-moi" : remplit les deux champs avec un duel crossover */
    .gm-inspire-btn {
      width: 100%;
      margin-bottom: 12px;
      padding: 11px 14px;
      font-family: 'DM Sans', sans-serif;
      font-size: 13px; font-weight: 600;
      border-radius: var(--radius);
      border: 1px solid rgba(251, 191, 36, 0.40);
      background: rgba(251, 191, 36, 0.10);
      color: var(--amber);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
    }
    .gm-inspire-btn:hover {
      background: rgba(251, 191, 36, 0.18);
      border-color: rgba(251, 191, 36, 0.60);
      transform: translateY(-1px);
    }
    .gm-inspire-btn:active { transform: translateY(0); }
    .gm-inspire-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
    [data-theme="light"] .gm-inspire-btn {
      background: rgba(180, 83, 9, 0.08);
      color: #92400e;
      border-color: rgba(180, 83, 9, 0.30);
    }
    [data-theme="light"] .gm-inspire-btn:hover {
      background: rgba(180, 83, 9, 0.14);
      border-color: rgba(180, 83, 9, 0.50);
    }

    /* Flash visuel sur les inputs après inspiration */
    .gm-word-input.flash { animation: inspireFlash 0.5s ease-out; }
    @keyframes inspireFlash {
      0%   { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.55); border-color: rgba(251, 191, 36, 0.80); }
      50%  { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.15); border-color: rgba(251, 191, 36, 0.55); }
      100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
    }

    .gm-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0.5rem 0 1.5rem; }
    .gm-choice-btn {
      padding: 11px 10px; border: 1px solid var(--border); border-radius: var(--radius);
      background: var(--surface); color: var(--muted);
      font-size: 13px; font-family: 'DM Sans', sans-serif; font-weight: 400;
      cursor: pointer; text-align: center; transition: all 0.18s;
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .gm-choice-btn:hover { background: var(--surface2); color: var(--text); border-color: rgba(255,255,255,0.14); }
    .gm-choice-btn.active { border-color: rgba(244,114,182,0.45); background: rgba(244,114,182,0.08); color: var(--text); }
    .gm-choice-btn.active .gm-choice-dot { background: var(--pink); box-shadow: 0 0 8px var(--pink); }
    .gm-choice-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.15); flex-shrink: 0; transition: all 0.18s; }

    /* ── Maître du jeu — écran révélation ── */
    .gm-reveal-card {
      background: var(--surface); border: 1px solid rgba(251,191,36,0.2);
      border-radius: var(--radius-lg); padding: 2.5rem 1.5rem; text-align: center;
      box-shadow: 0 0 40px rgba(251,191,36,0.07);
    }
    /* Mobile : padding latéral réduit pour libérer l'espace utile aux mots
     * en gradient (.gm-reveal-word / .gm-reveal-normal) qui peuvent toucher
     * les bords sur petits écrans avec un mot un peu long. */
    @media (max-width: 480px) {
      .gm-reveal-card { padding: 2rem 1.1rem; }
    }
    @media (max-width: 360px) {
      .gm-reveal-card { padding: 1.75rem 0.9rem; }
    }
    .gm-reveal-card h2 { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 800; margin-bottom: 1.75rem; letter-spacing: -0.01em; }
    .gm-reveal-section { margin-bottom: 1.25rem; }
    .gm-reveal-sublabel {
      font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 6px;
    }
    .gm-reveal-name {
      font-family: 'Syne', sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
      color: var(--pink);
    }
    /* Gradient text via background-clip:text + letter-spacing négatif → les
     * glyphes du début et de la fin se font couper aux bords. Le combo
     * inline-block + padding latéral ouvre la zone de clip pour qu'elle
     * englobe les glyphes complets. Pattern identique à .home-title. */
    .gm-reveal-word {
      font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
      background: linear-gradient(135deg, var(--pink), var(--accent2));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      display: inline-block;
      padding: 0.08em 0.18em;
      max-width: 100%;
      overflow-wrap: anywhere;
    }
    .gm-reveal-normal {
      font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      display: inline-block;
      padding: 0.08em 0.18em;
      max-width: 100%;
      overflow-wrap: anywhere;
    }
    .gm-divider {
      border: none; border-top: 1px solid var(--border); margin: 1.25rem 0;
    }

    /* Points awarded block inside vote overlay */
    .vr-points-block {
      margin: 0.9rem 0 1.1rem;
      padding: 12px 14px;
      background: rgba(124,111,255,0.06);
      border: 1px solid rgba(124,111,255,0.22);
      border-radius: 12px;
      text-align: left;
    }
    .vr-outcome.is-win .vr-points-block { background: rgba(52,211,153,0.08); border-color: rgba(52,211,153,0.28); }
    .vr-outcome.is-loss .vr-points-block { background: rgba(244,114,182,0.08); border-color: rgba(244,114,182,0.26); }
    .vr-points-label {
      font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 8px; text-align: center;
    }
    .vr-points-list { display: flex; flex-direction: column; gap: 6px; }
    .vr-points-row {
      display: flex; align-items: center; gap: 9px;
      font-size: 13px; animation: slideIn 0.35s ease both;
    }
    .vr-points-row:nth-child(1) { animation-delay: 0.1s; }
    .vr-points-row:nth-child(2) { animation-delay: 0.2s; }
    .vr-points-row:nth-child(3) { animation-delay: 0.3s; }
    .vr-points-row:nth-child(4) { animation-delay: 0.4s; }
    .vr-points-row:nth-child(5) { animation-delay: 0.5s; }
    .vr-points-row:nth-child(6) { animation-delay: 0.6s; }
    .vr-points-name {
      flex: 1; font-weight: 600; color: var(--text);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .vr-points-gain {
      font-family: 'Syne', sans-serif; font-weight: 800; font-size: 15px;
      color: var(--green); letter-spacing: -0.01em;
      text-shadow: 0 0 12px rgba(52,211,153,0.4);
    }
    .vr-points-total {
      font-size: 11px; font-weight: 600; color: var(--muted);
      padding: 2px 8px; border-radius: 10px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      min-width: 50px; text-align: center;
    }

    /* ── Mode segments (Classique / Crossover / Maître du jeu) ── */
    .mode-segments {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin-bottom: 10px;
    }
    .mode-seg {
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      padding: 12px 6px 11px;
      border: 1px solid var(--border); border-radius: var(--radius);
      background: var(--surface); color: var(--muted);
      font-family: 'DM Sans', sans-serif; cursor: pointer;
      transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
      position: relative; overflow: hidden;
      min-height: 86px;
    }
    .mode-seg::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(124,111,255,0), rgba(192,132,252,0));
      opacity: 0; transition: opacity 0.2s;
      pointer-events: none;
    }
    .mode-seg:hover { border-color: rgba(255,255,255,0.18); color: var(--text); transform: translateY(-1px); }
    .mode-seg-icon {
      font-size: 22px; line-height: 1; margin-bottom: 2px;
      filter: grayscale(0.5) opacity(0.65);
      transition: filter 0.18s, transform 0.2s;
    }
    .mode-seg-title {
      font-size: 12px; font-weight: 700; letter-spacing: 0.01em;
      display: inline-flex; align-items: center; gap: 4px;
    }
    .mode-seg-beta {
      font-size: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 1px 5px; border-radius: 6px;
      background: rgba(251,191,36,0.18); color: var(--amber);
      border: 1px solid rgba(251,191,36,0.35);
    }
    .mode-seg-sub {
      font-size: 10px; font-weight: 500; opacity: 0.55;
      letter-spacing: 0.01em;
    }
    .mode-seg.active {
      border-color: rgba(124,111,255,0.45);
      background: rgba(124,111,255,0.1);
      color: var(--text);
      box-shadow: 0 4px 16px rgba(124,111,255,0.18), inset 0 0 0 1px rgba(124,111,255,0.15);
    }
    .mode-seg.active .mode-seg-icon { filter: none; transform: scale(1.05); }
    .mode-seg.active .mode-seg-sub { opacity: 0.85; color: var(--accent2); }
    .mode-seg.active::before { opacity: 1; background: linear-gradient(135deg, rgba(124,111,255,0.06), rgba(192,132,252,0.04)); }
    .mode-seg.active.crossover {
      border-color: rgba(56,189,248,0.5);
      background: rgba(56,189,248,0.08);
      box-shadow: 0 4px 16px rgba(56,189,248,0.18);
    }
    .mode-seg.active.crossover .mode-seg-sub { color: var(--accent3); }
    .mode-seg.active.gm {
      border-color: rgba(251,191,36,0.5);
      background: rgba(251,191,36,0.08);
      box-shadow: 0 4px 16px rgba(251,191,36,0.18);
    }
    .mode-seg.active.gm .mode-seg-sub { color: var(--amber); }
    .mode-seg:active { transform: scale(0.97); }

    /* ── Modifier chips (Hardcore + Show impostor) ── */
    .modifiers-row {
      display: flex; flex-direction: column; gap: 6px;
      margin-top: 4px;
    }
    .modifier-chip {
      display: flex; align-items: center; gap: 11px;
      padding: 9px 12px;
      border: 1px solid var(--border); border-radius: var(--radius);
      background: var(--surface); color: var(--text);
      cursor: pointer; user-select: none;
      transition: border-color 0.18s, background 0.18s, opacity 0.25s, max-height 0.25s, padding 0.25s, margin 0.25s;
      max-height: 100px; overflow: hidden;
    }
    .modifier-chip:hover { border-color: rgba(255,255,255,0.16); background: var(--surface2); }
    .modifier-chip.hidden {
      max-height: 0; padding-top: 0; padding-bottom: 0;
      border-width: 0; opacity: 0; pointer-events: none;
    }
    .modifier-chip.disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .modifier-chip.disabled:hover { border-color: var(--border); background: var(--surface); }
    .modifier-icon {
      font-size: 18px; line-height: 1; flex-shrink: 0;
      width: 30px; height: 30px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 8px;
      background: rgba(255,255,255,0.04);
      transition: background 0.2s, transform 0.2s;
    }
    .modifier-chip.on .modifier-icon {
      background: rgba(124,111,255,0.18);
      transform: scale(1.05);
    }
    #toggleHardcoreLabel.on .modifier-icon { background: rgba(244,114,182,0.18); box-shadow: 0 0 12px rgba(244,114,182,0.3); }
    .modifier-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
    .modifier-title {
      font-size: 13.5px; font-weight: 600; letter-spacing: 0.005em;
      color: var(--muted);
      transition: color 0.18s;
    }
    .modifier-chip.on .modifier-title { color: var(--text); }
    .modifier-sub {
      font-size: 11px; color: var(--muted); opacity: 0.7;
      letter-spacing: 0.01em;
    }
    .modifier-switch {
      flex-shrink: 0;
      width: 36px; height: 20px; border-radius: 100px;
      background: var(--surface2);
      border: 1px solid rgba(255,255,255,0.1);
      position: relative;
      transition: background 0.22s, border-color 0.22s, box-shadow 0.22s;
    }
    .modifier-chip.on .modifier-switch {
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      border-color: transparent;
      box-shadow: 0 0 10px rgba(124,111,255,0.4);
    }
    #toggleHardcoreLabel.on .modifier-switch {
      background: linear-gradient(135deg, var(--pink), #ef4444);
      box-shadow: 0 0 10px rgba(244,114,182,0.4);
    }
    .modifier-thumb {
      position: absolute;
      top: 2px; left: 2px;
      width: 14px; height: 14px; border-radius: 50%;
      background: rgba(255,255,255,0.4);
      transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.22s;
    }
    .modifier-chip.on .modifier-thumb { transform: translateX(16px); background: #fff; }
    .modifier-chip .toggle-checkbox { display: none; }

    /* ── Lobby distant (Phase 3a) ── */
    .game-mode-toggle { margin-bottom: 0.5rem; }
    .lobby-name-field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
    .lobby-label { font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color: var(--muted); }
    .lobby-actions { display:flex; flex-direction:column; gap:10px; }
    .lobby-action-btn { display:flex; flex-direction:column; gap:4px; padding:14px 16px; background:var(--surface2); border:1px solid #2a2a38; border-radius:12px; cursor:pointer; color: var(--text); text-align:left; }
    .lobby-action-btn.host:hover { border-color:#22c55e; }
    .lobby-action-btn.host { cursor:pointer; }
    .lobby-action-btn.join { cursor:default; }
    .lobby-action-icon { font-size:22px; }
    .lobby-action-title { font-weight:700; font-size:15px; }
    .lobby-action-sub { font-size:12px; color: var(--muted); }
    .lobby-join-inline { display:flex; gap:8px; margin-top:6px; }
    .lobby-code-input { text-transform:uppercase; letter-spacing:0.4em; text-align:center; font-weight:700; font-size:18px; }
    /* Refonte étape 8 : alignement avec mockup — gradient hero sur le code,
     * label uppercase coloré accent-2, padding aéré (20px), text-shadow doux. */
    .lobby-room-card {
      background: linear-gradient(135deg, rgba(124,111,255,0.18), rgba(244,114,182,0.05));
      border: 1px solid rgba(124,111,255,0.30);
      border-radius: var(--r-lg, 18px);
      padding: 20px;
      text-align: center;
      margin: 10px 0;
    }
    .lobby-room-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent-2, #c084fc);
      margin-bottom: 8px;
    }
    .lobby-room-code {
      font-family: 'Syne', sans-serif;
      font-size: 48px; font-weight: 800; letter-spacing: 0.12em;
      background: var(--grad-hero);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
      line-height: 1;
    }
    @media (max-width: 380px) {
      .lobby-room-code { font-size: 40px; letter-spacing: 0.10em; }
    }
    .lobby-room-code-btn {
      display:inline-flex; align-items:center; gap:10px;
      margin:6px 0;
      padding:6px 14px;
      background: transparent;
      border: 1px dashed rgba(255,255,255,0.10);
      border-radius: 12px;
      cursor: pointer;
      color: inherit;
      font-family: inherit;
      transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
    }
    .lobby-room-code-btn:hover {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.25);
    }
    .lobby-room-code-btn:active { transform: scale(0.98); }
    .lobby-room-code-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
    .lobby-room-copy-icon {
      font-size: 18px;
      opacity: 0.55;
      transition: opacity 0.15s;
    }
    .lobby-room-code-btn:hover .lobby-room-copy-icon { opacity: 1; }
    .lobby-room-hint { font-size:12px; color: var(--muted); }

    /* Compteur d'imposteurs : ligne discrète sous le headline */
    .impostor-count {
      display: inline-block;
      font-size: 12px;
      font-weight: 600;
      color: var(--pink);
      letter-spacing: 0.04em;
      padding: 4px 12px;
      background: rgba(244, 114, 182, 0.10);
      border: 1px solid rgba(244, 114, 182, 0.28);
      border-radius: 100px;
      margin-top: 6px;
    }
    [data-theme="light"] .impostor-count {
      color: #be185d;
      background: rgba(190, 24, 93, 0.08);
      border-color: rgba(190, 24, 93, 0.25);
    }

    /* Toast : message discret en bas de l'écran (ex. "Code copié ✓") */
    .cx-toast {
      position: fixed;
      bottom: 32px;
      left: 50%;
      transform: translate(-50%, 12px);
      padding: 10px 18px;
      background: var(--surface2);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 100px;
      font-size: 13px;
      font-weight: 600;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40);
      opacity: 0;
      pointer-events: none;
      z-index: 2000;
      transition: opacity 0.22s ease, transform 0.22s ease;
      white-space: nowrap;
      max-width: calc(100vw - 32px);
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .cx-toast.show { opacity: 1; transform: translate(-50%, 0); }
    @media (max-width: 480px) { .cx-toast { bottom: 24px; font-size: 12px; padding: 9px 16px; } }
    /* Refonte étape 8 : roster en cartes (avatar + nom + pts + dot status).
     * Le tag passe d'un puce texte (●/○) à un dot coloré 10x10 avec un anneau
     * vert quand online, gris quand offline. */
    .lobby-roster { list-style:none; padding:0; margin:8px 0 0 0; display:flex; flex-direction:column; gap:6px; }
    .lobby-roster li {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md, 12px);
    }
    .lobby-roster li.offline { opacity: 0.55; }
    .lobby-roster li.me { border-color: rgba(124,111,255,0.5); background: rgba(124,111,255,0.06); }
    .lobby-roster-name { flex: 1; font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .lobby-roster-tag {
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--good, #34d399);
      box-shadow: 0 0 0 3px rgba(52,211,153,0.18);
      font-size: 0;
      flex-shrink: 0;
    }
    .lobby-roster li.offline .lobby-roster-tag {
      background: var(--muted);
      box-shadow: none;
    }
    .lobby-empty { color: var(--muted); font-style:italic; padding:14px; text-align:center; background:var(--surface2); border-radius:8px; }
    .lobby-message { background:rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.4); color:#fca5a5; padding:10px 12px; border-radius:8px; margin-bottom:12px; font-size:13px; }
    .lobby-info-banner { margin-top:14px; padding:12px; background:rgba(245,158,11,0.08); border:1px solid rgba(245,158,11,0.3); border-radius:8px; color:#fcd34d; font-size:12px; }
    .lobby-leave-btn { margin-top:12px; width:100%; padding:10px; background:transparent; border:1px solid #3a3a48; color: var(--muted); border-radius:8px; cursor:pointer; }
    .lobby-leave-btn:hover { background:#1a1a24; color: var(--text); }


    /* ── Phase 4 : panneau hôte + écrans remote ── */
    .lobby-host-panel { margin-top: 8px; padding: 14px; background: var(--surface2); border: 1px solid #2a2a38; border-radius: 10px; }
    .lobby-config-row { display:flex; justify-content:space-between; align-items:center; padding: 4px 0; font-size: 13px; }
    .lobby-config-label { color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; }
    .lobby-config-value { color: var(--text); font-weight: 600; }
    .lobby-config-hint { color: var(--muted); font-size: 11px; font-style: italic; margin-top: 4px; }
    .lobby-start-btn { width: 100%; margin-top: 14px; padding: 14px; border-radius: 10px; border: 0; background: linear-gradient(135deg, #22c55e, #16a34a); color: #03200a; font-weight: 800; font-size: 16px; cursor: pointer; }
    .lobby-start-btn.disabled { background: #2a2a38; color: var(--muted); cursor: not-allowed; }
    .lobby-start-hint { text-align: center; font-size: 12px; color: var(--muted); margin-top: 8px; }

    /* Segmented mode selector inside the lobby host panel */
    .lobby-host-panel .lobby-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; background: var(--surface); border: 1px solid #2a2a38; border-radius: 10px; margin-bottom: 10px; }
    .lobby-host-panel .lobby-seg-btn {
      appearance: none; border: 0; background: transparent; color: var(--muted);
      padding: 9px 12px; border-radius: 7px; font-size: 13px; font-weight: 600;
      cursor: pointer; transition: background 0.15s, color 0.15s;
    }
    .lobby-host-panel .lobby-seg-btn:hover { color: var(--text); }
    .lobby-host-panel .lobby-seg-btn.active {
      background: linear-gradient(135deg, rgba(124,111,255,0.22), rgba(124,111,255,0.12));
      color: var(--text);
      box-shadow: inset 0 0 0 1px rgba(124,111,255,0.45);
    }

    /* Modifier chips (Hardcore) */
    .lobby-host-panel .lobby-modifs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
    .lobby-host-panel .lobby-chip {
      appearance: none; cursor: pointer;
      padding: 7px 12px; border-radius: 999px;
      background: var(--surface); border: 1px solid #2a2a38;
      color: var(--muted); font-size: 12px; font-weight: 600;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .lobby-host-panel .lobby-chip:hover { color: var(--text); border-color: #3a3a48; }
    .lobby-host-panel .lobby-chip.active {
      background: rgba(245,158,11,0.14);
      border-color: rgba(245,158,11,0.45);
      color: #fcd34d;
    }
    .lobby-host-panel .lobby-chip.disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .lobby-host-panel .lobby-chip.disabled:hover {
      color: var(--muted); border-color: #2a2a38; background: var(--surface);
    }
    .lobby-host-panel .lobby-chip.hidden { display: none; }

    /* Picker du joueur GM (mode GM remote) */
    .lobby-gm-picker {
      display: flex; flex-wrap: wrap; gap: 6px;
      margin-bottom: 12px;
    }
    .lobby-gm-opt {
      appearance: none; cursor: pointer;
      padding: 8px 14px; border-radius: 999px;
      background: var(--surface); border: 1px solid #2a2a38;
      color: var(--muted); font-size: 13px; font-weight: 500;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .lobby-gm-opt:hover { color: var(--text); border-color: #3a3a48; }
    .lobby-gm-opt.active {
      background: rgba(245,158,11,0.18);
      border-color: rgba(245,158,11,0.55);
      color: #fcd34d;
    }
    [data-theme="light"] .lobby-gm-opt.active {
      background: rgba(180,83,9,0.10);
      border-color: rgba(180,83,9,0.40);
      color: #92400e;
    }

    /* Categories grid: tighten visual within the host panel (it owns its own .setup-section) */
    .lobby-host-panel #lobbyCatsSection { margin: 0 -2px 2px; }
    .lobby-host-panel #lobbyCatsSection .setup-section { background: transparent; border: 0; padding: 0; margin: 0; }


    /* Bouton Quitter discreet — coin haut à gauche, fixé à l'écran.
     * Safe-area : respecte la zone du notch en mode PWA standalone (iPhone). */
    .remote-leave-corner {
      position: fixed;
      top: max(10px, calc(env(safe-area-inset-top) + 6px));
      left: max(10px, calc(env(safe-area-inset-left) + 6px));
      z-index: 50;
      background: transparent; border: 0; color: var(--muted);
      font-size: 12px; padding: 6px 10px; cursor: pointer;
      letter-spacing: 0.04em; opacity: 0.65; transition: opacity 0.15s, color 0.15s;
    }
    .remote-leave-corner:hover { opacity: 1; color: #fca5a5; }
    .remote-leave-corner:active { opacity: 0.9; }


    /* Vote recap (banner entre rounds) */
    .vote-recap { padding:10px 14px; border-radius:8px; margin-bottom:12px; font-size:13px; text-align:center; }
    .vote-recap.caught { background:rgba(34,197,94,0.10); border:1px solid rgba(34,197,94,0.35); color:#86efac; }
    .vote-recap.missed { background:rgba(245,158,11,0.10); border:1px solid rgba(245,158,11,0.35); color:#fcd34d; }
    /* Countdown post-allVoted (remote) — barre composited via scaleX (compositor only) */
    .vote-countdown { margin-top:14px; padding:10px 14px; border-radius:10px; background:rgba(239,68,68,0.06); border:1px solid rgba(239,68,68,0.20); animation:phaseFadeIn 0.25s ease-out; }
    .vote-countdown-label { display:flex; justify-content:space-between; align-items:baseline; font-size:13px; color:var(--muted); margin-bottom:8px; }
    .vote-countdown-label strong { color:#fecaca; font-weight:700; font-variant-numeric:tabular-nums; font-size:15px; }
    .vote-countdown-track { height:4px; border-radius:2px; background:rgba(255,255,255,0.06); overflow:hidden; }
    .vote-countdown-bar { height:100%; width:100%; background:linear-gradient(90deg, #f59e0b, #ef4444); transform:scaleX(1); transform-origin:left center; animation:voteCountdownDrain linear forwards; will-change:transform; }
    .vote-countdown-hint { font-size:11px; color:var(--muted); margin-top:6px; text-align:center; }
    @keyframes voteCountdownDrain { from { transform:scaleX(1); } to { transform:scaleX(0); } }
    /* Phase 'vote_tally' (remote) — bulles compteurs animées */
    .vote-tally-list { display:flex; flex-direction:column; gap:8px; margin-top:6px; animation:phaseFadeIn 0.3s ease-out; }
    .vote-tally-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:10px 14px; border-radius:10px; background:var(--surface2); border:1px solid #2a2a38; transition:transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, background-color 0.3s ease; }
    /* is-winner-revealed = ajouté par JS à la fin de l'animation des bulles, pour un highlight différé */
    .vote-tally-row.is-winner-revealed { border-color:rgba(239,68,68,0.55); background:rgba(239,68,68,0.08); transform:scale(1.03); }
    .vote-tally-row.is-candidate { border-color:rgba(251,191,36,0.45); background:rgba(251,191,36,0.06); }
    .vote-tally-name { font-weight:600; font-size:15px; }
    .vote-tally-bubble { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 10px; border-radius:18px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); font-weight:700; font-size:15px; font-variant-numeric:tabular-nums; transition:background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
    .vote-tally-row.is-winner-revealed .vote-tally-bubble { background:rgba(239,68,68,0.20); border-color:rgba(239,68,68,0.55); color:#fecaca; }
    .vote-tally-row.is-candidate .vote-tally-bubble { background:rgba(251,191,36,0.15); border-color:rgba(251,191,36,0.45); color:#fcd34d; }
    /* Pop sur changement d'incrément */
    .vote-tally-bubble.pop { animation:tallyBubblePop 0.18s ease-out; }
    @keyframes tallyBubblePop { 0% { transform:scale(1); } 50% { transform:scale(1.18); } 100% { transform:scale(1); } }
    /* Fade-in générique des écrans remote (card de tally, vote, round_break) */
    @keyframes phaseFadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
    /* Récap des rounds en fin de partie */
    .result-rounds-title { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
    .result-rounds { display:flex; flex-direction:column; gap:6px; margin-bottom:6px; }
    /* Mode Solo : détail des votes par round dans l'écran résultat. */
    .solo-detail-wrap { display:flex; flex-direction:column; gap:10px; }
    .solo-round-block {
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 8px 10px;
    }
    .solo-round-label { font-size:11px; font-weight:600; color:var(--muted); margin-bottom:6px; }
    .solo-vote-row {
      display:flex; align-items:center; justify-content:space-between;
      gap: 8px;
      padding: 4px 0;
      font-size:13px;
    }
    .solo-vote-row + .solo-vote-row { border-top: 1px dashed var(--border); }
    .solo-vote-pair { color: var(--text); }
    .solo-vote-tag {
      font-size: 11px; font-weight: 700;
      padding: 2px 8px; border-radius: 100px;
      letter-spacing: 0.02em;
    }
    .solo-vote-tag.ok { background: rgba(52,211,153,0.15); color: #34d399; border: 1px solid rgba(52,211,153,0.35); }
    .solo-vote-tag.ko { background: rgba(244,114,182,0.10); color: #f472b6; border: 1px solid rgba(244,114,182,0.25); }
    .result-round { display:grid; grid-template-columns:80px 1fr auto; align-items:center; gap:10px; padding:8px 12px; border-radius:8px; background:var(--surface2); border:1px solid #2a2a38; }
    .result-round.caught { border-color:rgba(34,197,94,0.35); }
    .result-round.missed { border-color:rgba(245,158,11,0.35); }
    .result-round-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; }
    .result-round-name { font-weight:600; }
    .result-round-tag { font-size:11px; padding:2px 8px; border-radius:6px; background:rgba(255,255,255,0.04); }


    /* Récap rounds dans l'overlay de verdict (mode local) */
    .vr-history { display:flex; flex-direction:column; gap:5px; margin:14px auto 0; max-width:280px; }
    .vr-history-row { display:grid; grid-template-columns:32px 1fr 28px; gap:8px; align-items:center; font-size:13px; padding:6px 10px; border-radius:7px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); }
    .vr-history-row.caught { border-color:rgba(34,197,94,0.35); }
    .vr-history-row.missed { border-color:rgba(245,158,11,0.35); }
    .vr-history-row span:first-child { font-size:10px; color:var(--muted); letter-spacing:0.06em; text-transform:uppercase; }
    .vr-history-row strong { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .vr-history-row span:last-child { text-align:right; font-size:13px; }


    .lobby-roster-pts { font-size:11px; font-weight:700; color:var(--accent); padding:2px 8px; border-radius:10px; background:rgba(124,111,255,0.14); border:1px solid rgba(124,111,255,0.3); letter-spacing:0.02em; }
    .vr-points-row.vr-points-impostor .vr-points-tag { color:#f472b6; }
    .vr-points-row.vr-points-innocent .vr-points-tag { color:#86efac; }
    .vr-points-tag { font-size:11px; opacity:0.8; margin-left:4px; }


    /* ─────────────────────────────────────────────────────────────
     * REFONTE Home (Étape 2) — hero + mode cards + stats teaser.
     * Inspiré de mockup.html. Cohabite avec les anciennes classes
     * .home-mode-* qui restent pour rétro-compat (inutilisées par le
     * nouveau renderHome). À nettoyer dans une étape de cleanup future.
     * ───────────────────────────────────────────────────────────── */

    /* Hero : petite eyebrow, gros titre gradient, sous-titre discret */
    .home-screen .hero {
      padding: 0.5rem 0 1.25rem;
      text-align: center;
    }
    .home-screen .hero-eyebrow {
      font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
      color: var(--accent-2); text-transform: uppercase;
      margin-bottom: 8px;
    }
    .home-screen .hero-title {
      font-family: 'Syne', sans-serif;
      font-size: 44px; font-weight: 800; letter-spacing: -0.04em;
      line-height: 1.05;
      background: var(--grad-hero);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 0 8px;
      /* Marge à droite pour éviter la coupe du dernier glyphe avec
         background-clip:text + letter-spacing négatif (cf. fix .home-title). */
      padding: 0.05em 0.12em;
      display: inline-block;
    }
    @media (max-width: 420px) {
      .home-screen .hero-title { font-size: 38px; letter-spacing: -0.04em; }
    }
    @media (max-width: 360px) {
      .home-screen .hero-title { font-size: 32px; letter-spacing: -0.04em; }
    }
    .home-screen .hero-sub {
      font-size: 14px; color: var(--text-2); max-width: 280px; margin: 0 auto;
      line-height: 1.4;
    }
    [data-theme="light"] .home-screen .hero-sub { color: var(--muted); }

    /* Grille des 3 modes : 1 col, gap aéré */
    .home-screen .mode-grid {
      display: grid; gap: 12px;
      margin-bottom: 1.25rem;
    }

    /* Mode card : icône + texte + flèche, badge optionnel en absolu top-right.
     * Le mode "featured" (Local) a une icône en gradient (CTA visuel principal). */
    .home-screen .mode-card {
      position: relative;
      display: grid; grid-template-columns: 56px 1fr auto;
      align-items: center; gap: 14px;
      padding: 18px 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      color: var(--text);
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      overflow: hidden;
      transition: transform 0.18s var(--ease-spring), border-color 0.18s, background 0.18s;
    }
    .home-screen .mode-card::before {
      content: ''; position: absolute; inset: 0;
      background: var(--grad-card); opacity: 0; transition: opacity 0.2s;
      pointer-events: none;
    }
    .home-screen .mode-card:hover { border-color: var(--border-strong); }
    .home-screen .mode-card:hover::before { opacity: 1; }
    .home-screen .mode-card:active { transform: scale(0.98); }
    .home-screen .mode-card .mc-icon {
      width: 56px; height: 56px; border-radius: 16px;
      display: grid; place-items: center;
      font-size: 28px; line-height: 1;
      background: linear-gradient(135deg, rgba(124,111,255,0.18), rgba(192,132,252,0.12));
      border: 1px solid rgba(124,111,255,0.25);
    }
    .home-screen .mode-card.featured .mc-icon {
      background: var(--grad-hero);
      border-color: transparent;
      box-shadow: 0 6px 20px rgba(124,111,255,0.4);
    }
    .home-screen .mode-card .mc-text {
      display: flex; flex-direction: column; gap: 2px;
      min-width: 0;
    }
    .home-screen .mode-card .mc-title {
      font-family: 'Syne', sans-serif;
      font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
      color: var(--text);
    }
    .home-screen .mode-card .mc-desc {
      font-size: 12px; color: var(--text-2); line-height: 1.35;
    }
    [data-theme="light"] .home-screen .mode-card .mc-desc { color: var(--muted); }
    .home-screen .mode-card .mc-arrow {
      color: var(--muted); font-size: 18px;
      transition: transform 0.2s var(--ease-spring), color 0.2s;
    }
    .home-screen .mode-card:hover .mc-arrow { color: var(--text); transform: translateX(3px); }
    .home-screen .mode-card .mc-badge {
      position: absolute; top: 10px; right: 14px;
      font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
      padding: 3px 8px; border-radius: 999px;
      background: rgba(244,114,182,0.18); color: #f9a8d4;
      text-transform: uppercase;
    }

    /* Stats teaser : section row + 2 tuiles */
    .home-screen .home-section-row {
      display: flex; justify-content: space-between; align-items: center;
      margin: 4px 0 8px;
    }
    .home-screen .home-section-label {
      font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
      color: var(--muted); text-transform: uppercase;
      margin: 0;
    }
    .home-screen .home-section-action {
      font-size: 12px; font-weight: 600; color: var(--accent-2);
      background: none; border: 0; cursor: pointer;
      padding: 4px 8px; margin-right: -8px;
      font-family: inherit;
    }
    .home-screen .home-section-action:hover { color: var(--accent); }
    .home-screen .home-tile-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
      margin-bottom: 1.25rem;
    }
    .home-screen .home-tile {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      padding: 14px;
    }
    .home-screen .home-tile-label {
      font-size: 10px; font-weight: 700; letter-spacing: 0.15em;
      text-transform: uppercase; color: var(--muted);
      margin-bottom: 6px;
    }
    .home-screen .home-tile-value {
      font-family: 'Syne', sans-serif;
      font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
      color: var(--text);
    }

    /* ─────────────────────────────────────────────────────────────
     * REFONTE Setup local (Étape 3) — segmented mode + modifier chips
     * + sticky CTA. Cohabite avec les anciennes classes .mode-segments
     * / .mode-seg / .modifier-chip / .modifiers-row qui restent dormantes
     * (à nettoyer dans une étape de cleanup CSS dédiée).
     * ───────────────────────────────────────────────────────────── */

    /* Hidden checkbox helper (chip patterns label+input) */
    .toggle-checkbox { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

    /* Segmented control : N colonnes, fond surface, bordure souple */
    .seg {
      display: grid; gap: 6px;
      padding: 4px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
    }
    .seg.cols-3 { grid-template-columns: repeat(3, 1fr); }
    .seg-btn {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      min-height: 44px; padding: 8px 10px;
      background: transparent;
      border: 0;
      border-radius: calc(var(--r-md) - 4px);
      color: var(--text-2);
      font-family: inherit; font-size: 13px; font-weight: 600;
      cursor: pointer;
      transition: background 0.18s var(--ease-out), color 0.18s, transform 0.12s;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .seg-btn:hover { color: var(--text); }
    .seg-btn:active { transform: scale(0.97); }
    .seg-btn.active {
      background: var(--grad-hero);
      color: #fff;
      box-shadow: 0 4px 14px rgba(124,111,255,0.35);
    }
    .seg-emoji { font-size: 16px; line-height: 1; }
    @media (max-width: 380px) {
      .seg-btn { font-size: 12px; padding: 8px 6px; gap: 4px; }
      .seg-emoji { font-size: 14px; }
    }

    /* Modifier chips : chip-row cumulatif, variantes purple/pink/amber.
     * Refonte plan-mockup : gap 8 → 10, padding/min-height plus aérés (40px),
     * pour que les 3 chips ne paraissent pas collées entre elles. */
    .chip-row {
      display: flex; flex-wrap: wrap; gap: 10px;
    }
    /* Hints inline sous la rangée de chips quand certaines options sont
     * indisponibles (ex. Mister White nécessite N joueurs en plus). Affiché
     * UNIQUEMENT si au moins 1 contrainte → renderModChipHints retourne ''
     * sinon. Touch-friendly : remplace le title= HTML invisible sur mobile. */
    .chip-hints {
      display: flex; flex-direction: column; gap: 4px;
      margin-top: 8px;
      padding-left: 4px;
    }
    .chip-hint {
      margin: 0;
      font-size: 12px;
      font-style: italic;
      color: var(--text-2, var(--muted));
      line-height: 1.4;
    }
    .mod-chip {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 9px 14px;
      min-height: 40px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--text-2);
      font-size: 13px; font-weight: 600;
      cursor: pointer;
      user-select: none;
      transition: background 0.18s var(--ease-out), border-color 0.18s, color 0.18s, transform 0.12s;
    }
    .mod-chip:hover { border-color: var(--border-strong); color: var(--text); }
    .mod-chip:active { transform: scale(0.97); }
    .mod-chip.active {
      color: #fff;
      border-color: transparent;
    }
    .mod-chip.purple.active {
      background: linear-gradient(135deg, #7c6fff, #a78bfa);
      box-shadow: 0 4px 14px rgba(124,111,255,0.35);
    }
    .mod-chip.pink.active {
      background: linear-gradient(135deg, #f472b6, #ec4899);
      box-shadow: 0 4px 14px rgba(244,114,182,0.35);
    }
    .mod-chip.amber.active {
      background: linear-gradient(135deg, #f59e0b, #fbbf24);
      box-shadow: 0 4px 14px rgba(251,191,36,0.35);
      color: #1a1430;
    }
    .mod-chip.disabled {
      opacity: 0.45; cursor: not-allowed;
    }
    .mod-chip.disabled:hover { border-color: var(--border); color: var(--text-2); transform: none; }
    .mod-chip.hidden { display: none !important; }

    /* Sticky CTA : collé en bas sur mobile, normal sur desktop */
    .sticky-cta {
      position: sticky; bottom: 0;
      display: flex; flex-direction: column; gap: 8px;
      padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px);
      margin-top: 16px;
      background: linear-gradient(180deg, transparent 0%, var(--bg) 30%);
      z-index: 5;
    }
    .cta-hint {
      font-size: 12px; color: var(--muted);
      text-align: center;
      padding: 6px 10px;
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
    }
    .cta-primary {
      position: relative;            /* pour le spinner positionné en absolute */
      width: 100%;
      min-height: 56px;
      padding: 14px 20px;
      background: var(--grad-hero);
      border: 0;
      border-radius: var(--r-lg);
      color: #fff;
      font-family: 'Syne', sans-serif;
      font-size: 16px; font-weight: 700; letter-spacing: 0.01em;
      cursor: pointer;
      box-shadow: var(--shadow-glow, 0 8px 28px rgba(124,111,255,0.45));
      transition: transform 0.12s var(--ease-out), box-shadow 0.18s, opacity 0.18s;
    }
    .cta-primary:hover { box-shadow: 0 10px 32px rgba(124,111,255,0.55); }
    .cta-primary:active { transform: scale(0.98); }
    .cta-primary:disabled {
      opacity: 0.5; cursor: not-allowed;
      box-shadow: none;
    }
    /* Layer D : spinner pendant le flush du commit subcat avant startGame.
     * Le label reste dans le flux mais devient invisible (taille préservée),
     * le spinner s'affiche centré. Pas de jump de taille. */
    .cta-primary .cta-spinner {
      display: none;
      position: absolute;
      top: 50%; left: 50%;
      width: 22px; height: 22px;
      margin: -11px 0 0 -11px;
      border: 2.5px solid rgba(255,255,255,0.28);
      border-top-color: #fff;
      border-radius: 50%;
      animation: ctaSpin 0.7s linear infinite;
    }
    .cta-primary.is-loading .cta-label { visibility: hidden; }
    .cta-primary.is-loading .cta-spinner { display: block; }
    .cta-primary.is-loading { cursor: wait; opacity: 0.92; }
    @keyframes ctaSpin { to { transform: rotate(360deg); } }
    @media (min-width: 720px) {
      .sticky-cta { position: static; background: none; padding-bottom: 12px; }
    }

    /* ─────────────────────────────────────────────────────────────
     * REFONTE Setup — input row + player chips (mockup-aligned).
     * .input-row cohabite avec .name-row (legacy) et .player-list avec
     * .players-list. Les chips remplacent les anciennes player-row pleines
     * largeurs : layout horizontal wrap, 24px avatar, x rond compact.
     * Le bouton + (icon-btn) fait 44×44 (tap-target WCAG AA).
     * ───────────────────────────────────────────────────────────── */
    .input-row {
      display: flex; gap: 8px;
    }
    .input-row .text-input {
      flex: 1; min-width: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md, 14px);
      padding: 12px 14px;
      min-height: 44px;
      /* 16px : seuil iOS Safari pour ne PAS zoomer au focus de l'input. */
      font-size: 16px;
      color: var(--text);
      font-family: inherit;
      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    }
    .input-row .text-input::placeholder { color: var(--muted); }
    .input-row .text-input:focus {
      outline: none;
      border-color: rgba(124,111,255,0.6);
      background: var(--surface-2, var(--surface2));
      box-shadow: 0 0 0 3px rgba(124,111,255,0.12);
    }
    .input-row .icon-btn {
      flex-shrink: 0;
      width: 44px; min-height: 44px;
      border: 0;
      border-radius: var(--r-md, 14px);
      background: var(--accent);
      color: #fff;
      font-size: 22px; font-weight: 700;
      display: grid; place-items: center;
      cursor: pointer;
      font-family: inherit;
      transition: transform 0.15s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)), background 0.15s;
    }
    .input-row .icon-btn:hover { background: var(--accent2); }
    .input-row .icon-btn:active { transform: scale(0.92); }

    /* Chip joueur : pill horizontal compact, anim chipIn au add. */
    .player-list {
      display: flex; flex-wrap: wrap; gap: 8px;
      margin-top: 12px;
    }
    .player-chip {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 6px 6px 10px;
      background: var(--surface-2, var(--surface2));
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 13px; font-weight: 600;
      color: var(--text);
      max-width: 100%;
      animation: chipIn 0.25s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
    }
    @keyframes chipIn {
      from { opacity: 0; transform: scale(0.85); }
      to { opacity: 1; transform: scale(1); }
    }
    .player-chip .avatar {
      width: 24px; height: 24px; border-radius: 50%;
      display: grid; place-items: center;
      font-size: 11px; font-weight: 800;
      color: #0a0a12;
      flex-shrink: 0;
    }
    .player-chip-name {
      max-width: 160px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .player-chip-pts {
      font-size: 10px; font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--accent2, #c084fc);
      padding: 2px 7px;
      border-radius: 999px;
      background: rgba(124,111,255,0.14);
      border: 1px solid rgba(124,111,255,0.28);
      flex-shrink: 0;
    }
    .player-chip .chip-x {
      width: 22px; height: 22px;
      border: 0;
      padding: 0;
      border-radius: 50%;
      background: rgba(255,255,255,0.06);
      color: var(--text-2, var(--muted));
      font-size: 12px; line-height: 1;
      display: grid; place-items: center;
      cursor: pointer;
      font-family: inherit;
      margin-left: 2px;
      flex-shrink: 0;
      transition: background 0.15s, color 0.15s;
    }
    .player-chip .chip-x:hover { background: rgba(255,255,255,0.12); color: var(--text); }
    .player-chip .chip-x:active { background: var(--bad, #f87171); color: #fff; }
    [data-theme="light"] .player-chip .chip-x { background: rgba(28,22,56,0.06); }
    [data-theme="light"] .player-chip .chip-x:hover { background: rgba(28,22,56,0.12); }

    /* ─────────────────────────────────────────────────────────────
     * REFONTE Setup local (Étape 4) — themes summary card. Remplace
     * l'ancienne grille de cat-btn par une carte synthèse unique qui
     * ouvre l'overlay sous-cats existant. .cat-header / .categories-grid
     * / .subcat-action restent dormants pour rétro-compat.
     * ───────────────────────────────────────────────────────────── */
    .section-row {
      display: flex; align-items: center; justify-content: space-between;
      gap: 8px; margin-bottom: 8px;
    }
    .themes-summary {
      width: 100%; text-align: left;
      background: linear-gradient(155deg, rgba(124,111,255,0.12), rgba(244,114,182,0.04) 70%, transparent);
      border: 1px solid rgba(124,111,255,0.28);
      border-radius: var(--r-lg);
      padding: 14px;
      display: flex; flex-direction: column; gap: 12px;
      color: var(--text);
      font-family: inherit;
      cursor: pointer;
      transition: transform 0.15s var(--ease-spring), border-color 0.15s, box-shadow 0.18s;
    }
    .themes-summary:hover {
      border-color: rgba(124,111,255,0.5);
      box-shadow: 0 4px 16px rgba(124,111,255,0.18);
    }
    .themes-summary:active { transform: scale(0.99); }
    .themes-summary .ts-row {
      display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr;
      gap: 10px; align-items: center;
      padding: 4px 0 8px;
    }
    .themes-summary .ts-divider { width: 1px; height: 30px; background: var(--border); justify-self: center; }
    .themes-summary .ts-stat { text-align: center; }
    .themes-summary .ts-num {
      font-family: 'Syne', sans-serif;
      font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
      line-height: 1;
    }
    .themes-summary .ts-num.accent {
      background: var(--grad-hero);
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    }
    .themes-summary .ts-num .ts-den { color: var(--muted); font-size: 13px; font-weight: 600; }
    .themes-summary .ts-lbl {
      font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: var(--text-2);
      text-transform: uppercase; margin-top: 4px;
    }
    .themes-summary .ts-preview-row {
      display: flex; gap: 6px; flex-wrap: wrap;
    }
    .themes-summary .ts-preview-chip {
      font-size: 11px; font-weight: 600;
      padding: 5px 9px; border-radius: 999px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      color: var(--text-2);
      display: inline-flex; align-items: center; gap: 3px;
      white-space: nowrap;
      /* Now a real <button> : neutralise les défauts navigateur. */
      font-family: inherit;
      cursor: pointer;
      transition: transform 0.12s var(--ease-out, ease), border-color 0.15s, background 0.15s;
    }
    .themes-summary .ts-preview-chip:hover { border-color: var(--border-strong, rgba(255,255,255,0.16)); }
    .themes-summary .ts-preview-chip:active { transform: scale(0.94); }
    .themes-summary .ts-preview-chip span { color: var(--muted); font-size: 10px; }
    .themes-summary .ts-preview-chip.on {
      background: rgba(124,111,255,0.18);
      border-color: rgba(124,111,255,0.4);
      color: #c4b5fd;
    }
    .themes-summary .ts-preview-chip.on span { color: rgba(196,181,253,0.7); }
    .themes-summary .ts-preview-chip.partial {
      background: rgba(245,158,11,0.16);
      border-color: rgba(245,158,11,0.4);
      color: #fbbf24;
    }
    .themes-summary .ts-preview-chip.partial span { color: rgba(251,191,36,0.7); }
    .themes-summary .ts-preview-chip.off { opacity: 0.55; }
    .themes-summary .ts-cta {
      display: flex; align-items: center; justify-content: space-between;
      padding-top: 8px;
      border-top: 1px solid var(--border);
      font-size: 12px; font-weight: 600; color: var(--accent-2);
    }
    .themes-summary .ts-arrow { transition: transform 0.2s var(--ease-spring); }
    .themes-summary:hover .ts-arrow { transform: translateX(3px); }
    [data-theme="light"] .themes-summary .ts-preview-chip.on { color: #6d28d9; }
    [data-theme="light"] .themes-summary .ts-preview-chip.partial { color: #b45309; }

    /* ─────────────────────────────────────────────────────────────
     * Home screen : entry point Local / Online (mobile-first).
     * ↓↓↓ Bloc legacy — non utilisé par le renderHome refondu (étape 2).
     *     Conservé pour ne rien casser ailleurs ; à supprimer au cleanup.
     * ───────────────────────────────────────────────────────────── */
    .home-screen {
      display: flex; flex-direction: column;
      min-height: calc(100vh - 4rem);
      padding: 2.5rem 0 1.5rem;
    }
    .home-header {
      text-align: center;
      margin-bottom: 2.25rem;
    }
    .home-eyebrow {
      font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 0.6rem;
    }
    .home-title {
      font-family: 'Syne', sans-serif;
      font-size: 52px; font-weight: 800; letter-spacing: -0.035em;
      background: linear-gradient(135deg, var(--text) 25%, var(--accent2) 75%, var(--accent));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      line-height: 1.1; margin: 0 0 0.75rem;
      /* padding droit généreux : avec background-clip:text + letter-spacing
         négatif, le dernier glyphe (le 'r' final) est coupé sans cette marge */
      padding: 0.05em 0.15em;
      display: inline-block;
      white-space: nowrap;
    }
    @media (max-width: 520px) {
      .home-title { font-size: 46px; letter-spacing: -0.035em; }
    }
    @media (max-width: 420px) {
      .home-title { font-size: 38px; letter-spacing: -0.04em; }
    }
    @media (max-width: 360px) {
      .home-title { font-size: 32px; letter-spacing: -0.04em; }
    }
    @media (max-width: 320px) {
      .home-title { font-size: 28px; letter-spacing: -0.045em; }
    }
    .home-tagline {
      font-size: 14px; color: var(--muted); letter-spacing: 0.01em;
    }
    .home-modes {
      display: flex; flex-direction: column; gap: 12px;
      margin-bottom: auto;
    }
    .home-mode-card {
      display: grid;
      grid-template-columns: 56px 1fr 28px;
      align-items: center;
      gap: 14px;
      padding: 18px 18px 18px 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      color: var(--text);
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
      position: relative; overflow: hidden;
    }
    .home-mode-card::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(circle at 20% 0%, rgba(124,111,255,0.12), transparent 55%);
      opacity: 0; transition: opacity 0.2s;
      pointer-events: none;
    }
    .home-mode-card:hover {
      transform: translateY(-1px);
      border-color: rgba(124,111,255,0.4);
      background: var(--surface2);
    }
    .home-mode-card:hover::before { opacity: 1; }
    .home-mode-card:active { transform: translateY(0) scale(0.99); }
    .home-mode-card.remote {
      background: linear-gradient(135deg, rgba(56,189,248,0.05), rgba(124,111,255,0.05)), var(--surface);
    }
    .home-mode-card.remote:hover {
      border-color: rgba(56,189,248,0.45);
    }
    .home-mode-icon {
      width: 56px; height: 56px;
      display: flex; align-items: center; justify-content: center;
      font-size: 28px; line-height: 1;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 14px;
      flex-shrink: 0;
    }
    .home-mode-card.remote .home-mode-icon {
      background: linear-gradient(135deg, rgba(56,189,248,0.18), rgba(124,111,255,0.14));
      border-color: rgba(56,189,248,0.35);
    }
    .home-mode-card.local .home-mode-icon {
      background: linear-gradient(135deg, rgba(244,114,182,0.12), rgba(192,132,252,0.12));
      border-color: rgba(192,132,252,0.3);
    }
    .home-mode-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .home-mode-title {
      font-family: 'Syne', sans-serif;
      font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
      color: var(--text);
      display: flex; align-items: center; gap: 8px;
    }
    .home-mode-beta {
      font-family: 'DM Sans', sans-serif;
      font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--accent3);
      padding: 2px 6px; border-radius: 4px;
      background: rgba(56,189,248,0.12);
      border: 1px solid rgba(56,189,248,0.3);
    }
    .home-mode-sub {
      font-size: 13px; color: var(--muted);
      line-height: 1.35;
    }
    .home-mode-arrow {
      font-size: 22px; color: var(--muted); font-weight: 300;
      transition: transform 0.2s ease, color 0.2s ease;
    }
    .home-mode-card:hover .home-mode-arrow {
      transform: translateX(3px);
      color: var(--text);
    }
    .home-footnote {
      text-align: center;
      font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--muted); opacity: 0.6;
      margin-top: 2.25rem;
    }

    /* ─────────────────────────────────────────────────────────────
     * Header with back chip (in-mode setup)
     * Refinements mobile : à ≤480px le back-chip passe en icon-only
     * (la flèche ← seule), le titre rétrécit et tronque, et le spacer
     * de droite mirroir le back-chip pour que le titre reste centré.
     * Cela libère assez de place pour le settings-chip absolute top-right
     * sans que le h1 ne soit poussé hors écran.
     * ───────────────────────────────────────────────────────────── */
    .header-with-back {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding-top: 0.5rem;
      margin-bottom: 1.5rem;
    }
    .header-with-back h1 {
      font-family: 'Syne', sans-serif;
      font-size: 26px; font-weight: 800; letter-spacing: -0.01em;
      text-align: center;
      background: linear-gradient(135deg, var(--text) 30%, var(--accent2));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      line-height: 1.15; margin: 0;
      /* Marge à droite pour éviter la coupe du dernier glyphe avec background-clip:text */
      padding: 0.05em 0.12em;
      /* Truncation : si le titre ne tient pas, ellipsis plutôt que pousser
         le back-chip hors écran. min-width:0 pour laisser shrink. */
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .header-with-back .header-spacer {
      /* mirrors the back-chip width to keep h1 perfectly centered */
      width: 76px; visibility: hidden;
    }
    /* Mobile : back-chip icon-only + titre 20px → laisse de la place
       pour settings-chip 32×32 absolute top-right. */
    @media (max-width: 480px) {
      .header-with-back { gap: 8px; padding-top: 0.25rem; margin-bottom: 1.1rem; }
      .header-with-back h1 { font-size: 20px; }
      .header-with-back .header-spacer { width: 40px; }
      .back-chip { padding: 0; width: 40px; height: 40px; justify-content: center; }
      .back-chip-label { display: none; }
      .back-chip-arrow { font-size: 18px; }
    }
    @media (max-width: 360px) {
      .header-with-back h1 { font-size: 18px; }
    }
    .back-chip {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 12px 7px 9px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 100px;
      color: var(--muted);
      font-family: 'DM Sans', sans-serif;
      font-size: 13px; font-weight: 500;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
    }
    .back-chip:hover {
      background: var(--surface2);
      color: var(--text);
      border-color: rgba(124,111,255,0.35);
    }
    .back-chip:active { transform: scale(0.97); }
    .back-chip-arrow {
      font-size: 15px; line-height: 1;
      transition: transform 0.15s;
    }
    .back-chip:hover .back-chip-arrow { transform: translateX(-2px); }
    .back-chip-label { letter-spacing: 0.01em; }

    /* ─────────────────────────────────────────────────────────────
     * Online entry (refined create / join split)
     * ───────────────────────────────────────────────────────────── */
    .online-entry {
      display: flex; flex-direction: column; gap: 14px;
    }
    @keyframes onlineFadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .online-name-block { display: flex; flex-direction: column; gap: 6px; }
    .online-label {
      font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--muted);
    }
    .online-name-input {
      width: 100%;
      padding: 13px 16px;
      /* 16px : empêche le zoom-au-focus iOS Safari. */
      font-size: 16px; font-family: 'DM Sans', sans-serif;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      color: var(--text);
      transition: border-color 0.18s, box-shadow 0.18s;
    }
    .online-name-input::placeholder { color: var(--muted); }
    .online-name-input:focus {
      outline: none;
      border-color: rgba(124,111,255,0.5);
      box-shadow: 0 0 0 3px rgba(124,111,255,0.12);
    }

    .online-primary-btn {
      display: flex; align-items: center; gap: 14px;
      padding: 16px 18px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      border: none; border-radius: 14px;
      color: #fff; font-family: inherit;
      cursor: pointer; text-align: left;
      box-shadow: 0 6px 22px rgba(124,111,255,0.28);
      transition: transform 0.15s, box-shadow 0.18s;
      margin-top: 4px;
    }
    .online-primary-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 28px rgba(124,111,255,0.38);
    }
    .online-primary-btn:active { transform: translateY(0) scale(0.99); }
    .online-primary-icon {
      width: 38px; height: 38px;
      display: flex; align-items: center; justify-content: center;
      font-size: 24px; line-height: 1; font-weight: 300;
      background: rgba(255,255,255,0.18);
      border-radius: 10px;
      flex-shrink: 0;
    }
    .online-primary-text { display: flex; flex-direction: column; gap: 2px; }
    .online-primary-title {
      font-family: 'Syne', sans-serif;
      font-size: 16px; font-weight: 700; letter-spacing: -0.005em;
    }
    .online-primary-sub {
      font-size: 12.5px; opacity: 0.85; font-weight: 500;
    }

    .online-divider {
      display: flex; align-items: center; gap: 12px;
      margin: 6px 0 4px;
      color: var(--muted); font-size: 11px;
      letter-spacing: 0.18em; text-transform: uppercase;
    }
    .online-divider::before,
    .online-divider::after {
      content: ''; flex: 1; height: 1px;
      background: var(--border);
    }

    .online-join-block { display: flex; flex-direction: column; gap: 6px; }
    .online-join-row { display: flex; gap: 8px; align-items: stretch; }
    .online-code-input {
      /* Le champ n'accepte que 4 caractères (maxlength="4"). Avant, flex:1 lui
       * faisait prendre tout l'espace dispo, ce qui sur mobile écrasait le
       * bouton "Rejoindre" et coupait son texte sur deux lignes. On lui donne
       * une largeur basée sur le contenu pour laisser respirer le bouton. */
      flex: 0 1 180px;
      min-width: 0;
      padding: 13px 16px;
      font-family: 'Syne', sans-serif;
      font-size: 22px; font-weight: 800;
      letter-spacing: 0.4em; text-align: center; text-transform: uppercase;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      color: var(--text);
      transition: border-color 0.18s, box-shadow 0.18s;
    }
    .online-code-input::placeholder {
      color: var(--muted); font-weight: 600; letter-spacing: 0.4em;
    }
    .online-code-input:focus {
      outline: none;
      border-color: rgba(56,189,248,0.55);
      box-shadow: 0 0 0 3px rgba(56,189,248,0.14);
    }
    .online-join-btn {
      flex: 1 1 auto;
      min-width: 0;
      white-space: nowrap;
      padding: 0 20px;
      font-family: 'Syne', sans-serif;
      font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
      background: var(--surface2);
      border: 1px solid rgba(56,189,248,0.35);
      border-radius: 12px;
      color: var(--accent3);
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, transform 0.12s;
      flex-shrink: 0;
    }
    .online-join-btn:hover {
      background: rgba(56,189,248,0.10);
      border-color: rgba(56,189,248,0.6);
    }
    .online-join-btn:active { transform: scale(0.97); }



    /* Transfert du rôle d'hôte : icône ⤴ inline dans chaque ligne du roster
       côté hôte. Contour visible dès le repos pour signaler l'action ;
       hover renforce l'accent violet. */
    .lobby-roster-transfer {
      width: 28px; height: 28px; padding: 0;
      background: rgba(124,111,255,0.08);
      border: 1px solid rgba(124,111,255,0.35);
      border-radius: 6px; cursor: pointer;
      color: #c4b5fd; font-size: 14px; line-height: 1;
      display: inline-flex; align-items: center; justify-content: center;
      transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.1s;
    }
    .lobby-roster-transfer:hover {
      color: #ddd6fe;
      background: rgba(124,111,255,0.22);
      border-color: rgba(124,111,255,0.6);
    }
    .lobby-roster-transfer:active { transform: scale(0.92); }

    /* ─────────────────────────────────────────────────────────────────────
       LIGHT THEME — overrides via [data-theme="light"]
       Posé par le bootstrap inline en <head> (pas de FOUC). Valeurs : 'dark'
       (défaut) ou 'light' uniquement. Pas de mode système.
       ─────────────────────────────────────────────────────────────────────── */
    [data-theme="light"] {
      --bg: #f6f4fb;
      --surface: #ffffff;
      --surface2: #ece8f5;
      --border: rgba(28, 22, 56, 0.10);
      --text: #1a1830;
      --muted: rgba(26, 24, 48, 0.55);
      --accent: #6b5ee0;
      --accent2: #a571d8;
      --accent3: #2596d8;
      /* Refonte étape 12 — alignement des nouveaux tokens sur la palette claire */
      --bg-soft: #efecf7;
      --surface-2: #ece8f5;
      --surface-3: #dcd5ec;
      --border-strong: rgba(28, 22, 56, 0.18);
      --text-2: #4a4566;
      --accent-3: #d8508c;
      --good: #16a34a;
      --warn: #d97706;
      --bad: #dc2626;
      --shadow-sm: 0 2px 8px rgba(28, 22, 56, 0.10);
      --shadow-md: 0 8px 24px rgba(28, 22, 56, 0.14);
      --shadow-glow: 0 0 30px rgba(124, 111, 255, 0.18);
    }
    /* Glow gradients (body::before/after) atténués sur fond clair */
    [data-theme="light"] body::before {
      background: radial-gradient(circle, rgba(124, 111, 255, 0.16) 0%, transparent 70%);
    }
    [data-theme="light"] body::after {
      background: radial-gradient(circle, rgba(192, 132, 252, 0.12) 0%, transparent 70%);
    }
    /* Inputs : sur light, on évite le surface trop foncé */
    [data-theme="light"] .names-input,
    [data-theme="light"] .gm-word-input,
    [data-theme="light"] .online-name-input,
    [data-theme="light"] .online-code-input {
      background: var(--surface);
      box-shadow: 0 1px 2px rgba(28, 22, 56, 0.04);
    }
    [data-theme="light"] .names-input:focus,
    [data-theme="light"] .gm-word-input:focus,
    [data-theme="light"] .online-name-input:focus,
    [data-theme="light"] .online-code-input:focus {
      box-shadow: 0 0 0 3px rgba(107, 94, 224, 0.18);
    }
    /* Cards : ombres plus marquées sur light pour le relief */
    [data-theme="light"] .card,
    [data-theme="light"] .reveal-back,
    [data-theme="light"] .reveal-front,
    [data-theme="light"] .lobby-room-card,
    [data-theme="light"] .home-mode-card {
      box-shadow: 0 1px 3px rgba(28, 22, 56, 0.06), 0 4px 12px rgba(28, 22, 56, 0.04);
    }
    /* Badges accent doux : plus de contraste sur fond clair */
    [data-theme="light"] .header .badge {
      background: rgba(107, 94, 224, 0.10);
      border-color: rgba(107, 94, 224, 0.30);
    }

    /* ─────────────────────────────────────────────────────────────────────
       SETTINGS — chip discret en haut à droite + panel modal
       ─────────────────────────────────────────────────────────────────────── */
    .settings-chip {
      position: absolute;
      top: 0; right: 0;
      width: 32px; height: 32px;
      padding: 0;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 50%;
      color: var(--text);
      font-size: 16px; line-height: 1;
      cursor: pointer;
      opacity: 0.55;
      transition: opacity 0.15s, transform 0.1s, border-color 0.15s, background-color 0.15s;
      z-index: 5;
    }
    .settings-chip:hover {
      opacity: 1;
      border-color: rgba(124, 111, 255, 0.40);
      background: rgba(124, 111, 255, 0.10);
    }
    .settings-chip:active { transform: scale(0.94); }
    .settings-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

    /* Overlay (réutilise pattern subcat-overlay mais isolé) */
    .settings-overlay {
      position: fixed; inset: 0;
      background: rgba(0, 0, 0, 0.65);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      z-index: 1000;
      display: none;
      align-items: center; justify-content: center;
      padding: 24px 16px;
    }
    [data-theme="light"] .settings-overlay { background: rgba(20, 18, 40, 0.45); }
    .settings-overlay.open { display: flex; }

    /* Modale : flex column → tous les enfants (header + boutons + footer) s'empilent
     * verticalement avec un gap homogène. Pas d'animation entrance pour éviter
     * tout flicker si un re-render externe (lobby roster, etc.) recompose le DOM. */
    .settings-modal {
      width: 100%;
      max-width: 420px;
      max-height: calc(100vh - 48px);
      overflow-y: auto;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 18px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .settings-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 4px;
    }
    .settings-title {
      font-family: 'Syne', sans-serif;
      font-size: 18px; font-weight: 700;
      letter-spacing: -0.01em;
    }
    .settings-close {
      width: 30px; height: 30px;
      padding: 0;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 50%;
      color: var(--muted);
      font-size: 14px;
      cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s;
    }
    .settings-close:hover { color: var(--text); border-color: var(--text); background: rgba(255,255,255,0.04); }

    /* Section dans le panel Settings (label + contenu groupé) */
    .settings-section { display: flex; flex-direction: column; gap: 6px; }
    .settings-section-label {
      font-size: 11px; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase;
      color: var(--muted);
    }

    /* Lang picker : 3 boutons en grille égale */
    .settings-lang-picker {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
      padding: 4px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 12px;
    }
    .settings-lang-btn {
      padding: 9px 6px;
      font-size: 12px; font-weight: 500;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 9px;
      color: var(--muted);
      cursor: pointer;
      transition: background-color 0.15s, color 0.15s, border-color 0.15s;
      font-family: inherit;
      white-space: nowrap;
    }
    .settings-lang-btn:hover { color: var(--text); }
    .settings-lang-btn.active {
      background: var(--surface);
      color: var(--text);
      border-color: rgba(124, 111, 255, 0.40);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    }
    [data-theme="light"] .settings-lang-btn.active { box-shadow: 0 1px 3px rgba(28, 22, 56, 0.10); }

    /* Boutons d'action — chacun sur sa propre ligne, full-width */
    .settings-row {
      display: flex; align-items: center; gap: 12px;
      width: 100%;
      padding: 14px 16px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 12px;
      color: var(--text);
      font-size: 14px; font-weight: 500;
      cursor: pointer;
      text-decoration: none;
      /* Transitions ciblées : on évite de transitionner sur tous les props
       * pour ne pas créer de moiré quand data-theme change instantanément. */
      transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
      font-family: inherit;
      text-align: left;
    }
    .settings-row:hover { background: var(--surface); border-color: rgba(124, 111, 255, 0.30); transform: translateY(-1px); }
    .settings-row:active { transform: translateY(0); }
    .settings-row-icon { font-size: 20px; flex-shrink: 0; line-height: 1; }
    .settings-row-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .settings-row-title { font-size: 14px; font-weight: 600; }
    .settings-row-hint { font-size: 11px; color: var(--muted); }
    .settings-row-arrow { color: var(--muted); font-size: 14px; flex-shrink: 0; }
    .settings-row.danger { color: #fca5a5; }
    .settings-row.danger:hover { background: rgba(239, 68, 68, 0.06); border-color: rgba(239, 68, 68, 0.30); }
    [data-theme="light"] .settings-row.danger { color: #b91c1c; }
    [data-theme="light"] .settings-row.danger:hover { background: rgba(239, 68, 68, 0.05); border-color: rgba(239, 68, 68, 0.25); }

    .settings-footer {
      margin-top: 6px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
      font-size: 11px;
      color: var(--muted);
      text-align: center;
    }

    /* Mobile : panel quasi plein écran */
    @media (max-width: 480px) {
      .settings-chip { width: 30px; height: 30px; font-size: 15px; }
    }

    /* ─────────────────────────────────────────────────────────────
     * REFONTE Settings/Stats (Étape 5) — bottom sheets sur mobile.
     * On garde le HTML/wiring inchangé (.settings-overlay/.settings-modal
     * + IDs settingsCloseBtn/statsCloseBtn). En dessous de 720px, le panel
     * glisse depuis le bas, coins arrondis en haut uniquement, grip handle
     * en pseudo-element. Au-dessus, comportement modal centré actuel.
     * ───────────────────────────────────────────────────────────── */
    @media (max-width: 720px) {
      .settings-overlay {
        align-items: flex-end;
        padding: 0;
      }
      .settings-modal {
        position: relative;
        max-width: 100%;
        width: 100%;
        max-height: 88vh;
        padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
        border-radius: var(--r-xl, 24px) var(--r-xl, 24px) 0 0;
        border-bottom: 0;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.55);
        animation: sheetSlideUp 0.32s var(--ease-out);
      }
      .settings-modal::before {
        content: '';
        display: block;
        width: 40px; height: 4px;
        background: rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        margin: 0 auto 8px;
      }
      [data-theme="light"] .settings-modal::before { background: rgba(20, 18, 40, 0.22); }
      .settings-header { padding-top: 0; }
    }
    @keyframes sheetSlideUp {
      from { transform: translateY(100%); opacity: 0.6; }
      to { transform: translateY(0); opacity: 1; }
    }

    /* ─────────────────────────────────────────────────────────────
     * Sub-cat accordion (refonte mockup) — .theme-list dans le modal
     * body. Chaque thème = .theme-item avec head (emoji + nom + meta +
     * toggle pill + chevron) cliquable pour expand/collapse, body avec
     * .subcat-row de .subcat-chip cliquables.
     * ───────────────────────────────────────────────────────────── */
    .theme-list { display: flex; flex-direction: column; gap: 8px; }
    .theme-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md, 12px);
      overflow: hidden;
      transition: border-color 0.18s;
    }
    .theme-item.on { border-color: rgba(124,111,255,0.40); }
    .theme-item.partial { border-color: rgba(245,158,11,0.40); }
    .theme-head {
      display: flex; align-items: center; gap: 12px;
      width: 100%;
      padding: 14px;
      min-height: 56px;
      background: transparent;
      border: 0;
      color: var(--text);
      font-family: inherit;
      text-align: left;
      cursor: pointer;
      /* touch-action: manipulation désactive la reconnaissance double-tap-to-zoom
       * sur iOS Safari pour cet élément. Sans ça, taper rapidement sur une chip
       * peut décaler le visual viewport d'1-3px le temps que le navigateur écarte
       * l'hypothèse "double-tap" — d'où des taps qui atterrissent sur le mauvais
       * theme-item (perçu comme "Disney bascule Dune"). */
      touch-action: manipulation;
    }
    .theme-head .th-emoji {
      width: 38px; height: 38px;
      border-radius: 10px;
      display: grid; place-items: center;
      font-size: 19px;
      background: rgba(255,255,255,0.04);
      flex-shrink: 0;
    }
    [data-theme="light"] .theme-head .th-emoji { background: rgba(28,22,56,0.04); }
    .theme-head .th-text {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column; gap: 2px;
    }
    .theme-head .th-name {
      font-size: 14px; font-weight: 700;
      color: var(--text);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .theme-head .th-meta {
      font-size: 11px;
      color: var(--text-2);
    }
    .theme-head .th-toggle {
      width: 44px; height: 26px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      position: relative;
      transition: background 0.2s;
      flex-shrink: 0;
      cursor: pointer;
      touch-action: manipulation;
    }
    [data-theme="light"] .theme-head .th-toggle { background: rgba(28,22,56,0.10); }
    .theme-head .th-toggle::after {
      content: ''; position: absolute; top: 3px; left: 3px;
      width: 20px; height: 20px;
      border-radius: 50%;
      background: #fff;
      transition: transform 0.2s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .theme-item.on .th-toggle { background: var(--accent, #7c6fff); }
    .theme-item.on .th-toggle::after { transform: translateX(18px); }
    .theme-item.partial .th-toggle { background: rgba(124,111,255,0.5); }
    .theme-item.partial .th-toggle::after { transform: translateX(18px); }
    .theme-head .th-chevron {
      color: var(--text-2);
      font-size: 18px; line-height: 1;
      transition: transform 0.2s var(--ease-out, ease), color 0.2s;
      margin-left: 4px;
      flex-shrink: 0;
    }
    .theme-item.expanded .th-chevron {
      transform: rotate(90deg);
      color: var(--text);
    }
    .theme-body {
      display: none;
      padding: 0 14px 14px;
      border-top: 1px solid var(--border);
    }
    .theme-item.expanded .theme-body {
      display: block;
      animation: themeSlideDown 0.25s var(--ease-out, ease);
    }
    @keyframes themeSlideDown {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .subcat-row {
      display: flex; flex-wrap: wrap; gap: 6px;
      padding-top: 12px;
    }
    .subcat-chip {
      padding: 6px 10px;
      min-height: 32px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 12px;
      color: var(--text-2);
      font-family: inherit;
      cursor: pointer;
      display: inline-flex; align-items: center; gap: 4px;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
      /* Cf. .theme-head : désactive la reconnaissance double-tap-to-zoom iOS
       * pour que les taps rapides ne décalent pas le viewport. */
      touch-action: manipulation;
      user-select: none;
      -webkit-user-select: none;
    }
    [data-theme="light"] .subcat-chip { background: rgba(28,22,56,0.04); }
    .subcat-chip:hover { border-color: var(--border-strong, rgba(255,255,255,0.16)); }
    .subcat-chip > span { color: var(--muted); font-size: 10px; font-weight: 600; }
    /* Le ✓ est TOUJOURS rendu pour que la chip garde une largeur stable.
     * Avant, .on::before { content:'✓' } ajoutait ~13px à l'activation, ce qui
     * pouvait faire wrapper la rangée de chips et pousser TOUTES les théme-items
     * suivantes vers le bas — un tap rapide sur Disney pouvait alors tomber sur
     * Dune dont la position venait de changer. On réserve la place via opacity. */
    .subcat-chip::before {
      content: '✓';
      font-size: 11px;
      margin-right: 2px;
      opacity: 0;
      transition: opacity 0.15s;
    }
    .subcat-chip.on::before { opacity: 1; }
    .subcat-chip.on,
    .subcat-chip.active {
      background: rgba(124,111,255,0.18);
      border-color: rgba(124,111,255,0.5);
      color: #c4b5fd;
    }
    .subcat-chip.on > span,
    .subcat-chip.active > span { color: rgba(196,181,253,0.7); }
    [data-theme="light"] .subcat-chip.on,
    [data-theme="light"] .subcat-chip.active { color: #6d28d9; }

    /* Subcat overlay : également bottom sheet sur mobile (étape 5). */
    @media (max-width: 720px) {
      .subcat-overlay {
        align-items: flex-end;
        padding: 0;
      }
      .subcat-modal {
        max-width: 100%;
        max-height: 88vh;
        border-radius: var(--r-xl, 24px) var(--r-xl, 24px) 0 0;
        border-bottom: 0;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
        animation: sheetSlideUp 0.32s var(--ease-out);
      }
      .subcat-modal::before {
        content: '';
        display: block;
        width: 40px; height: 4px;
        background: rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        margin: 8px auto 0;
        flex-shrink: 0;
      }
      [data-theme="light"] .subcat-modal::before { background: rgba(20, 18, 40, 0.22); }
      .subcat-modal-body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
    }

    /* ── Mode "Défi du jour" ── */
    /* Phases livrées : table feedback, picker DB, typeahead, share Wordle,
       streak badge, stats modal+histogramme, responsive desktop large. */
    .home-mode-card.daily { border-color: rgba(251,191,36,0.35); }
    .home-mode-card.daily:hover { border-color: rgba(251,191,36,0.6); }

    .daily-wrap { display:flex; flex-direction:column; gap:12px; padding:0 4px; }

    /* Phase 2C — DB picker */
    .daily-db-picker {
      display:flex; gap:6px; flex-wrap:nowrap;
      overflow-x:auto; -webkit-overflow-scrolling:touch;
      padding-bottom:4px;
      margin: 0 -4px;
      padding-left:4px; padding-right:4px;
    }
    .daily-db-chip {
      flex-shrink:0;
      display:inline-flex; align-items:center; gap:6px;
      padding:6px 12px; border-radius:999px;
      background:rgba(255,255,255,0.04);
      border:1px solid var(--border);
      color:var(--text, #fff);
      font-size:12px; font-weight:600;
      cursor:pointer;
      transition:background 120ms ease, border-color 120ms ease, transform 120ms ease;
    }
    .daily-db-chip:hover { background:rgba(124,111,255,0.12); }
    .daily-db-chip:active { transform:scale(0.97); }
    .daily-db-chip.active {
      background:linear-gradient(135deg, rgba(124,111,255,0.30), rgba(183,148,244,0.20));
      border-color:rgba(124,111,255,0.60);
      color:#fff;
      box-shadow:0 0 0 1px rgba(124,111,255,0.40) inset;
    }
    .daily-db-icon { font-size:14px; line-height:1; }
    .daily-db-label { white-space:nowrap; }

    /* Refonte étape 9 — Daily hero card (gradient violet→rose, layout vertical
     * avec date+streak en haut, titre Syne, sub line, puis row pool+attempts+stats). */
    .daily-hero {
      margin: 0 0 12px;
      padding: 18px 18px 14px;
      background: linear-gradient(135deg, rgba(192,132,252,0.18), rgba(244,114,182,0.05));
      border: 1px solid rgba(192,132,252,0.30);
      border-radius: var(--r-lg, 18px);
      display: flex; flex-direction: column; gap: 6px;
    }
    .daily-hero .daily-meta {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 11px; font-weight: 600;
      color: var(--text-2);
      margin-bottom: 4px;
    }
    .daily-hero .daily-meta .dm-date {
      color: var(--accent-2, #c084fc);
      letter-spacing: 0.02em;
    }
    .daily-hero .daily-title {
      font-family: 'Syne', sans-serif;
      font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
      color: var(--text);
      line-height: 1.15;
    }
    .daily-hero .daily-sub {
      font-size: 13px; color: var(--text-2);
      line-height: 1.45;
    }
    .daily-hero .daily-hero-row {
      display: flex; align-items: center; gap: 8px;
      margin-top: 8px;
      flex-wrap: wrap;
    }
    .daily-hero .daily-attempts {
      margin-left: auto;
      font-size: 12px; font-weight: 600; color: var(--muted);
    }
    .daily-hero .daily-stats-btn {
      width: 30px; height: 30px;
      flex-shrink: 0;
    }
    [data-theme="light"] .daily-hero {
      background: linear-gradient(135deg, rgba(168,85,247,0.10), rgba(236,72,153,0.04));
      border-color: rgba(168,85,247,0.28);
    }

    .daily-meta {
      display:flex; align-items:center; justify-content:space-between;
      gap:8px; flex-wrap:wrap;          /* mobile : wrap quand l'espace manque */
      font-size:12px; color:var(--muted);
    }
    .daily-pool-badge {
      display:inline-block; padding:3px 10px; border-radius:999px;
      background:rgba(251,191,36,0.10); color:#fbbf24;
      border:1px solid rgba(251,191,36,0.30); font-weight:600;
    }
    .daily-attempts { font-weight:600; }

    /* Phase 3A — Streak badge */
    .daily-streak-badge {
      display:inline-block; padding:3px 10px; border-radius:999px;
      background:rgba(244,114,182,0.12); color:#f472b6;
      border:1px solid rgba(244,114,182,0.35); font-weight:700;
      font-size:12px;
      animation: streakPulse 2.4s ease-in-out infinite;
    }
    @keyframes streakPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(244,114,182,0.0); }
      50%       { box-shadow: 0 0 0 4px rgba(244,114,182,0.15); }
    }
    .daily-win-streak {
      margin:6px 0;
      font-weight:700;
      color:#f472b6;
      font-size:15px;
    }

    /* Phase 3B — Stats modal */
    .daily-stats-btn {
      width:28px; height:28px; padding:0;
      display:inline-flex; align-items:center; justify-content:center;
      border-radius:50%;
      background:rgba(255,255,255,0.04);
      border:1px solid var(--border);
      color:var(--text, #fff);
      font-size:14px;
      cursor:pointer;
      transition:background 120ms ease, transform 120ms ease;
    }
    .daily-stats-btn:hover { background:rgba(124,111,255,0.15); }
    .daily-stats-btn:active { transform:scale(0.94); }

    .daily-stats-overlay {
      position:fixed; inset:0;
      background:rgba(8,8,18,0.70);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      z-index:1000;
      display:flex; align-items:center; justify-content:center;
      padding:16px;
      animation: dailyOverlayIn 180ms ease-out;
    }
    @keyframes dailyOverlayIn { from { opacity:0; } to { opacity:1; } }
    .daily-stats-modal {
      background:var(--surface, #1a1a2e);
      border:1px solid var(--border);
      border-radius:14px;
      max-width:420px; width:100%;
      padding:18px;
      box-shadow:0 24px 64px rgba(0,0,0,0.45);
      max-height:calc(100vh - 32px);
      overflow-y:auto;
    }
    .daily-stats-header {
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:14px;
    }
    .daily-stats-title { margin:0; font-size:18px; }
    .daily-stats-close {
      width:32px; height:32px;
      display:inline-flex; align-items:center; justify-content:center;
      border-radius:50%;
      background:transparent;
      border:1px solid var(--border);
      color:var(--text, #fff);
      cursor:pointer;
      font-size:14px;
    }
    .daily-stats-close:hover { background:rgba(255,255,255,0.06); }

    .daily-stats-grid {
      display:grid; grid-template-columns:repeat(3, 1fr);
      gap:8px; margin-bottom:18px;
    }
    .daily-stats-cell {
      background:rgba(255,255,255,0.03);
      border:1px solid var(--border);
      border-radius:10px;
      padding:12px 8px;
      text-align:center;
    }
    .daily-stats-num {
      font-family:'Syne', sans-serif;
      font-size:26px; font-weight:800;
      background:linear-gradient(135deg, #34d399, #7c6fff);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      background-clip:text;
      line-height:1;
    }
    .daily-stats-lbl {
      font-size:11px; color:var(--muted);
      margin-top:6px;
      letter-spacing:0.04em;
    }

    .daily-histo-title {
      font-size:11px; letter-spacing:0.10em;
      text-transform:uppercase; color:var(--muted);
      margin-bottom:8px;
    }
    .daily-histo {
      display:flex; flex-direction:column; gap:5px;
    }
    .daily-histo-row {
      display:grid; grid-template-columns:24px 1fr 32px;
      align-items:center; gap:8px;
      font-size:12px;
    }
    .daily-histo-label {
      text-align:center; font-weight:700;
      color:var(--muted);
    }
    .daily-histo-bar-wrap {
      height:18px; border-radius:6px;
      background:rgba(255,255,255,0.04);
      overflow:hidden;
    }
    .daily-histo-bar {
      height:100%;
      background:linear-gradient(90deg, rgba(124,111,255,0.55), rgba(52,211,153,0.55));
      transition:width 280ms ease-out;
      min-width:2px;
    }
    .daily-histo-count {
      text-align:right; font-weight:700;
      color:var(--text, #fff);
    }
    .daily-stats-empty {
      text-align:center; font-size:13px;
      color:var(--muted);
      padding:18px 0;
    }

    .daily-input-wrap { position:relative; }
    .daily-input-row { display:flex; gap:8px; }
    .daily-input {
      flex:1; padding:12px 14px; border-radius:10px;
      background:var(--surface, #1a1a2e); color:var(--text, #fff);
      border:1px solid var(--border);
      /* 16px : empêche le zoom-au-focus iOS Safari. */
      font-size:16px;
    }
    .daily-input:focus { outline:none; border-color:var(--accent); }
    .daily-input:disabled { opacity:0.5; }
    .daily-submit {
      padding:0 18px; border-radius:10px; border:none;
      background:linear-gradient(135deg, var(--accent), var(--accent2));
      color:#fff; font-weight:700; cursor:pointer; font-size:14px;
    }
    .daily-submit:disabled { opacity:0.5; cursor:not-allowed; }

    /* Phase 2A — Typeahead suggestions */
    .daily-suggestions {
      position:absolute; top:calc(100% + 4px); left:0; right:0;
      max-height:240px; overflow-y:auto;
      background:var(--surface, #1a1a2e);
      border:1px solid var(--border);
      border-radius:10px;
      box-shadow:0 8px 24px rgba(0,0,0,0.35);
      display:none;
      z-index:10;
    }
    .daily-suggestions.open { display:flex; flex-direction:column; }
    .daily-suggestion-item {
      display:flex; align-items:center; gap:8px;
      padding:10px 14px;
      background:transparent; border:none; color:var(--text, #fff);
      font-size:14px; text-align:left;
      cursor:pointer;
      width:100%;
      transition:background 120ms ease;
    }
    .daily-suggestion-item + .daily-suggestion-item { border-top:1px solid var(--border); }
    .daily-suggestion-item:hover,
    .daily-suggestion-item:focus {
      background:rgba(124,111,255,0.10);
      outline:none;
    }
    .daily-suggestion-name { font-weight:600; }

    .daily-error {
      font-size:13px; color:#f472b6;
      background:rgba(244,114,182,0.10);
      border:1px solid rgba(244,114,182,0.30);
      border-radius:8px; padding:8px 12px;
    }
    .daily-empty {
      text-align:center; padding:24px 12px; font-size:13px;
      color:var(--muted); border:1px dashed var(--border); border-radius:10px;
    }

    .daily-table-wrap {
      overflow-x:auto; -webkit-overflow-scrolling:touch;
      border:1px solid var(--border); border-radius:10px;
      background:rgba(255,255,255,0.02);
    }
    .daily-table {
      border-collapse:separate; border-spacing:0;
      width:100%; min-width:540px;
      font-size:12px;
    }
    .daily-table thead th {
      position:sticky; top:0; z-index:1;
      background:var(--surface, #1a1a2e);
      padding:8px 6px; text-align:center;
      font-size:10px; font-weight:700; letter-spacing:0.06em;
      text-transform:uppercase; color:var(--muted);
      border-bottom:1px solid var(--border);
    }
    .daily-row + .daily-row > * { border-top:1px solid var(--border); }
    .daily-row-name {
      padding:10px 8px; font-weight:700; font-size:13px;
      text-align:left; min-width:90px;
      position:sticky; left:0; z-index:1;
      background:var(--surface, #1a1a2e);
    }
    .daily-cell {
      padding:8px 6px; text-align:center;
      vertical-align:middle;
      min-width:64px; max-width:120px;
      font-weight:600; font-size:11px;
      line-height:1.2;
      transition:background 200ms ease;
    }
    .daily-cell-extra {
      display:block; font-size:10px; opacity:0.85; margin-top:2px;
    }
    .daily-cell-green {
      background:rgba(52,211,153,0.22);
      color:#34d399;
      box-shadow:inset 0 0 0 1px rgba(52,211,153,0.45);
    }
    .daily-cell-yellow {
      background:rgba(251,191,36,0.20);
      color:#fbbf24;
      box-shadow:inset 0 0 0 1px rgba(251,191,36,0.40);
    }
    .daily-cell-red {
      background:rgba(244,114,182,0.10);
      color:#f472b6;
      box-shadow:inset 0 0 0 1px rgba(244,114,182,0.20);
    }
    .daily-row-win .daily-row-name {
      color:#34d399;
      animation: dailyWinPulse 600ms ease-out;
    }
    @keyframes dailyWinPulse {
      0% { transform:scale(1); }
      40% { transform:scale(1.06); }
      100% { transform:scale(1); }
    }

    .daily-win-card {
      background:linear-gradient(135deg, rgba(52,211,153,0.18), rgba(124,111,255,0.10));
      border:1px solid rgba(52,211,153,0.40);
      border-radius:14px; padding:18px; text-align:center;
    }
    .daily-win-card h2 { margin:0 0 6px; font-size:22px; }
    .daily-win-card p { margin:4px 0; }
    /* Phase 2B — Share button */
    .daily-share-btn {
      margin-top:12px;
      padding:10px 18px;
      border-radius:10px; border:none;
      background:linear-gradient(135deg, #34d399, #7c6fff);
      color:#fff; font-weight:700; font-size:14px;
      cursor:pointer;
      transition:transform 120ms ease, box-shadow 120ms ease;
      box-shadow:0 4px 14px rgba(52,211,153,0.30);
    }
    .daily-share-btn:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(52,211,153,0.45); }
    .daily-share-btn:active { transform:translateY(0); }

    /* ─── Phase 3C — Adaptation responsive du mode "Défi du jour" ─────────
     * Mobile : tout est déjà cappé à .wrap max-width:460px (default global).
     *   La table scrolle horizontalement (min-width 540px > 460), l'input
     *   et le picker s'adaptent.
     * Desktop : on étend le wrap UNIQUEMENT en mode daily (data-screen
     *   sur le root) pour offrir un grand format. La table tient en entier,
     *   les chips picker peuvent wrap naturellement, le modal stats reste
     *   centré (positionnement fixed indépendant du wrap).
     * ───────────────────────────────────────────────────────────────────── */

    /* Desktop / large tablette : wrap élargi pour le mode daily uniquement. */
    @media (min-width: 768px) {
      .wrap[data-screen="daily"] {
        max-width: 880px;
      }
      .wrap[data-screen="daily"] .daily-table {
        /* Plus besoin de min-width forcé : le wrap est assez large pour tout. */
        min-width: 0;
        font-size: 13px;
      }
      .wrap[data-screen="daily"] .daily-row-name {
        font-size: 14px;
        min-width: 110px;
      }
      .wrap[data-screen="daily"] .daily-cell {
        min-width: 84px;
        font-size: 12px;
        padding: 10px 8px;
      }
      .wrap[data-screen="daily"] .daily-table-wrap {
        /* Pas de scroll horizontal nécessaire en grand format. */
        overflow-x: visible;
      }
      .wrap[data-screen="daily"] .daily-db-picker {
        /* Sur desktop, on autorise le wrap en plusieurs lignes plutôt que scroll. */
        flex-wrap: wrap;
        overflow-x: visible;
      }
      .wrap[data-screen="daily"] .daily-meta {
        font-size: 13px;
      }
    }

    /* Très grand écran : on cappe à 1040px pour ne pas avoir de cellules trop spacey. */
    @media (min-width: 1280px) {
      .wrap[data-screen="daily"] {
        max-width: 1040px;
      }
    }

    /* Très petit écran (< 380px) : raffinements pour ne rien faire déborder. */
    @media (max-width: 380px) {
      .daily-meta { font-size: 11px; gap: 6px; }
      .daily-pool-badge,
      .daily-streak-badge { padding: 2px 8px; font-size: 11px; }
      .daily-stats-btn { width: 24px; height: 24px; font-size: 12px; }
      .daily-table { font-size: 11px; }
      .daily-cell { min-width: 56px; padding: 6px 4px; font-size: 10px; }
      .daily-row-name { min-width: 80px; padding: 8px 6px; font-size: 12px; }
    }


    /* ── Stats panel (overlay au-dessus de Settings) ─────────────────── */
    .stats-modal { max-width: 460px; }
    .stats-empty {
      padding: 24px 16px; text-align: center; color: var(--muted);
      font-size: 14px; font-style: italic; line-height: 1.5;
    }
    /* Refonte étape 10 — Stats panel.
     * Hero summary plus iconique (gradient hero, chiffre 56px), tiles/fav-list
     * avec border-radius cohérent (--r-md), grille toujours 2-col sauf très petit. */
    .stats-summary {
      text-align: center; margin: 8px 0 18px;
      padding: 18px 16px;
      background: linear-gradient(135deg, rgba(124,111,255,0.16), rgba(244,114,182,0.04));
      border: 1px solid rgba(124,111,255,0.28);
      border-radius: var(--r-lg, 18px);
    }
    .stats-big {
      font-family: 'Syne', sans-serif; font-size: 56px; font-weight: 800;
      line-height: 1; letter-spacing: -0.02em;
      background: var(--grad-hero);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .stats-big-label {
      font-size: 11px; color: var(--text-2);
      letter-spacing: 0.12em; text-transform: uppercase;
      margin-top: 6px; font-weight: 700;
    }
    .stats-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px;
    }
    .stats-tile {
      padding: 12px 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md, 12px);
      display: flex; flex-direction: column; gap: 4px;
    }
    .stats-tile-label {
      font-size: 10px; color: var(--text-2); text-transform: uppercase;
      letter-spacing: 0.12em; margin-bottom: 6px;
      font-weight: 700;
    }
    .stats-tile-row {
      display: flex; justify-content: space-between; align-items: baseline;
      font-size: 13px; gap: 8px;
    }
    .stats-tile-row span:first-child { color: var(--text-2); }
    .stats-tile-row span:last-child { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
    .stats-section-label {
      font-size: 11px; color: var(--text-2); text-transform: uppercase;
      letter-spacing: 0.16em; margin: 18px 0 8px;
      font-weight: 700;
    }
    .stats-fav-list {
      display: flex; flex-direction: column; gap: 6px;
      padding: 12px 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md, 12px);
    }
    .stats-fav-row {
      display: flex; justify-content: space-between; align-items: baseline;
      font-size: 13px; padding: 4px 0;
    }
    .stats-fav-row > span { color: var(--text-2); }
    .stats-fav-row > strong { font-weight: 700; color: var(--text); }
    [data-theme="light"] .stats-summary {
      background: linear-gradient(135deg, rgba(124,111,255,0.10), rgba(244,114,182,0.03));
      border-color: rgba(124,111,255,0.22);
    }
    @media (max-width: 360px) {
      .stats-grid { grid-template-columns: 1fr; }
    }

    /* ─────────────────────────────────────────────────────────────
     * Tutoriel premier lancement (js/tutorial.js)
     * Overlay fullscreen avec 4 panneaux .tutorial-cutout autour de
     * l'élément ciblé pour créer un trou de spotlight, plus une card
     * centrée avec titre/corps/dots/boutons. Au-dessus de tous les
     * autres overlays (z-index 1500 vs 1000 pour settings/subcat).
     * ───────────────────────────────────────────────────────────── */
    .tutorial-overlay {
      position: fixed; inset: 0;
      z-index: 1500;
      display: flex; justify-content: center;
      pointer-events: auto;
      /* Padding latéral + safe-area pour que la card respire sur les bords. */
      padding: 16px;
      padding-top: max(16px, env(safe-area-inset-top, 0px));
      padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    }
    /* Position de la card calculée par JS selon la moitié d'écran où se trouve
     * la cible du spotlight, pour ne jamais recouvrir l'élément éclairé. */
    .tutorial-overlay.position-center { align-items: center; }
    .tutorial-overlay.position-top    { align-items: flex-start; }
    .tutorial-overlay.position-bottom { align-items: flex-end; }
    .tutorial-cutout {
      position: absolute;
      background: rgba(13, 13, 18, 0.78);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      pointer-events: auto;
      cursor: pointer;       /* tap fond = skip */
    }
    [data-theme="light"] .tutorial-cutout { background: rgba(20, 18, 40, 0.55); }
    .tutorial-cutout-full { inset: 0; }
    .tutorial-spotlight-ring {
      position: absolute;
      pointer-events: none;
      border-radius: var(--r-md, 14px);
      box-shadow:
        0 0 0 3px rgba(124, 111, 255, 0.55),
        0 0 30px rgba(124, 111, 255, 0.45);
      animation: tutorialPulse 2s ease-in-out infinite;
    }
    @keyframes tutorialPulse {
      0%, 100% {
        box-shadow:
          0 0 0 3px rgba(124, 111, 255, 0.55),
          0 0 30px rgba(124, 111, 255, 0.45);
      }
      50% {
        box-shadow:
          0 0 0 6px rgba(124, 111, 255, 0.75),
          0 0 40px rgba(124, 111, 255, 0.65);
      }
    }
    .tutorial-card {
      position: relative;
      z-index: 1;
      width: calc(100% - 32px);
      max-width: 380px;
      max-height: calc(100vh - 64px);
      overflow-y: auto;
      background: var(--surface);
      border: 1px solid var(--border-strong, var(--border));
      border-radius: var(--r-lg, 18px);
      padding: 28px 22px 22px;
      box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.35));
      animation: tutorialIn 0.3s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
    }
    @keyframes tutorialIn {
      from { opacity: 0; transform: scale(0.92); }
      to { opacity: 1; transform: scale(1); }
    }
    .tutorial-skip {
      position: absolute;
      top: 12px; right: 12px;
      width: 32px; height: 32px;
      padding: 0;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 50%;
      color: var(--muted);
      font-size: 14px; line-height: 1;
      cursor: pointer;
      font-family: inherit;
      display: inline-flex; align-items: center; justify-content: center;
      transition: color 0.15s, border-color 0.15s, background 0.15s;
    }
    .tutorial-skip:hover { color: var(--text); border-color: var(--text); background: rgba(255,255,255,0.04); }
    .tutorial-title {
      font-family: 'Syne', sans-serif;
      font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
      margin: 0 0 10px;
      color: var(--text);
      padding-right: 36px;   /* place pour le bouton skip */
      line-height: 1.15;
    }
    .tutorial-body {
      font-size: 14px; color: var(--text-2, var(--muted));
      line-height: 1.55;
      margin: 0 0 16px;
    }
    .tutorial-progress {
      display: flex; gap: 6px; justify-content: center;
      margin-bottom: 16px;
    }
    .tutorial-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--border-strong, rgba(255,255,255,0.18));
      transition: background 0.2s, transform 0.2s var(--ease-spring, ease);
    }
    .tutorial-dot.active {
      background: var(--accent);
      transform: scale(1.2);
    }
    .tutorial-actions {
      display: flex; gap: 10px; justify-content: flex-end;
    }
    .tutorial-btn {
      padding: 10px 18px;
      min-height: 40px;
      border-radius: var(--r-md, 12px);
      font-family: inherit;
      font-size: 13px; font-weight: 700;
      cursor: pointer;
      border: 0;
      transition: transform 0.12s var(--ease-out, ease), box-shadow 0.18s, background 0.15s;
    }
    .tutorial-btn:active { transform: scale(0.97); }
    .tutorial-btn-primary {
      background: var(--grad-hero);
      color: #fff;
      box-shadow: 0 4px 14px rgba(124,111,255,0.35);
    }
    .tutorial-btn-primary:hover { box-shadow: 0 6px 20px rgba(124,111,255,0.5); }
    .tutorial-btn-secondary {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text);
    }
    .tutorial-btn-secondary:hover { background: rgba(255,255,255,0.04); border-color: var(--text-2, var(--muted)); }
    @media (max-width: 380px) {
      .tutorial-card { padding: 22px 18px 18px; }
      .tutorial-title { font-size: 19px; }
      .tutorial-body { font-size: 13px; }
      .tutorial-btn { padding: 9px 14px; font-size: 12px; }
    }