:root{
  --felt:#0f6040; --felt-d:#063a1e; --felt-l:#1a8050; --felt-rail:#0a0f08;
  --accent-rail:rgba(200,140,40,.55); --accent-rail-soft:rgba(200,140,40,.5);
  --gold:#e8c050; --gold-d:#b07820; --gold-soft:#f4e098; --gold-deep:#7a5010;
  --cream:#fbf6ea; --ink:#1e1a14; --red:#d03a2a;
  --line:rgba(243,220,160,.28);
  --shadow:0 12px 28px rgba(0,0,0,.55);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:'Outfit',system-ui,sans-serif;color:var(--cream);
  background:radial-gradient(ellipse at 50% 0%, #1a2a14, #040804);
  min-height:100dvh;overflow:hidden;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.app{
  height:100dvh;display:flex;flex-direction:column;position:relative;overflow:hidden;
  background:
    radial-gradient(140% 80% at 50% 5%, var(--felt-l), transparent 50%),
    radial-gradient(180% 130% at 50% 130%, var(--felt-d), var(--felt) 55%);
  background-color:var(--felt);
  /* Rail bois autour de la table */
  box-shadow:
    inset 0 0 0 6px #1c0e00,
    inset 0 0 0 9px var(--accent-rail),
    inset 0 0 0 12px #1c0e00,
    inset 0 0 100px rgba(0,0,0,.55);
}
h1,h2,h3{font-family:'Cinzel',serif;margin:0;letter-spacing:.04em}
button{font-family:inherit;cursor:pointer;border:none}
.hidden{display:none!important}

/* boutons type jeu */
.btn{
  position:relative;background:linear-gradient(180deg,var(--gold-soft) 0%,var(--gold) 45%,var(--gold-d) 100%);
  color:#4a380f;font-weight:800;font-size:1.02rem;border-radius:16px;padding:16px 18px;
  box-shadow:0 5px 0 var(--gold-deep),0 10px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.6);
  width:100%;transition:transform .07s ease,box-shadow .07s ease;letter-spacing:.02em;text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--gold-deep),0 4px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.ghost{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));color:var(--cream);
  border:1px solid var(--line);box-shadow:0 4px 0 rgba(0,0,0,.25),0 8px 16px rgba(0,0,0,.3);text-shadow:none}
.btn.ghost:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.btn.dark{background:linear-gradient(180deg,#15623f,#0c3f28);color:var(--gold-soft);border:1px solid var(--line);box-shadow:0 4px 0 #06281a,0 8px 16px rgba(0,0,0,.35)}
.btn.dark:active{transform:translateY(3px);box-shadow:0 1px 0 #06281a}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.sm{padding:13px 14px;font-size:.94rem;border-radius:14px}
.btn.big{font-size:1.12rem;padding:17px 16px}
.btn.gin{background:linear-gradient(180deg,#8fe6ad,#39b36a 60%,#2a8f52);color:#0a3320;border:none;
  box-shadow:0 5px 0 #1f6e3e,0 10px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.55)}
.btn.gin:active{transform:translateY(4px);box-shadow:0 1px 0 #1f6e3e}
.btn.knock{background:linear-gradient(180deg,#f3c06a,#e0853a 60%,#c46a25);color:#3a1f06;border:none;
  box-shadow:0 5px 0 #9c4f17,0 10px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.55)}
.btn.knock:active{transform:translateY(4px);box-shadow:0 1px 0 #9c4f17}

/* accueil */
.center{flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding:20px;gap:14px;max-width:460px;margin:0 auto;width:100%;overflow-y:auto}
.center::before{content:'';margin-top:auto}
.center::after{content:'';margin-bottom:auto}
.brand{text-align:center;margin-bottom:4px}
.brand .sub{letter-spacing:.34em;text-transform:uppercase;font-size:.7rem;color:var(--gold-soft);opacity:.9}
.brand h1{font-size:2.7rem;color:var(--gold);line-height:1;
  text-shadow:0 2px 0 var(--gold-deep),0 4px 10px rgba(0,0,0,.4)}
.brand .suits{font-size:1.15rem;letter-spacing:.32em;margin-top:10px}
.brand .suits .r{color:var(--red)}
.panel{background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.14));border:1px solid var(--line);
  border-radius:22px;padding:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 22px rgba(0,0,0,.3)}
.panel h3{font-size:1.02rem;color:var(--gold-soft);margin-bottom:12px;display:flex;align-items:center;gap:8px}
label{display:block;font-size:.78rem;opacity:.82;margin:10px 0 5px}
input{width:100%;padding:14px;border-radius:13px;border:1px solid var(--line);background:rgba(0,0,0,.32);
  color:var(--cream);font-size:1.05rem;font-family:inherit;outline:none}
input:focus{border-color:var(--gold)}
input::placeholder{color:rgba(251,246,234,.4)}
input.code{text-transform:uppercase;letter-spacing:.4em;text-align:center;font-family:'Cinzel';font-size:1.5rem;color:var(--gold-soft)}
.divider{display:flex;align-items:center;gap:12px;opacity:.5;font-size:.78rem;margin:2px 0}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}
.codebox{text-align:center}
.codebox .code{font-family:'Cinzel';font-size:3.4rem;color:var(--gold);letter-spacing:.5em;padding-left:.5em;margin:8px 0;
  text-shadow:0 2px 0 var(--gold-deep),0 5px 14px rgba(0,0,0,.4)}
.pulse{width:14px;height:14px;border-radius:50%;background:var(--gold);margin:0 auto;box-shadow:0 0 0 0 rgba(232,190,99,.6);animation:pulse 1.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,190,99,.55);transform:scale(.85)}70%{box-shadow:0 0 0 16px rgba(232,190,99,0);transform:scale(1.1)}100%{box-shadow:0 0 0 0 rgba(232,190,99,0);transform:scale(.85)}}

/* barre du haut + joueurs */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;gap:10px}
.who{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.who .meta{min-width:0;overflow:hidden}
.who .meta .nm,.who .meta .sc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;
  font-family:'Cinzel';font-weight:700;font-size:1.05rem;color:#4a380f;
  background:radial-gradient(circle at 35% 30%,var(--gold-soft),var(--gold) 55%,var(--gold-d));
  box-shadow:0 0 0 2px var(--felt-rail),0 0 0 4px var(--gold-d),0 4px 10px rgba(0,0,0,.4);flex:none}
.who .meta{min-width:0}
.who .nm{font-weight:700;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who .sc{font-size:.74rem;opacity:.8}
.turnchip{font-size:.74rem;padding:7px 13px;border-radius:999px;border:1px solid var(--line);
  background:rgba(0,0,0,.3);white-space:nowrap;font-weight:600}
.turnchip.on{background:linear-gradient(180deg,var(--gold-soft),var(--gold-d));color:#4a380f;border-color:transparent;
  font-weight:800;box-shadow:0 0 18px rgba(232,190,99,.55);animation:breathe 1.8s infinite}
@keyframes breathe{0%,100%{box-shadow:0 0 10px rgba(232,190,99,.4)}50%{box-shadow:0 0 22px rgba(232,190,99,.75)}}

.oppfan{display:flex;justify-content:center;height:56px;margin-top:6px;align-items:center}
.oppfan .back{width:34px;height:48px;border-radius:7px;margin-left:-19px;
  background:var(--back-pat,repeating-linear-gradient(45deg,rgba(243,220,160,.5) 0 3px,transparent 3px 7px)),
    radial-gradient(circle at 50% 40%,var(--back-l,var(--felt-l)),var(--back-d,var(--felt-d)));
  background-size:var(--back-pat-size,auto),auto;
  border:1px solid var(--gold-d);box-shadow:0 4px 9px rgba(0,0,0,.4),inset 0 0 0 2px rgba(0,0,0,.15);
  transform:rotate(var(--r,0deg))}
.oppfan .back:first-child{margin-left:0}
.stock{position:relative;
  background:var(--back-pat,repeating-linear-gradient(45deg,rgba(243,220,160,.5) 0 4px,transparent 4px 9px)),
    radial-gradient(circle at 50% 38%,var(--back-l,var(--felt-l)),var(--back-d,var(--felt-d)));
  background-size:var(--back-pat-size,auto),auto;
  border:1px solid var(--gold-d);
  box-shadow:2px 2px 0 -1px var(--felt-d),3px 3px 0 -1px var(--gold-d),5px 5px 0 -2px var(--felt-d),6px 6px 0 -2px var(--gold-d),
    0 12px 18px rgba(0,0,0,.45),inset 0 0 0 2px rgba(0,0,0,.15);
  display:flex;align-items:flex-end;justify-content:center;color:var(--gold-soft);font-size:.74rem;font-weight:700;padding-bottom:7px}
/* Dos animes (pilotes par classe body backanim-*) */
@keyframes backShimmer{0%,100%{filter:brightness(1)}50%{filter:brightness(1.55)}}
@keyframes backPulseKf{0%,100%{background-size:9px 9px,auto}50%{background-size:13px 13px,auto}}
@keyframes backTwinkle{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes backWave{0%{background-position:0 0}100%{background-position:18px 0}}
@keyframes backHalo{0%,100%{filter:brightness(.92);opacity:.85}50%{filter:brightness(1.4);opacity:1}}
body.backanim-shimmer .stock,body.backanim-shimmer .oppfan .back{animation:backShimmer 2s ease-in-out infinite}
body.backanim-backpulse .stock,body.backanim-backpulse .oppfan .back{animation:backPulseKf 1.8s ease-in-out infinite}
body.backanim-twinkle .stock,body.backanim-twinkle .oppfan .back{animation:backTwinkle 1.6s ease-in-out infinite}
body.backanim-wave .stock,body.backanim-wave .oppfan .back{animation:backWave 1.4s linear infinite}
body.backanim-halo .stock,body.backanim-halo .oppfan .back{animation:backHalo 2.2s ease-in-out infinite}
/* apercu anime dans l'ecran apparence */
@keyframes prevShimmer{0%,100%{filter:brightness(1)}50%{filter:brightness(1.6)}}
.ap-swatch.backanim-prev-shimmer{animation:prevShimmer 1.8s ease-in-out infinite}
.ap-swatch.backanim-prev-backpulse{animation:backPulseKf 1.8s ease-in-out infinite}
.ap-swatch.backanim-prev-twinkle{animation:backTwinkle 1.4s ease-in-out infinite}
.ap-swatch.backanim-prev-wave{animation:backWave 1.2s linear infinite}
.ap-swatch.backanim-prev-halo{animation:backHalo 2s ease-in-out infinite}
/* picker dos */
.backpicker{display:flex;align-items:center;gap:8px;padding:6px 2px}
.back-sw{width:26px;height:26px;border-radius:6px;border:2px solid transparent;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.back-sw.on{border-color:var(--gold);transform:scale(1.15)}
/* tray reactions */
.react-tray{position:absolute;top:54px;right:12px;z-index:60;display:flex;gap:12px;justify-content:center;padding:10px 14px;
  background:rgba(10,30,20,.95);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.5);
  max-width:calc(100% - 24px);flex-wrap:wrap}
.remoji{font-size:1.6rem;cursor:pointer;transition:transform .1s;user-select:none;-webkit-user-select:none}
.remoji:active{transform:scale(1.35)}
.react-float{position:fixed;left:50%;top:38%;transform:translateX(-50%);font-size:4rem;z-index:200;pointer-events:none;opacity:0;transition:none}
.react-float.show{animation:floatup 2.6s ease-out forwards}
@keyframes floatup{0%{opacity:0;transform:translateX(-50%) scale(.4)}12%{opacity:1;transform:translateX(-50%) scale(1.3)}70%{opacity:1;transform:translateX(-50%) translateY(-70px) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-130px) scale(.8)}}
/* numéro de manche */
.turnrow{display:flex;justify-content:center;align-items:center;gap:8px;padding:6px 16px 3px;position:relative}
.roundbadge{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;background:rgba(0,0,0,.35);border:1px solid var(--line);color:var(--cream);padding:3px 9px;border-radius:999px;font-weight:700;opacity:.88}
/* historique des manches */
.history-details{margin:10px 0;font-size:.82rem}
.history-details summary{cursor:pointer;color:var(--gold-soft);padding:4px 2px;list-style:none}
.history-details summary::after{content:' ▾'}
.round-history{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.rh-row{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.22);border-radius:10px;padding:6px 10px;font-size:.78rem}
.rh-n{font-weight:800;color:var(--gold-soft);min-width:20px}
.rh-scores{margin-left:auto;font-weight:700;color:var(--cream)}
/* animation discard : la carte tombe et "claque" sur la pile */
@keyframes cardslide{0%{transform:rotate(-4deg) translateY(-22px) scale(.92);opacity:.4}60%{transform:rotate(-4deg) translateY(2px) scale(1.04)}100%{transform:rotate(-4deg) translateY(0) scale(1);opacity:1}}
.anim-deal{animation:cardslide .34s cubic-bezier(.2,.9,.3,1) both}
.anim-deal::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.7),transparent 60%);
  animation:slideflash .34s ease-out forwards}
@keyframes slideflash{0%{opacity:.8}100%{opacity:0}}
/* who tappable */
#whoOpp:active .avatar{transform:scale(.92)}
.empty-slot{border:1.5px dashed var(--line);background:rgba(0,0,0,.18);box-shadow:inset 0 0 18px rgba(0,0,0,.3)}
#discardSlot .card{transform:rotate(-4deg)}
/* tapis central */
.table{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;position:relative;min-height:0;overflow-y:auto;padding:14px 0;
  margin:4px 10px 2px;border-radius:24px;
  background:radial-gradient(ellipse at 50% 35%,var(--felt-l),var(--felt-d));
  background-color:var(--felt);
  box-shadow:inset 0 0 0 2px var(--accent-rail-soft),inset 0 0 0 3.5px rgba(0,0,0,.65),inset 0 0 35px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.45)}
.piles{display:flex;gap:44px;align-items:flex-start}
.pile{display:flex;flex-direction:column;align-items:center;gap:9px}
.pile .lbl{font-size:.67rem;letter-spacing:.20em;text-transform:uppercase;opacity:.8;font-weight:700}
.slot{width:82px;height:116px;border-radius:14px}
.pile.actionable .slot{outline:3px solid var(--gold);outline-offset:3px;border-radius:17px;animation:breathe 1.6s infinite}
.pile.actionable .card{outline:3px solid var(--gold);outline-offset:3px;border-radius:15px;animation:breathe 1.6s infinite}
.pile.droptarget .slot,.pile.droptarget .card,.pile.droptarget .empty-slot{outline:3px solid #4ccf7a;outline-offset:3px;border-radius:16px;box-shadow:0 0 24px rgba(76,207,122,.7)}
.hand .card.todiscard{box-shadow:0 20px 32px rgba(0,0,0,.55),0 0 0 3px #4ccf7a inset,0 0 24px rgba(76,207,122,.55)}
.hint{font-size:.86rem;opacity:.92;text-align:center;min-height:1.2em;padding:0 20px;max-width:430px;line-height:1.45}

/* Wrappers portrait/paysage */
.game-left{display:flex;flex-direction:column;flex:1;min-height:0;position:relative}
.game-right{display:flex;flex-direction:column;flex:none;width:100%;max-width:100vw;box-sizing:border-box}

/* Paysage : table (game-left) a gauche, main (game-right) a droite */
@media (orientation:landscape) and (max-height:560px){
  #screen-game{flex-direction:row!important;gap:6px;padding:0 6px 4px;box-sizing:border-box}
  .game-left{flex:1 1 54%;min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden}
  .game-right{flex:1 1 46%;min-width:0;max-width:46%;display:flex;flex-direction:column;justify-content:center;background:none;border:none}
  .topbar{padding:3px 8px 1px;flex:none}
  .avatar{width:26px;height:26px;font-size:.74rem}
  .who .nm{font-size:.78rem}
  .who .sc{font-size:.62rem}
  .toolbar{gap:4px}
  .iconbtn{width:26px;height:26px;font-size:.76rem}
  .turnrow{padding:0 8px;flex:none}
  .turnchip{font-size:.6rem;padding:2px 7px}
  .roundbadge{font-size:.54rem;padding:1px 6px}
  .timer-bar-wrap{height:2px;margin:2px 8px}
  .oppfan{display:none}
  .react-tray{top:38px;right:8px;padding:5px 9px;z-index:60}
  .remoji{font-size:1.3rem}
  /* table compacte qui remplit la colonne gauche */
  .table{flex:1;flex-direction:column;gap:8px;margin:0;padding:6px;align-items:center;justify-content:center;border-radius:14px;min-height:0}
  .piles{gap:16px}
  .pile{flex-direction:column;gap:3px;align-items:center}
  .pile .lbl{display:block;font-size:.56rem}
  .card{width:46px;height:66px;border-radius:8px}
  .card .c-r{font-size:.78rem}.card .c-s{font-size:.66rem;top:17px}.card .c-big{font-size:1.35rem}
  .slot{width:46px;height:66px;border-radius:8px}
  .hint{font-size:.62rem;max-width:none;padding:0 4px;text-align:center;line-height:1.25}
  /* main dans la colonne droite */
  .handzone{position:relative;width:100%;max-width:100%;display:flex;flex-direction:column;justify-content:center;flex:1;padding-bottom:2px}
  .handbar{position:static;padding:0 6px;justify-content:flex-end}
  .handbar .who{display:none}
  .dwchip{font-size:.64rem;padding:3px 8px}
  .handtools{padding:2px 6px 0;gap:3px;justify-content:center}
  .sorttool{min-width:34px;padding:3px 5px;border-radius:8px}
  .sorttool .st-icon{font-size:.66rem}
  .sorttool .st-lbl{font-size:.46rem}
  .hand{padding:18px 4px 2px;min-height:84px}
  .hand .card .c-r{font-size:.76rem}.hand .card .c-s{font-size:.64rem;top:14px}.hand .card .c-big{font-size:1.3rem}
  .newtag{top:-12px;font-size:.48rem}
  .actionbar{padding:3px 6px calc(3px + env(safe-area-inset-bottom));gap:5px;flex-wrap:wrap}
  .actionbar .btn{padding:6px 9px;font-size:.78rem}
  .actionbar .btn.big{padding:7px 11px;font-size:.84rem}
}

/* CARTE — style cartoon avec profondeur */
.card{width:82px;height:116px;border-radius:14px;
  background:var(--card-bg,linear-gradient(165deg,#ffffff 0%,#fdf6e8 55%,#f0e4c8 100%));
  color:var(--ink);position:relative;border:1.5px solid rgba(0,0,0,.08);
  box-shadow:
    0 10px 20px rgba(0,0,0,.50),
    0 4px 8px rgba(0,0,0,.32),
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -3px 8px rgba(0,0,0,.07);
  user-select:none}
.card .c-r{position:absolute;top:6px;left:8px;font-weight:900;font-size:1.22rem;line-height:.9}
.card .c-s{position:absolute;top:26px;left:9px;font-size:1.08rem;line-height:1}
.card .c-big{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.6rem;opacity:.92;
  text-shadow:0 1px 2px rgba(0,0,0,.12)}
.card.red{color:var(--red)}
.card.sm{width:50px;height:72px;border-radius:9px}
.card.sm .c-r{font-size:.82rem;top:4px;left:5px}.card.sm .c-s{font-size:.7rem;top:17px;left:6px}.card.sm .c-big{font-size:1.5rem}
/* JUICE : eclosion d'un meld complete */
@keyframes meldpop{
  0%{transform:rotate(var(--fan-rot,0deg)) translateY(var(--fan-y,0px)) scale(1)}
  30%{transform:rotate(var(--fan-rot,0deg)) translateY(calc(var(--fan-y,0px) - 14px)) scale(1.12)}
  100%{transform:rotate(var(--fan-rot,0deg)) translateY(var(--fan-y,0px)) scale(1)}
}
.hand .card.meld-pop{animation:meldpop .5s cubic-bezier(.2,.9,.3,1);z-index:6}
.hand .card.meld-pop::after{content:"";position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 2px var(--mc,var(--gold)),0 0 18px 4px var(--mc,var(--gold));
  animation:meldglow .6s ease-out forwards}
@keyframes meldglow{0%{opacity:0}25%{opacity:.95}100%{opacity:0}}
/* Pulsation du chip deboise */
@keyframes dwpulse{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}}
.dwchip.pulse,.dwchip.pulse-gin{animation:dwpulse .42s ease-out}
.dwchip.pulse-gin{box-shadow:0 0 0 2px #4ccf7a,0 0 16px 3px rgba(76,207,122,.6)!important}
/* Halo pulsant sur boutons gin/toque dispo */
@keyframes btnglow{0%,100%{box-shadow:0 5px 0 var(--gold-deep),0 8px 16px rgba(0,0,0,.3)}50%{box-shadow:0 5px 0 var(--gold-deep),0 8px 16px rgba(0,0,0,.3),0 0 22px 5px var(--glow-c,rgba(232,192,80,.7))}}
.btn.glow{animation:btnglow 1.05s ease-in-out infinite}
.btn.glow.knock{--glow-c:rgba(232,192,80,.7)}
.btn.gin.glow{--glow-c:rgba(95,224,138,.75)}

/* Effets d'ambiance du tapis (pilotes par classe body feltfx-*) */
body.feltfx-spotlight .table,body.feltfx-aurora .table,body.feltfx-embers .table{overflow:hidden}
body.feltfx-vignette .table::after,body.feltfx-spotlight .table::after,body.feltfx-frame .table::after,body.feltfx-aurora .table::after,body.feltfx-embers .table::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;clip-path:inset(0 round 22px)}
/* Halo doux : vignette chaude qui respire */
body.feltfx-vignette .table::after{
  background:radial-gradient(ellipse at 50% 38%,transparent 45%,rgba(0,0,0,.30) 100%),
             radial-gradient(ellipse at 50% 35%,rgba(255,238,180,.14),transparent 55%);
  animation:fxBreathe 6s ease-in-out infinite}
@keyframes fxBreathe{0%,100%{opacity:.7}50%{opacity:1}}
/* Projecteur : cercle de lumiere qui se balade */
body.feltfx-spotlight .table::after{
  background:radial-gradient(circle at 50% 45%,rgba(255,240,190,.16),transparent 38%);
  animation:fxSpot 9s ease-in-out infinite}
@keyframes fxSpot{0%{background-position:0 0}25%{background-position:30% 10%}50%{background-position:-25% 15%}75%{background-position:15% -10%}100%{background-position:0 0}}
/* Cadre vivant : liseré dore pulsant */
body.feltfx-frame .table::after{
  background:none;box-shadow:inset 0 0 0 2px rgba(255,238,180,.5),inset 0 0 22px 2px rgba(255,238,180,.25);
  animation:fxFrame 2.6s ease-in-out infinite}
@keyframes fxFrame{0%,100%{box-shadow:inset 0 0 0 2px rgba(255,238,180,.35),inset 0 0 14px 1px rgba(255,238,180,.15)}50%{box-shadow:inset 0 0 0 3px rgba(255,238,180,.7),inset 0 0 26px 3px rgba(255,238,180,.4)}}
/* Aurore : voile de couleurs froides qui ondule doucement, facon aurore boreale */
body.feltfx-aurora .table::after{
  mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 10%,rgba(90,220,180,.18) 30%,rgba(120,160,255,.20) 50%,rgba(180,120,230,.18) 70%,transparent 90%);
  background-size:220% 220%;animation:fxAurora 12s ease-in-out infinite}
@keyframes fxAurora{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* Braises : lueurs chaudes qui montent lentement */
body.feltfx-embers .table::after{
  mix-blend-mode:screen;
  background:
    radial-gradient(circle at 20% 90%,rgba(255,170,80,.28) 0,transparent 18%),
    radial-gradient(circle at 55% 95%,rgba(255,120,60,.24) 0,transparent 16%),
    radial-gradient(circle at 80% 92%,rgba(255,200,90,.26) 0,transparent 20%);
  background-size:cover;animation:fxEmbers 7s ease-in-out infinite}
@keyframes fxEmbers{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(-12px);opacity:1}}
.table>*{position:relative;z-index:3}
/* apercu ambiance dans l'ecran apparence */
.ap-swatch{overflow:hidden;position:relative}
.ap-swatch.feltfx-prev-vignette{box-shadow:inset 0 0 18px 5px rgba(0,0,0,.4);animation:fxBreathe 4s ease-in-out infinite}
.ap-swatch.feltfx-prev-spotlight{background:radial-gradient(circle at 50% 50%,rgba(255,240,190,.7),var(--felt-d) 60%)!important;animation:fxSpot 5s ease-in-out infinite}
.ap-swatch.feltfx-prev-frame{box-shadow:inset 0 0 0 2px rgba(255,238,180,.7);animation:fxFrame 2.2s ease-in-out infinite}
.ap-swatch.feltfx-prev-aurora{background:linear-gradient(115deg,rgba(90,220,180,.6),rgba(120,160,255,.7),rgba(180,120,230,.6))!important;background-size:220% 220%!important;animation:fxAurora 5s ease-in-out infinite}
.ap-swatch.feltfx-prev-embers{background:radial-gradient(circle at 50% 90%,rgba(255,150,70,.9),var(--felt-d) 65%)!important;animation:fxEmbers 3s ease-in-out infinite}

/* ECRAN APPARENCE */
.ap-preview{display:flex;align-items:center;justify-content:center;padding:14px;border-radius:18px;margin-bottom:14px;
  background:
    radial-gradient(140% 90% at 50% 10%, var(--felt-l), transparent 55%),
    radial-gradient(180% 130% at 50% 130%, var(--felt-d), var(--felt) 60%);
  background-color:var(--felt);
  box-shadow:inset 0 0 0 2px var(--accent-rail-soft),inset 0 0 0 3.5px rgba(0,0,0,.6),inset 0 0 26px rgba(0,0,0,.4)}
.ap-prev-table{display:flex;gap:12px;align-items:center}
.ap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.ap-item{position:relative;border-radius:14px;padding:10px 8px 8px;cursor:pointer;text-align:center;
  background:rgba(0,0,0,.24);border:2px solid transparent;transition:transform .08s}
.ap-item:active{transform:scale(.96)}
.ap-item.on{border-color:var(--gold);box-shadow:0 0 0 2px rgba(232,192,80,.3),0 5px 14px rgba(0,0,0,.3)}
.ap-item.locked{opacity:.5}
.ap-swatch{height:48px;border-radius:9px;margin-bottom:7px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.ap-name{font-size:.72rem;font-weight:700}
.ap-lock{position:absolute;top:6px;right:8px;font-size:.9rem}
.ap-req{font-size:.58rem;opacity:.8;margin-top:2px;line-height:1.2}
.ap-dot{width:42px;height:42px;border-radius:50%;margin:0 auto 7px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25),0 2px 6px rgba(0,0,0,.4)}

/* MAIN en eventail */
.handzone{flex:none;padding-bottom:2px;width:100%;max-width:100vw;box-sizing:border-box;overflow:hidden}
.handbar{display:flex;justify-content:space-between;align-items:center;padding:0 18px;gap:10px;max-width:100%;box-sizing:border-box}
.handbar .who{min-width:0;flex:0 1 auto}
.dwchip{font-size:.82rem;padding:7px 14px;border-radius:999px;background:rgba(0,0,0,.45);border:1.5px solid var(--line);font-weight:700;white-space:nowrap;flex:none;
  box-shadow:0 3px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)}
.dwchip .dw-label{opacity:.85;font-weight:600}
.dwchip b{color:var(--gold-soft);font-size:1rem;display:inline-block;min-width:2.6em;text-align:right;font-variant-numeric:tabular-nums}
/* Nouveaux boutons de tri style arcade */
.handtools{display:flex;gap:10px;justify-content:center;padding:8px 14px 2px;flex-wrap:wrap}
.sorttool{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 10px 6px;min-width:54px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  border:1px solid rgba(243,220,160,.35);border-radius:13px;color:var(--cream);
  box-shadow:0 4px 0 rgba(0,0,0,.45),0 6px 14px rgba(0,0,0,.25);
  transition:transform .08s,box-shadow .08s}
.sorttool .st-icon{font-size:.95rem;line-height:1.1;letter-spacing:-.02em}
.sorttool .st-lbl{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.82}
.sorttool:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.45)}
.sorttool.on{background:linear-gradient(180deg,var(--gold-soft),var(--gold-d));color:#3a2c0c;border-color:transparent;
  box-shadow:0 4px 0 var(--gold-deep),0 6px 14px rgba(0,0,0,.3)}
.sorttool.autoon{background:linear-gradient(180deg,#7ce09a,#28a855);color:#0a2c14;border-color:transparent;
  box-shadow:0 4px 0 #177535,0 6px 14px rgba(0,0,0,.3)}
/* La variable --chip reste pour compatibilité */
.chip{font-size:.74rem;padding:7px 13px;border-radius:999px;background:rgba(0,0,0,.32);border:1px solid var(--line);color:var(--cream);font-weight:600}
.chip:active{transform:translateY(1px);background:rgba(232,190,99,.18)}
.chip.on{background:linear-gradient(180deg,var(--gold-soft),var(--gold-d));color:#3a2c0c;border-color:transparent;font-weight:800}
/* Animation flip carte piochée */
@keyframes flipdeal{
  0%{transform:rotate(var(--fan-rot,0deg)) translateY(var(--fan-y,0px)) rotateY(-90deg) scale(.7);opacity:0}
  60%{transform:rotate(var(--fan-rot,0deg)) translateY(calc(var(--fan-y,0px) - 10px)) rotateY(8deg) scale(1.06);opacity:1}
  100%{transform:rotate(var(--fan-rot,0deg)) translateY(var(--fan-y,0px)) rotateY(0deg) scale(1);opacity:1}
}
.hand .card.flip-in{animation:flipdeal .45s ease-out both;perspective:600px}
.hand{display:flex;justify-content:center;align-items:flex-end;overflow-x:clip;overflow-y:visible;padding:30px 6px 12px;min-height:120px;touch-action:none;width:100%;max-width:100vw;box-sizing:border-box}
.hand .card{transform:rotate(var(--fan-rot,0deg)) translateY(var(--fan-y,0px));transform-origin:center bottom;transition:transform .15s}
/* Annonce toque / gin / big gin */
.ann-overlay{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:radial-gradient(ellipse at 50% 45%,rgba(6,30,16,.55),rgba(2,10,5,.88));backdrop-filter:blur(3px);
  animation:annfade 2.4s ease forwards;pointer-events:none;overflow:hidden}
@keyframes annfade{0%{opacity:0}8%{opacity:1}80%{opacity:1}100%{opacity:0}}
.ann-banner{font-family:'Cinzel',serif;font-weight:900;font-size:clamp(2.6rem,13vw,5rem);letter-spacing:.04em;text-align:center;
  background:linear-gradient(180deg,#fff3c8,#e8c050 45%,#a86c14);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 rgba(60,35,0,.85)) drop-shadow(0 10px 24px rgba(0,0,0,.6));
  animation:annslam .55s cubic-bezier(.2,1.4,.4,1) both}
@keyframes annslam{0%{transform:scale(3.2) rotate(-7deg);opacity:0}55%{transform:scale(.92) rotate(1.5deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.ann-banner.gin{background:linear-gradient(180deg,#d9ffe4,#5fe08a 45%,#1d8a48);-webkit-background-clip:text;background-clip:text;color:transparent}
.ann-banner.bad{background:linear-gradient(180deg,#ffd9d9,#e07a6a 45%,#a8332a);-webkit-background-clip:text;background-clip:text;color:transparent}
.ann-sub{font-size:1rem;font-weight:700;color:var(--cream);text-shadow:0 2px 8px rgba(0,0,0,.7);opacity:0;animation:annsub .5s .35s ease forwards}
@keyframes annsub{to{opacity:.95}}
.conf-piece{position:absolute;top:-6vh;width:10px;height:16px;border-radius:3px;opacity:.95;
  animation:conffall linear forwards}
@keyframes conffall{0%{transform:translateY(0) rotate(0deg)}100%{transform:translateY(118vh) rotate(720deg)}}

/* Timer de tour */
.timer-bar-wrap{height:3px;background:rgba(0,0,0,.25);overflow:hidden;flex-shrink:0;margin:5px 16px 4px;border-radius:3px}
.timer-bar{height:100%;background:linear-gradient(90deg,#4ccf7a,var(--gold));transition:width 1s linear;border-radius:2px}
.timer-bar.urgent{background:linear-gradient(90deg,#e05050,#f07a30)}
/* Animations adversaire / tour */
@keyframes fanbounce{0%{transform:translateY(0)}35%{transform:translateY(7px) scale(1.02)}100%{transform:translateY(0)}}
.oppfan.bounce{animation:fanbounce .45s ease-out}
@keyframes chippop{0%{transform:scale(.7)}55%{transform:scale(1.14)}100%{transform:scale(1)}}
.turnchip.pop{animation:chippop .45s cubic-bezier(.2,.8,.3,1)}
/* Déboisé coloré */
.dwchip b.dw-gin{color:#7fcf9a}
.dwchip b.dw-ok{color:var(--gold-soft)}
.dwchip b.dw-over{color:#e07070}
/* Écran prêt */
.ready-vs{display:flex;align-items:center;justify-content:center;gap:18px;margin:16px 0}
.ready-player{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
.ready-player .av{width:52px;height:52px;border-radius:50%;font-size:1.3rem;display:flex;align-items:center;justify-content:center;font-weight:800}
.ready-player .st{font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:999px}
.ready-player .st.yes{background:#2a6a3a;color:#7fcf9a}
.ready-player .st.no{background:rgba(0,0,0,.3);color:rgba(255,255,255,.5)}
.vs-label{font-size:1.4rem;font-weight:900;color:var(--gold-soft);flex:none}
/* Révélation améliorée */
.reveal2{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.reveal2-player{background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.reveal2-player .rp-head{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(0,0,0,.18)}
.reveal2-player .rp-head .av{width:28px;height:28px;border-radius:50%;font-size:.82rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.reveal2-player .rp-nm{font-weight:700;flex:1}
.reveal2-player .rp-dw{font-size:.8rem;opacity:.85}
.reveal2-cols{display:flex;gap:0}
.reveal2-col{flex:1;padding:8px 10px;min-width:0}
.reveal2-col.dwcol{flex:0 0 34%}
.reveal2-col:first-child{border-right:1px solid var(--line)}
.reveal2-col-lbl{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:6px}
.reveal2-melds{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px 12px;align-items:flex-start}
.reveal2-meld-group{display:flex;gap:2px;flex:none;padding:3px;border-radius:9px;background:rgba(0,0,0,.18)}
.reveal2-dw-cards{display:flex;flex-wrap:wrap;gap:3px}
.hand::-webkit-scrollbar{display:none}
.hand .card{flex:none;width:52px;height:78px;margin-left:-21px;border-radius:10px;touch-action:none;will-change:transform;
  transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .16s ease}
.hand .card:first-child{margin-left:0}
.hand .card .c-r{font-size:.82rem;top:4px;left:5px}.hand .card .c-s{font-size:.7rem;top:16px;left:6px}.hand .card .c-big{font-size:1.45rem}
.hand .card.meld{box-shadow:0 6px 13px rgba(0,0,0,.4),0 0 0 2px var(--mc,#e8be63) inset}
.hand .card.meld::after{content:'';position:absolute;left:5px;right:5px;bottom:5px;height:4px;border-radius:2px;
  background:var(--mc,#e8be63)}
.hand .card.dead{opacity:.97}
.hand .card.dead::after{content:'';position:absolute;left:5px;right:5px;bottom:5px;height:4px;border-radius:2px;
  background:repeating-linear-gradient(45deg,rgba(150,150,150,.5),rgba(150,150,150,.5) 3px,transparent 3px,transparent 6px)}
.hand .card.sel{transform:translateY(-18px) scale(1.06);z-index:5;
  box-shadow:0 16px 24px rgba(0,0,0,.5),0 0 0 3px var(--gold-soft) inset,0 0 22px rgba(232,190,99,.5)}
.hand .card.dimmed{opacity:.38;filter:grayscale(.4)}
.hand .card.fresh{animation:freshbob 1.1s ease-in-out infinite}
@keyframes freshbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.newtag{position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-size:.56rem;letter-spacing:.04em;text-transform:uppercase;
  background:var(--cream);color:#1c4a30;padding:2px 6px;border-radius:8px;font-weight:800;white-space:nowrap;box-shadow:0 2px 7px rgba(0,0,0,.45);z-index:7}
.newtag.advtag{background:#ffe28a;color:#5a3c06}
.chip.on{background:linear-gradient(180deg,var(--gold-soft),var(--gold-d));color:#3a2c0c;border-color:transparent;font-weight:800}
.iconbtn.off{opacity:.45}
.hand .card.dragging{transition:none;z-index:40;box-shadow:0 20px 30px rgba(0,0,0,.6),0 0 0 3px var(--gold-soft) inset}
.card-ghost{opacity:.25}
.card-chosen{box-shadow:0 10px 18px rgba(0,0,0,.45),0 0 0 2px var(--gold) inset}
.card-floating{opacity:1!important;border-radius:11px;transform:scale(1.14)!important;z-index:9999!important;
  box-shadow:0 24px 34px rgba(0,0,0,.6),0 0 0 3px var(--gold-soft) inset!important;cursor:grabbing}
.actionbar{padding:12px 16px calc(14px + env(safe-area-inset-bottom));display:flex;gap:12px}
.actionbar>*{flex:1}

/* feuilles (modales) */
.sheet{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0,rgba(20,80,52,.9),rgba(6,40,24,.94));
  backdrop-filter:blur(7px);display:flex;flex-direction:column;z-index:20;padding:20px;overflow-y:auto;animation:popin .28s ease both}
@keyframes popin{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.sheet h2{color:var(--gold);font-size:1.7rem;text-align:center;margin-bottom:4px;text-shadow:0 2px 0 var(--gold-deep)}
.sheet .tag{text-align:center;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);opacity:.9;margin-bottom:16px}
.scoreline{display:flex;justify-content:space-around;align-items:center;background:rgba(0,0,0,.34);border:1px solid var(--line);
  border-radius:18px;padding:16px;margin-bottom:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.scoreline .p{text-align:center}
.scoreline .p .v{font-family:'Cinzel';font-size:2.3rem;color:var(--gold);text-shadow:0 2px 0 var(--gold-deep)}
.scoreline .p .n{font-size:.82rem;opacity:.85}
.reveal{background:rgba(0,0,0,.26);border:1px solid var(--line);border-radius:16px;padding:13px;margin-bottom:12px}
.reveal h3{font-size:.98rem;margin-bottom:9px;display:flex;justify-content:space-between;align-items:baseline;color:var(--gold-soft)}
.reveal h3 small{font-weight:400;opacity:.78;font-family:'Outfit';font-size:.78rem;color:var(--cream)}
.melds-wrap{display:flex;flex-wrap:wrap;gap:7px}
.meldgrp{display:flex;gap:3px;padding:4px;border-radius:10px;background:rgba(232,190,99,.14);border:1px solid var(--line)}
.dwgrp{display:flex;gap:5px;flex-wrap:wrap;opacity:.82}
.bignote{text-align:center;font-size:1.05rem;margin:8px 0 16px;line-height:1.45}
.bignote b{color:var(--gold-soft)}
.layoff-melds{display:flex;flex-direction:column;gap:9px;margin:6px 0;width:100%;max-width:430px;padding:0 10px}
.lo-meld{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:13px;border:1px dashed var(--line);background:rgba(0,0,0,.24)}
.lo-meld.tgt{outline:2px solid var(--gold);background:rgba(232,190,99,.1);animation:breathe 1.6s infinite}
.lo-meld .cards{display:flex;gap:3px;flex-wrap:wrap;flex:1}
.lo-meld .tap{font-size:.74rem;color:var(--gold-soft);font-weight:700;white-space:nowrap}
.avatar{position:relative}
.avatar .ini{display:block}
.pdot{position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;
  border:2px solid var(--felt-d);background:#9aa0a0;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.pdot.on{background:#4ccf7a;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 8px rgba(76,207,122,.8)}
.pdot.away{background:#e8b84b}
.pdot.off{background:#9aa0a0}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:linear-gradient(180deg,#d24a40,#a8362d);color:#fff;padding:12px 20px;border-radius:14px;font-size:.92rem;font-weight:600;
  box-shadow:0 10px 24px rgba(0,0,0,.45);z-index:60;max-width:90%;text-align:center;opacity:0;transition:opacity .25s;pointer-events:none}
.toast.show{opacity:1}
.tiny{font-size:.74rem;opacity:.7;text-align:center}
.toolbar{display:flex;gap:6px;align-items:center;flex:none}
.iconbtn{background:linear-gradient(180deg,#15623f,#0c3f28);border:1px solid var(--line);color:var(--gold-soft);
  width:34px;height:34px;border-radius:50%;font-size:.95rem;font-weight:700;flex:none;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 #06281a,0 6px 12px rgba(0,0,0,.35)}
.iconbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #06281a}
.modal{position:fixed;inset:0;background:rgba(6,26,18,.72);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:80;padding:24px}
.modal .box{background:linear-gradient(180deg,#13593a,#0a3320);border:1px solid var(--line);border-radius:20px;padding:22px 20px;max-width:340px;width:100%;text-align:center;box-shadow:0 22px 50px rgba(0,0,0,.55)}
.modal .box p{font-size:1.06rem;margin:0 0 18px;line-height:1.4}
.modal .box .row{display:flex;gap:10px}
.modal .box .row>*{flex:1}
/* profil + classement + primes */
.profilecard{display:flex;align-items:center;gap:12px}
.profilecard .grow{flex:1;min-width:0}
.profilecard input{margin:0}
.pinrow{display:flex;gap:8px;align-items:center;margin-top:12px}
.pinrow input{flex:1;margin:0}
.pinrow .btn{width:auto;flex:none;white-space:nowrap}
.optrow{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:.86rem;cursor:pointer}
.optrow input[type=checkbox]{width:20px;height:20px;accent-color:#e8c050;margin:0;flex:none}
.elo-badge{font-size:.78rem;opacity:.88;margin-top:7px}
.elo-badge b{color:var(--gold-soft)}
.iconbtn-inline{background:linear-gradient(180deg,#15623f,#0c3f28);border:1px solid var(--line);color:var(--gold-soft);
  width:44px;height:44px;border-radius:13px;font-size:1.2rem;flex:none;box-shadow:0 4px 0 #06281a}
.iconbtn-inline:active{transform:translateY(3px);box-shadow:0 1px 0 #06281a}
.colorpick{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding:10px 0 2px}
.swatch{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.25);box-shadow:0 3px 8px rgba(0,0,0,.35)}
.swatch.on{border-color:#fff;transform:scale(1.14)}
.linkbtn{background:none;color:var(--gold-soft);text-decoration:underline;font-size:.9rem;padding:6px;width:100%;opacity:.9}
.board-list{display:flex;flex-direction:column;gap:8px}
/* Onglets board */
.board-tabs{display:flex;gap:6px;margin-bottom:12px}
.board-tab{flex:1;padding:9px 6px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid var(--line);color:var(--cream);font-size:.82rem;font-weight:600;cursor:pointer}
.board-tab.on{background:linear-gradient(180deg,var(--gold-soft),var(--gold-d));color:#3a2c0c;border-color:transparent}
/* Stats grille étendue */
.stat-grid2{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.sg-cell{background:rgba(0,0,0,.22);border-radius:11px;padding:9px 8px;text-align:center}
.sg-cell .v{font-size:1.15rem;font-weight:800;color:var(--gold-soft)}
.sg-cell .l{font-size:.62rem;opacity:.75;text-transform:uppercase;letter-spacing:.05em;margin-top:2px;line-height:1.2}
.stat-sec{font-family:'Cinzel',serif;font-size:.82rem;letter-spacing:.04em;color:var(--gold-soft);margin:16px 0 2px;opacity:.92}
.stat-sec:first-child{margin-top:4px}
/* Historique parties */
.hist-list{display:flex;flex-direction:column;gap:8px}
.hist-row{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.24);border:1px solid var(--line);border-radius:13px;padding:10px 12px}
.hist-row .res{font-size:1.3rem;flex:none}
.hist-row .info{flex:1;min-width:0}
.hist-row .nm{font-weight:700;font-size:.88rem}
.hist-row .det{font-size:.72rem;opacity:.8;margin-top:2px}
.hist-row .sc-block{flex:none;text-align:right}
.hist-row .sc{font-weight:800;font-size:1.05rem}
.hist-row .sc .vs{opacity:.45;margin:0 3px;font-weight:600}
.hist-row .sc-lbl{font-size:.6rem;opacity:.6;text-transform:uppercase;letter-spacing:.06em;margin-top:1px}
.hist-row.won .sc{color:#7fcf9a}
.hist-row.lost .sc{color:#d77ba8}
/* Animation de distribution */
@keyframes dealin{from{opacity:0;transform:translateY(-90px) scale(.65) rotate(-10deg)}to{opacity:1;transform:none}}
.hand .card.deal-anim{animation:dealin .38s cubic-bezier(.2,.8,.3,1) both}
.rank{display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.rank.you{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.rank .pos{font-family:'Cinzel';font-size:1.15rem;color:var(--gold-soft);width:26px;text-align:center;flex:none}
.rank .av{width:36px;height:36px;border-radius:50%;flex:none;color:#3a2c0c;font-family:'Cinzel';font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px rgba(0,0,0,.2)}
.rank .info{flex:1;min-width:0}
.rank .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank .det{font-size:.74rem;opacity:.82}
.rank .elo{font-family:'Cinzel';font-size:1.25rem;color:var(--gold);flex:none}
.statgrid{display:flex;justify-content:space-around;text-align:center;margin:2px 0 16px}
.admin-row{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:14px;padding:9px 11px;flex-wrap:wrap}
.admin-row .av{width:32px;height:32px;border-radius:50%;flex:none;color:#3a2c0c;font-weight:700;display:flex;align-items:center;justify-content:center}
.admin-row .info{flex:1;min-width:90px}
.admin-row .nm{font-weight:700}
.admin-row .det{font-size:.72rem;opacity:.82}
.admin-acts{display:flex;gap:6px;flex:none}
.admin-acts .btn.sm{padding:8px 10px;font-size:.78rem;border-radius:11px}
.statgrid .s .v{font-family:'Cinzel';font-size:1.6rem;color:var(--gold)}
.statgrid .s .l{font-size:.68rem;opacity:.8;text-transform:uppercase;letter-spacing:.1em}
.bonus-card{background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:12px}
.bonus-card.win{border-color:var(--gold);box-shadow:0 0 26px rgba(232,190,99,.28)}
.bonus-card h4{margin:0 0 8px;font-family:'Cinzel';font-size:1.05rem;display:flex;justify-content:space-between;align-items:center;gap:8px}
.bonus-card h4 .av{width:30px;height:30px;border-radius:50%;color:#3a2c0c;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem}
.bonus-card h4 .who2{display:flex;align-items:center;gap:8px;min-width:0}
.bonus-row{display:flex;justify-content:space-between;padding:6px 2px;border-bottom:1px solid rgba(255,255,255,.07);font-size:.92rem}
.bonus-row span:last-child{font-weight:700}
.bonus-row.total{border-bottom:none;color:var(--gold-soft);font-size:1.1rem;padding-top:10px}
.elo-chip{font-size:.82rem;padding:3px 10px;border-radius:999px;background:rgba(232,190,99,.16);border:1px solid var(--line);font-weight:700}
.elo-chip.up{color:#82e3a4}.elo-chip.down{color:#ef9a9a}
.crown{filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}