/* =========================================================================
   POTOS — Thème « SOIRÉE JEUX » : jetons et composants de base (docs/theme-soiree-jeux.md §5)

   Le thème, c'est le jeu lui-même : de vraies cartes, de vrais dés, des pions et des plateaux,
   dessinés nets et colorés, posés sur une TABLE. Sombre par défaut (le soir), mode clair au choix.
   Ce fichier est chargé PARTOUT, juste après css/styles.css et AVANT les feuilles des jeux :
   un jeu peut donc surcharger un jeton dans son propre écran.

   ▸ MODE  <html data-theme="dark" | "light">, posé dans <head> avant le premier rendu (index.html),
           mémorisé sur l'appareil (localStorage « potos.theme »), sinon prefers-color-scheme.
           Bouton : tout élément [data-action="theme"] (js/theme.js).
   ▸ ÉCRANS PAS ENCORE ADAPTÉS au mode clair : un écran de jeu (.screen hors accueil / salon) reste
           SOMBRE en mode clair tant qu'il ne porte pas l'attribut data-theme-clair (voir bas du bloc 1).
           Un jeu adapté ajoute simplement data-theme-clair sur son <main class="screen">.
   ▸ JETONS (sombre et clair) — toujours passer par eux, jamais de couleur en dur dans le socle :
       fonds      --bg --bg-2 --bg-3                 surfaces  --surface --surface-2 --surface-3
       texte      --text --muted --faint             filets    --line --line-2 --line-hi
       couleurs   --accent (jaune, action principale) --accent-2 (rouge) --accent-3 (violet)
                  --ok (vert) --warn (ambre) --danger --orange --blue  (+ --*-rgb pour les transparences)
       texte coloré --accent-text --ok-text --danger-text --accent-2-text (lisibles AA sur --bg et --surface)
       sur aplat  --on-accent (= --on-neon) : encre sombre sur toute couleur pleine
       objets     --rouge --jaune --vert --bleu (les 4 familles), --papier --papier-2 --encre,
                  --tapis --tapis-2 --tapis-clair --bois --bois-2, --ivoire
       ombres     --ombre-1 --ombre-2 --ombre-3 --ombre-objet --ombre-levee
       formes     --r-xs --r-sm --r-md --r-lg --r-xl --r-pill --r-carte
       espaces    --e-1 (4) --e-2 (8) --e-3 (12) --e-4 (16) --e-5 (24) --e-6 (32) --e-7 (48)
       toucher    --tap (44 px) --tap-gros (56 px)
       typo       --font-display (Fredoka) --font-ui (Space Grotesk) --font-hud (= Fredoka, chiffres)
       mouvement  --spring --ease-out --d-rapide (.12 s) --d-moyen (.25 s) --d-lent (.45 s)
   ▸ COMPOSANTS « objets réels » : .sj-tapis .sj-carte .sj-de .sj-pion .sj-jeton .sj-case
     interface : .btn-primaire .btn-secondaire .btn-ok .btn-danger (sur .btn) · .puce · .sj-bulle
                 .toast · .sheet / .sj-feuille · .boite-jeu (icône « boîte de jeu »)
     cadre de jeu commun : .cadre-jeu > .cj-haut / .cj-joueurs / .cj-table / .cj-moi (+ .cj-action)
   ▸ FLUIDITÉ (docs/fluidite.md) : on n'anime que transform et opacity ; aucun backdrop-filter ;
     les ombres et dégradés sont peints une fois. Les noms de l'ancien thème (--glass*, --glow-*,
     --holo, --nuit, --citron…) restent définis (compatibilité) mais pointent vers la nouvelle charte.
   ========================================================================= */

/* ======================= 1. JETONS — SOMBRE (défaut) ======================= */
:root,
.theme-sombre,
:root[data-theme="light"] .screen:not(#screen-home):not(#screen-lobby):not(.jx-screen):not([data-theme-clair]) {
  color-scheme: dark;
  /* Fonds : la pièce le soir (bleu-gris très sombre, chaud) */
  --bg: #15171E;
  --bg-2: #1B1E27;
  --bg-3: #242833;
  --bg-rgb: 21 23 30;
  /* Surfaces : panneaux, cartes d'interface, feuilles */
  --surface: #1F222B;
  --surface-2: #282C37;
  --surface-3: #333845;
  /* Texte (AA vérifié sur --bg, --surface et --surface-2) */
  --text: #F5F2EB;
  --muted: #B9BCC8;
  --faint: #969BAD;
  /* Filets */
  --line: rgba(255, 255, 255, .10);
  --line-2: rgba(255, 255, 255, .18);
  --line-hi: rgba(255, 255, 255, .40);
  --filet: #3A3F4D;                        /* filet PLEIN (hex) : canvas, bords de podium */
  /* Couleurs franches (aplats) */
  --accent: #FFC233;   --accent-rgb: 255 194 51;
  --accent-2: #FF6B6B; --accent-2-rgb: 255 107 107;
  --accent-3: #A98BFF; --accent-3-rgb: 169 139 255;
  --ok: #3FD18A;       --ok-rgb: 63 209 138;
  --warn: #FFA83D;     --warn-rgb: 255 168 61;
  --danger: #FF5A6E;   --danger-rgb: 255 90 110;
  --orange: #FF8A3D;   --orange-rgb: 255 138 61;
  --blue: #5AA2FF;     --blue-rgb: 90 162 255;
  /* Couleurs en TEXTE (sur --bg / --surface) */
  --accent-text: #FFC233;
  --accent-2-text: #FF8A8A;
  --warn-text: #FFB547;
  --ok-text: #4FDC97;
  --danger-text: #FF8090;
  /* Encre sur un aplat coloré (jaune, vert, rouge, bleu…) */
  --on-accent: #1B1608;
  --on-neon: var(--on-accent);
  /* Objets réels (identiques dans les deux modes : une carte reste blanche, un tapis reste vert) */
  --rouge: #E5383B;  --jaune: #FFC233;  --vert: #22A565;  --bleu: #2C74DB;
  --papier: #FBF8F1; --papier-2: #EFE8DA; --encre: #1E1F26; --ivoire: #F6F0E2;
  --tapis: #1E6A4B;  --tapis-2: #12452F; --tapis-clair: #2A7E5B; --tapis-ligne: rgba(255, 255, 255, .14);
  --bois: #8A5A36;   --bois-2: #5E3A20;
  /* Ombres (posées une fois, jamais animées) */
  --ombre-1: 0 1px 2px rgba(0, 0, 0, .35);
  --ombre-2: 0 6px 16px -6px rgba(0, 0, 0, .55);
  --ombre-3: 0 18px 40px -14px rgba(0, 0, 0, .7);
  --ombre-objet: 0 1.5px 0 rgba(0, 0, 0, .3), 0 6px 12px -4px rgba(0, 0, 0, .5);
  --ombre-levee: 0 16px 26px -10px rgba(0, 0, 0, .6);
  --bord-3d: rgba(0, 0, 0, .38);           /* tranche des boutons « de jeu » */
  /* Fond de la page */
  --page: radial-gradient(120% 70% at 50% -10%, #20242F 0%, var(--bg) 60%);
  /* ---- Compatibilité ancien thème (ne pas utiliser dans du code neuf) ---- */
  --glass: rgba(31, 34, 43, .9);
  --glass-strong: rgba(27, 30, 39, .97);
  --glass-solid: var(--surface);
  --glass-2: rgba(255, 255, 255, .05);
  --glass-3: rgba(255, 255, 255, .09);
  --holo: linear-gradient(115deg, #FFD66B 0%, #FFB13B 45%, #FF7A59 100%);
  --glow-accent: 0 0 0 2px rgb(var(--accent-rgb) / .55), var(--ombre-2);
  --glow-accent-2: 0 0 0 2px rgb(var(--accent-2-rgb) / .55), var(--ombre-2);
  --glow-accent-3: 0 0 0 2px rgb(var(--accent-3-rgb) / .55), var(--ombre-2);
  --glow-ok: 0 0 0 2px rgb(var(--ok-rgb) / .6), var(--ombre-2);
  --glow-warn: 0 0 0 2px rgb(var(--warn-rgb) / .6), var(--ombre-2);
  --glow-danger: 0 0 0 2px rgb(var(--danger-rgb) / .6), var(--ombre-2);
  --tglow-accent: none;
  --shadow-deep: var(--ombre-3);
  /* Alias du tout premier thème « Candy » (end.css, boutique…) : recalculés ici pour suivre le mode de chaque écran */
  --nuit: var(--bg);
  --nuit-2: var(--bg-2);
  --prune: var(--bg-3);
  --ink: var(--on-accent);
  --creme: var(--text);
  --creme-2: var(--muted);
  --citron: var(--warn);
  --bonbon: var(--accent-2);
  --menthe: var(--ok);
  --lagon: var(--blue);
  --mandarine: var(--orange);
  --lavande: var(--accent-3);
  --tomate: var(--danger);
}

/* Écran de jeu pas encore adapté, en mode clair : il garde son fond et son texte sombres */
:root[data-theme="light"] .screen:not(#screen-home):not(#screen-lobby):not(.jx-screen):not([data-theme-clair]) {
  background-color: var(--bg); color: var(--text);
}

/* ======================= 2. JETONS — CLAIR ======================= */
:root[data-theme="light"],
.theme-clair {
  /* « only » : le navigateur ne réécrit pas nos couleurs (assombrissement automatique de Chrome, mode sombre forcé des
     téléphones) : sans lui, les jetons jaunes de « 4 à la suite » viraient au brun, presque rouges (retours 14/11 §3.5).
     Le mode sombre, lui, est déclaré « dark » : le navigateur sait que la page est déjà sombre et n'y touche pas. */
  color-scheme: only light;
  --bg: #F3EFE6;
  --bg-2: #EAE4D7;
  --bg-3: #DFD7C6;
  --bg-rgb: 243 239 230;
  --surface: #FFFFFF;
  --surface-2: #F7F4EE;
  --surface-3: #EDE8DE;
  --text: #1D1E25;
  --muted: #4C5060;
  --faint: #62667A;
  --line: rgba(29, 30, 37, .12);
  --line-2: rgba(29, 30, 37, .22);
  --line-hi: rgba(29, 30, 37, .45);
  --filet: #D6CEBE;
  --accent: #F5B400;   --accent-rgb: 245 180 0;
  --accent-2: #E5484D; --accent-2-rgb: 229 72 77;
  --accent-3: #8B6CFA; --accent-3-rgb: 139 108 250;
  --ok: #2DB873;       --ok-rgb: 45 184 115;
  --warn: #F29A1F;     --warn-rgb: 242 154 31;
  --danger: #E8495F;   --danger-rgb: 232 73 95;
  --orange: #F07A2A;   --orange-rgb: 240 122 42;
  --blue: #3F8BF0;     --blue-rgb: 63 139 240;
  --accent-text: #875900;
  --accent-2-text: #B3262C;
  --warn-text: #8F5200;
  --ok-text: #11703F;
  --danger-text: #B4213A;
  --on-accent: #1B1608;
  --tapis: #22744F;  --tapis-2: #175339; --tapis-clair: #2F8A61; --tapis-ligne: rgba(255, 255, 255, .16);
  --ombre-1: 0 1px 2px rgba(60, 45, 20, .14);
  --ombre-2: 0 6px 16px -6px rgba(60, 45, 20, .25);
  --ombre-3: 0 18px 40px -14px rgba(60, 45, 20, .32);
  --ombre-objet: 0 1.5px 0 rgba(60, 45, 20, .18), 0 6px 12px -4px rgba(60, 45, 20, .3);
  --ombre-levee: 0 16px 26px -10px rgba(60, 45, 20, .35);
  --bord-3d: rgba(60, 45, 20, .28);
  --page: radial-gradient(120% 70% at 50% -10%, #FFFDF7 0%, var(--bg) 60%);
  --glass: rgba(255, 255, 255, .92);
  --glass-strong: rgba(255, 255, 255, .97);
  --glass-2: rgba(29, 30, 37, .04);
  --glass-3: rgba(29, 30, 37, .08);
}

/* ======================= 3. JETONS COMMUNS (formes, espaces, typo, mouvement) ======================= */
:root {
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;
  --r-carte: 9%;                 /* coins d'une carte à jouer (en % de sa largeur) */
  --cut: 0px;                    /* plus de coins biseautés « HUD » */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px;
  --tap: 44px;
  --tap-gros: 56px;
  /* Deux familles seulement : Fredoka (titres, boutons, chiffres : rond, chaleureux, très lisible)
     et Space Grotesk (texte courant, déjà chargée). Orbitron et Chakra Petch partent dans le thème « Espace ». */
  --font-display: "Fredoka", "Space Grotesk", system-ui, sans-serif;
  --font-ui: "Space Grotesk", system-ui, sans-serif;
  --font-hud: "Fredoka", "Space Grotesk", system-ui, sans-serif;
  --t-xs: .75rem; --t-sm: .875rem; --t-md: 1rem; --t-lg: 1.25rem; --t-xl: 1.6rem; --t-2xl: clamp(1.9rem, 7vw, 3rem);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --d-rapide: .12s; --d-moyen: .25s; --d-lent: .45s;
  --blur: 0px;
}

/* ======================= 4. COMPOSANTS ======================= */
@layer components {

  /* ---------- Tapis de table (le centre de chaque jeu) ---------- */
  /* Feutre vert peint UNE fois (dégradés fixes). Variante bois : .sj-tapis.is-bois (rebord de table). */
  .sj-tapis {
    position: relative; border-radius: var(--r-xl); color: #F5F2EB;
    background:
      radial-gradient(130% 95% at 50% 35%, var(--tapis-clair) 0%, var(--tapis) 52%, var(--tapis-2) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 12px 38px -8px rgba(0, 0, 0, .45);
    contain: layout paint;
  }
  .sj-tapis.is-bois { border: 8px solid var(--bois); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 12px 38px -8px rgba(0, 0, 0, .45), 0 0 0 1px var(--bois-2), var(--ombre-3); }
  .sj-tapis-zone { /* emplacement marqué sur le tapis (pioche, défausse, écurie) */
    border: 2px dashed var(--tapis-ligne); border-radius: var(--r-md);
  }

  /* ---------- Carte à jouer ---------- */
  /* <div class="sj-carte" style="--c: var(--rouge)"><b class="sj-coin">7</b><b class="sj-valeur">7</b><b class="sj-coin is-bas">7</b></div>
     Taille : --carte-w (largeur) ; rapport 5:7. Dos : .sj-carte.is-dos (motif --dos-1 / --dos-2).
     Retournement : .sj-carte-volte > .sj-carte (face) + .sj-carte.is-dos, puis .is-retournee (transform seul). */
  .sj-carte {
    --carte-w: 64px; --c: var(--rouge);
    position: relative; display: grid; place-items: center; flex: none;
    width: var(--carte-w); aspect-ratio: 5 / 7; border-radius: calc(var(--carte-w) * .09);
    font-family: var(--font-display); font-weight: 700; line-height: 1; color: var(--c);
    background: var(--papier); border: 1px solid rgba(0, 0, 0, .14); box-shadow: var(--ombre-objet);
    -webkit-user-select: none; user-select: none;
  }
  .sj-carte::before { /* filet intérieur imprimé */
    content: ""; position: absolute; inset: 6%; border-radius: calc(var(--carte-w) * .06);
    border: 1.5px solid color-mix(in srgb, var(--c) 35%, transparent); pointer-events: none;
  }
  .sj-carte.is-pleine { color: #fff; background: var(--c); border-color: rgba(0, 0, 0, .2); }
  .sj-carte.is-pleine::before { border-color: rgba(255, 255, 255, .55); }
  .sj-carte .sj-valeur { font-size: calc(var(--carte-w) * .5); }
  .sj-carte.is-mot .sj-valeur { font-size: calc(var(--carte-w) * .22); } /* « Joker », « Inverse » : mot entier, plus petit */
  .sj-carte.is-mot .sj-coin { display: none; }
  .sj-carte .sj-coin { position: absolute; top: 7%; left: 9%; font-size: calc(var(--carte-w) * .2); }
  .sj-carte .sj-coin.is-bas { top: auto; left: auto; right: 9%; bottom: 7%; rotate: 180deg; }
  .sj-carte.is-dos {
    --dos-1: var(--rouge); --dos-2: #B8262A;
    background: repeating-linear-gradient(45deg, var(--dos-1) 0 6px, var(--dos-2) 6px 12px);
    border: calc(var(--carte-w) * .07) solid var(--papier);
  }
  .sj-carte.is-dos::before { inset: 4%; border-color: rgba(255, 255, 255, .45); }
  .sj-carte.is-jouable { translate: 0 -6px; box-shadow: 0 0 0 2px var(--accent), var(--ombre-levee); }
  .sj-carte.is-grisee { filter: saturate(.25) brightness(.8); }
  .sj-carte-volte { position: relative; width: var(--carte-w, 64px); aspect-ratio: 5 / 7; transform-style: preserve-3d; transition: transform var(--d-lent) var(--ease-out); }
  .sj-carte-volte > .sj-carte { position: absolute; inset: 0; width: 100%; backface-visibility: hidden; }
  .sj-carte-volte > .sj-carte.is-dos { transform: rotateY(180deg); }
  .sj-carte-volte.is-retournee { transform: rotateY(180deg); }

  /* ---------- Dé ---------- */
  /* <span class="sj-de" data-v="5"><i></i>×9</span> (Potos.Objets.de(5) écrit le HTML). Taille : --de (côté). */
  .sj-de {
    --de: 44px; --de-fond: var(--ivoire); --de-point: var(--encre);
    display: inline-grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); place-items: center; flex: none;
    width: var(--de); height: var(--de); padding: calc(var(--de) * .14); border-radius: calc(var(--de) * .22);
    background: radial-gradient(120% 120% at 30% 25%, #fff 0%, var(--de-fond) 55%, color-mix(in srgb, var(--de-fond) 82%, #000) 100%);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14), var(--ombre-objet);
  }
  .sj-de > i { width: 72%; aspect-ratio: 1; border-radius: 50%; background: var(--de-point); visibility: hidden; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .35); }
  .sj-de[data-v="1"] > i:nth-child(5),
  .sj-de[data-v="2"] > i:is(:nth-child(3), :nth-child(7)),
  .sj-de[data-v="3"] > i:is(:nth-child(3), :nth-child(5), :nth-child(7)),
  .sj-de[data-v="4"] > i:is(:nth-child(1), :nth-child(3), :nth-child(7), :nth-child(9)),
  .sj-de[data-v="5"] > i:is(:nth-child(1), :nth-child(3), :nth-child(5), :nth-child(7), :nth-child(9)),
  .sj-de[data-v="6"] > i:is(:nth-child(1), :nth-child(3), :nth-child(4), :nth-child(6), :nth-child(7), :nth-child(9)) { visibility: visible; }
  .sj-de.is-rouge { --de-fond: #E5383B; --de-point: #fff; }
  .sj-de.is-roule { animation: sj-de-roule .6s var(--ease-out); }

  /* ---------- Pion (vu de profil : tête + corps) et pion plat (vu de dessus) ---------- */
  /* <span class="sj-pion" style="--c: var(--bleu)"></span> · taille --pion (hauteur) */
  .sj-pion {
    --pion: 34px; --c: var(--rouge);
    position: relative; display: inline-block; flex: none; width: calc(var(--pion) * .78); height: var(--pion);
  }
  .sj-pion::before { /* tête */
    content: ""; position: absolute; left: 50%; top: 0; width: 46%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 70%, #000));
  }
  .sj-pion::after { /* corps évasé + socle */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 66%;
    clip-path: polygon(34% 0, 66% 0, 86% 78%, 100% 84%, 100% 100%, 0 100%, 0 84%, 14% 78%);
    background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #000), var(--c) 40%, color-mix(in srgb, var(--c) 60%, #fff) 60%, var(--c) 75%, color-mix(in srgb, var(--c) 70%, #000));
  }
  .sj-pion { filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, .45)); } /* statique : jamais sur un pion qui se déplace en continu */
  .sj-pion-plat { /* petits chevaux / jeu de l'oie vus de dessus */
    --pion: 28px; --c: var(--rouge);
    display: inline-block; flex: none; width: var(--pion); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 60%, #fff) 0 22%, var(--c) 24% 62%, color-mix(in srgb, var(--c) 72%, #000) 64%);
    box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .35), var(--ombre-objet);
  }

  /* ---------- Jeton (pièce de dames, jeton de mise, marqueur) ---------- */
  /* <span class="sj-jeton" style="--c: #F4EDE0"></span> · .is-dame (couronne) · taille --jeton */
  .sj-jeton {
    --jeton: 36px; --c: var(--papier);
    position: relative; display: inline-grid; place-items: center; flex: none;
    width: var(--jeton); aspect-ratio: 1; border-radius: 50%; color: color-mix(in srgb, var(--c) 45%, #000);
    background:
      radial-gradient(circle, transparent 0 52%, rgba(0, 0, 0, .14) 53% 56%, transparent 57%),
      radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 80%, #000));
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .22), 0 0 0 1px rgba(0, 0, 0, .28), var(--ombre-objet);
    font: 700 calc(var(--jeton) * .42) / 1 var(--font-display);
  }
  .sj-jeton.is-noir { --c: #2A2B31; color: #E9E2D2; }
  .sj-jeton.is-dame::after { content: "♛"; font-size: calc(var(--jeton) * .5); line-height: 1; }

  /* ---------- Case de plateau ---------- */
  /* <div class="sj-case" style="--c: var(--bleu)"><span class="sj-case-nom">Rue…</span></div>
     .is-bandeau (bande de couleur en haut, comme une rue) · .is-speciale (fond teinté) · .is-cible (destination) */
  .sj-case {
    --c: var(--bleu);
    position: relative; display: grid; place-items: center; min-width: 0; padding: 3px;
    font: 600 .62rem/1.1 var(--font-ui); text-align: center; color: var(--encre);
    background: var(--papier); border: 1px solid rgba(0, 0, 0, .16); border-radius: var(--r-xs);
  }
  .sj-case.is-bandeau { padding-top: 22%; background: linear-gradient(var(--c), var(--c)) top / 100% 20% no-repeat, var(--papier); }
  .sj-case.is-speciale { background: color-mix(in srgb, var(--c) 22%, var(--papier)); }
  .sj-case.is-sombre { color: var(--papier); background: #3A3B42; }
  .sj-case::after { /* surbrillance « tu peux aller ici » : seule l'opacité pulse */
    content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; opacity: 0;
    box-shadow: 0 0 0 3px var(--accent), inset 0 0 0 2px rgba(255, 255, 255, .7);
  }
  .sj-case.is-cible::after { opacity: 1; animation: sj-pulse 1.2s ease-in-out infinite; }

  /* ---------- Icône « boîte de jeu » ---------- */
  /* <span class="boite-jeu" style="--g: #E5383B"><span class="bj-ico">🎲</span></span>
     Couvercle coloré du jeu, étiquette claire, tranche en bas. Tailles : --bj (côté), .is-mini, .is-grand */
  .boite-jeu {
    --bj: 72px; --g: var(--rouge);
    position: relative; display: inline-grid; place-items: center; flex: none; width: var(--bj); aspect-ratio: 1;
    border-radius: calc(var(--bj) * .2); isolation: isolate;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .28) 0 22%, transparent 22% 100%),
      linear-gradient(160deg, color-mix(in srgb, var(--g) 82%, #fff) 0%, var(--g) 55%, color-mix(in srgb, var(--g) 78%, #000) 100%);
    box-shadow: 0 calc(var(--bj) * .06) 0 color-mix(in srgb, var(--g) 55%, #000), var(--ombre-2);
    margin-bottom: calc(var(--bj) * .06);
  }
  .boite-jeu::before { /* étiquette ronde au centre du couvercle */
    content: ""; position: absolute; z-index: -1; inset: 17%; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #fff, var(--papier) 60%, var(--papier-2));
    box-shadow: 0 0 0 calc(var(--bj) * .03) rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .08);
  }
  .boite-jeu .bj-ico { font-size: calc(var(--bj) * .4); line-height: 1; }
  .boite-jeu.is-mini { --bj: 34px; }
  .boite-jeu.is-grand { --bj: 112px; }

  /* ---------- Boutons : variantes sémantiques (sur .btn) ---------- */
  .btn-primaire { --bg: var(--accent); --fg: var(--on-accent); }
  .btn-secondaire { --bg: var(--surface-2); --fg: var(--text); --edge: var(--line-2); }
  .btn-ok { --bg: var(--ok); --fg: var(--on-accent); }
  .btn-danger { --bg: var(--danger); --fg: var(--on-accent); }

  /* ---------- Puce ---------- */
  .puce {
    display: inline-flex; align-items: center; gap: .4em; min-height: 32px; padding: .35em .8em; white-space: nowrap;
    font: 600 .8rem/1 var(--font-ui); color: var(--text); background: var(--surface-2);
    border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer;
  }
  .puce[aria-pressed="true"], .puce.is-on { color: var(--on-accent); background: var(--accent); border-color: transparent; }

  /* ---------- Bulle (chat, réaction au-dessus d'un joueur) ---------- */
  .sj-bulle {
    position: relative; max-width: 240px; padding: 7px 12px 8px; font: 500 .9rem/1.35 var(--font-ui);
    color: var(--encre); background: var(--papier); border-radius: 14px 14px 14px 4px; box-shadow: var(--ombre-2);
  }
  .sj-bulle.is-moi { background: var(--accent); color: var(--on-accent); border-radius: 14px 14px 4px 14px; }

  /* ---------- Feuille mobile générique (hors salon : .sheet du salon reste dans styles.css) ---------- */
  .sj-feuille {
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; max-height: 86dvh; overflow-y: auto;
    padding: 6px 16px calc(16px + env(safe-area-inset-bottom)); color: var(--text); background: var(--surface);
    border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px -12px rgba(0, 0, 0, .55);
    transform: translateY(105%); visibility: hidden;
    transition: transform .3s cubic-bezier(.5, 0, .75, 0), visibility 0s linear .3s;
  }
  .sj-feuille::before { content: ""; display: block; width: 44px; height: 5px; margin: 4px auto 10px; border-radius: 5px; background: var(--line-2); }
  .sj-feuille.is-open { transform: none; visibility: visible; transition: transform .42s var(--ease-out), visibility 0s; }

  /* ---------- Bouton clair / sombre ---------- */
  .theme-btn .ico-soleil, :root[data-theme="light"] .theme-btn .ico-lune { display: none; }
  :root[data-theme="light"] .theme-btn .ico-soleil { display: inline; }

  /* ======================= 5. CADRE DE JEU COMMUN ======================= */
  /* Le même pour TOUS les jeux (docs/theme-soiree-jeux.md §3 et §5.7) :
     <main class="screen cadre-jeu">
       <header class="cj-haut"> ← · .cj-titre (boîte mini + nom) · .cj-regles « ? Règles en 30 s » · #voice-slot · ⋯ menu </header>
       <div class="cj-joueurs"> .cj-joueur (.is-tour, .is-moi, .is-absent) … </div>
       <div class="cj-table sj-tapis"> … la table … </div>
       <footer class="cj-moi"> ma main / mes infos · <button class="btn btn-primaire cj-action">Lancer les dés</button></footer>
     </main>
     Téléphone en portrait : 4 rangées. Paysage bas (≤ 500 px de haut) : joueurs à gauche, table au centre, ma zone à droite. */
  .cadre-jeu {
    position: fixed; inset: 0; z-index: 20; display: grid; overflow: hidden; color: var(--text); background: var(--page), var(--bg);
    grid-template: "haut" auto "joueurs" auto "table" minmax(0, 1fr) "moi" auto / minmax(0, 1fr);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .cadre-jeu[hidden] { display: none; }
  .cj-haut { grid-area: haut; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 6px 10px; }
  .cj-titre { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font: 600 1.05rem/1.1 var(--font-display); }
  .cj-titre b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Téléphone (≤ 480 px) : le nom du jeu passe sur 2 lignes, un peu plus petit, au lieu d'être coupé (« Batai… ») ;
     ≤ 400 px, la boîte mini laisse sa place au nom (le jeu reste reconnaissable à son nom entier). */
  @media (max-width: 480px) {
    .cj-titre { font-size: .92rem; line-height: 1.05; gap: 6px; }
    .cj-titre b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: normal; hyphens: none; }
  }
  @media (max-width: 400px) { .cj-titre .boite-jeu { display: none; } }
  .cj-regles {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 6px; flex: none; cursor: pointer;
    font: 600 .85rem/1 var(--font-display); color: var(--text); background: var(--surface-2);
    border: 1px solid var(--line); border-radius: var(--r-pill);
  }
  .cj-regles > b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--on-accent); background: var(--accent); font-size: 1rem; }
  .cj-joueurs { grid-area: joueurs; display: flex; gap: 8px; padding: 2px 10px 8px; overflow-x: auto; scrollbar-width: none; }
  .cj-joueur {
    position: relative; display: flex; align-items: center; gap: 8px; flex: none; min-height: 48px; padding: 4px 12px 4px 4px;
    color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
  }
  .cj-joueur .cj-av { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-3); overflow: hidden; }
  .cj-joueur .cj-nom { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .85rem/1.15 var(--font-ui); }
  .cj-joueur .cj-info { display: block; font: 500 .72rem/1.1 var(--font-ui); color: var(--muted); }
  .cj-joueur.is-tour { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .cj-joueur.is-tour::after { /* petite flèche « à lui de jouer » */
    content: ""; position: absolute; left: 22px; bottom: -7px; width: 10px; height: 10px; rotate: 45deg; background: var(--accent);
  }
  .cj-joueur.is-moi { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
  .cj-joueur.is-absent { opacity: .5; }
  .cj-table { grid-area: table; position: relative; min-height: 0; margin: 0 10px; display: grid; place-items: center; overflow: hidden; }
  .cj-moi {
    grid-area: moi; display: grid; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--line); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, .5);
  }
  .cj-action { width: 100%; min-height: var(--tap-gros); font-size: 1.15rem; }
  .cj-action[aria-disabled="true"] { --bg: var(--surface-3); --fg: var(--muted); opacity: 1; filter: none; } /* « Au tour de Léa » : lisible */
  @media (orientation: landscape) and (max-height: 500px) {
    .cadre-jeu { grid-template: "haut haut haut" auto "joueurs table moi" minmax(0, 1fr) / minmax(150px, 22%) minmax(0, 1fr) minmax(190px, 26%); }
    .cj-haut { min-height: 46px; padding-block: 3px; }
    .cj-joueurs { flex-direction: column; overflow-y: auto; padding: 0 0 8px 10px; }
    .cj-moi { align-content: end; margin: 0 10px 8px 0; border: 1px solid var(--line); border-radius: var(--r-lg); }
  }
  @media (min-width: 1024px) and (min-height: 600px) {
    .cadre-jeu { grid-template: "haut haut haut" auto "joueurs table moi" minmax(0, 1fr) / 240px minmax(0, 1fr) 300px; }
    .cj-joueurs { flex-direction: column; padding: 4px 0 16px 16px; }
    .cj-moi { align-content: end; margin: 0 16px 16px 0; border: 1px solid var(--line); border-radius: var(--r-xl); }
    .cj-table { margin: 0 16px 16px; }
  }
  /* « Règles en 30 s » : liste numérotée lisible (dans #modal ou une .sj-feuille) */
  .regles-30 { display: grid; gap: 10px; margin: 14px 0 6px; padding: 0; list-style: none; counter-reset: r; text-align: left; }
  .regles-30 > li { counter-increment: r; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; font: 500 .95rem/1.4 var(--font-ui); }
  .regles-30 > li::before {
    content: counter(r); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    font: 700 .9rem/1 var(--font-display); color: var(--on-accent); background: var(--accent);
  }
  /* Emplacement du chat vocal (js/voice.js le remplit) : ne prend aucune place tant qu'il est vide */
  .voice-slot { display: contents; }
  .voice-slot:empty { display: none; }
}

/* ======================= 6. ANIMATIONS (transform / opacity uniquement) ======================= */
@keyframes sj-de-roule {
  0% { transform: translate(-30px, -12px) rotate(-200deg) scale(.8); opacity: 0; }
  35% { opacity: 1; }
  70% { transform: translate(3px, 0) rotate(12deg) scale(1.04); }
  100% { transform: none; }
}
@keyframes sj-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes sj-pose { from { transform: translateY(-14px) scale(1.06); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sj-de.is-roule, .sj-case.is-cible::after { animation: none; }
}
.perf-lite .sj-case.is-cible::after { animation: none; }