/* ============================================================
   MARGIN SHOWDOWN — POKERSTARS × UNO
   Design: table de poker néon haut de gamme + game-feel tactile
   "juicy" — feutre émeraude lumineux, boutons 3D qui s'enfoncent.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Playfair+Display:wght@600;700;800&display=swap');

:root {
    /* Largeurs fluides des sidebars de #table (jeu) — clamp entre la largeur
       fixe historique (13" et moins) et un plafond raisonnable sur grand
       écran, pour que #news-banner/.news-reopen-tab restent alignés dessus
       même s'ils sont hors de #table dans le DOM (frères, pas enfants). */
    --sidebar-left-w: clamp(196px, 13vw, 250px);
    --sidebar-right-w: clamp(180px, 11vw, 220px);

    /* Fonds — ardoise sombre */
    --bg-0:   #0f1115;
    --bg-1:   #14161c;
    --bg-2:   #1a1d24;
    --bg-3:   #20242c;
    --bg-4:   #262b34;

    /* Bordures */
    --b1: rgba(255,255,255,0.05);
    --b2: rgba(255,255,255,0.10);
    --b3: rgba(255,255,255,0.18);

    /* Accent 1 — Vert néon (BULL / Raise / gains) */
    --teal:   #00e676;
    --teal-d: #00c765;
    --teal-bg: rgba(0,230,118,0.14);
    --emerald: var(--teal);
    --emerald-d: var(--teal-d);
    --emerald-bg: var(--teal-bg);

    /* Accent 2 — Or (chips / premium / α) */
    --gold:   #ffc94d;
    --gold-d: #e0ab2e;
    --gold-light: #ffe08a;
    --gold-bg: rgba(255,201,77,0.12);

    /* Table de jeu — feutre radial */
    --felt: #0f4026;
    --felt-light: #175538;

    /* Statuts */
    --green:  var(--teal);
    --red:    #ff1744;
    --green-bg: var(--teal-bg);
    --red-bg:   rgba(255,23,68,0.14);

    /* Bleu-gris poli — bouton neutre "Suivre / Call" */
    --call: #64b5f6;
    --call-bg: rgba(100,181,246,0.14);

    /* Texte */
    --t1: #f5f7fa;
    --t2: #b8c0cc;
    --t3: #7c8494;
    --t4: #4a505c;

    /* Fond des fenêtres modales (Mon compte, Boutique, Classement...) —
       semi-transparent + flou, jamais un simple var(--bg-X) opaque. Isolé
       dans sa propre variable (pas juste hardcodé dans .inv-modal) pour que
       le mode clair puisse l'inverser correctement — bug trouvé et corrigé :
       ce fond restait sombre "en dur" en mode clair alors que le TEXTE des
       modales, lui, passait bien en sombre, rendant tout illisible. */
    --modal-bg: rgba(26,29,36,0.72);

    /* Radius — très arrondi, jamais anguleux (Uno) */
    --r: 16px;
    --r2: 16px;
    --r3: 20px;

    --font-display: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ── Mode clair — bascule via Mon compte → Préférences (table-client.js
   applique/enlève l'attribut, index.html le pose déjà au chargement pour
   éviter un flash). Surfaces/texte/bordures ré-inversés proprement ; les
   couleurs d'accent (or/vert néon/feutre) restent identiques dans les deux
   modes pour garder l'identité visuelle du jeu — seuls les écrans les plus
   chargés en effets néon (table de jeu) restent pensés d'abord pour le
   sombre et peuvent encore mériter des ajustements plus tard. ── */
:root[data-theme="light"] {
    /* Palette adoucie (pas de blanc pur/gris trop clair, moins agressif à
       l'œil) — un joueur a signalé que le premier essai était trop intense. */
    --bg-0: #e6e8ec;
    --bg-1: #dcdfe5;
    --bg-2: #f4f5f7;
    --bg-3: #eceef1;
    --bg-4: #f7f8fa;

    --b1: rgba(20,22,30,0.08);
    --b2: rgba(20,22,30,0.14);
    --b3: rgba(20,22,30,0.24);

    --t1: #21242c;
    --t2: #454b58;
    --t3: #6b7280;
    --t4: #8890a0;

    --modal-bg: rgba(244,245,247,0.86);

    /* L'or clair (#ffc94d) et le vert néon (#00e676) sont illisibles en
       texte sur fond clair (ratios mesurés ~1.4:1 et ~1.5:1) — assombris
       seulement pour ce mode, les glows/fonds à faible opacité (--gold-bg/
       --teal-bg) restent inchangés. */
    --gold: #a3690a;
    --gold-d: #8a5808;
    --teal: #0a7a45;
    --teal-d: #086238;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
button, a, [onclick] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body {
    font-family: var(--font-body);
    background: var(--bg-0);
    color: var(--t2);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; border: none; outline: none; transition: all 0.18s cubic-bezier(0.34,1.56,0.64,1); }
button:active { transform: scale(0.96); }

/* Chiffres alignés (montants, XP, pot, stats) */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Point "LIVE" pulsant — utilitaire décoratif */
.live-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--red); box-shadow: 0 0 0 0 rgba(140,32,51,0.6);
    animation: liveDotPulse 2s ease-out infinite;
}
@keyframes liveDotPulse {
    0%   { box-shadow: 0 0 0 0 rgba(140,32,51,0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(140,32,51,0); }
    100% { box-shadow: 0 0 0 0 rgba(140,32,51,0); }
}

/* ── MOTIFS ART DÉCO (utilitaires décoratifs, purement additifs) ── */

/* Éventail — coin ornemental, posé en ::before sur un conteneur position:relative */
.deco-fan { position: relative; }
.deco-fan::before {
    content: ''; position: absolute; top: -1px; left: -1px; width: 34px; height: 34px;
    background: repeating-conic-gradient(from 180deg at 0% 0%, var(--gold) 0 6deg, transparent 6deg 20deg);
    opacity: 0.4; pointer-events: none;
}

/* Rayons de soleil — fond de bandeau de titre */
.deco-sunburst {
    background: repeating-conic-gradient(var(--gold-bg) 0deg 6deg, transparent 6deg 18deg);
}

/* Double liseré doré avec léger retrait — cadre des panneaux principaux */
.deco-frame {
    border: 1px solid var(--gold);
    outline: 1px solid var(--b2); outline-offset: 3px;
    position: relative;
}

/* ============================================================
   HOME SCREEN
   ============================================================ */
#home-screen {
    position: fixed; inset: 0; z-index: 9999;
    /* padding-top dégage la barre d'onglets, maintenant position:fixed et
       en dehors du flux de #home-screen (voir .top-tabs) — sinon le contenu
       démarrerait sous elle. */
    padding: 78px 24px 40px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: var(--bg-0);
    background-image:
        radial-gradient(ellipse 80% 55% at 50% -5%,  rgba(16,185,129,0.22) 0%, transparent 70%),
        radial-gradient(ellipse 55% 45% at 88% 100%, rgba(40,90,180,0.18)  0%, transparent 60%),
        radial-gradient(ellipse 45% 45% at 8%  55%,  rgba(20,60,140,0.16)  0%, transparent 60%);
    /* Scrollbar native masquée (même technique que .top-tabs-nav) : #home-screen
       est position:fixed;inset:0, donc SA scrollbar native se rend collée au
       bord droit réel de l'écran — exactement là où vit .top-tabs-bank, un
       élément FRÈRE distinct positionné indépendamment. Les deux se
       chevauchaient visuellement (la banque paraissait "déborder" à droite,
       coupée par la scrollbar). Le scroll reste fonctionnel, seule l'UI de la
       scrollbar est cachée. */
    scrollbar-width: none;
}
#home-screen::-webkit-scrollbar { display: none; }

/* ── Mise en page 3 colonnes : défis (gauche) / contenu (centre) / gagnants
   (droite) ── Les colonnes latérales n'apparaissent qu'à partir d'un écran
   assez large (voir media query plus bas) : en dessous, #home-screen garde
   exactement son ancien rendu à une seule colonne centrée. */
.home-layout {
    width: 100%; max-width: 1400px; margin: 0 auto;
    /* Centrage vertical (margin-top/bottom:auto) essayé puis retiré (demande
       explicite) : sur grand écran, le joueur préfère finalement le contenu
       remonté près de la barre d'onglets plutôt que centré avec un vide égal
       en haut ET en bas — juste le padding-top de #home-screen (dégage la
       barre) détermine maintenant la position, comme avant ce premier essai.
       align-items:flex-start ci-dessous reste inchangé : il régit
       l'alignement HORIZONTAL entre les 3 colonnes entre elles, pas la
       position verticale dans la page. */
    display: flex; align-items: flex-start; justify-content: center;
    gap: 20px;
}
.home-main {
    /* justify-content n'existe plus ici : le haut de la page (marque,
       onglets) doit rester ancré en haut quel que soit le contenu en
       dessous — voir l'ancienne note sur #home-screen ci-dessus, valable
       de la même façon maintenant que .home-main porte le flex column. */
    display: flex; flex-direction: column; align-items: center;
    gap: 22px;
    flex: 1 1 900px; max-width: 900px; min-width: 0;
}
.home-side {
    display: none; /* révélé uniquement sur grand écran, voir media query */
    flex: 0 0 220px; width: 220px;
    flex-direction: column; gap: 10px;
    position: sticky; top: 0;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    background: var(--bg-2); border: 1px solid var(--b2);
    border-radius: var(--r2); padding: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.home-side-title {
    font-size: 11px; font-weight: 800; letter-spacing: 1px;
    color: var(--t3); text-transform: uppercase;
    padding-bottom: 8px; border-bottom: 1px solid var(--b2);
}
.home-side-list { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 1360px) {
    .home-side { display: flex; }
}

/* Défis en cours — mini-carte, réutilise les classes hch-progress-track,
   hch-item-xp et hch-claim-btn déjà stylées pour l'overlay Défis complet. */
.side-ch-item {
    padding: 8px 10px; background: var(--bg-3); border: 1px solid var(--b2);
    border-radius: var(--r); display: flex; flex-direction: column; gap: 5px;
}
.side-ch-item.pending { border-color: rgba(212,175,55,0.4); }
.side-ch-top { display: flex; align-items: center; gap: 6px; }
.side-ch-icon { font-size: 14px; flex-shrink: 0; }
.side-ch-desc {
    font-size: 10px; color: var(--t2); line-height: 1.3; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.side-ch-bottom { display: flex; align-items: center; gap: 6px; }
.side-ch-bottom .hch-progress-track { flex: 1; }
.side-ch-claim-row { display: flex; justify-content: flex-end; }

/* Derniers gagnants — fil simulé (voir winners-client.js) */
.side-win-item {
    padding: 8px 10px; background: var(--bg-3); border: 1px solid var(--b2);
    border-radius: var(--r); display: flex; align-items: center; gap: 8px;
    animation: sideWinIn 0.4s ease;
}
@keyframes sideWinIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.side-win-avatar {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    background: var(--bg-4); display: flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.side-win-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.side-win-name { font-size: 10px; font-weight: 700; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-win-detail { font-size: 9px; color: var(--t4); }
.side-win-amount { font-size: 11px; font-weight: 800; color: var(--teal); margin-left: auto; white-space: nowrap; }
.side-win-item.high-roller {
    border-color: var(--gold);
    background: linear-gradient(160deg, rgba(212,175,55,0.14), var(--bg-3));
    box-shadow: 0 0 10px rgba(212,175,55,0.25);
}
.side-win-item.high-roller .side-win-amount { color: var(--gold); }

/* ── Marque + banque + compte, maintenant intégrées à .top-tabs ──
   (l'ancienne .lobby-topbar séparée a été retirée — voir index.html) */
.lobby-brand-icon {
    font-size: 18px; color: var(--gold); line-height: 1;
    filter: drop-shadow(0 0 12px rgba(212,175,55,0.5));
}
.lobby-brand-name {
    font-family: var(--font-display); font-size: 14px; font-weight: 400;
    letter-spacing: 3px; text-transform: uppercase; color: var(--t1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ⟁ à gauche, barre verticale, α tout à droite (α = monnaie premium, mise en
   évidence en dernier, à l'extrémité de la barre d'onglets). */
.lobby-wallet {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 12px;
}
.lobby-wallet-sep { width: 1px; align-self: stretch; background: var(--b2); }
.lobby-wallet-value {
    font-size: 22px; font-weight: 900; color: var(--t1); line-height: 1;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lobby-wallet-alpha {
    font-size: 18px; font-weight: 700; color: var(--gold);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* "?" Comment jouer — flottant en bas à gauche de l'écran (sorti de la barre
   d'onglets pour la désencombrer). z-index sous #custom-popup-overlay
   (200000) mais au-dessus du contenu normal, comme .top-tabs. */
.howto-float-btn {
    position: fixed; bottom: 20px; left: 20px; z-index: 150000;
    display: flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 16px 0 0;
    background: var(--bg-2); border: 1px solid var(--b2); border-radius: 999px;
    color: var(--t2); box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: border-color 0.2s ease, background 0.2s ease;
}
.howto-float-btn:hover { border-color: var(--gold); background: var(--bg-4); }
.howto-float-btn span:first-child {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: var(--bg-3); font-size: 15px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.howto-float-label { font-size: 11px; font-weight: 700; white-space: nowrap; }

/* ── OFFRES DE LA SEMAINE ──
   Diapositives en rangée (largeur = 100% × nombre d'offres), fenêtre
   overflow:hidden, translateX piloté par offers-client.js. Code neuf, sans
   rapport avec l'ancien carousel promotionnel retiré (voir index.html). */
.weekly-offers {
    position: relative; width: 100%; max-width: 900px;
    border-radius: var(--r3); overflow: hidden;
    border: 1px solid var(--b2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    /* #home-screen est en flex column ; sans ça, un flex item avec
       overflow:hidden peut être rétréci par le navigateur SOUS la hauteur
       réelle de son contenu quand la page dépasse la hauteur de la fenêtre. */
    flex-shrink: 0;
}
.offer-track {
    display: flex; width: 200%; /* OFFER_COUNT × 100% — garder synchronisé avec offers-client.js */
    transition: transform 0.5s cubic-bezier(0.65,0,0.35,1);
}
.offer-slide {
    position: relative; flex: 0 0 50%; /* 100% / OFFER_COUNT */
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    min-height: 180px; padding: 28px 36px;
    overflow: hidden;
    cursor: pointer;
}
.offer-slide-deal        { background: linear-gradient(120deg, rgba(255,87,34,0.16), var(--bg-2) 60%); }
.offer-slide-theme       { background: linear-gradient(120deg, rgba(100,181,246,0.14), var(--bg-2) 60%); }
.offer-slide-body { position: relative; z-index: 1; max-width: 440px; }
.offer-slide-eyebrow {
    display: block; font-size: 10px; font-weight: 800; letter-spacing: 2.5px;
    text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
}
.offer-slide-title {
    font-family: var(--font-display); font-size: 24px; font-weight: 600;
    color: var(--t1); line-height: 1.15; margin-bottom: 10px;
}
.offer-slide-text {
    font-size: 12px; color: var(--t2); line-height: 1.6; margin-bottom: 16px;
    max-width: 360px;
}
.offer-slide-cta {
    background: linear-gradient(135deg, var(--gold), var(--gold-d));
    color: #14161c; border: none; border-radius: 8px;
    font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
    padding: 10px 22px; cursor: pointer;
    box-shadow: 0 4px 16px rgba(212,175,55,0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.offer-slide-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(212,175,55,0.35); }
.offer-slide-tag {
    display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 1px;
    color: var(--t3); background: var(--bg-3); border: 1px solid var(--b2);
    border-radius: 6px; padding: 6px 12px;
}
.offer-slide-deco {
    position: absolute; right: -10px; bottom: -30px;
    font-size: 140px; line-height: 1; color: var(--t1);
    opacity: 0.06; pointer-events: none; z-index: 0;
}

.offer-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(10,12,16,0.4); border: 1px solid var(--b2);
    color: var(--t1); font-size: 18px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s ease, background 0.2s ease;
    z-index: 2;
}
.weekly-offers:hover .offer-arrow { opacity: 1; }
.offer-arrow:hover { background: rgba(10,12,16,0.7); }
.offer-arrow-prev { left: 12px; }
.offer-arrow-next { right: 12px; }

.offer-dots {
    position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
    display: flex; gap: 6px; z-index: 2;
}
.offer-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,0.3); border: none; padding: 0;
    transition: background 0.2s ease, width 0.2s ease;
}
.offer-dot.active { background: var(--gold); width: 18px; border-radius: 3px; }

/* ── ONGLETS DU HAUT ──
   Barre persistante (façon Stake/DraftKings) : ouvre les popups existantes
   telles quelles (voir lobby-client.js/switchTopTab), aucun style "page"
   spécial. position:fixed (PAS sticky) et élément FRÈRE de #home-screen
   dans le HTML (voir index.html) — indispensable : #home-screen a son
   propre position:fixed + z-index, ce qui crée un contexte d'empilement CSS
   séparé, donc un z-index élevé posé ICI alors qu'on est encore un
   DESCENDANT de #home-screen ne peut jamais dépasser un élément FRÈRE de
   #home-screen (les popups Boutique/Battle Pass/etc. en sont, sauf Défis —
   bug trouvé en testant : seule la popup Défis, restée imbriquée dans
   #home-screen, laissait la barre visible par-dessus). z-index 150000 :
   au-dessus des popups (100000) pour rester cliquable pendant qu'une popup-
   onglet est ouverte, mais EN DESSOUS de #custom-popup-overlay (200000) —
   une alerte/confirmation doit rester bloquante, la barre ne doit pas
   passer par-dessus. */
.top-tabs {
    position: fixed; top: 8px; left: 12px; right: 12px; z-index: 150000;
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-1); border: 1px solid var(--b2); border-radius: var(--r2);
    padding: 6px 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
/* Marque — flex-grow:1 : occupe l'espace libre à gauche des onglets sur un
   écran large. flex-shrink:0 (au lieu de 1 0) : avec flex-basis:0, cet
   élément absorbait TOUT le rétrécissement avant que .top-tabs-nav ne cède
   un seul pixel (l'inverse du commentaire ci-dessous), écrasant la marque à
   ~0px sur les largeurs moyennes (ex. 1024px, tablette paysage) — au lieu de
   laisser les onglets défiler comme prévu. */
.top-tabs-brand {
    flex: 1 0 auto; min-width: 0;
    display: flex; align-items: center; gap: 8px;
}
/* Onglets — largeur naturelle, scroll horizontal propre si jamais ça ne
   tient pas (au lieu de pousser marque/banque hors de la barre). */
.top-tabs-nav {
    flex: 0 1 auto; min-width: 0; position: relative;
    display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
}
.top-tabs-nav::-webkit-scrollbar { display: none; }
/* Indice visuel qu'il y a d'autres onglets à découvrir en balayant (rien ne
   le suggérait avant — trouvé en testant à 375px : la barre défile bien au
   doigt mais sans aucun signe visuel). Dégradé collé aux bords, au-dessus
   des onglets, qui ne bloque pas le clic (pointer-events:none). */
.top-tabs-nav::before,
.top-tabs-nav::after {
    content: ''; position: sticky; align-self: stretch; width: 18px;
    flex-shrink: 0; pointer-events: none; z-index: 1;
}
.top-tabs-nav::before {
    left: 0; margin-right: -18px; order: -1;
    background: linear-gradient(90deg, var(--bg-1), transparent);
}
.top-tabs-nav::after {
    right: 0; margin-left: -18px;
    background: linear-gradient(270deg, var(--bg-1), transparent);
}
.top-tab {
    position: relative; flex-shrink: 0;
    display: flex; align-items: center; gap: 6px;
    padding: 10px 16px;
    background: none; border: none; color: var(--t3);
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px; white-space: nowrap;
    border-radius: 8px; cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.top-tab:hover { color: var(--t1); background: var(--bg-2); }
.top-tab.active { color: var(--t1); background: var(--felt); }
/* Market Maker Pass — lettres dorées pour signaler le côté premium, même
   au survol/actif (où les autres onglets passent en var(--t1)). */
.top-tab[data-tab="bp"] { color: var(--gold); }
.top-tab[data-tab="bp"]:hover,
.top-tab[data-tab="bp"].active { color: var(--gold); }
.tab-badge {
    background: var(--red); color: #fff;
    font-size: 9px; font-weight: 800; min-width: 15px; height: 15px;
    border-radius: 8px; padding: 0 3px;
    display: flex; align-items: center; justify-content: center;
}
/* Banque + compte — flex-grow:1, contenu ancré à droite : occupe l'espace
   libre à droite des onglets. flex-shrink:0 pour la même raison que
   .top-tabs-brand ci-dessus : sans ça, le solde se faisait écraser à
   quelques px et son texte débordait/chevauchait ses voisins au lieu que ce
   soit .top-tabs-nav qui cède (et défile) en premier. */
.top-tabs-bank {
    flex: 1 0 auto; min-width: 0;
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}
/* Pub gratuite — tout à la fin de la barre, taille réduite pour tenir dans
   cette barre fine (plus la place pleine largeur de l'ancienne .lobby-topbar). */
.ad-reward-wrap { position: relative; flex: 0 0 auto; }

/* ── MODE "PAGE" ──
   Posée par switchTopTab() (lobby-client.js) UNIQUEMENT quand une popup est
   ouverte depuis les onglets du haut : au lieu d'une petite fenêtre centrée,
   elle s'affiche depuis le haut, en dessous de la barre d'onglets (qui reste
   visible/cliquable au-dessus, z-index 100001) — on peut ainsi passer d'un
   onglet à l'autre sans jamais avoir l'impression de "fermer" quoi que ce
   soit. Le fond flouté/assombri (identique à une popup normale) reste
   présent : le lobby/jeu en arrière-plan reste visible (flouté), ce n'est
   PAS un remplacement plein écran opaque. Quand la MÊME popup est ouverte
   d'ailleurs (ex. pendant une partie, "banque insuffisante" → Boutique),
   cette classe n'est jamais posée : elle garde son apparence de popup
   habituelle (centrée), inchangée. */
.inv-overlay.page-mode, .bp-overlay.page-mode {
    /* Plus de align-items:flex-start ici (demande explicite, Défis +
       Market Maker Pass rapportés) : ça collait la modale en haut, quitte à
       laisser un grand vide en dessous sur un écran plus haut que son
       contenu — ET pouvait rendre l'overlay scrollable pour rien puisque
       overflow-y:auto + une modale plus courte que le viewport n'a aucune
       raison de scroller une fois recentrée. Hérite donc du centrage
       vertical de base (.inv-overlay/.bp-overlay, align-items:center) ;
       padding-top continue de dégager la barre d'onglets sticky pour une
       modale assez haute pour l'atteindre. */
    padding-top: 70px;
    overflow-y: auto;
    /* backdrop-filter retiré en page-mode : contrairement à une popup rare,
       c'est le mode d'ouverture NORMAL depuis l'onglet du haut, avec
       l'écran d'accueil qui continue d'animer derrière (graphique, bannière
       auto-défilante) — flouter en direct un fond qui bouge force le
       navigateur à recalculer le flou en continu, ce qui rendait le
       défilement de la piste de récompenses saccadé. Un fond plus opaque
       (sans flou) donne un effet d'assombrissement similaire sans ce coût. */
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(8,10,14,0.88);
}
/* Inventaire fait exception : contenu court, le centrage vertical ci-dessus
   le fait flotter loin de la barre d'onglets (bug rapporté après le retrait
   général de flex-start) — remis collé en haut spécifiquement pour lui. */
#inv-overlay.page-mode { align-items: flex-start; }
/* Mon compte : même chose, collé en haut plutôt que centré (demande
   explicite) — sa hauteur varie beaucoup d'un onglet à l'autre (Pseudo vs
   Statistiques vs Confidentialité), le centrage le faisait bouger
   verticalement à chaque changement d'onglet, moins stable/pro qu'un
   ancrage fixe sous la barre d'onglets. */
#account-overlay.page-mode { align-items: flex-start; }

/* ── Overlay inventaire ── */
.inv-overlay {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(10,12,16,0.55);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
}
/* Plusieurs endroits (Boutique, Défis, popup "fonds insuffisants"...)
   ouvrent #account-overlay ("Créer un compte pour acheter"/"pour jouer")
   SANS fermer leur propre .inv-overlay d'abord — les deux se retrouvent
   alors ouverts en même temps, au même z-index (100000) : lequel des deux
   s'affiche par-dessus l'autre dépend alors uniquement de l'ordre dans le
   HTML (#account-overlay est déclaré tôt dans index.html), pas de l'ordre
   réel d'ouverture. Depuis la Boutique (déclarée plus bas dans le HTML),
   ça cachait #account-overlay entièrement derrière #shop-overlay — le
   bouton semblait ne rien faire alors qu'il ouvrait bien le compte, juste
   invisible (bug corrigé, trouvé en testant le mode invité). Priorité
   dédiée plutôt que de dépendre de l'ordre du HTML : #account-overlay doit
   toujours gagner, peu importe quel autre .inv-overlay/.bp-overlay est
   resté ouvert derrière lui. */
#account-overlay { z-index: 100001; }
.inv-modal {
    background: var(--modal-bg); border: 1px solid var(--gold);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    outline: 1px solid var(--b2); outline-offset: 4px;
    border-radius: var(--r2); padding: 28px 32px;
    min-width: 340px; max-width: 480px; width: 90vw;
    max-height: 88vh; overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    /* Barre de défilement discrète assortie au thème sombre au lieu de la
       barre blanc/gris par défaut du navigateur (demande explicite,
       remarquée sur la Boutique mais partagée par toutes les fenêtres qui
       scrollent : Mon compte, Inventaire, Défis...). */
    scrollbar-width: thin; scrollbar-color: var(--b3) transparent;
}
.inv-modal::-webkit-scrollbar { width: 8px; }
.inv-modal::-webkit-scrollbar-track { background: transparent; }
.inv-modal::-webkit-scrollbar-thumb { background: var(--b3); border-radius: 8px; }
.inv-modal::-webkit-scrollbar-thumb:hover { background: var(--t4); }
.inv-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px;
}
.inv-modal-title { font-family: var(--font-display); font-size: 17px; font-weight: 400; color: var(--gold); letter-spacing: 1px; }
.shop-wallet-row {
    display: flex; align-items: center; gap: 8px;
    margin-left: auto; margin-right: 14px;
    background: var(--bg-2); border: 1px solid var(--b2);
    border-radius: var(--r); padding: 4px 12px;
    font-size: 12px; font-weight: 700;
}
.shop-wallet-chip  { color: var(--t1); font-variant-numeric: tabular-nums; }
.shop-wallet-alpha { color: var(--gold); font-variant-numeric: tabular-nums; }
.shop-wallet-sep   { color: var(--t4); }
.inv-close-btn {
    background: none; border: none; color: var(--t3);
    font-size: 18px; cursor: pointer; padding: 4px 8px;
    border-radius: 6px; transition: color 0.2s, background 0.2s;
}
.inv-close-btn:hover { color: var(--t1); background: var(--bg-3); }

.hinv-list   { display: flex; flex-direction: column; gap: 8px; }
.hinv-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 8px;
    border: 1px solid var(--b2); background: var(--bg-3);
}
.hinv-item-icon { font-size: 16px; }
.hinv-item-info { display: flex; flex-direction: column; flex: 1; }
.hinv-item-name { font-size: 10px; font-weight: 700; color: var(--t2); }
.hinv-item-sub  { font-size: 8px; color: var(--t4); margin-top: 1px; }
.hinv-item-count {
    font-size: 13px; font-weight: 900; color: var(--teal);
    min-width: 20px; text-align: right;
}
.hinv-empty { font-size: 9px; color: var(--t4); text-align: center; padding: 6px 0; }

/* ── Info-bulle générique "ⓘ" (un bouton par onglet, demande explicite) ──
   Bouton .info-btn + info-bulle .info-tooltip, pilotés en JS par
   _showInfoTooltip/_hideInfoTooltip (i18n.js) — élément .info-tooltip unique
   en position:fixed, ajouté au body plutôt qu'un pseudo-élément CSS local
   sur chaque bouton : la plupart des fenêtres qui l'utilisent (.inv-modal)
   sont en overflow-y:auto, donc un ::after positionné par rapport au bouton
   se retrouverait coupé par ce cadre de défilement (bug trouvé en testant le
   tout premier de ces boutons, sur le Classement). `left` posé directement
   par _showInfoTooltip (déjà borné pour ne jamais dépasser l'écran) —
   jamais un transform de centrage ici, qui ignorerait ce calcul et
   redéborderait quand même sur mobile étroit (même bug retrouvé et corrigé
   en testant ce premier bouton). */
.info-btn {
    width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
    border: 1px solid var(--b2); background: var(--bg-4); color: var(--t3);
    font-size: 10px; line-height: 1; font-weight: 700; cursor: pointer; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.info-btn:hover { color: var(--teal); border-color: var(--teal); }
.info-tooltip {
    position: fixed; z-index: 1000000;
    width: 220px; white-space: normal; text-align: left;
    background: #14161c; color: #ffffff;
    border: 1px solid var(--teal); border-radius: 8px;
    padding: 9px 12px; font-size: 11px; font-weight: 600; line-height: 1.5;
    letter-spacing: 0.1px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.5);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.12s;
}
.info-tooltip.info-tooltip-visible { opacity: 1; visibility: visible; }

/* ── Classement (streak de victoire) — leaderboard-client.js ── */
.lb-subtitle {
    font-size: 11px; color: var(--t3); text-align: center; margin: -4px 0 12px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.lb-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.lb-me { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--b2); }
.lb-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px; border-radius: 8px;
    border: 1px solid var(--b2); background: var(--bg-3);
}
.lb-row-me { border-color: var(--teal); background: rgba(16,185,129,0.08); }
.lb-rank { font-size: 13px; font-weight: 800; color: var(--t3); min-width: 32px; }
.lb-avatar { font-size: 16px; flex-shrink: 0; line-height: 1; }
.lb-name { flex: 1; font-size: 12px; font-weight: 700; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-stake { font-size: 10px; font-weight: 600; color: var(--t4); white-space: nowrap; }
.lb-streak { font-size: 13px; font-weight: 900; color: var(--gold-light, #f0d060); }
.lb-loading, .lb-empty { font-size: 11px; color: var(--t4); text-align: center; padding: 20px 0; }
.hinv-item-clickable { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.hinv-item-clickable:hover { border-color: var(--teal); background: rgba(16,185,129,0.07); }

/* ── Bouton thème chandelles ── */
.candle-theme-btn {
    background: var(--bg-2); border: 1px solid var(--b2);
    border-radius: 5px; color: var(--t2);
    font-size: 13px; padding: 4px 9px; cursor: pointer; line-height: 1;
    transition: border-color 0.2s, background 0.2s;
}
.candle-theme-btn:hover { border-color: var(--teal); background: var(--bg-4); }

/* ── Overlay sélecteur de thème ── */
.candle-theme-overlay {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
}
.candle-theme-modal {
    background: var(--bg-2); border: 1px solid var(--b2);
    border-radius: var(--r2); padding: 28px 32px;
    min-width: 360px; max-width: 520px; width: 92vw;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.candle-theme-modal h3 { font-size: 16px; font-weight: 800; color: var(--t1); margin: 0 0 18px; }
.candle-theme-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px;
}
.candle-theme-option {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px 8px; border-radius: 10px;
    border: 2px solid var(--b2); cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.candle-theme-option:hover { border-color: var(--teal); background: var(--bg-3); }
.candle-theme-option.active { border-color: var(--teal); background: rgba(16,185,129,0.1); }
.candle-theme-option.locked { opacity: 0.4; cursor: not-allowed; }
.ct-preview { display: flex; gap: 4px; align-items: flex-end; }
.ct-bar { width: 10px; border-radius: 2px; }
.ct-name { font-size: 10px; font-weight: 700; color: var(--t2); text-align: center; }
.ct-lock { font-size: 9px; color: var(--t4); }

/* ── Shop modal ──
   Onglets regroupés en 2 rangées fixes de 4 (catégories d'objets, puis
   moyens de paiement/actions) et centrées au lieu d'un simple flex-wrap :
   avec 8 onglets, un wrap naïf laissait un 8ᵉ onglet seul sur sa ligne,
   collé à gauche avec un grand vide à droite (demande explicite : "plus pro
   et symétrique"). Icônes emoji multicolores remplacées par des icônes
   monochromes (même traitement que Mon compte). */
.shop-modal { max-width: 1100px; width: 96vw; max-height: 88vh; overflow-y: auto; }
.shop-title-icon { width: 20px; height: 20px; color: var(--gold); flex-shrink: 0; }
#shop-overlay .inv-modal-title { display: flex; align-items: center; gap: 10px; }
.shop-shell { display: flex; flex-direction: column; }
.shop-sidebar { display: flex; }
.shop-main { min-width: 0; }
.shop-tab-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.shop-tab-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.shop-tab-icon { width: 15px; height: 15px; flex-shrink: 0; }

/* Choix d'interface repassés en colonne verticale à gauche sur assez
   large écran (demande explicite) — même pattern que la barre latérale de
   Mon compte : le contenu de l'onglet actif prend le reste de la largeur
   à droite plutôt que tout empiler sous une rangée d'onglets. */
@media (min-width: 641px) {
    /* Hauteur fixe (plus max-height) + colonne flex sur la modale : la
       fenêtre entière (donc la barre latérale) ne bouge plus jamais en
       changeant d'onglet, peu importe la quantité de contenu de la page
       (demande explicite). Seul .shop-main scrolle en interne quand le
       contenu d'un onglet dépasse l'espace disponible ; le header et la
       barre latérale restent immobiles. */
    #shop-overlay .shop-modal {
        display: flex; flex-direction: column;
        height: 88vh; max-height: 88vh; overflow: hidden;
    }
    #shop-overlay .inv-modal-header { flex: 0 0 auto; }
    #shop-overlay .shop-shell { flex: 1 1 auto; min-height: 0; align-items: stretch; flex-direction: row; gap: 28px; }
    /* Sidebar rétrécie à la largeur du plus long bouton (width:fit-content
       sur le groupe, qui mesure le plus large de ses 8 boutons) et TOUS les
       boutons étirés (align-items:stretch, par défaut) pour égaler
       exactement cette largeur — ni un vide arbitraire à droite des noms
       courts, ni des largeurs de boutons inégales entre elles (demande
       explicite). Le reste de la largeur revient à la grille d'articles à
       droite (.shop-main, flex:1, s'élargit automatiquement). Plus de
       ligne de séparation entre les 2 groupes d'onglets (demande
       explicite) : seul l'espacement (gap) les distingue désormais. */
    #shop-overlay .shop-sidebar { width: fit-content; flex: 0 0 auto; }
    #shop-overlay .shop-tab-group { flex-direction: column; gap: 14px; margin-bottom: 0; width: fit-content; }
    #shop-overlay .shop-tab-row { flex-direction: column; justify-content: flex-start; flex-wrap: nowrap; gap: 3px; }
    #shop-overlay .ch-tab { justify-content: flex-start; width: 100%; text-align: left; }
    #shop-overlay .shop-main {
        flex: 1; overflow-y: auto; padding-right: 6px;
        scrollbar-width: thin; scrollbar-color: var(--b3) transparent;
    }
    #shop-overlay .shop-main::-webkit-scrollbar { width: 8px; }
    #shop-overlay .shop-main::-webkit-scrollbar-track { background: transparent; }
    #shop-overlay .shop-main::-webkit-scrollbar-thumb { background: var(--b3); border-radius: 8px; }
    #shop-overlay .shop-main::-webkit-scrollbar-thumb:hover { background: var(--t4); }
}
#shop-overlay .ch-tab { display: flex; align-items: center; gap: 7px; }

/* Grille articles */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.shop-item {
    background: var(--bg-3); border: 1px solid var(--b2);
    border-radius: 12px; padding: 18px 16px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    transition: border-color 0.2s, transform 0.15s;
}
.shop-item:hover { border-color: var(--b3); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.35); }
.shop-item-premium {
    border-color: rgba(212,175,55,0.35);
    background: linear-gradient(160deg, rgba(184,148,46,0.12), var(--bg-3));
}
.shop-item-premium:hover { border-color: var(--gold); box-shadow: 0 6px 20px rgba(212,175,55,0.15); }
.shop-item.owned { border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.05); }
.shop-item.locked-bp { opacity: 0.55; }
.shop-item-icon { font-size: 32px; }
.shop-item-name { font-size: 13px; font-weight: 800; color: var(--t1); text-align: center; }
.shop-item-desc { font-size: 10px; color: var(--t3); text-align: center; line-height: 1.4; }
/* Time Bank spécifiquement : "Ajoute 5 secondes..." tient sur 1 ligne mais
   "Ajoute 10/15 secondes..." (1 chiffre de plus) passe sur 2 lignes au même
   endroit — sans hauteur réservée, tout ce qui suit (Possédées/prix/
   Économise/slider/bouton) se retrouvait décalé plus haut pour la carte
   "+5 secondes" que pour les 2 autres, cassant l'alignement de la rangée
   (demande explicite). 2 lignes réservées dans tous les cas, même quand 1
   suffit. */
#shop-timebank-content .shop-item-desc {
    min-height: calc(1.4em * 2);
    display: flex; align-items: center; justify-content: center;
}
.shop-item-price {
    font-size: 15px; font-weight: 800; color: var(--gold);
    display: flex; align-items: center; gap: 4px;
}
/* Stock de charges d'indicateur achetées à l'usage (demande explicite, achat
   permanent retiré) — badge discret au-dessus du prix, même carte qu'avant. */
.shop-item-charges { font-size: 11px; font-weight: 700; color: #10b981; }
.shop-item-charge-hint { font-size: 9px; color: var(--t3); opacity: 0.8; }
.shop-btn {
    width: 100%; padding: 9px 0; border-radius: 8px; border: none;
    font-size: 12px; font-weight: 800; letter-spacing: 0.5px; cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    /* Colle le bouton en bas de la carte (.shop-item est un flex column qui
       s'étire déjà à la même hauteur que ses voisins via le grid) — sans ça,
       une carte dont la description tient sur une ligne de moins (ex. "+5
       secondes" vs "+10/+15 secondes") laissait son bouton plus haut que les
       autres au lieu d'être aligné en bas (bug rapporté, persistait même
       après avoir égalisé la hauteur des cartes). */
    margin-top: auto;
}
.shop-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.shop-btn-buy   { background: var(--gold); color: #000; }
.shop-btn-owned { background: var(--bg-4); color: var(--teal); border: 1px solid rgba(16,185,129,0.3); cursor: default; }
.shop-btn-owned:hover { transform: none; opacity: 1; }
.shop-btn-locked { background: var(--bg-4); color: var(--t4); border: 1px solid var(--b2); cursor: not-allowed; }
.shop-btn-locked:hover { transform: none; opacity: 1; }

/* Section ⟁ réels */
.shop-chips-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.shop-chips-item {
    background: linear-gradient(135deg, rgba(212,175,55,0.1), var(--bg-3));
    border: 1px solid rgba(212,175,55,0.25); border-radius: 12px;
    padding: 20px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px;
    transition: border-color 0.2s, transform 0.15s;
}
.shop-chips-item:hover { border-color: var(--gold); transform: translateY(-2px); }
.shop-chips-amount { font-size: 26px; font-weight: 800; color: var(--gold); }
.shop-chips-price  { font-size: 13px; font-weight: 700; color: var(--t2); }
.shop-chips-bonus  { font-size: 10px; color: var(--teal); font-weight: 700; }
.shop-btn-real { background: linear-gradient(135deg, var(--teal), var(--teal-d)); color: #fff; }
.shop-section-title { font-size: 11px; font-weight: 800; color: var(--t3); letter-spacing: 2px; margin-bottom: 12px; margin-top: 20px; }
.shop-section-title:first-child { margin-top: 0; }
.shop-item-bp { font-size: 9px; color: var(--t4); margin-top: 4px; text-align: center; }

/* Aperçu thème chandelles */
.theme-preview { display: flex; gap: 3px; align-items: flex-end; margin: 4px 0; }
.theme-bar { width: 12px; border-radius: 2px; }

.challenges-modal { max-width: 600px; width: 95vw; max-height: 85vh; overflow-y: auto; }

/* Onglets défis */
.ch-tab-row { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--b2); padding-bottom: 10px; }
.ch-tab {
    background: none; border: 1px solid var(--b2); border-radius: 8px;
    color: var(--t3); font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    padding: 7px 16px; cursor: pointer; transition: all 0.15s;
}
.ch-tab:hover { border-color: var(--teal); color: var(--t1); }
.ch-tab.active { background: var(--teal); border-color: var(--teal); color: #000; }

/* Onglets "Mon compte" — 6 onglets sur une modale plus étroite que la
   boutique : réduits (padding/police/espacement des lettres) pour tenir
   tous sur une seule ligne au lieu de déborder/s'empiler. */
.acct-tab-row { gap: 4px; flex-wrap: wrap; }
.acct-tab { padding: 6px 10px; font-size: 9.5px; letter-spacing: 0.8px; }

/* Bannière premium */
.hch-premium-banner {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(135deg, rgba(212,175,55,0.12), rgba(212,175,55,0.04));
    border: 1px solid rgba(212,175,55,0.3); border-radius: 10px;
    padding: 14px 16px; margin-bottom: 16px;
}
.hch-premium-icon { font-size: 28px; }
.hch-premium-title { font-size: 14px; font-weight: 800; color: var(--gold); }
.hch-premium-sub { font-size: 11px; color: var(--t3); margin-top: 2px; }

/* Item défi premium */
.hch-item-premium {
    border-color: rgba(212,175,55,0.2);
    background: linear-gradient(135deg, rgba(212,175,55,0.05), var(--bg-3));
}
.hch-item-premium .hch-item-xp { color: var(--gold); }
.hch-item-premium.completed { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.05); }
.hch-req-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.hch-req-tag {
    font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 8px;
    border: 1px solid; display: flex; align-items: center; gap: 3px;
}
.hch-req-tag.unlocked { color: var(--teal); border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.08); }
.hch-req-tag.locked   { color: var(--t4);  border-color: var(--b2); background: var(--bg-4); }
.hch-item-locked-overlay { opacity: 0.55; }
.hch-section-label {
    font-size: 8px; font-weight: 800; letter-spacing: 2px; color: var(--t4);
    text-transform: uppercase; margin: 14px 0 6px; padding-bottom: 4px;
    border-bottom: 1px solid var(--b2);
}
.hch-reset { font-size: 8px; color: var(--t4); letter-spacing: 0.5px; }
.hch-list { display: flex; flex-direction: column; gap: 8px; }
.hch-item {
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px 10px; border-radius: 8px;
    border: 1px solid var(--b2); background: var(--bg-3);
}
.hch-item.completed {
    border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.05);
}
.hch-item-top { display: flex; align-items: center; gap: 6px; }
.hch-item-icon { font-size: 14px; }
.hch-item-desc { font-size: 10px; font-weight: 600; color: var(--t2); flex: 1; line-height: 1.3; }
.hch-item.completed .hch-item-desc { color: var(--t4); text-decoration: line-through; }
.hch-item.pending { border-color: rgba(212,175,55,0.5); background: rgba(212,175,55,0.06); animation: hch-pulse 2s ease-in-out infinite; }
.hch-item.pending .hch-item-xp { color: var(--gold); }
@keyframes hch-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); } 50% { box-shadow: 0 0 8px 2px rgba(212,175,55,0.25); } }
.hch-claim-btn {
    margin-top: 8px; width: 100%;
    background: linear-gradient(135deg, var(--gold), var(--gold-d));
    border: none; border-radius: 8px; color: #000;
    font-size: 12px; font-weight: 800; letter-spacing: 1px;
    padding: 8px 0; cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
}
.hch-claim-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.hch-reroll-btn {
    flex-shrink: 0; background: rgba(212,175,55,0.10);
    border: 1px solid rgba(212,175,55,0.35); border-radius: 5px;
    color: var(--gold); font-size: 8px; font-weight: 700; letter-spacing: 0.5px;
    padding: 3px 7px; cursor: pointer; white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.hch-reroll-btn:hover { background: rgba(212,175,55,0.22); border-color: var(--gold); }
.hch-item-xp { font-size: 9px; font-weight: 700; color: var(--teal); letter-spacing: 0.5px; }
.hch-item.completed .hch-item-xp::before { content: '✓ '; }
.hch-progress-track { height: 3px; background: var(--bg-4); border-radius: 2px; overflow: hidden; }
.hch-progress-fill { height: 100%; background: var(--teal); border-radius: 2px; transition: width 0.4s ease; }


/* ── STREAK REWARDS POPUP ── */
.srp-rule {
    display: flex; align-items: flex-start; gap: 10px;
    background: rgba(16,185,129,0.07); border: 1px solid var(--b2);
    border-radius: 10px; padding: 12px 14px; margin-bottom: 18px;
    font-size: 11px; color: var(--t2); line-height: 1.6; text-align: left;
}
.srp-rule strong { color: var(--gold); }
.srp-rule-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.srp-cards {
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.srp-card {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    border-radius: 10px; padding: 14px 16px; flex: 1; text-align: center;
}
.srp-card-current {
    background: rgba(255,255,255,0.04); border: 1px solid var(--b2);
}
.srp-card-next {
    background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.35);
    box-shadow: 0 0 18px rgba(212,175,55,0.10);
}
.srp-card-label {
    font-size: 7px; font-weight: 800; letter-spacing: 2px;
    text-transform: uppercase; color: var(--t4);
}
.srp-card-value {
    font-size: 11px; font-weight: 700; color: var(--t1); line-height: 1.3;
}
.srp-card-reward {
    font-size: 16px; font-weight: 900; color: var(--gold);
    margin-top: 4px;
}
.srp-card-arrow {
    font-size: 20px; color: var(--t4); flex-shrink: 0;
}

/* ── STREAK TIMELINE ── */
.srp-timeline {
    display: flex; align-items: center; justify-content: center;
    margin: 14px 0 18px;
}
.srp-tier {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    min-width: 70px;
}
.srp-tier-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--b2); border: 2px solid var(--t4);
    transition: background 0.2s, border-color 0.2s;
}
.srp-tier-reached .srp-tier-dot {
    background: rgba(212,175,55,0.4); border-color: var(--gold);
}
.srp-tier-active .srp-tier-dot {
    background: var(--gold); border-color: var(--gold);
    box-shadow: 0 0 8px rgba(212,175,55,0.6);
}
.srp-tier-label {
    font-size: 8px; font-weight: 700; letter-spacing: 0.5px;
    text-transform: uppercase; color: var(--t4); text-align: center;
}
.srp-tier-reached .srp-tier-label, .srp-tier-active .srp-tier-label {
    color: var(--t2);
}
.srp-tier-reward {
    font-size: 11px; font-weight: 900; color: var(--t4);
}
.srp-tier-reached .srp-tier-reward, .srp-tier-active .srp-tier-reward {
    color: var(--gold);
}
.srp-tier-line {
    flex: 1; height: 2px; background: var(--b2); margin-bottom: 20px; min-width: 16px;
}

/* ── DAILY LOGIN REWARD ── */
.dlr-reward-badge {
    text-align: center; font-size: 18px; font-weight: 900;
    color: var(--gold); margin-bottom: 4px;
}
.dlr-streak-label {
    text-align: center; font-size: 11px; color: var(--t3);
    margin-bottom: 16px;
}
.dlr-timeline {
    display: flex; align-items: flex-start; justify-content: center;
    gap: 0; overflow-x: auto; padding-bottom: 4px;
}
.dlr-step {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    min-width: 36px;
}
.dlr-dot {
    width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid var(--t4); background: var(--b2);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 900; color: transparent;
    transition: all 0.2s;
}
.dlr-done .dlr-dot {
    background: rgba(212,175,55,0.25); border-color: var(--gold);
    color: var(--gold);
}
.dlr-current .dlr-dot {
    background: var(--gold); border-color: var(--gold);
    box-shadow: 0 0 10px rgba(212,175,55,0.6); color: #000;
}
.dlr-day {
    font-size: 8px; font-weight: 700; color: var(--t4); letter-spacing: 0.3px;
}
.dlr-done .dlr-day, .dlr-current .dlr-day { color: var(--t2); }
.dlr-amt {
    font-size: 8px; font-weight: 800; color: var(--t4);
}
.dlr-done .dlr-amt, .dlr-current .dlr-amt { color: var(--gold); }
.dlr-line {
    flex: 1; height: 2px; background: var(--b2);
    min-width: 8px; margin-top: 11px; align-self: flex-start;
}
.dlr-explain {
    text-align: center; font-size: 10px; color: var(--t3);
    line-height: 1.5; margin-top: 14px;
}

/* Pub gratuite (chips, AdMob rewarded) — pastille compacte dans la barre
   supérieure du lobby plutôt qu'un gros bouton pleine largeur : reste
   visible sans dominer visuellement l'écran d'accueil. Un léger effet de
   brillance
   (repris de .bp-prem-label-buy, voir Battle Pass) signale quand une pub
   est réellement disponible à regarder (canClaim), pour attirer l'oeil sans
   être permanent — s'arrête pendant le cooldown/le plafond quotidien. */
.ad-reward-chip {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 6px;
    background: var(--bg-3); border: 1px solid var(--b2);
    border-radius: 999px; padding: 8px 14px;
    color: var(--t1); font-size: 11px; font-weight: 800; letter-spacing: 0.5px;
    cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.ad-reward-chip:hover:not(:disabled) { border-color: var(--gold); background: var(--bg-4); transform: translateY(-1px); }
.ad-reward-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.ad-reward-icon { font-size: 14px; }
.ad-reward-chip.claimable {
    border-color: var(--gold);
    background: linear-gradient(150deg, rgba(184,148,46,0.22), rgba(212,175,55,0.08), var(--bg-3));
    box-shadow: 0 0 14px rgba(212,175,55,0.30);
    animation: bpPremPulse 2.6s ease-in-out infinite;
}
.ad-reward-chip.claimable::before {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
    animation: bpPremSheen 3.2s ease-in-out infinite;
}
/* Placée en absolu sous le bouton (voir .ad-reward-wrap, position:relative) :
   la barre d'onglets est fine et fixe, ce texte ne doit pas l'agrandir. */
.ad-reward-sub {
    position: absolute; top: 100%; right: 0; margin-top: 6px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.5px; color: var(--t3);
    white-space: nowrap;
    background: var(--bg-2); border: 1px solid var(--b2); border-radius: 6px;
    padding: 4px 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* ── SECTIONS ── */
.home-section {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    width: 100%; max-width: 580px;
}
.home-section-label {
    font-size: 9px; font-weight: 700; letter-spacing: 3px;
    text-transform: uppercase; color: var(--t4); text-align: center; margin: 0;
}
.home-table-sublabel { opacity: 0.6; margin-top: -4px; }

/* Sélecteur de marché — gros boutons/cartes sobres (pas de couleur vive
   permanente par catégorie, ça c'était le style "lobby de jeu mobile"
   abandonné) : fond neutre, un seul accent teinté par catégorie sur la
   carte ACTIVE seulement. */
.lobby-tabs {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    width: 100%;
}
.lobby-tab {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 18px 8px 16px;
    background: var(--bg-3); border: 1px solid var(--b2); border-radius: var(--r);
    color: var(--t2);
    font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.lobby-tab:hover { background: var(--bg-4); border-color: var(--b3); transform: translateY(-2px); }
.lobby-tab.active { color: var(--t1); }
.mcat-icon { font-size: 24px; line-height: 1; }

/* Teinte de la carte active par catégorie — cohérent avec les couleurs déjà
   utilisées ailleurs dans le jeu pour ces mêmes marchés. */
#cat-mixte.active       { border-color: var(--gold); background: var(--gold-bg); }
#cat-stocks.active      { border-color: var(--green); background: var(--green-bg); }
#cat-indices.active     { border-color: var(--teal); background: var(--teal-bg); }
#cat-crypto.active      { border-color: #b8985f; background: rgba(184,152,95,0.10); }
#cat-forex.active       { border-color: #8fa3ba; background: rgba(143,163,186,0.10); }
#cat-commodities.active { border-color: #a88a6a; background: rgba(168,138,106,0.10); }

/* Section tailles de table */
.hidden-tables {
    opacity: 0; pointer-events: none; transform: translateY(8px);
    max-height: 0; overflow: hidden; gap: 0;
    transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.35s ease, gap 0.35s ease;
}
.visible-tables {
    /* max-height sert seulement de point d'arrivée pour l'animation
       d'ouverture (technique classique pour animer une hauteur "auto") —
       volontairement bien plus grand que le contenu réel, sinon il agit
       comme un plafond qui clippe (overflow:visible ⇒ pas de découpe
       visible, mais le contenu déborde alors de la boîte sans agrandir le
       scroll du parent, et se retrouve cliqué sous la barre d'onglets fixe
       du bas sur mobile — bug réel trouvé en testant à 375px : les 9
       tuiles de mise dépassaient largement les 280px prévus ici à l'origine). */
    opacity: 1; pointer-events: all; transform: translateY(0); max-height: 600px;
    gap: 12px;
    transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.35s ease, gap 0.35s ease;
}
.game-options { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* Les 5 tables + la case High Roller doivent tenir sur une seule ligne —
   #table-size-section a besoin de plus large que les 580px par défaut de
   .home-section pour ça (6 cartes ~108-118px + 5 espacements ≈ 710px). */
#table-size-section { max-width: 760px; }
/* PAS de overflow-x:auto ici : même seul, ça force overflow-y à "auto" aussi
   (règle CSS : si l'un des deux overflow n'est pas "visible", l'autre le
   devient) — ce qui rognait le badge "POPULAIRE" (position:absolute,
   top:-9px, dépasse au-dessus du bouton) au survol. Le débordement horizontal
   sur un viewport plus étroit que 760px reste visuellement rare/mineur ;
   .home-section-label overflow rendrait pire que ce compromis. */
#table-size-section .game-options { flex-wrap: nowrap; }

/* Sous-grille des vraies tables High Roller — révélée au clic sur la case
   unique .high-roller-card (voir toggleHighRollerTier, game.js). Même
   technique max-height que .hidden-tables/.visible-tables ci-dessus. */
.high-roller-options {
    margin-top: 10px; width: 100%;
    opacity: 0; pointer-events: none; max-height: 0; overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.35s ease, margin-top 0.35s ease;
}
.high-roller-options.hidden { opacity: 0; pointer-events: none; max-height: 0; margin-top: 0; }
/* overflow: visible une fois dépliée — sinon (comme .hidden-tables/
   .visible-tables plus haut, qui retire bien overflow:hidden à l'ouverture)
   le survol des cartes (transform: translateY(-2px) + box-shadow, voir
   .btn-game-select:hover) se fait rogner en haut par le conteneur, faute de
   place réservée : bug rapporté ("le dessus du carré est coupé"). */
.high-roller-options:not(.hidden) { opacity: 1; pointer-events: all; max-height: 400px; overflow: visible; }
.high-roller-card .game-price { font-size: 22px; }



/* Éléments anciens — masqués */
.bank-container        { display: none !important; }
.home-stats-container  { display: none !important; }
.menu-card             { display: none !important; }
.htp-side-btn          { display: none !important; }

.btn-game-select {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 18px 16px; width: 108px;
    background: var(--bg-3); border: 1px solid var(--b2);
    border-radius: var(--r); cursor: pointer; color: var(--t2);
    transition: all 0.18s ease-out;
}
.game-tier-badge {
    position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, var(--gold), var(--gold-d));
    color: #14161c; font-size: 8px; font-weight: 900; letter-spacing: 0.5px;
    padding: 3px 8px; border-radius: 6px; white-space: nowrap;
    box-shadow: 0 2px 8px rgba(212,175,55,0.4);
}
.btn-game-select:hover {
    background: var(--bg-4); border-color: var(--gold);
    transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 24px rgba(255,201,77,0.18);
}
.btn-game-select:active { transform: translateY(0) scale(0.97); }
.btn-game-select.highlight { border-color: rgba(212,175,55,0.3); }
.btn-game-select.highlight:hover { border-color: var(--gold); box-shadow: 0 8px 24px rgba(212,175,55,0.12); }
.btn-game-select.danger   { border-color: rgba(231,76,60,0.25); min-width: 112px; }
.btn-game-select.danger:hover { border-color: var(--red); box-shadow: 0 8px 24px rgba(231,76,60,0.12); }
.btn-game-select.danger .game-price { color: var(--red); }
.btn-game-select.vip {
    border-color: rgba(212,175,55,0.4); min-width: 112px;
    background: linear-gradient(160deg, rgba(184,148,46,0.14), var(--bg-3));
}
.btn-game-select.vip:hover { border-color: var(--gold); box-shadow: 0 8px 24px rgba(212,175,55,0.18); }
.btn-game-select.vip.locked {
    border-color: var(--b2); background: var(--bg-3); filter: grayscale(0.8); opacity: 0.65;
}
.btn-game-select.vip.locked .game-price-vip { color: var(--t4) !important; }
.btn-game-select.vip.locked:hover { border-color: var(--b3); box-shadow: none; }
.game-price-vip { color: var(--gold) !important; font-variant-numeric: tabular-nums; }
.game-price { font-size: 22px; font-weight: 800; color: var(--t1); line-height: 1; font-variant-numeric: tabular-nums; }
.game-desc  { font-size: 9px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--t4); }
.btn-game-select.premium {
    border-color: rgba(212,175,55,0.4); min-width: 118px;
    background: linear-gradient(160deg, rgba(184,148,46,0.14), var(--bg-3));
}
.btn-game-select.premium:hover { border-color: var(--gold); box-shadow: 0 8px 24px rgba(212,175,55,0.18); }
.btn-game-select.premium .game-price { color: var(--gold); }
.game-desc-sub { font-size: 8px; font-weight: 600; color: var(--t4); margin-top: 2px; display: block; }
.game-ticket-badge {
    font-size: 9px; font-weight: 700; color: var(--teal);
    background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3);
    border-radius: 10px; padding: 2px 6px; margin-top: 2px;
}

/* ── Modal Comment Jouer ── */
.htp-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
}
.htp-modal {
    background: var(--bg-2); border: 1px solid var(--b3);
    border-radius: var(--r3); padding: 30px 36px 28px;
    width: min(520px, 92vw); max-height: 82vh;
    overflow-y: auto; position: relative;
    scrollbar-width: thin; scrollbar-color: var(--b2) transparent;
}
.htp-close {
    position: absolute; top: 14px; right: 16px;
    background: var(--bg-3); border: 1px solid var(--b2);
    color: var(--t3); width: 26px; height: 26px; border-radius: 50%;
    font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.htp-close:hover { color: var(--t1); border-color: var(--b3); }
.htp-title {
    font-size: 13px; font-weight: 800; letter-spacing: 4px;
    text-transform: uppercase; color: var(--t1); text-align: center; margin-bottom: 22px;
}
.htp-tab-row { flex-wrap: wrap; justify-content: center; }
.htp-tab-row .ch-tab { font-size: 9px; padding: 6px 10px; letter-spacing: 1px; }
.htp-section { margin-bottom: 20px; }
.htp-section-title {
    font-size: 9px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: var(--teal);
    border-bottom: 1px solid var(--b1); padding-bottom: 5px; margin-bottom: 10px;
}
.htp-steps { display: flex; flex-direction: column; gap: 8px; }
.htp-step  { display: flex; align-items: flex-start; gap: 10px; }
.htp-step-num {
    min-width: 20px; height: 20px; background: var(--teal-bg); border: 1px solid rgba(16,185,129,0.32);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; color: var(--teal); flex-shrink: 0; margin-top: 1px;
}
.htp-step div { font-size: 12px; color: var(--t2); line-height: 1.55; }
.htp-step strong { color: var(--t1); }
.htp-actions { display: flex; flex-direction: column; gap: 7px; }
.htp-action-row { display: flex; align-items: center; gap: 10px; }
.htp-action-badge {
    font-size: 9px; font-weight: 700; letter-spacing: 1px; padding: 3px 9px;
    border-radius: 4px; white-space: nowrap; min-width: 96px; text-align: center; flex-shrink: 0;
}
.htp-action-badge.danger  { background: var(--red-bg);  border: 1px solid rgba(239,68,68,0.3);  color: var(--red); }
.htp-action-badge.neutral { background: var(--bg-3);    border: 1px solid var(--b2);             color: var(--t2); }
.htp-action-badge.primary { background: var(--teal-bg); border: 1px solid rgba(16,185,129,0.32); color: var(--teal); }
.htp-action-desc { font-size: 12px; color: var(--t2); line-height: 1.45; }
.htp-action-badge.ind-badge { min-width: 60px; font-family: 'Inter', monospace; letter-spacing: 0.5px; }

/* ============================================================
   CUSTOM POPUP
   ============================================================ */
#custom-popup-overlay {
    /* z-index au-dessus de #streak-shield-overlay (200001) : une popup
       générique (ex. "pub bientôt disponible", erreur d'achat) peut
       s'ouvrir PAR-DESSUS la popup bouclier déjà affichée — sans ça elle
       s'ouvrait bien (état non hidden) mais restait invisible, cachée
       derrière (bug trouvé en testant le bouton "regarder une pub"). */
    position: fixed; inset: 0; z-index: 210000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10,12,16,0.6);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    animation: cppFadeIn 0.18s ease;
}
#custom-popup-overlay.hidden { display: none; }
@keyframes cppFadeIn { from { opacity:0; } to { opacity:1; } }

/* ── Bouclier de streak (décision manuelle) — même carte/boutons que
   #custom-popup-overlay (.cpp-*). z-index volontairement PLUS BAS que
   #custom-popup-overlay (210000) : une popup générique déclenchée DEPUIS
   cette popup bouclier (ex. "pub bientôt disponible", erreur d'achat) doit
   rester visible par-dessus elle. Le cas inverse (une popup générique DÉJÀ
   ouverte avant que l'offre de bouclier arrive, ex. le choix de langue au
   tout premier chargement) n'est PAS géré par le z-index — table-client.js
   (_showStreakShieldModalWhenClear) attend que cette popup se ferme avant
   d'afficher celle-ci, plutôt que de se disputer un numéro de z-index (les 2
   sens ne peuvent pas gagner en même temps avec un seul empilement fixe). */
#streak-shield-overlay {
    position: fixed; inset: 0; z-index: 200001;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10,12,16,0.6);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    animation: cppFadeIn 0.18s ease;
}
#streak-shield-overlay.hidden { display: none; }
.ssm-owned {
    font-size: 12px; font-weight: 700; color: var(--gold);
    margin-top: -16px; margin-bottom: 20px;
}
.cpp-btn:disabled { opacity: 0.45; cursor: default; pointer-events: none; }

.cpp-card {
    background: linear-gradient(160deg, var(--bg-2) 0%, var(--bg-1) 100%);
    border: 1px solid var(--b3);
    border-radius: var(--r3);
    padding: 40px 48px 36px;
    width: min(460px, 90vw);
    text-align: center;
    position: relative; overflow: hidden;
    box-shadow: 0 40px 80px rgba(0,0,0,0.85), 0 0 0 1px var(--b1);
    animation: cppCardIn 0.22s cubic-bezier(0.16,1,0.3,1);
}
@keyframes cppCardIn {
    from { opacity:0; transform: scale(0.88) translateY(20px); }
    to   { opacity:1; transform: scale(1)    translateY(0); }
}
/* Ligne accent haut */
.cpp-card::before {
    content: ''; position: absolute; top:0; left:15%; right:15%; height:2px;
    background: linear-gradient(90deg, transparent, var(--teal), transparent);
}

.cpp-icon {
    font-size: 44px; line-height: 1; margin-bottom: 16px;
    filter: drop-shadow(0 0 18px rgba(16,185,129,0.4));
}
.cpp-icon.danger { filter: drop-shadow(0 0 18px rgba(239,68,68,0.5)); }

.cpp-title {
    font-size: 17px; font-weight: 900; letter-spacing: 4px;
    text-transform: uppercase; color: var(--t1); margin-bottom: 12px;
}
.cpp-message {
    font-size: 13px; font-weight: 500; color: var(--t2);
    line-height: 1.65; margin-bottom: 28px;
}

.cpp-buttons {
    display: flex; flex-direction: column; gap: 10px;
}
/* Case à cocher obligatoire (CGU/politique de confidentialité, entre autres
   — voir showFirstConsentPopup, auth-client.js) injectée via messageHtml
   dans .cpp-message, ci-dessus). */
.cpp-consent-row {
    display: flex; align-items: flex-start; gap: 10px;
    text-align: left; cursor: pointer; font-size: 12px; line-height: 1.55;
}
.cpp-consent-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--green); cursor: pointer; }
.cpp-consent-row a { color: var(--teal); }
.cpp-btn {
    width: 100%; padding: 13px 20px;
    border-radius: var(--r); font-size: 11px; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase;
    cursor: pointer; transition: all 0.15s ease-out;
    border: none; border-bottom: 4px solid var(--bg-1);
    background: var(--bg-3); color: var(--t2);
}
.cpp-btn:hover { background: var(--bg-4); color: var(--t1); transform: translateY(-1px); }
.cpp-btn:active { transform: translateY(3px); border-bottom-width: 1px; }
.cpp-btn.primary {
    background: var(--teal); color: #06210f; border-bottom-color: #007a3d;
}
.cpp-btn.primary:hover { background: #22ff8e; transform: translateY(-1px); box-shadow: 0 0 22px rgba(0,230,118,0.4); }
.cpp-btn.danger {
    background: var(--red); color: #2b0007; border-bottom-color: #8f0021;
}
.cpp-btn.danger:hover { background: #ff3f66; box-shadow: 0 0 22px rgba(255,23,68,0.35); }

/* ── Mon compte (Phase A) ── */
.auth-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.auth-tab {
    flex: 1; padding: 9px; border-radius: 8px; border: 1px solid var(--b2);
    background: var(--bg-2); color: var(--t3); font-size: 11px; font-weight: 700;
    letter-spacing: 0.5px; cursor: pointer; transition: all 0.15s;
}
.auth-tab.active { background: var(--teal-bg); color: var(--teal); border-color: rgba(16,185,129,0.4); }
.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.auth-field span { font-size: 10px; font-weight: 700; color: var(--t4); text-transform: uppercase; letter-spacing: 0.8px; }
/* Label + hint (ex. "Nouveau pseudo" + "(GRATUIT)") côte à côte au lieu de
   l'un sous l'autre : sans ce wrapper, les deux <span> sont des enfants
   flex directs de .auth-field (column) et deviennent chacun leur propre
   ligne (demande explicite : optimiser l'espace). */
.auth-field-label-row { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.auth-field input {
    background: var(--bg-2); border: 1px solid var(--b2); border-radius: 7px;
    padding: 10px 12px; font-size: 13px; color: var(--t1); font-family: inherit;
}
.auth-field input:focus { outline: none; border-color: rgba(16,185,129,0.5); }
.acct-referral-desc { font-size: 12px; color: var(--t3); line-height: 1.5; margin: 0 0 16px; }
.acct-referral-link-row { display: flex; gap: 8px; }
.acct-referral-link-row input { flex: 1; min-width: 0; }
.acct-referral-link-row .cpp-btn { width: auto; flex-shrink: 0; padding: 10px 16px; }
/* Barres de progression par ami invité (demande explicite) — même principe
   visuel que .stat-tile (fond --bg-1, coin arrondi) plutôt qu'un nouveau
   style, pour rester cohérent avec le reste de l'onglet. */
.acct-referral-friend {
    background: var(--bg-1); border-radius: 10px; padding: 10px 12px;
    margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px;
}
.acct-referral-friend-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; }
.acct-referral-friend-name { font-weight: 700; color: var(--t1); }
.acct-referral-friend-status { color: var(--t3); font-size: 11px; }
.acct-referral-friend-status.done { color: var(--teal); font-weight: 700; }
.acct-referral-bar { width: 100%; height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; }
.acct-referral-bar-fill {
    height: 100%; background: var(--teal); width: 0%; border-radius: 3px;
    transition: width 0.4s ease;
}
.auth-error { font-size: 11px; color: var(--red); min-height: 14px; margin: 0; }
/* Vide 99% du temps (aucune erreur/succès en cours) mais réservait quand
   même 14px + sa part du `gap` du conteneur flex à chaque fois — visible
   surtout dans Pseudo, où DEUX de ces lignes (erreur + succès) s'accumulent
   entre le champ et le bouton. En les retirant du flux quand vides, le
   `gap` ne s'applique plus autour d'elles non plus (fonctionnement normal de
   flexbox : un enfant display:none ne compte pas dans le gap). */
.auth-error:empty, .auth-success:empty { display: none; }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 4px 0; color: var(--t4); font-size: 10px; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--b1); }
/* Lien de bascule connexion/inscription — remplace l'ancienne barre à 2
   onglets (.auth-tabs, retirée du HTML) par un texte discret sous le
   bouton, pattern plus sobre/courant qu'une barre d'onglets pour un simple
   aller-retour entre 2 formulaires. */
.auth-switch-mode { text-align: center; font-size: 12px; color: var(--t3); margin: 14px 0 0; }
.auth-switch-mode a { color: var(--teal); text-decoration: none; font-weight: 600; margin-left: 4px; }
.auth-switch-mode a:hover { text-decoration: underline; }
.auth-forgot-link { text-align: right; margin: -6px 0 0; font-size: 11px; }
.auth-forgot-link a { color: var(--t3); text-decoration: none; }
.auth-forgot-link a:hover { color: var(--teal); text-decoration: underline; }
/* Champs texte injectés dans une popup générique (voir .cpp-message,
   openForgotPasswordFlow/_showResetPasswordPopup, auth-client.js) — même
   apparence que .auth-field input ci-dessus, hors du contexte .auth-field. */
.auth-popup-input {
    width: 100%; box-sizing: border-box;
    background: var(--bg-2); border: 1px solid var(--b2); border-radius: 7px;
    padding: 10px 12px; font-size: 13px; color: var(--t1); font-family: inherit;
}
.auth-popup-input:focus { outline: none; border-color: rgba(16,185,129,0.5); }
/* Le placeholder anglais ("you@example.com or your nickname") déborde et se
   coupe sans "..." sur un écran étroit (bug trouvé en testant le popup
   "Mot de passe oublié" en anglais sur mobile) — les versions FR/ES tiennent
   déjà, seule la police réduite ici change, jamais le texte lui-même. */
@media (max-width: 400px) {
    .auth-popup-input { font-size: 11.5px; }
}
.auth-balance-row { display: flex; gap: 10px; margin-bottom: 16px; }
.auth-balance-item {
    flex: 1; background: var(--bg-2); border: 1px solid var(--b2); border-radius: 10px;
    padding: 12px; text-align: center;
}
.auth-balance-label { display: block; font-size: 9px; font-weight: 700; color: var(--t4); letter-spacing: 1px; margin-bottom: 4px; }
.auth-balance-value { font-size: 20px; font-weight: 800; color: var(--gold); }

/* ── Paramètres du compte (renommage / mot de passe / préférences) ── */
/* overflow-wrap:anywhere — le hint peut contenir un email complet (un
   seul "mot" sans espace, ex. "designtest2_...@example.com") ; sans ça il
   refusait de rétrécir sous sa propre largeur de contenu et forçait toute
   la modale à déborder horizontalement (scroll latéral) sur fenêtre
   étroite au lieu de simplement retourner à la ligne. */
.auth-field-hint { text-transform: none; font-weight: 600; letter-spacing: 0; color: var(--gold); font-size: 10px; min-width: 0; overflow-wrap: anywhere; }
.auth-field input { width: 100%; box-sizing: border-box; }
.auth-success { font-size: 11px; color: var(--teal); min-height: 14px; margin: 0; }

/* Contenu de chaque onglet (Pseudo / Mot de passe / Préférences) — même
   rythme vertical qu'un .auth-form (gap 10px), pas de scroll interne inutile
   puisqu'un seul onglet est visible à la fois. */
/* La fenêtre a été élargie (720px) pour que les 6 onglets tiennent sur une
   ligne, mais des champs (pseudo, mot de passe, langue…) étirés sur toute
   cette largeur laissaient un grand vide à droite — plafonné à 480px, comme
   avant l'élargissement de la fenêtre (Statistiques y compris : 2 colonnes
   comme à l'origine, pas de traitement à part). */
.acct-tab-content { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.acct-tab-content .cpp-btn { margin-top: 4px; }
.acct-google-note {
    font-size: 12px; color: var(--t3); line-height: 1.5; text-align: center;
    background: var(--bg-2); border: 1px solid var(--b2); border-radius: 8px; padding: 16px;
}

/* ── Statistiques ── */
.stat-section-title {
    font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--t4); margin: 14px 0 8px;
}
.stat-section-title:first-child { margin-top: 0; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat-tile {
    display: flex; flex-direction: column; gap: 3px;
    background: var(--bg-2); border: 1px solid var(--b2); border-radius: 8px; padding: 10px 12px;
}
.stat-tile-label { font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--t4); }
.stat-tile-value { font-size: 15px; font-weight: 800; color: var(--t1); font-variant-numeric: tabular-nums; }
.stat-tile-value.positive { color: var(--teal); }
.stat-tile-value.negative { color: var(--red); }

/* ============================================================
   MON COMPTE — habillage dédié, plus sobre/pro que le reste du jeu
   ============================================================
   Demande explicite : cet écran doit se sentir "logiciel sérieux", pas
   "jeu casual" — contrairement au reste de l'UI (feutre néon, boutons 3D
   à bevel épais, contours dorés lumineux), volontairement gardé tel quel
   partout ailleurs. Tout est donc scopé sous #account-overlay pour ne
   RIEN changer visuellement en dehors de cet écran précis. Les trois
   signaux "jeu bon marché" retirés ici : (1) le bevel 3D épais des
   boutons (border-bottom 4px + effet "bouton bonbon" au clic), (2) le
   contour doré lumineux à double liseré de la modale, (3) les onglets en
   pilules pleines très saturées — remplacés par une modale à bord neutre,
   des boutons plats avec un vrai état hover/focus, et des onglets en
   soulignement (pattern courant des interfaces SaaS). */
/* Itération 2 (demande explicite : "ça look site de pro, site de banque
   professionnel", le sobre plat ci-dessus gardait encore l'accent néon vert
   et le doré du reste du jeu — c'est ce qui trahissait encore un "jeu").
   --teal/--gold redéfinis UNIQUEMENT dans ce scope (les composants
   partagés ci-dessous les consomment via var(), donc un seul point de
   redéfinition suffit à changer l'avatar, les onglets actifs, les boutons
   primaires ET le solde/pseudo, sans dupliquer chaque règle) : bleu sobre
   type fintech (Stripe/Wise) à la place du vert néon, gris-bleu clair à la
   place du doré tape-à-l'œil pour les valeurs chiffrées (solde, pseudo) —
   un vrai ton "relevé de compte" plutôt qu'un highlight de jeu. */
#account-overlay {
    --teal: #3b82f6;
    --teal-d: #2563eb;
    --teal-bg: rgba(59,130,246,0.14);
    --gold: #dbe4f3;
}
#account-overlay .cpp-btn.primary { color: #ffffff; }
#account-overlay .cpp-btn.primary:hover { background: #2563eb; border-color: #2563eb; box-shadow: 0 4px 18px rgba(37,99,235,0.35); }
#account-overlay .acct-avatar { color: #ffffff; }
#account-overlay .inv-modal {
    border: 1px solid var(--b2);
    outline: none;
    background: linear-gradient(175deg, var(--bg-2) 0%, var(--bg-1) 100%);
    box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
    border-radius: 18px;
    padding: 24px 28px;
}
#account-overlay .inv-modal-header {
    padding-bottom: 16px; margin-bottom: 22px;
    border-bottom: 1px solid var(--b2);
}
#account-overlay .inv-modal-title {
    font-weight: 700; letter-spacing: 0.2px; font-size: 16px; color: var(--t1);
    display: flex; align-items: center; gap: 9px;
}
.acct-title-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--t3); }
#account-overlay .inv-close-btn { border-radius: 8px; }

/* Onglets (Connexion/Créer un compte, et les 8 de la vue connectée) — bord
   inférieur au lieu de pilule pleine, gris neutre au repos plutôt que le
   bg-2 saturé d'avant. */
#account-overlay .auth-tabs { gap: 0; margin-bottom: 22px; border-bottom: 1px solid var(--b2); }
#account-overlay .auth-tab {
    background: none; border: none; border-radius: 0;
    padding: 10px 4px; margin-bottom: -1px;
    color: var(--t3); font-weight: 600; letter-spacing: 0.2px;
    border-bottom: 2px solid transparent;
}
#account-overlay .auth-tab:hover { color: var(--t1); background: none; }
#account-overlay .auth-tab.active {
    background: none; color: var(--t1); border-bottom-color: var(--teal);
}
#account-overlay .acct-tab-row { gap: 2px; border-bottom: 1px solid var(--b2); margin-bottom: 22px !important; }
#account-overlay .acct-tab {
    background: none; border: none; border-radius: 0;
    padding: 9px 12px; margin-bottom: -1px;
    color: var(--t3); font-weight: 600;
    border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s, background 0.15s;
    display: flex; align-items: center; gap: 6px;
}
#account-overlay .acct-tab:hover { color: var(--t1); background: none; }
#account-overlay .acct-tab.active { background: none; color: var(--t1); border-bottom-color: var(--teal); }

/* Vue connectée — carte profil + navigation à gauche, contenu à droite
   (pattern "settings dashboard" des logiciels SaaS pros — Stripe, Linear,
   etc. — demande explicite : "que ça look site professionnel"). Sur mobile
   ça reste empilé verticalement avec la barre d'onglets horizontale
   existante (voir plus bas, .acct-shell garde flex-direction:column par
   défaut ; seul le bloc desktop @media plus bas la passe en row). */
.acct-shell { display: flex; flex-direction: column; gap: 16px; }
.acct-sidebar { display: flex; flex-direction: column; gap: 11px; }
.acct-main { min-width: 0; }
.acct-profile { display: flex; align-items: center; gap: 12px; }
.acct-avatar {
    width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
    background: linear-gradient(135deg, var(--teal), var(--teal-d));
    color: #06210f; font-weight: 800; font-size: 17px;
    display: flex; align-items: center; justify-content: center;
}
.acct-profile-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct-profile-label { font-size: 10px; color: var(--t4); text-transform: uppercase; letter-spacing: 0.6px; }
.acct-profile-name {
    font-size: 15px; font-weight: 800; color: var(--gold);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-logout-btn { margin-top: 4px; }
.acct-icon { width: 15px; height: 15px; flex-shrink: 0; }
.acct-doc-links { display: flex; gap: 8px; }
.acct-doc-links .acct-doc-link { flex: 1; }
.acct-tab-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--t4); transition: color 0.15s; }

/* Zone de danger (suppression du compte) — fusionnée dans l'onglet
   Confidentialité au lieu d'un onglet dédié pour une seule action (demande
   explicite : regrouper les sections qui ont du sens). Encadré distinct en
   rouge, pattern "danger zone" courant des interfaces pro (GitHub, Stripe),
   pour que l'action reste bien signalée malgré le regroupement. */
.acct-danger-zone {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px 18px;
    border: 1px solid rgba(255,23,68,0.3); border-radius: var(--r2);
    background: rgba(255,23,68,0.04);
}
.acct-danger-zone-title {
    font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    color: var(--red); margin: 0;
}
.acct-tab.active .acct-tab-icon, .acct-tab:hover .acct-tab-icon { color: currentColor; }

/* Boutons — plats, sans bevel 3D ni effet "bonbon" au clic. Largeur/
   padding repris de .cpp-btn (base jeu : width:100%, gros padding, lettres
   espacées — pensé pour un CTA "MISER" plein écran) explicitement écrasés
   ici : un bouton de formulaire ("Confirmer", "Changer l'email") n'a pas
   besoin d'être aussi large ni aussi imposant (demande explicite : "boutons
   trop gros pour rien"). width:auto + align-self:flex-start plutôt que
   center : le bouton reste sous son champ, aligné à gauche comme le texte
   au-dessus, cohérent avec le reste du formulaire plutôt qu'îlot centré
   isolé. */
#account-overlay .cpp-btn {
    width: auto; align-self: flex-start; min-width: 200px;
    padding: 10px 18px; font-size: 11px; letter-spacing: 0.3px; font-weight: 600;
    border: 1px solid var(--b2); border-bottom: 1px solid var(--b2);
    border-radius: 10px;
    background: var(--bg-3); color: var(--t2);
    display: flex; align-items: center; justify-content: center; gap: 7px;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
#account-overlay .cpp-btn:hover { background: var(--bg-4); border-color: var(--b3); transform: none; }
#account-overlay .cpp-btn:active { transform: scale(0.98); }
#account-overlay .cpp-btn.primary {
    background: var(--teal); border-color: var(--teal); color: #06210f;
}
#account-overlay .cpp-btn.primary:hover { background: #1fe085; border-color: #1fe085; box-shadow: 0 4px 18px rgba(16,185,129,0.3); }
#account-overlay .cpp-btn.danger {
    background: transparent; border-color: rgba(255,23,68,0.4); color: var(--red);
}
#account-overlay .cpp-btn.danger:hover { background: rgba(255,23,68,0.1); border-color: var(--red); box-shadow: none; }

/* Champs — coin plus arrondi, anneau de focus au lieu d'un simple
   changement de couleur de bordure (pattern SaaS courant). */
#account-overlay .auth-field input {
    border-radius: 10px; padding: 11px 14px;
    background: var(--bg-1); border: 1px solid var(--b2);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#account-overlay .auth-field input:focus {
    border-color: var(--teal); box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}
#account-overlay .auth-field span { letter-spacing: 0.3px; }

/* Tuiles (solde/stats) — bord plus doux, pas de fond saturé. */
#account-overlay .auth-balance-item,
#account-overlay .stat-tile {
    border-radius: 12px; background: var(--bg-1);
}

/* Texte/espacements rapetissés dans toute la page "Mon compte" (demande
   explicite : trop de scroll pour y accéder, surtout avec les 8 onglets de
   la vue connectée) — scopé à #account-overlay pour ne rien changer
   ailleurs (.cpp-btn/.stat-tile/etc. sont des composants partagés avec
   d'autres popups/écrans). Uniquement au-delà de 640px : en dessous, le
   bloc mobile partagé (plus bas dans ce fichier) a déjà SA PROPRE
   compaction dédiée (.acct-tab à 7.5px, etc.) — sans cette limite, ces
   règles (plus spécifiques, id+classe) l'auraient emporté malgré la media
   query et re-agrandi legèrement l'écran mobile au lieu de le rapetisser. */
@media (min-width: 641px) {
    /* Fenêtre agrandie pour occuper une plus grosse partie de l'écran sur
       ordinateur (demande explicite) — largeur, textes, cartes et espacements
       remontés en conséquence sur tout l'onglet, pas seulement le conteneur,
       sinon un contenu inchangé aurait juste flotté avec plus de vide autour. */
    #account-overlay .inv-modal { padding: 34px 40px; max-height: 90vh; }
    #account-overlay .inv-modal-header { padding-bottom: 10px; margin-bottom: 14px; }
    #account-overlay .inv-modal-title { font-size: 21px; }
    #account-overlay .acct-title-icon { width: 22px; height: 22px; }
    /* Espace resserré du titre jusqu'à la barre d'onglets (Pseudo/Mot de
       passe/etc) — demande explicite : trop d'air entre "Mon compte" et
       les onglets. Les onglets eux-mêmes sont agrandis (8.5px → 11px,
       toujours "l'écriture de la barre de sélection") — padding élargi en
       conséquence pour rester proportionné. */
    /* Carte profil + navigation en colonne fixe à gauche, contenu à droite
       — remplace l'ancienne rangée d'onglets pleine largeur par un vrai
       menu latéral de type "paramètres" (demande explicite : look
       professionnel). */
    #account-overlay .acct-shell { flex-direction: row; align-items: flex-start; gap: 36px; }
    #account-overlay .acct-sidebar {
        width: 240px; flex: 0 0 240px;
        padding-right: 24px; border-right: 1px solid var(--b2);
        gap: 16px;
    }
    /* .acct-main n'avait jamais reçu flex:1 — sans ça un onglet au contenu
       étroit (Mot de passe) laissait le conteneur se réduire à la largeur
       de son propre formulaire au lieu de remplir l'espace à côté de la
       barre latérale, rendant tout centrage sur son contenu inopérant
       (rien à centrer DANS un conteneur déjà collé à son contenu). */
    #account-overlay .acct-main { flex: 1; min-width: 0; }
    #account-overlay .acct-tab-row {
        flex-direction: column; flex-wrap: nowrap;
        border-bottom: none; margin-bottom: 0 !important; gap: 3px;
    }
    #account-overlay .acct-tab {
        flex: none; width: 100%; text-align: left;
        padding: 12px 14px; font-size: 14px;
        border-bottom: none; border-radius: 9px;
        border-left: 3px solid transparent;
    }
    #account-overlay .acct-tab-icon { width: 18px; height: 18px; }
    #account-overlay .acct-tab:hover { background: var(--bg-3); }
    #account-overlay .acct-tab.active { background: var(--teal-bg); border-left-color: var(--teal); }
    #account-overlay .auth-tabs { margin-bottom: 10px; }
    #account-overlay .auth-tab { padding: 7px; font-size: 10px; }
    #account-overlay .auth-form { gap: 10px; }
    #account-overlay .acct-avatar { width: 54px; height: 54px; flex: 0 0 54px; font-size: 21px; }
    #account-overlay .acct-profile-name { font-size: 18px; }
    #account-overlay .acct-profile-label { font-size: 11px; }
    #account-overlay .acct-icon { width: 17px; height: 17px; }
    /* Le contenu de chaque onglet reste à une largeur confortable de
       lecture (pas toute la largeur du panneau, un formulaire plein écran
       serait disproportionné), centré horizontalement dans l'espace à
       droite de la nav (demande explicite : "centrer tout ce qui est dans
       cet onglet") — Pseudo et Statistiques passent en max-width:100% plus
       bas (2 colonnes / grille de tuiles, elles remplissent déjà tout
       l'espace, un centrage n'y change rien) donc ne sont pas concernés. */
    #account-overlay .acct-tab-content { gap: 14px; max-width: 580px; margin: 0 auto; }
    #account-overlay .auth-field { gap: 6px; }
    #account-overlay .auth-field span { font-size: 12px; }
    #account-overlay .auth-field-label-row { gap: 8px; }
    #account-overlay .auth-field input { padding: 13px 16px; font-size: 15px; }
    #account-overlay .auth-field-hint { font-size: 11px; }
    #account-overlay .auth-error,
    #account-overlay .auth-success { font-size: 12px; min-height: 14px; }
    #account-overlay .auth-switch-mode { font-size: 12px; margin: 8px 0 0; }
    #account-overlay .auth-balance-row { gap: 10px; margin-bottom: 0; }
    #account-overlay .auth-balance-item { padding: 12px 14px; }
    #account-overlay .auth-balance-label { font-size: 9.5px; margin-bottom: 4px; }
    #account-overlay .auth-balance-value { font-size: 22px; }
    #account-overlay .cpp-btn { padding: 11px 20px; font-size: 12px; min-width: 220px; }
    #account-overlay .settings-toggle-row span { font-size: 14px; }
    #account-overlay .settings-toggle-row span small { font-size: 11px; }
    #account-overlay .fb-stars { gap: 8px; margin-bottom: 16px; }
    #account-overlay .fb-star { font-size: 28px; }
    #account-overlay p { font-size: 14px; }

    /* Onglet Pseudo : c'est le seul avec DEUX sections indépendantes
       (renommage + email) — plutôt que de les empiler avec une ligne de
       séparation qui traverse tout le vide à droite pour rien, elles
       passent côte à côte en 2 colonnes une fois le panneau assez large.
       Utilise réellement l'espace au lieu de le centrer/gaspiller. */
    /* :not(.hidden) — .hidden est en !important (display:none), donc même
       un #id doit s'aligner en !important pour prendre le dessus QUAND
       l'onglet est actif ; mais si on l'applique sans condition, ce même
       !important empêche alors .hidden de re-masquer l'onglet en changeant
       d'onglet (bug constaté : Pseudo restait affiché sous Statistiques).
       Restreindre au :not(.hidden) règle les deux à la fois. */
    /* Chaque colonne est son propre conteneur flex indépendant (au lieu
       d'assigner un grid-row à chaque enfant du Pseudo tab un par un) —
       l'ancienne version faisait déborder le champ + bouton "Nouveau
       pseudo" sur les MÊMES lignes de grille implicites que la colonne
       email (grid-row:1/-1 dessus), et comme la colonne email est plus
       haute (2 champs), la grille agrandissait les lignes vides entre eux
       (les <p class="auth-error/success"> normalement invisibles) pour
       compenser — d'où le grand vide constaté entre le champ et le bouton
       (bug, pas juste "encore trop espacé" comme un simple gap à réduire). */
    /* Colonne Pseudo élargie (1.3fr vs 1fr) et ligne verticale entre les 2
       colonnes retirée pour récupérer de l'espace (demande explicite).
       Pas de largeur minimale fixe en px ici (un minmax(340px,...) forçait
       un débordement horizontal — scroll latéral — sur fenêtre étroite,
       demande explicite de l'éviter) : les colonnes restent 100% fluides,
       quitte à ce que le texte du bouton reprenne sur 2 lignes plutôt que
       de casser la largeur de la page. */
    #acct-content-pseudo:not(.hidden) {
        max-width: 100%;
        display: grid;
        grid-template-columns: 1.3fr 1fr; column-gap: 24px; align-items: start;
    }
    /* min-width:0 sur les 2 colonnes — sans ça une piste de grille `fr`
       refuse de rétrécir sous le contenu le plus large qu'elle contient
       (ex. l'adresse email actuelle, une seule "unbreakable string"),
       forçant un débordement horizontal de toute la modale (scroll
       latéral) au lieu de laisser le texte s'enrouler normalement. */
    #acct-content-pseudo .acct-pseudo-col { grid-column: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
    #acct-content-pseudo > div { grid-column: 2; min-width: 0; margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; padding-left: 0; border-left: none; display: flex; flex-direction: column; gap: 14px; }

    /* Onglet Statistiques : 3 tuiles par ligne au lieu de 2 vu la largeur
       disponible, tuiles agrandies pour rester lisibles à cette échelle. */
    #acct-content-stats:not(.hidden) { max-width: 100%; }
    #account-overlay .stat-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    #account-overlay .stat-tile { padding: 18px 20px; gap: 6px; }
    #account-overlay .stat-tile-label { font-size: 11px; }
    #account-overlay .stat-tile-value { font-size: 22px; }
    #account-overlay .stat-section-title { font-size: 12px; margin: 20px 0 12px; }
    #account-overlay .acct-danger-zone { padding: 20px 22px; gap: 14px; }
    #account-overlay .acct-danger-zone-title { font-size: 13px; }
    #account-overlay .legal-contact-box { padding: 18px 20px !important; }
    /* Aussi manquant sur desktop à l'origine : la modale n'avait aucune
       limite de hauteur/scroll interne — un compte avec beaucoup de contenu
       (Statistiques...) pouvait déborder du viewport SANS AUCUN moyen de
       scroller pour voir la suite. max-height déjà posé plus haut avec le
       padding agrandi ; ne reste ici que le scroll interne. */
    #account-overlay .inv-modal { overflow-y: auto; }

    /* "Défis du Jour" rapetissé (demande explicite : trop d'espace vide
       entre les onglets GRATUITS/PREMIUM, les titres de section et les
       tuiles de défi) — scopé à #challenges-overlay puisque .ch-tab et
       .hch-item/.hch-list/etc. n'existent que là (contrairement à
       .cpp-btn/.stat-tile côté #account-overlay, ces classes ne sont pas
       réutilisées ailleurs, mais on scope quand même par cohérence et pour
       ne pas dépendre de l'absence future de réutilisation). */
    #challenges-overlay .inv-modal-header { padding-bottom: 5px; margin-bottom: 6px; }
    #challenges-overlay .ch-tab-row { gap: 5px; margin-bottom: 8px; padding-bottom: 5px; }
    #challenges-overlay .ch-tab { padding: 4px 10px; font-size: 9.5px; }
    #challenges-overlay .hch-section-label { margin: 6px 0 3px; padding-bottom: 2px; font-size: 7.5px; }
    #challenges-overlay .hch-list { gap: 4px; }
    #challenges-overlay .hch-item { padding: 5px 7px; gap: 1px; }
    #challenges-overlay .hch-item-top { gap: 5px; }
    #challenges-overlay .hch-item-icon { font-size: 11px; }
    #challenges-overlay .hch-item-desc { font-size: 9.5px; line-height: 1.2; }
    #challenges-overlay .hch-item-xp { font-size: 8.5px; }
    #challenges-overlay .hch-progress-track { margin-top: 1px; height: 3px; }
    #challenges-overlay .hch-claim-btn { margin-top: 4px; padding: 5px 0; font-size: 9.5px; }
    #challenges-overlay .hch-reroll-btn { padding: 2px 6px; }
    #challenges-overlay .hch-premium-banner { padding: 7px 9px; margin-bottom: 6px; gap: 7px; }
    #challenges-overlay .hch-premium-icon { font-size: 18px; }
    #challenges-overlay .hch-premium-title { font-size: 10.5px; }
    #challenges-overlay .hch-premium-sub { font-size: 9px; margin-top: 1px; }
}

.fb-stars { display: flex; gap: 6px; margin-bottom: 18px; }
.fb-star {
    background: none; border: none; cursor: pointer;
    font-size: 28px; line-height: 1; color: var(--b3);
    transition: color 0.15s, transform 0.1s;
}
.fb-star:hover { transform: scale(1.15); }
.fb-star.active { color: var(--gold); }

.settings-toggle-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 2px; border-bottom: 1px solid var(--b1); cursor: pointer;
}
.settings-toggle-row:last-child { border-bottom: none; }
.settings-toggle-row span { font-size: 12.5px; color: var(--t1); line-height: 1.5; }
.settings-toggle-row span small { font-size: 10.5px; color: var(--t4); font-weight: 400; }
.settings-toggle {
    appearance: none; -webkit-appearance: none; position: relative;
    width: 38px; height: 22px; flex-shrink: 0; border-radius: 12px;
    background: var(--bg-4); border: 1px solid var(--b2); cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.settings-toggle::before {
    content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--t3); transition: transform 0.15s, background 0.15s;
}
.settings-toggle:checked { background: var(--teal-bg); border-color: rgba(16,185,129,0.5); }
.settings-toggle:checked::before { transform: translateX(16px); background: var(--teal); }


/* ============================================================
   ORDER BOOK FLASH SCREEN
   ============================================================ */
/* Petit bouton "De retour" DANS le carré du joueur (PAS un popup plein
   écran, demande explicite) — affiché quand ce siège est "en pause" (voir
   table:opponentAway/room.away, server.js : déconnecté OU simplement resté
   sans agir jusqu'à la fin de son temps). La partie tourne déjà normalement
   en dessous (auto-fold/position aléatoire côté serveur) ; un léger pouls
   attire l'œil sans bloquer quoi que ce soit. */
.im-back-btn {
    position: relative;
    padding: 8px 20px; border-radius: 8px; border: none;
    background: var(--green); color: #000; font-size: 14px; font-weight: 800;
    letter-spacing: 0.3px; cursor: pointer; transition: opacity 0.15s, transform 0.1s;
    animation: imBackPulse 1.6s ease-in-out infinite;
}
.im-back-btn:hover { opacity: 0.88; transform: translateY(-1px); }
/* Cliqué (voir imBack(), table-client.js) — reste affiché (pas caché tout de
   suite) jusqu'à la main suivante, mais grisé/désactivé pour montrer que la
   confirmation a bien été prise en compte ; le survol explique pourquoi ça
   n'a pas d'effet immédiat (voir info-bulle ci-dessous, demande explicite). */
.im-back-btn.im-back-confirmed {
    background: var(--bg-4); color: var(--t3); cursor: default;
    animation: none; opacity: 0.7;
}
.im-back-btn.im-back-confirmed:hover { opacity: 0.7; transform: none; }
/* Info-bulle stylée maison (dans les couleurs/police du jeu) plutôt que
   l'attribut title natif du navigateur — trop petit, blanc générique, hors
   thème (demande explicite : "plus en lien avec le jeu, même couleur").
   Texte posé dynamiquement dans data-tooltip par table-client.js. */
.im-back-btn::after {
    content: attr(data-tooltip);
    position: absolute; bottom: calc(100% + 10px); left: 50%;
    transform: translateX(-50%);
    /* Couleurs FIXES (pas de variable de thème) plutôt que --bg-1/--t1 :
       en thème clair ces variables s'inversent presque, ce qui rendait le
       texte peu lisible sur son propre fond (demande explicite : "une
       écriture plus claire afin qu'on voit le texte davantage") — ici le
       contraste blanc sur fond sombre est garanti, quel que soit le thème
       choisi par le joueur. */
    background: #14161c; color: #ffffff;
    border: 1px solid var(--teal); border-radius: 8px;
    padding: 9px 16px; font-size: 14px; font-weight: 800; line-height: 1.4;
    letter-spacing: 0.2px; white-space: nowrap;
    box-shadow: 0 10px 24px rgba(0,0,0,0.5);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.15s;
    z-index: 60;
}
/* Petite flèche pointant vers le bouton, même couleur que la bordure de
   l'info-bulle pour qu'elle ait l'air d'en sortir. */
.im-back-btn::before {
    content: ''; position: absolute; bottom: calc(100% + 4px); left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: var(--teal);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.15s; z-index: 60;
}
.im-back-btn:hover::after, .im-back-btn:hover::before,
.im-back-btn:focus-visible::after, .im-back-btn:focus-visible::before {
    opacity: 1; visibility: visible;
}
@keyframes imBackPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
    50%      { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}

#orderbook-screen {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; justify-content: center; align-items: center;
    background: var(--bg-0);
    background-image: radial-gradient(ellipse 70% 50% at 50% -10%, rgba(16,185,129,0.14) 0%, transparent 65%);
}
.ob-wrapper {
    width: min(420px, 94vw);
    background: var(--bg-1);
    border: 1px solid var(--b3);
    border-radius: var(--r3);
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0,0,0,0.75), 0 0 60px rgba(16,185,129,0.08);
}

/* Header */
.ob-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--b2);
    background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-1) 100%);
}
.ob-header-top {
    display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
}
.ob-header-tag {
    font-size: 8px; font-weight: 800; letter-spacing: 3px;
    text-transform: uppercase; color: var(--teal);
}
.ob-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--green); box-shadow: 0 0 8px var(--green);
    animation: ob-live-blink 0.65s ease infinite alternate;
    transition: background 0.4s, box-shadow 0.4s;
}
@keyframes ob-live-blink { from { opacity: 1; } to { opacity: 0.15; } }
.ob-header-sub {
    font-size: 11px; font-weight: 700; letter-spacing: 1.8px;
    text-transform: uppercase; color: var(--t1); transition: color 0.4s;
}
.ob-header.ob-matched-state .ob-header-sub { color: var(--gold); }
.ob-header.ob-matched-state .ob-live-dot {
    background: var(--gold); box-shadow: 0 0 10px rgba(212,175,55,0.8);
    animation: ob-gold-blink 0.5s ease infinite alternate;
}
@keyframes ob-gold-blink { from { opacity: 1; } to { opacity: 0.3; } }

/* Colonnes header */
.ob-cols {
    display: grid; grid-template-columns: 52px 1fr 76px;
    padding: 6px 20px 5px;
    font-size: 8px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: var(--t4);
    background: var(--bg-0); border-bottom: 1px solid var(--b1);
}

/* Viewport avec sélecteur fixe */
.ob-viewport {
    position: relative;
    height: 315px; /* 7 lignes × 45px */
    overflow: hidden;
}
/* Barre sélecteur fixe au centre */
.ob-selector {
    position: absolute;
    top: 50%; left: 0; right: 0;
    transform: translateY(-50%);
    height: 45px;
    border-top: 2px solid rgba(212,175,55,0.7);
    border-bottom: 2px solid rgba(212,175,55,0.7);
    background: rgba(212,175,55,0.07);
    z-index: 10; pointer-events: none;
}
.ob-sel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    color: var(--gold); font-size: 11px; line-height: 1;
    opacity: 0.85;
}
.ob-sel-left  { left: 10px; }
.ob-sel-right { right: 10px; }

/* Lignes */
.ob-book { position: relative; }
.ob-row {
    display: grid; grid-template-columns: 52px 1fr 76px;
    height: 45px; align-items: center;
    padding: 0 20px;
    font-size: 12px; font-weight: 600;
    font-family: 'Courier New', 'JetBrains Mono', monospace;
    border-bottom: 1px solid rgba(255,255,255,0.025);
    box-sizing: border-box;
}
.ob-ask { color: var(--red);   background: rgba(239,68,68,0.04); }
.ob-bid { color: var(--green); background: rgba(16,185,129,0.04); }
.ob-row-dim { opacity: 0.22; }

/* Ligne centrale pendant l'animation */
.ob-row-center {
    color: var(--t1);
    background: rgba(255,255,255,0.04);
}
.ob-mult-live {
    font-size: 22px; font-weight: 900; color: var(--t1); letter-spacing: -0.5px;
}

/* Ligne MATCHED finale */
.ob-matched {
    color: var(--gold) !important;
    background: rgba(212,175,55,0.14) !important;
    opacity: 1 !important;
    animation: ob-gold-row 0.55s ease infinite alternate;
}
.ob-matched .ob-mult-live {
    color: var(--gold);
    font-size: 26px;
    text-shadow: 0 0 20px rgba(212,175,55,0.6);
}
@keyframes ob-gold-row {
    from { background: rgba(212,175,55,0.07); }
    to   { background: rgba(212,175,55,0.24); }
}

/* Footer scan */
.ob-footer { height: 3px; background: var(--bg-0); overflow: hidden; }
.ob-scan-bar {
    height: 100%; width: 40%;
    background: linear-gradient(90deg, transparent, var(--teal), transparent);
    animation: ob-bar-sweep 1.1s linear infinite;
}
@keyframes ob-bar-sweep {
    from { transform: translateX(-150%); }
    to   { transform: translateX(350%); }
}

/* ============================================================
   TOP NAV
   ============================================================ */
#top-nav {
    position: fixed; top: 0; left: 0; width: 100%; height: 44px;
    background: linear-gradient(90deg, rgba(13,11,8,0.88) 0%, rgba(18,15,10,0.88) 100%);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--b2);
    box-shadow: 0 1px 0 var(--b2), 0 4px 28px rgba(0,0,0,0.6), 0 0 40px rgba(212,175,55,0.06);
    display: flex; align-items: stretch;
    /* Au-dessus de TOUS les overlays transitoires d'une main normale —
       #win-screen (2000, récap affiché après chaque main), #orderbook-screen
       (9000, début de partie), et surtout #news-modal (10000, révélation de
       news À CHAQUE main) : un joueur éliminé (all-in perdu) mais dont la
       session continue pour les 2 autres restait bloqué derrière CES DEUX
       overlays qui se ré-affichent en boucle, rendant le bouton "Quitter"
       inatteignable la quasi-totalité du temps — bug rapporté ("ne peut pas
       quitter"), une 1re correction (juste au-dessus de #win-screen) s'est
       révélée insuffisante car #news-modal, bien plus fréquent, bloquait
       encore. Reste sous les VRAIS overlays plein écran ouverts
       délibérément par le joueur (boutique/compte/inventaire/etc., tous
       ≥100000, ainsi que "Comment jouer"/level up à 99998-99999) qui,
       eux, doivent continuer à le recouvrir normalement. */
    z-index: 50000;
}
.nav-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 0 20px; border-right: 1px solid var(--b2); min-width: 180px;
}
.nav-logo-icon { color: var(--gold); font-size: 16px; }
.nav-title { font-family: var(--font-display); font-size: 13px; font-weight: 400; letter-spacing: 3px; color: var(--t1); text-transform: uppercase; }
.nav-right {
    display: flex; align-items: center; gap: 10px;
    padding: 0 16px; border-left: 1px solid var(--b1);
}
.nav-bank { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.nav-bank-label { font-size: 9px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--t4); }
.nav-bank-value { font-size: 13px; font-weight: 800; color: var(--t1); font-variant-numeric: tabular-nums; }
.nav-alpha-value { font-size: 11px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.nav-reset-btn {
    background: none; border: 1px solid var(--b1); color: var(--t4);
    width: 26px; height: 26px; border-radius: 6px; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.nav-reset-btn:hover { color: var(--t2); border-color: var(--b2); }

/* ============================================================
   GAME TABLE
   ============================================================ */
#table {
    position: fixed; top: 44px; left: 0;
    width: 100vw; height: calc(100vh - 44px);
    /* dvh tient compte de la barre d'adresse/outils des navigateurs mobiles
       (Safari iOS notamment) — avec 100vh seul, la hauteur calculée dépasse
       la zone réellement visible et le bas de l'écran (ex. les boutons
       BULL/BEAR) se retrouve invisible sans aucun moyen de scroller,
       #table étant position:fixed (bug rapporté). Doublée en fallback pour
       les navigateurs qui ne supportent pas dvh (règle ignorée si inconnue,
       celle du dessus reste alors active). */
    height: calc(100dvh - 44px);
}
.dota-layout { display: flex; width: 100%; height: 100%; }

/* ── SIDEBAR GAUCHE ── */
#left-sidebar {
    width: var(--sidebar-left-w); flex-shrink: 0;
    background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
    border-right: 1px solid var(--b2);
    box-shadow: 1px 0 0 var(--b2), 6px 0 32px rgba(0,0,0,0.4), 0 0 24px rgba(16,185,129,0.05);
    display: flex; flex-direction: column; overflow: visible;
    position: relative; z-index: 10;
}
.sidebar-breadcrumb {
    padding: 10px 14px;
    font-size: 10px; font-weight: 700; letter-spacing: 3px;
    text-transform: uppercase; color: var(--t2);
    border-bottom: 1px solid var(--b2); background: var(--bg-0);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    box-shadow: 0 1px 0 var(--b1);
}
.sidebar-tabs-row { display: flex; border-bottom: 1px solid var(--b2); }
.stab {
    flex: 1; padding: 9px 0;
    font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--t4); background: var(--bg-0); border: none;
    border-right: 1px solid var(--b1); cursor: pointer; transition: all 0.15s;
}
.stab:last-child { border-right: none; }
.stab:hover  { color: var(--t2); background: var(--bg-1); }
.stab.active { color: var(--teal); border-bottom: 2px solid var(--teal); background: var(--bg-1); }
.player-list { flex: 1; overflow-y: auto; overflow-x: visible; scrollbar-width: none; }

/* Joueurs */
.player-row {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 12px 18px 10px;
    border-bottom: 1px solid var(--b2);
    position: relative; cursor: default; transition: background 0.15s;
    background: linear-gradient(90deg, rgba(80,150,220,0.02) 0%, transparent 100%);
    min-height: 100px;
}
.player-row:hover { background: rgba(80,150,220,0.05); }
.player-row.player-main {
    border-left: 3px solid var(--teal);
    background: linear-gradient(90deg, rgba(16,185,129,0.07) 0%, transparent 60%);
}
.player-row.folded { opacity: 0.18; filter: grayscale(1); }

.player-portrait {
    width: 58px; height: 72px; border-radius: 10px;
    background: linear-gradient(160deg, var(--bg-3) 0%, var(--bg-4) 100%);
    border: 1px solid var(--b3);
    box-shadow: 0 0 14px rgba(0,120,200,0.12), inset 0 0 8px rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; flex-shrink: 0; position: relative; overflow: hidden;
}
.player-portrait::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(120,200,255,0.3), transparent);
}
.portrait-user {
    background: linear-gradient(160deg, #120f0a 0%, #17130d 100%);
    border-color: rgba(16,185,129,0.60);
    box-shadow: 0 0 22px rgba(16,185,129,0.28), inset 0 0 10px rgba(0,0,0,0.4);
}
.portrait-bot  {
    background: linear-gradient(160deg, #141009 0%, #1a150e 100%);
    border-color: rgba(212,175,55,0.40);
    box-shadow: 0 0 18px rgba(212,175,55,0.18), inset 0 0 10px rgba(0,0,0,0.4);
}
.player-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.player-row-name  { font-size: 13px; font-weight: 700; color: var(--t1); }
.player-row-role  { }
.player-row-money-label { font-size: 8px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--t4); margin-top: 4px; }
.player-row-money { font-size: 16px; font-weight: 800; color: var(--gold); }

.role-badge {
    background: var(--teal-bg); color: var(--teal);
    padding: 1px 6px; border-radius: 3px;
    font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
    border: 1px solid rgba(16,185,129,0.25);
}
/* Siège déconnecté (voir table:opponentAway, table-client.js) — juste un
   badge discret, pas de quoi bloquer l'écran des autres joueurs : la table
   continue de tourner normalement autour de lui (demande explicite). */
.away-badge {
    display: inline-block; background: rgba(255,23,68,0.12); color: #ff5c7a;
    padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 700;
    letter-spacing: 0.3px; border: 1px solid rgba(255,23,68,0.3);
}
#user-position-badge {
    font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 1px; display: inline-block;
    /* Collé au nuage de conversation (.expr-badge-wrap, juste avant dans le
       DOM) plutôt que sous le nom — flex-shrink:0 pour ne jamais se faire
       écraser par les voisins plus larges (boutons de mise, etc.). */
    margin-left: -4px; flex-shrink: 0; align-self: center;
}
/* #user-position-badge (id) l'emportait toujours sur .pos-badge-hidden
   (classe) malgré son display:none — l'étiquette générique "POSITION"
   restait donc affichée en permanence au lieu d'être masquée tant qu'aucune
   position n'est choisie (bug rapporté, visible une fois collée au nuage de
   conversation). Combiné avec l'id pour une spécificité au moins égale. */
.pos-badge-hidden#user-position-badge { display: none; }
.pos-badge-long  { background: var(--green-bg); color: var(--teal); border: 1px solid rgba(46,204,113,0.25); }
.pos-badge-short { background: var(--red-bg);   color: var(--red); border: 1px solid rgba(231,76,60,0.25); }
/* Badge rôle (D/SB/BB) dans la bande "Vous" — flex-shrink:0 comme le badge
   position juste avant, pour ne jamais se faire écraser par les boutons de
   mise à droite. */
#role-user { flex-shrink: 0; align-self: center; }

/* ── Bulle d'action (base commune) ── */
.action-bubble {
    display: block; box-sizing: border-box; width: 100%;
    text-align: center; white-space: nowrap; overflow: hidden;
    font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
    border-radius: 8px; border: 1px solid transparent;
    background: var(--bg-3);
    color: var(--t1);
    /* Masqué : aucune hauteur, pas d'espace pris dans le layout */
    max-height: 0; padding: 0 12px; margin: 0;
    opacity: 0; transform: scale(0.9);
    transition: max-height 0.22s ease, opacity 0.22s ease, padding 0.22s ease,
                margin 0.22s ease, transform 0.22s ease;
    pointer-events: none;
}
.action-bubble.show {
    max-height: 52px; padding: 9px 12px; margin: 6px 0;
    opacity: 1; transform: scale(1);
}
/* Couleurs par type */
.action-bubble[data-type="fold"]  { background: rgba(239,68,68,0.18);  border-color: rgba(239,68,68,0.45);  color: #f87171; }
.action-bubble[data-type="hold"]  { background: rgba(224,168,32,0.15); border-color: rgba(224,168,32,0.45); color: var(--gold); }
.action-bubble[data-type="call"]  { background: rgba(16,185,129,0.12);  border-color: rgba(16,185,129,0.42);  color: var(--teal); }
.action-bubble[data-type="raise"]  { background: rgba(100,160,255,0.15); border-color: rgba(100,160,255,0.45); color: #7ab4ff; }
.action-bubble[data-type="return"] { background: rgba(255,200,50,0.15);  border-color: rgba(255,200,50,0.45);  color: #ffc832; }

/* ============================================================
   BATTLE PASS OVERLAY
   ============================================================ */
.bp-overlay {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(10,12,16,0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
}

/* ── Offres Pass Premium : 3 bannières côte à côte (demande explicite,
   remplace l'ancienne popup à choix empilés) — au-dessus du bp-overlay,
   même palier de z-index que #custom-popup-overlay. */
.bpp-overlay {
    position: fixed; inset: 0; z-index: 200000;
    background: rgba(8,10,14,0.75); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px; box-sizing: border-box;
}
.bpp-overlay.hidden { display: none; }
.bpp-panel {
    position: relative;
    background: var(--bg-2); border: 1px solid var(--b2);
    border-radius: var(--r3); padding: 32px 36px;
    width: min(980px, 100%);
    box-shadow: 0 40px 90px rgba(0,0,0,0.8);
    text-align: center;
}
.bpp-close {
    position: absolute; top: 14px; right: 16px;
    background: var(--bg-3); border: 1px solid var(--b2);
    color: var(--t3); width: 30px; height: 30px; border-radius: 50%;
    font-size: 13px; cursor: pointer;
}
.bpp-close:hover { color: var(--t1); border-color: var(--b3); }
.bpp-title {
    font-family: var(--font-display); font-weight: 400; font-size: 22px;
    letter-spacing: 2px; text-transform: uppercase; color: var(--t1); margin: 0 0 6px;
}
.bpp-subtitle { font-size: 13px; color: var(--t3); margin: 0 0 26px; }
.bpp-cards { display: flex; gap: 18px; align-items: stretch; }
.bpp-card {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center;
    background: var(--bg-1); border: 1px solid var(--b2); border-radius: var(--r2);
    padding: 24px 18px; position: relative;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.bpp-card:hover { transform: translateY(-3px); border-color: var(--b3); }
.bpp-card-best {
    border-color: var(--gold);
    background: linear-gradient(180deg, rgba(212,175,55,0.10), var(--bg-1) 60%);
    box-shadow: 0 0 24px rgba(212,175,55,0.15);
}
.bpp-card-ribbon {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, var(--gold), var(--gold-d));
    color: #000; font-size: 9px; font-weight: 800; letter-spacing: 1px;
    padding: 4px 12px; border-radius: 20px; white-space: nowrap;
    box-shadow: 0 4px 10px rgba(212,175,55,0.4);
}
.bpp-card-icon { font-size: 30px; margin-bottom: 10px; }
.bpp-card-name { font-size: 13px; font-weight: 800; color: var(--t1); letter-spacing: 0.5px; margin-bottom: 6px; }
.bpp-card-price { font-size: 24px; font-weight: 900; color: var(--gold); margin-bottom: 16px; }
.bpp-card-features {
    list-style: none; margin: 0 0 20px; padding: 0; width: 100%;
    display: flex; flex-direction: column; gap: 9px;
    text-align: left; flex: 1;
}
.bpp-card-features li { font-size: 11.5px; color: var(--t2); line-height: 1.4; }
.bpp-card .cpp-btn { width: 100%; margin-top: auto; }

.bp-modal {
    background:
        radial-gradient(ellipse 900px 260px at 50% 0%, rgba(212,175,55,0.10), transparent 70%),
        radial-gradient(ellipse 700px 200px at 85% 0%, rgba(212,175,55,0.06), transparent 70%),
        var(--bg-2);
    border: 1px solid var(--gold);
    outline: 1px solid var(--b2); outline-offset: 4px;
    border-radius: var(--r3); padding: 24px 28px 0;
    width: min(1300px, 97vw); max-height: 94vh;
    overflow-y: auto; position: relative;
    scrollbar-width: thin; scrollbar-color: var(--b2) transparent;
    box-shadow: 0 40px 80px rgba(0,0,0,0.8);
}
.bp-modal::before {
    content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), var(--teal), var(--gold), transparent);
}
.bp-modal-close {
    position: absolute; top: 14px; right: 16px;
    background: var(--bg-3); border: 1px solid var(--b2);
    color: var(--t3); width: 28px; height: 28px; border-radius: 50%;
    font-size: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.bp-modal-close:hover { color: var(--t1); border-color: var(--b3); }
.bp-modal-title {
    font-family: var(--font-display); font-weight: 400;
    font-size: 20px; letter-spacing: 3px;
    text-transform: uppercase; text-align: center; margin-bottom: 14px;
    background: linear-gradient(90deg, var(--gold-d), var(--gold-light), var(--gold-d));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 14px rgba(212,175,55,0.25));
}
.bp-modal-title .bp-info-btn { -webkit-text-fill-color: var(--t3); }
.bp-info-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%; vertical-align: middle;
    background: var(--bg-3); border: 1px solid var(--b2); color: var(--t3);
    font-size: 14px; font-weight: 800; letter-spacing: 0; cursor: pointer;
    margin-left: 4px; text-transform: none;
}
.bp-info-btn:hover { color: var(--teal); border-color: var(--teal); }

/* Bannière de saison — vide (:empty) tant que battlepass.js n'a pas encore
   reçu bpSeasonId/bpSeasonEndAt du serveur (voir GET /me) : évite un
   encadré vide qui clignote avant le premier rendu. */
.bp-season-banner {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
    color: var(--t3); text-transform: uppercase;
    margin-bottom: 8px;
}
.bp-season-banner:empty { display: none; }
.bp-season-banner .bp-season-name { color: var(--teal); }

/* Progress header */
.bp-progress-header {
    display: flex; align-items: center; gap: 16px;
    background: var(--bg-0); border: 1px solid var(--b2);
    border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; margin-top: 0;
}
.bp-prog-level { font-size: 14px; font-weight: 800; color: var(--teal); white-space: nowrap; }
.bp-prog-bar-wrap { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.bp-prog-track { height: 8px; background: var(--bg-3); border-radius: 4px; overflow: hidden; }
.bp-prog-fill  {
    height: 100%; border-radius: 4px; transition: width 0.6s ease;
    background: linear-gradient(90deg, var(--teal), #4ae0c4);
    box-shadow: 0 0 10px rgba(16,185,129,0.55);
    position: relative; overflow: hidden;
}
.bp-prog-fill::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
    background-size: 200% 100%; animation: bpFillShine 2.4s linear infinite;
}
@keyframes bpFillShine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.bp-prog-xp    { font-size: 9px; font-weight: 600; color: var(--t4); letter-spacing: 1px; }
.bp-skip-btn {
    flex-shrink: 0; background: rgba(212,175,55,0.10);
    border: 1px solid rgba(212,175,55,0.35); border-radius: 6px;
    color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: 1px;
    padding: 7px 12px; cursor: pointer; white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.bp-skip-btn:hover { background: rgba(212,175,55,0.22); border-color: var(--gold); }

/* ── Pass Premium ── */
.bp-prem-banner {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(135deg, rgba(184,148,46,0.16), var(--bg-0));
    border: 1px solid rgba(212,175,55,0.35); border-radius: 8px;
    padding: 14px 18px; margin-top: 0; margin-bottom: 12px;
}
.bp-prem-banner-active { border-color: rgba(212,175,55,0.7); box-shadow: 0 0 18px rgba(212,175,55,0.15); }
.bp-prem-banner-icon  { font-size: 26px; color: var(--gold); }
.bp-prem-banner-title { font-size: 13px; font-weight: 800; letter-spacing: 2px; color: var(--gold); }
.bp-prem-banner-sub   { font-size: 10px; color: var(--t3); margin-top: 3px; line-height: 1.5; }
.bp-prem-buy-btn {
    flex-shrink: 0; background: linear-gradient(135deg, var(--gold-d), var(--gold));
    border: none; border-radius: 8px; color: #fff;
    font-size: 11px; font-weight: 800; letter-spacing: 1px;
    padding: 11px 18px; cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
}
.bp-prem-buy-btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* ── Timeline Battle Pass : deux lanes distinctes (Premium / Gratuit) ── */
.bp-track-wrap { display: flex; align-items: stretch; margin-bottom: 4px; }

/* Colonne de labels fixe à gauche */
.bp-lane-labels {
    flex: 0 0 76px; display: flex; flex-direction: column; padding-top: 4px;
    /* Empêche tout stretch vertical hérité de .bp-track-wrap
       (align-items:stretch) de faire déborder cette colonne au-delà de sa
       hauteur de contenu réelle (96+56+96) — le pass gratuit doit rester
       calé sur sa ligne d'icônes, jamais étiré plus bas qu'elle. */
    align-self: flex-start;
}
.bp-lane-label {
    height: 96px; display: flex; flex-direction: column; gap: 3px;
    align-items: center; justify-content: center;
    text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
    text-transform: uppercase; border-radius: 8px; padding: 0 6px;
}
.bp-lane-label-prem {
    color: var(--gold); background: rgba(212,175,55,0.10);
    border: 1px solid rgba(212,175,55,0.30);
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    position: relative; overflow: hidden;
}
.bp-prem-label-sub { font-size: 8px; font-weight: 700; letter-spacing: 0.5px; line-height: 1.25; opacity: 0.9; }
.bp-lane-label-prem.bp-prem-label-buy {
    cursor: pointer;
    background: linear-gradient(150deg, rgba(184,148,46,0.35), rgba(212,175,55,0.20));
    border: 1px solid var(--gold); color: #fff;
    box-shadow: 0 0 16px rgba(212,175,55,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
    animation: bpPremPulse 2.6s ease-in-out infinite;
}
.bp-lane-label-prem.bp-prem-label-buy::before {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
    animation: bpPremSheen 3.2s ease-in-out infinite;
}
@keyframes bpPremSheen { 0% { left: -60%; } 60% { left: 130%; } 100% { left: 130%; } }
@keyframes bpPremPulse {
    0%, 100% { box-shadow: 0 0 16px rgba(212,175,55,0.35), inset 0 1px 0 rgba(255,255,255,0.12); }
    50%      { box-shadow: 0 0 26px rgba(212,175,55,0.45), inset 0 1px 0 rgba(255,255,255,0.18); }
}
.bp-lane-label-prem.bp-prem-label-buy:hover {
    background: linear-gradient(150deg, rgba(184,148,46,0.5), rgba(212,175,55,0.3));
    border-color: var(--gold); color: #fff; transform: scale(1.04);
}
.bp-lane-label-prem:not(.bp-prem-label-buy) {
    color: var(--gold); background: linear-gradient(150deg, rgba(212,175,55,0.18), rgba(212,175,55,0.12));
    border: 1px solid rgba(212,175,55,0.5);
    box-shadow: 0 0 14px rgba(212,175,55,0.2);
}
.bp-lane-label-free {
    color: var(--teal); background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.30);
}
.bp-lane-label-spacer { height: 56px; }

/* Piste défilante */
.bp-combined-track {
    flex: 1; min-width: 0;
    display: flex; flex-direction: row; align-items: stretch;
    overflow-x: auto; overflow-y: hidden;
    padding: 4px 12px 8px 6px;
    scrollbar-width: auto; scrollbar-color: var(--b2) var(--bg-3);
    -webkit-overflow-scrolling: touch;
}

/* Colonne = un niveau — 110 colonnes rendues d'un coup (Premium 1-110) : sans
   content-visibility, le navigateur peint/anime en continu TOUTES les
   colonnes (dont les ~20 "épiques" en animation permanente, voir
   bpEpicSheen plus bas) même celles hors champ, ce qui rendait le défilement
   très saccadé. content-visibility:auto laisse le navigateur sauter le
   style/layout/paint des colonnes hors du viewport horizontal — gain massif
   pendant le scroll, sans rien changer visuellement une fois affiché.
   contain-intrinsic-size réserve la place exacte (96×248px, voir
   renderBPCombined/battlepass.js : cellule prem 96px + rangée nœud 56px +
   cellule free 96px) pour que la largeur totale scrollable ne saute pas.  */
.tl-col {
    flex: 0 0 96px; display: flex; flex-direction: column; position: relative;
    content-visibility: auto;
    contain-intrinsic-size: 96px 248px;
}

/* Cellule récompense — présentation IDENTIQUE pour les deux passes */
.tl-cell {
    height: 96px; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 6px 4px; text-align: center;
    /* Curseur normal (flèche) forcé plutôt que le curseur texte par défaut
       du navigateur sur du texte survolé (bug rapporté : les cellules
       Premium verrouillées montraient la flèche car leur 🔒 (::before,
       inset:0) couvre tout le texte, alors que les cellules gratuites,
       jamais verrouillées, exposaient le texte brut au curseur). */
    cursor: default;
}
.tl-cell-prem {
    background: linear-gradient(180deg, rgba(212,175,55,0.14), rgba(212,175,55,0.05));
    border-top: 1px solid rgba(212,175,55,0.30);
    border-bottom: 1px solid rgba(212,175,55,0.30);
    position: relative; transition: transform 0.15s, box-shadow 0.15s;
}
.tl-cell-prem:not(.tl-cell-locked):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(212,175,55,0.25);
    z-index: 2;
}
/* Récompense "épique" — paliers cosmétiques tous les 5 niveaux du Premium */
.tl-cell-prem-epic {
    background: linear-gradient(180deg, rgba(212,175,55,0.22), rgba(184,148,46,0.12));
    border-top: 1px solid rgba(212,175,55,0.6);
    border-bottom: 1px solid rgba(212,175,55,0.6);
    box-shadow: inset 0 0 22px rgba(212,175,55,0.12);
}
/* Animé via `transform` (compositeur GPU) plutôt que `background-position`
   (avant) — ~20 cellules "épiques" animent en continu sur toute la piste ;
   animer background-position force un repaint CPU à chaque frame pour
   chacune d'elles, ce qui saccadait le défilement horizontal. `transform`
   ne coûte quasi rien même avec beaucoup d'éléments animés simultanément. */
.tl-cell-prem-epic::after {
    content: ''; position: absolute; top: 0; left: -30%; width: 160%; height: 100%;
    pointer-events: none; will-change: transform;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.16) 50%, transparent 60%);
    animation: bpEpicSheen 3.6s ease-in-out infinite;
}
@keyframes bpEpicSheen {
    0%   { transform: translateX(-15%); }
    100% { transform: translateX(15%); }
}
.tl-epic-ribbon {
    position: absolute; top: 3px; right: 5px; font-size: 10px; color: var(--gold);
    text-shadow: 0 0 6px rgba(212,175,55,0.8); z-index: 3;
    animation: bpEpicTwinkle 1.8s ease-in-out infinite;
}
@keyframes bpEpicTwinkle { 0%,100% { opacity: 0.55; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.15); } }
.tl-cell-free {
    background: rgba(16,185,129,0.05);
    border-top: 1px solid rgba(16,185,129,0.20);
    border-bottom: 1px solid rgba(16,185,129,0.20);
}
/* `filter: grayscale` retiré — la plupart des cellules d'un nouveau joueur
   sont verrouillées (100+ colonnes sur 110), chacune forçait son propre
   calque de filtre CPU ; l'opacité réduite + le 🔒 suffisent à indiquer le
   verrouillage sans ce coût. */
.tl-cell-locked { opacity: 0.35; }
.tl-cell-locked::before {
    content: '🔒'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; opacity: 0.7; z-index: 2;
}
/* Info-bulle stylée maison (couleurs/police du jeu) sur les objets de la
   piste, plutôt que l'attribut title natif du navigateur — trop petit,
   blanc générique, hors thème, ET avec le délai d'affichage imposé par le
   navigateur avant de s'afficher (demande explicite : "plus intégré aux
   couleurs du jeu" + "réduis le délai"). PAS de pseudo-élément CSS ici
   (::before/::after) : .bp-combined-track (juste au-dessus) est en
   `overflow-x: auto; overflow-y: hidden` pour le défilement horizontal de
   la piste — un pseudo-élément positionné juste au-dessus/en-dessous d'une
   cellule se retrouve donc TOUJOURS coupé (`opacity` monte bien à 1 au
   survol, mais invisible car hors du cadre visible), ce qui rendait
   l'info-bulle silencieusement inopérante. Élément unique #bp-reward-tooltip
   (position: fixed, ajouté au body) piloté en JS à la place — voir
   _showBPTooltip/_hideBPTooltip (battlepass.js), jamais soumis au clipping
   d'un ancêtre puisque positionné par rapport au viewport entier.
   data-tooltip reste posé sur la cellule (par _bpRewardTooltip) : c'est
   juste la source du texte lue en JS, plus par une règle CSS `content`. */
.bp-reward-tooltip {
    /* z-index 9999 ne suffisait pas : #bp-overlay lui-même est en
       z-index:100000 (fixed), donc peignait TOUJOURS par-dessus ce tooltip
       (pourtant bien présent, opacité correcte) — invisible en pratique.
       1000000 reste au-dessus du plus haut z-index existant du jeu (220001,
       voir grep). */
    position: fixed; z-index: 1000000;
    width: 170px; white-space: normal;
    background: #14161c; color: #ffffff;
    border: 1px solid var(--teal); border-radius: 8px;
    padding: 8px 12px; font-size: 11px; font-weight: 700; line-height: 1.4;
    letter-spacing: 0.1px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.5);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.1s;
}
.bp-reward-tooltip.bp-reward-tooltip-visible { opacity: 1; visibility: visible; }
/* `drop-shadow` (filter) remplacé par `text-shadow` — même effet de
   profondeur visuel sur un emoji, mais bien moins coûteux à peindre répété
   sur ~110×2 icônes de récompense pendant le défilement. */
.tl-reward-icon { font-size: 24px; line-height: 1; text-shadow: 0 2px 4px rgba(0,0,0,0.4); }
.tl-reward-icon-epic {
    font-size: 30px;
    text-shadow: 0 0 8px rgba(212,175,55,0.65), 0 2px 4px rgba(0,0,0,0.4);
}
.tl-reward-name {
    font-size: 10px; font-weight: 700; color: var(--t2);
    text-align: center; line-height: 1.25; max-width: 88px; margin-top: 4px;
}
.tl-cell-prem .tl-reward-name { color: #e4d9ff; }
.tl-cell-prem-epic .tl-reward-name { color: #ffe1a3; font-weight: 800; }

/* Rangée centrale : ligne + cercle contenant le numéro de niveau */
.tl-noderow {
    height: 56px; display: flex; flex-direction: row;
    align-items: center; justify-content: center;
}
.tl-hline { flex: 1; height: 3px; background: var(--bg-4); }
.tl-hline.tl-line-done { background: var(--teal); opacity: 0.7; }

.tl-node {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid var(--b3); background: var(--bg-3);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; color: var(--t3);
    transition: all 0.2s;
}
.tl-node.tl-done {
    border-color: var(--teal); background: rgba(16,185,129,0.15); color: var(--teal);
}
.tl-node.tl-current {
    /* "Anneau or" — le niveau en cours se distingue par un anneau champagne,
       la progression elle-même (barre) reste émeraude. */
    border-color: var(--gold); border-width: 3px; background: var(--bg-2); color: var(--gold);
    font-weight: 900; width: 46px; height: 46px;
    box-shadow: 0 0 0 3px rgba(212,175,55,0.16), 0 0 20px rgba(212,175,55,0.45);
    animation: bpNodePulse 1.8s ease-in-out infinite;
}
@keyframes bpNodePulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(212,175,55,0.16), 0 0 20px rgba(212,175,55,0.45); }
    50%      { box-shadow: 0 0 0 4px rgba(212,175,55,0.24), 0 0 28px rgba(212,175,55,0.7); }
}
.tl-node.tl-locked { color: var(--t4); }
.tl-node.tl-gold { border-color: var(--gold); }
.tl-node.tl-done.tl-gold { background: rgba(212,175,55,0.18); color: var(--gold); }
.tl-node.tl-current.tl-gold { background: var(--gold); color: #000; box-shadow: 0 0 20px rgba(212,175,55,0.55); animation: bpNodePulseGold 1.8s ease-in-out infinite; }
@keyframes bpNodePulseGold {
    0%, 100% { box-shadow: 0 0 20px rgba(212,175,55,0.55); }
    50%      { box-shadow: 0 0 30px rgba(212,175,55,0.9); }
}
.tl-node.tl-node-extra { border-color: var(--gold); color: var(--gold); }
.tl-node.tl-done.tl-node-extra { background: rgba(212,175,55,0.20); }
.tl-col-extra .tl-cell-free { visibility: hidden; }

/* Hover sur le conteneur BP dans le top bar */
#battle-pass-container:hover { background: rgba(255,255,255,0.02); transition: background 0.12s; }

/* Rank badge — ancré à gauche dans le flux flex */
.trader-rank-badge {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    font-weight: 800; font-size: 8px; z-index: 50; border: 2px solid;
    line-height: 1.1; cursor: pointer; transition: transform 0.15s;
}
.trader-rank-badge:hover { transform: scale(1.12); }
/* Bordure/couleur remontées (demande explicite : "rend aussi le + qui reste
   plus voyant") — quasiment invisible avant (gris pâle 1px + or à 20%
   d'opacité). Or plein, cohérent avec le thème Market Maker Pass de ce
   badge, plutôt que le vert du sticker (réservé à son propre contexte). */
.rank-none { border: 1.5px dashed var(--gold); background: none; color: var(--gold); font-size: 14px; }
.rank-has-icon {
    border: 2px solid var(--gold); background: var(--bg-2); font-size: 20px;
    /* Anneaux dorés concentriques — façon jeton de casino */
    box-shadow: 0 0 0 3px var(--bg-0), 0 0 0 4px rgba(212,175,55,0.5), 0 0 0 6px var(--bg-0), 0 0 0 7px rgba(212,175,55,0.25);
}
.rank-av   { background: linear-gradient(135deg,#9ca3af,#4b5563); border-color:#d1d5db; color:#fff; }
.rank-pt   { background: linear-gradient(135deg,#6366f1,#4338ca); border-color:#a5b4fc; color:#fff; }
.rank-gt      { background: linear-gradient(135deg,var(--gold),#7a4e10); border-color:#fde68a; color:#000; animation: rankPulse 2s ease-in-out infinite; }
@keyframes rankPulse { 0%,100% { box-shadow: 0 0 6px rgba(212,175,55,0.5); } 50% { box-shadow: 0 0 16px rgba(212,175,55,0.9); } }
.rank-shark   { background: linear-gradient(135deg,#0ea5e9,#0369a1); border-color:#7dd3fc; color:#fff; }
.rank-whale   { background: linear-gradient(135deg,#14b8a6,#0f766e); border-color:#5eead4; color:#fff; }
.rank-diamond { background: linear-gradient(135deg,#818cf8,#4f46e5); border-color:#c7d2fe; color:#fff; }
.rank-legend  { background: linear-gradient(135deg,#f59e0b,#d97706); border-color:#fcd34d; color:#000; }
.rank-elite   { background: linear-gradient(135deg,#dc2626,#991b1b); border-color:#fca5a5; color:#fff; animation: elitePulse 2s ease-in-out infinite; }
@keyframes elitePulse { 0%,100% { box-shadow: 0 0 6px rgba(220,38,38,0.5); } 50% { box-shadow: 0 0 18px rgba(220,38,38,0.95); } }
.rank-badge-icon { font-size: 14px; line-height: 1; }
.rank-badge-text { font-size: 9px; line-height: 1; margin-top: 1px; }

.rank-badge-wrap {
    position: relative; flex-shrink: 0;
}
/* Variante médaillon : le badge de rang posé dans le coin haut-gauche du
   portrait plutôt qu'en cercle séparé dans le flux — voir .avatar-badge-wrap,
   index.html. Plus petit pour rester un simple indicateur en coin. */
.avatar-corner-badge {
    position: absolute; top: -6px; left: -6px; z-index: 3;
}
.avatar-corner-badge .trader-rank-badge {
    width: 20px; height: 20px; font-size: 6px; border-width: 1px;
}
.avatar-corner-badge .rank-has-icon { font-size: 11px; }
.avatar-corner-badge .rank-none { font-size: 10px; }
.rank-selector-menu {
    position: absolute; bottom: calc(100% + 8px); left: 0;
    background: var(--bg-4); border: 1px solid var(--b3);
    border-radius: var(--r); padding: 8px; z-index: 200;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.7); min-width: 160px;
}
.rank-sel-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 7px; cursor: pointer;
    border: 1px solid transparent; transition: all 0.12s;
}
.rank-sel-item:hover { background: rgba(255,255,255,0.05); border-color: var(--b2); }
.rank-sel-active { background: var(--teal-bg) !important; border-color: var(--teal) !important; }
.rank-sel-locked { opacity: 0.35; cursor: not-allowed; }
.rank-sel-icon { font-size: 18px; }
.rank-sel-name { font-size: 10px; font-weight: 700; color: var(--t2); flex: 1; }
/* Séparateur entre les icônes et les stickers dans le menu combiné (demande
   explicite : un seul badge/menu partagé) — span les 2 colonnes de la
   grille plutôt qu'une simple ligne dans une cellule. */
.rank-sel-divider {
    grid-column: 1 / -1; font-size: 9px; font-weight: 800; letter-spacing: 0.8px;
    text-transform: uppercase; color: var(--t4); padding: 6px 4px 2px;
    border-top: 1px solid var(--b2); margin-top: 2px;
}
.rank-sel-lock { font-size: 9px; color: var(--t4); }

/* Bouton Expressions — mirroir du rank badge */
.expr-badge-wrap { position: relative; flex-shrink: 0; }
.expr-badge {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: flex; justify-content: center; align-items: center;
    font-size: 14px; cursor: pointer; z-index: 50;
    border: 1px solid var(--b2); background: var(--bg-3);
    transition: transform 0.15s, border-color 0.15s;
}
.expr-badge:hover { transform: scale(1.1); border-color: var(--teal); }
#expr-selector-menu { grid-template-columns: 1fr; min-width: 200px; max-height: 260px; overflow-y: auto; }

/* Bulle d'expression — style distinct des bulles d'action (pas en majuscules) */
.action-bubble[data-type="expr"] {
    background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.4); color: var(--teal);
    text-transform: none; font-style: italic; letter-spacing: 0.3px;
}

/* ── Effets de victoire (SHOP_VICTORY_FX, shop.js) ──────────────
   Joués une seule fois, plein écran, par-dessus le win-screen déjà affiché
   (z-index au-delà des popups habituels, 200000-220001 — voir plus bas) —
   voir _playVictoryFx (game.js), déclenché depuis table:sessionEnd
   uniquement si CETTE session est réellement gagnée (pas à chaque main). */
.victory-fx-glow {
    position: fixed; inset: 0; z-index: 500000; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(212,175,55,0.38) 0%, transparent 62%);
    animation: victoryFxGlowPulse 2.6s ease-out forwards;
}
@keyframes victoryFxGlowPulse {
    0%   { opacity: 0; }
    18%  { opacity: 1; }
    100% { opacity: 0; }
}
.victory-fx-particles {
    position: fixed; inset: 0; z-index: 500000; pointer-events: none; overflow: hidden;
}
.victory-fx-particle {
    position: absolute; top: -40px; line-height: 1; will-change: transform, opacity;
    animation-name: victoryFxFall; animation-timing-function: ease-in; animation-fill-mode: forwards;
}
@keyframes victoryFxFall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(112vh) rotate(360deg); opacity: 0.15; }
}

/* Titre de profil — sous le pseudo, purement cosmétique */
.user-title-badge {
    font-size: 9px; font-weight: 700; color: var(--gold); letter-spacing: 0.5px;
    font-style: italic;
}

/* ── CARTES BOTS LATÉRALES ── */
.side-player-card {
    display: flex; flex-direction: column; align-items: center;
    padding: 24px 12px 20px; gap: 12px; flex: 1;
    position: relative; overflow: visible;
    background: linear-gradient(180deg, rgba(80,150,220,0.025) 0%, transparent 60%);
}
.side-player-card.folded { opacity: 0.18; filter: grayscale(1); }

.side-portrait {
    width: clamp(84px, 6vw, 100px); height: clamp(98px, 7vw, 116px); border-radius: 12px;
    background: linear-gradient(160deg, #0c1e32 0%, #122030 100%);
    border: 1px solid rgba(80,150,220,0.28);
    box-shadow: 0 0 18px rgba(60,120,200,0.14), inset 0 0 12px rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    font-size: 40px; position: relative; overflow: hidden;
}
.side-portrait::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(120,200,255,0.25), transparent);
}

.side-player-name {
    font-size: 13px; font-weight: 700; color: var(--t1);
    text-align: center; letter-spacing: 0.5px;
}

/* Titre + stickers équipés (demande explicite : cosmétiques visibles par
   les adversaires à la table, pas seulement par leur propriétaire) — voir
   _resolveSeatCardDisplay, table-client.js. */
.side-player-title {
    font-size: 9px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--gold-light, #f0d060); text-align: center; margin-top: -2px;
}
.side-player-stickers { display: flex; justify-content: center; gap: 4px; min-height: 16px; }
.side-sticker {
    font-size: 13px; line-height: 1;
    filter: drop-shadow(0 0 4px rgba(240,208,96,0.5));
}
/* Cadres de portrait — mêmes classes/couleurs que .user-strip-portrait
   (voir plus bas), appliquées ici au portrait d'un ADVERSAIRE. */
.side-portrait.frame-gold  { border: 2px solid #f0c040; box-shadow: 0 0 16px rgba(212,175,55,0.55), inset 0 0 8px rgba(0,0,0,0.35); }
.side-portrait.frame-neon  { border: 2px solid #00e5ff; box-shadow: 0 0 16px rgba(0,229,255,0.55), inset 0 0 8px rgba(0,0,0,0.35); }
.side-portrait.frame-fire  { border: 2px solid #ff5722; box-shadow: 0 0 16px rgba(255,87,34,0.55), inset 0 0 8px rgba(0,0,0,0.35); }
.side-portrait.frame-royal { border: 2px solid #9c27b0; box-shadow: 0 0 16px rgba(156,39,176,0.55), inset 0 0 8px rgba(0,0,0,0.35); }

.side-chips-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 4px;
    background: var(--bg-0); border: 1px solid var(--b2);
    border-radius: 8px; padding: 8px 14px; width: 100%;
}
.side-chips-label { font-size: 8px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--t4); }
.side-chips-value { font-size: 22px; font-weight: 800; color: var(--t1); line-height: 1; font-variant-numeric: tabular-nums; }

/* Bots : bulle dans le flux, centrée, rien à surcharger */
.side-player-card .action-bubble { width: 100%; }

/* ── BANDE INFO JOUEUR (bas) ── */
.user-info-strip {
    display: flex; align-items: center; gap: 14px;
    width: 100%; padding: 4px 12px 4px 10px;
    border: 1px solid var(--b2); border-left: 3px solid var(--teal);
    border-radius: 8px; position: relative; overflow: visible;
    background: linear-gradient(90deg, rgba(16,185,129,0.08) 0%, var(--bg-1) 50%, var(--bg-0) 100%);
    box-shadow: 0 0 20px rgba(16,185,129,0.06), inset 0 1px 0 rgba(16,185,129,0.06);
}
.user-info-strip.folded { opacity: 0.18; filter: grayscale(1); }

/* Glow néon "à toi de jouer" — dérivé en CSS pur de la visibilité des
   boutons de mise (aucun JS à toucher : #betActions n'est démasqué que
   lorsque c'est réellement le tour du joueur). */
#player-user:has(#betActions:not(.hidden)) {
    border-left-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(0,230,118,0.35), 0 0 24px rgba(0,230,118,0.35), inset 0 1px 0 rgba(0,230,118,0.1);
    animation: activeTurnGlow 1.4s ease-in-out infinite;
}
@keyframes activeTurnGlow {
    0%, 100% { box-shadow: 0 0 0 2px rgba(0,230,118,0.30), 0 0 20px rgba(0,230,118,0.30), inset 0 1px 0 rgba(0,230,118,0.1); }
    50%      { box-shadow: 0 0 0 3px rgba(0,230,118,0.55), 0 0 34px rgba(0,230,118,0.55), inset 0 1px 0 rgba(0,230,118,0.15); }
}

/* ── Barre de tour (se vide en durée réelle, pilotée par table:turnClock) ── */
.turn-clock-track {
    width: 100%; height: 3px; background: var(--bg-0); border-radius: 2px; overflow: hidden;
}
.turn-clock-fill {
    height: 100%; width: 100%; background: var(--teal); border-radius: 2px;
}
/* Dans la bande horizontale du joueur, la barre passe en position absolue
   pour ne pas perturber le flex row existant (voir .all-in-pos-badge,
   déjà positionné en absolu dans ce même conteneur). */
.user-info-strip .turn-clock-track {
    position: absolute; top: -1px; left: 8px; right: 8px; width: auto; z-index: 2;
}
/* Clignotement à 3s restantes — sur le carré COMPLET du joueur (toute la
   bande #player-user, pas juste le petit portrait à l'intérieur) mais
   UNIQUEMENT pour le joueur réel, jamais les bots (demande explicite :
   "le carré au complet du joueur pas juste son icône... mais pas les
   autres joueurs"). La classe .time-critical est encore posée sur la carte
   active quelle qu'elle soit (table-client.js, _seatCardEl) — le sélecteur
   ID #player-user ci-dessous ignore volontairement les cartes bot
   (#player-bot-alpha/#player-bot-omega), qui reçoivent la même classe sans
   qu'aucune règle ne s'y applique.
   Carré un peu moins intense que les timebanks (demande explicite : "je
   veux que le carré du joueur clignote un peu moins que les timebanks") —
   même teinte et même forme d'animation, juste des pics d'opacité/étendue
   légèrement plus bas pour le carré. */
#player-user.time-critical {
    animation: timeCriticalBlinkSquare 0.5s ease-in-out infinite;
}
@keyframes timeCriticalBlinkSquare {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255,23,68,0.4), 0 0 24px rgba(255,23,68,0.4); }
    50%      { box-shadow: 0 0 0 2px rgba(255,23,68,0.8), 0 0 38px rgba(255,23,68,0.8); }
}
/* Contour des boutons timebank clignote en rouge en même temps que la
   carte du joueur (demande explicite : capter l'attention pour rappeler
   qu'on peut piocher dans les timebanks) — garde l'intensité pleine
   d'origine (timeCriticalBlink), désormais un peu plus vive que le carré
   ci-dessus plutôt qu'identique. */
#timeBankButtons.time-critical .time-bank-btn {
    animation: timeCriticalBlink 0.5s ease-in-out infinite;
}
@keyframes timeCriticalBlink {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255,23,68,0.5), 0 0 28px rgba(255,23,68,0.5); }
    50%      { box-shadow: 0 0 0 2px rgba(255,23,68,0.95), 0 0 44px rgba(255,23,68,0.95); }
}
/* La plupart des boutons timebank sont :disabled ou .time-bank-btn-empty
   (0 charge possédée, cas le plus courant) — leur opacité réduite
   (0.35/0.45 ci-dessous) écrasait le clignotement au point de le rendre
   à peine visible, MÊME avec l'animation strictement identique à celle du
   carré joueur (bug réel trouvé après plainte explicite : "il ne clignote
   pas autant"). Repasse à pleine opacité tant que time-critical est actif
   pour que l'animation ait vraiment le même rendu, peu importe l'état du
   bouton. */
#timeBankButtons.time-critical .time-bank-btn:disabled,
#timeBankButtons.time-critical .time-bank-btn.time-bank-btn-empty {
    opacity: 1;
}

/* ── Boutons time bank (+5s/+10s/+15s) ── */
.time-bank-buttons { display: flex; gap: 6px; }
.time-bank-btn {
    background: var(--bg-3); border: 1px solid var(--b3); border-radius: 6px;
    padding: 6px 10px; color: var(--t2); font-size: 10px; font-weight: 700;
    cursor: pointer; white-space: nowrap; transition: all 0.15s ease-out;
}
.time-bank-btn:hover:not(:disabled) { background: var(--bg-4); color: var(--t1); }
.time-bank-btn:disabled { opacity: 0.35; cursor: not-allowed; }
/* Solde à 0 : reste cliquable (contrairement à :disabled ci-dessus) — le
   clic ouvre la boutique (voir table-client.js) — donc curseur pointer,
   pas not-allowed, avec juste l'estompage visuel "indisponible". */
.time-bank-btn-empty { opacity: 0.45; }
.time-bank-btn-empty:hover { opacity: 0.75; border-color: var(--gold); color: var(--gold); }
/* Limite d'1 charge par décision atteinte (voir table-client.js) — reste
   cliquable (ouvre juste un rappel de la règle, jamais la boutique
   contrairement à -empty ci-dessus : racheter n'aiderait pas ici), donc pas
   de curseur not-allowed non plus. */
.time-bank-btn-used { opacity: 0.45; }
.time-bank-btn-used:hover { opacity: 0.65; }

.user-strip-portrait {
    width: 44px; height: 50px; border-radius: 8px; flex-shrink: 0;
    background: linear-gradient(160deg, #120f0a 0%, #17130d 100%);
    border: 1px solid rgba(16,185,129,0.55);
    box-shadow: 0 0 18px rgba(16,185,129,0.24), inset 0 0 8px rgba(0,0,0,0.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; position: relative; overflow: hidden;
}
/* Position choisie (BULL/BEAR) écrite directement sur le carré-portrait du
   joueur, pas seulement collée au nuage de conversation plus loin dans la
   bande (demande explicite) — petit ruban en bas du portrait, réutilise
   les couleurs de .pos-badge-long/.pos-badge-short déjà définies plus
   bas. */
.portrait-pos-badge {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
    font-size: 8px; font-weight: 800; text-align: center;
    letter-spacing: 0.5px; text-transform: uppercase;
    padding: 1px 0; line-height: 1.2;
}
.user-strip-portrait::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(110,196,248,0.28), transparent);
}

/* Cadres de portrait — cosmétiques, achetables en α (aucun effet gameplay) */
.user-strip-portrait.frame-gold {
    border: 2px solid #f0c040; box-shadow: 0 0 16px rgba(212,175,55,0.55), inset 0 0 8px rgba(0,0,0,0.35);
}
.user-strip-portrait.frame-neon {
    border: 2px solid #00e5ff; box-shadow: 0 0 16px rgba(0,229,255,0.55), inset 0 0 8px rgba(0,0,0,0.35);
}
.user-strip-portrait.frame-fire {
    border: 2px solid #ff5722; box-shadow: 0 0 16px rgba(255,87,34,0.55), inset 0 0 8px rgba(0,0,0,0.35);
}
.user-strip-portrait.frame-royal {
    border: 2px solid #9c27b0; box-shadow: 0 0 16px rgba(156,39,176,0.55), inset 0 0 8px rgba(0,0,0,0.35);
}

/* Aperçus des cadres dans la boutique */
.frame-preview {
    width: 52px; height: 58px; border-radius: 8px;
    background: linear-gradient(160deg, #120f0a 0%, #17130d 100%);
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--b2);
}
.frame-preview-inner { font-size: 24px; }
.frame-preview.frame-gold  { border-color: #f0c040; box-shadow: 0 0 14px rgba(212,175,55,0.5); }
.frame-preview.frame-neon  { border-color: #00e5ff; box-shadow: 0 0 14px rgba(0,229,255,0.5); }
.frame-preview.frame-fire  { border-color: #ff5722; box-shadow: 0 0 14px rgba(255,87,34,0.5); }
.frame-preview.frame-royal { border-color: #9c27b0; box-shadow: 0 0 14px rgba(156,39,176,0.5); }

.user-strip-details { display: flex; flex-direction: column; gap: 5px; flex: 0 1 auto; min-width: 0; }
.user-strip-name    { font-size: 12px; font-weight: 700; color: var(--t1); }
.user-strip-badges  { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.user-strip-chips {
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    /* Plus de margin-left:auto ici — c'est #timeBankButtons (juste avant,
       order:2) qui porte le sien maintenant, pour pousser le groupe
       [time bank + jetons] ensemble vers la droite ; en garder un sur
       chaque étirait un espace supplémentaire entre les deux au lieu de
       les coller (demande explicite). */
    flex-shrink: 0; order: 3;
    padding-left: 16px; border-left: 1px solid var(--b2);
}

/* Boutons d'action + slider de mise, intégrés dans la bande joueur (boutons à gauche du slider) */
.user-info-strip #betActions {
    /* flex-wrap: quand la place manque (petit écran desktop, pas mobile —
       qui a son propre bloc dédié), les boutons de décision redescendent
       proprement sur leur propre ligne plutôt que de déborder/chevaucher.
       Le time bank n'est plus dans ce conteneur (il vit maintenant en
       sibling au niveau de .user-info-strip, voir #timeBankButtons plus
       bas) donc il n'y a plus que boutons+slider à caser ici, bien plus
       tolérant au rétrécissement qu'avant. */
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px;
    flex: 1; min-width: 0; row-gap: 6px;
}
.user-info-strip .bet-buttons { gap: 8px; flex-shrink: 0; }
.user-info-strip .action-key { padding: 10px 16px; min-width: 0; flex: 0 0 auto; font-size: 10px; white-space: nowrap; }
.user-info-strip .raise-slider-container { padding: 8px 14px; flex: 1 1 160px; min-width: 160px; }
/* #timeBankButtons est un sibling direct de #betActions/#userAction/
   .user-strip-chips au niveau de .user-info-strip (hors de #betActions
   dans le HTML) — un item flexible indépendant, ce qui évite l'ancien bug
   où il se retrouvait mal aligné dès que #betActions passait sur plusieurs
   lignes internes. Comme il n'est pas non plus dans #posActions, il reste
   visible SANS RIEN CHANGER pendant le choix de position (BULL/BEAR) ET
   pendant la mise — un seul encart pour les deux (l'ancien #timeBankButtonsPos,
   qui dupliquait le même contenu dans #posActions, a été retiré, bug
   rapporté). order:2 le place dans le vide entre le montant du bet/la
   bulle de décision (order:1) et les jetons, à droite (demande explicite :
   "les timebanks restent au bout à droite"). Sur mobile paysage, il repasse
   en position fixed (voir media query dédiée plus bas) — pas assez de
   place pour le garder dans le flux à cette taille d'écran. */
/* margin-left:auto (au lieu de compter sur la position naturelle après
   #betActions) : quand #betActions est masqué (choix de position ou état
   HOLD sans montant à afficher), il ne prend plus aucune largeur et le
   time bank se retrouvait perdu au milieu de la bande avec un grand vide
   avant les jetons (bug rapporté, capture à l'appui) — collé aux jetons
   maintenant, EXACTEMENT au même endroit qu'en pleine mise. .user-strip-chips
   perd son propre margin-left:auto ci-dessous : un seul suffit, sur le
   premier des deux (le time bank) pousse tout le groupe [time bank+jetons]
   ensemble vers la droite. */
#timeBankButtons { order: 2; flex-shrink: 0; margin-left: auto; }
/* Agrandi (2e passe, demande explicite répétée) — au-delà de cette taille
   à des largeurs desktop courantes (~1280px), les boutons de décision +
   le slider peuvent redescendre sur une 2e ligne (dégradation déjà
   existante et bénigne : #betActions passe déjà en flex-wrap), pas un vrai
   souci vu que le time bank reste toujours bien à droite peu importe. */
.time-bank-btn { padding: 6px 14px; font-size: 13px; }
.user-strip-chips-label { font-size: 8px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--t4); }
.user-strip-chips-value { font-size: 20px; font-weight: 800; color: var(--t1); line-height: 1; font-variant-numeric: tabular-nums; }

/* Joueur : bulle compacte, repositionnée entre le montant du bet et les
   jetons (demande explicite) — plus haut dans le DOM (juste après le nuage
   de conversation) pour rester collée au badge de position, mais réordonnée
   ici en pur CSS (flex order) sans déplacer le HTML. .user-strip-chips
   passe à order:2 ci-dessous pour rester après elle. */
.user-info-strip .action-bubble {
    width: auto; flex-shrink: 0; margin: 0; padding: 0 10px; font-size: 11px;
    border-radius: 6px; max-height: 0; order: 1;
}
.user-info-strip .action-bubble.show {
    max-height: 36px; padding: 5px 10px; margin: 0;
}

/* ── CENTRE ── */
#center-area {
    flex: 1; display: flex; flex-direction: column; min-width: 0;
    /* Feutre de table — vert émeraude néon, vignettage doux, liseré doré fin */
    background:
        radial-gradient(ellipse 130% 90% at 50% 40%, var(--felt-light) 0%, var(--felt) 55%, #061c10 100%);
    box-shadow: inset 0 0 140px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,201,77,0.25);
}

/* Barre info supérieure — liseré or fin en pied, évoque le bord de la table */
.center-top-bar {
    display: flex; align-items: stretch;
    background: var(--bg-0);
    border-bottom: 1px solid rgba(212,175,55,0.22);
    box-shadow: 0 1px 0 var(--b1), 0 1px 12px rgba(212,175,55,0.05);
    height: 72px; flex-shrink: 0;
}

/* Volume Pot — flotte en haut à gauche, par-dessus le graphique */
.vol-pot-block {
    position: absolute; top: 10px; left: 10px; z-index: 10;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; border-radius: 8px;
    background: rgba(13,11,8,0.85); border: 1px solid var(--b2);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
}
.vol-pot-label { font-size: 9px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--t4); }
.vol-pot-value { font-size: 14px; font-weight: 800; color: var(--t1); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* À GAGNER — occupe tout l'espace de la barre */
.center-badge-block {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    padding: 0 40px; flex: 1; width: 100%;
}
.center-win-info  { display: flex; flex-direction: column; align-items: center; }
.cwi-label {
    font-size: 12px; font-weight: 700; letter-spacing: 3px;
    text-transform: uppercase; color: var(--t4); margin-bottom: 2px;
}
.cwi-value {
    font-size: 42px; font-weight: 900; color: var(--t1); line-height: 1; letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
}

/* Battle Pass — barre de progression (dans #top-nav, à droite du nom du jeu) */
#battle-pass-container {
    flex: 0 0 auto; position: relative; width: clamp(220px, 20vw, 340px);
    display: flex; flex-direction: column; justify-content: center; gap: 3px;
    padding: 0 18px; border-right: 1px solid var(--b2);
}
.bp-dota-header { display: flex; align-items: center; gap: 6px; margin-bottom: 0; }
.bp-dota-icon   { color: var(--teal); font-size: 11px; }
.bp-dota-label  { font-size: 8px; font-weight: 700; letter-spacing: 1.5px; color: var(--t1); text-transform: uppercase; }
.bp-bar-container {
    width: 100%; height: 3px; background: var(--bg-0); border-radius: 2px; overflow: hidden; margin-bottom: 0;
}
.bp-bar-fill {
    height: 100%; background: var(--teal); width: 0%; border-radius: 2px;
    transition: width 0.7s cubic-bezier(0.4,0,0.2,1);
}
.bp-dota-meta { display: flex; justify-content: space-between; align-items: center; }
.bp-niveau-text { font-size: 9px; font-weight: 700; color: var(--t1); }
.bp-xp-label { font-size: 8px; font-weight: 600; color: var(--t4); letter-spacing: 1px; }


/* ── Graphique ── */
.chart-section {
    flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; position: relative; z-index: 1;
    border-bottom: 1px solid var(--b1);
}
.chart-section-header {
    display: flex; align-items: center; gap: 12px; padding: 4px 16px;
    background: var(--bg-1); border-bottom: 1px solid var(--b2);
    flex-shrink: 0; position: relative; z-index: 2;
    box-shadow: 0 1px 0 var(--b1);
}
.chart-header-label  { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--t4); }
.chart-market-name   { font-size: 16px; font-weight: 800; color: var(--t1); letter-spacing: 0.3px; }
.chart-header-tag    { font-size: 9px; font-weight: 700; color: var(--teal); background: var(--teal-bg); padding: 3px 8px; border-radius: 4px; border: 1px solid rgba(16,185,129,0.30); letter-spacing: 1px; }

/* Outils de dessin */
.drawing-toolbar {
    margin-left: auto; display: flex; align-items: center; gap: 2px;
    padding: 0 8px; border-right: 1px solid var(--b1);
}
.draw-btn {
    width: 22px; height: 22px; background: none; border: 1px solid transparent;
    color: var(--t3); font-size: 12px; border-radius: 4px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.12s; padding: 0; line-height: 1;
}
.draw-btn:hover  { background: var(--bg-3); color: var(--t1); border-color: var(--b2); }
.draw-btn.active { background: var(--teal-bg); color: var(--teal); border-color: rgba(16,185,129,0.38); }
.draw-btn.draw-undo:hover  { color: var(--gold); background: var(--gold-bg); }
.draw-btn.draw-erase:hover { color: var(--red);  background: var(--red-bg);  }
.draw-sep { width: 1px; height: 14px; background: var(--b1); margin: 0 3px; flex-shrink: 0; }
.draw-tool-item.active .ind-item-check { opacity: 1; }
.draw-tool-item .ind-item-check { opacity: 0; }

/* ── Dropdown indicateurs ── */
.ind-dropdown-wrap { position: relative; }
.ind-dropdown-btn {
    display: flex; align-items: center; gap: 5px;
    background: var(--bg-2); border: 1px solid var(--b2);
    color: var(--t3); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    padding: 4px 9px; border-radius: 5px; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.ind-dropdown-btn:hover { color: var(--t1); border-color: var(--b3); background: var(--bg-3); }
.ind-dropdown-btn.open,
.ind-dropdown-btn.has-active { color: var(--teal); border-color: rgba(16,185,129,0.38); background: rgba(16,185,129,0.07); }
.ind-dropdown-icon { font-size: 11px; opacity: 0.7; }
.ind-active-count {
    background: var(--teal); color: #000; font-size: 8px; font-weight: 800;
    border-radius: 8px; padding: 0 4px; min-width: 14px; text-align: center; line-height: 14px; height: 14px;
}
.ind-arrow { font-size: 10px; opacity: 0.6; transition: transform 0.18s; }
.ind-dropdown-btn.open .ind-arrow { transform: rotate(180deg); }

/* Menu déroulant (fixed pour échapper à overflow:hidden) */
.ind-dropdown-menu {
    position: fixed; z-index: 1000;
    background: var(--bg-2); border: 1px solid var(--b2);
    border-radius: 7px; padding: 6px 5px;
    min-width: 185px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(80,150,220,0.1);
    backdrop-filter: blur(6px);
    animation: indFadeIn 0.12s ease;
}
@keyframes indFadeIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.ind-section-label {
    font-size: 8px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--t4); padding: 3px 8px 4px; pointer-events: none;
}
.ind-section-gap { margin-top: 4px; border-top: 1px solid var(--b1); padding-top: 7px; }
.ind-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 5px 8px; border-radius: 4px;
    background: none; border: none; cursor: pointer; transition: background 0.1s;
}
.ind-item:hover { background: var(--bg-3); }
.ind-item.active { background: rgba(255,255,255,0.04); }
.ind-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ind-item-name { flex: 1; font-size: 11px; font-weight: 600; color: var(--t2); text-align: left; }
.ind-item.active .ind-item-name { color: var(--t1); }
.ind-item-check { font-size: 10px; color: var(--teal); opacity: 0; transition: opacity 0.1s; }
.ind-item.active .ind-item-check { opacity: 1; }
.ind-lock-badge { font-size: 9px; font-weight: 700; color: var(--gold); letter-spacing: 0.5px; margin-left: 4px; }
.ind-lock-badge.hidden { display: none; }

/* ── Indicators Overlay ── */
.ind-overlay {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; align-items: center; justify-content: center;
}
.ind-overlay.hidden { display: none; }
.ind-overlay-backdrop {
    position: absolute; inset: 0;
    background: rgba(6,12,24,0.78); backdrop-filter: blur(5px);
}
.ind-overlay-panel {
    position: relative; z-index: 1;
    width: 680px; max-width: 96vw; height: 480px; max-height: 90vh;
    background: var(--bg-1); border: 1px solid var(--b2);
    border-radius: 12px; display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(16,185,129,0.12);
    animation: indOvIn 0.18s cubic-bezier(.22,.8,.37,1);
    overflow: hidden;
}
@keyframes indOvIn {
    from { opacity: 0; transform: scale(0.94) translateY(12px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
/* Header */
.ind-ov-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px 12px; border-bottom: 1px solid var(--b1);
    flex-shrink: 0;
}
.ind-ov-title {
    font-size: 11px; font-weight: 800; letter-spacing: 2px;
    text-transform: uppercase; color: var(--teal);
    flex-shrink: 0;
}
.ind-ov-search-wrap {
    flex: 1; display: flex; align-items: center; gap: 7px;
    background: var(--bg-2); border: 1px solid var(--b2);
    border-radius: 6px; padding: 5px 10px;
    transition: border-color 0.15s;
}
.ind-ov-search-wrap:focus-within { border-color: rgba(16,185,129,0.5); }
.ind-ov-search-icon { font-size: 14px; color: var(--t4); flex-shrink: 0; }
.ind-ov-search {
    flex: 1; background: none; border: none; outline: none;
    font-size: 12px; color: var(--t1); font-family: inherit;
}
.ind-ov-search::placeholder { color: var(--t4); }
.ind-ov-close {
    background: none; border: none; cursor: pointer;
    color: var(--t4); font-size: 13px; padding: 3px 6px;
    border-radius: 4px; transition: color 0.1s, background 0.1s;
    flex-shrink: 0;
}
.ind-ov-close:hover { color: var(--t1); background: var(--bg-3); }
/* Body */
.ind-ov-body {
    display: flex; flex: 1; min-height: 0;
}
/* Left list */
.ind-ov-list {
    width: 260px; flex-shrink: 0; overflow-y: auto;
    border-right: 1px solid var(--b1); padding: 8px 6px;
}
.ind-ov-list::-webkit-scrollbar { width: 4px; }
.ind-ov-list::-webkit-scrollbar-track { background: transparent; }
.ind-ov-list::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 4px; }
.ind-ov-section { margin-bottom: 6px; }
.ind-ov-section-label {
    font-size: 8px; font-weight: 700; letter-spacing: 1.6px;
    text-transform: uppercase; color: var(--t4);
    padding: 6px 10px 4px; pointer-events: none;
}
.ind-ov-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 6px; cursor: pointer;
    transition: background 0.1s; user-select: none;
}
.ind-ov-item:hover { background: var(--bg-3); }
.ind-ov-item.active { background: rgba(16,185,129,0.08); }
.ind-ov-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ind-ov-name {
    flex: 1; font-size: 12px; font-weight: 600; color: var(--t2);
}
.ind-ov-item.active .ind-ov-name { color: var(--t1); }
.ind-ov-check {
    font-size: 10px; color: var(--teal);
    opacity: 0; transition: opacity 0.1s; flex-shrink: 0;
}
.ind-ov-item.active .ind-ov-check { opacity: 1; }
.ind-ov-star {
    background: none; border: none; cursor: pointer;
    font-size: 13px; color: var(--t4); padding: 0 2px;
    transition: color 0.15s; line-height: 1; flex-shrink: 0;
}
.ind-ov-star:hover { color: var(--gold); }
.ind-ov-star.fav { color: var(--gold); }
/* Favorites section */
#ind-ov-fav-section { border-bottom: 1px solid var(--b1); margin-bottom: 4px; padding-bottom: 4px; }
.ind-ov-empty-fav {
    font-size: 10px; color: var(--t4); font-style: italic;
    padding: 4px 10px 8px; text-align: center;
}
/* Right preview */
.ind-ov-preview {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.ind-ov-preview-hint {
    font-size: 11px; color: var(--t4); text-align: center;
    line-height: 1.6; max-width: 200px;
}
/* Search hide */
.ind-ov-section.search-hidden { display: none; }
.ind-ov-item.search-hidden { display: none; }

/* ── Outils overlay — items dessin ── */
.tools-ov-section { margin-bottom: 6px; }
.tools-ov-section-label {
    font-size: 8px; font-weight: 700; letter-spacing: 1.6px;
    text-transform: uppercase; color: var(--t4);
    padding: 6px 10px 4px; pointer-events: none;
}
.tools-ov-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 6px; cursor: pointer;
    transition: background 0.1s; user-select: none;
}
.tools-ov-item:hover { background: var(--bg-3); }
.tools-ov-item.active { background: rgba(16,185,129,0.08); }
.tools-ov-dot {
    width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
    color: var(--t3); flex-shrink: 0;
}
.tools-ov-dot svg { width: 15px; height: 15px; }
.tools-ov-item.active .tools-ov-dot { color: var(--teal); }
.tools-ov-name { flex: 1; font-size: 12px; font-weight: 600; color: var(--t2); }
.tools-ov-item.active .tools-ov-name { color: var(--t1); }
.tools-ov-check { font-size: 10px; color: var(--teal); opacity: 0; transition: opacity 0.1s; flex-shrink: 0; }
.tools-ov-item.active .tools-ov-check { opacity: 1; }
.tools-ov-section.search-hidden { display: none; }
.tools-ov-item.search-hidden { display: none; }

/* Right panel — couleur + actions (remplace le centrage par défaut de .ind-ov-preview) */
.tools-ov-preview {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 18px; padding: 20px;
}
.tools-ov-preview .ind-ov-preview-hint { max-width: none; text-align: left; }
.tools-ov-panel-section { display: flex; flex-direction: column; gap: 8px; }
.tools-ov-panel-label {
    font-size: 8px; font-weight: 700; letter-spacing: 1.6px;
    text-transform: uppercase; color: var(--t4);
}
.tools-ov-action-btn {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-2); border: 1px solid var(--b2); color: var(--t2);
    font-size: 11px; font-weight: 600; padding: 8px 10px; border-radius: 6px;
    cursor: pointer; transition: all 0.12s;
}
.tools-ov-action-btn:hover { background: var(--bg-3); color: var(--t1); border-color: var(--b3); }

/* ── Popover d'édition d'un tracé existant ── */
.tool-edit-popover {
    position: fixed; z-index: 9500;
    background: var(--bg-2); border: 1px solid var(--b2); border-radius: 8px;
    padding: 10px; min-width: 160px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(80,150,220,0.1);
    display: flex; flex-direction: column; gap: 8px;
    animation: indFadeIn 0.12s ease;
}
.tool-edit-popover.hidden { display: none; }
.tep-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tep-row label { font-size: 10px; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: 1px; }
.tep-row input[type="color"] {
    width: 30px; height: 22px; border: 1px solid var(--b2); border-radius: 4px;
    background: none; cursor: pointer; padding: 0;
}
.tep-delete-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--bg-3); border: 1px solid var(--b2); color: var(--red);
    font-size: 11px; font-weight: 600; padding: 6px 10px; border-radius: 6px;
    cursor: pointer; transition: all 0.12s;
}
.tep-delete-btn:hover { background: var(--red-bg); border-color: rgba(255,23,68,0.4); }

/* ── Chart stack + sous-panes ── */
#chart-stack { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#chartContainer { flex: 1; background: var(--bg-0); overflow: hidden; min-height: 0; position: relative; touch-action: none; }
.sub-pane {
    height: 120px; flex-shrink: 0; position: relative; overflow: hidden;
    border-top: 1px solid var(--b2); background: var(--bg-0);
}
.sub-pane > div[id$="-chart-div"] { width: 100%; height: 100%; }
.sub-pane-label {
    position: absolute; top: 4px; left: 8px; z-index: 10; pointer-events: none;
    font-size: 8px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--t4); background: rgba(13,11,8,0.88); padding: 1px 5px; border-radius: 2px;
}

/* ── UI de mise ── */
#betting-ui {
    /* Réduit volontairement (était 14px) pour allonger la bande joueur des
       deux côtés et laisser de la place au groupe time bank sans surcharger
       la zone déjà dense (boutons d'action + slider + chips). */
    flex-shrink: 0; padding: 4px 6px;
    background: var(--bg-1);
    border-top: 1px solid var(--b2);
    box-shadow: 0 -1px 0 var(--b1), 0 -8px 24px rgba(0,0,0,0.3);
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; position: relative; z-index: 5; overflow: visible;
}
/* Décoration circuit board en coin */
#betting-ui::before {
    content: '';
    position: absolute; bottom: 0; right: 0;
    width: 90px; height: 60px;
    background-image:
        linear-gradient(rgba(70,130,210,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(70,130,210,0.07) 1px, transparent 1px);
    background-size: 14px 14px;
    mask-image: radial-gradient(ellipse 90% 100% at 100% 100%, black 0%, transparent 70%);
    pointer-events: none;
}
#betting-ui::after {
    content: '';
    position: absolute; bottom: 0; left: 0;
    width: 90px; height: 60px;
    background-image:
        linear-gradient(rgba(70,130,210,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(70,130,210,0.07) 1px, transparent 1px);
    background-size: 14px 14px;
    mask-image: radial-gradient(ellipse 90% 100% at 0% 100%, black 0%, transparent 70%);
    pointer-events: none;
}
.btn-dota-start {
    background: var(--teal); color: #000; padding: 12px 48px;
    font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(16,185,129,0.30);
}
.btn-dota-start:hover { background: var(--teal-d); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(16,185,129,0.44); }

.pos-row { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.pos-row .time-bank-buttons { flex-basis: 100%; justify-content: center; }
/* Propriétés communes aux deux boutons de position */
.btn-long, .btn-short {
    flex: 1;
    background: var(--bg-3);
    color: var(--t1);
    border: 1px solid var(--b3);
    border-radius: 8px;
    padding: 14px 24px;
    letter-spacing: 2px; text-transform: uppercase; font-size: 12px; font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    transition: all 0.18s ease;
}
/* Hover spécifique BULL */
.btn-long:hover {
    background: rgba(16,185,129,0.10);
    border-color: var(--green);
    color: var(--green);
    box-shadow: 0 4px 20px rgba(16,185,129,0.14), inset 0 1px 0 rgba(16,185,129,0.08);
    transform: translateY(-1px);
}
/* Hover spécifique BEAR */
.btn-short:hover {
    background: rgba(212,96,122,0.12);
    border-color: #d4607a;
    color: #e080a0;
    box-shadow: 0 4px 20px rgba(212,96,122,0.15), inset 0 1px 0 rgba(212,96,122,0.1);
    transform: translateY(-1px);
}

.raise-slider-container {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-0); padding: 9px 14px;
    border-radius: 8px; border: 1px solid var(--b2); width: 100%;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.3);
}
input[type=range] { flex: 1; accent-color: var(--teal); height: 3px; cursor: pointer; }
.slider-val {
    font-size: 12px; font-weight: 800; color: var(--gold);
    background: var(--gold-bg); padding: 4px 10px;
    border-radius: 6px; border: 1px solid rgba(212,175,55,0.25);
    min-width: 48px; text-align: center;
}
.raise-amount-input {
    width: 100%; background: transparent; border: none; outline: none;
    font: inherit; font-weight: inherit; color: inherit; text-align: center;
    padding: 0; -moz-appearance: textfield;
}
.raise-amount-input::-webkit-outer-spin-button,
.raise-amount-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.raise-amount-input:focus { color: var(--t1); }
.bet-buttons { display: flex; gap: 7px; }

/* Boutons d'action — relief 3D "juicy" façon Uno : bordure basse épaisse
   qui s'aplatit et fait descendre le bouton au clic (translateY). */
.action-key {
    background: var(--bg-3); border: none; border-bottom: 4px solid var(--bg-1);
    border-radius: var(--r); padding: 12px 18px; cursor: pointer;
    color: var(--t2); font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
    transition: all 0.15s ease-out; min-width: 88px;
}
.action-key:hover  { background: var(--bg-4); color: var(--t1); transform: translateY(-1px); }
.action-key:active { transform: translateY(3px); border-bottom-width: 1px; }

.key-primary { background: var(--teal); border-bottom-color: #007a3d; color: #06210f; }
.key-primary:hover  { background: #22ff8e; box-shadow: 0 0 22px rgba(0,230,118,0.45); }

.key-danger  { background: var(--red); border-bottom-color: #8f0021; color: #2b0007; }
.key-danger:hover   { background: #ff3f66; box-shadow: 0 0 22px rgba(255,23,68,0.4); }

.key-call    { background: var(--call); border-bottom-color: #2f75ad; color: #0a2033; }
.key-call:hover     { background: #86c8ff; box-shadow: 0 0 22px rgba(100,181,246,0.4); }

.btn-primary { background: var(--teal); color: #06210f; border: none; border-bottom: 4px solid #007a3d; padding: 10px 24px; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; border-radius: var(--r); }
.btn-primary:hover { background: #22ff8e; box-shadow: 0 0 20px rgba(0,230,118,0.4); }
.btn-primary:active { transform: translateY(3px); border-bottom-width: 1px; }
.btn-danger  { background: var(--red); color: #2b0007; border: none; border-bottom: 4px solid #8f0021; border-radius: var(--r); text-transform: uppercase; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; padding: 9px 18px; }
.btn-danger:active { transform: translateY(3px); border-bottom-width: 1px; }

/* ── PANEL DROIT ── */
#right-panel {
    width: var(--sidebar-right-w); flex-shrink: 0;
    background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
    border-left: 1px solid var(--b2);
    box-shadow: -1px 0 0 var(--b2), -6px 0 32px rgba(0,0,0,0.4), 0 0 24px rgba(16,185,129,0.05);
    display: flex; flex-direction: column;
    overflow: visible;
}
.rp-title {
    padding: 8px 12px;
    font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--t4); background: var(--bg-0); border-bottom: 1px solid var(--b1);
}
.rp-content { flex: 1; overflow-y: auto; padding: 10px 12px; scrollbar-width: none; }
.rp-section-title { font-size: 9px; font-weight: 700; color: var(--teal); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 7px; }
.rp-data-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.rp-row { display: flex; justify-content: space-between; align-items: center; }
.rp-key { font-size: 9px; color: var(--t4); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.rp-val { font-size: 11px; font-weight: 700; color: var(--t1); }
.rp-val.gold  { color: var(--gold); }
.rp-val.green { color: var(--green); }
.rp-val.red   { color: var(--red); }
.rp-divider { height: 1px; background: var(--b1); margin: 10px 0; }
.rp-premium-info { display: flex; align-items: center; gap: 5px; padding: 6px 8px; background: var(--bg-3); border-radius: 5px; border: 1px solid var(--b1); }
.rp-free-tag { font-size: 9px; font-weight: 700; color: var(--t4); letter-spacing: 1px; text-transform: uppercase; }

/* ============================================================
   NEWS BANNER
   ============================================================ */
/* ============================================================
   NEWS — MODAL CENTRÉ (apparition principale)
   ============================================================ */
#news-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(6,12,24,0.86);
    backdrop-filter: blur(6px);
    pointer-events: none;
}
#news-modal.hidden { display: none; }
#news-modal.exiting { animation: modalOverlayFade 0.45s ease forwards; }
@keyframes modalOverlayFade { to { opacity: 0; } }

.news-modal-card {
    background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 100%);
    border: 1px solid var(--gold);
    border-radius: var(--r3);
    padding: 44px 60px 40px;
    text-align: center;
    max-width: 660px; width: 90%;
    box-shadow: 0 32px 80px rgba(0,0,0,0.85), 0 0 0 1px rgba(80,150,220,0.08),
                inset 0 1px 0 rgba(255,255,255,0.04);
    animation: modalCardIn 0.4s cubic-bezier(0.16,1,0.3,1);
    position: relative; overflow: hidden;
}
/* Ligne accent — jaune par défaut, rouge si haute importance */
.news-modal-card::before {
    content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
#news-modal.importance-high .news-modal-card::before {
    background: linear-gradient(90deg, transparent, var(--red), transparent);
}
@keyframes modalCardIn {
    from { opacity: 0; transform: scale(0.84) translateY(24px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
#news-modal.exiting .news-modal-card {
    animation: modalCardOut 0.45s cubic-bezier(0.4,0,1,1) forwards;
}
@keyframes modalCardOut {
    to { opacity: 0; transform: scale(0.6) translateY(-160px); }
}

/* Rangée LIVE en haut de la carte */
.news-modal-live {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-bottom: 20px;
}
.news-modal-live-label {
    font-size: 9px; font-weight: 800; letter-spacing: 3px;
    text-transform: uppercase; color: var(--t4);
}

/* Point pulsant (partagé modal + bannière) */
.news-live-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    background: var(--teal); box-shadow: 0 0 8px var(--teal);
    animation: livePulse 1.4s ease-in-out infinite;
}
#news-modal.volatile .news-live-dot,
#news-banner.volatile .news-live-dot {
    background: var(--teal); box-shadow: 0 0 8px var(--teal);
}
@keyframes livePulse {
    0%,100% { opacity: 1; }
    50%     { opacity: 0.2; box-shadow: none; }
}

/* Badge [TAG] Bloomberg — rouge = haute importance, jaune = normale */
.news-modal-type {
    display: inline-block;
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 10px; font-weight: 800; letter-spacing: 2.5px;
    padding: 4px 14px; border-radius: 3px; margin-bottom: 18px;
    color: var(--gold); background: rgba(212,175,55,0.1); border: 1px solid rgba(212,175,55,0.3);
}
#news-modal.importance-high .news-modal-type {
    color: var(--red); background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.35);
}
#news-modal.importance-low .news-modal-type {
    color: var(--gold); background: rgba(212,175,55,0.1); border-color: rgba(212,175,55,0.35);
}
#news-modal.ambiguous .news-modal-card::before {
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Titre principal — modal */
.news-modal-headline {
    font-size: 21px; font-weight: 700; letter-spacing: 0.2px;
    color: rgba(255,255,255,0.94); line-height: 1.45;
}
#news-modal.volatile .news-modal-headline { color: rgba(255,255,255,0.94); }

/* ============================================================
   NEWS — BANNIÈRE TOP (après 3s)
   ============================================================ */
#news-banner {
    /* top: 44px (juste sous #top-nav) chevauchait la barre "À GAGNER"
       (.center-top-bar, 72px de haut, commence aussi à 44px) — décalée
       juste en dessous pour ne plus jamais la couvrir. */
    position: fixed; top: 116px; left: var(--sidebar-left-w); right: var(--sidebar-right-w);
    z-index: 1000; display: none;
    background: linear-gradient(90deg, rgba(13,11,8,0.99) 0%, rgba(18,15,10,0.99) 100%);
    border-bottom: 1px solid var(--b2);
    border-left: 3px solid var(--teal);
    box-shadow: 0 6px 28px rgba(0,0,0,0.6);
    animation: newsSlideDown 0.4s cubic-bezier(0.16,1,0.3,1);
}
.news-banner-hide {
    margin-left: auto; flex-shrink: 0;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255,255,255,0.06); border: 1px solid var(--b2); color: var(--t3);
    font-size: 11px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.news-banner-hide:hover { background: rgba(255,255,255,0.12); color: var(--t1); }

/* Flèche de réouverture — même position horizontale que la bannière,
   discrète, apparaît seulement quand la bannière a été cachée manuellement. */
.news-reopen-tab {
    position: fixed; top: 116px;
    left: calc(var(--sidebar-left-w) + (100vw - var(--sidebar-left-w) - var(--sidebar-right-w)) / 2);
    transform: translateX(-50%);
    z-index: 1000;
    width: 34px; height: 18px; border-radius: 0 0 8px 8px;
    background: rgba(13,11,8,0.95); border: 1px solid var(--b2); border-top: none;
    color: var(--t3); font-size: 11px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    transition: background 0.15s, color 0.15s;
}
.news-reopen-tab:hover { background: rgba(13,11,8,1); color: var(--t1); }
.news-reopen-tab.hidden { display: none; }
@keyframes newsSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
#news-banner.bullish    { border-left-color: var(--teal); }
#news-banner.bearish    { border-left-color: var(--red); }
#news-banner.neutral    { border-left-color: rgba(200,200,200,0.4); }
#news-banner.ambiguous  { border-left-color: var(--gold); }
#news-banner.correction {
    border-left-color: var(--gold);
    animation: correctionFlash 0.25s ease 3;
}
@keyframes correctionFlash {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.3; }
}
#news-banner.volatile {
    border-left-color: var(--gold);
    animation: newsSlideDown 0.4s cubic-bezier(0.16,1,0.3,1),
               volatilePulse 1.2s ease-in-out infinite alternate;
}
@keyframes volatilePulse {
    from { box-shadow: 0 6px 28px rgba(0,0,0,0.6); }
    to   { box-shadow: 0 6px 28px rgba(240,140,0,0.2); }
}
#news-mini-slot {
    flex: 1; display: flex; align-items: center; gap: 10px;
    padding: 0 16px; overflow: hidden;
    border-left: 1px solid var(--b2);
    border-right: 1px solid var(--b2);
    animation: miniSlotIn 0.35s cubic-bezier(0.16,1,0.3,1);
}
#news-mini-slot.hidden { display: none; }
@keyframes miniSlotIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.news-mini-dot {
    width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
    background: var(--teal); box-shadow: 0 0 6px var(--teal);
    animation: livePulse 1.4s ease-in-out infinite;
}
.news-mini-tag {
    font-family: 'Courier New', monospace;
    font-size: 8px; font-weight: 800; letter-spacing: 2px;
    padding: 2px 8px; border-radius: 3px; flex-shrink: 0;
    color: var(--teal); background: rgba(64,210,185,0.08); border: 1px solid rgba(64,210,185,0.25);
}
.news-mini-text {
    font-size: 11px; font-weight: 600; letter-spacing: 0.2px;
    color: rgba(255,255,255,0.75); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
/* Rouge = haute importance, Jaune = importance normale */
#news-mini-slot.importance-high .news-mini-tag { color: var(--red); background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3); }
#news-mini-slot.importance-high .news-mini-dot { background: var(--red); box-shadow: 0 0 6px var(--red); }
#news-mini-slot.importance-low .news-mini-tag  { color: var(--gold); background: rgba(212,175,55,0.08); border-color: rgba(212,175,55,0.25); }
#news-mini-slot.importance-low .news-mini-dot  { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
#news-mini-slot.correction .news-mini-tag { color: var(--gold); background: rgba(212,175,55,0.1); border-color: rgba(212,175,55,0.3); }
#news-mini-slot.correction .news-mini-dot { background: var(--gold); box-shadow: 0 0 6px var(--gold); }

/* Layout interne bannière */
.news-inner {
    display: flex; align-items: center; gap: 0;
    padding: 0 20px; height: 50px; overflow: hidden;
}
.news-left-block {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding-right: 18px; margin-right: 18px;
    border-right: 1px solid var(--b2); flex-shrink: 0;
}
.news-source-label {
    font-size: 7px; font-weight: 800; letter-spacing: 2.5px;
    text-transform: uppercase; color: var(--t4); white-space: nowrap;
}
/* Badge [TAG] bannière — visible et colorisé par sentiment */
.news-content {
    display: inline-block;
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 9px; font-weight: 800; letter-spacing: 2px;
    padding: 3px 10px; border-radius: 3px; flex-shrink: 0;
    margin-right: 14px;
    color: var(--teal); background: rgba(64,210,185,0.08); border: 1px solid rgba(64,210,185,0.28);
}
#news-banner.bullish .news-content {
    color: var(--teal); background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.3);
}
#news-banner.bearish .news-content {
    color: var(--red); background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3);
}
#news-banner.volatile .news-content {
    color: var(--gold); background: rgba(212,175,55,0.08); border-color: rgba(212,175,55,0.28);
}
#news-banner.neutral .news-content {
    color: rgba(200,200,200,0.7); background: rgba(200,200,200,0.05); border-color: rgba(200,200,200,0.2);
}
#news-banner.ambiguous .news-content {
    color: var(--gold); background: rgba(212,175,55,0.08); border-color: rgba(212,175,55,0.3);
}
#news-banner.correction .news-content {
    color: var(--gold); background: rgba(212,175,55,0.1); border-color: rgba(212,175,55,0.35);
}
/* Texte bannière */
#news-text-content {
    flex: 1;
    font-size: 13px; font-weight: 600; letter-spacing: 0.2px;
    color: rgba(255,255,255,0.92); line-height: 1.35;
    padding: 0 20px;
    border-left: 1px solid var(--b1);
}
#news-banner.volatile #news-text-content { color: inherit; }

/* ============================================================
   WIN SCREEN
   ============================================================ */
#win-screen {
    position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(12px);
    display: none; justify-content: center; align-items: center; z-index: 2000;
}
#win-card {
    background: var(--bg-2); border: 1px solid var(--b3);
    border-radius: var(--r3); padding: 36px;
    width: 460px; text-align: center;
    box-shadow: 0 40px 80px rgba(0,0,0,0.8); position: relative; overflow: hidden;
}
#win-card::after {
    content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--teal), transparent); opacity: 0.8;
}

/* ── Effets de victoire — plein écran, uniquement à la victoire finale d'une partie ── */
#victory-fx-layer {
    position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 2500;
}
.fx-particle {
    position: absolute; top: -40px; line-height: 1;
    animation-name: fxFall; animation-timing-function: ease-in; animation-fill-mode: forwards;
}
@keyframes fxFall {
    from { transform: translateY(0) rotate(0deg); opacity: 1; }
    to   { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}
#victory-fx-layer.fx-glow-active::before {
    content: ''; position: absolute; inset: 0;
    box-shadow: inset 0 0 160px rgba(212,175,55,0.35);
    animation: fxGoldGlow 1.6s ease-in-out infinite;
}
@keyframes fxGoldGlow {
    0%, 100% { box-shadow: inset 0 0 100px rgba(212,175,55,0.25); }
    50%      { box-shadow: inset 0 0 220px rgba(212,175,55,0.6); }
}
.win-header h1 { font-size: 16px; font-weight: 800; letter-spacing: 4px; color: var(--t1); text-transform: uppercase; margin-bottom: 6px; }
#market-outcome-badge { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px; display: block; }
.badge-up   { color: var(--green); }
.badge-down { color: var(--red); }
.badge-flat { color: var(--t3); }

.result-line {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(255,255,255,0.02); padding: 10px 14px; margin-bottom: 7px;
    border-radius: 6px; border-left: 3px solid transparent;
}
.result-line.winner-border { border-left-color: var(--green); background: var(--green-bg); }
.result-line.loser-border  { border-left-color: rgba(231,76,60,0.4); }
.result-left  { display: flex; align-items: center; gap: 10px; }
.pos-icon-mini { padding: 2px 8px; border-radius: 3px; font-size: 9px; font-weight: 800; min-width: 44px; text-align: center; }
.icon-bull { background: var(--green-bg); color: var(--teal); border: 1px solid rgba(46,204,113,0.25); }
.icon-bear { background: var(--red-bg);   color: var(--red); border: 1px solid rgba(231,76,60,0.25); }
.icon-fold { background: rgba(100,120,150,0.1); color: var(--t3); }
.player-name-text   { font-size: 13px; font-weight: 600; color: var(--t2); }
.result-status-text { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.winner-border .result-status-text { color: var(--green); }
.loser-border  .result-status-text { color: var(--red); }

.pot-summary { margin-top: 22px; border-top: 1px solid var(--b1); padding-top: 18px; }
.pot-label   { font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--t4); display: block; margin-bottom: 5px; }
.pot-split-row   { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.pot-split-label { font-size: 9px; font-weight: 700; color: var(--t4); letter-spacing: 2px; text-transform: uppercase; }
.pot-split-label.side { color: var(--teal); }
.pot-split-val   { font-size: 12px; font-weight: 800; color: var(--gold); }
.pot-split-val.side { color: var(--teal); }
.allin-tag {
    font-size: 9px; font-weight: 700; background: var(--gold-bg); color: var(--gold);
    border: 1px solid rgba(212,175,55,0.22); padding: 1px 5px; border-radius: 3px; margin-left: 5px; vertical-align: middle;
}
.result-line.split-border { border-left-color: var(--teal); background: var(--teal-bg); }
.result-line.split-border .result-status-text { color: var(--teal); }
#final-pot-display { font-size: 40px; font-weight: 900; color: var(--gold); margin: 6px 0; letter-spacing: -1px; }
.btn-continue {
    width: 100%; margin-top: 18px; background: var(--teal); color: #000;
    padding: 12px; border-radius: 8px; font-weight: 800; font-size: 12px;
    text-transform: uppercase; letter-spacing: 2px;
}
.btn-continue:hover { background: var(--teal-d); transform: translateY(-1px); }

/* Streak */
.streak-banner {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--gold-bg); border: 1px solid rgba(212,175,55,0.28);
    border-radius: 6px; padding: 9px 16px; margin-bottom: 14px;
    font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--gold); text-transform: uppercase;
}
.streak-fire { font-size: 14px; }

/* Stats session */
.session-stats-panel { margin: 14px 0 0; border-top: 1px solid var(--b1); padding-top: 14px; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.stat-item { background: rgba(255,255,255,0.02); border: 1px solid var(--b1); border-radius: 6px; padding: 9px 5px; text-align: center; }
.stat-label { font-size: 8px; font-weight: 700; letter-spacing: 1px; color: var(--t4); text-transform: uppercase; margin-bottom: 4px; }
.stat-value { font-size: 13px; font-weight: 800; color: var(--t1); }
.stat-value.green { color: var(--green); }
.stat-value.red   { color: var(--red); }
.stat-value.gold  { color: var(--gold); }

/* ============================================================
   BADGE DE POSITION RÉVÉLÉE
   ============================================================ */
.all-in-pos-badge {
    position: absolute; z-index: 100;
    font-weight: 900; letter-spacing: 2.5px; text-transform: uppercase;
    text-align: center; white-space: nowrap;
}

/* Bots — badge dans le flux, sous le stack de chips */
.side-player-card .all-in-pos-badge {
    position: relative; z-index: auto;
    width: 100%;
    font-size: 16px; padding: 10px 8px;
    border-radius: var(--r); border: 1px solid;
    animation: botReveal 0.35s ease-out;
}
@keyframes botReveal {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

/* Joueur — badge proéminent à droite de la bande */
.user-info-strip .all-in-pos-badge {
    top: 50%; right: 10px;
    transform: translateY(-50%);
    font-size: 15px; padding: 8px 18px;
    border-radius: var(--r); border: 1px solid;
    animation: userReveal 0.35s ease-out;
}
@keyframes userReveal {
    from { opacity: 0; transform: translateY(-50%) scale(0.9); }
    to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* Couleurs */
.pos-bull {
    background: linear-gradient(180deg, rgba(38,166,91,0.10) 0%, rgba(38,166,91,0.30) 100%);
    color: var(--teal); border-color: rgba(46,204,113,0.45);
    box-shadow: 0 0 18px rgba(38,166,91,0.28), inset 0 1px 0 rgba(93,224,136,0.15);
    text-shadow: 0 0 12px rgba(93,224,136,0.55);
}
.pos-bear {
    background: linear-gradient(180deg, rgba(239,68,68,0.10) 0%, rgba(239,68,68,0.30) 100%);
    color: #f87171; border-color: rgba(239,68,68,0.45);
    box-shadow: 0 0 18px rgba(239,68,68,0.28), inset 0 1px 0 rgba(255,100,100,0.1);
    text-shadow: 0 0 12px rgba(255,80,80,0.55);
}

/* ============================================================
   LEVEL UP OVERLAY
   ============================================================ */
#levelup-overlay {
    position: fixed; inset: 0; z-index: 99998;
    display: flex; justify-content: center; align-items: center;
    background: rgba(0,0,0,0.75); backdrop-filter: blur(10px); pointer-events: none;
}
#levelup-overlay.levelup-show { animation: luFadeIn 0.3s ease; }
@keyframes luFadeIn { from { opacity:0; } to { opacity:1; } }
.levelup-card {
    text-align: center;
    background:
        radial-gradient(ellipse 340px 160px at 50% 0%, rgba(212,175,55,0.14), transparent 70%),
        var(--bg-3);
    border: 1px solid var(--b3); border-top: 2px solid var(--teal);
    border-radius: var(--r3); padding: 44px 56px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.85);
    animation: luCardPop 0.4s ease-out;
    position: relative; overflow: hidden;
}
@keyframes luCardPop { from { transform: scale(0.92) translateY(16px); opacity:0; } to { transform: scale(1); opacity:1; } }
.levelup-stars { font-size: 18px; color: var(--gold); letter-spacing: 8px; animation: luStarsGlow 1.6s ease-in-out infinite; }
@keyframes luStarsGlow { 0%,100% { opacity: 0.7; } 50% { opacity: 1; text-shadow: 0 0 12px rgba(212,175,55,0.7); } }
.levelup-badge { display: inline-block; margin: 14px 0 6px; font-size: 10px; font-weight: 700; letter-spacing: 4px; color: var(--teal); background: var(--teal-bg); padding: 4px 16px; border-radius: 3px; border: 1px solid rgba(16,185,129,0.30); text-transform: uppercase; }
.levelup-level {
    font-size: 52px; font-weight: 900; margin: 6px 0; letter-spacing: -2px; line-height: 1;
    background: linear-gradient(90deg, var(--gold), #fff6da, var(--gold));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 16px rgba(212,175,55,0.4));
}
.levelup-reward {
    margin-top: 10px; font-size: 13px; font-weight: 700; color: #ffe1a3;
    background: linear-gradient(135deg, rgba(212,175,55,0.16), rgba(46,204,113,0.10));
    padding: 8px 22px; border-radius: 6px; border: 1px solid rgba(212,175,55,0.35);
    box-shadow: 0 0 14px rgba(212,175,55,0.15);
}
.levelup-rank   { margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--teal); letter-spacing: 2px; }


/* ============================================================
   UTILITAIRES
   ============================================================ */
.hidden        { display: none !important; }
.hidden-screen { display: none !important; }

/* ── LIQUIDATED SCREEN ── */
#liquidated-screen {
    position: fixed; inset: 0; z-index: 99000;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px;
    background: rgba(0,0,0,0.55);
}
#liquidated-screen.hidden { display: none; }

.liq-title {
    font-family: var(--font-display);
    font-size: clamp(46px, 9vw, 84px);
    font-weight: 400; letter-spacing: 6px; text-transform: uppercase;
    color: var(--red);
    animation: liqIn 0.5s ease-out both;
}
@keyframes liqIn {
    from { opacity: 0; transform: scale(1.18); }
    to   { opacity: 1; transform: scale(1); }
}

.liq-subtitle {
    font-size: 13px; font-weight: 600; color: var(--t3);
    letter-spacing: 0.5px; text-align: center; margin-top: -18px;
    animation: liqIn 0.5s ease-out 0.15s both;
}

.liq-btn-menu {
    padding: 12px 28px; border-radius: var(--r); font-size: 11px;
    font-weight: 600; letter-spacing: 2.5px; cursor: pointer;
    text-transform: uppercase; border: 1px solid var(--gold);
    background: var(--bg-3); color: var(--gold);
    transition: all 0.35s ease-out;
    animation: liqIn 0.5s ease-out 0.35s both;
}
.liq-btn-menu:hover { background: var(--gold); color: #0d0b08; }
.player-box.folded     { opacity: 0.18 !important; filter: grayscale(1); }
.player-box.eliminated { opacity: 0.08 !important; filter: grayscale(1); }

/* ============================================================
   PALIERS DE MISE — l'ambiance de la table s'élève avec l'enjeu
   Classe posée sur #table par table-client.js (_applyStakeTier), selon
   la mise confirmée par le serveur. 50/100 ⟁ = look de base (aucune
   classe). Au-delà, bordures/ombres se réchauffent à l'or et la table
   devient visuellement plus sobre et "pro" à mesure que la mise grimpe.
   ============================================================ */

/* Palier 2 — Avancé / Expert (200-500 ⟁) : liserés discrètement dorés */
#table.stake-tier-2 { --b2: rgba(230,190,110,0.14); --b3: rgba(230,190,110,0.24); }
#table.stake-tier-2 #left-sidebar,
#table.stake-tier-2 #right-panel { box-shadow: 0 0 0 1px var(--b2), 6px 0 32px rgba(0,0,0,0.45), 0 0 20px rgba(255,201,77,0.06); }
#table.stake-tier-2 .side-portrait,
#table.stake-tier-2 .user-strip-portrait { border-color: rgba(230,190,110,0.32); }
#table.stake-tier-2 #center-area { box-shadow: inset 0 0 140px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,201,77,0.35); }

/* Palier 3 — Élite (1000 ⟁) : or affirmé, feutre plus profond, noms/jetons en lumière dorée */
#table.stake-tier-3 { --b2: rgba(230,190,110,0.22); --b3: rgba(230,190,110,0.36); }
#table.stake-tier-3 #left-sidebar,
#table.stake-tier-3 #right-panel {
    background: linear-gradient(180deg, var(--bg-1) 0%, #0a0704 100%);
    box-shadow: 0 0 0 1px rgba(230,190,110,0.22), 6px 0 32px rgba(0,0,0,0.55), 0 0 26px rgba(255,201,77,0.08);
}
#table.stake-tier-3 .side-chips-wrap,
#table.stake-tier-3 .user-strip-chips { border-color: rgba(230,190,110,0.30); }
#table.stake-tier-3 .side-chips-value,
#table.stake-tier-3 .user-strip-chips-value,
#table.stake-tier-3 .side-player-name,
#table.stake-tier-3 .user-strip-name { color: var(--gold-light); }
#table.stake-tier-3 #center-area {
    background: radial-gradient(ellipse 130% 90% at 50% 40%, #13361f 0%, #0a2415 55%, #030c07 100%);
    box-shadow: inset 0 0 160px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,201,77,0.45);
}
#table.stake-tier-3 .chart-section-header { box-shadow: 0 1px 0 rgba(255,201,77,0.15); }

/* Palier 4 — Premium / High Roller (2000-5000 ⟁) : typographie élégante, cadre or continu */
#table.stake-tier-4,
#table.stake-tier-5 { --b2: rgba(230,190,110,0.28); --b3: rgba(230,190,110,0.42); }
#table.stake-tier-4 .side-chips-value, #table.stake-tier-5 .side-chips-value,
#table.stake-tier-4 .user-strip-chips-value, #table.stake-tier-5 .user-strip-chips-value,
#table.stake-tier-4 .cwi-value, #table.stake-tier-5 .cwi-value,
#table.stake-tier-4 #pot-value, #table.stake-tier-5 #pot-value,
#table.stake-tier-4 .vol-pot-value, #table.stake-tier-5 .vol-pot-value,
#table.stake-tier-4 .chart-market-name, #table.stake-tier-5 .chart-market-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
}
#table.stake-tier-4 .side-player-name, #table.stake-tier-5 .side-player-name,
#table.stake-tier-4 .user-strip-name, #table.stake-tier-5 .user-strip-name {
    font-family: 'Playfair Display', Georgia, serif;
    letter-spacing: 0.6px;
}
#table.stake-tier-4 .side-chips-value, #table.stake-tier-5 .side-chips-value,
#table.stake-tier-4 .user-strip-chips-value, #table.stake-tier-5 .user-strip-chips-value,
#table.stake-tier-4 .side-player-name, #table.stake-tier-5 .side-player-name,
#table.stake-tier-4 .user-strip-name, #table.stake-tier-5 .user-strip-name {
    color: var(--gold-light);
}
#table.stake-tier-4 #left-sidebar, #table.stake-tier-4 #right-panel,
#table.stake-tier-5 #left-sidebar, #table.stake-tier-5 #right-panel {
    background: linear-gradient(180deg, #17130b 0%, #0a0704 100%);
    box-shadow: 0 0 0 1px rgba(230,190,110,0.32), 6px 0 32px rgba(0,0,0,0.6), 0 0 30px rgba(255,201,77,0.1);
}
#table.stake-tier-4 .sidebar-breadcrumb, #table.stake-tier-4 .rp-title,
#table.stake-tier-5 .sidebar-breadcrumb, #table.stake-tier-5 .rp-title {
    color: var(--gold); border-bottom-color: rgba(230,190,110,0.25);
}
#table.stake-tier-4 .side-portrait, #table.stake-tier-4 .user-strip-portrait,
#table.stake-tier-5 .side-portrait, #table.stake-tier-5 .user-strip-portrait {
    border-color: rgba(230,190,110,0.5);
    box-shadow: 0 0 20px rgba(212,175,55,0.22), inset 0 0 12px rgba(0,0,0,0.5);
}
/* Rupture nette avec le feutre émeraude des tables standards : à ce niveau
   de mise, l'ambiance passe au salon VIP noir & or plutôt qu'à une simple
   variante de teinte — c'est l'effet "high roller" demandé. */
#table.stake-tier-4 #center-area, #table.stake-tier-5 #center-area {
    background: radial-gradient(ellipse 130% 90% at 50% 40%, #2a2210 0%, #14100a 50%, #030201 100%);
    box-shadow: inset 0 0 180px rgba(0,0,0,0.75), inset 0 0 0 1px rgba(255,201,77,0.55);
}
#table.stake-tier-4 .chart-header-tag, #table.stake-tier-5 .chart-header-tag {
    color: var(--gold); background: var(--gold-bg); border-color: rgba(212,175,55,0.4);
}

/* Cadre or double autour du graphique — même motif "éventail" doré que le
   reste de l'app (voir .deco-fan) posé aux 4 coins pour un effet cadre. */
#table.stake-tier-4 .chart-section, #table.stake-tier-5 .chart-section {
    outline: 1px solid rgba(255,201,77,0.4); outline-offset: -1px;
    position: relative;
}
#table.stake-tier-4 .chart-section-header, #table.stake-tier-5 .chart-section-header {
    background: linear-gradient(180deg, #1b1710 0%, var(--bg-1) 100%);
    border-bottom: 1px solid rgba(255,201,77,0.3);
}

/* Badge "TABLE VIP" — rappel discret et permanent du statut de la table,
   posé dans la barre supérieure sans déranger le bloc "À GAGNER" centré. */
#table.stake-tier-4 .center-top-bar, #table.stake-tier-5 .center-top-bar { position: relative; }
#table.stake-tier-4 .center-top-bar::after, #table.stake-tier-5 .center-top-bar::after {
    position: absolute; top: 50%; right: 24px; transform: translateY(-50%);
    background: linear-gradient(135deg, #2a2210, #0d0b08);
    border: 1px solid rgba(255,201,77,0.5);
    color: var(--gold-light);
    font-size: 10px; font-weight: 800; letter-spacing: 2px;
    padding: 6px 14px; border-radius: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 12px rgba(255,201,77,0.15);
    white-space: nowrap; pointer-events: none;
}
#table.stake-tier-4 .center-top-bar::after { content: '👑 HIGH ROLLER'; }
#table.stake-tier-5 .center-top-bar::after { content: '💎 TABLE ROYALE'; }

/* Palier 5 — Royal (10000-20000 ⟁) : filet or animé tout autour de la table */
#table.stake-tier-5 { position: relative; }
#table.stake-tier-5::before {
    content: ''; position: absolute; inset: 0; z-index: 50; pointer-events: none;
    box-shadow: inset 0 0 0 2px rgba(255,201,77,0.55), inset 0 0 40px rgba(255,201,77,0.08);
    animation: royalShimmer 3.2s ease-in-out infinite;
}
@keyframes royalShimmer {
    0%, 100% { box-shadow: inset 0 0 0 2px rgba(255,201,77,0.4), inset 0 0 30px rgba(255,201,77,0.06); }
    50%      { box-shadow: inset 0 0 0 2px rgba(255,224,138,0.75), inset 0 0 55px rgba(255,201,77,0.16); }
}

/* ============================================================
   DESKTOP RÉDUIT (laptops/2e écran, ~1024-1600px de large) — bug rapporté :
   "le slider de bet était en dessous des boutons". Entre le desktop large
   (>1600px, tout tient sur une seule ligne dans .user-info-strip) et le
   mobile (bloc dédié juste en dessous, vrai réagencement) : une plage de
   résolutions COURANTES (1366×768, 1440×900, 1536×864...) où rien ne
   réagence, mais où boutons de mise + slider + time bank ne rentrent plus
   tous sur une ligne au format desktop plein — resserre juste ce qu'il faut
   (paddings/tailles, aucun réagencement) pour regagner la place nécessaire.
   min-width:641px : ne touche jamais au bloc mobile juste en dessous. */
@media (max-width: 1600px) and (min-width: 641px) {
    /* Le vrai goulot n'est pas QUE #betActions : .user-info-strip aligne
       TOUS ses enfants (portrait, badges, bulle, betActions, time bank,
       jetons) sur une seule ligne avec 14px d'écart entre chacun — avec
       ~7 enfants ça fait déjà ~100px juste en espacement, avant même de
       compter la largeur de chaque élément. Réduit ce gap ET la taille des
       éléments annexes (portrait, badges) pour libérer le maximum de place
       pour betActions/time bank, les 2 qui ont vraiment besoin de largeur. */
    .user-info-strip { gap: 7px; }
    .user-info-strip .user-strip-portrait { width: 36px; height: 40px; font-size: 18px; }
    .user-info-strip .action-key { padding: 8px 9px; font-size: 8.5px; }
    .user-info-strip .raise-slider-container { min-width: 100px; padding: 6px 8px; gap: 6px; }
    .user-info-strip .bet-buttons { gap: 4px; }
    .user-info-strip #betActions { gap: 5px; }
    #timeBankButtons .time-bank-btn { padding: 4px 7px; font-size: 10px; }
    .time-bank-buttons { gap: 3px; }
    .user-strip-chips { padding-left: 8px; }
}
/* Même plage de largeur, mais seulement quand la HAUTEUR manque aussi (un
   2e écran externe est souvent moins haut que large, et la barre de
   titre/onglets du navigateur mange une partie de la hauteur annoncée par
   l'OS) — bug rapporté : "besoin de scroller sur la page principale pour
   voir les tailles de partie". min-height:501px exclut délibérément le
   téléphone en paysage (déjà couvert par son propre bloc ci-dessous, qui
   cible max-height:500px) pour ne jamais chevaucher les deux règles. */
@media (min-width: 641px) and (max-height: 800px) and (min-height: 501px) {
    #home-screen { padding: 66px 20px 20px; }
    .home-main { gap: 12px; }
    .weekly-offers .offer-slide { min-height: 130px; padding: 16px 28px; }
    .offer-slide-title { font-size: 19px; margin-bottom: 6px; }
    .offer-slide-text { margin-bottom: 10px; }
    .home-section { gap: 8px; }
    .lobby-tab { padding: 12px 8px 10px; gap: 4px; }
    .mcat-icon { font-size: 19px; }
    .btn-game-select { padding: 12px 14px; }
}

/* ============================================================
   MOBILE (téléphone) — jusqu'ici aucune media query n'existait,
   toute l'app était pensée uniquement pour un écran d'ordinateur
   (barres latérales fixes de 196px/180px, widgets ancrés aux coins en
   position absolue, modales à largeur fixe...). Nécessaire pour l'appli
   Capacitor (voir mobile/) et pour quiconque visite le site depuis un
   téléphone. Le but n'est pas juste "faire tenir" mais un vrai réagencement
   compact — voir les commentaires par section ci-dessous.

   Deux conditions déclenchent ce bloc, pas une seule :
   1. (max-width: 640px) — portrait téléphone, ou toute fenêtre étroite.
   2. (orientation: landscape) and (max-width: 926px) and (max-height: 500px)
      — téléphone en PAYSAGE : puisque l'écran de jeu force le paysage
      (#rotate-prompt), un téléphone y arrive avec une largeur qui dépasse
      quasi toujours 640px (ex. 667-926px) — sans cette 2e condition, la
      condition 1 seule ne se déclencherait jamais en paysage et le jeu
      retomberait sur la mise en page desktop 3 colonnes, juste compressée
      en hauteur, au lieu du vrai réagencement tactile pensé ici.
      `pointer:coarse` faisait auparavant partie de cette condition mais
      s'est révélé peu fiable en pratique (bug rapporté : jeu "tout déformé"
      sur un vrai téléphone en paysage, malgré un test réussi à 667px de
      large — uniquement max-width/max-height retenus désormais, plus
      robustes). max-width:926px (aucun téléphone connu ne dépasse ça en
      paysage) + max-height:500px (aucun téléphone en paysage ne dépasse
      ~430px, une tablette en paysage dépasse 768px) ciblent fiablement le
      téléphone sans capturer un vrai écran desktop (il faudrait réduire une
      fenêtre à moins de 926×500 à la souris pour la déclencher par erreur —
      cas extrêmement rare/volontaire). */
@media (max-width: 640px), (orientation: landscape) and (max-width: 926px) and (max-height: 500px) {
    html, body { overflow-x: hidden; }

    /* ── Barre du haut : le conteneur Battle Pass (340px fixe) est
       impossible sur mobile — masqué ici, la progression BP reste
       consultable depuis son propre panneau sur l'écran d'accueil. */
    #battle-pass-container { display: none; }
    .nav-brand { min-width: 0; padding: 0 12px; gap: 6px; }
    .nav-title { font-size: 11px; letter-spacing: 1.5px; }
    .nav-right { padding: 0 10px; gap: 8px; }
    .nav-bank-label { font-size: 8px; }
    .nav-bank-value { font-size: 12px; }

    /* ── Écran d'accueil (lobby façon casino) ──
       Structure en flux normal (flex + flex-wrap) — seulement des
       ajustements de taille pour le carousel (la grande icône décorative en
       particulier déborderait sur un écran étroit) et l'espacement général. */
    /* padding-top dégage la barre d'onglets (fixed) : sans la .lobby-topbar
       d'avant (retirée), le premier contenu (offres de la semaine) démarrait
       directement sous elle et se retrouvait masqué derrière — bug trouvé en
       testant à 375px. */
    #home-screen { padding: 54px 12px 16px; }
    .home-main { gap: 8px; }
    .home-layout { gap: 8px; }
    .home-section { gap: 8px; }
    /* Barre d'onglets unique (marque + onglets + banque + pub) : place
       manquante sur mobile — la marque perd son texte (garde juste l'icône
       ◈) pour laisser le maximum de place aux onglets, qui restent
       scrollables horizontalement (voir .top-tabs-nav). */
    .top-tabs { gap: 4px; padding: 4px 6px; }
    .top-tabs-brand { flex: 0 0 auto; }
    .lobby-brand-name { display: none; }
    .top-tab { padding: 8px 10px; font-size: 10px; }
    .top-tabs-bank { flex: 0 0 auto; gap: 6px; }
    .ad-reward-chip { padding: 6px 10px; font-size: 9px; }
    .ad-reward-icon { font-size: 12px; }
    .lobby-wallet { padding: 2px 6px; }
    .lobby-wallet-value { font-size: 16px; }
    .lobby-wallet-alpha { font-size: 13px; }
    /* Bouton flottant "?" : ne garde que le rond, le libellé prendrait trop
       de place en bas d'un écran étroit. */
    .howto-float-btn { padding: 0; width: 40px; }
    .howto-float-label { display: none; }

    /* Bannière "Offres de la semaine" — rapetissée au minimum : c'est la
       promo, pas le but de la visite (choisir sa table). Le texte descriptif
       (.offer-slide-text) est masqué : l'eyebrow + le titre suffisent à
       comprendre l'offre, et c'est le plus gros poste d'espace vertical
       inutile trouvé ici. Espacements internes resserrés en cascade pour
       que la bannière + tout le reste (marché, table) tienne sans scroll
       même sur un téléphone en paysage (~375-430px de haut). */
    .offer-slide { min-height: 0; padding: 7px 10px; }
    /* padding horizontal : sans lui, le texte (qui hérite du padding réduit
       de .offer-slide ci-dessus, 10px) passait SOUS les flèches ‹/› —
       toujours visibles sur mobile (pas de survol au toucher, voir
       .offer-arrow juste en dessous), larges de 22px et positionnées à 12px
       du bord (.offer-arrow-prev/-next) — les 1res lettres du titre de
       l'offre ("Royal", "Neon Candles Theme") se retrouvaient donc caché
       sous le bouton "précédent" (bug corrigé, trouvé en testant l'écran
       d'accueil en 375px de large). 24px dégage la flèche (12+22=34px) avec
       une petite marge, symétrique des deux côtés pour la flèche "suivante".
    */
    .offer-slide-body { max-width: 100%; padding: 0 24px; }
    .offer-slide-eyebrow { font-size: 8px; margin-bottom: 2px; }
    .offer-slide-title { font-size: 12px; margin-bottom: 3px; }
    .offer-slide-text { display: none; }
    .offer-slide-cta { padding: 3px 9px; font-size: 8px; }
    .offer-slide-tag { padding: 2px 6px; font-size: 7px; }
    .offer-slide-deco { font-size: 34px; opacity: 0.05; }
    .offer-arrow { opacity: 1; width: 22px; height: 22px; font-size: 13px; } /* pas de survol au toucher : toujours visibles */
    .offer-dots { bottom: 5px; }

    .lobby-tabs { gap: 6px; }
    .lobby-tab { padding: 7px 4px 6px; font-size: 9px; }
    .mcat-icon { font-size: 16px; }

    .game-options { gap: 8px; }
    /* Sur mobile, pas assez de largeur pour les 6 cartes sur une ligne même
       réduites — revient au wrap (voir #table-size-section .game-options
       plus haut, nowrap forcé au-delà de ce breakpoint). */
    #table-size-section .game-options { flex-wrap: wrap; }
    .btn-game-select { width: 90px; padding: 8px 10px; }
    .game-price { font-size: 15px; }
    .game-tier-badge { font-size: 7px; padding: 2px 6px; }
    .game-desc-sub { display: none; } /* sous-texte décoratif — un des plus gros postes d'espace vertical par carte */

    .inv-overlay.page-mode, .bp-overlay.page-mode { padding-top: 56px; }

    /* ── Modales génériques ──
       `!important` nécessaire : plusieurs modales reçoivent un
       `max-width` en style inline depuis le HTML (ex. "Mon compte" à
       560px) qui l'emporterait sinon sur cette media query.
       `.challenges-modal` manquait ici — seule modale des 5 onglets du haut
       à ne recevoir aucun rétrécissement mobile jusqu'ici. */
    .inv-modal, .bp-modal, .htp-modal, .candle-theme-modal, .shop-modal, .challenges-modal {
        min-width: 0 !important;
        width: 94vw !important; max-width: 94vw !important;
        padding: 16px 12px !important;
        max-height: 88vh; overflow-y: auto;
    }
    .inv-modal-title { font-size: 15px; }
    .ch-tab-row { flex-wrap: wrap; }
    .ch-tab { padding: 6px 12px; font-size: 10px; }
    .shop-grid, .shop-chips-grid { grid-template-columns: repeat(2, 1fr); }
    .candle-theme-grid { grid-template-columns: repeat(2, 1fr); }

    /* ── Boutique ── */
    .shop-wallet-row { gap: 5px; padding: 3px 8px; font-size: 10px; }
    /* Icône du titre retirée sur mobile — l'espace y est déjà comptée au
       plus juste (solde + bouton fermer sur la même ligne que le titre) et
       le gap icône+texte suffisait à faire retomber "La Salle des Marchés"
       sur 2 lignes. */
    .shop-title-icon { display: none; }
    /* Onglets compactés et alignés à gauche (demande explicite : moins
       d'espace pour les noms de section, plus pour les articles en vente
       en dessous) au lieu de centrés avec un padding/police plus généreux.
       Plus de ligne/espace entre les 2 groupes d'onglets ni entre les
       onglets et la grille d'articles (demande explicite : "gros espace de
       vide entre cette section et les articles à vendre") — seul le petit
       gap du flex column (3px) subsiste. */
    .shop-tab-group { gap: 3px; margin-bottom: 4px; }
    .shop-tab-row { gap: 3px; justify-content: flex-start; }
    .shop-tab-icon { display: none; }
    .shop-tab-row .ch-tab { padding: 3px 7px; font-size: 7.5px; }
    .shop-item { padding: 8px 6px; gap: 3px; border-radius: 8px; }
    .shop-item-icon { font-size: 17px; }
    .shop-item-name { font-size: 9.5px; }
    .shop-item-desc { font-size: 7.5px; line-height: 1.25; }
    .shop-item-price { font-size: 11px; gap: 2px; }
    .shop-btn { padding: 4px 0; font-size: 8.5px; }
    .shop-chips-item { padding: 9px 6px; gap: 3px; }
    .shop-chips-amount { font-size: 15px; }
    .shop-chips-price { font-size: 9px; }
    .shop-chips-bonus { font-size: 7.5px; }
    .shop-section-title { font-size: 9px; margin: 8px 0 5px; }
    .shop-item-bp { font-size: 7px; }

    /* ── Mon compte ──
       Rapetissement supplémentaire (demande explicite : trop de scroll pour
       accéder au contenu sur mobile). Les overrides #account-overlay
       (même id+classe, plus bas dans le fichier donc gagnants à spécificité
       égale) sont nécessaires pour battre les règles de base du même
       sélecteur scopé (ex. margin-bottom 22px !important sur .acct-tab-row,
       padding/margin du header/titre) — une règle non scopée ne suffirait
       pas à les recouvrir. */
    #account-overlay .inv-modal { padding: 12px 10px !important; }
    #account-overlay .inv-modal-header { padding-bottom: 6px; margin-bottom: 6px; }
    #account-overlay .inv-modal-title { font-size: 13px; }
    /* Onglets en une seule ligne défilante horizontalement au lieu de 2
       lignes empilées (demande explicite : trop de scroll pour voir toute
       la page sur mobile — le bloc "chrome" au-dessus du contenu de chaque
       onglet, profil+solde+nav, prenait à lui seul plus de la moitié de la
       hauteur d'écran d'un téléphone réel). Sacrifie voir les 6 onglets
       d'un coup (on doit glisser pour les derniers) contre une ligne en
       moins de hauteur fixe sur CHAQUE onglet. */
    #account-overlay .acct-tab-row {
        position: relative;
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        gap: 2px; margin-bottom: 6px !important;
    }
    /* Même indice visuel que .top-tabs-nav (barre du haut, voir plus haut) —
       manquait ici : "Préférences" et les onglets suivants restaient
       invisibles sans qu'aucun signe ne suggère qu'il faut glisser pour les
       atteindre (bug trouvé en testant le mode invité/le changement de
       langue sur mobile). */
    #account-overlay .acct-tab-row::before,
    #account-overlay .acct-tab-row::after {
        content: ''; position: sticky; align-self: stretch; width: 14px;
        flex-shrink: 0; pointer-events: none; z-index: 1;
    }
    #account-overlay .acct-tab-row::before {
        left: 0; margin-right: -14px; order: -1;
        background: linear-gradient(90deg, var(--modal-bg), transparent);
    }
    #account-overlay .acct-tab-row::after {
        right: 0; margin-left: -14px;
        background: linear-gradient(270deg, var(--modal-bg), transparent);
    }
    #account-overlay .acct-tab { flex: 0 0 auto; }
    #account-overlay .auth-tabs { margin-bottom: 8px; }
    /* Icônes des onglets retirées sur mobile — les onglets y sont déjà très
       compacts (padding/police réduits juste en dessous), une icône en plus
       du texte les aurait rendus trop serrés pour rester lisibles. */
    .acct-tab-icon { display: none; }
    /* Solde ⟁/α retiré ici — déjà affiché en permanence dans la barre du
       haut juste au-dessus de cette fenêtre, doublon pur qui coûtait une
       rangée entière de hauteur sans rien apporter (même demande : réduire
       l'espace qui force le scroll). Le bouton de test dev (compte
       développeur uniquement) est déplacé juste après le profil pour
       combler la place sans rangée séparée. */
    #account-overlay .auth-balance-row { display: none; }
    .acct-shell { gap: 8px; }
    .acct-sidebar { gap: 6px; }
    .acct-avatar { width: 30px; height: 30px; flex: 0 0 30px; font-size: 12px; }
    .acct-profile { gap: 8px; margin-bottom: 0; }
    .acct-profile-label { display: none; }
    .acct-profile-name { font-size: 13px; }
    .acct-logout-btn { margin-top: 0 !important; }
    #account-overlay .auth-form { gap: 5px; }
    #account-overlay .auth-field-hint { font-size: 7px; }
    #account-overlay .auth-error,
    #account-overlay .auth-success { font-size: 7.5px; min-height: 9px; }
    #account-overlay .auth-switch-mode { font-size: 8px; margin: 6px 0 0; }
    /* Titres d'onglets (Pseudo/Mot de passe/etc) très agrandis par rapport
       au texte À L'INTÉRIEUR des onglets, qui lui est encore resserré —
       demande explicite : l'écart entre les deux paraissait disproportionné
       dans l'autre sens (onglets minuscules, contenu plus gros qu'eux). */
    #account-overlay .acct-tab { padding: 4px 7px; font-size: 10px; }
    .cpp-btn { padding: 5px 9px; font-size: 7px; }
    .cpp-title { font-size: 11px; letter-spacing: 0.8px; }
    .cpp-message { font-size: 9.5px; }
    .cpp-icon { font-size: 22px !important; }
    #account-overlay .auth-tab { padding: 4px; font-size: 7px; }
    .auth-field { gap: 2px; }
    .auth-field span { font-size: 7px; }
    #account-overlay .auth-field input { padding: 5px 7px; font-size: 8.5px; }
    .acct-tab-content { gap: 4px; max-width: 100%; }
    #account-overlay .legal-contact-box { padding: 8px 10px !important; }
    #account-overlay .legal-contact-box p { font-size: 9px !important; line-height: 1.35 !important; }
    .acct-danger-zone { padding: 10px 12px; gap: 6px; }
    .acct-danger-zone-title { font-size: 9px; }
    .stat-section-title { font-size: 7.5px; }
    .stat-grid { gap: 4px; }
    .stat-tile { padding: 5px 6px; gap: 1px; }
    .stat-tile-label { font-size: 6px; }
    .stat-tile-value { font-size: 9px; }
    .settings-toggle-row span { font-size: 8.5px; }
    .settings-toggle-row span small { font-size: 7px; }
    .fb-stars { gap: 3px; margin-bottom: 8px; }
    .fb-star { font-size: 19px; }
    /* Boutons verts (Valider le pseudo / Changer l'email) rapetissés sur
       mobile uniquement (demande explicite), scopé à l'onglet Pseudo. */
    #acct-content-pseudo .cpp-btn.primary { font-size: 6px; padding: 4px 7px; }

    /* ── Inventaire ── */
    .hinv-list { gap: 6px; }
    .hinv-item { padding: 6px 8px; gap: 6px; }
    .hinv-item-icon { font-size: 14px; }
    .hinv-item-name { font-size: 9px; }
    .hinv-item-sub { font-size: 7px; }
    .hinv-item-count { font-size: 11px; min-width: 16px; }
    .hinv-empty { font-size: 8px; }

    /* ── Market Maker Pass — le rail horizontal (colonnes 96px, nœuds 40px)
       est le plus gros risque de débordement de tous les onglets, réduit
       en conséquence. */
    .bp-modal { padding: 20px 16px 0 !important; }
    .bp-modal-title { font-size: 15px; letter-spacing: 1.5px; }
    .bp-progress-header { gap: 10px; padding: 8px 10px; }
    .bp-prog-level { font-size: 11px; }
    .bp-prog-track { height: 6px; }
    .bp-prog-xp { font-size: 8px; }
    .bp-skip-btn { padding: 5px 9px; font-size: 8px; }
    .bp-prem-banner { gap: 8px; padding: 10px 12px; }
    .bp-prem-banner-icon { font-size: 20px; }
    .bp-prem-banner-title { font-size: 11px; letter-spacing: 1px; }
    .bp-prem-banner-sub { font-size: 9px; }
    .bp-prem-buy-btn { padding: 8px 14px; font-size: 10px; }
    .tl-col { flex-basis: 64px; contain-intrinsic-size: 64px 178px; }
    .tl-cell { height: 68px; padding: 4px 2px; }
    .tl-reward-icon { font-size: 18px; }
    .tl-reward-name { font-size: 8px; max-width: 60px; }
    .tl-noderow { height: 42px; }
    .tl-node { width: 30px; height: 30px; font-size: 10px; }
    .bp-lane-label-spacer { height: 42px; }
    /* Manquait ici : .tl-cell (96→68) et .tl-noderow (56→42) rétrécissent
       sur mobile, mais les boîtes PREMIUM/GRATUIT elles-mêmes (.bp-lane-label,
       96px) n'avaient aucun override — total colonne 68+42+68=178px contre
       96+42+96=234px pour les labels, donc GRATUIT se retrouvait 56px plus
       bas que sa ligne de récompenses (bug rapporté, "remonter le carré
       gratuit"). Même valeur que .tl-cell pour rester en phase. */
    .bp-lane-label { height: 68px; }

    /* ── Défis ── (encore rapetissé, demande explicite : trop de perte
       d'espace) — les onglets GRATUITS/PREMIUM et l'en-tête sont scopés à
       #challenges-overlay puisque .ch-tab/.inv-modal-header sont partagés
       avec d'autres modales (Boutique, Comment jouer...). */
    #challenges-overlay .inv-modal-header { padding-bottom: 4px; margin-bottom: 5px; }
    #challenges-overlay .ch-tab-row { gap: 4px; margin-bottom: 6px; padding-bottom: 4px; }
    #challenges-overlay .ch-tab { padding: 4px 8px; font-size: 8.5px; }
    .hch-section-label { margin: 6px 0 3px; padding-bottom: 2px; font-size: 7px; }
    .hch-premium-banner { gap: 6px; padding: 7px 9px; margin-bottom: 6px; }
    .hch-premium-icon { font-size: 16px; }
    .hch-premium-title { font-size: 10px; }
    .hch-premium-sub { font-size: 8px; }
    .hch-list { gap: 4px; }
    .hch-item { padding: 4px 6px; gap: 1px; }
    .hch-item-top { gap: 4px; }
    .hch-item-icon { font-size: 10px; }
    .hch-item-desc { font-size: 8.5px; line-height: 1.2; }
    .hch-claim-btn { margin-top: 4px; padding: 5px 0; font-size: 9px; }
    .hch-reroll-btn { padding: 2px 4px; font-size: 6.5px; }
    .hch-item-xp { font-size: 7.5px; }
    .hch-req-tag { padding: 1px 4px; font-size: 7px; }
    .hch-progress-track { height: 3px; }

    /* ── Offres Pass Premium ── (3 bannières empilées plutôt que côte à
       côte, sinon illisible en dessous de ~700px de large) */
    .bpp-panel { padding: 22px 16px; }
    .bpp-title { font-size: 16px; }
    .bpp-subtitle { font-size: 11px; margin-bottom: 16px; }
    .bpp-cards { flex-direction: column; gap: 12px; }
    .bpp-card { padding: 16px 14px; }
    .bpp-card-icon { font-size: 24px; margin-bottom: 6px; }
    .bpp-card-price { font-size: 20px; margin-bottom: 10px; }
    .bpp-card-features { margin-bottom: 14px; gap: 6px; }
    .bpp-card-features li { font-size: 10.5px; }

    /* ── Table de jeu ──
       Colonne unique au lieu de 3 colonnes côte à côte (196px + centre +
       180px, ~376px à eux seuls — plus large que la plupart des téléphones
       en portrait). Les cartes des bots deviennent des bandes horizontales
       compactes en haut/bas du graphique plutôt que des panneaux verticaux
       pleine hauteur, pour laisser le maximum de place verticale au
       graphique — c'est lui l'intérêt du jeu, pas les portraits des bots. */
    .dota-layout { flex-direction: column; }
    #left-sidebar, #right-panel {
        width: 100%; height: auto; flex-shrink: 0;
        border: none; box-shadow: none;
    }
    #left-sidebar { border-bottom: 1px solid var(--b2); }
    #right-panel { border-top: 1px solid var(--b2); order: 3; } /* sous le graphique, au-dessus de la bande "Vous" */
    .sidebar-breadcrumb, .rp-title { display: none; } /* redondant avec le nom déjà affiché sur la carte */
    .side-player-card {
        flex-direction: row; align-items: center; justify-content: flex-start;
        padding: 8px 12px; gap: 10px;
    }
    .side-portrait { width: 38px; height: 38px; border-radius: 8px; font-size: 18px; flex-shrink: 0; }
    .side-player-name { font-size: 11px; text-align: left; }
    .side-chips-wrap {
        flex-direction: row; align-items: baseline; gap: 6px;
        width: auto; margin-top: 0; margin-left: auto; padding: 5px 10px;
    }
    .side-chips-label { display: none; }
    .side-chips-value { font-size: 14px; }
    .side-player-card .action-bubble { width: auto; margin-left: 8px; }
    .role-badge { font-size: 8px; }

    #center-area { min-height: 220px; } /* garantit un graphique lisible même sur les petits écrans en paysage */
    .center-top-bar { height: 52px; }
    /* "À GAGNER" et le montant côte à côte plutôt qu'empilés (demande
       explicite) — la barre a la largeur pour ça, pas besoin d'étirer en
       hauteur. */
    .center-win-info { flex-direction: row; align-items: baseline; gap: 6px; }
    /* Plus gros et blanc (au lieu du gris terne --t4) pour rester lisible
       sans agrandir la barre elle-même (.center-top-bar garde sa hauteur
       fixe, le texte reste centré verticalement dedans). */
    .cwi-label { font-size: 13px; letter-spacing: 1.5px; margin-bottom: 0; color: var(--t1); }
    .cwi-value { font-size: 26px; }
    .chart-section-header { flex-wrap: wrap; gap: 6px; padding: 6px 10px; }
    .chart-market-name { font-size: 13px; }
    .drawing-toolbar { padding: 0 4px; }

    /* Bande "Vous" : passe de 1 ligne (portrait+nom+jetons+actions+curseur,
       impossible à faire tenir) à 2 lignes — identité en haut, actions de
       mise en pleine largeur en dessous. */
    .user-info-strip { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
    .user-strip-portrait { width: 36px; height: 40px; font-size: 18px; }
    .user-strip-chips { padding-left: 10px; }
    .user-strip-chips-value { font-size: 16px; }
    .user-info-strip #betActions {
        flex-basis: 100%; order: 10; flex-wrap: wrap; gap: 8px;
        margin-top: 4px;
    }
    .user-info-strip .action-key { padding: 11px 14px; font-size: 11px; }
    .user-info-strip .raise-slider-container { min-width: 0; flex-basis: 100%; }
    .user-info-strip .action-bubble { order: 9; flex-basis: 100%; text-align: center; }
}
#table.stake-tier-5 .cwi-value { color: var(--gold-light); text-shadow: 0 0 18px rgba(255,201,77,0.35); }

/* ============================================================
   TÉLÉPHONE EN PAYSAGE — refonte dédiée (le graphique doit dominer)
   ============================================================
   Le bloc mobile partagé ci-dessus empile tout en colonne (pensé pour un
   écran haut et étroit, ex. portrait 375×812) — en paysage forcé
   (#rotate-prompt), la largeur est là mais la hauteur ne l'est plus
   (~375-430px sur un vrai téléphone) : cet empilement ne tient plus, le
   graphique se retrouvait poussé hors champ et invisible, avec des boutons/
   bandes de joueurs bien trop grands pour l'espace réel — bug rapporté.
   Repasse en 3 colonnes CÔTE À CÔTE (comme le desktop, mais compact) pour
   exploiter la largeur au lieu de la hauteur : bot 1 | graphique | bot 2,
   chacun réduit à l'essentiel (petit portrait + nom + jetons), rien retiré
   fonctionnellement — juste rendu plus petit/dense pour laisser le maximum
   de hauteur au graphique, qui est l'intérêt réel du jeu. */
@media (orientation: landscape) and (max-width: 926px) and (max-height: 500px) {
    /* Barre du haut — 44px (valeur desktop) est cher sur un écran total de
       ~375px de haut ; ramenée à 24px (encore plus fine, demande explicite)
       avec #table réajusté en conséquence (les deux valeurs DOIVENT rester
       synchronisées). */
    #top-nav { height: 24px; }
    #table { top: 24px; height: calc(100vh - 24px); height: calc(100dvh - 24px); }

    /* Repasse en ligne (bot 1 | graphique | bot 2) — le bloc mobile partagé
       (max-width:640px, plus haut) force flex-direction:column par défaut
       (pensé pour le portrait) ; sans cette ligne, les 3 zones s'empilaient
       verticalement au lieu de se placer côte à côte. */
    .dota-layout { flex-direction: row; }
    .nav-title { font-size: 9px; }
    .nav-logo-icon { font-size: 11px; }
    .nav-brand { padding: 0 8px; gap: 4px; }
    .nav-right { padding: 0 6px; gap: 5px; }
    .nav-bank-label { font-size: 6.5px; }
    .nav-bank-value { font-size: 10px; }
    #nav-quit-btn { width: 16px; height: 16px; font-size: 9px; border-radius: 4px; }

    /* Adversaires : redemandés sur les CÔTÉS (pas en haut) mais fins — une
       fine colonne de 54px (au lieu des 84px du 1er essai) avec le portrait
       et le nom empilés verticalement, pour laisser le maximum de largeur
       au graphique tout en gardant les joueurs bien à leur place habituelle
       (gauche/droite). Rien n'est retiré : même avatar, même nom, même
       solde, juste réduit. */
    #left-sidebar, #right-panel {
        width: 54px; height: 100%; flex-shrink: 0;
        border: none; box-shadow: none;
        display: flex; align-items: center; justify-content: center;
        padding: 3px 2px;
    }
    #left-sidebar { border-right: 1px solid var(--b2); }
    #right-panel { border-left: 1px solid var(--b2); order: 0; }
    .side-player-card {
        flex-direction: column; align-items: center; justify-content: center;
        padding: 0; gap: 1px; text-align: center;
    }
    .side-portrait { width: 24px; height: 24px; border-radius: 5px; font-size: 12px; }
    .side-player-name {
        font-size: 7px; text-align: center; white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis; max-width: 50px;
    }
    .side-chips-wrap { flex-direction: column; align-items: center; margin: 0; padding: 0; gap: 0; width: auto; }
    .side-chips-label { display: none; }
    .side-chips-value { font-size: 13px; }
    .role-badge { font-size: 6px; padding: 0 3px; }
    .side-player-card .action-bubble { margin-left: 0; font-size: 7px; }

    /* Le graphique récupère le reste — plus de min-height fixe qui volait
       de la place aux deux colonnes latérales. */
    #center-area { min-height: 0; flex: 1; min-width: 0; }
    .center-top-bar { height: 20px; padding: 0 8px; }
    .center-win-info { flex-direction: row; align-items: baseline; gap: 4px; }
    .cwi-label { font-size: 8px; letter-spacing: 1px; margin-bottom: 0; color: var(--t1); }
    .cwi-value { font-size: 12px; }
    .chart-section-header { padding: 2px 8px; gap: 4px; flex-wrap: nowrap; }
    .chart-market-name { font-size: 9px; }
    .drawing-toolbar button, .drawing-toolbar .tool-btn { padding: 2px 4px; }

    /* Carré "Volume Pot" flottant sur le graphique — rapetissé (demande
       explicite), reste lisible. */
    .vol-pot-block { padding: 3px 8px; gap: 5px; top: 4px; left: 4px; }
    .vol-pot-label { font-size: 6.5px; letter-spacing: 1px; }
    .vol-pot-value { font-size: 10px; margin-top: 0; }

    /* Popups Outils/Indicateurs — 680×480px de base (quasi plein écran une
       fois plafonné à 96vw/90vh) cachait complètement le graphique derrière
       (demande explicite : le laisser visible derrière). Réduit aux deux
       tiers, toujours lisible (les polices internes ne sont pas touchées
       ici, seul le cadre rétrécit). */
    .ind-overlay-panel { width: 400px; max-width: 82vw; height: 230px; max-height: 80vh; }
    .ind-ov-header { padding: 8px 10px 6px; }
    .ind-ov-title { font-size: 9px; letter-spacing: 1px; }
    /* Colonne de gauche (liste) fixée à 260px de base — bien trop large
       pour un panneau réduit à 400px, écrasait la colonne de droite
       (aperçu/actions), dont le texte se retrouvait coupé par
       overflow:hidden (bug trouvé en testant : "Supprimer dernier"
       affiché "Supp... der..."). */
    .ind-ov-list { width: 150px; padding: 6px 4px; }
    .ind-ov-item { padding: 6px 8px; font-size: 10px; }
    .ind-ov-section-label { font-size: 8px; }
    .ind-ov-preview { padding: 10px; }
    .tools-ov-action-btn { padding: 6px 8px; font-size: 9px; gap: 5px; }
    .tools-ov-panel-label { font-size: 7px; }
    .ind-ov-preview-hint { font-size: 9px; max-width: 100%; }

    /* Bande "Vous" : une seule ligne compacte, plus le repli 2 lignes pensé
       pour le portrait — la largeur est là en paysage, pas besoin d'empiler. */
    .user-info-strip { flex-wrap: nowrap; padding: 2px 8px; gap: 6px; }
    .user-strip-portrait { width: 22px; height: 24px; font-size: 12px; }
    .user-strip-details { gap: 0; }
    .user-strip-name { font-size: 9px; }
    .user-strip-chips { padding-left: 6px; }
    .user-strip-chips-label { display: none; }
    .user-strip-chips-value { font-size: 15px; }
    .user-info-strip #betActions {
        flex-basis: auto; order: initial; flex-wrap: nowrap; flex: 1;
        margin-top: 0; gap: 6px; min-width: 0; align-items: center;
        /* Boutons de décision (CUT LOSSES/MATCH/LEVERAGE UP) et slider de
           mise groupés à gauche (le slider collé juste après les boutons,
           demande explicite) — le time bank n'étant plus dans ce rang
           (ancré en bas à droite de l'écran, voir plus bas), il n'y a plus
           besoin d'étaler le contenu avec space-between. */
        justify-content: flex-start;
    }
    .user-info-strip .action-key { padding: 3px 5px; font-size: 7px; }
    .user-info-strip .bet-buttons { gap: 4px; }
    /* Rétréci (60px→30px) et rendu compressible (flex-shrink) : avec les
       boutons time bank réellement peuplés ("+10s (2)"), les 3 groupes
       (boutons/slider/time bank) dépassaient la largeur de #betActions à
       667px et le rang time bank débordait par-dessus les jetons — bug
       trouvé en testant avec du contenu réel plutôt que des boutons vides
       (les 3 tailles 10s/15s/30s, voir TIME_BANK_SIZES dans
       table-client.js, s'affichent toujours ensemble). */
    /* flex-grow:1 (au lieu d'une taille fixe compacte) : remplit tout
       l'espace restant après les boutons, jusqu'au bord des jetons —
       collé dessus sans le chevaucher (demande explicite), et le curseur
       lui-même redevient assez grand pour rester utilisable. */
    .user-info-strip .raise-slider-container { min-width: 60px; flex: 1 1 auto; padding: 0 8px; gap: 6px; }
    .user-info-strip .raise-slider-container input[type=range] { flex: 1 1 auto; width: auto; }
    .user-info-strip .slider-val { min-width: 34px; padding: 3px 6px; font-size: 10px; }
    /* order:1 explicite (au lieu d'hériter de la base) : le bloc mobile
       PARTAGÉ (@media max-width:640px, OR ce bloc paysage — sélecteur en
       liste, les deux clauses matchent bien un téléphone en paysage) pose
       order:9 sur cette règle (voir plus haut) pour l'empiler pleine
       largeur en portrait ; sans le réaffirmer ici, ce order:9 gagnait la
       cascade (posé après la base mais avant ce bloc) et repassait la
       bulle de décision APRÈS les jetons en paysage (bug rapporté). */
    .user-info-strip .action-bubble { flex-basis: auto; font-size: 9px; order: 1; }
    #user-position-badge { font-size: 7px; padding: 1px 5px; }
    .expr-badge-wrap, .avatar-corner-badge { transform: scale(0.75); }
    /* Time bank : sur desktop il vit maintenant dans le flux (sibling au
       niveau de .user-info-strip, entre la bulle de décision et les
       jetons — demande explicite) mais pas assez de place pour ça en
       paysage mobile : il recommence à se battre pour la largeur avec les
       boutons de décision/le slider (ligne "Vous") ou BULL/BEAR (choix de
       position) et à chevaucher les jetons/déborder de l'écran (bug
       persistant rapporté). Sorti complètement du flux et ancré en bas à
       droite de l'écran, sous le joueur adverse de droite (coin, pas collé
       dessous) — un seul encart (#timeBankButtons) désormais, déjà visible
       aux deux moments (choix de position et mise) puisqu'il vit hors de
       #betActions ET hors de #posActions. */
    #timeBankButtons {
        position: fixed; right: 4px; bottom: 6px; z-index: 40;
        flex-direction: column; align-items: flex-end; gap: 3px;
        padding-left: 0; margin-left: 0; border-left: none; flex-basis: auto;
    }
    /* Hauteur augmentée, largeur inchangée (demande explicite : boutons
       trop petits/difficiles à toucher sur mobile) — seul le padding
       vertical grandit, le padding horizontal (donc la largeur) reste tel
       quel. */
    #timeBankButtons .time-bank-btn { padding: 9px 6px; font-size: 8px; }

    /* Choix de position (avant la 1re mise) : boutons BULL/BEAR raisonnables
       plutôt que des blocs pleine hauteur qui à eux seuls dépassaient
       l'écran. */
    #posActions.pos-row { padding: 4px 8px; gap: 6px; }
    #posActions .btn-long, #posActions .btn-short { padding: 8px 10px; font-size: 11px; }

    /* Bulle d'action des adversaires (ex. "CUT LOSSES"/"LEVERAGE UP" au-
       dessus de leur avatar) — la règle de base (.action-bubble, plus haut)
       impose 13px + white-space:nowrap : dans une colonne de 54px, le texte
       débordait largement, coupé par le bord de l'écran ET par le
       graphique — bug rapporté. Autorisé à passer sur 2 lignes plutôt que
       tronqué sur 1 seule. */
    .side-player-card .action-bubble {
        font-size: 6px; white-space: normal; word-break: break-word;
        line-height: 1.15; padding: 2px 3px; margin: 0;
    }
    .side-player-card .action-bubble.show { max-height: 24px; padding: 2px 3px; margin: 2px 0; }

    /* Bannière news pleine largeur — n'a plus la place en paysage mobile
       (demande explicite : la loger dans la barre du haut, entre le nom du
       jeu et la banque). Remplacée par #news-mini-slot ci-dessous, qui vit
       déjà à cet endroit dans le DOM (index.html) et que table-client.js
       peuple/affiche désormais aux mêmes moments que la bannière (voir
       onNews/onShowdown). */
    #news-banner, .news-reopen-tab { display: none !important; }

    /* Version compacte dans la barre du haut — rapetissée pour tenir dans
       les 24px de #top-nav (voir plus haut) tout en restant lisible. */
    #news-mini-slot { padding: 0 6px; gap: 5px; border-left: none; }
    .news-mini-dot { width: 4px; height: 4px; }
    .news-mini-tag { font-size: 6px; padding: 1px 4px; letter-spacing: 1px; }
    .news-mini-text { font-size: 8px; }

    /* Écran de résultat final — 460px de large, sans max-height : débordait
       largement d'un écran de ~375px de haut, impossible à voir en entier
       (bug rapporté). Rétréci et rendu scrollable au besoin. */
    #win-card {
        width: 92vw; max-width: 340px; max-height: 88vh; overflow-y: auto;
        padding: 14px 16px;
    }
    .win-header h1 { font-size: 12px; letter-spacing: 2px; margin-bottom: 3px; }
    #market-outcome-badge { font-size: 9px; margin-bottom: 8px; }
    .result-line { padding: 6px 8px; margin-bottom: 4px; }
    .pos-icon-mini { font-size: 7px; padding: 1px 5px; min-width: 32px; }
    .player-name-text { font-size: 10px; }
    .result-status-text { font-size: 8px; }
    .pot-summary { margin-top: 10px; padding-top: 8px; }
    .pot-label { font-size: 7px; margin-bottom: 2px; }
    #final-pot-display { font-size: 16px; }
    .btn-continue { padding: 8px 16px; font-size: 10px; margin-top: 10px; }
}

/* ── ROTATE PROMPT — mode paysage obligatoire pour TOUT le jeu sur mobile ──
   Plus seulement l'écran de jeu (demande explicite : "au moment où
   quelqu'un ouvre marginshowdown sur mobile, ça doit être en paysage") — le
   lobby, avant même la moindre connexion, doit aussi forcer la rotation.
   Masqué par défaut, révélé dès que l'appareil est en portrait ET assez
   petit pour être un mobile/tablette, peu importe l'écran actif
   (#home-screen ou #table). */
#rotate-prompt {
    display: none;
    position: fixed; inset: 0; z-index: 999999;
    background: var(--bg-0);
    flex-direction: column; align-items: center; justify-content: center;
    gap: 18px; text-align: center; padding: 32px;
}
.rotate-prompt-icon {
    font-size: 52px;
    animation: rotatePromptSpin 1.8s ease-in-out infinite;
}
@keyframes rotatePromptSpin {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(90deg); }
}
.rotate-prompt-text {
    color: var(--t2); font-size: 15px; font-weight: 600; max-width: 320px;
}
@media (orientation: portrait) and (max-width: 900px) {
    #rotate-prompt { display: flex; }
}

/* ── Tutoriel guidé de 1re connexion (tutorial-client.js) ──────────────────
   Coach-marks sur les vrais boutons du jeu plutôt qu'un modal séparé —
   demande explicite. Un anneau (.tutorial-ring) suit le rectangle exact de
   l'élément ciblé (repositionné en JS au scroll/resize), une bulle
   (.tutorial-tooltip) explique l'étape juste à côté, sans jamais couvrir la
   cible ni bloquer le clic sur le vrai bouton (pointer-events: none sur
   l'anneau ; seule la bulle, avec son bouton "Passer", reste cliquable). Pas
   de fond assombri plein écran : contrairement aux popups (showCustomPopup),
   ces étapes accompagnent une vraie partie en cours (chrono de décision actif
   sous les étapes position/mise) et ne doivent jamais donner l'impression
   de mettre le jeu en pause. z-index sous #rotate-prompt (999999, alerte
   critique) mais au-dessus de toute popup existante (max 210000, voir
   showCustomPopup) : ne doit jamais être caché derrière quoi que ce soit
   pendant qu'il est actif. */
.tutorial-ring {
    position: fixed; z-index: 220000; pointer-events: none;
    border: 3px solid var(--gold-light, #f0d060);
    border-radius: 12px;
    box-shadow: 0 0 0 4px rgba(240, 208, 96, 0.25), 0 0 24px rgba(240, 208, 96, 0.45);
    transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
    animation: tutorialRingPulse 1.6s ease-in-out infinite;
}
@keyframes tutorialRingPulse {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; }
}
.tutorial-tooltip {
    position: fixed; z-index: 220001;
    max-width: 280px;
    background: var(--bg-1, #14202c); border: 1px solid var(--gold-light, #f0d060);
    border-radius: 10px; padding: 14px 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    transition: top 0.25s ease, left 0.25s ease;
}
.tutorial-tooltip-title {
    font-weight: 800; font-size: 14px; color: var(--gold-light, #f0d060); margin-bottom: 6px;
}
.tutorial-tooltip-desc {
    font-size: 13px; color: var(--t2); line-height: 1.4; margin-bottom: 10px;
}
.tutorial-tooltip-skip {
    display: block; margin-left: auto; background: none; border: none;
    color: var(--t3); font-size: 11px; text-decoration: underline; cursor: pointer; padding: 0;
}
.tutorial-tooltip-skip:hover { color: var(--t2); }