/* Duel Casino — design system v5.
   Fond sombre profond + grille discrète, or chaud, verre.
   Mobile d'abord : tout est en clamp(), colonne centrée 520 px,
   rien ne déborde de 320 px au desktop. */

:root {
  --bg:        #04100c;
  --bg-2:      #07160f;
  --panel:     rgba(255,255,255,.04);
  --panel-2:   rgba(255,255,255,.075);
  --line:      rgba(255,255,255,.085);
  --line-soft: rgba(255,255,255,.05);

  --felt:      #0c4f31;
  --felt-hi:   #1c8b55;

  --gold:      #f0d074;
  --gold-2:    #c39a34;
  --gold-dim:  rgba(240,208,116,.30);
  --gold-soft: rgba(240,208,116,.09);

  --green:     #33c47c;
  --green-2:   #147a44;
  --red:       #e4574d;
  --red-2:     #9e2a24;
  --cyan:      #5cc9ff;

  --card:      #fdfcf8;
  --card-edge: #d7d4c9;
  --ink:       #131519;
  --suit-red:  #d2263a;

  --txt:       #eff6f1;
  --muted:     #87a595;
  --faint:     #5a7364;

  --r-sm: 11px;  --r: 17px;  --r-lg: 24px;
  --col: 520px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  --ease:   cubic-bezier(.22,.9,.28,1);
  --spring: cubic-bezier(.34,1.4,.5,1);
  --font-display: "Outfit", -apple-system, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; min-width: 0; }
[hidden] { display: none !important; }

html { height: 100%; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--txt);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
body { min-height: 100%; padding: calc(var(--safe-t) + 58px) 0 calc(var(--safe-b) + 82px); overflow-x: hidden; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -.015em; }
.num { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.ic { width: 16px; height: 16px; fill: currentColor; vertical-align: -3px; }
.ic-s { width: 13px; height: 13px; }

main#app { max-width: var(--col); margin: 0 auto; }
.bar-in { width: 100%; max-width: var(--col); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }

/* ---------- fond ---------- */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg); }

/* Tissage du feutre. L'ancienne grille orthogonale faisait "tableau de bord" :
   deux trames diagonales fines donnent la matiere d'un tapis de table, et on
   la laisse mourir vers le bas pour ne pas manger la lisibilite. */
.bg-grid {
  position: absolute; inset: -1px;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.20)        0 1px, transparent 1px 3px);
  mask-image: radial-gradient(125% 92% at 50% -6%, #000 8%, transparent 76%);
  -webkit-mask-image: radial-gradient(125% 92% at 50% -6%, #000 8%, transparent 76%);
}

/* Lampe chaude au-dessus de la table + retombee vers le bas. */
.bg-vig {
  position: absolute; inset: 0;
  background:
    radial-gradient(74% 42% at 50% -9%, rgba(255,216,138,.11), transparent 58%),
    radial-gradient(105% 62% at 50% -12%, rgba(28,139,85,.32), transparent 62%),
    radial-gradient(78% 48% at 50% 106%, rgba(240,208,116,.06), transparent 72%),
    linear-gradient(180deg, transparent 28%, var(--bg-2) 100%);
}

/* Assombrissement des bords : c'est lui qui donne le volume, sans quoi le
   fond reste une nappe plate quelle que soit la texture posee dessus. */
.bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(118% 96% at 50% 38%, transparent 42%, rgba(0,0,0,.58) 100%);
}

/* ---------- barre du haut ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: calc(var(--safe-t) + 58px); padding: var(--safe-t) 16px 0;
  /* Fond quasi opaque, SANS backdrop-filter : a 97 % d'opacite le flou ne se
     voyait pas, mais recomposer une bande floue plein ecran a chaque image
     coute cher sur telephone — et ce cout s'ajoutait pendant les animations
     de jeu. */
  background: rgba(4,16,12,.97);
  border-bottom: 1px solid var(--line-soft);
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand-mark { font-size: 20px; line-height: 1; background: linear-gradient(160deg, var(--gold), var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Le bandeau portait "DUEL" pendant que la marque disait PARADOX partout
   ailleurs (tables du chat, banniere d'accueil) : meme nom, meme or. */
.brand-name {
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: .2em; font-size: 12.5px;
  background: linear-gradient(160deg, #fdf0bd, var(--gold) 45%, var(--gold-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.wallet-chip {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 14px 8px 10px; border-radius: 999px;
  border: 1px solid rgba(240,208,116,.42);
  background: linear-gradient(180deg, rgba(240,208,116,.2), rgba(240,208,116,.05));
  box-shadow: inset 0 1px 0 rgba(255,244,205,.3), 0 4px 12px -8px rgba(240,208,116,.8);
  color: var(--txt); font: inherit; font-size: 15px; font-weight: 650; cursor: pointer;
  transition: transform .12s var(--ease); max-width: 62vw;
}
.wallet-chip:active { transform: scale(.95); }
.wallet-chip.flash { animation: chipflash .6s var(--ease); }
@keyframes chipflash {
  30% { box-shadow: 0 0 0 7px rgba(240,208,116,.16); transform: scale(1.06); }
  100% { box-shadow: 0 0 0 0 rgba(240,208,116,0); }
}
.wallet-amount { white-space: nowrap; }
.coin { width: 17px; height: 17px; color: var(--gold); flex: none; }
.coin--lg { width: 26px; height: 26px; }
.wallet-locked { display: flex; align-items: center; gap: 3px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.wallet-locked::before {
  content: ""; width: 10px; height: 10px; flex: none; background: var(--muted);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z"/></svg>') center/contain no-repeat;
}

/* ---------- écrans ---------- */
.screen { display: none; padding: 14px clamp(13px, 4vw, 18px) 0; }
.screen.is-active { display: block; animation: screenIn .3s var(--ease); }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } }
.screen-title { font-size: 22px; margin: 4px 0 14px; }

/* Intitule de section prolonge par un filet qui s'eteint : cale le regard sur
   la colonne et evite le gris nu suspendu dans le vide. */
.field-label {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 9px; color: var(--faint);
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
.field-label::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--gold-dim), transparent 78%);
}
.sec { margin-top: 26px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sec-head h2 { font-size: 17.5px; }

.panel {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(28,139,85,.13), var(--panel)), rgba(7,22,15,.7);
  padding: clamp(13px, 3.6vw, 17px);
  box-shadow: 0 20px 44px -28px #000, inset 0 1px 0 rgba(255,255,255,.055);
}

/* ---------- bandeau de marque ---------- */
.hero-brand {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 6px 0 18px; position: relative;
}
.hero-mark {
  font-size: 20px; line-height: 1; color: var(--gold);
  filter: drop-shadow(0 2px 6px rgba(240,208,116,.35));
}
.hero-name {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic; font-weight: 800;
  font-size: clamp(30px, 9.5vw, 40px); letter-spacing: .06em; line-height: 1.05;
  background: linear-gradient(178deg, #fff3cd 4%, #f0d074 40%, #b0862a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-tag {
  font-family: var(--font-display); font-weight: 700;
  font-size: 9.5px; letter-spacing: .34em; text-indent: .34em;
  color: var(--faint);
}
/* filets lateraux, comme sur les tables */
.hero-brand::before, .hero-brand::after {
  content: ""; position: absolute; top: 34px; width: clamp(28px, 12vw, 54px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}
.hero-brand::before { left: 4%; }
.hero-brand::after { right: 4%; }

/* ---------- barre de salle ---------- */
.room {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: 9px 12px; margin-bottom: 22px;
  border: 1px solid var(--line-soft); border-radius: 999px;
  background: rgba(255,255,255,.028);
  font-size: 12px; color: var(--muted);
}
.room b { color: var(--txt); font-weight: 700; }
.room-live { display: flex; align-items: center; gap: 6px; }
.room-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(51,196,124,.9); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .35; } }
.room-sep { width: 1px; height: 12px; background: var(--line); }

/* ---------- sélecteur de jeu ---------- */
.games { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-bottom: 20px; }
.game {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 5px 12px;
  border: 1px solid var(--line); border-radius: 19px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(3,12,8,.6));
  color: var(--txt); font: inherit; cursor: pointer;
  transition: transform .18s var(--spring), border-color .22s, box-shadow .22s;
}
.game::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 50% at 50% 0%, rgba(240,208,116,.22), transparent 70%);
  opacity: 0; transition: opacity .28s;
}
/* Filet clair sur l'arete haute : une carte sans lumiere sur le bord reste un
   rectangle, avec elle elle a une epaisseur. */
.game::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
}
.game:active { transform: scale(.95); }
.game.is-on {
  border-color: rgba(240,208,116,.62);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -14px rgba(240,208,116,.65),
              0 0 0 1px rgba(240,208,116,.18),
              inset 0 1px 0 rgba(255,255,255,.14);
}
.game.is-on::before { opacity: 1; }
.game.is-on::after { background: linear-gradient(90deg, transparent, rgba(255,236,178,.7), transparent); }
.game-name { position: relative; font-family: var(--font-display); font-weight: 750; font-size: clamp(13.5px, 4vw, 15.5px); margin-top: 10px; letter-spacing: .01em; }
.game-sub { position: relative; color: var(--muted); font-size: clamp(10.5px, 3.1vw, 11.5px); text-align: center; line-height: 1.3; margin-top: 2px; }
.game.is-on .game-sub { color: rgba(240,208,116,.75); }
.game-art { position: relative; height: 54px; width: 100%; display: flex; align-items: center; justify-content: center; }

/* art cartes */
.gc {
  position: absolute; width: 28px; height: 39px; border-radius: 5px;
  background: linear-gradient(155deg, #fff, #e6e3d8);
  display: grid; place-items: center;
  box-shadow: 0 5px 12px -4px rgba(0,0,0,.8);
  transition: transform .34s var(--spring);
}
.gc svg { width: 14px; height: 14px; }
.gc--a svg { fill: var(--ink); }
.gc--b svg { fill: var(--suit-red); }
.gc--a { transform: rotate(-11deg) translateX(-7px); }
.gc--b { transform: rotate(11deg) translateX(7px); }
.game.is-on .gc--a { transform: rotate(-17deg) translate(-9px,-2px); }
.game.is-on .gc--b { transform: rotate(17deg) translate(9px,-2px); }

/* art dés */
.gd {
  width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(150deg, #fff 20%, #ddd9cc);
  display: grid; grid-template: repeat(3,1fr)/repeat(3,1fr); padding: 6px;
  box-shadow: 0 6px 13px -4px rgba(0,0,0,.85), inset 0 -3px 6px rgba(0,0,0,.09);
  transform: rotate(-9deg); transition: transform .34s var(--spring);
}
.game.is-on .gd { transform: rotate(11deg) scale(1.08); }
.gd i { width: 5.5px; height: 5.5px; border-radius: 50%; background: var(--ink); align-self: center; justify-self: center; box-shadow: inset 0 1px 1px rgba(0,0,0,.6); }
.gd i:nth-child(1) { grid-area: 1/1; } .gd i:nth-child(2) { grid-area: 1/3; }
.gd i:nth-child(3) { grid-area: 2/2; }
.gd i:nth-child(4) { grid-area: 3/1; } .gd i:nth-child(5) { grid-area: 3/3; }

/* art pile ou face */
/* La piece etait un simple disque plat. On lui donne un listel (l'anneau en
   relief du bord), un creux grave au centre et un reflet : les trois choses
   qui font lire une piece frappee plutot qu'un rond de couleur. */
.gp {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 32% 24%, #fffbe8 0%, #f7e3a4 22%, #e3bd5c 52%, #a8801f 100%);
  box-shadow:
    0 6px 13px -4px rgba(0,0,0,.85),
    inset 0 0 0 1.5px rgba(255,247,214,.55),
    inset 0 0 0 3.5px rgba(126,94,26,.5),
    inset 0 -4px 7px rgba(110,80,18,.4),
    inset 0 3px 5px rgba(255,252,232,.5);
  transform: rotateY(0deg); transition: transform .5s var(--spring);
}
.gp::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(110,80,18,.45);
}
.gp svg {
  position: relative; width: 15px; height: 15px; fill: #7a5a18;
  filter: drop-shadow(0 1px 0 rgba(255,250,225,.6));
}
.game.is-on .gp { transform: rotateY(180deg) scale(1.06); }

/* art crash */
/* La courbe etait tracee en gris-vert eteint : a cote des cartes blanches et
   du de ivoire, la vignette Crash avait l'air inachevee. Elle est desormais
   doree en permanence, avec la trainee sous la courbe et une etincelle au
   sommet — la selection ne fait qu'intensifier au lieu de tout revealer. */
.gx { width: 56px; height: 40px; overflow: visible; }
.gx-line {
  fill: none; stroke: rgba(240,208,116,.62); stroke-width: 3; stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(240,208,116,.35));
  transition: stroke .25s, filter .25s;
}
.gx-fill { fill: rgba(240,208,116,.07); transition: fill .25s; }
.gx-dot {
  fill: #fff2c4; filter: drop-shadow(0 0 5px rgba(240,208,116,.9));
  transition: fill .25s, filter .25s;
}
.game.is-on .gx-line { stroke: var(--gold); filter: drop-shadow(0 0 8px rgba(240,208,116,.75)); }
.game.is-on .gx-fill { fill: rgba(240,208,116,.2); }
.game.is-on .gx-dot { filter: drop-shadow(0 0 9px rgba(255,240,190,1)); }

/* ---------- mises ---------- */
.stakes { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; margin-bottom: 18px; }
.chip {
  padding: 12px 1px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: rgba(3,12,8,.55); color: var(--txt);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(11px, 3.3vw, 13px); font-variant-numeric: tabular-nums;
  cursor: pointer; transition: all .18s var(--spring); white-space: nowrap;
}
.chip:active { transform: scale(.9); }
.chip.is-on {
  border-color: transparent; color: #17251b;
  background: linear-gradient(180deg, #fbe49a, var(--gold-2));
  box-shadow: 0 9px 20px -9px rgba(240,208,116,.85), inset 0 1px 0 rgba(255,255,255,.55);
  transform: translateY(-2px);
}

/* ---------- adversaire ---------- */
.opp-row { margin-bottom: 18px; }
.opp-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 13px; background: rgba(3,12,8,.6); border: 1px solid var(--line); }
.opp {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 4px; border: 0; border-radius: 10px; background: none; color: var(--muted);
  font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; transition: all .2s var(--ease);
}
.opp svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.opp.is-on {
  color: #1a1206; font-weight: 750;
  background: linear-gradient(180deg, #f8e5a8, var(--gold) 55%, #c9a03a);
  box-shadow: 0 6px 14px -7px rgba(240,208,116,.8), inset 0 1px 0 rgba(255,255,255,.6);
}
.opp.is-on svg { fill: #4a3609; }

/* ---------- CTA ---------- */
/* Bouton principal en or, pas en vert. Le vert menthe d'avant etait la seule
   couleur de l'ecran etrangere a la palette — il tirait l'oeil comme un bouton
   d'appli generique. L'or est la couleur de la marque, du jeton et de la mise
   gagnante : le geste principal appartient enfin au meme monde.
   Le vert reste reserve aux gains (fil, historique, verdict). */
.cta {
  position: relative; overflow: hidden;
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 17px 16px; border: 0; border-radius: 18px;
  background: linear-gradient(180deg, #fdf0bd 0%, var(--gold) 26%, #d9ae45 62%, #a8801f 100%);
  color: #1a1206; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(15px, 4.3vw, 16.5px); letter-spacing: .01em; cursor: pointer;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow: 0 18px 34px -16px rgba(240,208,116,.75),
              0 2px 0 rgba(120,88,20,.55),
              inset 0 1px 0 rgba(255,255,255,.75),
              inset 0 -2px 0 rgba(120,88,20,.35);
  transition: transform .13s var(--spring), filter .2s;
}
/* Reflet qui balaie le bouton : discret, il suffit a le faire lire comme du
   metal plutot que comme un aplat. */
/* ATTENTION : ce reflet tourne en boucle infinie tant que l'ecran Jouer est
   affiche. Il DOIT se deplacer en `transform` et rien d'autre.
   Anime en `left` (ce qu'il faisait), il forcait un recalcul de mise en page
   a chaque image, en permanence — toute la page saccadait, y compris le
   lancer de des. Regle generale ici : aucune animation ne touche left/top/
   width/height ; `tests/test_webapp_assets.py` le verifie. */
.cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  will-change: transform;
  animation: ctaSheen 4.6s ease-in-out infinite;
}
@keyframes ctaSheen {
  0%, 62%   { transform: translateX(-130%) skewX(-18deg); }
  86%, 100% { transform: translateX(300%)  skewX(-18deg); }
}
.cta:active { transform: scale(.975) translateY(1px); filter: brightness(1.06); }
.cta[disabled] { opacity: .45; pointer-events: none; }
.cta[disabled]::after { animation: none; }
.cta-sep { width: 1px; height: 20px; background: rgba(90,64,12,.35); flex: none; }
.cta-amount { position: relative; display: flex; align-items: center; gap: 6px; }
.cta-label { position: relative; }
.cta-amount .coin { width: 16px; height: 16px; color: #6b4d10; }
.cta--slim { width: auto; flex: 1; padding: 14px 14px; font-size: 14.5px; gap: 0; }
.pot-hint { margin: 11px 0 0; text-align: center; color: var(--faint); font-size: 12px; }
.pot-hint b { color: var(--gold); }

.ghost {
  padding: 14px 13px; border: 1px solid var(--line); border-radius: 15px;
  background: var(--panel); color: var(--txt);
  font: inherit; font-weight: 650; font-size: 13.5px; cursor: pointer;
  transition: transform .13s var(--ease), background .2s; white-space: nowrap;
}
.ghost:active { transform: scale(.96); background: var(--panel-2); }
.ghost--ico { display: flex; align-items: center; gap: 6px; }
.ghost--ico svg { width: 15px; height: 15px; fill: var(--gold); }

/* ---------- duels ouverts ---------- */
.live { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(51,196,124,.85); animation: breathe 2.4s ease-in-out infinite; }
.live.is-off i { background: var(--red); animation: none; box-shadow: none; }

.lobby-list { display: flex; flex-direction: column; gap: 9px; }
.lobby {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(150deg, rgba(28,139,85,.11), var(--panel)), rgba(7,22,15,.6);
  animation: rowIn .32s var(--ease) backwards;
}
.lobby:nth-child(2) { animation-delay: .05s; }
.lobby:nth-child(3) { animation-delay: .1s; }
@keyframes rowIn { from { opacity: 0; transform: translateY(10px); } }
.lobby.is-mine { border-color: var(--gold-dim); background: linear-gradient(150deg, rgba(240,208,116,.09), var(--panel)), rgba(7,22,15,.6); }

.avatar {
  width: 42px; height: 42px; flex: none; border-radius: 14px; position: relative;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 17px; color: #08130d;
  box-shadow: inset 0 -9px 15px rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.28);
}
.avatar .a-game {
  position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px;
  border-radius: 7px; display: grid; place-items: center; z-index: 3;
  background: #0a1811; border: 1px solid var(--line);
}
.avatar .a-game svg { width: 11px; height: 11px; fill: var(--gold); }

/* Photo de profil Telegram posee sur l'initiale. Elle n'apparait qu'une fois
   chargee (`is-on`, mis par le JS) : si le joueur n'en a pas, l'initiale
   coloree reste visible et rien ne bouge. */
.avatar .a-ini { position: relative; z-index: 1; }
.avatar .a-img {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2;
  border-radius: inherit; object-fit: cover; object-position: center;
  opacity: 0; transition: opacity .3s var(--ease);
}
.avatar .a-img.is-on { opacity: 1; }

.avatar--sm { width: 34px; height: 34px; border-radius: 11px; font-size: 14px; }
.avatar--xs { width: 22px; height: 22px; border-radius: 7px; font-size: 10.5px; }
.avatar--sm .a-game, .avatar--xs .a-game {
  right: -4px; bottom: -4px; width: 15px; height: 15px; border-radius: 5px;
}
.avatar--sm .a-game svg, .avatar--xs .a-game svg { width: 9px; height: 9px; }

/* Pseudo a cote d'une photo : c'est lui qui porte la coupure, pas le parent
   (sinon la photo se fait rogner quand le nom est long). */
.pl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lobby-main { flex: 1; min-width: 0; }
.lobby-host { font-weight: 680; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lobby-meta { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 5px; margin-top: 2px; overflow: hidden; }
.lobby-meta > * { white-space: nowrap; }
.lobby-stake { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.lobby-timer { font-variant-numeric: tabular-nums; color: var(--faint); font-size: 11.5px; }

.join {
  padding: 11px 16px; border: 0; border-radius: 999px; flex: none;
  background: linear-gradient(180deg, #3ad487, var(--green-2)); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; cursor: pointer;
  box-shadow: 0 10px 20px -12px rgba(51,196,124,.95), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .13s var(--spring);
}
.join:active { transform: scale(.9); }
.join.is-cancel { background: var(--panel-2); box-shadow: none; color: var(--muted); }

.skeleton {
  height: 66px; border-radius: var(--r);
  background: linear-gradient(100deg, var(--panel) 40%, var(--panel-2) 50%, var(--panel) 60%);
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.empty { color: var(--muted); text-align: center; padding: 26px 14px; font-size: 13px; line-height: 1.6; }
.empty p { margin: 0; }
.empty-ico { width: 32px; height: 32px; fill: var(--faint); margin-bottom: 9px; }

/* ---------- flux d'activité ---------- */
.feed { display: flex; flex-direction: column; gap: 7px; }
.feed-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: 13px; border: 1px solid var(--line-soft); background: rgba(255,255,255,.022);
  font-size: 12.5px; animation: rowIn .3s var(--ease) backwards;
}
.feed-ico { width: 26px; height: 26px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--gold-soft); }
.feed-ico svg { width: 13px; height: 13px; fill: var(--gold); }
.feed-main { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.feed-main b { color: var(--txt); font-weight: 650; }
.feed-amt { flex: none; font-family: var(--font-display); font-weight: 700; color: var(--green); font-size: 13px; }
.feed-time { flex: none; color: var(--faint); font-size: 11px; }

/* ---------- table ---------- */
.screen--table { padding: 6px clamp(10px, 3vw, 14px) 0; }
/* Meme identite que les tables rendues par le bot : cadre sombre, feutre en
   degrade radial, grain, double lisere or et angles ornes. */
.table {
  border-radius: 28px;
  padding: 14px clamp(10px, 3.4vw, 14px) 17px;
  /* Bord en or brosse plutot qu'un trait uni : c'est ce qui fait lire un
     encadrement metallique et non une simple bordure de couleur. */
  border: 3px solid transparent;
  background:
    radial-gradient(95% 62% at 50% 38%, #1b8450 0%, #0d5836 50%, #06301d 100%) padding-box,
    linear-gradient(150deg, #8a6f2c 0%, #e8cd82 18%, #9b7c33 42%, #f2dc9f 62%, #7d6427 100%) border-box;
  box-shadow:
    0 34px 64px -32px #000,
    inset 0 0 0 1px rgba(240,208,116,.22),
    inset 0 0 42px rgba(0,0,0,.55),
    inset 0 2px 0 rgba(255,255,255,.07);
  position: relative; overflow: hidden;
}
/* grain du feutre */
.table::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    repeating-linear-gradient(37deg, rgba(255,255,255,.026) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-53deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px);
}
/* lisere interieur fin */
.table::after {
  content: ""; position: absolute; inset: 7px; border-radius: 21px;
  border: 1px solid rgba(196,168,92,.42); pointer-events: none;
}
/* Arcs d'angle de la table. Nom distinct de `.corner`, qui designe deja les
   coins rang+couleur des cartes a jouer — la collision effacait les rangs. */
.tcorner {
  position: absolute; width: 44px; height: 44px; pointer-events: none; z-index: 1;
  border: 1.5px solid rgba(146,120,52,.75); border-radius: 50%;
  clip-path: inset(0 0 50% 50%);
}
.tcorner--tl { top: 12px; left: 12px; transform: rotate(180deg); }
.tcorner--tr { top: 12px; right: 12px; transform: rotate(270deg); }
.tcorner--bl { bottom: 12px; left: 12px; transform: rotate(90deg); }
.tcorner--br { bottom: 12px; right: 12px; }
/* NE PAS redeclarer .table::after ici : une seconde regle ecrasait le lisere
   dore interieur defini plus haut, qui ne s'affichait donc jamais. La texture
   du feutre est deja portee par .table::before. */
.table.shake { animation: shake .48s var(--ease); }
@keyframes shake {
  20% { transform: translate(-5px, 2px) rotate(-.45deg); }
  40% { transform: translate(5px, -3px) rotate(.45deg); }
  60% { transform: translate(-3px, -2px); }
  80% { transform: translate(3px, 2px); }
}

.table-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: relative; z-index: 3; }
.pill {
  display: flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px;
  font-size: clamp(11px, 3.2vw, 12.5px); font-weight: 650;
  background: rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.08); white-space: nowrap;
}
.pill .coin { width: 14px; height: 14px; }
.pill b { color: var(--gold); }
.pill--red { background: rgba(158,42,36,.5); }
.table-brand {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: center; gap: 1px;
}
.brand-word {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic; font-weight: 800;
  font-size: clamp(17px, 5.2vw, 22px); letter-spacing: .07em;
  background: linear-gradient(178deg, #fbeaad 8%, #e8c66a 46%, #b08d2c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap; line-height: 1.15;
}
.table-game {
  font-family: var(--font-display); font-size: clamp(8.5px, 2.5vw, 10px);
  letter-spacing: .28em; text-transform: uppercase; color: rgba(239,246,241,.46);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

.arena { position: relative; z-index: 2; }
.verdict { z-index: 3; }
.arena--hands { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 4px; padding: 24px 0 8px; min-height: 240px; }
.seat { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.who { text-align: center; max-width: 100%; }
.who-name {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-weight: 700; font-size: 13.5px; max-width: 32vw;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s;
}
.who-name .crown { width: 15px; height: 15px; fill: var(--gold); flex: none; display: none; }
.seat.is-winner .who-name { color: var(--gold); }
.seat.is-winner .crown { display: block; animation: crownIn .5s var(--spring); }
@keyframes crownIn { from { transform: translateY(-9px) scale(0) rotate(-25deg); } }
.who-val { display: block; color: rgba(239,246,241,.55); font-size: 12.5px; min-height: 18px; margin-top: 3px; }

.versus {
  width: clamp(38px, 11vw, 46px); height: clamp(38px, 11vw, 46px); border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,0,0,.4); border: 1px solid rgba(240,208,116,.4);
  color: var(--gold); font-family: var(--font-display); font-weight: 800; font-size: clamp(11px, 3vw, 13px);
  margin-top: clamp(42px, 14vw, 56px); transition: transform .4s var(--spring);
}
.versus.is-hot { animation: vsPulse 1.4s ease-in-out infinite; }
@keyframes vsPulse { 50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(240,208,116,.4); } }

/* ----- cartes ----- */
.hand { perspective: 1000px; height: calc(clamp(88px, 25vw, 106px) * 1.42 + 8px); display: flex; align-items: center; }
.playing-card {
  /* --flip pilote A LA FOIS la rotation et le moment ou la face apparait.
     Les deux DOIVENT rester synchronises : si la face se revele apres le
     passage a 90 deg, le dos est deja masque par backface-visibility et la
     carte disparait completement pendant l'ecart (bug constate).
     D'ou l'autre exigence : une courbe SYMETRIQUE, pour laquelle la carte
     atteint 90 deg exactement a la moitie du temps. Avec l'ancienne courbe
     tres en avant (.22,.9,.28,1) le milieu tombait vers 13 % du temps. */
  --flip: .66s;
  --ease-flip: cubic-bezier(.55, 0, .45, 1);
  position: relative; width: clamp(88px, 25vw, 106px); height: calc(clamp(88px, 25vw, 106px) * 1.4);
  transform-style: preserve-3d;
  transition: transform var(--flip) var(--ease-flip);
  transform: rotateY(180deg);
  will-change: transform;   /* etablit le contexte 3D des la 1re image */
}
.playing-card.is-face { transform: rotateY(0deg); }
.playing-card.deal { animation: deal .6s var(--ease) backwards; }
@keyframes deal {
  from { transform: translate(-24px, -140px) rotateY(180deg) rotateZ(-22deg); opacity: 0; }
  60%  { opacity: 1; }
}
.face, .back {
  position: absolute; inset: 0; border-radius: 12px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 16px 30px -12px rgba(0,0,0,.9), 0 2px 0 rgba(0,0,0,.35);
}
.face {
  background: linear-gradient(160deg, #fff 10%, var(--card) 55%, #efece2);
  border: 1px solid var(--card-edge); display: grid; place-items: center; overflow: hidden;
  /* backface-visibility ne suffit pas : sur le premier rendu la face blanche
     apparait une fraction de seconde avant que le contexte 3D ne s'applique.
     On la masque tant que la carte n'est pas retournee. */
  opacity: 0;
}
/* Bascule calculee depuis --flip, jamais ecrite en dur : les deux ne peuvent
   plus se desynchroniser si on change la duree du retournement. */
.playing-card.is-face .face { opacity: 1; transition: opacity 0s calc(var(--flip) / 2); }
.face::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(112deg, transparent 34%, rgba(255,255,255,.62) 50%, transparent 64%);
  transform: translateX(-125%);
}
/* Le reflet part juste apres que la face soit apparue, pas avant. */
.playing-card.is-face .face::after {
  animation: cardSheen .85s calc(var(--flip) / 2 + .06s) var(--ease) forwards;
}
@keyframes cardSheen { to { transform: translateX(125%); } }
.back {
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 3px, transparent 3px 7px),
    linear-gradient(160deg, #1e3273, #0e1a42);
  border: 1px solid rgba(240,208,116,.42); display: grid; place-items: center;
}
.back::before { content: ""; position: absolute; inset: 7px; border-radius: 8px; border: 1px solid rgba(240,208,116,.3); }
.back svg { width: 32px; height: 32px; fill: rgba(240,208,116,.5); }

.pip-big { width: 46%; height: 46%; }
.corner { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 1px; font-family: var(--font-display); font-weight: 800; font-size: clamp(15px, 4.6vw, 19px); line-height: 1; }
.corner svg { width: 13px; height: 13px; }
.corner--tl { top: 8px; left: 9px; }
.corner--br { bottom: 8px; right: 9px; transform: rotate(180deg); }
.is-red { fill: var(--suit-red); color: var(--suit-red); }
.is-black { fill: var(--ink); color: var(--ink); }

.playing-card.win .face { box-shadow: 0 0 0 3px var(--gold), 0 20px 40px -12px rgba(240,208,116,.75); }
.playing-card.win { animation: lift .6s var(--spring); }
@keyframes lift { 45% { transform: rotateY(0) translateY(-14px) scale(1.06); } }

/* ----- dés : cube 3D éclairé ----- */
.die3d-scene {
  --die: clamp(72px, 21vw, 92px);
  width: var(--die); height: var(--die);
  perspective: calc(var(--die) * 6); position: relative; margin-top: calc(var(--die) * .2);
}
.die3d-scene::after {
  content: ""; position: absolute; left: 2%; right: 2%; bottom: calc(var(--die) * -.26);
  height: calc(var(--die) * .2); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20,0,0,.5), transparent 74%);
}
.die3d {
  width: 100%; height: 100%; position: relative; transform-style: preserve-3d;
  /* le repos est pilote par une animation dediee (rebonds), pas une transition */
}
.die3d .f {
  position: absolute; inset: 0; border-radius: 13%;
  display: grid; grid-template: repeat(3,1fr)/repeat(3,1fr); padding: 13%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  /* de de casino : resine rouge profonde, arete claire en haut a gauche */
  background:
    radial-gradient(circle at 30% 26%, #e8564c 0%, #c9302a 42%, #97120f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,190,180,.45),
    inset 0 calc(var(--die) * .10) calc(var(--die) * .16) rgba(255,255,255,.24),
    inset 0 calc(var(--die) * -.10) calc(var(--die) * .16) rgba(60,0,0,.5);
}
.die3d .f i {
  width: 32%; height: 32%; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #ffffff 0%, #fdf6e6 55%, #ddcfae 100%);
  align-self: center; justify-self: center;
  box-shadow: inset 0 -1px 2px rgba(120,90,60,.5),
              0 1px 2px rgba(70,0,0,.55);
}
.die3d-scene.win .die3d .f { box-shadow: 0 0 0 3px var(--gold); }
/* Attente : rotation lente et reguliere, lisible. */
.die3d.idle { animation: dieIdle 4.2s linear infinite; }
@keyframes dieIdle {
  0%   { transform: rotateX(-16deg) rotateY(0deg); }
  100% { transform: rotateX(-16deg) rotateY(360deg); }
}

/* Lancer.
   Deux principes, absents de la version precedente, qui font toute la fluidite.

   1. Chaque segment porte SA courbe (animation-timing-function dans l'image-cle).
      Avant, une seule courbe tres en avant s'appliquait entre chaque paire :
      le de bondissait puis trainait, quatre fois de suite — c'etait ca, la
      saccade. Ici la chute accelere, chaque rebond decelere en montant.

   2. Toutes les orientations sont exprimees RELATIVEMENT a l'angle final
      (var(--rx)/var(--ry)). Ecrites en absolu, l'ecart a parcourir sur le
      dernier segment changeait du simple au triple selon la face tiree : le de
      finissait tantot en douceur, tantot en trombe. En relatif, chaque segment
      balaie toujours le meme angle, donc la deceleration est identique quel
      que soit le resultat.
   Les totaux (1080 et 720 deg) sont des multiples de 360 : le de s'arrete
   exactement sur la face tiree. Ne pas y toucher sans refaire le calcul. */
.die3d.throwing { animation: dieThrow 1.25s linear forwards; will-change: transform; }
@keyframes dieThrow {
  /* chute libre */
  0% {
    transform: translate3d(0,-155%,0) rotateX(calc(var(--rx) - 45deg))  rotateY(calc(var(--ry) - 30deg)) scale(.9);
    animation-timing-function: cubic-bezier(.33,.06,.72,.5);
  }
  /* premier impact */
  36% {
    transform: translate3d(0,0,0)     rotateX(calc(var(--rx) + 472deg)) rotateY(calc(var(--ry) + 315deg)) scale(1);
    animation-timing-function: cubic-bezier(.16,.72,.4,1);
  }
  /* rebond haut */
  50% {
    transform: translate3d(0,-32%,0)  rotateX(calc(var(--rx) + 652deg)) rotateY(calc(var(--ry) + 435deg)) scale(1);
    animation-timing-function: cubic-bezier(.5,0,.8,.55);
  }
  /* deuxieme impact */
  64% {
    transform: translate3d(0,0,0)     rotateX(calc(var(--rx) + 804deg)) rotateY(calc(var(--ry) + 536deg)) scale(1);
    animation-timing-function: cubic-bezier(.16,.75,.4,1);
  }
  /* dernier sursaut */
  73% {
    transform: translate3d(0,-10%,0)  rotateX(calc(var(--rx) + 889deg)) rotateY(calc(var(--ry) + 592deg)) scale(1);
    animation-timing-function: cubic-bezier(.5,0,.8,.6);
  }
  /* pose */
  80% {
    transform: translate3d(0,0,0)     rotateX(calc(var(--rx) + 945deg)) rotateY(calc(var(--ry) + 630deg)) scale(1);
    animation-timing-function: cubic-bezier(.16,.62,.28,1);
  }
  /* immobilisation sur la face tiree */
  100% {
    transform: translate3d(0,0,0)     rotateX(calc(var(--rx) + 1080deg)) rotateY(calc(var(--ry) + 720deg)) scale(1);
  }
}

/* L'ombre suit les memes temps : serree quand le de est haut, large a chaque
   contact. Desynchronisee, elle trahit immediatement le truquage. */
.die3d-scene.throwing::after { animation: dieShadow 1.25s linear forwards; }
@keyframes dieShadow {
  0%   { transform: scale(.34); opacity: .1;  animation-timing-function: cubic-bezier(.33,.06,.72,.5); }
  36%  { transform: scale(1.1); opacity: .52; animation-timing-function: cubic-bezier(.16,.72,.4,1); }
  50%  { transform: scale(.66); opacity: .3;  animation-timing-function: cubic-bezier(.5,0,.8,.55); }
  64%  { transform: scale(1.04); opacity: .5; animation-timing-function: cubic-bezier(.16,.75,.4,1); }
  73%  { transform: scale(.88); opacity: .4;  animation-timing-function: cubic-bezier(.5,0,.8,.6); }
  80%  { transform: scale(1.01); opacity: .5; animation-timing-function: cubic-bezier(.16,.62,.28,1); }
  100% { transform: scale(1);   opacity: .5; }
}


.table-actions { display: flex; gap: 8px; margin-top: 14px; }
.table-actions .ghost { flex: none; }


/* ---------- crash ---------- */
.arena--crash { padding: 12px 0 4px; }
.turn { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 30px; margin-bottom: 9px; }
.turn-who {
  padding: 6px 14px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  background: rgba(0,0,0,.4); border: 1px solid var(--gold-dim); color: var(--gold);
  animation: turnIn .4s var(--spring);
}
@keyframes turnIn { from { opacity: 0; transform: translateY(-8px) scale(.9); } }
.turn-goal { font-size: 12px; color: var(--muted); font-family: var(--font-display); font-weight: 650; }
.turn-goal b { color: var(--cyan); }

.crash-frame {
  position: relative; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #050f1a 0%, #06170f 100%);
  border: 1px solid rgba(255,255,255,.08);
  height: clamp(198px, 58vw, 250px);
}
#crash-canvas { width: 100%; height: 100%; display: block; }
.rocket {
  position: absolute; left: 0; top: 0; width: clamp(24px, 7.4vw, 32px); height: auto;
  pointer-events: none; transform: translate(-300px, -300px); will-change: transform;
  filter: drop-shadow(0 3px 9px rgba(0,0,0,.6));
}
.rocket .rk-flame { transform-origin: 32px 76px; animation: flame .1s ease-in-out infinite alternate; }
@keyframes flame {
  from { transform: scaleY(.78) scaleX(.9); opacity: .85; }
  to   { transform: scaleY(1.18) scaleX(1.06); opacity: 1; }
}
.rocket.is-dead { display: none; }

.crash-mult {
  position: absolute; top: 9px; left: 0; right: 0; text-align: center;
  font-size: clamp(28px, 9vw, 38px); font-weight: 800; letter-spacing: -.02em;
  color: var(--txt); text-shadow: 0 2px 20px rgba(0,0,0,.8);
  transition: color .25s, transform .25s var(--spring); pointer-events: none;
}
.crash-mult.is-hot { color: var(--gold); }
.crash-mult.is-dead { color: var(--red); transform: scale(1.08); }
.crash-mult.beat { color: var(--green); }

.crash-count { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(2,10,7,.6); pointer-events: none; }
.crash-count svg { position: absolute; left: 50%; top: 50%; width: clamp(86px, 26vw, 110px); height: clamp(86px, 26vw, 110px); transform: translate(-50%,-50%) rotate(-90deg); }
.cc-track { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 5; }
.cc-ring { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: 0; }
.cc-ring.tick { transition: stroke-dashoffset 1s linear; }
.crash-count span { font-family: var(--font-display); font-size: clamp(34px, 11vw, 46px); font-weight: 800; color: var(--gold); animation: count .55s var(--spring); }
@keyframes count { from { transform: scale(2.1); opacity: 0; } }
.crash-count span.go { color: #fff; animation: goBurst .45s var(--spring); }
@keyframes goBurst { from { transform: scale(.3); } 60% { transform: scale(1.4); } }

.crash-seats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.crash-seat {
  display: flex; align-items: center; gap: 7px; padding: 10px 11px; border-radius: 13px;
  background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.07);
  transition: border-color .3s, background .3s, transform .3s var(--spring);
}
.crash-seat.is-active { border-color: var(--gold-dim); background: rgba(240,208,116,.07); transform: translateY(-2px); }
.cs-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cs-dot--a { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.cs-dot--b { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.crash-seat.is-dead { opacity: .82; }
.crash-seat.is-dead .cs-val { color: var(--red); }
.crash-seat.is-winner { border-color: var(--gold); background: rgba(240,208,116,.11); }
.crash-seat.is-winner .cs-val { color: var(--gold); }
.cs-name { display: flex; align-items: center; gap: 6px; font-weight: 650; font-size: 12.5px; min-width: 0; flex: 1; }
.cs-val { font-size: 13px; color: var(--muted); flex: none; }

@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(51,196,124,0); } 100% { box-shadow: 0 0 0 0 rgba(51,196,124,0); } }

/* ---------- verdict ---------- */
.verdict {
  position: relative; z-index: 3; margin: 9px auto 0;
  text-align: center; min-height: 48px;
  display: flex; align-items: center; justify-content: center;
}
.verdict span#verdict-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 21px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(13.5px, 4vw, 15.5px);
  opacity: 0; transform: scale(.82);
  transition: opacity .35s var(--spring), transform .35s var(--spring);
  border: 1px solid rgba(240,208,116,.3); max-width: 100%;
}
.verdict #verdict-ico { width: 18px; height: 18px; fill: currentColor; flex: none; }
.verdict.show span#verdict-pill { opacity: 1; transform: scale(1); }
.verdict.win  span#verdict-pill { background: linear-gradient(180deg, #3ad487, #147a44); color: #fff; box-shadow: 0 12px 28px -12px rgba(51,196,124,.9); }
.verdict.lose span#verdict-pill { background: linear-gradient(180deg, #c44b41, #7c211c); color: #fff; }
.verdict.push span#verdict-pill { background: rgba(255,255,255,.12); color: var(--txt); }
.verdict.wait span#verdict-pill { background: rgba(0,0,0,.32); color: rgba(239,246,241,.68); border-color: var(--line); }
/* ---------- portefeuille ---------- */
/* Le solde est l'ecran le plus regarde apres le jeu : halo chaud derriere le
   montant et filet dore en tete, pour qu'il ait le poids d'un coffre plutot
   que d'une simple fiche. */
.hero { position: relative; overflow: hidden; text-align: center; padding: 26px 16px 18px; margin-bottom: 12px; }
.hero::before {
  content: ""; position: absolute; left: 50%; top: -55%;
  width: 160%; height: 150%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(240,208,116,.14), transparent 68%);
}
.hero::after {
  content: ""; position: absolute; top: 0; left: 24%; right: 24%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,208,116,.55), transparent);
}
.hero > * { position: relative; }
.hero-label { margin: 0; color: var(--muted); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; }
.hero-balance {
  margin: 9px 0 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: clamp(32px, 10vw, 42px); font-weight: 800; font-family: var(--font-display);
  font-variant-numeric: tabular-nums;  /* le solde ne doit pas danser quand il change */
}
/* Le montant en or : c'est la valeur du compte, elle merite la couleur de la
   maison plutot que le blanc du texte courant. */
.hero-balance .num {
  background: linear-gradient(178deg, #fff6d8 6%, var(--gold) 46%, #b8912f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 10px rgba(240,208,116,.28));
}
.hero-inf {
  margin: 8px auto 0; display: inline-block; padding: 5px 13px; border-radius: 999px;
  background: var(--gold-soft); border: 1px solid var(--gold-dim); color: var(--gold);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
}
.hero-locked { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.hero-locked .ic { fill: var(--muted); }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line-soft); }
.hero-stats div { display: flex; flex-direction: column; gap: 2px; }
.hero-stats b { font-size: clamp(15px, 4.4vw, 17px); }
.hero-stats span { color: var(--muted); font-size: 11.5px; }

.wallet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.w-act {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 8px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); color: var(--txt); font: inherit; font-weight: 700; font-size: 14px;
  cursor: pointer; transition: transform .13s var(--spring), background .2s;
}
.w-act:active { transform: scale(.96); background: var(--panel-2); }
.w-act-ico { width: 27px; height: 27px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--gold-soft); }
.w-act-ico svg { width: 15px; height: 15px; fill: var(--gold); }

.bonus { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; color: var(--txt); font: inherit; transition: transform .13s var(--ease); }
.bonus:active { transform: scale(.98); }
.bonus[disabled] { opacity: .62; pointer-events: none; }
.bonus-ico { width: 40px; height: 40px; border-radius: 13px; flex: none; display: grid; place-items: center; background: var(--gold-soft); }
.bonus-ico svg { width: 22px; height: 22px; fill: var(--gold); }
.bonus-main { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bonus-main b { font-size: 14.5px; }
.bonus-main span { color: var(--muted); font-size: 12px; }
.bonus-cta { padding: 9px 15px; border-radius: 999px; flex: none; background: linear-gradient(180deg, #fbe49a, var(--gold-2)); color: #17251b; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; }
.bonus.cooling .bonus-cta { background: var(--panel-2); color: var(--muted); }

.history { display: flex; flex-direction: column; gap: 8px; }
.h-row { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: var(--r); border: 1px solid var(--line-soft); background: var(--panel); }
.h-ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: rgba(0,0,0,.3); flex: none; }
.h-ico svg { width: 17px; height: 17px; fill: var(--muted); }
.h-ico.pos svg { fill: var(--gold); }
.h-main { flex: 1; min-width: 0; }
.h-label { font-weight: 650; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-time { color: var(--faint); font-size: 11.5px; }
.h-delta { font-family: var(--font-display); font-weight: 700; font-size: 14px; flex: none; }
.h-delta.pos { color: var(--green); }
.h-delta.neg { color: var(--red); }

/* ---------- classement ---------- */
.top-list { display: flex; flex-direction: column; gap: 8px; }
.top-row { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); animation: rowIn .3s var(--ease) backwards; }
.top-row.is-me { border-color: var(--gold-dim); background: var(--gold-soft); }
/* Podium : les trois premiers se distinguent au metal, pas seulement par leur
   couronne — sinon le classement est une liste plate ou rien n'accroche. */
.top-row:nth-child(1) {
  border-color: rgba(240,208,116,.5);
  background: linear-gradient(160deg, rgba(240,208,116,.13), var(--panel));
  box-shadow: 0 10px 26px -18px rgba(240,208,116,.9);
}
.top-row:nth-child(2) {
  border-color: rgba(200,210,218,.34);
  background: linear-gradient(160deg, rgba(200,210,218,.07), var(--panel));
}
.top-row:nth-child(3) {
  border-color: rgba(207,135,87,.34);
  background: linear-gradient(160deg, rgba(207,135,87,.07), var(--panel));
}
.top-rank { width: 28px; flex: none; text-align: center; font-family: var(--font-display); font-weight: 800; color: var(--muted); }
.top-rank svg { width: 19px; height: 19px; }
.top-rank .m1 { fill: var(--gold); } .top-rank .m2 { fill: #c8d2da; } .top-rank .m3 { fill: #cf8757; }
.top-name { flex: 1; min-width: 0; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-right { flex: none; text-align: right; }
.top-score { font-family: var(--font-display); font-weight: 700; color: var(--gold); }
.top-wl { color: var(--muted); font-size: 11.5px; }

/* ---------- onglets ---------- */
.tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  padding: 8px 10px calc(var(--safe-b) + 8px);
  background: rgba(4,16,12,.985);   /* opaque, sans backdrop-filter — voir .topbar */
  border-top: 1px solid var(--line-soft);
}
.bar-in--tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
.tab {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 7px 0 5px; border: 0; background: none; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 10.5px; font-weight: 650; transition: color .22s;
}
.tab svg { width: 21px; height: 21px; fill: currentColor; transition: transform .28s var(--spring); }
.tab.is-on { color: var(--gold); }
.tab.is-on svg { transform: translateY(-2px) scale(1.12); }
.tab.is-on::after { content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 26px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); }

/* ---------- bandeau hors ligne ---------- */
.offline {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(var(--safe-t) + 66px); z-index: 45;
  display: flex; align-items: center; gap: 9px;
  max-width: min(92vw, 420px); padding: 10px 12px 10px 14px;
  border-radius: 14px; font-size: 12.5px; font-weight: 600;
  background: rgba(46,20,16,.97); border: 1px solid rgba(228,87,77,.45);
  box-shadow: 0 16px 34px -16px #000;
  animation: screenIn .28s var(--ease);
}
.offline-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--red); animation: breathe 1.2s ease-in-out infinite; }
.offline-txt { flex: 1; min-width: 0; }
.offline-btn { flex: none; padding: 6px 12px; border-radius: 999px; border: 0; background: var(--panel-2); color: var(--txt); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.offline-btn:active { transform: scale(.95); }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--safe-b) + 94px); z-index: 40;
  transform: translate(-50%, 14px); opacity: 0; pointer-events: none;
  max-width: min(88vw, 380px); display: flex; align-items: center; gap: 9px;
  padding: 12px 16px; border-radius: 14px;
  background: rgba(10,24,17,.97); border: 1px solid var(--line);
  box-shadow: 0 20px 44px -18px #000; font-size: 13.5px; font-weight: 600;
  transition: opacity .28s var(--spring), transform .28s var(--spring);
}
.toast svg { width: 18px; height: 18px; flex: none; fill: var(--green); }
.toast.bad svg { fill: var(--red); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { border-color: rgba(228,87,77,.5); }

/* ---------- pieces qui volent vers le solde ---------- */
.coinfly { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.coinfly i {
  position: absolute; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff3c4, var(--gold) 45%, var(--gold-2));
  box-shadow: 0 0 12px rgba(240,208,116,.7), inset 0 -3px 4px rgba(0,0,0,.25);
  will-change: transform, opacity;
}

/* ---------- feuille ---------- */
.sheet { position: fixed; inset: 0; z-index: 50; display: none; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.64); backdrop-filter: blur(5px); }
.sheet.show { display: flex; }
.sheet-card {
  width: 100%; max-width: var(--col); padding: 10px 18px calc(var(--safe-b) + 18px);
  border-radius: 24px 24px 0 0; background: #091610; border: 1px solid var(--line); border-bottom: 0;
  animation: sheetUp .34s var(--spring); max-height: 82vh; overflow-y: auto;
}
@keyframes sheetUp { from { transform: translateY(100%); } }
.sheet-grab { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 4px auto 14px; }
.sheet-card h3 { font-size: 17px; margin-bottom: 13px; }
.sheet-close { width: 100%; margin-top: 14px; }

.kv { margin-bottom: 11px; }
.kv-k { color: var(--muted); font-size: 12px; margin-bottom: 3px; }
.kv-v { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; word-break: break-all; line-height: 1.5; background: rgba(0,0,0,.35); padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line-soft); }
.kv-v.ok { color: var(--green); }

.dep-coin { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r); border: 1px solid var(--line-soft); background: var(--panel); margin-bottom: 8px; }
.dep-sym { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.dep-sym svg { width: 20px; height: 20px; fill: #fff; }
.dep-sym--btc { background: linear-gradient(180deg, #f7931a, #c46f06); }
.dep-sym--eth { background: linear-gradient(180deg, #8ca3c8, #5a6f94); }
.dep-sym--usdt { background: linear-gradient(180deg, #26a17b, #17795b); }
.dep-sym--out { background: var(--panel-2); }
.dep-sym--out svg { fill: var(--gold); }
.dep-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dep-name { font-weight: 700; font-size: 14px; }
.dep-net { color: var(--muted); font-size: 12px; }
.dep-soon { padding: 5px 11px; border-radius: 999px; flex: none; font-size: 11.5px; font-weight: 700; background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold-dim); }
.dep-note { color: var(--muted); font-size: 12.5px; line-height: 1.55; margin-top: 12px; }

/* ---------- pile ou face ---------- */
/* La piece bondit de ~62 % de sa hauteur : l'arene doit lui reserver la place,
   sinon elle passe par-dessus les badges de l'en-tete. */
.arena--coin { padding: calc(clamp(122px, 38vw, 168px) * .66) 0 6px; }
.coin-scene {
  --coin: clamp(122px, 38vw, 168px);
  width: var(--coin); height: var(--coin);
  perspective: calc(var(--coin) * 7);
  position: relative; margin: 0 auto;
}
.coin-scene::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: calc(var(--coin) * -.16);
  height: calc(var(--coin) * .15); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent 72%);
}
.coin3d {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d;
  --thick: calc(var(--coin) * .085);   /* epaisseur reelle de la piece */
}

/* Tranche : 24 lamelles disposees en cylindre. C'est ce qui donne le volume —
   une piece "plate" reste une rondelle qui tourne, on ne voit jamais son bord. */
.coin-edge { position: absolute; inset: 0; transform-style: preserve-3d; }
.coin-edge i {
  /* Chaque lamelle est un petit rectangle de la HAUTEUR de l'epaisseur, pose
     tangentiellement sur le pourtour : rotation autour de Z (l'axe du disque),
     recul d'un rayon, puis bascule de 90 deg pour presenter sa tranche.
     (Une rotation autour de Y donnerait un tambour vertical, pas une piece.) */
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--coin) * 3.14159 / 24 + 1px);
  height: var(--thick);
  margin-left: calc(var(--coin) * -3.14159 / 48);
  margin-top: calc(var(--thick) / -2);
  transform: rotateZ(calc(var(--i) * 15deg))
             translateY(calc(var(--coin) / -2))
             rotateX(90deg);
  background: linear-gradient(90deg, #6d4e15 0%, #c9a244 22%, #f6e2a4 50%,
                              #bb9235 78%, #6d4e15 100%);
}
.coin-edge i:nth-child(even) { filter: brightness(.86); }
.coin-face {
  position: absolute; inset: 0; border-radius: 50%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: grid; place-items: center; overflow: hidden;
  /* or cisele : lumiere en haut a gauche, ombre en bas a droite */
  background:
    radial-gradient(circle at 30% 24%, #fff8de 0%, #f7dd97 22%,
                    #e3bd63 46%, #c69a38 68%, #8f6b1c 100%);
  box-shadow:
    inset 0 0 0 calc(var(--coin) * .03) rgba(255,247,214,.75),
    inset 0 0 0 calc(var(--coin) * .038) rgba(112,82,22,.85),
    inset 0 calc(var(--coin) * .07) calc(var(--coin) * .12) rgba(255,255,255,.35),
    inset 0 calc(var(--coin) * -.09) calc(var(--coin) * .14) rgba(90,62,12,.5),
    0 calc(var(--coin) * .07) calc(var(--coin) * .18) rgba(0,0,0,.55);
}
.coin-face--front { transform: translateZ(calc(var(--thick) / 2)); }
.coin-face--back { transform: rotateY(180deg) translateZ(calc(var(--thick) / 2)); }

/* cannelures de la tranche */
.coin-face::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg, rgba(108,78,20,.65) 0deg 2.2deg, rgba(255,240,190,.30) 2.2deg 4.4deg);
  -webkit-mask: radial-gradient(circle, transparent 0 88%, #000 88% 100%);
  mask: radial-gradient(circle, transparent 0 88%, #000 88% 100%);
}
/* reflet specular qui balaie le metal */
.coin-face::after {
  content: ""; position: absolute; inset: -20%;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 48%,
                              rgba(255,255,255,.15) 53%, transparent 62%);
  pointer-events: none;
}

.coin-art {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--coin) * .015); width: 76%; text-align: center;
}
.coin-orn svg {
  width: calc(var(--coin) * .17); height: calc(var(--coin) * .17);
  fill: #7d5a16; filter: drop-shadow(0 1px 0 rgba(255,246,205,.6));
}
/* La gravure principale : PARADOX, au centre exact de la piece. */
.coin-word {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic; font-weight: 800;
  font-size: calc(var(--coin) * .165); letter-spacing: .04em;
  line-height: 1; color: #6d4d12;
  /* effet grave : ombre au-dessus, lumiere en dessous */
  text-shadow: 0 -1px 0 rgba(88,62,14,.55), 0 1px 0 rgba(255,248,214,.75);
  white-space: nowrap;
}
.coin-rule {
  width: 52%; height: 1px; margin: calc(var(--coin) * .022) 0;
  background: linear-gradient(90deg, transparent, rgba(109,77,18,.6), transparent);
  box-shadow: 0 1px 0 rgba(255,248,214,.5);
}
.coin-side {
  font-family: var(--font-display); font-weight: 800;
  font-size: calc(var(--coin) * .085); color: #7d5a16;
  letter-spacing: .3em; text-indent: .3em;
  text-shadow: 0 1px 0 rgba(255,248,214,.7);
}

/* rotation lente en attente */
.coin3d.idle { animation: coinIdle 5s linear infinite; }
@keyframes coinIdle {
  from { transform: rotateX(-12deg) rotateY(0deg); }
  to   { transform: rotateX(-12deg) rotateY(360deg); }
}

/* lancer : la piece monte, tournoie, retombe et se cale sur --end */
.coin3d.flipping { animation: coinFlip 2.3s cubic-bezier(.22,.68,.2,1) forwards; }
@keyframes coinFlip {
  0%   { transform: translateY(0) rotateX(-18deg) rotateY(0deg) scale(1); }
  16%  { transform: translateY(-54%) rotateX(-34deg) rotateY(600deg) scale(1.12); }
  40%  { transform: translateY(-64%) rotateX(-30deg) rotateY(1320deg) scale(1.14); }
  62%  { transform: translateY(-32%) rotateX(-24deg) rotateY(1980deg) scale(1.06); }
  84%  { transform: translateY(0) rotateX(-14deg) rotateY(calc(2520deg + var(--end))) scale(1); }
  92%  { transform: translateY(-5%) rotateX(-10deg) rotateY(calc(2520deg + var(--end))); }
  100% { transform: translateY(0) rotateX(-8deg) rotateY(calc(2520deg + var(--end))); }
}
.coin-scene.flipping::after { animation: coinShadow 2.1s cubic-bezier(.2,.7,.25,1) forwards; }
@keyframes coinShadow {
  0% { transform: scale(1); opacity: .5; }
  45% { transform: scale(.5); opacity: .18; }
  82% { transform: scale(1.05); opacity: .5; }
  100% { transform: scale(1); opacity: .5; }
}
.coin-scene.win .coin-face { box-shadow:
    inset 0 0 0 calc(var(--coin) * .045) rgba(255,246,205,.65),
    0 0 0 3px var(--gold),
    0 calc(var(--coin) * .06) calc(var(--coin) * .2) rgba(240,208,116,.5); }

/* appel des joueurs */
.calls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.call {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-radius: 13px; background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.07);
  transition: border-color .3s, background .3s;
}
.call.is-winner { border-color: var(--gold); background: rgba(240,208,116,.11); }
.call-name { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0;
  font-weight: 650; font-size: 12.5px; }
.call-side {
  flex: none; font-family: var(--font-display); font-weight: 800; font-size: 12px;
  padding: 4px 10px; border-radius: 999px; letter-spacing: .06em;
  background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold-dim);
}