/* Tournoi IA : table en direct (v3)
 * Règle : la table et le panneau d'action tiennent dans l'écran. On ne défile jamais pour cliquer. */

/* ---------- Salle : hauteur fixe, rien ne se décale pendant la partie ---------- */
.tn-room{position:relative;display:flex;flex-direction:column;gap:10px;height:clamp(620px,calc(100dvh - 190px),940px);min-height:0}
.tn-wait{margin:0;color:var(--mut);font-size:.88rem;text-align:center;align-self:center}
.tn-error{color:#ff8a8a;background:rgba(194,0,0,.12);border:1px solid rgba(194,0,0,.5);border-radius:12px;padding:12px 14px}

/* HUD */
.tn-hud{display:flex;gap:8px;flex-wrap:wrap;flex:none}
.tn-hud span{display:grid;gap:1px;padding:7px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);min-width:0}
.tn-hud small{color:var(--mut);font-size:.64rem;text-transform:uppercase;letter-spacing:.08em}
.tn-hud b{font-family:var(--ff-d);font-size:.9rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.tn-hud .tn-last{flex:1;min-width:160px}
.tn-hud .tn-last b{font-family:inherit;font-size:.82rem;color:#ffb4b4}

/* Plateau (zone qui s'adapte à la hauteur disponible) */
.tn-stage{position:relative;flex:1;min-height:0;border-radius:22px;background:radial-gradient(ellipse at 50% 45%,#101015,#050507 75%);border:1px solid rgba(255,255,255,.06);overflow:hidden}

.tn-felt{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:60%;height:50%;border-radius:999px;background:radial-gradient(ellipse at 50% 40%,#9b0b0b,#4a0505 72%);border:10px solid #17171d;box-shadow:0 0 0 2px rgba(255,255,255,.06),0 30px 60px -20px rgba(0,0,0,.9),inset 0 0 50px rgba(0,0,0,.55);display:grid;place-items:center;align-content:center;gap:8px;z-index:1}
.tn-felt::before{content:"";position:absolute;inset:8%;border-radius:999px;border:1px solid rgba(255,255,255,.08)}
.tn-brand{display:none}
.tn-brand b{color:rgba(255,59,59,.45);font-weight:700}
.tn-street{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.tn-board{display:flex;gap:clamp(4px,.6vw,8px);justify-content:center}
.tn-slot{width:clamp(38px,4.2vw,58px);height:clamp(54px,6vw,82px);border-radius:7px;border:1px dashed rgba(255,255,255,.2);background:rgba(0,0,0,.18)}
.tn-potbox{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:99px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12)}
.tn-potbox b{font-family:var(--ff-d);font-size:1rem;color:#fff;font-variant-numeric:tabular-nums}
.tn-chipstack{position:relative;width:20px;height:16px;display:inline-block}
.tn-chipstack i{position:absolute;left:0;width:20px;height:8px;border-radius:50%;background:linear-gradient(#ff4a4a,#8a0000);border:1px solid #fff}
.tn-chipstack i:nth-child(1){top:0}.tn-chipstack i:nth-child(2){top:4px}.tn-chipstack i:nth-child(3){top:8px}

/* Sièges */
.tn-seats{position:absolute;inset:0;pointer-events:none;z-index:2}
.tn-seat{position:absolute;transform:translate(-50%,-50%);width:clamp(118px,11.5vw,152px);display:grid;justify-items:center;transition:opacity .5s,filter .5s}
.tn-cards{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);display:flex;gap:6px;min-height:20px}
.tn-seat.me .tn-cards{bottom:calc(100% + 6px)}
.tn-card{position:relative;width:clamp(44px,4.4vw,60px);height:clamp(62px,6.2vw,84px);border-radius:8px;background:#fff;color:#111;display:grid;place-content:center;justify-items:center;font-family:var(--ff-d);box-shadow:0 10px 20px -8px rgba(0,0,0,.9);backface-visibility:hidden}
.tn-card b{font-size:clamp(1rem,1.5vw,1.35rem);line-height:1}
.tn-card i{font-style:normal;font-size:clamp(.8rem,1.2vw,1.05rem);line-height:1}
.tn-card.red{color:#c40000}
.tn-card.back{background:repeating-linear-gradient(45deg,#7a0000 0 5px,#c40000 5px 10px);border:2px solid #fff}
.tn-card.deal{animation:tnDeal .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes tnDeal{from{opacity:0;transform:translate(0,-190px) rotate(-14deg) scale(.5)}to{opacity:1;transform:none}}
.tn-card.flip{animation:tnFlip .65s cubic-bezier(.2,.8,.2,1) both}
@keyframes tnFlip{from{opacity:0;transform:rotateY(90deg)}to{opacity:1;transform:rotateY(0)}}
.tn-card.reveal{animation:tnReveal .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes tnReveal{0%{transform:rotateY(180deg)}100%{transform:rotateY(0)}}

.tn-plate{position:relative;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:99px;background:rgba(12,12,16,.94);border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 26px -10px rgba(0,0,0,.9);white-space:nowrap;transition:border-color .4s,box-shadow .4s,transform .4s}
.tn-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;background:radial-gradient(circle at 35% 30%,hsl(var(--hue),70%,55%),hsl(var(--hue),60%,22%));color:#fff;font-family:var(--ff-d);font-weight:800;font-size:.9rem;box-shadow:inset 0 0 0 2px rgba(255,255,255,.15)}
.tn-info{display:grid;min-width:0}
.tn-info b{font-size:.8rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;max-width:92px}
.tn-stack{font-family:var(--ff-d);font-size:.86rem;color:#fff;font-variant-numeric:tabular-nums}
.tn-state{font-style:normal;font-size:.62rem;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.tn-seat.me .tn-plate{border-color:rgba(194,0,0,.8)}
.tn-seat.turn .tn-plate{border-color:#ffd166;box-shadow:0 0 0 3px rgba(255,209,102,.35),0 0 26px rgba(255,209,102,.45);transform:scale(1.05)}
.tn-seat.fold{opacity:.42;filter:grayscale(.7)}
.tn-seat.fold .tn-card{opacity:.5}
.tn-seat.out{opacity:.2;filter:grayscale(1)}
.tn-seat.allin .tn-plate{border-color:#ff3b3b;animation:tnAllin 1.4s ease-in-out infinite}
@keyframes tnAllin{0%,100%{box-shadow:0 0 14px rgba(255,59,59,.5)}50%{box-shadow:0 0 30px rgba(255,59,59,.95)}}
.tn-seat.win .tn-plate{border-color:#2dd36f;box-shadow:0 0 0 3px rgba(45,211,111,.35),0 0 34px rgba(45,211,111,.7);animation:tnWin 1.1s ease-in-out 3}
@keyframes tnWin{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.tn-seat.win .tn-card{box-shadow:0 0 0 2px #2dd36f,0 0 18px rgba(45,211,111,.8)}

/* Bulle d'action au-dessus du siège */
.tn-bubble{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,6px) scale(.9);opacity:0;padding:6px 12px;border-radius:12px;background:#fff;color:#111;font-family:var(--ff-d);font-weight:800;font-size:.78rem;white-space:nowrap;box-shadow:0 10px 24px -8px rgba(0,0,0,.9);transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1);pointer-events:none;z-index:4}
.tn-bubble::after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:#fff}
.tn-bubble.on{opacity:1;transform:translate(-50%,0) scale(1)}
.tn-bubble.raise,.tn-bubble.allin{background:linear-gradient(90deg,#ff3b3b,#c40000);color:#fff}
.tn-bubble.raise::after,.tn-bubble.allin::after{border-top-color:#c40000}
.tn-bubble.fold{background:#2a2a33;color:#c8c8d0}
.tn-bubble.fold::after{border-top-color:#2a2a33}
.tn-bubble.call{background:#ffd166}
.tn-bubble.call::after{border-top-color:#ffd166}
.tn-bubble.check{background:#e6e6ee}
.tn-bubble.check::after{border-top-color:#e6e6ee}
.tn-seat.talk .tn-cards{opacity:.25;transition:opacity .3s}

/* Mises et dealer */
.tn-bet{position:absolute;transform:translate(-50%,-50%);z-index:3;display:flex;align-items:center;gap:6px;font-family:var(--ff-d);font-size:.8rem;color:#fff;white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}
.tn-bet:empty{display:none}
.tn-bet i{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff7a7a,#8a0000);border:2px solid #fff;box-shadow:0 2px 0 #4a0000,0 0 10px rgba(0,0,0,.6)}
.tn-bet.in{animation:tnBetIn .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes tnBetIn{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.tn-dealer{position:absolute;transform:translate(-50%,-50%);z-index:3;width:24px;height:24px;border-radius:50%;background:#fff;color:#111;font:800 .72rem/24px var(--ff-d);text-align:center;font-style:normal;box-shadow:0 0 0 3px #c40000;transition:left .6s cubic-bezier(.2,.8,.2,1),top .6s cubic-bezier(.2,.8,.2,1)}

/* Effets : pastilles en vol, gains */
.tn-fx{position:absolute;inset:0;pointer-events:none;z-index:5}
.tn-chip{position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff7a7a,#8a0000);border:2px solid #fff;box-shadow:0 2px 0 #4a0000;opacity:0}
.tn-seat .tn-float{position:absolute;bottom:calc(100% + 40px);left:50%;transform:translateX(-50%);font-family:var(--ff-d);font-weight:800;font-size:1.1rem;color:#2dd36f;text-shadow:0 0 12px rgba(45,211,111,.8);white-space:nowrap;animation:tnFloat 1.5s ease-out forwards;z-index:6}
.tn-float{position:absolute;pointer-events:none}
@keyframes tnFloat{0%{opacity:0;transform:translate(-50%,10px)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-38px)}}

/* Journal (tiroir) */
.tn-logtoggle{position:absolute;top:10px;right:10px;z-index:7;padding:6px 12px;border-radius:99px;border:1px solid var(--line);background:rgba(10,10,14,.85);color:var(--mut);font:inherit;font-size:.74rem;cursor:pointer}
.tn-logtoggle:hover{color:#fff;border-color:rgba(194,0,0,.6)}
.tn-log{position:absolute;top:44px;right:10px;bottom:10px;width:270px;z-index:7;padding:14px;border-radius:16px;background:rgba(10,10,14,.94);border:1px solid var(--line);overflow:auto;font-size:.78rem}
.tn-log[hidden]{display:none}
.tn-log h4{font-family:var(--ff-d);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0 0 10px}
.tn-log p{padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06);color:#c9c9d2;margin:0;line-height:1.4}
.tn-log p.new{color:#fff}

/* Panneau d'action (toujours visible, hauteur fixe) */
.tn-dock{flex:none;min-height:124px;display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 16px;border-radius:18px;background:linear-gradient(170deg,rgba(194,0,0,.16),rgba(10,10,14,.94));border:1px solid rgba(194,0,0,.45);box-shadow:0 20px 40px -24px rgba(194,0,0,.6)}
.tn-dock:has(.tn-wait){grid-template-columns:1fr;background:rgba(10,10,14,.6);border-color:var(--line);box-shadow:none}
.tn-odds{display:grid;gap:8px;align-content:center}
.tn-odds>div{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
.tn-odds small{color:var(--mut);font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.tn-odds b{font-family:var(--ff-d);font-size:.84rem;min-width:44px;text-align:right}
.tn-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.tn-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2dd36f,#7af0a8);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.tn-bar.req i{background:linear-gradient(90deg,#8a0000,#ff3b3b)}
.tn-q{margin:4px 0 0;font-size:.84rem;color:#fff}
.tn-raise{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;min-width:0}
.tn-raise-off{display:none}
.tn-amount{display:grid;gap:2px}
.tn-amount small{color:var(--mut);font-size:.64rem;text-transform:uppercase;letter-spacing:.06em}
.tn-amount input{width:132px;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.45);border:1px solid var(--line);color:#fff;font-family:var(--ff-d);font-size:1rem;font-variant-numeric:tabular-nums}
.tn-raise input[type=range]{width:100%;accent-color:#ff3b3b}
.tn-quick{display:flex;gap:6px}
.tn-quick button{padding:7px 11px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--mut);font:inherit;font-size:.74rem;cursor:pointer}
.tn-quick button:hover{border-color:rgba(194,0,0,.7);color:#fff}
.tn-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.tn-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;transition:transform .15s,background .2s,border-color .2s,box-shadow .2s}
.tn-btn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.4)}
.tn-btn:active{transform:translateY(0) scale(.98)}
.tn-btn.ghost{background:transparent}
.tn-btn.red{background:linear-gradient(135deg,#ff3b3b,#a00000);border-color:transparent;box-shadow:0 10px 26px -10px rgba(255,59,59,.9)}
.tn-btn.dark{background:#15151b}
.tn-btn kbd{font:600 .66rem/1 var(--ff-d);padding:4px 6px;border-radius:6px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.2);color:var(--mut)}

/* Petits écrans : la table garde sa place, le panneau passe en dessous */
@media (max-width:1100px){
  .tn-dock{grid-template-columns:1fr;gap:10px}
  .tn-btns{justify-content:stretch}
  .tn-btn{flex:1;justify-content:center}
  .tn-raise{grid-template-columns:auto 1fr}
  .tn-quick{grid-column:1/-1}
}
@media (max-width:640px){
  .tn-room{height:auto;min-height:0}
  .tn-stage{height:560px;flex:none}
  .tn-felt{width:78%;height:48%}
  .tn-seat{width:110px}
  .tn-card{width:40px;height:56px}
  .tn-log{width:auto;left:10px}
  .tn-hud .tn-last{min-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .tn-card.deal,.tn-card.flip,.tn-card.reveal,.tn-seat.allin .tn-plate,.tn-seat.win .tn-plate,.tn-seat .tn-float{animation:none}
}