/* =====================================================================
   SEBA — Feuille de style du Ludo — habillage « NÉON »
   ---------------------------------------------------------------------
   Chargée UNIQUEMENT par les pages du Ludo.

   Parti pris : le plateau est un ÉCRAN, pas une planche de carton. Fond
   bleu nuit, quatre couleurs électriques qui émettent leur propre
   lumière, traits clairs. Sur fond sombre, une couleur vive éclaire au
   lieu de se fondre : c'est ce qui rend ce plateau à la fois plus vif ET
   plus lisible que le plateau clair précédent.

   Le plateau est construit en pourcentages d'un carré de 15 × 15 cases.
   Il n'a donc AUCUNE taille fixe : il occupe la largeur disponible sur
   un téléphone comme sur un écran large, sans média-requête.
   ===================================================================== */

:root {
  /* Les quatre camps. Ces noms sont utilisés tels quels par ludo.js
     (`var(--lu-' + p.color + ')`) : ne pas les renommer. */
  --lu-red:    #FF2E63;   /* rose électrique */
  --lu-green:  #00F5A0;   /* menthe fluo     */
  --lu-yellow: #FFD500;   /* jaune franc     */
  --lu-blue:   #00C2FF;   /* cyan            */
  --lu-cell:   6.6666%;   /* 100 / 15        */

  /* Le fond du plateau et son quadrillage. Sur fond sombre c'est le
     trait CLAIR qui porte : inutile de l'épaissir, il suffit qu'il
     tranche. 2 px pour qu'il tienne aussi sur un petit écran. */
  --lu-panel:  #10132A;
  --lu-surf:   #171B33;   /* barres, bandeau : surface opaque */
  --lu-deep:   #0B0E1E;
  --lu-grid:   rgba(172, 198, 255, .52);
  --lu-line-w: 2px;
  --lu-txt:    #EAF1FF;
  --lu-dim:    #93A2C9;
}

/* ---------------------- En-tête de table ---------------------- */
.lu-top { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.55rem; }
.lu-top .lu-code { font-size:.78rem; color:var(--text-faint); letter-spacing:.04em; }
.lu-top .lu-pot  { font-size:.84rem; color:var(--lu-green); font-weight:700; white-space:nowrap;
                   text-shadow:0 0 10px rgba(0,245,160,.55); }

/* =====================================================================
   LE BANDEAU « À QUI DE JOUER »
   ---------------------------------------------------------------------
   C'est la réponse à « quand c'est au tour de jouer que ça soit beaucoup
   plus lisible ». Trois choses se déclenchent ensemble : ce bandeau
   s'allume et respire, le plateau entier se cercle d'un halo, et
   l'anneau du compte à rebours se vide. On ne peut pas le manquer,
   même en regardant l'écran de biais.
   ===================================================================== */
/* Fond SOLIDE, pas translucide : le bandeau, les barres de joueur et le
   dé appartiennent visuellement au plateau — c'est le même écran. Un
   fond translucide les rendrait illisibles quand le joueur passe le
   site en thème clair. */
.lu-turn {
  display:flex; align-items:center; gap:.65rem;
  padding:.55rem .7rem; margin-bottom:.55rem;
  border-radius:16px; font-weight:800;
  border:1.5px solid rgba(158,186,255,.28);
  background:var(--lu-surf);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.lu-turn .lu-av {
  width:36px; height:36px; border-radius:50%; flex:0 0 36px;
  display:grid; place-items:center;
  font-size:.95rem; font-weight:900;
  background:currentColor; box-shadow:0 0 12px currentColor;
}
.lu-turn .lu-av span { color:var(--lu-deep); }
.lu-turn .lu-who { min-width:0; flex:1; font-size:.92rem; line-height:1.18; color:var(--lu-txt); }
.lu-turn .lu-who b { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lu-turn .lu-who small {
  display:block; font-size:.68rem; font-weight:600; color:var(--lu-dim); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* L'anneau du compte à rebours : un dégradé conique piloté par une
   seule propriété `--p` (1 → 0). Le JS n'écrit qu'un nombre. */
.lu-clock {
  position:relative; flex:0 0 44px; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  font-size:.86rem; font-weight:900; font-variant-numeric:tabular-nums; color:var(--lu-txt);
  background:conic-gradient(var(--lu-ring, var(--lu-green)) calc(var(--p, 1) * 360deg),
                            rgba(158,186,255,.16) 0);
}
.lu-clock::before {
  content:''; position:absolute; width:34px; height:34px; border-radius:50%;
  background:var(--lu-panel);
}
.lu-clock b { position:relative; }
.lu-turn.is-hidden { display:none; }

/* --- C'est VOTRE tour : le bandeau s'allume et respire --------------- */
.lu-turn.mine {
  border-color:var(--lu-green);
  background:linear-gradient(90deg, rgba(0,245,160,.24), rgba(0,194,255,.16)), var(--lu-surf);
  animation:lu-breathe 1.6s ease-in-out infinite;
}
.lu-turn.mine .lu-who { color:#FFFFFF; text-shadow:0 0 10px rgba(0,245,160,.7); }
.lu-turn.mine .lu-who small { color:rgba(234,241,255,.85); text-shadow:none; }
@keyframes lu-breathe {
  0%,100% { box-shadow:0 0 14px rgba(0,245,160,.30), inset 0 0 20px rgba(0,245,160,.08); }
  50%     { box-shadow:0 0 26px rgba(0,245,160,.62), inset 0 0 26px rgba(0,245,160,.16); }
}

/* --- Dernières secondes : tout bascule au rouge, deux fois plus vite -- */
.lu-turn.mine.urgent {
  border-color:var(--lu-red);
  background:linear-gradient(90deg, rgba(255,46,99,.30), rgba(255,46,99,.12)), var(--lu-surf);
  animation:lu-breathe-red .55s ease-in-out infinite;
}
.lu-turn.mine.urgent .lu-who { text-shadow:0 0 10px rgba(255,46,99,.85); }
.lu-turn.urgent .lu-clock { --lu-ring:var(--lu-red); }
@keyframes lu-breathe-red {
  0%,100% { box-shadow:0 0 14px rgba(255,46,99,.38); }
  50%     { box-shadow:0 0 30px rgba(255,46,99,.85); }
}

/* ---------------------- Barres des joueurs ---------------------- */
/* `lu-p0…3` est posé par ludo.js : la barre s'allume de LA COULEUR DU
   CAMP qui joue. On sait qui joue sans lire le nom. Les textes gardent
   leur couleur propre, sinon ils hériteraient de la couleur du camp. */
.lu-players { display:grid; gap:.4rem; margin-bottom:.5rem; grid-template-columns:1fr 1fr; }
.lu-player {
  position:relative; display:flex; align-items:center; gap:.45rem; padding:.4rem .5rem;
  background:var(--lu-surf); border:1px solid rgba(158,186,255,.20);
  border-radius:var(--radius-sm); min-width:0;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), opacity .25s;
}
.lu-player.is-turn {
  border-color:currentColor;
  box-shadow:0 0 0 1px currentColor, 0 0 18px currentColor;
  background:#1D2242;
}
.lu-player.is-out { opacity:.42; }
.lu-player .dot { width:12px; height:12px; border-radius:50%; flex:0 0 12px;
  box-shadow:0 0 8px currentColor, 0 0 0 2px rgba(255,255,255,.16); }
.lu-player .who { min-width:0; flex:1; }
.lu-player .nm { display:block; font-size:.8rem; font-weight:600; color:var(--lu-txt);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lu-player .sub { display:block; font-size:.68rem; color:var(--lu-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lu-player .tm { font-variant-numeric:tabular-nums; font-size:.78rem; font-weight:700;
  color:var(--lu-dim); min-width:26px; text-align:right; }
.lu-player .tm.warn { color:var(--lu-yellow); text-shadow:0 0 8px rgba(255,213,0,.6); }
.lu-player .tm.danger { color:var(--lu-red); text-shadow:0 0 8px rgba(255,46,99,.7);
  animation:lu-blink 1s steps(2,start) infinite; }
@keyframes lu-blink { 50% { opacity:.35; } }
.lu-player .pin { display:flex; gap:2px; }
.lu-player .pin i { width:7px; height:7px; border-radius:50%; display:block; background:currentColor; opacity:.26; }
.lu-player .pin i.on { opacity:1; box-shadow:0 0 6px currentColor; }

.lu-bubble {
  position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%) translateY(4px);
  background:var(--violet-500); color:#fff; padding:.3rem .55rem; border-radius:12px;
  font-size:.78rem; font-weight:600; white-space:nowrap; max-width:80vw; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 0 16px rgba(154,85,232,.6); pointer-events:none; opacity:0;
  transition:opacity .18s var(--ease), transform .18s var(--ease); z-index:6;
}
.lu-bubble.show { opacity:1; transform:translateX(-50%) translateY(0); }
.lu-bubble::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--violet-500); }

/* =====================================================================
   LE PLATEAU
   ===================================================================== */
.lu-wrap { width:100%; max-width:440px; margin:0 auto; }

.lu-board {
  position:relative; width:100%; padding-top:100%;
  border-radius:16px; overflow:hidden;
  /* Quatre halos, un par camp dans son coin : le plateau paraît éclairé
     par les quatre couleurs au lieu d'être posé sur du noir. */
  background:
    radial-gradient(60% 60% at 14% 14%, rgba(255,46,99,.20),  transparent 62%),
    radial-gradient(60% 60% at 86% 14%, rgba(0,245,160,.20),  transparent 62%),
    radial-gradient(60% 60% at 86% 86%, rgba(255,213,0,.18),  transparent 62%),
    radial-gradient(60% 60% at 14% 86%, rgba(0,194,255,.20),  transparent 62%),
    var(--lu-panel);
  box-shadow:inset 0 0 0 2px rgba(158,186,255,.34), 0 10px 30px rgba(0,0,0,.55);
  transition:box-shadow .35s var(--ease), transform .45s var(--ease);
}
.lu-board > * { position:absolute; }

/* --- Le halo qui entoure TOUT le plateau quand c'est à vous ---------- */
.lu-wrap.mine .lu-board { animation:lu-halo 1.6s ease-in-out infinite; }
.lu-wrap.mine.urgent .lu-board { animation:lu-halo-red .55s ease-in-out infinite; }
@keyframes lu-halo {
  0%,100% { box-shadow:inset 0 0 0 2px var(--lu-green), 0 0 22px rgba(0,245,160,.38); }
  50%     { box-shadow:inset 0 0 0 2px var(--lu-green), 0 0 46px rgba(0,245,160,.80); }
}
@keyframes lu-halo-red {
  0%,100% { box-shadow:inset 0 0 0 2px var(--lu-red), 0 0 22px rgba(255,46,99,.45); }
  50%     { box-shadow:inset 0 0 0 2px var(--lu-red), 0 0 50px rgba(255,46,99,.90); }
}

/* --- Les parcs ------------------------------------------------------ */
.lu-yard {
  width:calc(var(--lu-cell)*6); height:calc(var(--lu-cell)*6); border-radius:16px;
  border:2px solid currentColor;
  background:rgba(255,255,255,.055);
  box-shadow:0 0 16px currentColor, inset 0 0 24px rgba(255,255,255,.05);
}
.lu-yard::after { content:''; position:absolute; inset:12%; border-radius:11px;
  background:rgba(6,9,22,.45); border:1.5px dashed currentColor; }

/* --- Les cases ordinaires ------------------------------------------- */
.lu-sq {
  width:var(--lu-cell); height:var(--lu-cell);
  border:var(--lu-line-w) solid var(--lu-grid);
  background:rgba(255,255,255,.05);
}

/* --- LES CASES PARTICULIÈRES ----------------------------------------
   Trois familles, trois signes distincts, reconnaissables sans lire la
   légende — et distincts EN FORME autant qu'en couleur, pour le joueur
   qui confond le rouge et le vert :
     · le REFUGE  → étoile claire sur fond bleuté ;
     · le DÉPART  → case pleine qui rayonne, étoile sombre ;
     · le COULOIR → case pleine, chevron sombre vers le centre.
   -------------------------------------------------------------------- */

/* Refuge : on ne peut pas y être pris. */
.lu-sq.safe { background:rgba(160,190,255,.22); border-color:rgba(200,222,255,.75); }
.lu-sq.safe::after {
  content:'★'; position:absolute; inset:0; display:grid; place-items:center;
  font-size:.8rem; line-height:1; color:#DCE9FF; text-shadow:0 0 7px rgba(200,222,255,.95);
}

/* Départ : la couleur pleine, qui rayonne. */
.lu-sq.start {
  background:currentColor; border-color:rgba(255,255,255,.65);
  box-shadow:0 0 10px currentColor, 0 0 22px currentColor;
}
.lu-sq.start::after {
  content:'★'; position:absolute; inset:0; display:grid; place-items:center;
  font-size:.78rem; line-height:1; font-weight:900; color:var(--lu-deep);
}

/* Couloir d'arrivée : la couleur pleine, un cran moins lumineuse. */
.lu-sq.home {
  background:currentColor; border-color:rgba(255,255,255,.42);
  box-shadow:0 0 8px currentColor;
}
/* Le chevron pointe vers le centre. Sa direction se déduit du siège :
   le couloir du siège 0 va vers la droite, celui du 1 vers le bas,
   celui du 2 vers la gauche, celui du 3 vers le haut. Tout est déduit de
   l'attribut data-home déjà écrit par ludo.js : aucun JS en plus. */
.lu-sq.home::before {
  content:''; position:absolute; left:50%; top:50%;
  border:5px solid transparent; pointer-events:none;
}
.lu-sq.home[data-home^="0:"]::before { transform:translate(-70%,-50%); border-left-color:rgba(11,14,30,.80); }
.lu-sq.home[data-home^="1:"]::before { transform:translate(-50%,-70%); border-top-color:rgba(11,14,30,.80); }
.lu-sq.home[data-home^="2:"]::before { transform:translate(-30%,-50%); border-right-color:rgba(11,14,30,.80); }
.lu-sq.home[data-home^="3:"]::before { transform:translate(-50%,-30%); border-bottom-color:rgba(11,14,30,.80); }

/* Case visée par un déplacement proposé : elle bat en blanc, donc elle
   se voit sur n'importe quel fond, coloré ou non. */
.lu-sq.hint {
  border-color:#FFFFFF; background:rgba(255,255,255,.28);
  animation:lu-hint 1.1s ease-in-out infinite; z-index:2;
}
@keyframes lu-hint {
  0%,100% { box-shadow:0 0 8px rgba(255,255,255,.70), inset 0 0 8px rgba(255,255,255,.45); }
  50%     { box-shadow:0 0 20px rgba(255,255,255,1),  inset 0 0 16px rgba(255,255,255,.85); }
}

/* Camps inutilisés d'une table à deux : c'est le REMPLISSAGE qui
   s'efface, jamais le quadrillage — sinon le plateau paraîtrait troué
   d'un côté et plein de l'autre. */
.lu-sq.lu-off { background:rgba(255,255,255,.035); box-shadow:none; border-color:var(--lu-grid); }
.lu-sq.lu-off::before, .lu-sq.lu-off::after { opacity:.20; }
.lu-yard.lu-off { opacity:.26; box-shadow:none; }

/* --- Le centre ------------------------------------------------------ */
.lu-center {
  left:calc(var(--lu-cell)*6); top:calc(var(--lu-cell)*6);
  width:calc(var(--lu-cell)*3); height:calc(var(--lu-cell)*3);
  display:grid; place-items:center;
  box-shadow:inset 0 0 0 2px rgba(200,222,255,.55), 0 0 22px rgba(200,222,255,.25);
  background:conic-gradient(from 45deg,
    var(--lu-red) 0deg 90deg, var(--lu-blue) 90deg 180deg,
    var(--lu-yellow) 180deg 270deg, var(--lu-green) 270deg 360deg);
}
.lu-center.duo { background:conic-gradient(from 45deg,
    var(--lu-red) 0deg 90deg, rgba(255,255,255,.08) 90deg 180deg,
    var(--lu-yellow) 180deg 270deg, rgba(255,255,255,.08) 270deg 360deg); }
.lu-center span {
  font-size:.5rem; font-weight:800; letter-spacing:.08em; color:var(--lu-deep);
  background:rgba(255,255,255,.96); padding:.1rem .32rem; border-radius:5px;
  box-shadow:0 0 10px rgba(255,255,255,.85);
}

/* --- Les pions ------------------------------------------------------ */
.lu-pawn {
  width:calc(var(--lu-cell)*.84); height:calc(var(--lu-cell)*.84); border-radius:50%;
  background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.55), transparent 48%), currentColor;
  border:none;
  box-shadow:0 0 0 2px rgba(11,14,30,.92), 0 0 10px currentColor, 0 0 20px currentColor;
  display:grid; place-items:center; transform:translate(-50%,-50%);
  transition:left .32s var(--ease), top .32s var(--ease), width .2s, height .2s, box-shadow .2s; z-index:3;
}
.lu-pawn b { font-size:.52rem; font-weight:900; color:var(--lu-deep);
  transition:transform .45s var(--ease); }
/* Le pion jouable : anneau blanc qui bat. Sur fond néon, le blanc est la
   seule teinte qui ressorte sur les quatre camps à la fois. */
.lu-pawn.playable { cursor:pointer;
  box-shadow:0 0 0 3px #FFFFFF, 0 0 0 5px rgba(11,14,30,.9), 0 0 16px currentColor, 0 0 30px currentColor;
  animation:lu-pulse 1.1s ease-in-out infinite; z-index:5; }
@keyframes lu-pulse { 50% { transform:translate(-50%,-50%) scale(1.14); } }
.lu-pawn.small { width:calc(var(--lu-cell)*.60); height:calc(var(--lu-cell)*.60); }
.lu-pawn.done { opacity:.92; }

/* La couleur de chaque camp. Tout le plateau s'en sert par
   `currentColor` : parcs, départs, couloirs, pions et barres de joueur. */
.lu-p0 { color:var(--lu-red); }
.lu-p1 { color:var(--lu-green); }
.lu-p2 { color:var(--lu-yellow); }
.lu-p3 { color:var(--lu-blue); }

/* Le pion qui vient d'être pris part en tremblant vers sa maison. */
.lu-pawn.hit { animation:lu-hit .55s var(--ease); }
@keyframes lu-hit {
  0%,100% { transform:translate(-50%,-50%) rotate(0); }
  20% { transform:translate(-50%,-50%) rotate(-18deg) scale(1.15); }
  45% { transform:translate(-50%,-50%) rotate(16deg) scale(1.1); }
  70% { transform:translate(-50%,-50%) rotate(-9deg); }
}

/* ---------------------- Légende sous le plateau ---------------------- */
.lu-legend {
  display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem .85rem;
  margin:.5rem 0 .1rem; font-size:.7rem; color:var(--text-dim);
}
.lu-legend span { display:inline-flex; align-items:center; gap:.3rem; }
.lu-legend i {
  width:15px; height:15px; border-radius:3px; display:inline-grid; place-items:center;
  border:1.5px solid var(--lu-grid); background:rgba(255,255,255,.05);
  font-size:.58rem; font-style:normal; color:#DCE9FF; line-height:1;
}
.lu-legend i.refuge { background:rgba(160,190,255,.22); border-color:rgba(200,222,255,.75); }
/* Départ et couloir portent VOLONTAIREMENT la même couleur : ce qui les
   distingue est le SIGNE (étoile / chevron), pas la teinte. La couleur,
   elle, ne dit qu'une chose — à quel camp la case appartient. */
.lu-legend i.depart { background:var(--lu-red); color:var(--lu-deep); border-color:rgba(255,255,255,.6);
  box-shadow:0 0 8px var(--lu-red); }
.lu-legend i.couloir { background:var(--lu-red); color:var(--lu-deep); border-color:rgba(255,255,255,.42);
  box-shadow:0 0 5px rgba(255,46,99,.55); }

/* ---------------------- Le dé ---------------------- */
.lu-controls { display:flex; align-items:center; justify-content:center; gap:.8rem; margin:.7rem 0 .2rem; }
.lu-die {
  width:62px; height:62px; border-radius:16px; flex:0 0 62px; position:relative;
  background:linear-gradient(150deg,#1B2044,#10132A);
  border:2px solid rgba(158,186,255,.35);
  box-shadow:inset 0 0 16px rgba(158,186,255,.10), 0 6px 16px rgba(0,0,0,.5);
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:3px; padding:9px; transition:box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.lu-die:active { transform:scale(.94); }
.lu-die[disabled] { opacity:.45; }
.lu-die i { display:block; width:100%; height:100%; border-radius:50%;
  background:#EAF1FF; opacity:0; transition:opacity .12s; }
.lu-die i.on { opacity:1; box-shadow:0 0 7px rgba(234,241,255,.9); }
/* Le dé appelle par sa lueur, pas par un mouvement : un bouton qui bouge
   se rate au doigt sur un petit écran. */
.lu-die.ready { cursor:pointer; border-color:var(--lu-green);
  animation:lu-die-call 1.15s ease-in-out infinite; }
.lu-die.ready i.on { background:var(--lu-green); box-shadow:0 0 9px var(--lu-green); }
@keyframes lu-die-call {
  0%,100% { box-shadow:0 0 14px rgba(0,245,160,.45), inset 0 0 14px rgba(0,245,160,.12); }
  50%     { box-shadow:0 0 32px rgba(0,245,160,.95), inset 0 0 22px rgba(0,245,160,.24); }
}
.lu-die.rolling i { animation:lu-die-flick .5s steps(6); }
@keyframes lu-die-flick { 0%,100% { opacity:1; } 50% { opacity:.15; } }

.lu-hint { font-size:.82rem; color:var(--text-dim); text-align:center; min-height:1.3em; margin:.35rem 0 .2rem; }
.lu-hint strong { color:var(--lu-green); text-shadow:0 0 8px rgba(0,245,160,.5); }
.lu-actions { display:flex; gap:.5rem; justify-content:center; margin-top:.5rem; }

/* Bouton du son : son état doit se voir d'un coup d'œil. */
.lu-sound { position:relative; }
.lu-sound.off { opacity:.55; }
.lu-sound.off::after {
  content:''; position:absolute; left:50%; top:50%; width:74%; height:2px;
  background:currentColor; transform:translate(-50%,-50%) rotate(-45deg); border-radius:2px;
}

/* ---------------------- Dé vérifiable ---------------------- */
.lu-fair { font-size:.72rem; color:var(--text-faint); text-align:center; margin:.5rem 0 0; word-break:break-all; }
.lu-fair code { font-size:.68rem; color:var(--lu-blue); }
.lu-fair .seal { color:var(--lu-green); font-weight:700; text-shadow:0 0 8px rgba(0,245,160,.5); }
.lu-verif { display:grid; gap:.35rem; }
.lu-verif .row { display:flex; align-items:center; gap:.5rem; padding:.4rem .5rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); font-size:.8rem; }
.lu-verif .row .n { color:var(--text-faint); min-width:44px; }
.lu-verif .row .ok { margin-left:auto; color:var(--lu-green); font-weight:700; }
.lu-verif .row .ko { margin-left:auto; color:var(--lu-red); font-weight:700; }
.lu-faces { display:flex; gap:.35rem; flex-wrap:wrap; }
.lu-faces span { flex:1; min-width:56px; text-align:center; padding:.45rem .2rem;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm); font-size:.78rem; }
.lu-faces span b { display:block; font-size:1rem; }

/* ---------------------- Messagerie ---------------------- */
.lu-sheet {
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--surface); border-top:1px solid var(--line); border-radius:18px 18px 0 0;
  padding:.8rem .8rem calc(.9rem + env(safe-area-inset-bottom));
  box-shadow:0 -10px 30px rgba(0,0,0,.55); transform:translateY(102%); transition:transform .26s var(--ease);
}
.lu-sheet.open { transform:translateY(0); }
.lu-sheet h3 { margin:0 0 .5rem; font-size:.92rem; }
.lu-sheet .close { position:absolute; right:.6rem; top:.4rem; background:none; border:none;
  color:var(--text-faint); font-size:1.5rem; line-height:1; }
.lu-msgs { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
.lu-msg { display:flex; align-items:center; gap:.35rem; padding:.5rem .55rem; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--line); color:var(--text); font-size:.78rem; text-align:left; }
.lu-msg:active { background:var(--violet-500); }
.lu-emojis { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.55rem; }
.lu-emoji { width:44px; height:44px; font-size:1.35rem; background:var(--surface-2);
  border:1px solid var(--line); border-radius:12px; color:var(--text); }
.lu-emoji:active { background:var(--violet-500); }
.lu-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:55; opacity:0;
  pointer-events:none; transition:opacity .22s; }
.lu-backdrop.open { opacity:1; pointer-events:auto; }

/* ---------------------- Attente et fin ---------------------- */
.lu-seats { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin:.6rem 0; }
.lu-seat { display:flex; align-items:center; gap:.5rem; padding:.6rem; border-radius:var(--radius-sm);
  border:1px dashed var(--line); background:var(--surface); font-size:.8rem; color:var(--text-faint); min-width:0; }
.lu-seat.taken { border-style:solid; color:var(--text); }
.lu-seat span:last-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lu-seat .dot { width:12px; height:12px; border-radius:50%; flex:0 0 12px; }

.lu-rank { list-style:none; margin:.6rem 0 0; padding:0; text-align:left; }
.lu-rank li { display:flex; align-items:center; gap:.5rem; padding:.5rem .3rem;
  border-bottom:1px solid var(--line); font-size:.84rem; }
.lu-rank li:last-child { border-bottom:none; }
.lu-rank .pl { width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:.7rem; font-weight:800; background:var(--surface-2); color:var(--text-dim); flex:0 0 22px; }
.lu-rank li.first .pl { background:var(--lu-yellow); color:#1a1300; box-shadow:0 0 12px var(--lu-yellow); }
.lu-rank li.second .pl { background:#C9CBD6; color:#1a1300; }
.lu-rank .gain { margin-left:auto; font-weight:700; color:var(--lu-green); white-space:nowrap; }
.lu-rank .gain.none { color:var(--text-faint); font-weight:500; }

/* ---------------------- Salon et listes ---------------------- */
.lu-tables { display:grid; gap:.5rem; }
.lu-table-row { display:flex; align-items:center; gap:.6rem; padding:.65rem .7rem;
  border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--line); }
.lu-table-row .fill { display:flex; gap:3px; flex:0 0 auto; }
.lu-table-row .fill i { width:9px; height:9px; border-radius:50%; background:var(--surface-2);
  border:1px solid var(--line); display:block; }
.lu-table-row .fill i.on { background:var(--lu-green); border-color:var(--lu-green);
  box-shadow:0 0 7px var(--lu-green); }
.lu-table-row .meta { flex:1; min-width:0; }
.lu-table-row .meta b { display:block; font-size:.85rem; }
.lu-table-row .meta span { display:block; font-size:.72rem; color:var(--text-faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.lu-modes { display:flex; gap:.5rem; }
.lu-mode { flex:1; padding:.7rem .5rem; border-radius:var(--radius-sm); background:var(--surface);
  border:1px solid var(--line); color:var(--text-dim); text-align:center; font-size:.84rem; font-weight:600; }
.lu-mode.active { border-color:var(--lu-green); color:var(--white);
  background:rgba(0,245,160,.12); box-shadow:0 0 0 1px var(--lu-green), 0 0 16px rgba(0,245,160,.30); }
.lu-mode small { display:block; font-size:.66rem; font-weight:400; color:var(--text-faint); margin-top:.15rem; }

/* ---------------------- Statistiques par jeu ---------------------- */
.gs-game { margin-bottom:.7rem; }
.gs-game > h3 { display:flex; align-items:center; gap:.4rem; margin:0 0 .4rem; font-size:.9rem; }
.gs-game > h3 .ico { font-size:1.1rem; }
.gs-row { display:flex; align-items:center; gap:.55rem; padding:.55rem .6rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:.35rem; }
.gs-row .nm { flex:1; min-width:0; font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-row .num { font-variant-numeric:tabular-nums; font-size:.82rem; min-width:44px; text-align:right; }
.gs-row .num.win { color:var(--lu-green); font-weight:700; }
.gs-row .num.pct { color:var(--violet-300); min-width:44px; }
.gs-row .num.sold { min-width:84px; font-weight:700; }
.gs-row .num.sold.up { color:var(--lu-green); } .gs-row .num.sold.down { color:var(--lu-red); }
.gs-head { display:flex; gap:.55rem; padding:0 .6rem .2rem; font-size:.64rem;
  text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); }
.gs-head .nm { flex:1; }
.gs-head .num { min-width:44px; text-align:right; }
.gs-head .num.pct { min-width:44px; } .gs-head .num.sold { min-width:84px; }
.gs-empty { font-size:.78rem; color:var(--text-faint); padding:.4rem .6rem; }

/* Écrans larges : plateau et panneau côte à côte */
@media (min-width: 860px) {
  .lu-layout { display:grid; grid-template-columns:minmax(0,440px) 1fr; gap:1rem; align-items:start; }
  .lu-msgs { grid-template-columns:1fr 1fr 1fr; }
}

/* Confort : on coupe tout mouvement si le système le demande. Les
   couleurs, elles, restent — c'est la lueur qui informe, pas le rythme. */
@media (prefers-reduced-motion: reduce) {
  .lu-pawn, .lu-board, .lu-die, .lu-sheet, .lu-bubble, .lu-die i { transition:none; animation:none; }
  .lu-turn.mine, .lu-wrap.mine .lu-board, .lu-sq.hint, .lu-pawn.playable,
  .lu-die.ready, .lu-player .tm.danger { animation:none !important; }
  .lu-turn.mine { box-shadow:0 0 22px rgba(0,245,160,.55); }
  .lu-wrap.mine .lu-board { box-shadow:inset 0 0 0 2px var(--lu-green), 0 0 34px rgba(0,245,160,.55); }
  .lu-turn.mine.urgent { box-shadow:0 0 22px rgba(255,46,99,.7); }
  .lu-wrap.mine.urgent .lu-board { box-shadow:inset 0 0 0 2px var(--lu-red), 0 0 34px rgba(255,46,99,.7); }
  .lu-sq.hint { box-shadow:0 0 14px #FFFFFF, inset 0 0 12px rgba(255,255,255,.7); }
}

/* =====================================================================
   THÈME CLAIR DU SITE
   ---------------------------------------------------------------------
   Le plateau reste néon quel que soit le thème : c'est un écran allumé,
   il porte son propre fond. Seuls les TEXTES posés sur le fond de page
   doivent changer — une couleur fluo sur du blanc ne se lit pas.
   ===================================================================== */
[data-theme="light"] .lu-top .lu-pot { color:#0A7A52; text-shadow:none; }
[data-theme="light"] .lu-hint strong { color:#0A7A52; text-shadow:none; }
[data-theme="light"] .lu-legend i {
  background:var(--lu-surf); border-color:rgba(23,27,51,.35); color:#EAF1FF;
}
[data-theme="light"] .lu-fair code { color:#0B57A8; }
[data-theme="light"] .lu-fair .seal { color:#0A7A52; text-shadow:none; }