/* =========================================================================
   POTOS — Composants du SOCLE, thème « SOIRÉE JEUX » (docs/theme-soiree-jeux.md §5)
   Accueil, salon, toasts, feuilles, fenêtres, compte à rebours. Les utilitaires Tailwind
   gèrent la mise en page ; ce fichier gère les composants et le « game feel ».

   ▸ JETONS (couleurs sombre / clair, ombres, rayons, espaces, typo) : css/theme.css, chargé
     juste après ce fichier. Ne jamais écrire une couleur en dur ici : toujours un jeton.
   ▸ COMPOSANTS : .btn (+ -citron = principal, -menthe = valider, -bonbon, -lagon, -violet,
     -creme = secondaire, -holo = premium ; -xl, -sm ; .btn-primaire / .btn-secondaire dans theme.css),
     .sticker (carte d'interface), .panel, .chip, .icon-btn, .field, .tag, .meta-chip, .toast…
     Variante de bouton = surcharger --bg (aplat) / --fg (texte) / --edge (filet).
   ▸ Objets réels (carte, dé, pion, jeton, case, tapis), boîte de jeu, cadre de jeu commun :
     css/theme.css.
   ========================================================================= */

/* Même ordre de couches que Tailwind v4 : les utilitaires restent prioritaires. */
@layer theme, base, components, utilities;

:root {
  --bw: 1px;   /* épaisseur des contours (filets fins) */
  --lift: 4px;
}

@layer base {
  html { -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
  body { min-height: 100dvh; background: var(--bg); color: var(--text); font-family: var(--font-ui); overflow-x: hidden; }
  ::selection { background: rgb(var(--accent-rgb) / .55); color: var(--text); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  * { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
  /* Démarrage : le haut de l'accueil (logo, titre, sous-titre) est peint dès la première image (premier affichage et
     LCP rapides, docs/seo-publicite.md §5) ; le reste attend la décision en ligne / démo de js/app.js (compteurs,
     carte « Jouer », salons, jeux), comme avant. Opacité seulement : rien ne bouge (pas de décalage de mise en page). */
  body.is-booting .screen:not(#screen-home),
  body.is-booting #screen-home > :not(.home-top):not(.home-hero),
  body.is-booting #screen-home .home-top > div,
  body.is-booting #screen-home .home-hero > :not(:first-child),
  body.is-booting #screen-home .home-hero > :first-child > :not(.home-title):not(.home-sub) { opacity: 0; }
  .screen { transition: opacity .25s ease; overflow-x: clip; }
  /* Toucher : pas de délai de 300 ms (double-tap zoom), sur tout ce qui se touche.
     touch-action ne s'hérite pas : on le pose aussi sur les éléments interactifs eux-mêmes.
     Dans @layer base : un jeu qui veut « none » (glisser une pièce) le surcharge sans effort. */
  html, body, a, button, input, select, textarea, label, summary, [role="button"], [data-action], [tabindex] { touch-action: manipulation; }
  /* Retour visuel IMMÉDIAT à l'appui pour tous les boutons qui n'en définissent pas (spécificité nulle) */
  :where(button, [role="button"], a[href], summary):active { filter: brightness(.9); transition-duration: 0s; }
}

@layer components {
  /* =================== Fond : la pièce, le soir (peint une fois, rien ne bouge) =================== */
  .bg-party { position: fixed; inset: 0; z-index: -1; pointer-events: none; contain: strict; background: var(--page), var(--bg); }
  .floaty { display: none; }

  /* =================== Logo « potos » : les deux « o » sont des yeux qui suivent le doigt =================== */
  .logo {
    display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 700;
    font-size: 30px; line-height: 1; letter-spacing: -.01em; color: var(--text); text-decoration: none; user-select: none;
  }
  .logo-sm { font-size: 21px; }
  .logo-eye {
    position: relative; display: inline-block; width: .62em; height: .62em; margin: 0 .05em;
    border-radius: 50%; overflow: hidden; transform: translateY(.06em);
    background: #fff; border: .08em solid var(--text);
  }
  .logo-eye i {
    position: absolute; left: 50%; top: 50%; width: 48%; height: 48%; margin: -24% 0 0 -24%; border-radius: 50%;
    background: var(--encre);
    transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform .12s ease-out;
  }
  .logo-eye:first-of-type i { background: var(--rouge); }
  .logo.is-blinking .logo-eye { animation: eye-blink .2s ease-in-out; }

  /* =================== Carte d'interface (ancien panneau « HUD ») =================== */
  .sticker {
    --fill: var(--surface);
    position: relative; isolation: isolate; color: var(--text);
    background: var(--fill); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--ombre-2);
  }
  button.sticker { cursor: pointer; transition: transform .2s var(--spring); }
  button.sticker:hover { border-color: var(--line-2); }
  button.sticker:active { transform: scale(.985); }

  /* Carte d'info légère */
  .panel {
    position: relative; padding: 18px 18px 20px; border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--ombre-1);
  }
  .panel-ico { display: grid; place-items: center; width: 52px; height: 52px; font-size: 28px; border-radius: 14px; background: var(--surface-2); }
  .step-num {
    display: inline-grid; place-items: center; width: 32px; height: 32px; margin-bottom: 10px; border-radius: 50%;
    font: 700 1rem/1 var(--font-display); color: var(--on-accent); background: var(--accent);
  }

  /* =================== Boutons « de jeu » : aplat franc + tranche en bas, enfoncés à l'appui =================== */
  .btn {
    --bg: var(--surface-2); --fg: var(--text); --edge: transparent; --br: var(--r-md);
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    min-height: 48px; padding: .75em 1.25em; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
    line-height: 1; letter-spacing: .01em; color: var(--fg);
    background: var(--bg); border: 1px solid var(--edge); border-radius: var(--br);
    box-shadow: inset 0 -3px 0 var(--bord-3d), var(--ombre-1);
    cursor: pointer; user-select: none;
    transition: transform var(--d-rapide) ease, filter .15s ease;
  }
  .btn:hover { filter: brightness(1.06); }
  .btn:active, .btn.is-pressed { transform: translateY(2px); box-shadow: inset 0 -1px 0 var(--bord-3d); filter: brightness(.96); transition-duration: 0s; }
  .btn[aria-disabled="true"] { opacity: .55; filter: saturate(.4); cursor: not-allowed; }
  .btn[aria-disabled="true"]:active { transform: none; }
  .btn[aria-busy="true"] { cursor: progress; opacity: .8; }
  .btn-citron { --bg: var(--accent); --fg: var(--on-accent); }   /* action principale (jaune) = .btn-primaire */
  .btn-menthe { --bg: var(--ok); --fg: var(--on-accent); }       /* valider / prêt / rejoindre */
  .btn-bonbon { --bg: var(--accent-2); --fg: var(--on-accent); } /* action forte / risquée */
  .btn-lagon { --bg: var(--blue); --fg: var(--on-accent); }
  .btn-violet { --bg: var(--accent-3); --fg: var(--on-accent); }
  .btn-creme { --bg: var(--surface-2); --fg: var(--text); --edge: var(--line-2); } /* secondaire = .btn-secondaire */
  .btn-holo { --bg: #FFC54D; --fg: var(--on-accent); background: var(--holo); } /* premium : dégradé or, fixe */
  .btn-xl { --br: var(--r-lg); min-height: 58px; font-size: clamp(1.15rem, 4.6vw, 1.35rem); padding: .8em 1.2em; }
  .btn-sm { --br: 10px; min-height: 38px; font-size: .92rem; padding: .5em .9em; }
  .btn-shine, .wiggle { animation: none; } /* plus de reflet ni de pulsation décorative (charte §5.9) */

  .icon-btn {
    display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; font-size: 20px; cursor: pointer;
    border-radius: var(--r-md); color: var(--text); background: var(--surface-2); border: 1px solid var(--line);
    transition: transform .15s var(--spring), border-color .2s;
  }
  .icon-btn:hover { border-color: var(--line-2); }
  .icon-btn:active { transform: scale(.92); }

  .link-btn {
    font-weight: 600; font-size: .9rem; color: var(--muted); cursor: pointer;
    text-decoration: underline; text-decoration-color: var(--line-hi); text-decoration-thickness: 1px; text-underline-offset: 5px;
    transition: color .2s;
  }
  .link-btn:hover { color: var(--text); }
  .link-btn:active { opacity: .7; transition-duration: 0s; }

  /* =================== Puces =================== */
  .chip {
    display: inline-flex; align-items: center; gap: .45em; padding: .42em .85em;
    font-size: .8rem; font-weight: 600; white-space: nowrap; border-radius: var(--r-pill);
    color: var(--text); background: var(--surface-2); border: 1px solid var(--line);
  }
  .chip-light { color: var(--accent-text); background: rgb(var(--accent-rgb) / .12); border-color: rgb(var(--accent-rgb) / .4); }
  .live-dot { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ok); }
  .live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgb(var(--ok-rgb) / .7); animation: live 1.8s ease-out infinite; }
  .tag { /* étiquette (catégorie, statut) */
    display: inline-flex; align-items: center; gap: .35em; padding: .38em .7em; white-space: nowrap;
    font: 600 .72rem/1 var(--font-ui); color: var(--text); background: var(--surface-2);
    border: 1px solid color-mix(in srgb, var(--g, var(--accent)) 55%, transparent); border-radius: var(--r-pill);
  }
  .meta-chip {
    display: inline-flex; align-items: center; gap: .3em; padding: .32em .62em; white-space: nowrap;
    font-size: .74rem; font-weight: 600; color: var(--muted);
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill);
  }
  .holo-text { color: var(--accent-text); }
  /* Mot mis en avant : trait de surligneur jaune (fixe) */
  .hl {
    display: inline; padding: 0 .06em; color: inherit;
    background: linear-gradient(transparent 60%, rgb(var(--accent-rgb) / .55) 60% 90%, transparent 90%);
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }

  /* =================== Accueil =================== */
  .home-top { min-height: 56px; }
  .home-title { font: 700 clamp(1.7rem, 7.4vw, 3.4rem)/1.08 var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
  .home-sub { max-width: 34rem; margin: 10px auto 0; font-size: 1rem; line-height: 1.45; color: var(--muted); }
  @media (min-width: 1024px) { .home-sub { margin-left: 0; font-size: 1.12rem; } }
  @media (max-width: 639.98px) { .home-sub { display: none; } } /* téléphone : l'essentiel (code + créer) au-dessus de la ligne de flottaison */
  .home-card {
    display: grid; gap: 12px; padding: 18px; color: var(--text);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--ombre-3);
  }
  .field-label { display: block; margin-bottom: 6px; font: 600 .82rem/1.2 var(--font-ui); color: var(--muted); }
  .me-row { display: flex; align-items: flex-end; gap: 14px; padding-top: 14px; margin-top: 2px; border-top: 1px solid var(--line); }
  .look > summary {
    width: fit-content; margin: 0 auto; padding: 6px 12px; list-style: none; cursor: pointer;
    font: 600 .85rem/1.2 var(--font-ui); color: var(--muted); border-radius: var(--r-pill);
  }
  .look > summary::-webkit-details-marker { display: none; }
  .look > summary::after { content: " ▾"; }
  .look[open] > summary::after { content: " ▴"; }
  .look[open] > summary { margin-bottom: 8px; }
  .section-title { font: 700 clamp(1.5rem, 5vw, 2rem)/1.1 var(--font-display); }

  /* Avatar + dé (accueil) */
  .avatar-stage { position: relative; width: 72px; height: 72px; flex: none; }
  .avatar-big {
    position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; cursor: pointer;
    background: var(--surface-3); border: 2px solid var(--line-2);
    transition: transform .25s var(--spring);
  }
  .avatar-big svg { width: 60px; height: 60px; }
  .avatar-big:hover { transform: scale(1.04); }
  .avatar-big:active { transform: scale(.96); transition-duration: .06s; }
  .dice-btn { /* un vrai dé */
    position: absolute; right: -8px; bottom: -6px; display: grid; place-items: center;
    width: 32px; height: 32px; font-size: 17px; border-radius: 9px; cursor: pointer;
    background: var(--ivoire); border: 1px solid rgba(0, 0, 0, .14); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12), var(--ombre-objet);
    transition: transform .15s var(--spring);
  }
  .dice-btn:hover { transform: rotate(14deg) scale(1.06); }
  .dice-btn:active { transform: translateY(2px) rotate(30deg) scale(.94); }
  .dice-btn.is-rolling { animation: roll .55s var(--spring); }

  .parts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .part-btn {
    display: inline-flex; align-items: center; gap: 4px; min-height: 38px; padding: 6px 11px; font-size: .8rem; font-weight: 600; cursor: pointer;
    color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill);
    transition: transform .12s, border-color .2s;
  }
  .part-btn:hover { border-color: var(--line-2); }
  .part-btn:active { transform: translateY(1px) scale(.95); }

  .field {
    display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 14px;
    background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-md);
    transition: border-color .2s, box-shadow .2s;
  }
  .field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .25); }
  .field input { flex: 1; min-width: 0; width: 0; min-height: 36px; background: transparent; border: 0; outline: 0; font: 600 1.1rem/1.2 var(--font-ui); color: var(--text); caret-color: var(--accent); }
  .field input::placeholder { color: var(--faint); }
  .field input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
  .field .mini {
    display: grid; place-items: center; flex: none; width: 40px; height: 40px; font-size: 19px; cursor: pointer; border-radius: 10px;
    background: var(--surface-2); border: 1px solid var(--line); transition: transform .2s var(--spring);
  }
  .field .mini:hover { transform: rotate(-14deg) scale(1.05); }
  .field .mini:active { transform: scale(.9); transition-duration: .06s; }
  .code-input { text-transform: uppercase; letter-spacing: .22em; font-family: var(--font-display) !important; font-weight: 600 !important; }
  .code-input::placeholder { letter-spacing: .22em; opacity: .6; }
  .is-shaking { animation: shake .4s; }

  .divider {
    display: flex; align-items: center; gap: 10px; font: 600 .78rem/1 var(--font-ui); color: var(--faint);
  }
  .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }

  .invite-hero {
    display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-md);
    background: rgb(var(--accent-rgb) / .1); border: 1px dashed rgb(var(--accent-rgb) / .6);
  }
  .invite-kicker { font: 600 .78rem/1.2 var(--font-ui); color: var(--accent-text); }
  .stack { display: flex; }
  .stack > * {
    display: grid; place-items: center; width: 40px; height: 40px; margin-left: -12px; border-radius: 50%;
    background: var(--surface-3); border: 2px solid var(--surface);
  }
  .stack > *:first-child { margin-left: 0; }
  .stack svg { width: 34px; height: 34px; }

  /* =================== Les jeux (accueil) : recherche, catégories, filtres, rayons, tuiles =================== */
  .games-tools { display: grid; gap: 10px; margin: 12px 0 4px; }
  .search-field { padding-left: 12px; }
  .search-field > span { font-size: 16px; opacity: .7; }
  .chip-row { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 1px; margin-inline: -1px; }
  .chip-row::-webkit-scrollbar { display: none; }
  .filter-row { display: flex; flex-wrap: wrap; gap: 8px 18px; }
  .filter-label { flex: none; margin-right: 2px; font: 600 .78rem/1 var(--font-ui); color: var(--faint); }
  .shelf-title { margin: 20px 0 10px; font: 600 1.1rem/1.2 var(--font-display); }
  .shelf-row {
    display: grid; grid-auto-flow: column; grid-auto-columns: 136px; gap: 10px; overflow-x: auto;
    scroll-snap-type: x proximity; padding: 2px 1px 8px; margin-inline: -1px; scrollbar-width: none;
  }
  .shelf-row::-webkit-scrollbar { display: none; }
  .games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; }
  @media (min-width: 768px) {
    .shelf-row { grid-auto-columns: 160px; gap: 14px; }
    .games-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
    .chip-row { flex-wrap: wrap; overflow: visible; }
  }
  .tuile { position: relative; scroll-snap-align: start; }
  .games-grid > .tuile { content-visibility: auto; contain-intrinsic-size: auto 176px; } /* 50 jeux et plus : hors écran, rien à peindre */
  .tuile-jouer {
    display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; height: 100%; padding: 16px 8px 14px;
    text-align: center; color: var(--text); cursor: pointer;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--ombre-1);
    transition: transform var(--d-moyen) var(--spring), border-color .2s;
  }
  .tuile-jouer:hover { transform: translateY(-3px); border-color: var(--line-2); }
  .tuile-jouer:active { transform: scale(.97); transition-duration: 0s; }
  .tuile-jouer .boite-jeu { --bj: 66px; }
  .tuile-nom { max-width: 100%; margin-top: 2px; font: 600 1.02rem/1.15 var(--font-display); overflow-wrap: anywhere; }
  .tuile-meta { font: 500 .8rem/1.1 var(--font-ui); color: var(--muted); }
  .tuile-fav {
    position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 40px; height: 40px;
    font-size: 19px; line-height: 1; color: var(--faint); border-radius: 50%; cursor: pointer;
  }
  .tuile-fav[aria-pressed="true"] { color: var(--accent-2-text); }
  .tuile-fav:active { transform: scale(.85); transition-duration: 0s; }
  .tuile.is-soon .tuile-jouer { opacity: .6; cursor: help; }
  .games-empty { padding: 28px 12px; text-align: center; color: var(--muted); }

  /* =================== Toasts =================== */
  .toasts {
    position: fixed; z-index: 88; top: max(12px, env(safe-area-inset-top)); left: 50%; translate: -50% 0;
    display: grid; gap: 8px; width: min(92vw, 390px); pointer-events: none;
  }
  .toast {
    display: flex; align-items: center; gap: 10px; padding: 11px 14px 11px 12px; font-weight: 600; font-size: .94rem; color: var(--text);
    background: var(--surface); border: 1px solid var(--line-2); border-left: 4px solid var(--accent); border-radius: var(--r-md);
    box-shadow: var(--ombre-3);
    animation: toast-in .4s var(--spring) both;
  }
  .toast .ti { font-size: 1.35rem; line-height: 1; }
  .toast.out { animation: toast-out .28s ease-in both; }

  /* =================== Emojis volants & combo =================== */
  .float-emoji {
    position: fixed; z-index: 70; left: 0; top: 0; font-size: var(--s, 42px); line-height: 1; pointer-events: none;
    will-change: transform, opacity;
    animation: float-up var(--t, 1.6s) cubic-bezier(.2, .7, .3, 1) forwards;
  }
  .combo {
    position: fixed; z-index: 71; left: 0; top: 0; pointer-events: none; font-family: var(--font-display); font-weight: 700;
    font-size: 28px; color: var(--accent-text); text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
    animation: combo 1s var(--spring) forwards;
  }

  /* =================== Transition entre écrans : un disque qui s'ouvre depuis le bouton =================== */
  /* Le cercle qui s'ouvre est animé par js/fx.js (Web Animations, sans mise en page forcée).
     Le fond est sur un calque à part (::before) peint UNE fois : seule la découpe change à chaque image. */
  .portal {
    position: fixed; inset: 0; z-index: 90; pointer-events: none; display: grid; place-items: center;
    clip-path: circle(0px at var(--x, 50%) var(--y, 50%)); visibility: hidden;
  }
  .portal::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), color-mix(in srgb, var(--pc, var(--accent)) 40%, var(--bg)) 0, var(--bg) 70%);
  }
  .portal span { font-size: 90px; opacity: 0; transform: scale(.4); transition: opacity .4s var(--spring) .1s, transform .4s var(--spring) .1s; }
  .portal.is-in { visibility: visible; pointer-events: auto; clip-path: circle(150vmax at var(--x) var(--y)); }
  .portal.is-in::before { will-change: transform; }
  .portal.is-in span { opacity: 1; transform: none; }
  .portal.is-out { clip-path: circle(150vmax at var(--x) var(--y)); opacity: 0; transition: opacity .35s ease; }

  /* =================== Salon =================== */
  .lobby-top {
    position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .room-code { /* le CODE, bien visible : un toucher copie le lien */
    display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-inline: auto; padding: 4px 12px 4px 14px; cursor: pointer;
    color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-md);
    transition: transform .15s var(--spring), border-color .2s;
  }
  .room-code:hover { border-color: var(--line-hi); }
  .room-code:active { transform: scale(.96); }
  .room-code .rc-label { font: 600 .72rem/1 var(--font-ui); }
  .room-code b { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; line-height: 1; letter-spacing: .14em; color: var(--text); }
  .room-code .rc-copy { font-size: 15px; }
  /* Téléphones : ← · code · 📤 · (vocal) · 🛒 · 🔊 tiennent sur une ligne de 360 à 440 px (le code se resserre) */
  @media (max-width: 440px) {
    .lobby-top { gap: 6px; padding-inline: 8px; }
    .room-code { min-width: 0; gap: 6px; padding-inline: 10px; }
    .room-code .rc-label { display: none; }
    .room-code b { font-size: 1.25rem; letter-spacing: .1em; }
  }
  @media (max-width: 374px) {
    .lobby-top { gap: 4px; padding-inline: 6px; }
    .room-code { padding-inline: 8px; }
    .room-code .rc-copy { display: none; }
    .room-code b { font-size: 1.15rem; letter-spacing: .06em; }
  }
  .demo-banner {
    width: fit-content; max-width: calc(100% - 24px); margin: 12px auto 0; padding: 6px 14px; text-align: center;
    font-size: .8rem; font-weight: 600; color: var(--text); background: rgb(var(--ok-rgb) / .1);
    border: 1px solid rgb(var(--ok-rgb) / .45); border-radius: var(--r-pill);
  }
  .lobby-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 16px; padding-bottom: 190px; }
  /* Tablette paysage / petit PC : 2 colonnes, le chat passe sous les joueurs */
  @media (min-width: 1024px) {
    .lobby-grid { grid-template-columns: 330px minmax(0, 1fr); grid-template-areas: "side game" "chat game"; align-items: start; padding-bottom: 130px; }
    .lobby-side { grid-area: side; }
    .lobby-game { grid-area: game; }
  }
  /* Grand écran : 3 colonnes */
  @media (min-width: 1280px) {
    .lobby-grid { grid-template-columns: 340px minmax(0, 1fr) 330px; grid-template-areas: "side game chat"; }
  }
  .in-lobby .toasts { top: calc(70px + env(safe-area-inset-top)); }
  .panel-title { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }

  .link-pill {
    display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 14px;
    font-family: var(--font-ui); font-weight: 600; font-size: .95rem; color: var(--text);
    background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-md);
  }
  .link-pill > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .is-nudging { animation: nudge .9s var(--spring) 2; }

  .players-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; }
  .player-tile {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%;
    padding: 10px 4px 8px; border-radius: var(--r-lg); cursor: pointer; color: var(--text);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--ombre-1);
    transition: transform .25s var(--spring), border-color .25s;
  }
  .player-tile:hover { transform: translateY(-3px); border-color: var(--line-2); }
  .player-tile:active { transform: scale(.95); transition-duration: .06s; }
  .player-tile.is-me { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: rgb(var(--accent-rgb) / .55); }
  .player-tile.is-ready { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok), var(--ombre-1); }
  .player-tile.is-new { animation: join-pop .75s var(--spring) both; }
  .player-tile .pav { width: 100%; max-width: 62px; aspect-ratio: 1; border-radius: 50%; background: var(--surface-3); }
  .player-tile .pav svg { width: 100%; height: 100%; }
  .player-tile .pname { max-width: 100%; padding: 0 4px; font-size: .74rem; font-weight: 600; line-height: 1.2; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .badge-host { position: absolute; top: -14px; left: 50%; translate: -50% 0; rotate: -10deg; font-size: 20px; }
  .badge-ready {
    position: absolute; top: -9px; right: -9px; display: grid; place-items: center; width: 24px; height: 24px;
    font-size: 12px; font-weight: 900; color: var(--on-accent); border-radius: 50%; background: var(--ok); border: 2px solid var(--bg);
    scale: 0; transition: scale .35s var(--spring);
  }
  .player-tile.is-ready .badge-ready { scale: 1; }
  .badge-me { font: 700 .66rem/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--accent-text); }
  .slot-empty {
    display: grid; place-items: center; align-content: center; width: 100%; min-height: 108px; cursor: pointer;
    font-size: .74rem; font-weight: 600; color: var(--faint); background: transparent;
    border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); transition: color .2s, border-color .2s;
  }
  .slot-empty:hover { color: var(--text); border-color: var(--line-hi); }
  .slot-empty:active { transform: scale(.95); transition-duration: .06s; }
  .slot-empty .plus {
    display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 4px; font-size: 20px;
    border-radius: 50%; border: 1.5px dashed currentColor;
  }

  .react-btn {
    display: grid; place-items: center; width: 46px; height: 46px; flex: none; font-size: 24px; cursor: pointer; border-radius: 12px;
    background: var(--surface-2); border: 1px solid var(--line); box-shadow: inset 0 -2px 0 var(--bord-3d);
    transition: transform .12s var(--spring);
  }
  .react-btn:hover { transform: translateY(-3px) scale(1.06); }
  .react-btn:active { transform: translateY(1px) scale(.92); }

  /* Fondu limité à la marge du haut (26 px), qui laisse passer les touchers vers ce qui est dessous et visible ;
     dès la rangée des réactions, aplat : la carte « Jeu » (salon de 7-8 joueurs, téléphone) n'apparaît plus SOUS les
     réactions, où un toucher en son milieu tombait sur une réaction. */
  .lobby-bar {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    padding: 26px 12px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0), rgb(var(--bg-rgb) / .96) 26px);
    pointer-events: none;
  }
  .lobby-bar > * { pointer-events: auto; }
  .lobby-bar .btn { min-height: 56px; padding-inline: .9em; font-size: 1.02rem; line-height: 1.12; text-align: center; }
  .lobby-bar #btn-start { flex-direction: column; gap: 4px; }
  .lobby-bar #btn-start small { line-height: 1; }
  .chat-fab { position: relative; }
  .badge-count {
    position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center;
    font-size: .72rem; font-weight: 800; color: #fff; background: var(--rouge); border: 2px solid var(--bg); border-radius: 999px;
    animation: join-pop .5s var(--spring) both;
  }

  /* Panneau de jeu */
  .game-panel { display: grid; gap: 16px; container-type: inline-size; }
  @media (min-width: 1024px) {
    .game-panel { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--ombre-1); }
  }
  .game-hero {
    position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px;
    padding: 16px; color: var(--text); border-radius: var(--r-lg);
    background: linear-gradient(135deg, color-mix(in srgb, var(--g) 20%, var(--surface-2)) 0%, var(--surface-2) 65%);
    border: 1px solid var(--line);
  }
  .game-hero > * { position: relative; }
  .game-hero-name { font: 700 1.75rem/1.05 var(--font-display); }
  .game-hero-meta { margin-top: 4px; font: 600 .82rem/1.2 var(--font-ui); color: var(--muted); }
  .rules-link {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-top: 10px; padding: 0 12px 0 6px; cursor: pointer;
    font: 600 .88rem/1 var(--font-display); color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  }
  .rules-link > b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--on-accent); background: var(--accent); }
  .rules-link:active { transform: scale(.96); transition-duration: 0s; }
  .is-swapping { animation: swap-pop .5s var(--spring); }
  .game-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  /* Requêtes de conteneur : le panneau s'adapte à SA largeur, pas à celle de l'écran */
  @container (min-width: 480px) { .game-switch { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } }
  @container (max-width: 400px) {
    .game-hero { grid-template-columns: 1fr; justify-items: start; }
  }
  .gs-tile {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 9px; cursor: pointer;
    font-size: .76rem; font-weight: 600; line-height: 1.15; text-align: center; color: var(--muted); background: var(--surface-2);
    border: 1px solid var(--line); border-radius: 12px;
    transition: transform .15s var(--spring), border-color .2s, color .2s;
  }
  .gs-tile .boite-jeu { --bj: 44px; margin-bottom: 4px; }
  .gs-tile:hover { color: var(--text); border-color: var(--line-2); }
  .gs-tile:active { transform: scale(.95); }
  .gs-tile[aria-pressed="true"] {
    color: var(--text); border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); box-shadow: 0 0 0 1px var(--accent);
  }
  .gs-tile.is-soon { position: relative; cursor: not-allowed; color: var(--faint); border-style: dashed; }
  .gs-tile.is-soon .boite-jeu { filter: grayscale(.8); opacity: .55; }
  .gs-soon { font: 700 .62rem/1 var(--font-ui); color: var(--accent-text); }
  /* Résumé du jeu (téléphone) : la boîte du jeu + ses réglages */
  .gs-icon.boite-jeu { --bj: 56px; }
  .gs-cta {
    flex: none; padding: 9px 11px; font: 600 .8rem/1 var(--font-display); white-space: nowrap;
    color: var(--text); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 10px;
  }

  .settings { display: grid; gap: 14px; }
  .settings.is-locked .seg, .settings.is-locked .toggle-row { opacity: .6; cursor: not-allowed; }
  .setting-label { display: block; margin-bottom: 6px; font: 600 .8rem/1.2 var(--font-ui); color: var(--muted); }
  .seg { display: flex; gap: 4px; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
  .seg button {
    flex: 1; min-width: 0; padding: 9px 4px; line-height: 1.1; font-weight: 600; font-size: .86rem; cursor: pointer;
    color: var(--muted); border: 1px solid transparent; border-radius: 9px;
    transition: transform .15s var(--spring), color .2s;
  }
  .seg button small { display: block; margin-top: 3px; font-size: .68rem; font-weight: 500; opacity: .85; }
  .seg button:hover { color: var(--text); }
  .seg button[aria-checked="true"] { color: var(--on-accent); background: var(--accent); box-shadow: inset 0 -2px 0 var(--bord-3d); }
  .seg button:active { transform: scale(.95); }
  .toggle-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 12px;
    text-align: left; font-weight: 600; font-size: .93rem; color: var(--text); cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; transition: border-color .2s;
  }
  .toggle-row:hover { border-color: var(--line-2); }
  .toggle-row:active { filter: brightness(.95); transition-duration: 0s; }
  .toggle-hint { display: block; margin-top: 2px; font-size: .74rem; font-weight: 500; color: var(--faint); }
  .switch {
    position: relative; flex: none; width: 50px; height: 28px; border-radius: 999px;
    background: var(--surface-3); border: 1px solid var(--line-2);
    transition: background .25s, border-color .25s;
  }
  .switch::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    transition: transform .3s var(--spring);
  }
  .toggle-row[aria-checked="true"] .switch { background: var(--ok); border-color: transparent; }
  .toggle-row[aria-checked="true"] .switch::after { transform: translateX(22px); }

  /* Chat */
  .chat-panel {
    display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
    contain: layout paint; /* un nouveau message ne recalcule que le chat */
  }
  @media (min-width: 1024px) { .chat-panel { grid-area: chat; height: 340px; } }
  @media (min-width: 1280px) { .chat-panel { position: sticky; top: 84px; height: min(600px, calc(100dvh - 230px)); } }
  .chat-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 12px; }
  .msg { display: flex; align-items: flex-end; gap: 8px; animation: msg-in .35s var(--spring) both; }
  .msg .mav { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); }
  .msg .mav svg { width: 100%; height: 100%; }
  .msg .bubble {
    max-width: 82%; padding: 7px 12px 8px; font-size: .92rem; line-height: 1.35; overflow-wrap: anywhere; color: var(--text);
    background: var(--surface-2); border-radius: 16px 16px 16px 4px;
  }
  .msg .who { display: block; margin-bottom: 2px; font-size: .7rem; font-weight: 700; color: var(--muted); }
  .msg.is-me { flex-direction: row-reverse; }
  .msg.is-me .bubble { color: var(--on-accent); background: var(--accent); border-radius: 16px 16px 4px 16px; }
  .msg.is-me .who { color: var(--on-accent); opacity: .75; }
  .msg-system {
    align-self: center; max-width: 92%; padding: 4px 11px; text-align: center; font-size: .76rem; font-weight: 600;
    color: var(--muted); background: var(--surface-2); border-radius: 999px; animation: msg-in .35s var(--spring) both;
  }
  .chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
  .chat-form input {
    flex: 1; min-width: 0; width: 0; padding: 10px 14px; font: 500 1rem var(--font-ui); color: var(--text); outline: none; caret-color: var(--accent);
    background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; transition: border-color .2s, box-shadow .2s;
  }
  .chat-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .25); }
  .chat-form input::placeholder { color: var(--faint); }

  /* Feuilles du bas (téléphone) : réglages + chat */
  .sheet-head { display: none; }
  @media (max-width: 1023.98px) {
    .sheet {
      --sheet-bg: var(--surface);
      position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; max-height: 86dvh; overflow-y: auto;
      padding: 0 14px calc(16px + env(safe-area-inset-bottom)); background: var(--sheet-bg);
      border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0;
      box-shadow: var(--ombre-3);
      transform: translateY(105%); visibility: hidden;
      transition: transform .35s cubic-bezier(.5, 0, .75, 0), visibility 0s linear .35s;
    }
    .sheet.is-open { transform: none; visibility: visible; transition: transform .45s var(--ease-out), visibility 0s; }
    .sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0 10px; background: var(--sheet-bg); border-bottom: 1px solid var(--line); }
    .sheet-head::before { content: ""; position: absolute; top: 6px; left: 50%; translate: -50% 0; width: 44px; height: 5px; border-radius: 5px; background: var(--line-2); }
    .sheet-head > * { margin-top: 14px; }
    .chat-panel.sheet { display: flex; height: 72dvh; padding: 0; contain: none; }
    .chat-panel.sheet .sheet-head { padding: 8px 14px 10px; }
  }
  .sheet-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .55); animation: fade-in .25s both; }

  /* Compte à rebours */
  .countdown {
    position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; align-content: center; gap: 28px;
    background: rgb(var(--bg-rgb) / .95);
  }
  .countdown .num {
    font-family: var(--font-display); font-weight: 700; font-size: clamp(120px, 34vw, 260px); line-height: 1; color: var(--text);
    animation: count-pop .95s var(--spring) both; will-change: transform, opacity; /* gros texte : rastérisé une fois, mis à l'échelle par la carte graphique */
  }
  .countdown .num.is-go { color: var(--ok-text); font-size: clamp(90px, 24vw, 200px); }

  /* Fenêtre (QR code, fin du prototype…) */
  .modal { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .6); animation: fade-in .2s both; }
  .modal-card { --fill: var(--surface); width: min(92vw, 380px); padding: 24px; text-align: center; box-shadow: var(--ombre-3); animation: toast-in .45s var(--spring) both; }
  .qr-box { display: grid; place-items: center; margin: 14px auto; padding: 10px; width: fit-content; background: #fff; border-radius: 12px; border: 1px solid var(--line-2); }
  .qr-box svg, .qr-box img { width: 210px; height: 210px; }

  /* « Règles en 30 s » (Potos.Regles, js/theme.js) : fenêtre commune à tous les jeux */
  .regles-fenetre { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .6); animation: fade-in .2s both; }
  .regles-carte {
    width: min(94vw, 440px); max-height: 92dvh; overflow-y: auto; padding: 22px 20px 18px; color: var(--text); text-align: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--ombre-3);
    animation: toast-in .4s var(--spring) both;
  }
  .regles-kicker { margin-top: 10px; font: 600 .8rem/1.2 var(--font-ui); color: var(--accent-text); }
  .regles-carte h2 { font: 700 1.6rem/1.1 var(--font-display); }
  .regles-carte .regles-30 { margin: 14px 0 16px; }

  .fx-canvas { position: fixed; inset: 0; z-index: 75; width: 100vw; height: 100vh; pointer-events: none; }
  .fx-canvas[hidden] { display: none; }

  /* Entrée d'écran en cascade */
  .is-entering .rise { animation: rise .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
}

/* ---------- Animations des avatars (SVG) ---------- */
.av { overflow: visible; }
.av-anim .av-root { transform-origin: 60px 112px; animation: bob 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.av-anim .av-eyes { transform-origin: 60px 60px; animation: blink 5s infinite; animation-delay: var(--d2, 0s); }
.av-anim .av-pupils { animation: look 8s ease-in-out infinite; animation-delay: var(--d, 0s); }
.av-anim .av-antenna { transform-origin: 60px 27px; animation: wob 1.6s ease-in-out infinite; }
.is-squash { animation: squash .55s var(--spring); }
.is-tickled { animation: tickle .6s ease-in-out; }
.is-reacting { animation: react .4s var(--spring); }

/* ---------- Keyframes ---------- */
@keyframes drift { to { transform: translate3d(28px, 56px, 0); } }
@keyframes drift-stars { to { transform: translate3d(-70px, 110px, 0); } }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(var(--r, -8deg)); } 50% { transform: translateY(-26px) rotate(calc(var(--r, -8deg) * -1)); } }
@keyframes holo-flicker { 0%, 100% { opacity: .3; } 91% { opacity: .3; } 92% { opacity: .08; } 93% { opacity: .34; } 95% { opacity: .14; } 96% { opacity: .3; } }
@keyframes holo-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes eye-blink { 50% { transform: translateY(.03em) scaleY(.1); } }
/* Reflet : 42 % de large → -167 % / +333 % de sa largeur = de -70 % à +140 % du bouton (transform, pas left) */
@keyframes shine { 0%, 62% { transform: translateX(-167%) skewX(-20deg); } 88%, 100% { transform: translateX(333%) skewX(-20deg); } }
@keyframes shine-once { from { transform: translateX(-167%) skewX(-20deg); } to { transform: translateX(333%) skewX(-20deg); } }
@keyframes cta-pulse { 0%, 74%, 100% { scale: 1; } 80% { scale: 1.035; } 86% { scale: .99; } 92% { scale: 1.012; } }
@keyframes live { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
@keyframes roll { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes spin { to { rotate: 1turn; } }
@keyframes scan { from { transform: translateY(-100%); } to { transform: translateY(330%); } }
@keyframes shake { 20% { translate: -8px 0; } 40% { translate: 7px 0; } 60% { translate: -5px 0; } 80% { translate: 3px 0; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-24px) scale(.94); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-16px) scale(.96); } }
@keyframes float-up {
  0% { transform: translate(var(--x), var(--y)) translate(-50%, -50%) scale(.3); opacity: 0; }
  12% { transform: translate(var(--x), var(--y)) translate(-50%, -62%) scale(1.25); opacity: 1; }
  100% { transform: translate(calc(var(--x) + var(--dx, 0px)), calc(var(--y) - var(--rise, 190px))) translate(-50%, -50%) scale(.85) rotate(var(--rot, 0deg)); opacity: 0; }
}
@keyframes combo {
  0% { transform: translate(var(--x), var(--y)) translate(-50%, -50%) scale(.4); opacity: 0; }
  25% { transform: translate(var(--x), var(--y)) translate(-50%, -80%) scale(1.2); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) translate(-50%, -160%) scale(1); opacity: 0; }
}
@keyframes nudge { 30% { transform: scale(1.03); } 60% { transform: scale(.99); } }
@keyframes join-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: none; } }
@keyframes breathe { 50% { transform: scale(1.14); } }
@keyframes art-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes swap-pop { 0% { transform: scale(.94); opacity: .3; } 60% { transform: scale(1.02); opacity: 1; } 100% { transform: none; } }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(.95); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes count-pop {
  0% { transform: scale(2.2); opacity: 0; } 30% { transform: scale(.92); opacity: 1; }
  55% { transform: scale(1.04); } 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(.7); opacity: 0; }
}
@keyframes rise { from { opacity: 0; transform: translateY(26px) scale(.98); } }
@keyframes bob { 0%, 100% { transform: translateY(0) scale(1.03, .97); } 50% { transform: translateY(-5px) scale(.98, 1.02); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes look { 0%, 20%, 100% { transform: translate(0, 0); } 30%, 45% { transform: translate(-2.5px, 1px); } 55%, 70% { transform: translate(2.5px, -1px); } }
@keyframes wob { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes squash { 25% { transform: scale(1.25, .75); } 50% { transform: scale(.85, 1.18) translateY(-8px); } 75% { transform: scale(1.06, .95); } }
@keyframes tickle { 15% { transform: rotate(-12deg) scale(1.05); } 30% { transform: rotate(10deg); } 45% { transform: rotate(-8deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }
@keyframes react { 40% { transform: scale(1.15) translateY(-4px); } }

/* Accessibilité : on coupe le mouvement si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .countdown .num { animation: none !important; }
  .bg-party::before, .floaty, .avatar-big::before, .game-art::after, .hl, .hl::after, .holo-text, .btn-holo { animation: none !important; }
  .game-art::after { display: none; }
}

/* =========================================================================
   PERF-LITE — <html class="perf-lite"> : appareil modeste, petit écran tactile,
   mouvement réduit, ou images trop lentes mesurées (js/fx.js). Décidé dans <head>
   (index.html). On coupe le DÉCOR, jamais l'information de jeu.
   Règles complètes et usage pour les jeux : docs/fluidite.md
   ========================================================================= */
.perf-lite .btn-shine::after, .perf-lite .btn:hover::after { animation: none; opacity: 0; }
.perf-lite .wiggle, .perf-lite .game-hero .art, .perf-lite .slot-empty .plus { animation: none; }
.perf-lite .avatar-big::before { animation: none; filter: none; }
.perf-lite .game-art::after, .perf-lite .live-dot::after { display: none; }
/* Avatars : on garde le rebond, on coupe clignement / regard / antenne (SVG repeint à chaque image) */
.perf-lite .av-anim .av-eyes, .perf-lite .av-anim .av-pupils, .perf-lite .av-anim .av-antenna { animation: none; }
/* Salon, téléphone en paysage (≤ 500 px de haut) : réactions et boutons sur UNE rangée (la barre prenait la moitié
   de l'écran). Hors couche : l'emporte sur les utilitaires « flex-col » de la barre. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1023.98px) {
  .lobby-bar { padding-top: 14px; }
  .lobby-bar > div { flex-direction: row; align-items: center; }
  .lobby-bar > div > div:last-child { flex: 1; }
  .lobby-bar .btn { min-height: 48px; }
  .lobby-bar .react-btn { width: 42px; height: 42px; font-size: 21px; }
  .lobby-grid { padding-bottom: 100px; }
}
/* Filet de sécurité, jeux compris : aucun flou d'arrière-plan en perf-lite */
.perf-lite *, .perf-lite *::before, .perf-lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Préchauffage des polices et symboles (FX.warm, docs/fluidite.md §10) : dessinés cachés, hors écran, mise en page bornée */
.fx-warm {
  position: fixed; left: -10000px; top: 0; width: 640px; height: 240px; overflow: hidden;
  visibility: hidden; pointer-events: none; contain: strict;
}
.fx-warm > b { display: block; white-space: nowrap; line-height: 1; }
/* Le préchauffage propre à L'Oie (.oie-warm, js/oie-ui.js) posait ses textes SANS mise en page bornée ni pause pendant
   les AUTRES jeux : son image suivante (≈ 600 ms à CPU ÷ 4) tombait parfois en pleine partie de Dames ou de NÉON.
   FX.warm préchauffe désormais aussi L'Oie (js/glyphes-jeux.js), par morceaux mesurés, jamais pendant une partie. */
.oie-warm { display: none !important; }