/* Replayer de tournoi -- s'appuie sur les tokens de style.css */
:root {
  /* tapis vert vif, plus clair au centre */
  --felt-1: #14b26c;
  --felt-2: #0c8f55;
  --felt-3: #07693f;
  --rail: #1a1e30;
  --rail-glow: rgba(233, 78, 119, .55);
  --gold: #f2c14e;
  /* deck 4 couleurs : fond de carte entierement colore */
  --suit-s: #2d3140;
  --suit-h: #e3434f;
  --suit-d: #2f7fe6;
  --suit-c: #1fa35c;
  --card-back: #e9506e;
  --plate: #1a1f33;
  --plate-2: #141827;
}

.replay-btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}
.replay-btn:hover { border-color: var(--accent); }

/* ---------- en-tete ---------- */
.rp-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.rp-title { flex: 1; min-width: 220px; }
.rp-title h2 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.rp-meta { font-size: 13px; color: var(--text-dim); margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rp-meta strong { color: var(--text); }
.rp-dot { color: var(--border); }
.rp-settings { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--text-dim); }
.rp-settings label { display: flex; align-items: center; gap: 6px; }
.rp-settings select, .rp-actionbar select {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 5px 8px; border-radius: 6px; font-size: 12px;
}
.rp-check input { accent-color: var(--accent); }

.rp-ghost, .rp-icon, .rp-play {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: border-color .15s, background .15s, opacity .15s;
}
.rp-ghost { padding: 6px 12px; }
.rp-icon { width: 34px; height: 34px; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
.rp-ghost:hover:not(:disabled), .rp-icon:hover:not(:disabled) { border-color: var(--accent); }
.rp-ghost:disabled, .rp-icon:disabled { opacity: .35; cursor: default; }

.rp-loading { padding: 60px 0; text-align: center; color: var(--text-dim); }
.rp-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.rp-muted { color: var(--text-dim); }
.rp-log p.rp-muted { font-size: 13px; margin: 4px 2px; line-height: 1.5; }

/* ---------- courbe ---------- */
.rp-curve-card { padding: 8px 14px 4px; margin-bottom: 8px; }
.rp-curve-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.rp-legend { display: flex; gap: 10px; align-items: center; }
.rp-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.rp-legend i.win { background: var(--green); }
.rp-legend i.loss { background: var(--red); }
.rp-legend i.bust { background: transparent; border: 2px solid var(--red); width: 6px; height: 6px; }
.rp-curve { position: relative; cursor: crosshair; touch-action: none; user-select: none; }
.rp-curve svg { display: block; }
.rp-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }
.rp-axis { fill: var(--text-dim); font-size: 10px; font-variant-numeric: tabular-nums; }
.rp-area { fill: url(#rp-area-grad); }
.rp-line { fill: none; stroke: var(--accent); stroke-width: 1.75; stroke-linejoin: round; }
.rp-cursor-line { stroke: var(--text); stroke-opacity: .35; stroke-width: 1; }
.rp-cursor-dot { fill: var(--text); stroke: var(--bg); stroke-width: 2; }
.rp-mk { cursor: pointer; transition: r .15s; }
.rp-mk.win { fill: var(--green); stroke: var(--panel); stroke-width: 1.5; }
.rp-mk.loss { fill: var(--red); stroke: var(--panel); stroke-width: 1.5; }
.rp-mk.bust circle { fill: var(--panel); stroke: var(--red); stroke-width: 2; }
.rp-mk.bust path { stroke: var(--red); stroke-width: 2; stroke-linecap: round; }
.rp-mk.current { stroke: var(--text); stroke-width: 2.5; }
.rp-mk.bust.current circle { fill: var(--red); }
.rp-mk.bust.current path { stroke: var(--panel); }
/* zone "Table finale" sur la courbe */
.rp-ft-band { fill: var(--gold); fill-opacity: .08; }
.rp-ft-edge { stroke: var(--gold); stroke-opacity: .7; stroke-width: 1.5; stroke-dasharray: 3 3; }
.rp-ft-label { cursor: pointer; }
.rp-ft-label rect { fill: #2e2510; stroke: var(--gold); stroke-opacity: .8; }
.rp-ft-label text { fill: var(--gold); font-size: 11px; font-weight: 700; }
.rp-ft-label:hover rect { fill: var(--gold); }
.rp-ft-label:hover text { fill: #1d1606; }
.rp-tip {
  position: absolute; top: -6px; transform: translate(-50%, -100%);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 9px; font-size: 12px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.35); z-index: 5;
}

/* ---------- barre de controle (sous la table) ---------- */
/* 3 colonnes : navigation main / lecture (centree) / infos du niveau. */
.rp-handbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  margin-top: 6px;
}
.rp-handbar-nav { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.rp-handnav { display: flex; align-items: center; gap: 8px; }
.rp-counter { font-size: 14px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.rp-counter input {
  width: 64px; text-align: center; font-size: 15px; font-weight: 600;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 4px; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.rp-counter input::-webkit-outer-spin-button, .rp-counter input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rp-counter input:focus { outline: none; border-color: var(--accent); }
.rp-bignav { display: flex; gap: 6px; }
.rp-hand-info { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); }
.rp-event { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); }
.rp-event.lvl { border-color: #7a6a33; color: var(--gold); }
.rp-event.table { border-color: #34507f; color: #8fb4ff; }
.rp-event.reentry { border-color: #6a3a7a; color: #d79bff; }
.rp-event.win { border-color: #256b42; color: var(--green); }
.rp-event.loss { border-color: #7a2f2f; color: var(--red); }
.rp-event.ft { border-color: var(--gold); background: var(--gold); color: #1d1606; }
.rp-ft-btn { border-color: #7a6a33; color: var(--gold); }
.rp-ft-btn:hover:not(:disabled) { border-color: var(--gold); }
.rp-event.ko { border-color: #7a6a33; background: #2e2510; color: var(--gold); }
.rp-ko-total { color: var(--gold); font-weight: 600; }

/* ---------- layout principal ---------- */
/* Le replayer est une page fixe a la taille de l'ecran, sans defilement :
   en-tete, courbe et barre de main prennent leur hauteur naturelle, la table
   occupe tout le reste. (Les autres vues restent a 1200px et defilent.) */
body:has(#view-replay.active) {
  height: 100svh; overflow: hidden; display: flex; flex-direction: column;
  /* fond "nebuleuse" violet / bleu derriere la table */
  background:
    radial-gradient(ellipse 60% 55% at 25% 30%, rgba(98, 60, 170, .45), transparent 70%),
    radial-gradient(ellipse 55% 60% at 80% 75%, rgba(40, 90, 170, .35), transparent 70%),
    radial-gradient(ellipse 40% 40% at 70% 15%, rgba(170, 60, 140, .25), transparent 70%),
    #12112a;
}
/* Le bandeau du site est masque dans le replayer (le bouton "Tournois"
   permet d'en sortir) : chaque pixel de hauteur va a la table. */
body:has(#view-replay.active) > header { display: none; }
/* panneaux (courbe) translucides sur le fond violet */
body:has(#view-replay.active) .rp-card {
  background: rgba(24, 22, 52, .55); border-color: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
main:has(#view-replay.active) { max-width: none; width: 100%; flex: 1; min-height: 0; padding: 10px 20px; }
#view-replay.active { display: flex; flex-direction: column; height: 100%; }
#view-replay #rp-content:not(.hidden) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* container-type: size -> la table se dimensionne sur la place restante
   (largeur ET hauteur) en gardant ses proportions. */
/* Payouts de table finale : en haut a gauche de la zone de jeu (dans la
   marge laissee par la table sur un ecran large). */
.rp-payouts {
  position: absolute; left: 0; top: 0; z-index: 5; width: 190px;
  background: rgba(20, 18, 44, .78); backdrop-filter: blur(8px);
  border: 1px solid rgba(242,193,78,.35); border-radius: 12px;
  padding: 10px 12px; font-size: 13px; font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.rp-payouts-head { display: flex; flex-direction: column; margin-bottom: 6px; }
.rp-payouts-head strong { color: var(--gold); font-size: 14px; }
.rp-payouts-head span { color: var(--text-dim); font-size: 12px; }
.rp-payouts ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rp-payouts li { display: flex; align-items: baseline; gap: 8px; padding: 3px 6px; border-radius: 6px; }
.rp-payouts .pl { width: 30px; color: var(--text-dim); font-weight: 600; }
.rp-payouts .amt { flex: 1; font-weight: 700; }
.rp-payouts li.out { opacity: .35; text-decoration: line-through; }
.rp-payouts li.next { background: rgba(242,193,78,.14); }
.rp-payouts li.next .amt { color: var(--gold); }
.rp-payouts li:first-child .amt { color: var(--gold); }
.rp-payouts li.hero { background: rgba(79,140,255,.22); opacity: 1; text-decoration: none; }
.rp-payouts .nx, .rp-payouts .you { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.rp-payouts .nx { color: var(--gold); }
.rp-payouts .you { color: #8fb4ff; }
.rp-main { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; container-type: size; }
.rp-stage { position: relative; width: min(100cqw, 100cqh * 1.6); }

/* ---------- table ---------- */
.rp-table {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  container-type: inline-size;
}
/* Tout ce qui est sur la table (sieges, cartes, mises, pot...) est dimensionne
   en em a partir de cette taille, elle-meme proportionnelle a la largeur de la
   table (cqw) : l'ensemble grossit ou retrecit d'un bloc, donc les proportions
   -- et l'absence de chevauchement -- sont les memes sur tous les ecrans. */
.rp-table > * { font-size: clamp(10px, 1.55cqw, 30px); }
.rp-felt {
  position: absolute; inset: 11% 8%;
  border-radius: 999px;
  background: radial-gradient(ellipse 70% 75% at 50% 55%, var(--felt-1) 0%, var(--felt-2) 55%, var(--felt-3) 100%);
  /* bord : liseré rose lumineux, puis rail sombre epais */
  box-shadow:
    0 0 0 .18em var(--rail-glow),
    0 0 0 1.3em var(--rail),
    0 0 0 calc(1.3em + 1px) rgba(255,255,255,.07),
    0 0 1.6em 1.3em rgba(233, 78, 119, .12),
    inset 0 0 3.5em rgba(0,0,0,.35),
    0 2.5em 5em rgba(0,0,0,.55);
}
/* ligne de piste interieure, comme sur un vrai tapis */
.rp-felt::after {
  content: ""; position: absolute; inset: 1.4em; border-radius: inherit;
  border: .12em solid rgba(255,255,255,.09);
}
.rp-center {
  position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: .5em; z-index: 1;
}
.rp-pot {
  font-size: .95em; color: rgba(255,255,255,.8); display: flex; align-items: baseline; gap: .6em;
  background: rgba(0,0,0,.16); padding: .25em 1em; border-radius: 999px; min-height: 1.8em;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.rp-pot.empty { visibility: hidden; }
.rp-pot strong { color: #fff; font-size: 1.25em; font-weight: 800; }
.rp-pot-total { font-size: .85em; color: rgba(255,255,255,.65); }
.rp-board { display: flex; gap: .4em; font-size: 1.45em; }
/* pastille sombre : le vert "positif" resterait illisible sur le tapis vert */
.rp-msg > span { background: rgba(12, 14, 30, .62); padding: .2em .8em; border-radius: 999px; }
.rp-ko-msg { color: var(--gold); }
.rp-ko-msg.hero { color: #ffd98a; }
.rp-ko-mult { font-size: .8em; opacity: .75; }
.rp-msg { display: flex; flex-direction: column; align-items: center; gap: .15em; font-size: 1em; font-weight: 600; min-height: 1.4em; text-shadow: 0 1px 2px rgba(0,0,0,.6); }

/* cartes (deck 4 couleurs) */
/* Carte pleine couleur : grand rang en haut a gauche, grand symbole dessous,
   tout en blanc sur la couleur de la famille (deck 4 couleurs). */
.pc {
  --c: var(--suit-s);
  position: relative; overflow: hidden;
  width: 2.3em; height: 3.2em; border-radius: .28em;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 82%, #fff) 0%, var(--c) 45%, color-mix(in srgb, var(--c) 85%, #000) 100%);
  color: #fff;
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  padding: .12em .2em; line-height: .95; font-weight: 800;
  box-shadow: 0 .15em .45em rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3);
  user-select: none;
}
.pc .r { font-size: 1.45em; letter-spacing: -.06em; }
.pc .s { font-size: 1.3em; margin-top: .02em; margin-left: .02em; }
.pc.s-s { --c: var(--suit-s); }
.pc.s-h { --c: var(--suit-h); }
.pc.s-d { --c: var(--suit-d); }
.pc.s-c { --c: var(--suit-c); }
/* dos de carte : rose plein, liseré clair et fines rayures */
.pc.back {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 .12em, transparent .12em .36em),
    linear-gradient(160deg, #f3708a, var(--card-back) 50%, #cf3a58);
  box-shadow: 0 .15em .45em rgba(0,0,0,.4), inset 0 0 0 .1em rgba(255,255,255,.28);
}
.pc.slot { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 .08em rgba(255,255,255,.12); }
.pc.deal { animation: rp-deal .35s cubic-bezier(.2,.8,.3,1) both; }
.pc.flip { animation: rp-flip .4s ease both; }
.pc.mini { font-size: 10px; width: 2.2em; height: 2.2em; flex-direction: row; gap: .1em; border-radius: .25em; }
.pc.mini .s { margin: 0; }
@keyframes rp-deal { from { transform: translateY(-14px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rp-flip { from { transform: rotateY(90deg); } to { transform: none; } }

/* sieges */
.rp-seat {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  z-index: 2; transition: opacity .3s;
}
.rp-seat.empty {
  width: 3em; height: 3em; border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.1);
}
.rp-hole { display: flex; gap: .2em; margin-bottom: -.8em; min-height: 3.2em; font-size: .95em; z-index: 0; }
.rp-seat.hero .rp-hole { font-size: 1.2em; }
.rp-plate {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, var(--plate), var(--plate-2));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .7em;
  padding: .4em .8em .45em;
  min-width: 8.5em; max-width: 10.5em;
  text-align: center;
  box-shadow: 0 .5em 1.4em rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
  transition: border-color .2s, box-shadow .2s;
}
.rp-pname { font-weight: 500; font-size: 1em; color: #eef0f6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-pmeta { display: flex; align-items: center; justify-content: center; gap: .4em; margin-top: .15em; }
.rp-pos {
  font-size: .72em; font-weight: 700; letter-spacing: .04em;
  background: #2b3252; color: #b9c3e6; padding: .1em .45em; border-radius: .3em;
}
.rp-stack { font-size: 1.05em; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* prime KO : pastille doree en haut a droite de la plaque */
.rp-bounty {
  position: absolute; top: -.8em; right: -.7em; z-index: 2;
  font-size: .75em; font-weight: 700; line-height: 1; white-space: nowrap;
  padding: .3em .55em; border-radius: 999px;
  background: #2e2510; border: 1px solid #7a6a33; color: var(--gold);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 .2em .6em rgba(0,0,0,.45);
  transition: background .3s, color .3s, box-shadow .3s;
}
.rp-bounty.ko {
  background: var(--gold); color: #1d1606; border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 1.2em rgba(242,193,78,.55);
  animation: rp-ko-pop .5s cubic-bezier(.2,.8,.3,1.4);
}
@keyframes rp-ko-pop { from { transform: scale(.7); } to { transform: none; } }

/* ---------- animation d'elimination KO ---------- */
.rp-ko-fx {
  position: absolute; left: 50%; top: 44%; z-index: 6;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: .15em;
  padding: .9em 2em 1em; border-radius: 1.2em; text-align: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(60, 40, 10, .92), rgba(14, 12, 30, .92));
  border: 1px solid rgba(242,193,78,.6);
  box-shadow: 0 0 0 .3em rgba(242,193,78,.12), 0 0 3em rgba(242,193,78,.35), 0 1.5em 3em rgba(0,0,0,.5);
  /* backwards (pas both) : sinon l'etat final de l'animation bloquerait
     le fondu de sortie (.gone) */
  animation: rp-ko-in .55s cubic-bezier(.2,.9,.3,1.35) backwards;
  transition: opacity .35s, transform .35s;
  pointer-events: none;
}
.rp-ko-fx .k-label {
  font-size: .8em; font-weight: 900; letter-spacing: .3em; padding: .15em .8em .15em 1.1em;
  border-radius: 999px; background: #c7303f; color: #fff;
}
.rp-ko-fx .k-total {
  font-size: 3.2em; font-weight: 900; line-height: 1.05; letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff3c4, var(--gold) 55%, #d9962b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 .25em rgba(242,193,78,.55));
  transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .45s;
  font-variant-numeric: tabular-nums;
}
.rp-ko-fx .k-victim { font-size: .9em; color: rgba(255,255,255,.75); }
.rp-ko-fx .k-split {
  display: flex; gap: .6em; margin-top: .3em;
  opacity: 0; transform: translateY(-.6em); transition: opacity .4s, transform .4s;
}
.rp-ko-fx .k-split span {
  font-weight: 800; font-size: 1.05em; padding: .2em .8em; border-radius: 999px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rp-ko-fx .k-split small { font-weight: 600; font-size: .75em; opacity: .8; }
.rp-ko-fx .k-cash { background: #1b5534; color: #9ff0bf; }
.rp-ko-fx .k-head { background: #5a4513; color: #ffd98a; }
.rp-ko-fx.split .k-total { transform: scale(.72); opacity: .55; }
.rp-ko-fx.split .k-split { opacity: 1; transform: none; }
.rp-ko-fx.gone { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
@keyframes rp-ko-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* moitie de la prime qui s'envole vers la pastille du vainqueur */
.rp-ko-orb {
  position: absolute; z-index: 7; transform: translate(-50%, -50%);
  font-weight: 900; font-size: 1.1em; white-space: nowrap; font-variant-numeric: tabular-nums;
  padding: .25em .8em; border-radius: 999px;
  background: var(--gold); color: #1d1606;
  box-shadow: 0 0 0 .2em rgba(242,193,78,.25), 0 0 1.6em rgba(242,193,78,.8);
  transition: left .75s cubic-bezier(.55,0,.25,1), top .75s cubic-bezier(.55,0,.25,1), transform .75s;
  pointer-events: none;
}
.rp-seat.hero .rp-plate { border-color: rgba(79,140,255,.7); min-width: 10em; }
.rp-seat.hero .rp-pname { font-weight: 600; }
.rp-seat.acting .rp-plate { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 22px rgba(242,193,78,.35); }
.rp-seat.folded { opacity: .38; }
.rp-seat.allin .rp-stack { color: #ff7a85; }
.rp-seat.winner .rp-plate { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 0 24px rgba(53,199,106,.35); }

.rp-tag {
  margin-top: .4em; font-size: .82em; font-weight: 700; padding: .15em .7em; border-radius: 999px;
  opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s;
  white-space: nowrap; min-height: 1.6em;
}
.rp-tag.show { opacity: 1; transform: none; }
.k-fold { background: #2a2f3a; color: #aab1be; }
.k-check { background: #2a3340; color: #d6dce6; }
.k-call { background: #1d3b66; color: #a9c8ff; }
.k-bet, .k-raise { background: #5a4513; color: #ffd98a; }
.k-allin { background: #6b1f25; color: #ffb3b8; }
.k-win { background: #1b5534; color: #9ff0bf; }

/* mises devant les joueurs */
.rp-bet {
  position: absolute; transform: translate(-50%, -50%); z-index: 1;
  display: flex; align-items: center; gap: .35em;
  /* pas de fond : jeton + montant en gras directement sur le tapis */
  padding: .1em .2em;
  font-size: 1.05em; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.5); color: #fff; font-variant-numeric: tabular-nums;
  transition: left .45s cubic-bezier(.4,0,.2,1), top .45s cubic-bezier(.4,0,.2,1), opacity .45s;
}
.rp-bet.to-pot { opacity: 0; }
/* jetons du pot qui partent vers le gagnant */
.rp-payout { z-index: 3; }
.rp-payout.arrived { opacity: 0; transition: opacity .35s !important; }
.rp-chip {
  width: 1.15em; height: 1.15em; border-radius: 50%;
  /* jeton rouge a encoches blanches */
  background:
    radial-gradient(circle, #f25a66 0 34%, #fff 35% 42%, transparent 43%),
    repeating-conic-gradient(#e3434f 0 30deg, #fff 30deg 45deg);
  box-shadow: 0 .1em .25em rgba(0,0,0,.5), inset 0 0 0 .06em rgba(0,0,0,.15);
}
.rp-dealer {
  position: absolute; transform: translate(-50%, -50%); z-index: 1;
  width: 1.6em; height: 1.6em; border-radius: 50%;
  background: #f5f5f0; color: #111; font-size: .85em; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,.45);
  transition: left .45s, top .45s;
}

.rp-overlay {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: .4em; text-align: center;
  background: rgba(15,17,21,.82); border: 1px solid var(--border); border-radius: 1em;
  padding: 1.2em 1.8em; max-width: 80%;
}
.rp-overlay strong { font-size: 1.2em; }
.rp-overlay span { font-size: .95em; color: var(--text-dim); }
.rp-overlay .rp-overlay-stack { color: var(--text); font-weight: 600; }

/* pas d'animation lors d'un saut direct */
.rp-table.instant *, .rp-table.instant *::before { transition: none !important; animation: none !important; }

/* ---------- lecture (centre de la barre de controle) ---------- */
.rp-actionbar {
  display: flex; align-items: center; gap: 8px; justify-self: center;
  background: rgba(17, 20, 27, .82); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.rp-play {
  width: 46px; height: 46px; border-radius: 50%; font-size: 15px;
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.rp-play:hover { filter: brightness(1.1); }
.rp-play.playing { background: var(--panel-2); color: var(--accent); }
.rp-step-label { min-width: 96px; text-align: center; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }


/* ---------- responsive ---------- */
/* Fenetre etroite : la barre de controle passe sur plusieurs lignes. */
@media (max-width: 1100px) {
  .rp-handbar { grid-template-columns: 1fr auto; }
  .rp-hand-info { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  main:has(#view-replay.active) { padding: 8px; }
  .rp-stage { width: min(100cqw, 100cqh * .8); }
  .rp-table { aspect-ratio: 4 / 5; }
  /* table en portrait : base plus grosse par rapport a la largeur */
  .rp-table > * { font-size: clamp(9px, 2.6cqw, 14px); }
  .rp-felt { inset: 12% 13%; }
  .rp-plate { min-width: 7em; max-width: 8.5em; }
  .rp-handbar { grid-template-columns: 1fr; gap: 8px; }
  .rp-actionbar { justify-self: center; gap: 4px; padding: 4px 6px; }
  .rp-actionbar .rp-icon { width: 30px; height: 30px; }
  .rp-play { width: 38px; height: 38px; }
  .rp-step-label { display: none; }
  .rp-payouts { width: 140px; padding: 6px 8px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-table *, .rp-table *::before { transition: none !important; animation: none !important; }
}

/* ---------- integration NewGenReplayer ---------- */
/* Tokens du prototype (tracker) traduits vers ceux du SaaS. */
:root {
  --panel: #171a2e;
  --panel-2: #1f2240;
  --border: #2c2f52;
  --text-dim: var(--muted);
  --green: #35c76a;
  --red: #ef5a5a;
}
.hidden { display: none !important; }
.positive { color: var(--green); }
.negative { color: var(--red); }
#view-replay { display: none; }
/* Le replayer prend tout l'ecran : la page (#app) s'etire et la table
   occupe la hauteur restante, sans defilement. */
body:has(#view-replay.active) { display: flex; flex-direction: column; place-items: stretch; }
body:has(#view-replay.active) #app {
  width: 100%; padding: 0; flex: 1; min-height: 0; display: flex; flex-direction: column;
}
body:has(#view-replay.active) .topbar { display: none; }
body:has(#view-replay.active) main { display: flex; flex-direction: column; }