:root{ --gold:#f2c14e; --glow:#ffd24a; }
*{ box-sizing:border-box; margin:0; padding:0; }
/* aucune barre de défilement visible nulle part (écrans, panneaux, menus) : le contenu reste scrollable
   (molette/tactile), juste sans le rail natif du navigateur qui casse l'habillage. */
*{ scrollbar-width:none; }
*::-webkit-scrollbar{ width:0; height:0; }
html,body{ height:100%; }
body{
  font-family:"Nunito","Segoe UI",sans-serif;
  background:radial-gradient(ellipse at 50% 35%, #14224a 0%, #0a1330 55%, #05070f 100%);
  color:#fff; overflow:hidden; user-select:none;
  display:flex; flex-direction:column;
  -webkit-tap-highlight-color:transparent;
}
#stage{ flex:1 1 auto; min-height:0; display:flex; align-items:flex-start; justify-content:center; }
#board{ position:relative; aspect-ratio:16/9; background:url('assets/plateau.webp') center/cover no-repeat; container-type:size; max-height:100%; }
/* rivière qui renverse le gagnant (voir showdownOrder/detectDecisiveRiver côté JS) : plateau assombri le
   temps du suspense, la 5e carte reste en pleine lumière au-dessus (z-index) pour rester le point focal. */
#board.suspense::after{ content:""; position:absolute; inset:0; z-index:1; background:rgba(4,2,10,.55);
  pointer-events:none; animation:suspenseFade 1.6s ease forwards; }
@keyframes suspenseFade{ from{opacity:0} 15%{opacity:1} 80%{opacity:1} to{opacity:0} }
/* une carte à côté du croupier : origine visible de la distribution (pas juste un point invisible) */
#deck{ position:absolute; top:16%; left:57%; width:3.2cqw; height:3.9cqw; border-radius:.5cqw;
  background:url('assets/back.webp') center/cover; box-shadow:0 .2cqw .5cqw rgba(0,0,0,.5); }

/* ---------- centre ---------- */
#community{ position:absolute; top:40%; left:50%; transform:translate(-50%,-50%); display:flex; gap:1cqw; z-index:3; }
#community .slot{ position:relative; width:7.2cqw; height:8.4cqw; border:.28cqw dashed rgba(255,255,255,.3); border-radius:1.2cqw; box-shadow:inset 0 0 1cqw rgba(0,0,0,.28); }
#community .slot .card{ position:absolute; inset:0; width:100%; height:100%; }
/* zone réservée fixe, mesurée en jeu réel (pas au jugé) : à 52.5% + compacté, le pot tient pile dans le
   couloir entre le bas des cartes communes (~47.5%) et le haut du pod du bas (~57.6%, badges compris),
   marge de sécurité ~1.7pt des deux côtés — plus jamais recouvert ni par les cartes ni par un avatar. */
#pot{ position:absolute; top:52.5%; left:50%; transform:translate(-50%,-50%); z-index:2; display:flex; align-items:center; gap:1cqw; background:rgba(0,0,0,.5); border:.28cqw solid var(--gold); color:var(--gold); padding:.3cqw 2cqw; border-radius:10cqw; font-weight:bold; font-size:1.9cqw; }
#pot::before{ content:""; width:2.4cqw; height:2.4cqw; background:url('assets/jetons.webp') center/contain no-repeat; }
/* détail principal/secondaire, sous le pot, seulement quand il y a plus d'un pot (tapis inégaux) */
#side-pots{ position:absolute; top:calc(52.5% + 3.4cqw); left:50%; transform:translateX(-50%); z-index:2;
  display:flex; gap:1.2cqw; font-size:1.3cqw; font-weight:bold; color:#e6d9b0;
  background:rgba(0,0,0,.55); border:1px solid rgba(242,193,74,.4); border-radius:2cqw; padding:.35cqw 1.4cqw; white-space:nowrap; }
#side-pots[hidden]{ display:none; }
#side-pots b{ color:var(--gold); font-variant-numeric:tabular-nums; }

/* ---------- bandeau niveau de blindes (timer B) ---------- */
#blinds{
  position:absolute; left:1.5%; top:2.5%; z-index:6;
  background:rgba(4,10,26,.82); border:.25cqw solid #33436e; border-radius:1.3cqw;
  padding:.6cqw 1.2cqw; text-align:center; line-height:1.2; box-shadow:0 .4cqw 1.4cqw rgba(0,0,0,.4);
}
/* réduit : sur certaines dispositions le bandeau empiétait sur l'avatar du siège pos-3 (haut-gauche) */
#blinds .lvl{ font-size:1.25cqw; letter-spacing:.5px; color:#8fb4ff; font-weight:bold; }
#blinds .amt{ font-size:1.8cqw; font-weight:bold; color:var(--gold); font-variant-numeric:tabular-nums; }
#blinds .clock{ font-size:2cqw; font-weight:bold; font-variant-numeric:tabular-nums; margin-top:.15cqw; }
#blinds .clock.low{ color:#ff8a6b; }

/* ---------- sièges ---------- */
#seats{ position:absolute; inset:0; }
/* TOUS les sièges = même bloc que toi : rang > avatar (cartes devant) > combinaison > tapis */
.seat{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; z-index:3; }
.seat.pos-0{ left:50%; top:78%; } .seat.pos-1{ left:12%; top:71%; } .seat.pos-2{ left:6%; top:38%; }
.seat.pos-3{ left:23%; top:19%; } .seat.pos-4{ left:77%; top:19%; } .seat.pos-5{ left:94%; top:38%; }

.seat .cards{ display:flex; gap:.5cqw; margin:0; height:4.2cqw; }
.card{ width:3.6cqw; height:4.2cqw; perspective:30cqw; flex:0 0 auto; filter:drop-shadow(0 .35cqw .5cqw rgba(0,0,0,.6)); } /* cartes adversaires compactes */
.seat.pos-0 .card{ width:6.2cqw; height:7.3cqw; }   /* tes cartes : bien lisibles */
.seat.pos-0 .cards{ height:7.3cqw; }
#community .card{ width:7.4cqw; height:8.6cqw; }

.plate{
  position:relative; background:linear-gradient(#191d2b,#0c0e18); border:.2cqw solid #6d5628; border-radius:1.2cqw;
  padding:.35cqw 1cqw; text-align:center; min-width:0; transition:border-color .2s, box-shadow .2s;
  box-shadow:0 .3cqw .9cqw rgba(0,0,0,.55), inset 0 0 0 .1cqw rgba(255,220,150,.1);
}
.plate .pname{ font-weight:bold; font-size:1.55cqw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:16cqw; }
.plate .stack{ color:var(--gold); font-size:1.5cqw; font-variant-numeric:tabular-nums; }
.plate .pname.bot{ color:#b9c6e6; }
.seat.me .plate{ border-color:#c79a44; padding:.25cqw 1.4cqw; margin-top:.4cqw; }
.seat.me .plate .pname{ display:none; }              /* TOI : pas de pseudo, juste le tapis */
.seat.me .plate .stack{ font-size:2.1cqw; }          /* montant plus gros que le label de main */
.seat.folded .plate,.seat.folded .status,.seat.folded .chips{ opacity:.4; filter:grayscale(.7); }
.seat.me.folded .cards{ opacity:.45; filter:grayscale(.85); }   /* tes cartes gardées mais grisées après un fold */
/* tag CHECK/FOLD/C/R à CÔTÉ de la mise (même ligne, pas empilé dessus) : évite que ça décale tout le reste
   du pod vers le bas, et le débordement sur l'avatar du siège voisin observé sur les positions serrées. */
.mise-row{ margin-top:.4cqw; display:flex; align-items:center; gap:.35cqw; }
.check-tag{ display:inline-flex; align-items:center; gap:.35cqw; font-weight:900; font-size:1.45cqw; letter-spacing:.5px;
  color:#eaf5ff; background:linear-gradient(#2f7fd0,#1c5aa0); padding:.15cqw 1cqw; border-radius:2cqw; box-shadow:0 .2cqw .5cqw rgba(0,0,0,.5); white-space:nowrap; }
.check-tag.fold{ background:linear-gradient(#d0433a,#a3302a); }
.check-tag.call{ background:linear-gradient(#3f8f68,#2c6a4d); }              /* C -> vert */
.check-tag.raise{ background:linear-gradient(#ffe27a,#f0a92a); color:#241a00; } /* RAISE 12K -> doré */
.check-tag[hidden]{ display:none; }
.seat.eliminated .cards,.seat.eliminated .plate,.seat.eliminated .status,.seat.eliminated .chips{ opacity:.22; filter:grayscale(1); }
.seat.disconnected .plate .pname::after{ content:" ⚡"; color:#ff8a6b; }

.status{ min-height:0; font-size:1.9cqw; font-weight:bold; text-transform:uppercase; letter-spacing:.5px; color:#8fd3ff; line-height:1; }
.status:empty{ display:none; }   /* pas d'espace vide entre l'avatar et les cartes */
.status.allin{ color:#ffb14a; } .status.fold{ color:#c88; }

/* tuck sur le bord du pod (pas de survol au-dessus) : un débordement négatif grignotait la zone réservée du
   pot à 6 joueurs (signalé en jeu réel : avatar visible par-dessus le pot) -> zones désormais bien séparées. */
.dealer-btn{ position:absolute; z-index:4; top:-.3cqw; right:.1cqw; width:2.5cqw; height:2.5cqw; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#c9c9c9); color:#222; font-weight:bold; font-size:1.6cqw;
  display:flex; align-items:center; justify-content:center; border:.25cqw solid #999; box-shadow:0 .3cqw .7cqw rgba(0,0,0,.5); }

/* anneau de timer d'action (timer A) autour du cadre */
.ring{
  position:absolute; width:150%; aspect-ratio:1; left:50%; top:50%; transform:translate(-50%,-50%);
  border-radius:50%; opacity:0; transition:opacity .2s; pointer-events:none; z-index:-1;
  background:conic-gradient(var(--ring-col,var(--glow)) calc(var(--frac,1) * 360deg), rgba(0,0,0,.4) 0);
  -webkit-mask:radial-gradient(closest-side, transparent 68%, #000 70%);
          mask:radial-gradient(closest-side, transparent 68%, #000 70%);
}
.seat.active .ring{ opacity:1; }
.seat.active .plate{ border-color:#e8c65a; box-shadow:0 0 1cqw rgba(232,198,90,.4), 0 .3cqw .9cqw rgba(0,0,0,.55); }
/* joueur actif : petites étoiles scintillantes autour de l'avatar (position:relative sur .pod, PAS sur
   .avatar lui-même qui a overflow:hidden pour le sprite -> les étoiles seraient rognées) */
.pod::before{ content:''; position:absolute; left:50%; top:2.4cqw; width:7.9cqw; height:7.9cqw; z-index:2;
  transform:translate(-50%,-50%); pointer-events:none; opacity:0;
  background:
    radial-gradient(circle,#fff 0 45%,transparent 70%) 4% 14%/13% 13% no-repeat,
    radial-gradient(circle,#fff 0 45%,transparent 70%) 92% 22%/9% 9% no-repeat,
    radial-gradient(circle,#fff 0 45%,transparent 70%) 84% 86%/11% 11% no-repeat,
    radial-gradient(circle,#fff 0 45%,transparent 70%) 8% 82%/8% 8% no-repeat,
    radial-gradient(circle,#ffe9a8 0 45%,transparent 70%) 50% 2%/7% 7% no-repeat; }
.seat.pos-0 .pod::before{ top:3.5cqw; width:11.1cqw; height:11.1cqw; }  /* TOI : avatar plus grand */
.seat.active .pod::before{ opacity:1; animation:sparkleTwinkle 1.2s ease-in-out infinite; }
@keyframes sparkleTwinkle{ 0%,100%{ opacity:.35; transform:translate(-50%,-50%) scale(.92); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
/* onde brillante qui sort de l'avatar et s'efface, au moment du tapis (box-shadow : pas rogné par
   l'overflow:hidden de .avatar, contrairement à un pseudo-élément) */
.avatar.ripple{ animation:allinRipple .9s ease-out; }
@keyframes allinRipple{
  0%{ box-shadow:0 0 0 0 rgba(255,177,74,.85); }
  100%{ box-shadow:0 0 0 3.4cqw rgba(255,177,74,0); }
}

/* ===== POD = avatar (derrière) + cartes DEVANT (chevauchent le bas ~25%) + label de main ===== */
.pod{ position:relative; display:flex; flex-direction:column; align-items:center; }
/* avatar rond, bordure blanche, sprite Pokémon ; l'anneau timer l'entoure.
   PAS de overflow:hidden ICI : .ring déborde à 150% pour former le halo autour de l'avatar, un overflow
   sur .avatar le rognait entièrement (seule la bordure verte statique restait visible, jamais le camembert). */
/* taille réduite (demande explicite : avatar+cartes+Chen+barre du bas prenaient "la moitié de la table"
   comparé aux jeux de référence, où la table domine et les pods des joueurs restent discrets). */
.avatar{ position:relative; z-index:1; width:4.8cqw; height:4.8cqw; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 50% 32%,#4a3a6e,#191029); border:.25cqw solid #f3f0ff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 .3cqw .8cqw rgba(0,0,0,.6); }
/* wrapper interne : lui seul rogne le sprite (surdimensionné à 132% pour éliminer le padding transparent) */
.avatar-clip{ position:absolute; inset:0; z-index:1; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
.avatar-clip .ava-img{ width:132%; height:132%; object-fit:contain; image-rendering:pixelated; }
/* portrait réel (pool "personnalités", une partie sur deux) : photo pleine cadre, pas du pixel art -> cover + lissage, pas de surdimension */
.avatar-clip .ava-img.people{ width:100%; height:100%; object-fit:cover; image-rendering:auto; }
.seat.pos-0 .avatar{ width:7cqw; height:7cqw; }            /* TOI : avatar plus grand */
.seat.active .avatar{ border-color:#8fe0a8; box-shadow:0 0 1cqw rgba(80,220,120,.6); }
.seat.folded .avatar{ opacity:.4; filter:grayscale(.7); }
/* cartes devant l'avatar : remontées pour ne masquer que ~25% du bas de l'avatar */
.pod .cards{ position:relative; z-index:2; margin:0; height:auto; margin-top:-1.4cqw; }
.seat.pos-0 .pod .cards{ margin-top:-1.9cqw; }
.pod .cards .card + .card{ margin-left:-.8cqw; }              /* léger chevauchement entre les 2 cartes */
.pod .cards .card:last-child{ z-index:2; } .pod .cards .card:first-child{ z-index:1; }
/* petit indicateur de statut (en ligne) — discret, en haut à droite de l'avatar */
.status-dot{ position:absolute; z-index:3; width:1.3cqw; height:1.3cqw; border-radius:50%; top:.1cqw; right:.8cqw;
  background:radial-gradient(circle at 40% 35%,#7bf0a0,#2fae5c); border:.15cqw solid #0d1a12; box-shadow:0 0 .4cqw rgba(80,240,150,.7); }
.seat.pos-0 .status-dot{ right:1.8cqw; }
.seat.disconnected .status-dot{ background:radial-gradient(circle at 40% 35%,#ffb08a,#d64a2a); }
/* label de main (HIGH CARD / PAIRE / …) juste SOUS les cartes, centré */
.hand-label{ position:relative; z-index:3; margin-top:-.7cqw; background:linear-gradient(#2f7fd0,#194a86); color:#eaf5ff;
  font-weight:900; font-size:1.4cqw; letter-spacing:.5px; padding:.12cqw 1cqw; border-radius:3cqw; white-space:nowrap;
  box-shadow:0 .2cqw .5cqw rgba(0,0,0,.55); }
.hand-label.strong{ background:linear-gradient(#ffe27a,#f0a92a); color:#241a00; }   /* brelan+ -> doré, ou Chen élevé préflop */
.hand-label.weak{ background:linear-gradient(#4a5578,#2c3455); color:#c3cbe8; }     /* Chen faible préflop -> gris, moins engageant que le bleu/or */
.hand-label[hidden]{ display:none; }
/* variante boîte (système de force : rang 1-10 / détail / Force ou Chen Score) : plusieurs lignes au lieu
   de la puce à 1 ligne d'origine ; mêmes couleurs (bleu/or/gris) selon .strong/.weak déjà posés au-dessus. */
/* boîte compacte (demande explicite : prenait "la moitié de la table" comparé aux jeux de référence, qui
   n'affichent même pas cette info) -> divisée par ~2, une seule ligne resserrée au lieu de 3 lignes larges. */
.hand-label.box{ display:flex; flex-direction:column; align-items:center; gap:.05cqw;
  border-radius:.6cqw; padding:.15cqw .7cqw; white-space:normal; min-width:0; }
.hand-label.box b{ display:flex; align-items:baseline; justify-content:center; gap:.4cqw; font-size:.85cqw; }
.hand-label.box .hl-rank{ font-size:.65cqw; font-weight:700; opacity:.75; }
.hand-label.box .hl-cards{ font-size:.95cqw; font-weight:800; font-variant-numeric:tabular-nums; }
.hand-label.box .hl-sub{ font-size:.68cqw; font-weight:700; opacity:.85; }
/* % de win au tapis, par-dessus l'avatar */
.eq-badge{ position:absolute; z-index:5; left:50%; top:2.4cqw; transform:translate(-50%,-50%); white-space:nowrap;
  background:linear-gradient(#2fae5c,#1a6e39); color:#fff; font-weight:900; font-size:1.5cqw; letter-spacing:.3px;
  padding:.15cqw .7cqw; border-radius:2cqw; box-shadow:0 .2cqw .5cqw rgba(0,0,0,.65); border:.12cqw solid rgba(255,255,255,.35); }
.seat.pos-0 .eq-badge{ top:3.4cqw; font-size:1.8cqw; }
.eq-badge[hidden]{ display:none; }

/* boutons SHOW de part et d'autre de tes cartes (après un fold) */
.show-btn{ position:absolute; z-index:8; display:none; font:inherit; font-weight:900; font-size:1.15cqw; letter-spacing:.5px;
  color:#dfe8f5; cursor:pointer; background:linear-gradient(#243154,#161f36); border:.15cqw solid #47598a; border-radius:.8cqw;
  padding:.4cqw .7cqw; box-shadow:0 .2cqw .4cqw rgba(0,0,0,.5); white-space:nowrap; }
.show-btn.on{ background:linear-gradient(#2f7fd0,#1c5aa0); border-color:#7fbcff; color:#fff; box-shadow:0 0 1.2cqw rgba(90,168,255,.8); }
.seat.pos-0 .show-btn{ top:1.5cqw; bottom:auto; }   /* tes cartes sont en haut du siège -> boutons à leur niveau */
.seat.pos-0 .show-btn.l{ right:100%; margin-right:1.2cqw; }
.seat.pos-0 .show-btn.r{ left:100%; margin-left:1.2cqw; }

/* mise du joueur : [mini-avatar] [somme] [jeton] — bloc collé, on sait qui mise quoi */
.chips{ position:relative; display:flex; align-items:center; gap:.45cqw; font-weight:bold; font-size:1.9cqw;
  background:rgba(0,0,0,.62); border-radius:5cqw; padding:.25cqw .5cqw; white-space:nowrap; z-index:4; } /* collée SOUS le pseudo (en flux) */
.chips .chip-ava{ width:2.6cqw; height:2.6cqw; border-radius:50%; object-fit:cover; background:#191029; border:.14cqw solid #f3f0ff; image-rendering:pixelated; }
.chips .chip-jeton{ width:2.4cqw; height:2.4cqw; background:url('assets/jetons.webp') center/contain no-repeat; flex:0 0 auto; }
.chips[hidden]{ display:none; }
/* couleur de la mise selon sa nature (demande explicite) : blinde -> bleu, suivre -> vert, relance -> doré */
.chips.blind{ color:#5ab0ff; text-shadow:0 0 .8cqw rgba(90,176,255,.7); }
.chips.call{ color:#37d472; text-shadow:0 0 .8cqw rgba(55,212,114,.7); }
.chips.raise{ color:#ffd863; text-shadow:0 0 .8cqw rgba(255,216,99,.8); }
.chips .chip-a{ display:none; }
.chips .chip-blind{ display:none; }
.chips .chip-blind:not(:empty){ display:flex; align-items:center; justify-content:center; padding:0 .55cqw; height:2.1cqw; font-size:1.3cqw; font-weight:900; letter-spacing:.3px; color:#12203f; background:linear-gradient(#f0d878,#c79a2e); border-radius:.5cqw; box-shadow:0 .15cqw .4cqw rgba(0,0,0,.4); }
.chips.drop .chip-jeton{ animation:chipDrop .32s ease-out; }    /* le jeton se pose */
@keyframes chipDrop{ 0%{ transform:translateY(-45%) scale(1.35); opacity:.15 } 60%{ transform:translateY(0) scale(.9); } 100%{ transform:none; opacity:1 } }
/* piles colorées (assets/chips/pile_*.webp) au lieu du petit jeton générique -> le "coup de pouce" vers le
   pot/le gagnant se voit vraiment (signalé en jeu réel : l'ancienne anim à 34px/430ms passait inaperçue). */
.fly-chip{ position:fixed; z-index:20; width:54px; height:60px; margin:0; background-size:contain; background-repeat:no-repeat; background-position:center; pointer-events:none; filter:drop-shadow(0 3px 5px rgba(0,0,0,.6)); }
.chips.allin{ color:#ff5aa8; text-shadow:0 0 .8cqw rgba(255,90,168,.7); }         /* mise à tapis en rose */
.chips.allin .chip-a{ display:flex; align-items:center; justify-content:center; width:2.1cqw; height:2.1cqw; font-size:1.4cqw; font-weight:900; font-style:normal; color:#fff; background:linear-gradient(#ff5aa8,#d62e86); border-radius:.5cqw; box-shadow:0 0 .6cqw rgba(255,90,168,.7); }
/* (mise désormais en flux, collée sous le pseudo — plus de positionnement absolu vers le pot) */

/* ---------- cartes ---------- */
.card-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .65s cubic-bezier(.4,1.4,.5,1); }
.card.flipped .card-inner{ transform:rotateY(180deg); }
.card .face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:1.2cqw; background-size:contain; background-repeat:no-repeat; background-position:center; }
.card .front{ transform:rotateY(180deg); }
.card .back{ background:url('assets/back.webp') center/cover no-repeat #2a1a4a; border:.22cqw solid rgba(225,215,245,.5); box-shadow:0 .3cqw .9cqw rgba(0,0,0,.55); }
/* néon FIXE, collé au bord, trait plus épais et en couleur PLEINE (pas de rgba passé) -> à .14cqw sur un
   plateau de 800px ça fait à peine 1px de large, quasi invisible en jeu réel (signalé) ; maintenant un
   anneau net et un halo court mais saturé, pour que la carte concernée saute aux yeux instantanément. */
.card.made .card-inner{ box-shadow:0 0 0 .22cqw #5ab0ff, 0 0 .9cqw .1cqw #5ab0ff; border-radius:1.2cqw; }   /* paire/double -> néon bleu */
.card.made.made-high .card-inner{ box-shadow:0 0 0 .15cqw #8fd8ff, 0 0 .55cqw .06cqw rgba(143,216,255,.85); }  /* simple carte haute -> cyan, plus léger que les autres tiers */
.card.made.made-trips .card-inner{ box-shadow:0 0 0 .22cqw #37d472, 0 0 .9cqw .1cqw #37d472; }              /* brelan -> néon vert */
.card.made.made-strong .card-inner{ box-shadow:0 0 0 .22cqw #ffd863, 0 0 .9cqw .1cqw #ffd863; }             /* quinte+ -> néon doré */
@keyframes pop{ 0%{transform:scale(.6)} 60%{transform:scale(1.12)} 100%{transform:scale(1)} }
.card.pop{ animation:pop .34s ease; }

/* ---------- croupier (Watto), en haut du plateau, CENTRÉ : idle fixe, bascule sur "distribue" au deal ---------- */
#croupier{ position:absolute; left:50%; top:1%; transform:translateX(-50%); width:16cqw; height:16cqw; z-index:11;
  background-image:url('assets/croupier_idle.webp'); background-size:contain; background-repeat:no-repeat; background-position:center bottom;
  filter:drop-shadow(0 .4cqw 1cqw rgba(0,0,0,.55)); pointer-events:none; transition:transform .12s; }
#croupier.dealing{ background-image:url('assets/croupier_deal.webp'); transform:translateX(-50%) scale(1.05); }
#croupier.bravo{ background-image:url('assets/croupier_bravo.webp'); transform:translateX(-50%) scale(1.08); }
/* décor : quelques piles de jetons posées près du croupier (demande explicite), purement visuel */
#croupier-chips-l,#croupier-chips-r{ position:absolute; top:19%; width:4.2cqw; height:4.6cqw; z-index:10;
  background-size:contain; background-repeat:no-repeat; background-position:center; pointer-events:none;
  filter:drop-shadow(0 .25cqw .6cqw rgba(0,0,0,.5)); opacity:.92; }
#croupier-chips-l{ left:37%; background-image:url('assets/chips/pile_or.webp'); }
#croupier-chips-r{ left:60%; background-image:url('assets/chips/pile_bleu.webp'); }

/* ---------- bulle du croupier : ancrée par le BAS (pas de translateY(-50%)) pour ne jamais sortir en haut de l'écran ---------- */
#ronflex-bubble{ position:absolute; left:50%; top:0; transform:translate(-50%,0) scale(.7);
  background:#fff; color:#1a2440; font-weight:bold; font-size:1.1cqw; padding:.4cqw 1cqw; border-radius:2cqw; white-space:nowrap;
  box-shadow:0 .3cqw .9cqw rgba(0,0,0,.5); opacity:0; transition:opacity .18s, transform .18s; z-index:12; pointer-events:none; }
#ronflex-bubble::after{ content:""; position:absolute; bottom:-.7cqw; left:50%; transform:translateX(-50%); border:.7cqw solid transparent; border-top-color:#fff; border-bottom:0; }
#ronflex-bubble.show{ opacity:1; transform:translate(-50%,0) scale(1); }

/* ---------- overlay victoire ---------- */
#victory{ position:absolute; inset:0; background:rgba(3,7,18,.86); z-index:30; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5cqw; border-radius:6%; }
#victory[hidden]{ display:none; }
#victory .trophy{ width:16cqw; }
#victory .trophy img{ width:100%; height:auto; display:block; filter:drop-shadow(0 .5cqw 1.4cqw rgba(0,0,0,.6)); }
#victory .vtitle{ font-family:"Roboto Condensed","Nunito",sans-serif; font-size:5cqw; font-weight:700; font-style:italic;
  letter-spacing:1px; color:#e9ffb0; text-align:center;
  text-shadow:0 0 1.2cqw #6bff5a, 0 .2cqw 0 #143a0c, 0 .05cqw .3cqw #000; }
#victory .vsub{ font-size:2.6cqw; color:#cdd8f0; }

/* ---------- barre d'info + contrôles ---------- */
#hand-info{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:16px; min-height:38px; padding:4px 12px; background:rgba(0,0,0,.45); font-weight:bold; font-size:clamp(12px,3.2vw,16px); }
#hand-name:not(:empty){ color:#eaf5ff; background:linear-gradient(#2f7fd0,#194a86); padding:3px 16px; border-radius:20px;
  font-weight:900; font-size:clamp(15px,4vw,21px); letter-spacing:.5px; box-shadow:0 0 14px rgba(70,150,240,.55); } /* paire/double -> bleu */
#hand-name.strong{ color:#241a00; background:linear-gradient(#ffe27a,#f0a92a); box-shadow:0 0 14px rgba(255,205,80,.6); } /* brelan+ -> doré */
#hand-outs{ color:#8fe6ff; }
#hand-info:empty{ display:none; }

/* padding-left réservé pour ne jamais passer sous les 3 boutons ronds fixes (aide/chat/emote, 104px, jusqu'à
   x=350) : à largeur desktop moyenne (~560-1000px), #controls étant centré, Fold/Check se retrouvaient
   dessous et devenaient injoignables (signalé en jeu réel). Valeur ajustée dans chaque media query plus bas
   qui redimensionne ces boutons ronds. */
#controls{ flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px;
  padding:10px 8px calc(10px + env(safe-area-inset-bottom)) 360px; background:rgba(0,0,0,.55); border-top:2px solid #1a2748; min-height:58px; }
.act{ font:inherit; font-weight:bold; font-size:clamp(13px,3.4vw,16px); color:#fff; border:2px solid rgba(255,255,255,.16); border-radius:11px; padding:11px 14px; cursor:pointer; box-shadow:0 3px 0 rgba(0,0,0,.35); transition:transform .1s; }
.act:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.35); }
.act[hidden]{ display:none; }
.act:disabled{ opacity:.32; cursor:not-allowed; filter:grayscale(.5); }
/* coucher = rouge ; check/suivre = vert ; relancer = doré (DA demandée) */
.fold{ background:linear-gradient(#d0433a,#a3302a); } .check{ background:linear-gradient(#3f8f68,#2c6a4d); }
.call{ background:linear-gradient(#3f8f68,#2c6a4d); } .allin{ background:linear-gradient(#9a44c0,#7226a0); }
.raise{ background:linear-gradient(#ffe27a,#f0a92a); color:#241a00; }

/* pré-actions (pas mon tour) : bouton sombre + rond qui se coche en vert */
#preactions{ display:flex; gap:8px; }
#preactions[hidden]{ display:none; }
.pa{ font:inherit; font-weight:bold; font-size:clamp(12px,3.1vw,15px); color:#cfe0f5; cursor:pointer;
  background:linear-gradient(#1c2740,#131b2e); border:2px solid #33436e; border-radius:11px; padding:10px 13px;
  display:flex; align-items:center; gap:8px; transition:transform .1s; }
.pa:active{ transform:translateY(2px); }
.pa .pa-box{ width:15px; height:15px; border-radius:50%; border:2px solid #6a7aa5; background:transparent; flex:0 0 auto; }
.pa.on{ border-color:#37d472; color:#eafff2; box-shadow:0 0 0 1px #37d472 inset; }
.pa.on .pa-box{ background:#37d472; border-color:#37d472; box-shadow:0 0 6px rgba(55,212,114,.7); }
.pa:disabled{ opacity:.4; cursor:not-allowed; }
/* une seule ligne (comme avant) : un #raise-box sur 2 lignes fait varier plus fort la hauteur de la barre du
   bas selon que c'est ton tour ou pas -> #board se recalibre (fitBoard) -> effet de zoom/dézoom au changement
   de tour (signalé en jeu réel). */
#raise-box{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }
#raise-box[hidden]{ display:none; }
.pot-shortcuts{ display:flex; gap:8px; }
.raise-row{ display:flex; align-items:center; gap:8px; }
#raise-slider{ width:min(32vw,150px); accent-color:var(--gold); }
#raise-amount{ color:var(--gold); font-weight:bold; min-width:52px; text-align:right; font-variant-numeric:tabular-nums; font-size:clamp(13px,3.4vw,16px); }
#btn-leave-game{ padding:13px 20px; font-size:16px; } /* plus grand que le .ghost-btn.small générique */
#conn{ font-size:16px; opacity:.85; font-weight:bold; }
#conn.waiting{ color:#ffcf6b; } #conn.ok{ color:#7fd39a; } #conn.lost{ color:#ff8a6b; }

/* ===================== ÉCRANS (accueil / lobby / rooms) ===================== */
#app-bg{ position:fixed; inset:0; z-index:-1;
  background:radial-gradient(ellipse at 50% 22%, #16306e 0%, #0a1533 55%, #04060e 100%); }
#app-bg::after{ content:""; position:absolute; inset:0; opacity:.92;
  background:url('assets/background.webp') center/cover no-repeat; }
body.playing #app-bg{ display:none; } /* la scène casino n'est qu'au menu */
/* en jeu : remplit les bords avec un flou sombre du plateau (plus de vide noir) */
#game-bg{ position:fixed; inset:0; z-index:-1; display:none;
  background:url('assets/plateau.webp') center/cover no-repeat; filter:blur(30px) brightness(.42) saturate(1.1); transform:scale(1.18); }
body.playing #game-bg{ display:block; }
.screen{ position:fixed; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; padding:18px; overflow:auto; }
.screen[hidden]{ display:none; }

/* accueil */
.landing-inner{ display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; }
#logo{ position:relative; animation:logoGlow 2.8s ease-in-out infinite; }
/* invisible tant que le PNG n'est pas COMPLÈTEMENT reçu (voir .ready posé par onload en HTML) : sinon sur une
   connexion lente (tunnel), le navigateur peint l'image ligne par ligne au fur et à mesure -> flash de
   fragments à moitié chargés qui ressemblent à un "vieux logo" cassé, avant que l'image complète apparaisse. */
#logo-img{ max-width:min(78vw,520px); max-height:44vh; display:block; filter:drop-shadow(0 0 22px rgba(120,170,255,.6));
  opacity:0; transition:opacity .3s ease; }
#logo-img.ready{ opacity:1; }
/* caché par défaut : ce n'est qu'un secours si assets/logo.webp échoue vraiment (voir onerror dans le HTML) ;
   avant, il était visible EN PERMANENCE tant que l'image n'avait pas fini de charger -> flash moche du texte
   brut avant que la vraie image (pourtant préchargée) apparaisse (signalé en jeu réel). */
.logo-text{ display:none; font-weight:900; font-size:clamp(46px,13vw,112px); line-height:.86; letter-spacing:1px; color:#eaf1ff; text-shadow:0 3px 0 #0a1836; }
.logo-text b{ display:block; color:transparent; background:linear-gradient(#ffe27a,#f0a92a); -webkit-background-clip:text; background-clip:text; }
@keyframes logoGlow{ 0%,100%{ filter:drop-shadow(0 0 10px rgba(120,170,255,.3)); } 50%{ filter:drop-shadow(0 0 34px rgba(150,190,255,.85)) drop-shadow(0 0 12px rgba(255,210,90,.5)); } }
.tagline{ color:#a9bce6; font-size:clamp(14px,3.6vw,19px); font-weight:bold; letter-spacing:.5px; margin-top:-6px; }
/* bouton JOUER = asset unique (jouer.png). Survol = léger éclat CSS, PAS de 2e image. */
#btn-play.play-asset{ border:0; padding:0; font-size:0; color:transparent; cursor:pointer;
  width:min(300px,72vw); aspect-ratio:1942/809; background:url('assets/ui/btn_play.webp') center/contain no-repeat;
  -webkit-tap-highlight-color:transparent; transition:transform .12s ease, filter .12s ease; }
#btn-play.play-asset:hover{ transform:scale(1.05); filter:brightness(1.12) drop-shadow(0 0 12px rgba(255,216,104,.6)); }
#btn-play.play-asset:active{ transform:scale(.97); }
#btn-play.play-asset:focus-visible{ outline:2px solid #ffd868; outline-offset:4px; }

/* ============ ÉCRAN DE CHARGEMENT (fake, ~5 s) ============ */
#loading{ position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; gap:16px; padding:0 24px 5vh;
  background:#0a0713 url('assets/loading.webp') center center/contain no-repeat;
  transition:opacity .6s ease; }
#loading::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,7,19,0) 55%, rgba(10,7,19,.6) 78%, rgba(10,7,19,.95) 100%); }
#loading.done{ opacity:0; pointer-events:none; }
#loading > *{ position:relative; z-index:1; }
.load-msg{ color:#f3e7ff; font-weight:800; font-size:clamp(14px,3.6vw,19px); letter-spacing:.4px;
  text-shadow:0 2px 8px rgba(0,0,0,.7); text-align:center; min-height:1.4em; }
.load-bar{ width:min(420px,86vw); height:16px; border-radius:10px; overflow:hidden;
  background:rgba(8,14,32,.8); border:2px solid rgba(120,180,255,.55);
  box-shadow:0 4px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
.load-fill{ height:100%; width:0%; border-radius:8px;
  background:linear-gradient(90deg,#1748b0,#3a86ff,#8fd0ff);
  box-shadow:0 0 12px rgba(90,170,255,.75), inset 0 1px 0 rgba(255,255,255,.35); }
.load-pct{ color:#bfe0ff; font-weight:900; font-size:clamp(13px,3.2vw,17px); letter-spacing:1px;
  font-variant-numeric:tabular-nums; text-shadow:0 2px 6px rgba(0,0,0,.7); }

/* panneaux — cadre "casino premium" : liseré or fin + fond dégradé profond + barre d'accent en tête
   (avant : rectangle plat rgba uni, bord bleu uni -> lisait "template IA générique") */
/* grain de feutre : le thème "table de poker" doit exister dans l'INTERFACE, pas juste la photo de fond —
   tissage diagonal très fin + un halo de lumière, mêlés au fond du panneau (calques de background, pas un
   pseudo-élément séparé : un ::after empilerait par-dessus le CONTENU, pas juste le fond). */
.panel{ position:relative; width:min(460px,94vw);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.05), transparent 45%),
    linear-gradient(165deg,rgba(22,32,64,.96),rgba(6,11,26,.98));
  border:1px solid rgba(242,193,74,.28); border-radius:16px; padding:22px 20px 20px;
  box-shadow:0 22px 60px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  display:flex; flex-direction:column; gap:14px; max-height:92vh; overflow:auto; }
.panel::before{ content:""; position:absolute; top:0; left:16px; right:16px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.8; z-index:1; }
/* filigrane pique géant, coin bas-droit : casse le silhouette "rectangle plat centré" (le réflexe par défaut
   de tout gabarit) par un vrai geste typographique, au lieu d'ajouter encore une bordure ou une ombre. */
.panel::after{ content:"♠"; position:absolute; bottom:-14px; right:6px; font-family:Georgia,serif;
  font-size:min(220px,58vw); line-height:1; color:var(--gold); opacity:.045; pointer-events:none; z-index:0; }
.panel > *{ position:relative; z-index:1; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; border-bottom:1px solid rgba(242,193,74,.16); padding-bottom:12px; }
.mini-logo{ font-family:"Bebas Neue","Nunito",sans-serif; font-weight:400; font-size:28px; letter-spacing:1px; color:#eaf1ff; }
.mini-logo b{ color:transparent; background:linear-gradient(#ffe27a,#f0a92a); -webkit-background-clip:text; background-clip:text; }
.who{ font-size:13px; color:#9fb2dd; } .who b{ color:#fff; }

/* ============ LOBBY — assets découpés de tiensclaude.png (planche sur fond noir) ============
   RÈGLE : aucun bouton ni cadre redessiné en CSS. On pose les PNG, on fige leur ratio, on gère le
   clic (les <button> gardent IDs + handlers), hover très léger (scale + luminosité). Le texte
   « Salon : … changer » est du HTML posé PAR-DESSUS la barre `ui_salon_bar` (cadre volontairement vide). */
#lobby{ align-items:flex-start; padding-top:clamp(4px,2vh,22px); }
.lobby-wrap{ width:min(900px,97vw); display:flex; flex-direction:column; gap:6px; }
.lobby-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:0 22px; position:relative; z-index:2; }
#logo-lobby img{ height:clamp(96px,14vw,150px); width:auto; display:block;
  filter:drop-shadow(0 8px 22px rgba(120,60,200,.55)); }

/* barre pseudo : PNG au cadre vide, texte HTML centré DANS la cavité violette (les ornements dorés
   occupent ~11 % à gauche/droite de l'image -> padding en % pour que le texte reste au centre du creux) */
#salon-pill{ background:url('assets/ui/salon_bar.webp') center/100% 100% no-repeat;
  color:#f3e7ff; font-size:clamp(12px,1.35vw,15px); font-weight:700; letter-spacing:.3px; line-height:1;
  height:clamp(46px,4.8vw,60px); padding:1px 12.5% 0; min-width:320px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap; }
#salon-pill b{ color:#ffd868; } #salon-pill .link{ color:#d3e2ff; }

/* grand cadre violet/or : image de fond étirée, padding = retrait de la bordure dorée dessinée */
.lobby-frame{ box-sizing:border-box; position:relative;
  background:url('assets/ui/menu_frame.webp') center/100% 100% no-repeat;
  padding:clamp(58px,10vw,104px) clamp(66px,10.5vw,122px) clamp(46px,7vw,72px);
  display:flex; flex-direction:column; gap:clamp(10px,1.6vw,18px); min-height:210px; }

/* ===== éclat périodique sur les gemmes des coins hauts du cadre (TL + TR) ===== */
@keyframes cornerSparkle{
  0%,74%,100%{ opacity:0; transform:scale(.15) rotate(0deg); }
  81%{ opacity:1; transform:scale(1) rotate(28deg); }
  87%{ opacity:.7; transform:scale(.62) rotate(46deg); }
  94%{ opacity:0; transform:scale(.25) rotate(66deg); }
}
.lobby-frame::before,.lobby-frame::after{
  content:""; position:absolute; width:clamp(26px,6%,46px); aspect-ratio:1; pointer-events:none; z-index:3;
  background:
    radial-gradient(circle, #fff 0 7%, rgba(255,244,214,.6) 13%, transparent 40%),
    conic-gradient(from 0deg,
      transparent 0 6%, rgba(255,232,168,.95) 12.5%, transparent 19% 31%,
      rgba(255,232,168,.95) 37.5%, transparent 44% 56%,
      rgba(255,232,168,.95) 62.5%, transparent 69% 81%,
      rgba(255,232,168,.95) 87.5%, transparent 94%);
  opacity:0; animation:cornerSparkle 6s ease-in-out infinite; }
/* position recalée sur la vraie gemme du cadre (mesurée en jeu réel avec un marqueur, pas au jugé : l'ancienne
   valeur (top:9%) flottait bien au-dessus, dans le vide, à côté de la gemme). */
.lobby-frame::before{ top:14.5%; left:3.5%; }
.lobby-frame::after { top:14.5%; right:3.5%; animation-delay:3s; }

/* les 2 boutons principaux : MÊME rectangle exact. Ratio commun (~3.85, moyenne des 2 sources -> la
   déformation de chaque image est < 5%, invisible) + image étirée pour remplir. */
.lobby-actions{ display:flex; gap:clamp(16px,3.4vw,40px); align-items:center; justify-content:center;
  height:clamp(58px,7.6vw,88px); }
.lobby-actions .asset-btn{ height:100%; width:auto; aspect-ratio:77/20; background-size:100% 100%;
  max-width:44%; }
.asset-btn{ border:0; padding:0; background:transparent center/contain no-repeat;
  cursor:pointer; font-size:0; color:transparent; -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, filter .12s ease; }
.asset-btn:hover{ transform:scale(1.03); filter:brightness(1.07); }
.asset-btn:active{ transform:scale(.975); filter:brightness(.93); }
.asset-btn:focus-visible{ outline:2px solid #ffd868; outline-offset:3px; border-radius:14px; }
.abtn-create{ background-image:url('assets/ui/btn_create.webp'); }
.abtn-join{   background-image:url('assets/ui/btn_join.webp'); }

/* titre de liste + rafraîchir : le refresh est posé À CÔTÉ de la liste qu'il recharge */
.lobby-listhead{ display:flex; align-items:center; gap:10px; }
.lobby-listhead .section-title{ margin:0; flex:1 1 auto; }
.abtn-refresh{ background-image:url('assets/ui/btn_refresh.webp'); aspect-ratio:1/1;
  height:clamp(36px,4vw,46px); width:auto; flex:0 0 auto; }

/* liste des rooms : scroll interne si beaucoup de rooms -> ne déborde jamais du cadre */
.lobby-frame .room-list{ max-height:clamp(104px,22vh,210px); overflow-y:auto; padding-right:3px; }
.lobby-frame .section-title{ color:#ece0ff; border-left-color:#ffd868; }
.lobby-frame .room-row{ background:linear-gradient(#2a1848,#1b0f31); border-color:#4a2f7a; }
.lobby-frame .room-row:hover{ border-color:#ffd868; }
.lobby-frame .empty-note{ color:#b9a7d8; }

/* ============ ÉCRANS « NOUVELLE ROOM » + « SALLE D'ATTENTE » — assets de tiensclaude.png ============
   RÈGLE : on POSE les PNG (fond noir -> découpe transparente nette). Aucun bouton/cadre redessiné.
   <input> = vrais champs HTML dans `ui_field`. Sélection = échange d'image (.on -> version bleue).
   Hauteur de rangée fixe -> violet et bleu restent alignés. */
/* cadre portrait `ui_form_frame` : le bandeau « NOUVELLE ROOM » dessiné occupe ~31 % de la hauteur.
   Ratio figé + contenu en absolu (top/left/right/bottom en %) -> il tient TOUJOURS dans le creux,
   sous le bandeau, quel que soit l'écran. */
.crn-frame,.wait-frame{ position:relative; width:min(760px,97vw); aspect-ratio:1091/1264;
  background:url('assets/ui/form_frame.webp') center/100% 100% no-repeat; }
/* éclat périodique sur les gemmes des coins hauts du PANNEAU (sous le bandeau) */
.crn-frame::before,.crn-frame::after,.wait-frame::before,.wait-frame::after{
  content:""; position:absolute; width:clamp(24px,5.5%,44px); aspect-ratio:1; pointer-events:none; z-index:3;
  background:
    radial-gradient(circle, #fff 0 7%, rgba(255,244,214,.6) 13%, transparent 40%),
    conic-gradient(from 0deg,
      transparent 0 6%, rgba(255,232,168,.95) 12.5%, transparent 19% 31%,
      rgba(255,232,168,.95) 37.5%, transparent 44% 56%,
      rgba(255,232,168,.95) 62.5%, transparent 69% 81%,
      rgba(255,232,168,.95) 87.5%, transparent 94%);
  opacity:0; animation:cornerSparkle 6s ease-in-out infinite; }
.crn-frame::before,.wait-frame::before{ top:30%; left:9.5%; }
.crn-frame::after, .wait-frame::after { top:30%; right:9.5%; animation-delay:3s; }
/* VALEURS MESURÉES AU PIXEL sur ui_form_frame.png : le panneau violet utilisable = 824x718 px
   sur 1091x1264 -> ces % sont le creux EXACT. Ne pas y toucher : c'est ce qui empêche tout
   débordement quelle que soit la taille du cadre. */
.crn-wrap{ position:absolute; top:33.5%; left:12.7%; right:12.7%; bottom:9.7%;
  display:flex; flex-direction:column; justify-content:center; gap:clamp(5px,1.2vw,12px);
  overflow-y:auto; overflow-x:hidden; }
/* SALLE D'ATTENTE : contenu ancré en haut, et c'est la LISTE DES JOUEURS qui scrolle en interne
   (le sélecteur de bots + les boutons du bas restent toujours visibles, plus besoin de scroller tout). */
#waiting .crn-wrap{ justify-content:flex-start; gap:clamp(5px,1.1vw,10px); }
#waiting #wait-players{ flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:3px; }
#waiting .pl-row{ padding:7px 12px; }
/* en-tête salle d'attente : les 2 barres EMPILÉES (chacune large) au lieu de côte à côte (trop petites) */
.crn-head{ display:flex; flex-direction:column; align-items:center; gap:clamp(6px,1.4vw,12px); }
/* (pas de .crn-title : le titre « NOUVELLE ROOM » est déjà dessiné dans le cadre ui/form_frame) */
.crn-infobox{ width:100%; max-width:520px; aspect-ratio:2118/336;
  background:url('assets/ui/infobox.webp') center/100% 100% no-repeat;
  display:flex; align-items:center; justify-content:center; gap:6px; color:#f3e7ff;
  font-size:clamp(12px,1.7vw,16px); font-weight:800; letter-spacing:.3px;
  white-space:nowrap; overflow:hidden; padding:0 13%; }
.crn-infobox b{ color:#ffd868; max-width:16ch; overflow:hidden; text-overflow:ellipsis; }
.crn-infobox .link{ color:#cfe0ff; font-size:.8em; }

.crn-row{ display:flex; align-items:center; gap:clamp(5px,1.1vw,10px); flex:0 0 auto; }
/* label piloté par la HAUTEUR (pas la largeur) -> lisible ET budget vertical maîtrisé
   (le panneau du cadre ne fait que ~500 px de haut pour 6 rangées). */
.crn-lbl{ flex:0 0 auto; height:clamp(52px,8vw,70px); width:auto; aspect-ratio:2056/765;
  background:left center/contain no-repeat; }
.crn-lbl-name   { background-image:url('assets/ui/lbl_name.webp'); }
.crn-lbl-vis    { background-image:url('assets/ui/lbl_vis.webp'); }
.crn-lbl-pass   { background-image:url('assets/ui/lbl_pass.webp'); }
.crn-lbl-bots   { background-image:url('assets/ui/lbl_bots.webp'); }
.crn-lbl-avatars{ background-image:url('assets/ui/lbl_avatars.webp'); }

/* champ texte : cadre sobre (pas d'asset — GPT n'a pas fourni de "champ vide" propre, les barres
   fournies ont des couronnes/gemmes aux bouts qui débordent). Liseré or fin + creux violet foncé. */
.crn-field{ flex:1 1 auto; height:clamp(44px,6.4vw,58px); border-radius:12px;
  background:linear-gradient(#1a0d2e,#241238); border:2px solid #c99a3a;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4); }
.crn-field input{ width:100%; height:100%; box-sizing:border-box;
  background:transparent; border:0; outline:0; color:#fff; font:inherit; font-weight:700;
  font-size:clamp(13px,1.9vw,16px); padding:0 14px; }
.crn-field input::placeholder{ color:#9f86c4; }

/* segments visibilité / avatars : boutons-images, hauteur de rangée fixe, .on -> image bleue */
.crn-seg{ display:flex; align-items:center; gap:clamp(5px,1.2vw,10px); flex-wrap:nowrap;
  height:clamp(40px,5.6vw,52px); flex:1 1 auto; min-width:0; justify-content:flex-start; }
.crn-seg > button{ max-width:49%; }
.crn-seg button{ border:0; padding:0; height:100%; width:auto; background:center/contain no-repeat;
  cursor:pointer; font-size:0; color:transparent; -webkit-tap-highlight-color:transparent;
  transition:transform .1s ease, filter .1s ease; }
.crn-seg button:hover{ transform:scale(1.03); filter:brightness(1.06); }
.crn-seg button:active{ transform:scale(.97); }
.crn-seg button:focus-visible{ outline:2px solid #ffd868; outline-offset:3px; }
/* UNE image par bouton. Sélection = highlight CSS (éclat + halo doré), pas une 2e image. */
/* état SÉLECTIONNÉ = or qui s'illumine (filtre CSS par-dessus l'asset, marche quelle que soit sa taille) */
@keyframes onGlow{
  0%,100%{ filter:brightness(1.2) saturate(1.35) drop-shadow(0 0 6px rgba(255,214,110,.95)) drop-shadow(0 0 15px rgba(255,190,60,.5)); }
  50%    { filter:brightness(1.3) saturate(1.55) drop-shadow(0 0 10px rgba(255,226,140,1)) drop-shadow(0 0 22px rgba(255,190,60,.68)); } }
.crn-seg button.on{ animation:onGlow 1.7s ease-in-out infinite; transform:scale(1.05); }
#cr-vis button[data-v="public"]     { aspect-ratio:1920/819; background-image:url('assets/ui/vis_public.webp'); }
#cr-vis button[data-v="private"]    { aspect-ratio:1919/820; background-image:url('assets/ui/vis_private.webp'); }
#cr-avatar button[data-v="pokemon"] { aspect-ratio:1918/820; background-image:url('assets/ui/av_pokemon.webp'); }
#cr-avatar button[data-v="people"]  { aspect-ratio:1918/820; background-image:url('assets/ui/av_people.webp'); }

/* bots 0-5 : 12 sprites (6 violets + 6 bleus), sélection unique via .on (buildBotSeg) */
.crn-seg.crn-bots{ gap:clamp(3px,0.8vw,8px); height:clamp(38px,5.2vw,50px); flex-wrap:nowrap;
  justify-content:space-between; }
.crn-bots button{ aspect-ratio:1/1; flex:0 1 auto; min-width:0; }
.crn-bots button:nth-child(1){ background-image:url('assets/ui/bot_0.webp'); }
.crn-bots button:nth-child(2){ background-image:url('assets/ui/bot_1.webp'); }
.crn-bots button:nth-child(3){ background-image:url('assets/ui/bot_2.webp'); }
.crn-bots button:nth-child(4){ background-image:url('assets/ui/bot_3.webp'); }
.crn-bots button:nth-child(5){ background-image:url('assets/ui/bot_4.webp'); }
.crn-bots button:nth-child(6){ background-image:url('assets/ui/bot_5.webp'); }
/* sélection = or qui s'illumine (une seule image par pastille) */
.crn-bots button.on{ animation:onGlow 1.7s ease-in-out infinite; transform:scale(1.1); }

/* boutons bas : état unique. `.crn-abtn` sert aussi à la salle d'attente. */
.crn-actions{ display:flex; align-items:center; justify-content:center; gap:clamp(8px,2.2vw,20px);
  height:clamp(50px,7.4vw,64px); margin-top:6px; flex-wrap:nowrap; flex:0 0 auto; }
.crn-abtn{ border:0; padding:0; height:100%; width:auto; flex:0 1 auto; min-width:0;
  background:center/contain no-repeat; cursor:pointer;
  font-size:0; color:transparent; -webkit-tap-highlight-color:transparent;
  transition:transform .1s ease, filter .1s ease; }
.crn-abtn:hover{ transform:scale(1.03); filter:brightness(1.06); }
.crn-abtn:active{ transform:scale(.975); }
.crn-abtn:focus-visible{ outline:2px solid #ffd868; outline-offset:3px; }
.crn-back{   aspect-ratio:1883/835; background-image:url('assets/ui/btn_back.webp'); }
.crn-submit{ aspect-ratio:2145/733; background-image:url('assets/ui/btn_submit.webp'); }
/* salle d'attente : boutons + labels + barre code, mêmes règles */
.wait-lead{ height:clamp(42px,6.4vw,54px); aspect-ratio:2135/736;
  background:url('assets/ui/lbl_players.webp') center/contain no-repeat; margin-bottom:2px; }
.wait-code{ width:100%; max-width:520px; aspect-ratio:2118/336; position:relative;
  background:url('assets/ui/code_bar.webp') center/100% 100% no-repeat;
  display:flex; align-items:center; justify-content:center; gap:8px; padding:0 13%;
  color:#f3e7ff; font-size:clamp(12px,1.7vw,16px); font-weight:800; letter-spacing:1px; white-space:nowrap; }
.wait-code b{ color:#ffd868; font-size:1.3em; letter-spacing:3px; }
.wait-code .link{ color:#cfe0ff; font-size:.75em; letter-spacing:0; }
#btn-ready.crn-abtn{ aspect-ratio:2135/736; background-image:url('assets/ui/btn_ready.webp'); }
#btn-ready.crn-abtn.on{ animation:onGlow 1.7s ease-in-out infinite; transform:scale(1.04); }
.wait-start{ aspect-ratio:2166/726; background-image:url('assets/ui/btn_start.webp'); }
.wait-quit{  aspect-ratio:2135/736; background-image:url('assets/ui/btn_quit.webp'); }
.link{ background:none; border:none; color:#8fb0ff; font:inherit; font-size:13px; cursor:pointer; text-decoration:underline; }
.section-title{ font-size:12px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; color:#b7c4e8;
  margin-top:2px; padding-left:9px; border-left:3px solid var(--gold); }

.field{ display:flex; flex-direction:column; gap:6px; font-weight:bold; font-size:13px; color:#9fb2dd; text-transform:uppercase; letter-spacing:.5px; }
.field input{ font:inherit; font-size:17px; font-weight:bold; color:#fff; text-transform:none; letter-spacing:0;
  background:linear-gradient(#0a1128,#0d1730); border:2px solid #33436e; border-radius:12px; padding:11px 14px; outline:none; transition:border-color .15s,box-shadow .15s; }
.field input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(242,193,74,.18); }

.seg{ display:flex; gap:6px; flex-wrap:wrap; }
.seg button{ flex:1; min-width:52px; font:inherit; font-weight:bold; font-size:14px; color:#cdd8f0; cursor:pointer;
  background:linear-gradient(#101c3c,#0a1226); border:2px solid #33436e; border-radius:11px; padding:10px 4px; transition:all .12s; }
.seg button.on{ background:linear-gradient(#3f6ad8,#2646a0); border-color:#8fb0ff; color:#fff;
  box-shadow:0 3px 10px rgba(45,90,210,.45), inset 0 1px 0 rgba(255,255,255,.2); }
.seg button:active{ transform:translateY(1px); }

.big-btn{ font:inherit; font-weight:900; font-size:18px; color:#241a00; letter-spacing:.5px; cursor:pointer;
  background:linear-gradient(#ffe38c,#f2b53a); border:none; border-radius:13px; padding:15px 20px;
  box-shadow:0 4px 0 #b07d10, 0 8px 18px rgba(242,193,78,.25), inset 0 1px 0 rgba(255,255,255,.5); transition:transform .1s; }
.big-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #b07d10; }
.ghost-btn{ font:inherit; font-weight:bold; font-size:15px; color:#cdd8f0; cursor:pointer;
  background:linear-gradient(#182848,#0d1730); border:2px solid #33436e; border-radius:12px; padding:13px 16px; transition:border-color .15s; }
.ghost-btn:hover{ border-color:#5a72ab; }
.ghost-btn.small{ padding:8px 12px; font-size:13px; }

/* (ancien style CSS de #btn-ready retiré : c'est un bouton-image `ui_btn_ready.png` maintenant,
   son `background:` gradient écrasait le background-size/repeat -> image tuilée invisible.) */
.row{ display:flex; gap:10px; align-items:stretch; } .row .big-btn{ flex:1; }
.lobby-actions{ display:flex; gap:8px; } .lobby-actions .big-btn{ flex:1; }

.room-list{ display:flex; flex-direction:column; gap:8px; min-height:40px; }
.room-row{ display:flex; align-items:center; gap:10px; background:linear-gradient(#101c3c,#0a1226); border:2px solid #2a3a5e; border-radius:12px; padding:11px 13px; cursor:pointer; transition:border-color .12s,transform .12s; }
.room-row:hover{ border-color:#8fb0ff; transform:translateY(-1px); }
.room-row .rname{ font-weight:bold; flex:1; } .room-row .rmeta{ font-size:13px; color:#9fb2dd; font-variant-numeric:tabular-nums; } .room-row .rlock{ color:var(--gold); }
.room-row.playing{ opacity:.55; } .empty-note{ color:#7f8db0; font-size:14px; text-align:center; padding:14px; }

.code-box{ font-size:14px; color:#9fb2dd; } .code-box b{ color:var(--gold); font-size:19px; letter-spacing:3px; text-shadow:0 0 12px rgba(242,193,78,.4); }
.player-list{ display:flex; flex-direction:column; gap:7px; }
.pl-row{ display:flex; align-items:center; gap:10px; background:linear-gradient(#2a1848,#1b0f31); border:2px solid #4a2f7a; border-radius:11px; padding:10px 13px; }
.pl-row .dot{ width:9px; height:9px; border-radius:50%; background:#5ad27a; box-shadow:0 0 6px rgba(90,210,122,.7); } .pl-row.bot .dot{ background:#a884d8; box-shadow:none; }
.pl-row .pn{ font-weight:bold; flex:1; color:#f3e7ff; }
.pl-row.bot .pn{ color:#c9b8e6; }
.pl-row .tag{ font-size:11px; font-weight:bold; text-transform:uppercase; letter-spacing:.4px; color:#1c1400;
  background:linear-gradient(#ffe38c,#f2b53a); padding:3px 8px; border-radius:20px; }
.pl-row .tag:empty{ display:none; } /* pas de pastille vide pour les autres joueurs (sans tag "toi"/"hôte") */
.pl-row .ready-tag{ font-size:11px; font-weight:bold; text-transform:uppercase; letter-spacing:.4px; color:#0a2414;
  background:linear-gradient(#7bebac,#2fa968); padding:3px 8px; border-radius:20px; }
.note{ font-size:13px; color:#ffcf6b; min-height:16px; text-align:center; }

.host-only{ display:none !important; }
body.is-host .host-only{ display:flex !important; }

#toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:100; background:#b0413e; color:#fff; font-weight:bold; padding:12px 20px; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.5); }

/* confirmation maison (remplace confirm() natif du navigateur, trop "fenêtre système") */
#confirm-modal,#join-modal,#prompt-modal{ position:fixed; inset:0; z-index:200; background:rgba(3,7,18,.8); display:flex; align-items:center; justify-content:center; padding:20px; }
#confirm-modal[hidden],#join-modal[hidden],#prompt-modal[hidden]{ display:none; }
.confirm-box{ background:linear-gradient(#241238,#160a26); border:2px solid #c99a3a; border-radius:16px;
  padding:24px 28px; max-width:340px; width:100%; text-align:center;
  box-shadow:0 16px 50px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); }
.confirm-box p{ color:#ffd868; font-size:17px; font-weight:800; letter-spacing:.3px; margin:0 0 18px; }
.confirm-actions{ display:flex; gap:10px; justify-content:center; }
.confirm-actions button{ flex:1; }
.join-box input{ width:100%; box-sizing:border-box; margin:0 0 12px; font:inherit; font-weight:700;
  font-size:16px; color:#fff; text-align:center; letter-spacing:1px;
  background:linear-gradient(#1a0d2e,#241238); border:2px solid #7a5a2e; border-radius:11px;
  padding:12px 14px; outline:none; transition:border-color .15s, box-shadow .15s; }
.join-box #join-code{ text-transform:uppercase; letter-spacing:4px; font-size:20px; }
.join-box input::placeholder{ color:#9f86c4; letter-spacing:normal; text-transform:none; }
.join-box input:focus{ border-color:#ffd868; box-shadow:0 0 0 3px rgba(255,216,104,.2); }
#toast[hidden]{ display:none; }

/* le jeu passe au-dessus du fond */
#stage{ position:relative; z-index:1; } #stage[hidden]{ display:none; }
#bottombar{ position:fixed; left:0; right:0; bottom:0; z-index:5; } #bottombar[hidden]{ display:none; }

/* réglage du son (fixe, coin haut-droit) */
#audio-ctrl{ position:fixed; top:10px; right:12px; z-index:60; display:flex; align-items:center; gap:8px;
  background:linear-gradient(#241238,#160a26); border:2px solid #c99a3a; border-radius:26px;
  padding:7px 14px 7px 10px; backdrop-filter:blur(4px);
  box-shadow:0 6px 20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); }
#mute-btn{ background:none; border:none; font-size:18px; cursor:pointer; line-height:1; padding:0; }
/* le curseur = une grosse Pokéball au lieu du rond jaune natif (poke-ball.png, sprite d'item officiel PokeAPI,
   même source que les avatars pXX.png du jeu) : piste custom fine + thumb image sur les 2 moteurs. */
#audio-ctrl input[type=range]{ width:90px; cursor:pointer; -webkit-appearance:none; appearance:none; background:transparent; height:34px; }
#audio-ctrl input[type=range]::-webkit-slider-runnable-track{ height:5px; border-radius:3px; background:linear-gradient(90deg,#7a3cc8,#f0a92a); }
#audio-ctrl input[type=range]::-moz-range-track{ height:5px; border-radius:3px; background:linear-gradient(90deg,#7a3cc8,#f0a92a); }
#audio-ctrl input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:34px; height:34px; margin-top:-15px;
  background:url('assets/pokeball.webp') center/contain no-repeat; border:none; cursor:pointer; }
#audio-ctrl input[type=range]::-moz-range-thumb{ width:34px; height:34px; border-radius:0;
  background:url('assets/pokeball.webp') center/contain no-repeat; border:none; cursor:pointer; }
@media (max-width:520px){ #audio-ctrl input[type=range]{ width:64px; } }

/* ===== POT / bannière / combos / abattage (lot screenshots) ===== */
#pot .pot-label{ font-size:2cqw; letter-spacing:.5px; opacity:.9; }

/* --- badge de classement 1er/2e/3e sur l'avatar --- */
.rank-badge{ position:absolute; z-index:4; top:-.3cqw; left:.2cqw; min-width:2.6cqw; height:2.1cqw; padding:0 .5cqw;
  display:flex; align-items:center; justify-content:center; font-size:1.25cqw; font-weight:900; color:#fff;
  border-radius:4cqw; background:linear-gradient(#3c4658,#232a38); border:.18cqw solid rgba(255,255,255,.28);
  box-shadow:0 .2cqw .5cqw rgba(0,0,0,.55); z-index:6; letter-spacing:.3px; }
.rank-badge.r1{ background:linear-gradient(#ffd85a,#e0a020); color:#3a2600; border-color:#fff0b0; }
.rank-badge.r2{ background:linear-gradient(#d8dde6,#98a1b0); color:#232833; border-color:#fff; }
.rank-badge.r3{ background:linear-gradient(#e59a5a,#b0672c); color:#2a1500; border-color:#ffd0a8; }

/* --- boîte OUTS (façon "Any A / Any 3") : outs + % regroupés à droite --- */
#outs-box{ position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); z-index:6; text-align:center;
  background:rgba(18,24,38,.85); border:.25cqw solid #6d5628; border-radius:1.2cqw; padding:.35cqw .45cqw; }
#outs-box[hidden]{ display:none; }
#outs-box .outs-title{ color:#e8c65a; font-weight:900; font-size:1cqw; letter-spacing:.5px; margin-bottom:.2cqw; }
#outs-box .outs-cards{ display:flex; gap:.4cqw; justify-content:center; }
/* la puce "Any X" a la taille d'une vraie carte QUAND IL N'Y EN A QU'UNE (la boîte reste "carte-sized") */
.out-chip{ background:linear-gradient(#f8faff,#cdd6e8); color:#182034; border-radius:.7cqw; width:4.4cqw; height:5.2cqw;
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
  box-shadow:0 .2cqw .5cqw rgba(0,0,0,.45); border:.12cqw solid rgba(255,255,255,.6); }
.out-chip .out-any{ font-size:1cqw; font-weight:700; opacity:.55; margin-bottom:.2cqw; }
.out-chip .out-rank{ font-size:2.8cqw; font-weight:900; }
/* 2 rangs (ex: tirage quinte aux 2 bouts) -> puces réduites pour que la boîte ne déborde plus dans les cases voisines */
#outs-box .outs-cards:has(.out-chip:nth-child(2)) .out-chip{ width:2.9cqw; height:3.6cqw; border-radius:.5cqw; }
#outs-box .outs-cards:has(.out-chip:nth-child(2)) .out-any{ font-size:.7cqw; margin-bottom:.1cqw; }
#outs-box .outs-cards:has(.out-chip:nth-child(2)) .out-rank{ font-size:1.8cqw; }
.out-chip .out-rank.red{ color:#d63b3b; }   /* ♥ ♦ en rouge */
#outs-box .outs-pct{ margin-top:.3cqw; color:#cfe8ff; font-weight:800; font-size:1.5cqw; letter-spacing:.3px; }

/* Roboto Condensed 700 Italic (demande explicite, calée sur le rendu du jeu de référence) : compact, incliné,
   vert/jaune très clair, lueur verte, ombre sombre pour le contour ; 2 lignes possibles pour les noms longs
   ("BRELAN" tient sur 1, mais on ne force plus le nowrap -> pas de débordement si un nom est plus long). */
#combo-banner{ position:absolute; top:9%; left:50%; transform:translate(-50%,-50%); z-index:15;
  font-family:"Roboto Condensed","Nunito",sans-serif; font-weight:700; font-style:italic; font-size:4.6cqw; line-height:1.05;
  letter-spacing:1px; text-align:center; max-width:70cqw;
  color:#e9ffb0; padding:.4cqw 2cqw;
  text-shadow:0 0 1.2cqw #6bff5a, 0 .2cqw 0 #143a0c, 0 .05cqw .3cqw #000;
  animation:comboPop .4s cubic-bezier(.3,1.6,.5,1); }
#combo-banner[hidden]{ display:none; }
/* pot partagé (égalité) : "PARTAGE" en violet au lieu du vert habituel */
#combo-banner.split{ text-shadow:0 0 2cqw #b98bff, 0 .2cqw 0 #2a1440, 0 .05cqw .3cqw #000; color:#f0e0ff; }
@keyframes comboPop{ 0%{ transform:translate(-50%,-50%) scale(.4); opacity:0 } 100%{ transform:translate(-50%,-50%) scale(1); opacity:1 } }

/* bannière ALL IN dorée (transitoire) */
#allin-banner{ position:absolute; top:26%; left:50%; transform:translate(-50%,-50%); z-index:16; text-align:center;
  display:flex; flex-direction:column; align-items:center; line-height:1; pointer-events:none;
  font-weight:900; letter-spacing:2px; color:#ffe27a; font-size:6cqw; white-space:nowrap;
  text-shadow:0 0 2.4cqw #ff9c1a, 0 .3cqw 0 #6b3d00, 0 0 .8cqw #000; -webkit-text-stroke:.28cqw #7a4d00; }
#allin-banner em{ font-style:normal; font-size:2.6cqw; letter-spacing:1px; color:#fff; margin-top:.4cqw; text-shadow:0 .2cqw .6cqw #000; }
#allin-banner[hidden]{ display:none; }
#allin-banner.show{ animation:allinPop .45s cubic-bezier(.3,1.7,.5,1); }
@keyframes allinPop{ 0%{ transform:translate(-50%,-50%) scale(.8) } 55%{ transform:translate(-50%,-50%) scale(1.1) } 100%{ transform:translate(-50%,-50%) scale(1) } }

/* cartes gagnantes surélevées + aura floue COLLÉE derrière (pas un anneau avec un espace autour) ; couleur
   selon la vraie combinaison (bleu paire/double, vert brelan, doré quinte+, cyan carte haute) -> plus jamais
   "double paire" affiché en doré (bug signalé : le win était câblé en doré fixe, peu importe la main réelle).
   perdantes bien plus grisées/assombries pour créer un vrai contraste. */
.card{ position:relative; transition:transform .35s ease; }
.card.win{ transform:translateY(-1.7cqw) scale(1.08); z-index:6; animation:winFloat 1.8s ease-in-out infinite; }
/* pseudo-élément à la taille de la carte, légèrement plus grand, flouté : la couleur "baigne" sous la carte
   et déborde un peu sur les bords, sans le trou entre le bord et le trait qu'un simple box-shadow crée. */
.card.win::before{ content:''; position:absolute; inset:-8%; z-index:-1; border-radius:1.6cqw;
  background:#5ab0ff; filter:blur(1cqw); opacity:.9; }                                  /* paire/double -> bleu */
.card.win.win-high::before{ background:#8fd8ff; opacity:.7; filter:blur(.7cqw); }        /* carte haute -> cyan léger */
.card.win.win-trips::before{ background:#37d472; }                                       /* brelan -> vert */
.card.win.win-strong::before{ background:#ffd863; }                                      /* quinte+ -> doré */
@keyframes winFloat{ 0%,100%{ transform:translateY(-1.7cqw) scale(1.08); } 50%{ transform:translateY(-2.3cqw) scale(1.08); } }
.card.dim{ opacity:.55; }
.card.dim .card-inner{ filter:grayscale(1) brightness(.35) contrast(.85); }

/* label "Winner !" sur le siège gagnant */
.seat.winner .plate{ border-color:var(--gold); box-shadow:0 0 1.2cqw rgba(242,193,74,.6); }
.seat.winner .avatar{ border-color:var(--gold); box-shadow:0 0 1.4cqw .3cqw rgba(242,193,74,.8); }
/* "WINNER !" + pseudo, TOUT EN HAUT du pod (au-dessus du rang / bouton dealer, plus caché derrière les
   cartes ni coincé dans le rond de l'avatar) */
.winner-label{ display:none; position:absolute; left:50%; bottom:100%; transform:translate(-50%,-6px); z-index:9;
  background:linear-gradient(#ffdf7a,#f2b53a); color:#241a00; font-weight:900; letter-spacing:.3px;
  padding:.3cqw 1cqw; border-radius:1cqw; white-space:nowrap; box-shadow:0 .35cqw 1cqw rgba(0,0,0,.65);
  text-align:center; line-height:1.3; }
.winner-label b{ display:block; font-size:1.6cqw; }
.winner-label span{ display:block; font-size:1.1cqw; opacity:.8; font-weight:700; }
.seat.winner .winner-label{ display:block; }
/* sièges de la rangée du haut (pos-3/pos-4) : pas assez de place au-dessus -> le label sortait de l'écran.
   On l'affiche EN DESSOUS du pod pour ces deux-là (il y a de la place avant les cartes communes). */
.seat.pos-3 .winner-label, .seat.pos-4 .winner-label{ bottom:auto; top:100%; transform:translate(-50%,6px); }
/* "PERDU" en rouge, même position/logique que WINNER (top/bottom selon la rangée) */
.loser-label{ display:none; position:absolute; left:50%; bottom:100%; transform:translate(-50%,-6px); z-index:9;
  background:linear-gradient(#ff8a7a,#c8382a); color:#3a0a04; font-weight:900; letter-spacing:.3px;
  padding:.3cqw 1cqw; border-radius:1cqw; white-space:nowrap; box-shadow:0 .35cqw 1cqw rgba(0,0,0,.65);
  text-align:center; line-height:1.3; }
.loser-label b{ display:block; font-size:1.6cqw; }
.loser-label span{ display:block; font-size:1.1cqw; opacity:.8; font-weight:700; }
.seat.loser .loser-label{ display:block; }
.seat.pos-3 .loser-label, .seat.pos-4 .loser-label{ bottom:auto; top:100%; transform:translate(-50%,6px); }

/* bouton "?" -> charte des combinaisons (agrandis, comme les autres boutons du bas) */
#btn-combos{ position:fixed; left:14px; bottom:14px; z-index:60; width:104px; height:104px; border-radius:50%;
  background:rgba(6,12,30,.75); border:1px solid #6d5628; color:var(--gold); font-weight:900; font-size:48px; cursor:pointer;
  backdrop-filter:blur(4px); box-shadow:0 3px 10px rgba(0,0,0,.5); }
#btn-combos:active{ transform:translateY(1px); }
/* en bas à gauche, taille fixe généreuse : peut déborder sur le plateau (un clic n'importe où la ferme,
   donc pas besoin de la contraindre à la marge — la lisibilité prime sur le débordement). */
/* ===== PANNEAU DE RÈGLES (3 onglets) ===== */
.link-rules{ background:none; border:none; font:inherit; font-size:14px; color:#a9bce6; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; padding:6px; }
.link-rules:hover{ color:var(--gold); }
#rules-modal{ position:fixed; inset:0; z-index:200; background:rgba(3,7,18,.8); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:18px; }
#rules-modal[hidden]{ display:none; }
.rules-box{ position:relative; width:min(560px,96vw); max-height:88vh; display:flex; flex-direction:column;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.05), transparent 45%),
    linear-gradient(165deg,rgba(22,32,64,.98),rgba(6,11,26,.99));
  border:1px solid rgba(242,193,74,.3); border-radius:16px; padding:20px;
  box-shadow:0 22px 60px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05); }
.rules-box::before{ content:""; position:absolute; top:0; left:16px; right:16px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.8; z-index:1; }
.rules-box::after{ content:"♥"; position:absolute; bottom:-14px; right:6px; font-family:Georgia,serif;
  font-size:min(220px,58vw); line-height:1; color:var(--gold); opacity:.045; pointer-events:none; z-index:0; }
.rules-box > *{ position:relative; z-index:1; }
.rules-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-bottom:1px solid rgba(242,193,74,.16); padding-bottom:12px; margin-bottom:12px; }
.rules-tabs{ margin-bottom:14px; }
.rules-body{ overflow-y:auto; padding-right:4px; }
.rules-lead{ color:#cdd8f0; font-size:15px; line-height:1.55; margin:0 0 16px; }
.rules-list{ margin:0; }
/* puce = un jeton de poker miniature dessiné en CSS (cercle + tranche cannelée), pas un point générique —
   le thème doit se voir jusque dans le détail typographique, pas juste sur la photo de fond. */
.rules-list dt{ font-weight:bold; font-size:13px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--gold); margin-top:14px; display:flex; align-items:center; gap:7px; }
.rules-list dt::before{ content:""; width:10px; height:10px; border-radius:50%; flex:0 0 auto;
  background:
    repeating-conic-gradient(#1c1400 0deg 30deg, var(--gold) 30deg 60deg);
  box-shadow:0 0 0 1px rgba(0,0,0,.5), inset 0 0 0 2px rgba(6,11,26,.9); }
.rules-list dt:first-child{ margin-top:0; }
.rules-list dd{ margin:5px 0 0; font-size:14.5px; line-height:1.5; color:#b9c6e4; }
.rules-list dd b{ color:#eaf1ff; }
.rules-body img{ display:block; width:100%; height:auto; border-radius:10px; border:1px solid #6d5628; }

/* boutons de mise rapide ×2 ×3 ×4 */
.quick{ background:#5a3fa0; padding:12px 10px; min-width:42px; font-size:clamp(13px,3.4vw,15px); }
.quick:active{ transform:translateY(2px); }

/* ===== CHAT préfait + bouton SHOW ===== */
#btn-chat{ position:fixed; left:130px; bottom:14px; z-index:60; width:104px; height:104px; border-radius:50%;
  background:rgba(6,12,30,.75); border:1px solid #6d5628; font-size:48px; cursor:pointer; backdrop-filter:blur(4px); box-shadow:0 3px 10px rgba(0,0,0,.5); }
#btn-chat:active{ transform:translateY(1px); }
#chat-menu{ position:fixed; left:12px; bottom:128px; z-index:70; display:grid; grid-template-columns:1fr 1fr; gap:6px;
  background:rgba(8,16,38,.96); border:1px solid #33436e; border-radius:12px; padding:8px; box-shadow:0 8px 30px rgba(0,0,0,.65); width:min(320px,80vw); }
#chat-menu[hidden]{ display:none; }
#chat-menu button{ font:inherit; font-weight:bold; font-size:13px; color:#e6ecff; background:#12203f; border:1px solid #2a3a5e; border-radius:8px; padding:9px 8px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#chat-menu button:active{ transform:translateY(1px); }
/* bouton + menu emotes (à côté du chat) — reteinté violet pour se distinguer des 2 autres (?/💬, neutres) */
#btn-emote{ position:fixed; left:246px; bottom:14px; z-index:60; width:104px; height:104px; border-radius:50%;
  background:none; border:none; padding:0; cursor:pointer; filter:drop-shadow(0 3px 8px rgba(0,0,0,.55)); }
#btn-emote img{ display:block; width:100%; height:100%; border-radius:50%; }
#btn-emote:active{ transform:translateY(1px); }
#emote-menu{ position:fixed; left:12px; bottom:128px; z-index:70; display:flex; flex-wrap:wrap; gap:6px; max-width:440px; max-height:70vh; overflow-y:auto;
  background:rgba(8,16,38,.96); border:1px solid #33436e; border-radius:12px; padding:8px; box-shadow:0 8px 30px rgba(0,0,0,.65); }
#emote-menu[hidden]{ display:none; }
/* boutons = la vignette de l'ASSET réel (voir emoteThumb dans le JS), pas du texte ; le nom reste en tooltip (title) */
#emote-menu button{ font:inherit; padding:3px; cursor:pointer; background:#12203f; border:1px solid #2a3a5e; border-radius:8px; line-height:0; }
#emote-menu button:active{ transform:translateY(1px); }
.emote-thumb{ display:block; border-radius:6px; background-repeat:no-repeat; }
body:not(.playing) #btn-emote, body:not(.playing) #emote-menu{ display:none; }   /* emotes seulement en jeu */
body:not(.playing) #btn-combos, body:not(.playing) #combos-overlay,
body:not(.playing) #btn-chat, body:not(.playing) #chat-menu{ display:none; }     /* idem : combos/chat n'ont de sens qu'en jeu, pas au menu */

/* ===== ÉCRANS ÉTROITS (téléphone) =====
   Les 3 boutons ronds sont en px FIXES : à 104px + écarts ils occupent ~350px, soit toute la largeur d'un
   téléphone de 375px (ils passaient par-dessus les boutons d'action). On les redescend à 62px, on resserre
   les écarts, et on contraint les menus qui débordaient (emote 440px, chat 320px). */
/* ============================================================
   MOBILE — menus (≤ 640 px). Le cadre portrait garde son ratio mais devient PLUS haut
   (plus de place verticale sur un tél), le creux (`.crn-wrap`) reste calé dessus, et on
   compacte toutes les rangées. Le plateau de jeu, lui, demande le paysage (overlay #rotate-hint).
   ============================================================ */
@media (max-width:640px){
  #lobby{ padding-top:50px; } /* dégage le réglage du son (fixe, coin haut-droit) */
  .lobby-wrap{ width:98vw; gap:4px; }
  .lobby-top{ flex-direction:column-reverse; align-items:center; gap:6px; padding:0; }
  #logo-lobby img{ height:64px; }
  #salon-pill{ width:100%; min-width:0; font-size:11px; padding:11px 13%; height:40px; box-sizing:border-box; }
  .lobby-frame{ width:98vw; padding:15vw 9vw 7vw; gap:10px; }
  .lobby-actions{ height:auto; flex-wrap:wrap; gap:10px; }
  .lobby-actions .asset-btn{ flex:1 1 46%; max-width:none; height:46px; }
  .abtn-refresh{ height:38px; }
  .lobby-frame .room-list{ max-height:34vh; }

  .crn-frame,.wait-frame{ width:97vw; aspect-ratio:53/100; }
  .crn-wrap{ gap:5px; justify-content:flex-start; }
  .crn-row{ gap:5px; }
  .crn-lbl{ height:28px; width:auto; }
  .crn-field{ height:32px; }
  .crn-field input{ font-size:13px; padding:0 10px; }
  .crn-seg{ height:30px; gap:4px; }
  .crn-seg.crn-bots{ flex-wrap:nowrap; justify-content:space-between; }
  .crn-bots button{ flex:1 1 0; min-width:0; width:auto; aspect-ratio:1; }
  .crn-actions{ height:34px; flex-wrap:nowrap; gap:6px; margin-top:2px; }
  .crn-abtn{ height:100%; flex:1 1 0; min-width:0; }

  /* salle d'attente : barres d'en-tête plus fines, liste qui scrolle sur une hauteur bornée */
  .crn-head{ gap:4px; }
  .crn-infobox,.wait-code{ max-width:100%; font-size:10px; height:26px!important; aspect-ratio:2118/280!important; }
  .wait-lead{ height:26px; }
  #waiting .crn-wrap{ gap:4px; }
  #waiting #wait-players{ flex:0 0 auto; min-height:56px; max-height:16vh; }
  #waiting .pl-row{ padding:5px 9px; font-size:12px; gap:6px; }
  #waiting .note{ font-size:11px; min-height:12px; }
}
/* plateau de jeu : demande le paysage sur mobile portrait (les sièges sont calés sur du 16:9) */
#rotate-hint{ display:none; }
@media (orientation:portrait) and (max-width:900px){
  body.playing #rotate-hint{ position:fixed; inset:0; z-index:9998; display:flex;
    flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center;
    background:linear-gradient(#160a26,#0a0713); color:#f3e7ff; padding:32px; }
  body.playing #rotate-hint .rh-icon{ font-size:64px; animation:rhSpin 2.4s ease-in-out infinite; }
  body.playing #rotate-hint p{ font-size:18px; font-weight:800; max-width:280px; line-height:1.4; }
  body.playing #bottombar{ display:none; }
}
@keyframes rhSpin{ 0%,40%{ transform:rotate(0); } 60%,100%{ transform:rotate(90deg); } }

/* ============================================================
   MOBILE EN PAYSAGE (viewport court, ex. téléphone couché ~375-430px de haut) : la barre du bas
   + les 3 boutons ronds prenaient jusqu'à 40% de la hauteur -> le plateau (16:9) n'avait presque
   plus de place et s'affichait minuscule avec de grandes bandes noires. On compacte tout ce qui
   est en bas pour rendre la hauteur au plateau (qui, lui, scale déjà tout seul via `cqw`).
   ============================================================ */
@media (orientation:landscape) and (max-height:500px){
  #hand-info{ min-height:0; padding:2px 10px; gap:8px; font-size:11px; }
  #hand-name:not(:empty){ padding:2px 10px; font-size:13px; }
  #controls{ min-height:0; padding:4px 6px calc(4px + env(safe-area-inset-bottom)) 160px; gap:5px; } /* boutons ronds réduits à 46px ici -> moins de place à réserver */
  .act{ padding:6px 10px; font-size:12px; border-radius:8px; border-width:1px; }
  .pa{ padding:5px 9px; font-size:11px; gap:5px; }
  .pa .pa-box{ width:11px; height:11px; }
  #raise-slider{ width:min(18vw,90px); }
  #raise-amount{ font-size:12px; min-width:38px; }
  #btn-leave-game{ padding:6px 12px; font-size:12px; }
  #conn{ font-size:12px; }

  #btn-combos,#btn-chat,#btn-emote{ width:46px; height:46px; bottom:4px; }
  #btn-combos{ left:4px; font-size:20px; }
  #btn-chat{ left:54px; font-size:18px; }
  #btn-emote{ left:104px; }
  #emote-menu,#chat-menu,#combos-overlay{ bottom:56px; max-height:70vh; }

  #audio-ctrl{ top:4px; right:6px; padding:4px 10px 4px 6px; }
  #audio-ctrl input[type=range]{ width:50px; }
}

@media (max-width:560px){
  #controls{ padding-left:220px; } /* boutons ronds à 62px ici (left jusqu'à 150+62) */
  #btn-combos, #btn-chat, #btn-emote{ width:62px; height:62px; bottom:10px; }
  #btn-combos{ left:10px; } #btn-chat{ left:80px; } #btn-emote{ left:150px; }
  #btn-combos{ font-size:30px; } #btn-chat{ font-size:28px; }
  #emote-menu, #chat-menu, #combos-overlay{ bottom:80px; }
  #emote-menu{ max-width:calc(100vw - 24px); max-height:56vh; }
  #chat-menu{ width:calc(100vw - 24px); }
  #combos-overlay{ width:calc(100vw - 20px); }
  /* la taille des vignettes vient du JS (emoteThumb) : la forcer ici casserait le calcul du sprite */
}
.cigare-emote{ position:fixed; z-index:40; pointer-events:none; background-repeat:no-repeat; filter:drop-shadow(0 4px 6px rgba(0,0,0,.55)); }
/* réaction Watto : flotte AU-DESSUS du pod entier, entière (pas de border-radius qui la couperait en
   cercle). Ajoutée à document.body (hors de #board qui a container-type:size) -> PAS d'unités cqw ici,
   elles calculent à 0 hors contexte de container query. */
.watto-emote{ position:fixed; z-index:41; pointer-events:none; background-repeat:no-repeat;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)); }

/* ---------- emote Pistolet : arme (près du tireur, orientée vers la cible) + balle + impact + douilles ---------- */
.colt-emote{ position:fixed; z-index:42; pointer-events:none; background-repeat:no-repeat; filter:drop-shadow(0 3px 6px rgba(0,0,0,.55)); }
.bullet-emote{ position:fixed; z-index:43; pointer-events:none; background-repeat:no-repeat; transform-origin:center; }
.impact-emote{ position:fixed; z-index:44; pointer-events:none; background-repeat:no-repeat; transition:opacity .2s; }
/* "BLUFF ?" — texte rouge brillant seul, pas de cadre/fond, après une baffe, sur l'avatar de la cible */
.bluff-label{ position:fixed; z-index:45; pointer-events:none; transform:translate(-50%,-50%) scale(.6); opacity:0;
  color:#ff3b3b; font-weight:900; font-size:34px; letter-spacing:.5px; white-space:nowrap;
  text-shadow:0 0 12px rgba(255,59,59,.9), 0 0 4px #fff, 0 2px 4px rgba(0,0,0,.7);
  transition:opacity .18s, transform .18s; }
.bluff-label.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.casing-emote{ position:fixed; z-index:41; pointer-events:none; background-repeat:no-repeat; }
/* joueur pré-sélectionné comme cible (clic joueur -> clic emote pistolet) */
.seat.pistol-target .avatar{ box-shadow:0 0 0 .28cqw #ff4d4d, 0 0 1.2cqw .2cqw rgba(255,60,60,.7); }

.chat-bubble{ position:absolute; left:50%; top:-1cqw; transform:translate(-50%,-100%); z-index:9;
  background:#fff; color:#1a2440; font-weight:bold; font-size:2.2cqw; padding:.55cqw 1.5cqw; border-radius:2.6cqw; white-space:nowrap;
  box-shadow:0 .4cqw 1.1cqw rgba(0,0,0,.55); animation:comboPop .25s ease; }
.chat-bubble::after{ content:""; position:absolute; bottom:-1cqw; left:50%; transform:translateX(-50%); border:1cqw solid transparent; border-top-color:#fff; border-bottom:0; }
.chat-bubble[hidden]{ display:none; }
/* sièges du HAUT (pos-3/pos-4) : la bulle "au-dessus" sort du plateau (invisible, coupée en haut) -> sur
   le côté à la place, vers l'intérieur de la table (pas vers le bord de l'écran). */
.seat.pos-3 .chat-bubble, .seat.pos-4 .chat-bubble{ top:50%; bottom:auto; transform:translateY(-50%); }
.seat.pos-3 .chat-bubble{ left:calc(100% + 1cqw); }
.seat.pos-4 .chat-bubble{ left:auto; right:calc(100% + 1cqw); }
.seat.pos-3 .chat-bubble::after, .seat.pos-4 .chat-bubble::after{ bottom:auto; top:50%; left:auto; transform:translateY(-50%); border-top-color:transparent; }
.seat.pos-3 .chat-bubble::after{ right:100%; border-right-color:#fff; }
.seat.pos-4 .chat-bubble::after{ left:100%; border-left-color:#fff; }

.act.show{ background:#2f9e6b; }

/* bouton Montrer : état pré-sélectionné */
.act.show.on{ background:#1e7a4e; box-shadow:0 3px 0 rgba(0,0,0,.35), inset 0 0 0 2px #7fe0a8; }