:root{
  --night:#080d1a;--night-2:#0e1730;--card:#121d38;--card-2:#1a2748;
  /* --muted éclairci pour WCAG AA : #9fb0d4 donne ≥4.5:1 sur tous les fonds
     courants (night 8.90, card 7.66, night-2 8.14, card-2 6.75) tout en restant
     « secondaire » (jamais blanc pur). Ancien #7e90b8 frôlait l'échec sur card-2. */
  --lime:#c8f135;--lime-d:#9fc41a;--ink:#080d1a;--white:#f4f8ff;--muted:#9fb0d4;
  --pw-green:#2ee06a;--pw-yellow:#ffd324;--pw-orange:#ff8c2e;--pw-red:#ff3b4e;
  --danger:#ff3b4e;--sky-blue:#5fb6ff;--gold:#ffc83d;
  /* Lot B — hauteurs intrinsèques du chrome global (hors safe-area, ajoutée au
     point d'usage). Servent à réserver le padding du contenu sous/au-dessus des
     barres pour que rien ne soit masqué. */
  --footer-h:60px;--header-h:45px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:'Archivo',system-ui,sans-serif;background:var(--night);color:var(--white);overflow:hidden;user-select:none;height:100dvh}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transform:translateY(10px) scale(.992);pointer-events:none;transition:opacity .32s ease, transform .32s cubic-bezier(.2,.8,.3,1);overflow:hidden}
.screen.active{opacity:1;transform:none;pointer-events:auto}
.btn{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.1em;border:none;cursor:pointer;border-radius:16px;transition:transform .1s, filter .15s, box-shadow .15s;color:var(--ink)}
.btn:active{transform:scale(.95)}
.btn-lime{background:linear-gradient(180deg,#dcff5e,var(--lime) 45%,var(--lime-d));box-shadow:0 5px 0 #6f8a0e, 0 14px 30px rgba(200,241,53,.25)}
.btn-lime:active{box-shadow:0 2px 0 #6f8a0e;transform:translateY(3px) scale(.98)}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--muted);border:1.5px solid rgba(255,255,255,.14);box-shadow:none}
.btn-ghost:hover{color:var(--white);border-color:rgba(255,255,255,.35)}

/* ===== FOCUS VISIBLE (WCAG 2.4.7) =====
   Indicateur de focus clavier cohérent (lime du design system) sur TOUS les
   éléments focusables (boutons, liens, inputs, et conteneurs à tabindex tels
   que .tp-cell / .lb-card). :focus-visible ne s'affiche qu'au clavier — le clic
   souris/tactile ne déclenche pas l'anneau (pas de régression visuelle). */
:focus-visible{outline:3px solid var(--lime);outline-offset:2px;border-radius:6px}
/* Les inputs auth gardent leur bordure lime ET reçoivent l'anneau (cohérence) ;
   on ne neutralise jamais l'outline au clavier. */
.auth-field input:focus-visible{outline:3px solid var(--lime);outline-offset:2px}

@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}

/* ===== SPLASH ===== */
#splash{background:radial-gradient(ellipse 100% 60% at 50% 40%, #1a2f5c 0%, var(--night) 70%);gap:0;z-index:50}
#splash.active{z-index:50}
.sp-ball{width:88px;height:88px;animation:spBounce 1s ease-in-out infinite;filter:drop-shadow(0 16px 16px rgba(0,0,0,.5))}
@keyframes spBounce{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-26px) rotate(40deg)}}
.sp-title{font-family:'Archivo Black';font-size:clamp(34px,8vw,56px);text-transform:uppercase;margin-top:24px;line-height:.92;text-align:center;background:linear-gradient(180deg,#fff,#9fb8e8);-webkit-background-clip:text;background-clip:text;color:transparent}
.sp-title em{font-style:normal;-webkit-text-fill-color:var(--lime)}
.sp-bar{width:min(220px,60vw);height:5px;border-radius:3px;background:rgba(255,255,255,.1);margin-top:30px;overflow:hidden}
.sp-fill{height:100%;width:0;background:var(--lime);border-radius:3px;transition:width .1s linear}
.sp-tip{color:var(--muted);font-size:12px;font-weight:600;margin-top:14px;letter-spacing:.04em;min-height:16px}

/* ===== ONBOARDING ===== */
/* Écran-flux focalisé (role=dialog, pas de chrome global). overflow-y auto : le
   panneau « glossaire » (4e) est plus haut que les autres et doit rester lisible
   sur petits écrans. safe-area : padding latéral/vertical pour les encoches. */
#onboard{background:radial-gradient(ellipse 120% 80% at 50% 0%, var(--night-2) 0%, rgba(8,13,26,.97) 70%);z-index:40;overflow-y:auto;
  padding:max(28px,calc(24px + env(safe-area-inset-top))) max(20px,env(safe-area-inset-right)) max(28px,calc(24px + env(safe-area-inset-bottom))) max(20px,env(safe-area-inset-left))}
.ob-card{width:min(390px,92vw);background:linear-gradient(180deg,var(--card),var(--card-2));border:1.5px solid rgba(255,255,255,.1);border-radius:26px;padding:32px 26px 26px;box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05)}
/* Icône illustrée : disque teinté lime (cohérent avatars/jeu), halo doux, glyphe
   plus grand. Plus présente que la version « tuile » d'origine. */
.ob-ico{width:88px;height:88px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
  background:radial-gradient(circle at 50% 38%, rgba(200,241,53,.26), rgba(200,241,53,.08) 70%);
  border:1.5px solid rgba(200,241,53,.35);box-shadow:0 8px 24px rgba(200,241,53,.14),inset 0 0 18px rgba(200,241,53,.10)}
.ob-ico svg{width:46px;height:46px;stroke:var(--lime);filter:drop-shadow(0 2px 6px rgba(200,241,53,.3))}
.ob-step{text-align:center;color:var(--lime);font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;margin-bottom:10px}
/* Accroche de bienvenue (panneau 1) : phrase d'intro douce, sous l'eyebrow. */
.ob-lead{text-align:center;color:var(--white);font-size:14.5px;font-weight:700;line-height:1.45;margin:0 auto 12px;max-width:30ch;opacity:.92}
.ob-title{text-align:center;font-family:'Archivo Black';font-size:24px;line-height:1.1;margin-bottom:14px}
.ob-text{text-align:center;color:var(--muted);font-size:14.5px;line-height:1.7;font-weight:500}
.ob-text b{color:var(--white);font-weight:700}
/* Glossaire (panneau 4) : liste de définitions alignée à gauche dans un encart
   léger ; le terme en lime/gras et la définition en gris. Compacte mais aérée. */
.ob-gloss{text-align:start;margin:4px 0 0;font-size:13.5px;line-height:1.55;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:14px 16px}
.ob-gloss dt{color:var(--lime);font-weight:800;letter-spacing:.02em;margin-top:12px}
.ob-gloss dt:first-child{margin-top:0}
.ob-gloss dd{margin:3px 0 0;color:var(--muted);font-weight:500}
/* Progression : pastilles ; l'active s'allonge en barre lime (plus lisible). */
.ob-dots{display:flex;gap:8px;justify-content:center;align-items:center;margin:24px 0}
.ob-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18);transition:all .3s cubic-bezier(.2,.8,.3,1)}
.ob-dot.on{background:var(--lime);width:26px;height:9px;border-radius:5px;box-shadow:0 0 10px rgba(200,241,53,.45)}
/* CTA : cibles ≥44px (min-height), cohérentes design system (.btn-lime/.btn-ghost). */
.ob-actions{display:flex;gap:10px}
.ob-actions .btn{flex:1;font-size:14px;padding:15px 10px;min-height:48px;display:flex;align-items:center;justify-content:center}
/* « Passer » : discret mais accessible (cible ≥44px via le padding). */
.ob-skip{position:absolute;top:calc(14px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));color:var(--muted);font-size:12px;font-weight:700;background:none;border:none;cursor:pointer;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;min-height:44px;border-radius:12px;transition:color .15s}
.ob-skip:hover{color:var(--white)}
/* Transition d'entrée du contenu de carte (rejouée à chaque renderOb via .ob-in :
   cf. screens.js). Fondu + léger glissement vertical. */
@keyframes obIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ob-card.ob-in{animation:obIn .34s cubic-bezier(.2,.8,.3,1) both}

/* ===== MENU — REFONTE ===== */
#menu{
  /* Image de fond — placer assets/menu-bg.png (voir prompt de génération) */
  background-image: url('../assets/menu-bg.png');
  background-size: cover;
  background-position: center top;
  gap:0;
  overflow-y:auto;
  justify-content:flex-start;
}

/* Overlay dégradé sur l'image pour lisibilité du texte */
.menu-img-overlay{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(180deg,
      rgba(8,13,26,.72) 0%,
      rgba(8,13,26,.28) 35%,
      rgba(8,13,26,.18) 55%,
      rgba(8,13,26,.88) 78%,
      rgba(8,13,26,.98) 100%
    );
}

/* Atmosphère : faisceaux latéraux */
.menu-atm{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.menu-atm::before,.menu-atm::after{
  content:"";position:absolute;top:-15%;
  width:30vw;height:140%;
  background:linear-gradient(180deg,rgba(200,241,53,.06),transparent 68%);
  filter:blur(7px);
}
.menu-atm::before{left:2%;transform:rotate(13deg)}
.menu-atm::after {right:2%;transform:rotate(-13deg)}

/* Hero */
.menu-hero{
  display:flex;flex-direction:column;align-items:center;
  gap:8px;z-index:2;
  /* Le décalage sous le header est porté par #menu (has-app-header) ; ici juste un
     petit écart sous la barre. */
  padding-top:14px;
  padding-bottom:4px;
}
.menu-h1{
  font-family:'Archivo Black';
  font-size:clamp(56px,13vw,104px);
  line-height:.84;text-align:center;text-transform:uppercase;
  background:linear-gradient(180deg,#fff 15%,#8aaad8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.02em;
  text-shadow:0 4px 40px rgba(0,0,0,.6);
}
.menu-h1 em{font-style:normal;display:block;-webkit-text-fill-color:var(--lime)}
.menu-tagline{
  color:rgba(255,255,255,.55);font-size:12px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
}

/* Actions */
.menu-actions{
  display:flex;flex-direction:column;align-items:center;
  gap:11px;z-index:2;
  width:min(310px,88vw);
  margin-top:auto;
  padding-top:16px;
  padding-bottom:8px;
}

/* Bouton Jouer */
.btn-play{
  width:100%;font-size:19px;padding:20px 20px;
  display:flex;align-items:center;justify-content:center;gap:12px;
  letter-spacing:.14em;border-radius:20px;
  box-shadow:0 6px 0 #6f8a0e, 0 16px 40px rgba(200,241,53,.35);
}
.btn-play .ic{width:20px;height:20px;flex:none}
.btn-play:active{box-shadow:0 2px 0 #6f8a0e;transform:translateY(4px) scale(.98)}

/* Difficulté */
.diff-row{
  width:100%;display:flex;gap:7px;
  background:rgba(0,0,0,.35);padding:5px;
  border-radius:14px;border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(8px);
}
.diff-opt{
  flex:1;text-align:center;font-size:11px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;
  padding:9px 6px;border-radius:10px;cursor:pointer;
  color:var(--muted);transition:all .15s;
  /* Reset du chrome natif <button> (élément passé en button pour l'a11y clavier). */
  background:none;border:none;font-family:'Archivo',sans-serif;
  /* Cible tactile ≥44px (a11y) sans grossir le texte : zone étendue + centrage. */
  min-height:44px;display:flex;align-items:center;justify-content:center;
}
.diff-opt.on{background:var(--lime);color:var(--ink)}

/* Séparateur */
.menu-sep{
  width:100%;display:flex;align-items:center;gap:10px;
  color:rgba(255,255,255,.55);font-size:10px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;
}
.menu-sep::before,.menu-sep::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.12)}

/* Cartes Tournoi */
.menu-tourn{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.btn-tourn{
  background:rgba(10,16,36,.75);
  backdrop-filter:blur(10px);
  color:var(--white);border:1.5px solid rgba(255,255,255,.14);
  box-shadow:0 4px 0 rgba(0,0,0,.5), 0 10px 22px rgba(0,0,0,.4);
  border-radius:18px;padding:16px 10px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  width:100%;
}
.btn-tourn:active{box-shadow:0 1px 0 rgba(0,0,0,.5);transform:translateY(3px) scale(.97)}
.btn-tourn .ic{width:22px;height:22px;flex:none;stroke:var(--sky-blue)}
.btn-tourn span{font-family:'Archivo Black';font-size:13px;text-transform:uppercase;letter-spacing:.08em}

/* Bouton global mode */
.btn-mode{cursor:pointer}

/* =====================================================================
   CHROME GLOBAL (Lot B) — footer d'onglets (#app-footer) + header
   contextuel (#app-header). Overlays fixes posés au-dessus du contenu des
   écrans (z 100, < #screen-transition z200) ; visibilité pilotée par
   AppNav.applyChrome via l'attribut hidden + classes body has-app-*.
   Reprend le langage visuel de l'ancienne .menu-nav (icône + label sous,
   actif en lime), carte sombre + léger blur, cibles ≥44px.
   ===================================================================== */

/* ---- FOOTER (onglets bas) ---- */
.app-footer{
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  display:flex;justify-content:center;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  padding-left:calc(8px + env(safe-area-inset-left));
  padding-right:calc(8px + env(safe-area-inset-right));
  background:rgba(10,16,36,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1.5px solid rgba(255,255,255,.1);
  box-shadow:0 -8px 24px rgba(0,0,0,.4);
}
.app-footer[hidden]{display:none}
.app-footer:not([hidden]){animation:chrome-up .2s ease both}
.app-tab{
  flex:1;max-width:120px;min-height:48px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:none;border:none;cursor:pointer;
  color:rgba(255,255,255,.6);
  transition:color .15s;
  padding:6px 4px;border-radius:12px;
  font-family:'Archivo',sans-serif;
}
.app-tab:hover{color:var(--white)}
.app-tab svg{width:22px;height:22px}
.app-tab span{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.app-tab.on{color:var(--lime)}
/* Pastille de nudge (Lot R1) : petit point rouge en haut-droite de l'onglet
   (roue dispo / quête réclamable). Propriétés logiques → RTL-safe (passe à gauche). */
.app-tab{position:relative}
.app-tab.has-dot::after{
  content:"";position:absolute;top:6px;inset-inline-end:calc(50% - 16px);
  width:8px;height:8px;border-radius:50%;
  background:var(--danger);box-shadow:0 0 0 2px rgba(10,16,36,.92);
}

/* ---- HEADER (barre haute contextuelle) ---- */
.app-header{
  position:fixed;left:0;right:0;top:0;z-index:100;
  /* Grille 3 zones : retour (44px) | titre (1fr, toujours centré) | actions (auto).
     Les colonnes suivent le sens d'écriture → mirroring RTL automatique. */
  display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:8px;
  height:calc(var(--header-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) calc(10px + env(safe-area-inset-right)) 0 calc(10px + env(safe-area-inset-left));
  background:rgba(10,16,36,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1.5px solid rgba(255,255,255,.1);
}
.app-header[hidden]{display:none}
.app-header:not([hidden]){animation:chrome-down .2s ease both}
/* Claymorphisme : boutons « pâte » bombés — surface douce en dégradé + ombre
   portée flottante + double ombre INTERNE (highlight haut-gauche, ombre bas-droite)
   pour l'effet gonflé. État pressé : on « enfonce » (ombres internes inversées). */
.app-header-back{
  flex:none;width:40px;height:40px;border-radius:13px;border:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.02));
  box-shadow:0 5px 11px rgba(0,0,0,.5),inset 2px 2px 3px rgba(255,255,255,.18),inset -3px -4px 6px rgba(0,0,0,.5);
  color:var(--white);transition:transform .12s,box-shadow .12s;
}
.app-header-back:active{transform:scale(.94);box-shadow:0 2px 5px rgba(0,0,0,.45),inset 3px 3px 6px rgba(0,0,0,.55),inset -2px -2px 4px rgba(255,255,255,.10)}
.app-header-back svg{width:20px;height:20px}
/* Boutons notifications + réglages (claymorphisme) — même « pâte » que retour/identité. */
.hdr-notif,.hdr-settings{
  flex:none;width:40px;height:40px;border-radius:13px;border:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.02));
  box-shadow:0 5px 11px rgba(0,0,0,.5),inset 2px 2px 3px rgba(255,255,255,.18),inset -3px -4px 6px rgba(0,0,0,.5);
  color:var(--white);transition:transform .12s,box-shadow .12s;
}
.hdr-notif:active,.hdr-settings:active{transform:scale(.94);box-shadow:0 2px 5px rgba(0,0,0,.45),inset 3px 3px 6px rgba(0,0,0,.55),inset -2px -2px 4px rgba(255,255,255,.10)}
.hdr-notif svg,.hdr-settings svg{width:21px;height:21px}
/* [hidden] doit l'emporter sur display:flex (le ⚙ n'apparaît que sur le Profil). */
.hdr-settings[hidden]{display:none}
.app-header-title{
  min-width:0;max-width:100%;text-align:center;
  /* Réduit d'un cran (16px → 0.95rem ≈ 15px) pour loger les titres longs entre
     le chip coins et la pilule d'identité sans rogner. Gras + ellipsis conservés. */
  font-family:'Archivo Black';font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Colonne centrale (Lot H) : empile titre + sous-titre, centrée verticalement.
   min-width:0 propage la troncature (ellipsis) aux deux lignes. Sens-agnostique
   (RTL hérite du dir). Les deux lignes tiennent dans --header-h (45px). */
.app-header-center{min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px}
.app-header-sub{max-width:100%;font-size:10px;font-weight:700;letter-spacing:.02em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1}
.app-header-sub[hidden]{display:none}
/* Identité = IMAGE DE COMPTE seule (pseudo retiré) : disque claymorphisme 44px
   encadrant l'avatar. L'état invité reste une pilule « Connexion ». */
.app-header-id{
  flex:none;width:40px;height:40px;border-radius:50%;border:none;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.02));
  box-shadow:0 5px 11px rgba(0,0,0,.5),inset 2px 2px 3px rgba(255,255,255,.18),inset -3px -4px 6px rgba(0,0,0,.5);
  color:var(--white);font-family:'Archivo',sans-serif;transition:transform .12s,box-shadow .12s;
}
.app-header-id:active{transform:scale(.94);box-shadow:0 2px 5px rgba(0,0,0,.45),inset 3px 3px 6px rgba(0,0,0,.55),inset -2px -2px 4px rgba(255,255,255,.10)}
.app-header-id.is-guest{width:auto;border-radius:999px;padding:0 16px;min-width:44px}
.app-header-id .avatar{width:32px;height:32px;box-shadow:inset 0 -2px 5px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.4)}
.app-header-login{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--lime)}
/* Zone droite unique (3e colonne de la grille) : regroupe coins + identité pour
   que la grille reste à 3 colonnes que le chip soit affiché ou non. */
.app-header-actions{display:flex;align-items:center;gap:8px;min-width:0}
[dir="rtl"] .app-header-back svg{transform:scaleX(-1)}
[dir="rtl"] .app-header-id{padding:4px 4px 4px 12px}

/* Entrées douces (neutralisées par la règle reduced-motion globale). */
@keyframes chrome-up{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
@keyframes chrome-down{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}

/* ---- Réservation d'espace pour le contenu (rien sous/au-dessus des barres) ----
   Footer : on pousse le bas des écrans concernés (chacun garde son padding
   propre, on ajoute la hauteur du footer). Header : on décale le haut des
   conteneurs scrollables des pages secondaires (leur .ol-head est masqué). */
body.has-app-footer #menu{padding-bottom:calc(var(--footer-h) + env(safe-area-inset-bottom))}
/* L'accueil affiche désormais le header global → on décale son contenu sous la barre. */
body.has-app-header #menu{padding-top:calc(var(--header-h) + env(safe-area-inset-top))}
body.has-app-footer #team-select{padding-bottom:calc(20px + var(--footer-h) + env(safe-area-inset-bottom))}
/* padding-top gardé sur has-app-header (sémantique : c'est le header qui décale le haut). */
body.has-app-header #team-select{padding-top:calc(20px + var(--header-h) + env(safe-area-inset-top))}
body.has-app-footer #match-end{padding-bottom:calc(var(--footer-h) + env(safe-area-inset-bottom))}
body.has-app-footer #stats{padding-bottom:calc(var(--footer-h) + env(safe-area-inset-bottom))}
/* Pages secondaires (profil/classement/réglages) : le footer remplace .ol-foot
   (masqué par AppNav) → on réserve sa hauteur en bas du scroll ; le header
   remplace .ol-head → on décale le haut de .ol-wrap. */
body.has-app-footer .ol-scroll{padding-bottom:calc(14px + var(--footer-h) + env(safe-area-inset-bottom))}
body.has-app-header .ol-wrap{padding-top:calc(var(--header-h) + env(safe-area-inset-top))}
/* Le classement a un bandeau « mon rang » (#lb-me) entre head et scroll : il
   profite du padding-top de .ol-wrap (placé au-dessus du scroll). */

.menu-help{
  position:absolute;left:calc(16px + env(safe-area-inset-left));top:calc(14px + env(safe-area-inset-top));
  z-index:3;width:44px;height:44px;border-radius:12px;
  background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);
}
.menu-help svg{width:18px;height:18px}

/* ===== BANDE JOUEUR DU MENU (Lot R1) =====
   En haut du menu (qui n'a pas de header) : avatar + niveau + ligue + 🪙 solde,
   + ligne nudge optionnelle. Mobile-first, cible ≥44px, propriétés logiques (RTL).
   z-index:3 pour passer au-dessus de l'overlay/atmosphère ; inline-start dégagé
   pour ne pas chevaucher le bouton d'aide (44px, coin haut-début). */
.menu-player{
  position:relative;z-index:3;align-self:stretch;
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  margin:0 12px;
  padding:calc(12px + env(safe-area-inset-top)) 14px 12px;
  padding-inline-start:calc(70px + env(safe-area-inset-left));
}
.menu-player[hidden]{display:none}
.menu-player .avatar{width:42px;height:42px;flex:none;box-shadow:inset 0 -2px 5px rgba(0,0,0,.3),0 2px 7px rgba(0,0,0,.45)}
/* Bande avatar+pseudo cliquable → Profil (nav Option A). Reset bouton + reprend la
   rangée flex (avatar fixe + identité extensible). */
.mp-who{flex:1;min-width:0;display:flex;align-items:center;gap:11px;background:none;border:none;padding:0;margin:0;cursor:pointer;text-align:start;font:inherit;color:inherit}
.mp-who:active{transform:scale(.99)}
.mp-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mp-name{font-family:'Archivo Black';font-size:15px;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.mp-sub{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mp-lvl{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
/* .lg-badge / [data-tier] : style partagé avec le profil (défini plus bas, Lot E1d). */
.mp-lg{font-size:9px;padding:3px 8px}
/* Pastille solde tappable (or) — réutilise le langage du chip header. */
.mp-coins{
  flex:none;min-height:38px;
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  background:rgba(255,200,61,.14);border:1.5px solid rgba(255,200,61,.42);
  border-radius:999px;padding:6px 13px;
  color:var(--gold);font-size:14px;font-family:'Archivo',sans-serif;
}
.mp-coins:hover{border-color:rgba(255,200,61,.75)}
.mp-coins b{font-family:'Archivo Black';font-size:14px;letter-spacing:.02em;color:var(--white)}
/* Ligne nudge (CTA discret) : occupe toute la largeur sous la bande. */
.menu-nudge{
  flex-basis:100%;min-height:34px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:rgba(200,241,53,.12);border:1.5px solid rgba(200,241,53,.36);
  border-radius:12px;padding:7px 14px;cursor:pointer;
  color:var(--lime);font-size:12px;font-weight:800;letter-spacing:.02em;
  font-family:'Archivo',sans-serif;
}
.menu-nudge[hidden]{display:none}
.menu-nudge:hover{border-color:rgba(200,241,53,.6);background:rgba(200,241,53,.18)}

/* ===== TEAM SELECT ===== */
#team-select{background:radial-gradient(ellipse 100% 50% at 50% -10%, #21407a 0%, transparent 60%), var(--night);padding:20px}
.ts-title{font-family:'Archivo Black';font-size:clamp(22px,5vw,30px);text-transform:uppercase;margin-bottom:4px}
.ts-sub{color:var(--muted);font-size:13px;font-weight:600;margin-bottom:16px}
/* Difficulté (setup Entraînement) : libellé + radiogroup .diff-row (déplacé du
   menu). Largeur alignée sur la grille d'avatars pour une mise en page cohérente. */
.ts-diff{width:min(560px,92vw);margin-bottom:18px}
.ts-diff-label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;text-align:start}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;width:min(560px,92vw)}
.team-cell{background:var(--card);border:2px solid rgba(255,255,255,.08);border-radius:16px;padding:12px 4px 10px;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;transition:transform .12s,border-color .15s}
.team-cell:hover{transform:translateY(-3px);border-color:rgba(200,241,53,.5)}
.team-cell:active{transform:scale(.94)}
.badge{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Archivo Black';font-size:14px;position:relative;box-shadow:inset 0 -4px 8px rgba(0,0,0,.3), 0 4px 10px rgba(0,0,0,.4)}
.badge::after{content:"";position:absolute;inset:3px;border-radius:50%;border:2px solid rgba(255,255,255,.35)}
.team-cell span{font-size:10px;font-weight:700;color:var(--muted);text-align:center;line-height:1.2;text-transform:uppercase;letter-spacing:.04em}
/* Avatar sélectionné dans le grid solo (#team-grid) : anneau lime, comme .tp-cell.on. */
.team-cell.on{border-color:var(--lime);box-shadow:0 0 0 2px var(--lime),0 4px 14px rgba(200,241,53,.22)}
.team-cell.on span{color:var(--white)}
.ts-back{margin-top:20px;font-size:12px;padding:12px 26px}

/* ===== AVATARS — identité visible du joueur (remplace le badge d'équipe) =====
   Le conteneur rond reprend l'allure des .badge ; le SVG interne remplit la
   pastille. Taille par défaut alignée sur .badge (46px) puis surchargée par
   contexte (HUD, profil, lobby, bracket, classement, podium) — l'avatar y
   prend EXACTEMENT la place qu'occupait le badge d'équipe. */
.avatar{width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none;display:block;position:relative;box-shadow:inset 0 -4px 8px rgba(0,0,0,.3), 0 4px 10px rgba(0,0,0,.4)}
.avatar .av-svg,.hd-badge .av-svg,.mini-badge .av-svg{width:100%;height:100%;display:block}
/* Avatar IMAGE (cosmétique équipé) : remplit la pastille ronde comme le SVG.
   Posé par setAvatarEl quand l'id n'est pas un built-in (avatar uploadé). */
.av-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
/* Aperçu d'inscription (#reg-avatar-preview réutilise .tp-preview). */
.tp-preview .avatar{width:38px;height:38px}
/* Cellule de picker (inscription + réglages) : avatar centré, sans libellé. */
.tp-cell .avatar{width:50px;height:50px}
/* Profil : avatar du héro dimensionné via .pf-hero-av .avatar (cf. bloc PROFILE). */
/* Classement : pastille de ligne. */
.lb-badge .avatar{width:34px;height:34px}
/* Lobby : slot joueur. */
.lb-slot .avatar{width:40px;height:40px}
/* Bracket : mini-pastille de ligne de match (ombre allégée à petite taille). */
.mc-row .avatar{width:24px;height:24px;box-shadow:inset 0 -2px 4px rgba(0,0,0,.3)}
/* Podium + classement final. */
.pod-av .avatar{width:46px;height:46px}
.pod-1 .pod-av .avatar{width:58px;height:58px}
.ts-row .ts-badge .avatar{width:28px;height:28px}

/* ===== BRACKET ===== */
#bracket{background:radial-gradient(ellipse 100% 50% at 50% -10%, #18305c 0%, transparent 55%), var(--night);justify-content:flex-start;padding:0}
.bk-head{width:100%;padding:calc(14px + env(safe-area-inset-top)) 18px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:3;background:linear-gradient(180deg,var(--night) 75%,transparent)}
.bk-title{font-family:'Archivo Black';font-size:19px;text-transform:uppercase;line-height:1.1}
.bk-title small{display:block;font-family:'Archivo';font-size:11px;color:var(--lime);letter-spacing:.18em;font-weight:800;margin-top:2px}
.bk-legend{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.bk-legend .lg-dot{width:10px;height:10px;border-radius:50%;background:var(--lime)}
.bk-scroll{flex:1;width:100%;overflow:auto;padding:6px 18px 18px;-webkit-overflow-scrolling:touch}
.bk-cols{display:flex;gap:0;align-items:stretch;min-height:100%;width:max-content;padding-right:8px}
.bk-col{display:flex;flex-direction:column;justify-content:space-around;gap:10px;min-width:178px;padding:0 14px;position:relative}
.bk-col + .bk-col::before{content:"";position:absolute;left:0;top:42px;bottom:42px;width:1.5px;background:rgba(255,255,255,.07)}
.bk-col-name{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:center;padding-bottom:6px;position:sticky;top:0;background:linear-gradient(180deg,var(--night) 70%,transparent);z-index:2}
.match-card{position:relative;background:linear-gradient(180deg,var(--card),var(--card-2));border:1.5px solid rgba(255,255,255,.09);border-radius:13px;overflow:hidden;font-size:12px;font-weight:700;box-shadow:0 5px 14px rgba(0,0,0,.32)}
.match-card.mine{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime),0 6px 18px rgba(200,241,53,.16)}
.match-card.next{animation:glow 1.4s ease-in-out infinite}
.match-card.played::after{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:rgba(255,255,255,.12)}
.match-card.mine.played::after{background:var(--lime)}
@keyframes glow{0%,100%{box-shadow:0 0 0 1px var(--lime),0 0 14px rgba(200,241,53,.25)}50%{box-shadow:0 0 0 2px var(--lime),0 0 26px rgba(200,241,53,.5)}}
/* Sous-libellé « Petite finale (3e place) » en tête de la carte dédiée
   (m.thirdPlace) : badge neutre, centré, RTL-safe (pas de marge directionnelle). */
.mc-tag{font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;padding:4px 6px 2px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06)}
.match-card.third{border-color:rgba(214,139,74,.4)}
/* Ma propre carte de petite finale : on garde le liseré lime (cohérence avec .mine,
   sinon bordure ambre + halo lime contradictoires). */
.match-card.mine.third{border-color:var(--lime)}
.mc-row{display:flex;align-items:center;gap:8px;padding:9px 11px;transition:background .2s}
.mc-row + .mc-row{border-top:1px solid rgba(255,255,255,.07)}
.mc-row.won{background:rgba(255,255,255,.035)}
.mc-row .mini-badge{width:24px;height:24px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:8px;font-family:'Archivo Black';box-shadow:inset 0 -2px 4px rgba(0,0,0,.3)}
.mc-row .nm{flex:1;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-row.won .nm{color:var(--white)}
.mc-row.lost .nm{opacity:.5}
.mc-row.me .nm{color:var(--lime);font-weight:800}
.mc-row .sc{font-family:'Archivo Black';font-size:15px;min-width:20px;text-align:center;color:var(--muted);border-radius:6px;padding:1px 5px}
.mc-row.won .sc{color:var(--ink);background:var(--lime)}
.champ-col{display:flex;flex-direction:column;justify-content:center;gap:16px;min-width:170px;padding:0 16px;align-items:center}
.champ-box{display:flex;flex-direction:column;align-items:center;gap:8px;background:linear-gradient(180deg,rgba(255,200,61,.1),transparent);border:1.5px solid rgba(255,200,61,.25);border-radius:16px;padding:16px 18px}
.champ-box .trophy{width:46px;height:46px;filter:drop-shadow(0 6px 14px rgba(255,200,61,.35))}
.champ-box .cb-name{font-family:'Archivo Black';font-size:13px;text-transform:uppercase;text-align:center;color:var(--gold)}
.champ-box .cb-q{font-family:'Archivo Black';font-size:30px;color:rgba(255,255,255,.14)}
.small-final{width:100%}
.small-final .sf-tag{font-size:9px;letter-spacing:.16em;font-weight:800;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:6px}
.bk-foot{width:100%;padding:12px 18px calc(16px + env(safe-area-inset-bottom));display:flex;gap:10px;justify-content:center;background:linear-gradient(0deg,var(--night) 70%,transparent);z-index:3}
.btn-bk{font-size:15px;padding:16px 30px}

/* ===== GAME ===== */
#game{justify-content:flex-start;background:var(--night)}
.hud{width:min(980px,100%);margin-top:calc(6px + env(safe-area-inset-top));padding:0 12px;z-index:6}
.hud-card{background:linear-gradient(180deg,rgba(26,39,72,.92),rgba(14,23,48,.92));border:1.5px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);padding:6px 10px;display:flex;align-items:center;gap:8px;backdrop-filter:blur(6px)}
.hd-team{flex:1;display:flex;align-items:center;gap:9px;min-width:0}
.hd-team.right{flex-direction:row-reverse}
.hd-badge{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:'Archivo Black';font-size:11px;box-shadow:inset 0 -3px 6px rgba(0,0,0,.35), 0 3px 8px rgba(0,0,0,.4);position:relative;overflow:hidden}
.hd-badge::after{content:"";position:absolute;inset:2.5px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35)}
.hd-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.hd-team.right .hd-info{align-items:flex-end}
.hd-name{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}
.hd-team .hd-name.you{color:var(--lime)}
.dots{display:flex;gap:4px}
.dot{width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.16);transition:all .25s;display:flex;align-items:center;justify-content:center}
.dot svg{width:7px;height:7px}
.dot.goal{background:var(--pw-green);border-color:var(--pw-green)}
.dot.miss{background:var(--danger);border-color:var(--danger)}
.score-pill{background:var(--night);border-radius:14px;padding:7px 14px;border:1.5px solid rgba(255,255,255,.1);font-family:'Archivo Black';font-size:26px;display:flex;align-items:center;gap:8px;flex:none;box-shadow:inset 0 2px 8px rgba(0,0,0,.5)}
.score-pill .sep{color:var(--muted);font-size:16px}
.hud-sub{display:flex;align-items:center;justify-content:space-between;padding:7px 6px 0;gap:10px}
.match-label{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.match-label b{color:var(--white)}
.match-label .sd{color:var(--danger)}
.turn-chip{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:999px;background:rgba(200,241,53,.12);color:var(--lime);border:1px solid rgba(200,241,53,.35);transition:opacity .22s,transform .22s,color .15s,background .15s,border-color .15s}
/* Bandeau de tour code-couleur, sans ambiguïté : tireur = lime (offensif),
   gardien = bleu (défensif). Fond/bordure renforcés pour la lisibilité. */
.turn-chip.shoot{background:rgba(200,241,53,.18);color:var(--lime);border-color:rgba(200,241,53,.5);box-shadow:0 0 0 1px rgba(200,241,53,.18)}
.turn-chip.keep{background:rgba(95,182,255,.18);color:var(--sky-blue);border-color:rgba(95,182,255,.5);box-shadow:0 0 0 1px rgba(95,182,255,.18)}
/* Anneau de décompte (remplace l'ancienne barre horizontale). L'anneau se vide
   (stroke-dashoffset piloté en RAF par hud.js) ; le chiffre central pulse en
   zone critique. AUCUNE transition sur stroke-dashoffset (la RAF s'en charge). */
.timer-ring{position:relative;width:44px;height:44px;flex:none}
.timer-ring svg{width:100%;height:100%;display:block}
.tr-track{fill:none;stroke:rgba(255,255,255,.1);stroke-width:4}
.tr-prog{fill:none;stroke:var(--lime);stroke-width:4;stroke-linecap:round;stroke-dasharray:119.38;transform:rotate(-90deg);transform-origin:center;transition:stroke .15s}
.tr-prog.warn{stroke:var(--pw-orange)}
.tr-prog.crit{stroke:var(--danger)}
.timer-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Archivo Black';font-size:14px;color:var(--muted);transition:color .15s}
.timer-num.crit{color:var(--danger)}
/* Sous 3 s (classe .crit) : pulsation du chiffre (scale + opacité) pour attirer
   l'œil. Coupée franchement sous prefers-reduced-motion (cf. bloc dédié). */
#timer-num.crit{animation:timer-crit-pulse .7s ease-in-out infinite}
@keyframes timer-crit-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.22);opacity:.6}}

.stage-wrap{position:relative;width:min(980px,100%);flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:2px 3px}
#stage{width:100%;height:100%;display:block;touch-action:none}
.flash{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:7}
.flash.goal{background:radial-gradient(circle, rgba(200,241,53,.30), transparent 70%);animation:flashA .55s ease}
.flash.bad{background:radial-gradient(circle, rgba(255,59,78,.28), transparent 70%);animation:flashA .55s ease}
@keyframes flashA{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.stamp{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.4) rotate(-8deg);font-family:'Archivo Black';font-size:clamp(42px,10vw,82px);text-transform:uppercase;opacity:0;pointer-events:none;z-index:8;white-space:nowrap;-webkit-text-stroke:2px rgba(8,13,26,.9);text-shadow:0 6px 0 rgba(8,13,26,.55), 0 14px 34px rgba(0,0,0,.6)}
.stamp.show{animation:stampIn .85s cubic-bezier(.2,1.5,.3,1) both}
@keyframes stampIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-9deg)}55%{opacity:1;transform:translate(-50%,-50%) scale(1.1) rotate(-3deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}}
.stamp.goal{color:var(--lime)}.stamp.save{color:var(--sky-blue)}.stamp.off{color:var(--pw-orange)}.stamp.bad{color:var(--danger)}
.proba-tip{position:absolute;top:6px;left:50%;transform:translateX(-50%) translateY(-6px);background:rgba(8,13,26,.9);border:1.5px solid rgba(255,255,255,.15);border-radius:999px;padding:7px 16px;font-size:12px;font-weight:700;opacity:0;transition:opacity .25s, transform .25s;z-index:8;white-space:nowrap}
.proba-tip.show{opacity:1;transform:translateX(-50%) translateY(0)}

.deck{width:min(980px,100%);padding:6px 12px calc(10px + env(safe-area-inset-bottom));z-index:6}
/* min-height = hauteur naturelle du mode tir (ctrl-hint 16 + cgauge 120 +
   zone-hint 18 + 2 gaps 6 + paddings 17 + bordures 3 = 186px, box-sizing:border-box).
   Pin le carton à cette hauteur dans LES DEUX rôles → plus de saut de canvas au
   passage tireur↔gardien (cf. .keepmode .keep-banner{flex:1} qui remplit l'espace). */
.deck-card{background:linear-gradient(180deg,rgba(26,39,72,.95),rgba(12,19,40,.95));border:1.5px solid rgba(255,255,255,.1);border-radius:22px;padding:7px 12px 10px;min-height:186px;box-shadow:0 -8px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);display:flex;flex-direction:column;gap:6px;backdrop-filter:blur(6px)}
.ctrl-hint{text-align:center;font-size:12px;color:var(--muted);font-weight:600;min-height:16px}
.ctrl-hint b{color:var(--lime)}.ctrl-hint .kb{color:var(--sky-blue)}
.gauge-row{display:flex;align-items:center;gap:16px;justify-content:center}
.cgauge{position:relative;width:120px;height:120px;flex:none;opacity:.32;transition:opacity .2s}
.cgauge.live{opacity:1}
.cgauge svg{width:100%;height:100%}
#cgauge-knob{filter:drop-shadow(0 0 8px rgba(255,255,255,.9));transition:fill .1s}
.cgauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.cgauge-center span{font-family:'Archivo Black';font-size:16px;line-height:1;transition:color .1s}
.cgauge-center small{font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.deck-zone-hint{text-align:center;font-size:13px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.6);min-height:18px;transition:color .12s}
.deck-zone-hint b{color:var(--white);font-family:'Archivo Black'}
.deck.keepmode .deck-zone-hint{display:none}
/* En mode gardien, la bannière occupe TOUTE la place libérée par la jauge
   masquée (flex:1) → le carton conserve sa hauteur (min-height), pas de saut.
   Contenu centré verticalement dans cet espace. min-height = garde-fou. */
.keep-banner{display:none;align-items:center;justify-content:center;gap:12px;flex:1;min-height:72px;background:rgba(95,182,255,.08);border:2px dashed rgba(95,182,255,.4);border-radius:16px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:14px;color:var(--sky-blue)}
.deck.keepmode .gauge-row{display:none}
.deck.keepmode .keep-banner{display:flex}
/* .sound-btn (bouton son flottant) retiré — le contrôle du son est dans les Réglages. */
/* Bouton Quitter : ancré en bas-GAUCHE, À LA MÊME HAUTEUR que le bouton d'émote
   (même `bottom`) pour des coins inférieurs symétriques. */
.game-quit{position:absolute;left:calc(14px + env(safe-area-inset-left));bottom:calc(206px + env(safe-area-inset-bottom));z-index:9;width:54px;height:54px;border-radius:15px;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.14);display:none;align-items:center;justify-content:center;cursor:pointer;color:var(--muted)}
#game.active .game-quit{display:flex}
.game-quit:active{transform:scale(.94)}
.game-quit svg{width:20px;height:20px}

/* ===== ÉMOTES EN MATCH (en ligne) =====
   Bouton flottant calqué sur .game-quit mais ancré au coin bas-DROIT, au-dessus
   du #deck. Affiché/masqué par EmoteUI via l'attribut [hidden] (jamais de
   #game.active ici : seul un match EN LIGNE le dévoile). z-index au-dessus du
   deck (6) et du canvas, sous .modal-overlay (300). */
/* Ancré JUSTE au-dessus du #deck (carton pinné à 186px → deck ~202px+safe).
   206px dégage le deck dans LES DEUX rôles (carton désormais de même hauteur) ;
   le bouton tombe dans la bande basse du canvas, hors des zones de visée
   (zones en haut-centre, y monde 192→427 sur 620). Même position tireur/gardien. */
.game-emote{position:absolute;inset-inline-end:calc(14px + env(safe-area-inset-right));bottom:calc(206px + env(safe-area-inset-bottom));z-index:12;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:transform .15s,opacity .15s,color .15s,background .15s}
.game-emote[hidden]{display:none}
.game-emote:hover{color:var(--white);border-color:rgba(255,255,255,.35)}
.game-emote:active{transform:scale(.94)}
.game-emote:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.game-emote svg{width:24px;height:24px}
.game-emote.cooling{opacity:.4;cursor:default;color:var(--muted)}

/* Picker : carte popover ancrée juste au-dessus du bouton (grille 4×2). */
.emote-picker{position:absolute;inset-inline-end:calc(14px + env(safe-area-inset-right));bottom:calc(262px + env(safe-area-inset-bottom));z-index:13;width:min(264px,calc(100vw - 28px));padding:8px;background:linear-gradient(180deg,var(--card-2),var(--card));border:1.5px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 14px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);display:grid;grid-template-columns:repeat(4,1fr);gap:6px;animation:emotePopIn .18s ease both}
.emote-picker[hidden]{display:none}
.emote-opt{width:100%;aspect-ratio:1;min-height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:background .12s,transform .1s}
.emote-opt:hover{background:rgba(255,255,255,.12)}
.emote-opt:active{transform:scale(.92)}
.emote-opt:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.emote-emoji{font-size:24px;line-height:1}
/* Expression cosmétique (image) — picker (cadrée dans .emote-opt), bulle (plus
   grande), puce spectateur (petite). webp animé s'anime nativement dans <img>. */
.emote-img{display:block;object-fit:contain;width:100%;height:100%}
.emote-opt .emote-img{width:34px;height:34px}

/* Bulles façon « phylactère » au-dessus du HUD. .me à gauche (sur #hd-name-p),
   .opp à droite (sur #hd-name-c). Masquées par défaut, visibles via .show. */
.emote-bubble{position:absolute;top:calc(58px + env(safe-area-inset-top));z-index:11;max-width:min(220px,46vw);display:flex;align-items:center;gap:7px;padding:8px 12px;background:linear-gradient(180deg,var(--card-2),var(--card));border:1.5px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 8px 22px rgba(0,0,0,.45);opacity:0;transform:translateY(6px) scale(.85);transform-origin:top center;pointer-events:none;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.emote-bubble.me{inset-inline-start:calc(18px + env(safe-area-inset-left));transform-origin:top left}
.emote-bubble.opp{inset-inline-end:calc(18px + env(safe-area-inset-right));transform-origin:top right}
.emote-bubble.show{opacity:1;transform:translateY(0) scale(1);visibility:visible;transition:opacity .22s cubic-bezier(.2,1.5,.3,1),transform .22s cubic-bezier(.2,1.5,.3,1)}
/* Tailles d'expression en match agrandies ×1,3 (emoji 22→29, image 72→94). */
.emote-bubble .emote-emoji{font-size:29px}
.emote-bubble .emote-text{font-size:12px;font-weight:700;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Bulle « expression cosmétique » : image (plus grande) + légende multilingue dessous. */
.emote-bubble.expr{padding:6px;display:flex;flex-direction:column;align-items:center;gap:4px}
.emote-bubble.expr .emote-img{width:120px;height:120px}
.emote-bubble.expr .emote-text{max-width:120px}
/* Légende d'expression : masquée tant qu'elle est vide (non résolue / absente). */
.expr-caption:empty{display:none}

/* Puces flottantes (spectateur, écran #bracket) : pilule emoji + pseudo + phrase. */
.spec-emotes{position:absolute;top:calc(58px + env(safe-area-inset-top));inset-inline-end:calc(12px + env(safe-area-inset-right));z-index:7;display:flex;flex-direction:column;gap:6px;align-items:flex-end;pointer-events:none;max-width:min(320px,80vw)}
.spec-emote-chip{display:flex;align-items:center;gap:7px;padding:6px 12px;background:linear-gradient(180deg,rgba(26,39,72,.96),rgba(12,19,40,.96));border:1.5px solid rgba(255,255,255,.12);border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.4);font-size:12px;max-width:100%;animation:specChipIn .26s ease both}
/* Puces spectateur agrandies ×1,3 (emoji 18→23, image 22→29). */
.spec-emote-chip .emote-emoji{font-size:23px}
.spec-emote-chip .emote-img{width:29px;height:29px}
.spec-emote-chip .se-name{font-weight:800;color:var(--sky-blue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.spec-emote-chip .emote-text{font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spec-emote-chip.out{opacity:0;transform:translateY(-6px);transition:opacity .35s ease,transform .35s ease}
@keyframes emotePopIn{0%{opacity:0;transform:translateY(8px) scale(.92)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes specChipIn{0%{opacity:0;transform:translateX(12px)}100%{opacity:1;transform:translateX(0)}}

/* ===== END / STATS / CHAMPION ===== */
#match-end,#champion,#stats{background:radial-gradient(ellipse 95% 60% at 50% -10%, #21407a 0%, transparent 60%), var(--night)}
.end-card{display:flex;flex-direction:column;align-items:center;gap:12px;animation:pop .5s both;z-index:2;padding:0 20px}
.end-verdict{font-family:'Archivo Black';font-size:clamp(38px,9vw,72px);text-transform:uppercase;text-align:center;line-height:1}
.end-verdict.win{color:var(--lime)}.end-verdict.lose{color:var(--danger)}.end-verdict.gold{color:var(--gold)}
.end-vs{display:flex;align-items:center;gap:14px;margin:6px 0}
.end-vs .hd-badge{width:52px;height:52px;font-size:14px}
.end-score{font-family:'Archivo Black';font-size:50px}
.end-sub{color:var(--muted);font-size:14px;font-weight:600;margin-bottom:8px;text-align:center;max-width:340px;line-height:1.6}
.end-actions{display:flex;flex-direction:column;gap:8px;align-items:center}
.btn-big{font-size:16px;padding:18px 46px}
canvas.fx{position:absolute;inset:0;pointer-events:none;z-index:1}

#stats{justify-content:flex-start;padding:0}
.st-head{width:100%;padding:calc(16px + env(safe-area-inset-top)) 20px 8px;text-align:center}
.st-head h2{font-family:'Archivo Black';font-size:22px;text-transform:uppercase}
.st-head .sub{color:var(--muted);font-size:12px;font-weight:600;margin-top:2px}
.st-scroll{flex:1;width:min(560px,100%);overflow:auto;padding:8px 18px 12px;-webkit-overflow-scrolling:touch}
.st-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}
.st-stat{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 8px;text-align:center}
.st-stat .v{font-family:'Archivo Black';font-size:24px}
.st-stat .l{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.st-stat .v.lime{color:var(--lime)}.st-stat .v.blue{color:var(--sky-blue)}
.st-row{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:10px 12px;margin-bottom:7px;font-size:12px;font-weight:600}
.st-row .rn{width:26px;height:26px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-family:'Archivo Black';font-size:11px;background:rgba(255,255,255,.06);color:var(--muted)}
.st-row .role{flex:none;width:62px;font-weight:800;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.st-row .role.shoot{color:var(--lime)}.st-row .role.keep{color:var(--sky-blue)}
.st-row .detail{flex:1;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-row .detail b{color:var(--white);font-weight:700}
.st-row .res{flex:none;font-weight:800;font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:8px}
.st-row .res.g{background:rgba(46,224,106,.16);color:var(--pw-green)}
.st-row .res.s{background:rgba(95,182,255,.16);color:var(--sky-blue)}
.st-row .res.m{background:rgba(255,140,46,.16);color:var(--pw-orange)}
.st-foot{width:100%;padding:10px 18px calc(16px + env(safe-area-inset-bottom));display:flex;justify-content:center;background:linear-gradient(0deg,var(--night) 70%,transparent)}

@media (max-width:600px){.score-pill{font-size:21px;padding:6px 11px}.hd-name{max-width:64px}.team-grid{gap:8px}.badge{width:40px;height:40px;font-size:12px}}

/* ===== PAYSAGE TÉLÉPHONE (hauteur < 500px) =====
   On NE verrouille PAS le portrait : le jeu reste jouable couché. La hauteur
   est rare → on compacte HUD + deck (paddings, badges, jauge) pour rendre le
   maximum d'espace au canvas (.stage-wrap flex:1), tout en gardant la jauge et
   les zones de visée accessibles. Testé mentalement sur 812×375. */
@media (orientation:landscape) and (max-height:500px){
  .hud{margin-top:calc(2px + env(safe-area-inset-top));padding:0 10px}
  .hud-card{padding:5px 12px;border-radius:16px;gap:8px}
  .hd-badge{width:30px;height:30px;font-size:10px}
  .score-pill{font-size:20px;padding:4px 11px}
  .hud-sub{padding:4px 6px 0}
  .stage-wrap{padding:0 3px}            /* le canvas prend toute la place utile */
  .deck{padding:3px 10px calc(5px + env(safe-area-inset-bottom))}
  /* min-height = hauteur naturelle du mode tir compacté :
     ctrl-hint 14 + cgauge 84 + zone-hint 14 + 2 gaps 3 + paddings 11 + bordures 3 = 132px.
     Hauteurs des slots texte FIXÉES (14px) pour que les deux rôles coïncident. */
  .deck-card{padding:5px 12px 6px;border-radius:16px;gap:3px;min-height:132px}
  .ctrl-hint{min-height:14px;font-size:11px}
  .deck-zone-hint{min-height:14px;font-size:12px}
  .gauge-row{gap:12px}
  .cgauge{width:84px;height:84px}      /* jauge réduite mais lisible/utilisable */
  .cgauge-center span{font-size:13px}
  .keep-banner{min-height:52px;font-size:12px}
  .timer-ring{width:38px;height:38px}
  .timer-num{font-size:13px}
  /* Deck compacté (~140px+safe) → on remonte les boutons émote ET quitter juste
     au-dessus (même hauteur), toujours hors zones de visée. */
  .game-emote{bottom:calc(146px + env(safe-area-inset-bottom))}
  .game-quit{bottom:calc(146px + env(safe-area-inset-bottom))}
  .emote-picker{bottom:calc(202px + env(safe-area-inset-bottom))}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01s!important;transition-duration:.01s!important}
  /* Les pulses décoratifs (mort subite, timer critique) sont des mouvements
     répétés potentiellement déclencheurs : on les COUPE franchement
     (animation:none) plutôt que de les accélérer à .01s (ce qui clignoterait).
     On conserve une vignette STATIQUE pour garder le signal d'état sans flash. */
  #game.sudden-death::after{animation:none!important;box-shadow:inset 0 0 50px rgba(255,59,78,.32)}
  #game.timer-crit::before{animation:none!important;box-shadow:inset 0 0 55px rgba(255,59,78,.30)}
  /* Pulse du chiffre de chrono sous 3 s : coupé franchement (mouvement répété).
     La couleur rouge (.crit) reste comme signal d'état statique, sans scintillement. */
  #timer-num.crit{animation:none!important;transform:none!important;opacity:1!important}
  /* Glow décoratif du prochain match (bracket) et pulse « live » : statiques. */
  .match-card.next{animation:none!important;box-shadow:0 0 0 2px var(--lime),0 0 14px rgba(200,241,53,.3)}
  .match-card.live .mc-live{animation:none!important}
  /* Balle rebondissante du splash : coupée franchement (sinon scintille à .01s). */
  .sp-ball{animation:none!important}
  /* Lobby (Lot C1) : pulses/entrées décoratifs coupés franchement.
     - point « live » d'occupation : statique.
     - apparition de slot : pas de mouvement (état final direct).
     - urgence du compte à rebours : couleur conservée, scale figé. */
  .lb-card-occ.live::before{animation:none!important}
  .lb-slot.is-new{animation:none!important}
  /* « Pop » d'avatar (Lot R5) : pas de rebond (apparition directe). */
  .lb-slot.is-pop .avatar,.lb-slot.is-pop .badge{animation:none!important;transform:none!important}
  .lb-countdown.urgent .lb-cd-num{animation:none!important;transform:none!important}
  /* Anneau de compte à rebours (Lot R5) : statique (le JS ne met plus à jour
     l'offset sous reduced-motion ; on neutralise aussi la transition au cas où). */
  .lb-cd-ring-prog{transition:none!important}
  /* Onboarding (Lot C2) : transition d'entrée de carte coupée franchement
     (apparition directe, pas de glissement/fondu). */
  .ob-card.ob-in{animation:none!important}
  /* Bande liste des matchs (Lot 2) : apparition directe, pas de glissement. */
  .spec-live:not([hidden]){animation:none!important}
  /* Émotes (Lot 5b) : entrées décoratives coupées franchement (état final direct,
     pas de pop/scale/glissement qui scintillerait à .01s). Les bulles restent un
     simple basculement opacité/visibilité. */
  .emote-picker{animation:none!important}
  .spec-emote-chip{animation:none!important}
  .emote-bubble{transform:none!important}
  .emote-bubble.me,.emote-bubble.opp{transform:none!important}
  .emote-bubble.show{transform:none!important}
  /* Le confetti (canvas RAF) est neutralisé côté JS dans screens.js launchConfetti. */
  /* Squelette de chargement (Lot R7) : balayage répété coupé franchement, fond
     statique (sinon le shimmer infini scintillerait à .01s). */
  .ui-skeleton{animation:none!important;background:rgba(255,255,255,.07)}
}

/* ===== TRANSITION OVERLAY ===== */
#screen-transition{position:fixed;inset:0;background:var(--night);opacity:0;pointer-events:none;z-index:200;transition:opacity .15s ease}
#screen-transition.active{opacity:1;pointer-events:auto}

/* ===== MORT SUBITE VIGNETTE ===== */
#game.sudden-death::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;animation:sdPulse 1.1s ease-in-out infinite}
@keyframes sdPulse{0%,100%{box-shadow:inset 0 0 35px rgba(255,59,78,.22)}50%{box-shadow:inset 0 0 70px rgba(255,59,78,.58)}}

/* ===== BRACKET SCROLL ARROWS ===== */
/* Bande bracket : 3 parts de la zone flexible (split 3/5 ; #spec-live = 2 parts).
   min-height anti-effondrement : garde ~2 lignes de colonnes visibles même quand
   la liste des matchs est affichée. Quand #spec-live est [hidden] (liste vide),
   le bracket occupe toute la hauteur (flex unique). */
.bk-scroll-wrap{position:relative;flex:3 1 0;width:100%;overflow:hidden;display:flex;flex-direction:column;min-height:140px}
.bk-scroll-wrap .bk-scroll{flex:1}
.bk-scroll-arrow{position:absolute;top:0;bottom:0;z-index:6;width:52px;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;opacity:0;transition:opacity .2s;pointer-events:none;padding:0;background:transparent}
.bk-scroll-arrow.visible{opacity:1;pointer-events:auto}
.bk-scroll-arrow.left{left:env(safe-area-inset-left);background:linear-gradient(90deg,var(--night) 50%,transparent)}
.bk-scroll-arrow.right{right:env(safe-area-inset-right);background:linear-gradient(270deg,var(--night) 50%,transparent)}
.bk-scroll-arrow svg{width:22px;height:22px;stroke:var(--white);filter:drop-shadow(0 0 4px rgba(0,0,0,.8))}

/* ===== SCORE POP ===== */
@keyframes scorePop{0%{transform:scale(1)}35%{transform:scale(1.6)}100%{transform:scale(1)}}
.score-pop{animation:scorePop .38s cubic-bezier(.2,1.5,.3,1)}

/* ===== TENSION TIMER — VIGNETTE ROUGE PULSANTE ===== */
#game.timer-crit::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;animation:timerCritPulse .55s ease-in-out infinite}
@keyframes timerCritPulse{0%,100%{box-shadow:inset 0 0 45px rgba(255,59,78,.20)}50%{box-shadow:inset 0 0 90px rgba(255,59,78,.52)}}

/* ===================================================================
   ÉCRANS EN LIGNE — Auth / Profil / Classement / Réglages
=================================================================== */

/* Indicateur réseau (reconnexion) : pastille ronde COMPACTE avec emoji animé
   (au lieu d'une longue bannière texte). Libellé accessible via aria-label/title. */
#net-banner{
  position:fixed;left:50%;top:0;transform:translate(-50%,-150%);
  z-index:210;
  margin-top:calc(8px + env(safe-area-inset-top));
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,140,46,.16);border:1.5px solid rgba(255,140,46,.5);
  color:var(--pw-orange);font-size:18px;line-height:1;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:transform .3s cubic-bezier(.2,.8,.3,1);pointer-events:none;
}
#net-banner.show{transform:translate(-50%,0)}
.nb-spin{display:inline-block;animation:nb-spin 1.1s linear infinite}
@keyframes nb-spin{to{transform:rotate(360deg)}}

/* Toast partagé (erreurs réseau / lobby) */
#toast{
  position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));
  transform:translate(-50%,140%);
  z-index:220;max-width:92vw;
  padding:11px 20px;border-radius:999px;
  background:rgba(18,29,56,.96);border:1.5px solid rgba(255,255,255,.16);
  color:var(--white);font-size:13px;font-weight:700;letter-spacing:.02em;
  text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), opacity .3s;
}
#toast.show{transform:translate(-50%,0);opacity:1}

/* Bannière de mise à jour PWA (Lot R7) — fixée en haut, au-dessus du contenu.
   Contrairement à #net-banner (purement informatif), elle contient un bouton :
   pointer-events réactivés. Cachée par défaut ([hidden]) ; .show la fait
   descendre. RTL-safe (centrée par translateX). */
#pwa-update{
  position:fixed;left:50%;top:0;transform:translate(-50%,-130%);
  z-index:215;max-width:92vw;
  margin-top:calc(8px + env(safe-area-inset-top));
  display:flex;align-items:center;gap:12px;
  padding:8px 10px 8px 18px;border-radius:999px;
  background:rgba(18,29,56,.97);border:1.5px solid rgba(167,255,79,.45);
  color:var(--white);font-size:13px;font-weight:700;letter-spacing:.02em;
  white-space:nowrap;box-shadow:0 12px 30px rgba(0,0,0,.5);
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
#pwa-update[hidden]{display:none}
#pwa-update.show{transform:translate(-50%,0)}
#pwa-update .btn{font-size:12px;padding:9px 18px;min-height:38px;margin:0}

/* Bannière d'annonce admin (Bloc F4) — même gabarit fixé-en-haut que #pwa-update,
   mais le message peut être long (jusqu'à 280 car.) : on autorise le retour à la
   ligne (pas de white-space:nowrap) et on borne la largeur. 3 variantes de niveau
   via [data-level] (info/warn/maintenance). Cachée par défaut ([hidden]) ; .show
   la fait descendre. RTL-safe (centrée par translateX). */
#announce-banner{
  position:fixed;left:50%;top:0;transform:translate(-50%,-140%);
  z-index:216;max-width:min(92vw,560px);
  margin-top:calc(8px + env(safe-area-inset-top));
  display:flex;align-items:center;gap:12px;
  padding:10px 12px 10px 18px;border-radius:16px;
  background:rgba(18,29,56,.97);border:1.5px solid rgba(120,170,255,.5);
  color:var(--white);font-size:13px;font-weight:700;letter-spacing:.02em;
  line-height:1.35;box-shadow:0 12px 30px rgba(0,0,0,.5);
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
#announce-banner[hidden]{display:none}
#announce-banner.show{transform:translate(-50%,0)}
#announce-banner #announce-msg{flex:1;min-width:0;overflow-wrap:anywhere}
.announce-dismiss{
  flex:none;cursor:pointer;border:none;border-radius:999px;
  padding:7px 14px;min-height:34px;margin:0;
  font-size:12px;font-weight:700;color:var(--white);
  background:rgba(255,255,255,.16);transition:background .15s;
}
.announce-dismiss:hover{background:rgba(255,255,255,.28)}
/* Niveau info (défaut) : bleu calme. */
#announce-banner[data-level="info"]{border-color:rgba(120,170,255,.5)}
/* Niveau warn : ambre. */
#announce-banner[data-level="warn"]{
  border-color:rgba(255,193,79,.7);background:rgba(50,38,12,.97);
}
/* Niveau maintenance : rouge (le plus urgent). */
#announce-banner[data-level="maintenance"]{
  border-color:rgba(255,99,99,.8);background:rgba(54,18,22,.97);
}

/* Bouton « Partager » du podium (Lot R7) — même gabarit ghost que les actions
   voisines, hérite de .end-actions (colonne, centré). */
#tend-share{font-size:12px;padding:12px 28px}

/* Squelette de chargement standardisé (uiState "loading") — bande pulsée par un
   dégradé qui balaie. Sous prefers-reduced-motion : fond statique (cf. bloc dédié). */
.ui-skeleton{
  display:block;width:100%;min-height:64px;border-radius:12px;
  background:linear-gradient(100deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.04) 70%);
  background-size:200% 100%;
  animation:ui-skeleton-shimmer 1.3s ease-in-out infinite;
}
@keyframes ui-skeleton-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* ===== MODALE de confirmation (confirmModal) ===== */
.modal-overlay{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  padding:calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  background:rgba(8,13,26,.66);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:modalFade .18s ease both;
}
.modal-overlay[hidden]{display:none}
.modal-card{
  width:min(360px,100%);
  background:linear-gradient(180deg,var(--card),var(--card-2));
  border:1.5px solid rgba(255,255,255,.1);border-radius:20px;
  padding:26px 24px 22px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:pop .26s both;
}
.modal-title{font-family:'Archivo Black',sans-serif;font-size:19px;color:var(--white);text-align:center;letter-spacing:.01em}
.modal-text{margin-top:10px;color:var(--muted);font-size:14px;font-weight:600;line-height:1.45;text-align:center}
.modal-actions{display:flex;gap:10px;margin-top:22px}
.modal-actions .btn{flex:1;font-size:14px;padding:15px 10px}
@keyframes modalFade{from{opacity:0}to{opacity:1}}

/* ===== MODALE salle d'attente du lobby (#lobby-wait-modal) =====
   Variante de .modal-card : plus large, colonne flex bornée à la hauteur écran ;
   seul .lb-slots scrolle (le reste — tête, indices, décompte, Quitter — reste en
   flux non-rétrécissant). Réutilise modalFade/pop de la modale de confirmation. */
.lobby-wait-card{
  position:relative; /* ancre la croix .lb-wait-back (absolute) sur la carte, pas l'overlay */
  width:min(560px,100%);
  max-height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;min-height:0;overflow:hidden;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));
}
/* Tête de la carte : pas de gros retrait sécurité (l'overlay le porte déjà) ;
   on laisse la place à la croix en coin haut-gauche. */
.lobby-wait-card .lb-head{padding:6px 4px 12px}
.lobby-wait-card .lb-slots{width:100%}
/* La croix de fermeture s'ancre dans la carte (et non l'écran). */
.lobby-wait-card .lb-wait-back{top:12px;left:12px}
[dir="rtl"] .lobby-wait-card .lb-wait-back{left:auto;right:12px}

/* ===== MODALE de contenu générique (#ol-modal — fiche joueur) =====
   Variante de .modal-card adaptée à un contenu plus riche : un peu plus large,
   défilement vertical si trop haute, et position:relative pour ancrer la croix ✕.
   Réutilise modalFade/pop de la modale de confirmation. */
.ol-modal-card{
  position:relative; /* ancre .ol-modal-x (absolute) dans la carte, pas l'overlay */
  width:min(360px,100%);
  max-height:80vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:22px 20px 20px;
}
/* Croix de fermeture : petit bouton fantôme ancré en haut de fin de ligne
   (logique → bascule en RTL). Stroke en currentColor, anneau de focus visible. */
.ol-modal-x{
  position:absolute;top:12px;inset-inline-end:12px;z-index:2;
  width:32px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1.5px solid transparent;
  color:var(--muted);cursor:pointer;transition:color .15s,background .15s,border-color .15s;
}
.ol-modal-x:hover{color:var(--white);background:rgba(255,255,255,.06)}
.ol-modal-x:active{transform:scale(.94)}
.ol-modal-x svg{width:18px;height:18px}
/* État (chargement / erreur) au sein de la modale : centré, discret. */
.ol-modal-card .ol-state{text-align:center;color:var(--muted);font-size:14px;font-weight:700;padding:24px 8px}

/* ===== CENTRE DE NOTIFICATIONS (Lot NC — cloche → inbox) =====
   Pastille non-lu de la cloche : pastille/compteur en haut de fin de ligne
   (logique → bascule en RTL). Réutilise --danger + l'anneau de contraste du
   footer. Le bouton .hdr-notif devient l'ancre (position:relative). */
.hdr-notif{position:relative}
.hdr-notif-badge{
  position:absolute;top:-2px;inset-inline-end:-2px;
  min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--danger);color:#fff;
  font-size:10px;font-weight:800;line-height:17px;text-align:center;
  box-shadow:0 0 0 2px rgba(10,16,36,.92);
  pointer-events:none;
}
[dir="rtl"] .hdr-notif-badge{inset-inline-end:auto;inset-inline-start:-2px}

/* Panneau (dans #ol-modal-body) : liste défilante + pied d'actions. */
.nc-panel{display:flex;flex-direction:column;gap:14px}
.nc-list{display:flex;flex-direction:column;gap:8px}
/* Ligne tap-pour-agir : icône | titre+corps+heure | pastille non-lu.
   ≥44px de hauteur (cible tactile). Texte aligné en début de ligne (RTL safe). */
.nc-row{
  display:flex;align-items:center;gap:12px;width:100%;min-height:48px;
  padding:10px 12px;border-radius:14px;cursor:pointer;text-align:start;
  background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.08);
  color:var(--white);transition:background .15s,border-color .15s,transform .1s;
}
.nc-row:hover{background:rgba(255,255,255,.07)}
.nc-row:active{transform:scale(.985)}
.nc-row.nc-unread{border-color:rgba(200,241,53,.4);background:rgba(200,241,53,.06)}
.nc-ic{flex:none;font-size:20px;line-height:1;width:24px;text-align:center}
.nc-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.nc-title{font-size:14px;font-weight:800;color:var(--white);line-height:1.25;overflow-wrap:anywhere}
.nc-body{font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.3;overflow-wrap:anywhere}
.nc-time{font-size:11px;font-weight:700;color:var(--muted);opacity:.85;letter-spacing:.02em}
/* Pastille non-lu de fin de ligne (logique → bascule RTL via flex order naturel). */
.nc-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px rgba(200,241,53,.5)}
/* État vide : message centré, discret (honnête : rien de fabriqué). */
.nc-empty{text-align:center;color:var(--muted);font-size:14px;font-weight:700;padding:32px 12px}
/* Pied : Vider (début) + ⚙ Réglages (fin) — boutons fantômes compacts. */
.nc-foot{display:flex;gap:10px;justify-content:space-between;align-items:center}
.nc-foot .btn{flex:1;font-size:12px;padding:11px 10px;min-height:44px;letter-spacing:.06em}
.nc-foot .btn[disabled]{opacity:.5;cursor:default}

/* ===== LOBBY (Battle Royale) ===== */
#lobby{
  background:radial-gradient(ellipse 100% 50% at 50% -10%, #21407a 0%, transparent 60%), var(--night);
  justify-content:flex-start;padding:0;
}
.lb-choice{display:flex;flex-direction:column;align-items:center;width:min(560px,100%);height:100%;min-height:0;padding:0 20px}
.lb-head{position:relative;padding:calc(22px + env(safe-area-inset-top)) 4px 14px;text-align:center;flex:none;width:100%}
.lb-title{font-family:'Archivo Black';font-size:clamp(22px,5.4vw,30px);text-transform:uppercase}
.lb-subtitle{margin-top:7px;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.01em;line-height:1.35;max-width:32ch;margin-inline:auto}
.lb-count{margin-top:6px;font-size:14px;font-weight:800;letter-spacing:.1em;color:var(--lime)}

/* Vue choix : cartes auto-lobby dynamiques (une par config, peuplées en JS) */
.lb-cards{display:flex;flex-direction:column;gap:14px;width:100%;margin-top:auto;margin-bottom:auto}
/* Message d'état (aucun lobby ouvert / erreur de chargement) à la place des cartes. */
.lb-cards-msg{text-align:center;color:var(--muted);font-size:13px;font-weight:700;padding:24px 12px;margin:0}
/* Carte indicative non rejoignable (fallback hors-ligne) : aspect atténué, pas de pointeur. */
.lb-card[disabled]{opacity:.55;cursor:default;pointer-events:none}
.lb-card{
  position:relative;overflow:hidden;
  background:rgba(10,16,36,.78);backdrop-filter:blur(10px);
  color:var(--white);border:1.5px solid rgba(255,255,255,.14);
  box-shadow:0 5px 0 rgba(0,0,0,.5), 0 12px 26px rgba(0,0,0,.4);
  border-radius:20px;padding:20px 18px;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  width:100%;cursor:pointer;text-align:center;transition:transform .12s,border-color .15s;
}
.lb-card:hover{border-color:rgba(200,241,53,.5)}
.lb-card:active{box-shadow:0 1px 0 rgba(0,0,0,.5);transform:translateY(3px) scale(.98)}
.lb-card-ic{width:34px;height:34px;flex:none;stroke:var(--sky-blue)}
.lb-card-title{font-family:'Archivo Black';font-size:16px;text-transform:uppercase;letter-spacing:.04em}
/* Sous-titre carte : la taille (« N joueurs ») sous le nom de l'auto-lobby. */
.lb-card-sub{font-size:11px;font-weight:700;color:var(--muted);margin-top:-2px}
/* Mise + répartition FIXE des gains sur la carte (deux lignes empilées, centrées).
   La mise reste sobre (muted) ; la répartition 🥇/🥈/🥉 est dorée (accent coins).
   Pas de durée ni de pourcentage. RTL-safe (flex colonne, aucune marge dir.). */
.lb-stake{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:3px}
.lb-stake:empty{display:none}
.lb-stake-fee{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.03em}
.lb-stake-prizes{font-family:'Archivo Black';font-size:12px;color:var(--gold);letter-spacing:.02em}
.lb-card-occ{margin-top:4px;font-size:12px;font-weight:800;color:var(--lime);letter-spacing:.06em;display:inline-flex;align-items:center;gap:6px}
/* Jauge de remplissage discrète, ancrée en bas de la carte (purement décorative). */
.lb-card-fill{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.06);pointer-events:none}
.lb-card-fill>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--sky-blue),var(--lime));border-radius:0 3px 3px 0;transition:width .4s ease}
[dir="rtl"] .lb-card-fill>i{border-radius:3px 0 0 3px;background:linear-gradient(270deg,var(--sky-blue),var(--lime))}
/* Point « live » pulsant (::before sur .live) : changer le texte ne le recrée
   pas → l'animation ne redémarre pas à chaque poll REST. */
.lb-card-occ.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(200,241,53,.6);animation:lbLivePulse 1.4s ease-in-out infinite;flex:none}
@keyframes lbLivePulse{0%,100%{box-shadow:0 0 0 0 rgba(200,241,53,.55)}50%{box-shadow:0 0 0 5px rgba(200,241,53,0)}}
.lb-back-choice{flex:none;margin-bottom:calc(18px + env(safe-area-inset-bottom));font-size:13px;padding:13px 30px;min-height:44px}

/* Tournois spéciaux (temp) sur la vue choix : séparateur + titre + liste de
   lignes .fr-row réutilisées. Masqué tant que la liste est vide (hidden en JS). */
.lb-special{flex:none;width:100%}
.lb-special[hidden]{display:none}
.lb-sep{height:1px;background:rgba(255,255,255,.12);margin:18px 0 12px}
.lb-special-title{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:10px}
.lb-special-list{display:flex;flex-direction:column;gap:8px}
/* Bouton « Rejoindre » : tap target ≥44px, texte (et non icône) → largeur auto. */
.lb-special-list .lb-special-join{width:auto;min-width:44px;min-height:44px;padding:0 16px;font-size:13px}
/* Badge « ✓ Inscrit » (déjà inscrit) : remplace le bouton Rejoindre, non cliquable. */
.lb-special-done{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:13px;font-weight:800;color:#37d67a}

/* Barre de progression de remplissage (n/total), sous le compteur de tête. */
.lb-progress{flex:none;width:min(280px,80%);height:6px;margin:9px auto 0;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.lb-progress>i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--sky-blue),var(--lime));box-shadow:0 0 10px rgba(200,241,53,.4);transition:width .45s cubic-bezier(.22,1,.36,1)}
[dir="rtl"] .lb-progress>i{margin-inline-start:auto;background:linear-gradient(270deg,var(--sky-blue),var(--lime))}

/* Vue attente : grille de slots */
.lb-slots{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;
  align-content:start;padding:4px 0;
}
.lb-slot{
  position:relative;
  border-radius:14px;padding:12px 8px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  min-height:96px;justify-content:center;
}
.lb-slot.filled{background:var(--card);border:2px solid rgba(255,255,255,.08)}
.lb-slot.empty{background:rgba(255,255,255,.03);border:2px dashed rgba(255,255,255,.16)}
.lb-slot.me{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime),0 4px 14px rgba(200,241,53,.18)}
/* Apparition douce d'un slot fraîchement rempli (classe `is-new`, posée par le JS). */
.lb-slot.is-new{animation:lb-slot-in .34s cubic-bezier(.22,1,.36,1) both}
@keyframes lb-slot-in{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
/* « Pop » bref quand un NOUVEAU joueur remplit un slot (count en hausse). L'avatar
   rebondit légèrement (animation indépendante de l'entrée, sur l'avatar/badge). */
.lb-slot.is-pop .avatar,.lb-slot.is-pop .badge{animation:lb-slot-pop .42s cubic-bezier(.34,1.56,.64,1) both}
@keyframes lb-slot-pop{0%{transform:scale(.5)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.lb-slot .badge{width:40px;height:40px;font-size:12px;flex:none}
.lb-slot .avatar{width:40px;height:40px;flex:none}
.lb-slot-name{font-size:12px;font-weight:800;color:var(--white);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-slot.me .lb-slot-name{color:var(--lime);text-transform:uppercase;letter-spacing:.04em}
.lb-slot-elo{font-size:11px;font-weight:700;color:var(--muted)}
.lb-slot-wait{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.04em;opacity:.7}
/* Zone compacte sous la grille : indices + compte à rebours (flex:none). */
.lb-hint{flex:none;margin-top:8px;font-size:12px;font-weight:700;color:var(--muted);text-align:center}
/* Répartition FIXE des gains (transparence) : intitulé + 3 parts médaille/montant,
   SANS pourcentage. flex:none (ne rétrécit pas) ; wrap petits écrans ; RTL-safe. */
.lb-wait-prizes{flex:none;margin-top:10px;text-align:center}
.lb-wait-prizes[hidden]{display:none}
.lb-prize-label{font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.lb-prize-row{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.lb-prize{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:999px;padding:4px 10px}
.lb-prize-medal{font-size:13px;line-height:1}
.lb-prize-coins{font-family:'Archivo Black';font-size:11px;color:var(--gold);white-space:nowrap}
/* Cagnotte FIXE : ligne saillante (accent doré comme les coins), pot figé par
   taille (aucun recalcul live). flex:none → ne rétrécit pas ; masquée si pot nul. */
.lb-pot{flex:none;margin-top:8px;text-align:center;font-family:'Archivo Black';font-size:15px;color:var(--gold);letter-spacing:.02em;text-shadow:0 2px 12px rgba(255,211,36,.25)}
.lb-pot[hidden]{display:none}
/* Compte à rebours prominent : label discret au-dessus + grand chiffre lime. */
.lb-countdown{
  flex:none;margin-top:8px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.lb-cd-label{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* Anneau de compte à rebours : conteneur carré, SVG en fond, chiffre centré. */
.lb-cd-ring{position:relative;width:96px;height:96px;display:flex;align-items:center;justify-content:center}
.lb-cd-ring-svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.lb-cd-ring-track{fill:none;stroke:rgba(255,255,255,.1);stroke-width:6}
.lb-cd-ring-prog{fill:none;stroke:var(--lime);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .25s linear,stroke .2s ease}
.lb-cd-num{
  position:relative;
  font-family:'Archivo Black';font-size:clamp(30px,8vw,44px);line-height:1;
  color:var(--lime);text-shadow:0 4px 22px rgba(200,241,53,.4);
  transition:transform .18s ease,color .18s ease;
}
/* Urgence dans les dernières secondes : chiffre agrandi + pulse doux (pas de clignotement agressif). */
.lb-countdown.urgent .lb-cd-num{color:var(--pw-orange);text-shadow:0 4px 22px rgba(255,140,46,.4);animation:lb-cd-pulse .9s ease-in-out infinite}
.lb-countdown.urgent .lb-cd-ring-prog{stroke:var(--pw-orange)}
@keyframes lb-cd-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
/* Quitter : barre d'action TOUJOURS visible en pied de l'attente (ne rétrécit
   jamais ; la grille .lb-slots prend l'espace flexible et scrolle au besoin). */
.lb-leave{flex:none;margin:12px 0 calc(16px + env(safe-area-inset-bottom));font-size:13px;padding:13px 30px;min-height:44px}

/* Croix de secours en haut à gauche de l'attente (découvrabilité du retour).
   Même langage visuel que .menu-help / .game-quit (bouton icône 44px, cible a11y). */
.lb-wait-back{
  position:absolute;left:calc(14px + env(safe-area-inset-left));top:calc(14px + env(safe-area-inset-top));
  z-index:3;width:44px;height:44px;border-radius:12px;
  background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);
}
.lb-wait-back svg{width:18px;height:18px}
.lb-wait-back:active{transform:scale(.94)}
[dir="rtl"] .lb-wait-back{left:auto;right:calc(14px + env(safe-area-inset-right))}

/* Accès aux réglages depuis le lobby (engrenage en haut à DROITE, symétrique de
   la croix de retour à gauche). Même langage visuel que .lb-wait-back /
   .menu-help. Présent en vue choix ET en vue attente pour changer de langue
   sans revenir au menu. */
/* Solde sur la page de choix de tournoi (pilule or, coin haut-droit — emplacement
   de l'ancien engrenage réglages, retiré). Alimentée par RewardsUI.setCoins. */
.lb-balance{
  position:absolute;right:calc(14px + env(safe-area-inset-right));top:calc(16px + env(safe-area-inset-top));
  z-index:3;display:inline-flex;align-items:center;gap:5px;
  padding:7px 13px;border-radius:999px;
  background:rgba(255,200,61,.14);border:1.5px solid rgba(255,200,61,.4);
  color:var(--gold);font-family:'Archivo',sans-serif;
}
.lb-balance .lb-bal-ic{font-size:14px;line-height:1}
.lb-balance .lb-bal-val{font-family:'Archivo Black';font-size:14px;color:var(--white)}
[dir="rtl"] .lb-balance{right:auto;left:calc(14px + env(safe-area-inset-left))}

@media (min-width:560px){
  .lb-slots{grid-template-columns:repeat(4,1fr)}
}

/* Fond commun + layout colonne scrollable */
#auth,#profile,#leaderboard,#settings{
  background:radial-gradient(ellipse 100% 50% at 50% -10%, #21407a 0%, transparent 60%), var(--night);
  justify-content:flex-start;padding:0;
}
.ol-wrap{display:flex;flex-direction:column;width:min(560px,100%);height:100%;min-height:0}
.ol-head{padding:calc(18px + env(safe-area-inset-top)) 22px 10px;text-align:center;flex:none}
.ol-title{font-family:'Archivo Black';font-size:clamp(22px,5vw,30px);text-transform:uppercase}
.ol-sub{margin-top:6px;color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.01em}
.ol-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 18px 14px}
.ol-foot{flex:none;padding:10px 18px calc(16px + env(safe-area-inset-bottom));display:flex;justify-content:center;background:linear-gradient(0deg,var(--night) 70%,transparent)}
/* Lot B : AppNav masque .ol-foot (retour interne) sur profil/classement/réglages
   au profit du header + footer global. La règle display:flex ci-dessus l'emporte
   sur le [hidden] de l'UA — on rétablit donc explicitement le masquage. */
.ol-foot[hidden]{display:none}
.ol-back{font-size:13px;padding:13px 30px;min-height:44px}
.ol-state{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--muted);font-size:14px;font-weight:600;text-align:center;padding:40px 16px}
.ol-retry{font-size:12px;padding:11px 24px}
.ol-empty{display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--muted);font-size:13px;font-weight:600;text-align:center;padding:34px 12px}
.ol-empty-cta{font-size:13px;padding:13px 28px}

/* ===== AUTH ===== */
.auth-tabs{display:flex;gap:7px;width:min(420px,calc(100% - 36px));margin:4px auto 0;background:rgba(0,0,0,.35);padding:5px;border-radius:14px;border:1px solid rgba(255,255,255,.1);flex:none}
.auth-tab{flex:1;text-align:center;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:11px 6px;border-radius:10px;cursor:pointer;color:var(--muted);background:none;border:none;font-family:'Archivo',sans-serif;transition:all .15s;min-height:44px;display:flex;align-items:center;justify-content:center}
.auth-tab.on{background:var(--lime);color:var(--ink);box-shadow:0 4px 14px rgba(200,241,53,.22)}
.auth-notice{margin:10px auto 4px;max-width:440px;background:rgba(95,182,255,.1);border:1.5px solid rgba(95,182,255,.35);color:var(--sky-blue);font-size:12px;font-weight:600;line-height:1.5;border-radius:12px;padding:11px 14px;text-align:center}
/* Conteneur des deux formulaires : un seul visible à la fois (l'autre [hidden]).
   La transition de bascule est un fondu/glissement court porté par .auth-form. */
.auth-forms{position:relative}
.auth-form{display:flex;flex-direction:column;gap:14px;max-width:440px;margin:14px auto 0}
.auth-form[hidden]{display:none}
.auth-form:not([hidden]){animation:auth-form-in .22s ease both}
@keyframes auth-form-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.auth-field{display:flex;flex-direction:column;gap:6px}
.auth-field>span{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.auth-input-wrap{position:relative;display:block}
.auth-field input{font-family:'Archivo',sans-serif;font-size:15px;font-weight:600;color:var(--white);background:var(--card);border:1.5px solid rgba(255,255,255,.12);border-radius:12px;padding:13px 14px;transition:border-color .15s,box-shadow .15s;width:100%}
/* Place à l'icône d'état (✓/✗) en fin de champ — propriété logique pour RTL. */
.auth-field.is-valid input,.auth-field.is-invalid input{padding-inline-end:42px}
/* Bordure lime sur tout focus ; on ne retire l'anneau qu'en focus NON-clavier
   (souris/tactile) — au clavier, :focus-visible (défini plus haut) reste actif. */
.auth-field input:focus{border-color:var(--lime)}
.auth-field input:focus:not(:focus-visible){outline:none}
.auth-field.is-valid input{border-color:var(--pw-green)}
.auth-field.is-invalid input{border-color:var(--danger)}
.auth-field.is-invalid input:focus{border-color:var(--danger)}
/* Icône d'état : positionnée en fin de champ (logique), neutre par défaut (cachée). */
.auth-status{position:absolute;inset-inline-end:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;pointer-events:none;opacity:0;transition:opacity .15s}
.auth-field.is-valid .auth-status,.auth-field.is-invalid .auth-status{opacity:1}
.auth-field.is-valid .auth-status{color:var(--pw-green)}
.auth-field.is-invalid .auth-status{color:var(--danger)}
.auth-hint{font-size:11px;font-weight:600;color:rgba(255,255,255,.6)}

/* ---- Afficher / masquer le mot de passe (œil dans le wrap) ----
   Les champs mot de passe portent TOUJOURS un bouton œil : on réserve la place à
   droite (propriété logique → RTL-safe). #login-password / #reg-password sont les
   seuls champs concernés (les autres wraps n'ont pas de .auth-pw-toggle). */
#login-password,#reg-password{padding-inline-end:46px}
/* Quand l'icône d'état ✓/✗ s'affiche AUSSI, on laisse la place aux deux (œil + icône). */
.auth-field[data-field="login-password"].is-valid input,
.auth-field[data-field="login-password"].is-invalid input,
.auth-field[data-field="reg-password"].is-valid input,
.auth-field[data-field="reg-password"].is-invalid input{padding-inline-end:74px}
/* L'icône d'état des champs mot de passe se décale vers l'intérieur pour ne pas
   chevaucher l'œil (qui occupe l'extrémité). */
.auth-field[data-field="login-password"] .auth-status,
.auth-field[data-field="reg-password"] .auth-status{inset-inline-end:44px}
.auth-pw-toggle{
  position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:none;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--muted);
  border-radius:9px;transition:color .15s,background .15s;padding:0;
}
.auth-pw-toggle:hover{color:var(--white)}
.auth-pw-toggle[aria-pressed="true"]{color:var(--lime)}
.auth-pw-toggle svg{width:20px;height:20px}
/* État affiché/masqué : on montre l'œil OUVERT par défaut, l'œil BARRÉ une fois
   le mot de passe révélé (aria-pressed=true). */
.auth-pw-toggle .pw-eye-off{display:none}
.auth-pw-toggle[aria-pressed="true"] .pw-eye{display:none}
.auth-pw-toggle[aria-pressed="true"] .pw-eye-off{display:block}

/* ---- Indice Verr. Maj ---- */
.auth-caps-hint{font-size:11px;font-weight:700;color:var(--pw-orange);display:flex;align-items:center;gap:5px}
.auth-caps-hint::before{content:"⇪";font-size:13px;line-height:1}
.auth-caps-hint[hidden]{display:none}

/* ---- Jauge de robustesse (inscription) ---- */
.auth-strength{display:flex;align-items:center;gap:8px}
.auth-strength[hidden]{display:none}
.auth-strength-bar{flex:1;height:5px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.auth-strength-bar>i{display:block;height:100%;width:0;border-radius:999px;transition:width .25s ease,background .25s ease}
[dir="rtl"] .auth-strength-bar>i{margin-inline-start:auto}
.auth-strength-label{font-size:11px;font-weight:800;letter-spacing:.04em;flex:none;min-width:42px;text-align:end}
.auth-strength.weak .auth-strength-bar>i{width:33%;background:var(--danger)}
.auth-strength.weak .auth-strength-label{color:var(--danger)}
.auth-strength.medium .auth-strength-bar>i{width:66%;background:var(--pw-orange)}
.auth-strength.medium .auth-strength-label{color:var(--pw-orange)}
.auth-strength.strong .auth-strength-bar>i{width:100%;background:var(--pw-green)}
.auth-strength.strong .auth-strength-label{color:var(--pw-green)}

.auth-field-err{font-size:12px;font-weight:700;color:var(--danger);line-height:1.35}
.auth-field-err[hidden]{display:none}
.auth-err{font-size:13px;font-weight:700;color:var(--danger);background:rgba(255,59,78,.1);border:1px solid rgba(255,59,78,.3);border-radius:10px;padding:10px 12px;line-height:1.4}
.auth-submit{font-size:15px;padding:16px;margin-top:4px}
.auth-submit:disabled{opacity:.55;pointer-events:none}

/* Aperçu de l'équipe choisie (« Tu joueras avec X »). */
.tp-preview{display:flex;align-items:center;gap:10px;min-height:20px}
.tp-preview .badge{width:30px;height:30px;font-size:10px;flex:none}
.tp-preview b{font-family:'Archivo Black';font-size:14px;color:var(--white);text-transform:uppercase;letter-spacing:.01em}
.tp-preview small{font-size:11px;font-weight:700;color:var(--muted)}

/* Sélecteur d'équipe horizontal + indices de scroll (fade sur les bords). */
.team-picker-wrap{position:relative}
.team-picker-wrap::before,.team-picker-wrap::after{content:"";position:absolute;top:0;bottom:8px;width:26px;pointer-events:none;z-index:1;transition:opacity .15s}
.team-picker-wrap::before{inset-inline-start:0;background:linear-gradient(to right,var(--night),transparent)}
.team-picker-wrap::after{inset-inline-end:0;background:linear-gradient(to left,var(--night),transparent)}
[dir="rtl"] .team-picker-wrap::before{background:linear-gradient(to left,var(--night),transparent)}
[dir="rtl"] .team-picker-wrap::after{background:linear-gradient(to right,var(--night),transparent)}
.team-picker{display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 2px 8px;scroll-snap-type:x proximity}
.tp-cell{flex:none;width:84px;min-height:84px;scroll-snap-align:start;background:var(--card);border:2px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 4px 9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:pointer;font-family:'Archivo',sans-serif;transition:transform .12s,border-color .15s,box-shadow .15s}
.tp-cell:active{transform:scale(.94)}
.tp-cell.on{border-color:var(--lime);box-shadow:0 0 0 2px var(--lime),0 4px 14px rgba(200,241,53,.25)}
.tp-cell span{font-size:9px;font-weight:700;color:var(--muted);text-align:center;line-height:1.2;text-transform:uppercase;letter-spacing:.03em;white-space:normal}
.tp-cell.on span{color:var(--white)}

/* ===== PROFILE (refonte Lot P1) — héro prestige → bande KPI → performance →
   jalons → historique. Même langage de cartes que les groupes Réglages
   (.set-group). Mobile-first, RTL via props logiques, reduced-motion gardé. ===== */

/* Titre de section muet (réutilisé : performance, jalons, historique). */
.pf-section-title{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:18px 2px 10px}
.pf-section-title:first-child{margin-top:0}

/* ---- Héro : carte focale (avatar anneau ligue + nom + prestige + ELO + XP). ---- */
.pf-hero{background:linear-gradient(165deg,var(--card),var(--card-2));border:1.5px solid rgba(255,255,255,.1);border-radius:18px;padding:18px 16px 16px;margin-bottom:14px}
.pf-hero-top{display:flex;align-items:center;gap:15px}
/* Avatar 80px avec anneau tinté par palier de ligue (mêmes tokens que .lg-badge). */
.pf-hero-av{position:relative;flex:none;width:80px;height:80px;border-radius:50%;padding:3px;background:rgba(95,182,255,.35)}
.pf-hero-av .avatar{width:74px;height:74px}
.pf-hero-av[data-tier="espoir"]{background:rgba(46,224,106,.45)}
.pf-hero-av[data-tier="pro"]{background:rgba(200,241,53,.5)}
.pf-hero-av[data-tier="ldc"]{background:rgba(255,200,61,.55)}
.pf-hero-av[data-tier="legendes"]{background:rgba(255,140,46,.6)}
.pf-hero-id{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.pf-name{font-family:'Archivo Black';font-size:23px;text-transform:uppercase;line-height:1;word-break:break-word}
/* Rangée de prestige : chip rang + chip Top X% (affichés seulement si dispo). */
.pf-hero-prestige{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pf-rank-chip{font-family:'Archivo Black';font-size:13px;color:var(--ink);background:var(--lime);border-radius:999px;padding:3px 11px;line-height:1.2}
.pf-top-chip{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);background:rgba(255,200,61,.14);border:1px solid rgba(255,200,61,.4);border-radius:999px;padding:3px 9px;white-space:nowrap}
/* ELO en titre. */
.pf-hero-elo{margin:15px 0 13px}
.pf-hero-elo b{font-family:'Archivo Black';font-size:32px;color:var(--lime);line-height:1}
.pf-hero-elo small{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-inline-start:7px}
/* Barre XP orientée objectif : en-tête (niveau + indice « +N XP → niv. L ») + barre. */
.pf-hero-xp{display:flex;flex-direction:column;gap:7px}
.pf-hero-xp-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pf-xp-goal{font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--sky-blue)}
.pf-hero-xp .xp-bar{max-width:none}

/* ---- Bande KPI : 3–4 cellules (valeur Archivo Black + libellé muet). ---- */
.pf-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:9px;margin-bottom:6px}
.pf-kpi{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:13px 8px;text-align:center;min-width:0}
.pf-kpi-v{font-family:'Archivo Black';font-size:24px;line-height:1;color:var(--white);white-space:nowrap}
.pf-kpi-v small{font-size:15px;color:var(--muted)}
.pf-kpi-flame{font-size:18px;margin-inline-end:2px}
.pf-kpi-l{font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- Historique : liste de lignes (badge résultat | adversaire | score | date).
   L'adversaire est un bouton (≥44px tactile) quand cliquable ; anneau de focus. ---- */
.pf-recent{display:flex;flex-direction:column;gap:7px}
.pf-recent-more{display:flex;flex-direction:column;gap:7px;margin-top:7px}
.pf-recent-more[hidden]{display:none}
.pf-more-btn{width:100%;margin-top:10px;min-height:44px;font-family:'Archivo',sans-serif;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--lime);background:var(--card);border:1.5px solid rgba(200,241,53,.3);border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s}
.pf-more-btn:hover{border-color:rgba(200,241,53,.6);background:rgba(200,241,53,.06)}
.pf-more-btn:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.pm-row{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:9px 13px;font-size:13px;font-weight:600}
.pm-badge{flex:none;font-weight:800;font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:8px;min-width:30px;text-align:center}
.pm-badge.res-w{background:rgba(46,224,106,.16);color:var(--pw-green)}
.pm-badge.res-l{background:rgba(255,59,78,.16);color:var(--danger)}
.pm-badge.res-f{background:rgba(255,140,46,.16);color:var(--pw-orange)}
.pm-opp{flex:1;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Adversaire cliquable : look texte, mais cible tactile pleine hauteur + focus. */
.pm-opp-btn{display:flex;align-items:center;min-height:44px;margin:-9px 0;padding:0;background:none;border:none;font:inherit;font-weight:700;color:var(--sky-blue);text-align:start;cursor:pointer}
.pm-opp-btn:hover{color:var(--lime);text-decoration:underline}
.pm-opp-btn:focus-visible{outline:3px solid var(--lime);outline-offset:2px;border-radius:6px}
.pm-score{flex:none;font-family:'Archivo Black';font-size:15px;color:var(--muted)}
.pm-date{flex:none;font-size:11px;font-weight:700;color:rgba(255,255,255,.6);min-width:46px;text-align:end}

/* ===== LEADERBOARD ===== */
.lb-me{flex:none;width:min(560px,100%);margin:0 auto;padding:4px 18px 6px}
.lb-me-label{display:block;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);margin-bottom:6px;padding-inline-start:4px}
.lb-row{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:9px 13px;margin-bottom:7px;font-size:13px;font-weight:600}
.lb-row.me{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime),0 4px 14px rgba(200,241,53,.14)}
/* Lignes cliquables (ouvrent la fiche joueur). Survol/appui discrets ; anneau de
   focus net pour la navigation clavier. .lb-row.me garde sa bordure lime. */
.lb-clickable{cursor:pointer;transition:background .15s,border-color .15s}
.lb-clickable:hover{background:var(--card-2);border-color:rgba(255,255,255,.16)}
.lb-clickable:active{transform:scale(.99)}
.lb-clickable:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.lb-rank{flex:none;width:30px;text-align:center;font-family:'Archivo Black';font-size:15px;color:var(--muted)}
.lb-row.me .lb-rank{color:var(--lime)}
.lb-badge{flex:none;display:flex}
.lb-badge .badge{width:34px;height:34px;font-size:10px}
.lb-name{flex:1;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-weight:700}
.lb-elo{flex:none;font-family:'Archivo Black';font-size:16px;color:var(--white);display:flex;flex-direction:column;align-items:flex-end;line-height:1.05}
.lb-elo small{font-family:'Archivo',sans-serif;font-size:10px;font-weight:700;color:var(--muted)}

/* ===== AMIS (Lot S2) — code ami + ajout + demandes + liste « en ligne » =====
   IA : un bloc « ton code » (label + code + Copier/Partager), une rangée d'ajout
   (champ + bouton), des titres de section muets, et des rangées
   « avatar | nom + sous-texte | actions ». Réutilise .ol-*/.lb-row/.card language
   + les variables CSS. Cibles tactiles ≥44px, anneaux de focus, RTL (pastille +
   chevrons se reflètent via dir/inset-inline), mouvement réduit géré plus bas. */

/* Bloc code ami — traité en « héros » : léger halo lime + dégradé subtil pour
   le mettre en évidence en tête de liste (cible tactile des boutons ≥44px). */
.fr-code{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:linear-gradient(135deg,rgba(200,241,53,.08),var(--card) 60%);border:1.5px solid rgba(200,241,53,.28);border-radius:16px;padding:15px 17px;margin-bottom:16px;box-shadow:0 6px 20px rgba(0,0,0,.22)}
.fr-code-info{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.fr-code-lbl{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fr-code-val{font-family:'Archivo Black';font-size:24px;letter-spacing:.16em;color:var(--lime);user-select:all;-webkit-user-select:all;text-shadow:0 0 14px rgba(200,241,53,.35)}
.fr-code-actions{display:flex;gap:8px;flex:none}
.fr-code-btn{font-size:12px;padding:11px 16px;min-height:44px;border-radius:12px}

/* Rangée d'ajout (champ + bouton) */
.fr-add{display:flex;gap:8px;margin-bottom:6px}
.fr-add-input{flex:1;min-width:0;background:var(--night-2);border:1.5px solid rgba(255,255,255,.12);border-radius:12px;padding:0 14px;min-height:46px;color:var(--white);font-family:'Archivo',sans-serif;font-size:15px;font-weight:600}
.fr-add-input::placeholder{color:var(--muted)}
.fr-add-input:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.fr-add-btn{flex:none;font-size:13px;padding:0 18px;min-height:46px;border-radius:12px}
.fr-add-err{color:var(--danger);font-size:12px;font-weight:700;margin:0 2px 10px;min-height:1em}
.fr-add-err[hidden]{display:none}

/* Recherche d'amis (R2) : champ pleine largeur au-dessus de la liste (si longue). */
.fr-search{width:100%;background:var(--night-2);border:1.5px solid rgba(255,255,255,.12);border-radius:12px;padding:0 14px;min-height:44px;margin:2px 0 12px;color:var(--white);font-family:'Archivo',sans-serif;font-size:15px;font-weight:600}
.fr-search::placeholder{color:var(--muted)}
.fr-search:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
/* « Voir plus » de la liste d'amis : pleine largeur, sous la liste. */
.fr-more{display:block;width:100%;margin:10px 0 4px;min-height:44px}

/* Section repliable « Ajouter un ami » (R2, en bas de l'écran Amis) : <details>
   natif, marqueur custom +/–, en-tête au style des titres de section. */
.fr-add-section{margin-top:24px;border-top:1.5px solid rgba(255,255,255,.08);padding-top:6px}
.fr-add-summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:12px 2px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.fr-add-summary::-webkit-details-marker{display:none}
.fr-add-summary::before{content:"+";font-size:18px;font-weight:800;line-height:1;color:var(--lime)}
.fr-add-section[open] .fr-add-summary::before{content:"–"}
.fr-add-summary:focus-visible{outline:3px solid var(--lime);outline-offset:2px;border-radius:8px}
.fr-add-body{padding-top:6px}

/* Titres de section + pastille de compteur + état vide.
   La pastille (.fr-count) affiche le nombre d'éléments de la section (décorative,
   aria-hidden : la liste qui suit porte déjà l'info). */
.fr-section-title{display:flex;align-items:center;gap:8px;margin:20px 2px 9px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.fr-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:rgba(200,241,53,.16);border:1px solid rgba(200,241,53,.3);color:var(--lime);font-size:11px;font-weight:800;letter-spacing:.02em}
.fr-empty{background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:18px;text-align:center;color:var(--muted);font-size:13px;font-weight:600}

/* Rangées (amis / demandes / sortantes) — carte arrondie, padding aéré, légère
   élévation au survol (mouvement réduit géré plus bas). */
.fr-list{display:flex;flex-direction:column;gap:8px}
.fr-row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:11px 14px;transition:border-color .15s,box-shadow .15s,transform .12s}
.fr-row:hover{border-color:rgba(255,255,255,.14);box-shadow:0 4px 14px rgba(0,0,0,.18);transform:translateY(-1px)}
.fr-av{flex:none;display:flex}
.fr-av .avatar{width:38px;height:38px}
.fr-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fr-name{color:var(--white);font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-sub{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--muted)}
.fr-status{color:var(--muted)}

/* Pastille en ligne / hors ligne (verte si en ligne). */
.fr-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 2px rgba(255,255,255,.06)}
.fr-dot.on{background:#37d67a;box-shadow:0 0 0 2px rgba(55,214,122,.25),0 0 8px rgba(55,214,122,.55)}
.fr-dot.busy{background:#f0a020;box-shadow:0 0 0 2px rgba(240,160,32,.25)}

/* Actions de rangée (boutons ronds ≥44px) */
.fr-actions{flex:none;display:flex;gap:7px}
.fr-btn{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1.5px solid rgba(255,255,255,.14);background:var(--night-2);color:var(--white);font-size:17px;font-weight:800;line-height:1;cursor:pointer;transition:background .15s,border-color .15s,transform .1s}
.fr-btn:active{transform:scale(.94)}
.fr-btn:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.fr-accept{color:#37d67a;border-color:rgba(55,214,122,.4)}
.fr-accept:hover{background:rgba(55,214,122,.14);border-color:#37d67a}
/* Refuser une DEMANDE d'ami (✕) : neutre, vire au rouge au survol — distinct du
   retrait d'ami (cercle rouge plein ci-dessous) ; reste apparié à l'accept ✓. */
.fr-decline{color:var(--muted)}
.fr-decline:hover{background:rgba(255,59,78,.12);border-color:var(--danger);color:var(--danger)}
/* Retirer un ami (✕) : action DESTRUCTRICE → rouge dès le repos + circulaire
   (border-radius:50% écrase les 12px de .fr-btn), fond rouge appuyé au survol. */
.fr-remove{border-radius:50%;color:var(--danger);border-color:rgba(255,59,78,.4);background:rgba(255,59,78,.1)}
.fr-remove:hover{background:rgba(255,59,78,.22);border-color:var(--danger)}
/* Défier (duel 1v1, lot S3) : « VS » en gras = action PRIMAIRE de duel. Remplissage
   lime accentué qui ressort des autres boutons ronds ; texte sombre lisible, suivi
   de lettres serré. Même gabarit ≥44px que .fr-btn (tap target, focus-visible,
   mouvement réduit déjà hérités). */
.fr-challenge{background:var(--lime);color:var(--ink);border-color:var(--lime);font-size:15px;font-weight:800;letter-spacing:.02em;box-shadow:0 2px 10px rgba(200,241,53,.3)}
.fr-challenge:hover{background:var(--lime-d);border-color:var(--lime-d)}
/* Historique de confrontation (📜) : bouton secondaire neutre (gabarit .fr-btn). */
.fr-history{font-size:18px}

/* Modale « confrontations » (H2H) : entête joueur, record V–D, liste de matchs
   (les lignes réutilisent .pm-row/.pm-badge du profil). */
.fr-h2h{display:flex;flex-direction:column;gap:14px;padding:4px 2px}
.fr-h2h-head{display:flex;flex-direction:column;align-items:center;gap:8px}
.fr-h2h-name{font-size:17px;font-weight:800;color:var(--white);text-align:center}
.fr-h2h-record{display:flex;align-items:flex-start;justify-content:center;gap:16px;font-size:34px;font-weight:900;line-height:1}
.fr-h2h-record small{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.fr-h2h-w{color:var(--pw-green);text-align:center}
.fr-h2h-l{color:var(--danger);text-align:center}
.fr-h2h-dash{color:var(--muted);font-weight:700;align-self:center}
.fr-h2h-total{text-align:center;font-size:12px;font-weight:600;color:var(--muted);margin-top:-8px}
.fr-h2h-list{display:flex;flex-direction:column;gap:8px}

/* Bouton « Amis » du menu : aligne l'icône sur l'accent secondaire (sky-blue). */
.btn-friends .ic{stroke:var(--sky-blue)}

/* ===== SETTINGS — listes groupées (Lot S4) =====
   IA : titres de section muets + cartes contenant des lignes
   « icône | libellé | contrôle ». Réutilise .set-switch/.set-knob,
   .set-volume-range, .team-picker/.tp-cell. RTL : la grille se reflète via dir. */
.set-group-title{max-width:440px;margin:18px auto 7px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.set-group-title:first-child{margin-top:0}
.set-group{max-width:440px;margin:0 auto;background:var(--card);border:1.5px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden}
.set-rowi{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;min-height:48px;padding:10px 14px;font-size:14px;font-weight:700;color:var(--white)}
.set-rowi + .set-rowi{border-top:1px solid rgba(255,255,255,.08)}
/* Variante pleine largeur : grille avatar + formulaires (ne suivent pas icône|libellé|contrôle). */
.set-rowi.block{grid-template-columns:1fr;align-items:stretch}
/* Lignes interactives (bascules) : tout le bloc est cliquable. */
#set-sound-toggle,#set-haptics-toggle{cursor:pointer}
.set-ic{flex:none;width:22px;text-align:center;font-size:18px;line-height:1;color:var(--muted)}
.set-rl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-rc{justify-self:end;display:flex;align-items:center;gap:8px;min-width:0}

.set-langs{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.set-lang{font-family:'Archivo',sans-serif;font-size:14px;font-weight:700;color:var(--muted);background:var(--night);border:1.5px solid rgba(255,255,255,.1);border-radius:12px;padding:13px 10px;cursor:pointer;transition:all .15s;text-align:center}
.set-lang.on{background:var(--lime);color:var(--ink);border-color:var(--lime)}

.set-switch{flex:none;width:46px;height:26px;border-radius:999px;background:rgba(255,255,255,.12);position:relative;transition:background .18s}
.set-knob{position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .18s,inset-inline-start .18s}
.set-rowi.on .set-switch{background:var(--lime)}
.set-rowi.on .set-knob{transform:translateX(20px)}
html[dir="rtl"] .set-rowi.on .set-knob{transform:translateX(-20px)}

/* Curseur de volume. La ligne est grisée quand le son est coupé (.is-muted). */
.set-rowi.is-muted{opacity:.5}
.set-volume-range{width:160px;max-width:48vw;min-width:0;height:6px;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.14);border-radius:999px;cursor:pointer;outline-offset:4px}
.set-volume-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--lime);border:2px solid var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:pointer}
.set-volume-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--lime);border:2px solid var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:pointer}
.set-volume-range::-moz-range-track{height:6px;background:rgba(255,255,255,.14);border-radius:999px}

.set-user{font-weight:800;font-size:15px;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.set-logout{flex:none;font-size:12px;padding:10px 18px;color:var(--danger);border-color:rgba(255,59,78,.3)}
.set-logout:hover{color:var(--danger);border-color:rgba(255,59,78,.6)}

/* Formulaires de compte (changer mdp / pseudo) : colonne. Champs au look des
   entrées auth (≥44px tactile). Dans une ligne .block pleine largeur. */
.set-form{display:flex;flex-direction:column;gap:9px}
.set-form + .set-form{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
.set-form-label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.set-input{font-family:'Archivo',sans-serif;font-size:15px;font-weight:600;color:var(--white);background:var(--night);border:1.5px solid rgba(255,255,255,.12);border-radius:12px;padding:13px 14px;min-height:44px;width:100%;transition:border-color .15s,box-shadow .15s}
.set-input:focus{border-color:var(--lime)}
.set-input:focus:not(:focus-visible){outline:none}
.set-input:disabled{opacity:.55;cursor:not-allowed}
.set-form-err{font-size:12px;font-weight:700;color:var(--danger);line-height:1.35}
.set-form-err[hidden]{display:none}
.set-form-btn{font-size:14px;padding:14px;min-height:44px;margin-top:2px}
.set-form-btn:disabled{opacity:.55;pointer-events:none}
.set-version{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--muted)}

/* ===== SETTINGS — drill-down en sous-pages (Lot G1) =====
   Racine = liste de sections (.set-nav-row : icône | libellé 1fr | valeur+chevron).
   Sous-pages = retour local + réutilisation des .set-group/.set-form existants.
   Cibles tactiles ≥44px, RTL (chevron via inset logique + flip dir), reduced-motion. */

/* Lignes de navigation de la racine. <button> pleine largeur, look « ligne de liste ». */
.set-nav-group{padding:0}
.set-nav-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;min-height:52px;padding:11px 14px;font-family:'Archivo',sans-serif;font-size:14px;font-weight:700;color:var(--white);background:none;border:none;text-align:start;cursor:pointer;transition:background .15s}
.set-nav-row + .set-nav-row{border-top:1px solid rgba(255,255,255,.08)}
.set-nav-row:hover{background:rgba(255,255,255,.04)}
.set-nav-row:active{background:rgba(255,255,255,.07)}
.set-nav-row:focus-visible{outline:3px solid var(--lime);outline-offset:-3px;border-radius:12px}
.set-nav-row.is-danger{color:var(--danger)}
.set-nav-lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-nav-end{justify-self:end;display:flex;align-items:center;gap:8px;min-width:0;color:var(--muted)}
.set-nav-val{min-width:0;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:13px}
/* Chevron : flèche fine ; pivote en RTL pour pointer vers le sens de lecture. */
.set-nav-chev{flex:none;font-size:20px;line-height:1;color:var(--muted);opacity:.7}
html[dir="rtl"] .set-nav-chev{transform:scaleX(-1)}
/* Vignette d'avatar à droite de la ligne Identité. */
.set-nav-av{flex:none;display:inline-flex}
.set-nav-av .avatar{width:30px;height:30px}

/* Bouton « retour » local en tête de sous-page (en plus du retour du header). */
.set-sub-back{display:inline-flex;align-items:center;gap:5px;min-height:44px;max-width:440px;margin:0 auto 6px;padding:6px 4px;font-family:'Archivo',sans-serif;font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--lime);background:none;border:none;cursor:pointer}
.set-sub-back span{font-size:19px;line-height:1}
html[dir="rtl"] .set-sub-back span{transform:scaleX(-1)}
.set-sub-back:hover{text-decoration:underline}
.set-sub-back:focus-visible{outline:3px solid var(--lime);outline-offset:2px;border-radius:8px}

/* Conteneur de sous-page (réutilise .set-group/.set-form ; largeur cohérente). */
.set-subpage{display:block}

/* Indice sous un champ de formulaire (téléphone optionnel, etc.). */
.set-form-hint{font-size:11px;font-weight:600;color:var(--muted);line-height:1.35;margin-top:-3px}

/* Sous-page Identité : avatar large + nom + bouton « Changer ». */
.set-identity{max-width:440px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:13px;background:var(--card);border:1.5px solid rgba(255,255,255,.1);border-radius:18px;padding:24px 16px}
.set-identity-av{width:104px;height:104px}
.set-identity-av .avatar{width:104px;height:104px}
.set-identity-name{font-family:'Archivo Black';font-size:21px;text-transform:uppercase;line-height:1;word-break:break-word;text-align:center}
.set-identity-change{min-height:44px;padding:12px 26px}

/* Email actuel (lecture seule) dans la sous-page Email. */
.set-cur-email{font-size:13px;font-weight:700;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:48vw}
/* Lien de contact (mailto) dans Support. */
.set-contact-link{font-size:13px;font-weight:700;color:var(--sky-blue);text-decoration:none}
.set-contact-link:hover{text-decoration:underline}
.set-contact-link:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:6px}

/* Modal de choix d'avatar (#ol-modal) : grille team-picker passée en multi-lignes. */
.set-avatar-modal{display:flex;flex-direction:column;gap:14px}
.set-avatar-modal-title{font-family:'Archivo Black';font-size:18px;text-transform:uppercase;text-align:center;margin:0}
.set-avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px;overflow:visible;padding:2px}
.set-avatar-grid .tp-cell{width:auto}

/* FAQ : accordéon <details> ; cibles ≥44px ; chevron tournant (reduced-motion safe). */
.set-faq{max-width:440px;margin:0 auto;display:flex;flex-direction:column;gap:9px}
.set-faq-item{background:var(--card);border:1.5px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden}
.set-faq-q{list-style:none;display:flex;align-items:center;gap:8px;min-height:48px;padding:13px 14px;font-size:14px;font-weight:700;color:var(--white);cursor:pointer}
.set-faq-q::-webkit-details-marker{display:none}
.set-faq-q::after{content:"›";margin-inline-start:auto;font-size:20px;color:var(--muted);transition:transform .18s}
html[dir="rtl"] .set-faq-q::after{transform:scaleX(-1)}
.set-faq-item[open] .set-faq-q::after{transform:rotate(90deg)}
html[dir="rtl"] .set-faq-item[open] .set-faq-q::after{transform:scaleX(-1) rotate(90deg)}
.set-faq-q:focus-visible{outline:3px solid var(--lime);outline-offset:-3px;border-radius:12px}
.set-faq-a{padding:0 14px 14px;font-size:13px;font-weight:600;line-height:1.5;color:var(--muted)}

/* À propos : bloc de texte descriptif + crédits. */
.set-about-text{max-width:440px;margin:14px auto 0;font-size:13px;font-weight:600;line-height:1.55;color:var(--muted)}
.set-about-text p{margin:0 0 9px}
.set-about-credits{font-size:12px;opacity:.85}
/* Bouton « Mettre à jour » de la sous-page À propos : pleine largeur, espacé du
   bloc version (réutilise .set-form-btn pour la taille + l'état :disabled). */
.set-update-btn{display:block;width:100%;margin-top:12px}

@media (prefers-reduced-motion:reduce){
  .set-nav-row,.set-faq-q::after,.set-sub-back{transition:none}
}

@media (max-width:600px){
  .pf-kpis{gap:7px}
  .pf-hero-av{width:68px;height:68px}
  .pf-hero-av .avatar{width:62px;height:62px}
  .pf-name{font-size:20px}
}

/* ===== ONLINE — BRACKET LIVE / SPECTATEUR ===== */
.match-card.live{border-color:rgba(95,182,255,.55);box-shadow:0 0 0 1px rgba(95,182,255,.4),0 6px 18px rgba(95,182,255,.16)}
.match-card.live .mc-live{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--sky-blue);box-shadow:0 0 0 0 rgba(95,182,255,.6);animation:livePulse 1.3s ease-in-out infinite}
html[dir="rtl"] .match-card.live .mc-live{right:auto;left:7px}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(95,182,255,.55)}50%{box-shadow:0 0 0 5px rgba(95,182,255,0)}}

/* Panneau scores live (bracket) — bande 2/5 sous le bracket.
   Conditionnel : le JS (spectator.js renderLive/clearLive) togglent l'attribut
   [hidden] (liste vide -> hidden). La règle de base .spec-live posant display:flex
   (même spécificité que le [hidden] de l'UA) masquerait le pilotage hidden ; on
   rétablit donc explicitement le masquage via .spec-live[hidden]{display:none}.
   Visible : 2 parts de la zone flexible (split 3/5 bracket - 2/5 liste) avec
   scroll VERTICAL interne, indépendant du scroll horizontal du bracket. */
.spec-live{width:min(560px,100%);margin:0 auto;padding:10px 16px;background:linear-gradient(180deg,rgba(26,39,72,.92),rgba(12,19,40,.92));border-top:1.5px solid rgba(255,255,255,.1);box-shadow:0 -8px 24px rgba(0,0,0,.4);z-index:3}
.spec-live[hidden]{display:none}
.spec-live:not([hidden]){flex:2 1 0;min-height:96px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;-webkit-overflow-scrolling:touch;animation:slideUp .35s both}
@keyframes slideUp{0%{transform:translateY(16px);opacity:0}100%{transform:none;opacity:1}}
/* En-tête de la bande : collant en haut pendant le scroll vertical (fond opaque
   pour ne pas laisser défiler les lignes dessous). */
.spec-live .sl-title{position:sticky;top:0;margin:-10px -16px 2px;padding:10px 16px 8px;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sky-blue);text-align:center;background:linear-gradient(180deg,rgba(26,39,72,.97) 70%,rgba(26,39,72,.92));z-index:1;display:flex;align-items:center;justify-content:center;gap:6px}
/* Pastille « en direct » + tag clignotants dans l'en-tête de la bande live. */
.sl-live-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--danger);animation:breathe 1.4s ease-in-out infinite}
.sl-live-tag{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-blue)}
@keyframes breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
.sl-row{display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;gap:8px;background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:8px 11px;font-size:12px;font-weight:700}
.sl-row.me{border-color:var(--lime);box-shadow:0 0 0 1px rgba(200,241,53,.4)}
.sl-row .sl-name{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sl-row .sl-name.a{text-align:end}
.sl-row .sl-name.b{text-align:start}
.sl-row.me .sl-name{color:var(--white)}
.sl-row .sl-score{font-family:'Archivo Black';font-size:15px;color:var(--white);min-width:46px;text-align:center}
.sl-row .sl-score small{color:var(--muted);font-family:'Archivo';margin:0 3px;font-weight:700}
.sl-chip{font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:999px;white-space:nowrap}
.sl-chip.live{background:rgba(95,182,255,.16);color:var(--sky-blue);border:1px solid rgba(95,182,255,.35);display:inline-flex;align-items:center;gap:4px;animation:chipBreathe 1.6s ease-in-out infinite}
/* Petit point clignotant en tête du chip « tour en cours » pour le rendre vivant. */
.sl-chip.live .sl-pulse{flex:none;width:5px;height:5px;border-radius:50%;background:currentColor;animation:breathe 1.4s ease-in-out infinite}
@keyframes chipBreathe{0%,100%{box-shadow:0 0 0 0 rgba(95,182,255,0)}50%{box-shadow:0 0 0 3px rgba(95,182,255,.12)}}
.sl-chip.done{background:rgba(255,255,255,.07);color:var(--muted);border:1px solid rgba(255,255,255,.12)}
@media (prefers-reduced-motion: reduce){.sl-live-dot,.sl-chip.live,.sl-pulse{animation:none}}

/* ===== ONLINE — PODIUM / FIN DE TOURNOI (#tend) ===== */
#tend{background:radial-gradient(ellipse 95% 60% at 50% -10%, #2a2150 0%, transparent 60%), var(--night);justify-content:flex-start;padding:0}
.tend-wrap{width:min(560px,100%);height:100%;display:flex;flex-direction:column;align-items:center;padding:calc(20px + env(safe-area-inset-top)) 18px calc(14px + env(safe-area-inset-bottom));overflow:auto;z-index:2}
#tend .end-verdict{font-size:clamp(34px,8vw,60px);margin-bottom:4px}
.tend-sub{color:var(--muted);font-size:14px;font-weight:700;text-align:center;margin-bottom:14px;min-height:18px}
/* Total redistribué (transparence) : ligne dorée discrète sous le sous-titre.
   Masquée (hidden) si le pot réparti est nul. */
.tend-pot{color:var(--gold);font-family:'Archivo Black';font-size:13px;text-align:center;margin:-6px 0 14px;letter-spacing:.02em}
.tend-pot[hidden]{display:none}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;width:100%;max-width:420px;margin-bottom:18px}
.pod-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.pod-step.empty{visibility:hidden}
/* Pastille de rang : pilule (min 24px) pour loger la médaille 🥇🥈🥉 + le chiffre
   sans déborder, tout en restant ~circulaire pour un chiffre seul. */
.pod-rank{font-family:'Archivo Black';font-size:13px;min-width:24px;height:24px;padding:0 7px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:3px;color:var(--ink);white-space:nowrap}
.pod-1 .pod-rank{background:var(--gold)}
.pod-2 .pod-rank{background:#cfd6e0}
.pod-3 .pod-rank{background:#d68b4a}
.pod-av .badge{width:46px;height:46px;font-size:13px}
.pod-1 .pod-av .badge{width:58px;height:58px;font-size:15px}
.pod-name{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center}
.pod-block{width:100%;border-radius:10px 10px 0 0;margin-top:4px;border:1.5px solid rgba(255,255,255,.1);border-bottom:none}
.pod-1 .pod-block{height:96px;background:linear-gradient(180deg,rgba(255,200,61,.34),rgba(255,200,61,.06));border-color:rgba(255,200,61,.4)}
.pod-2 .pod-block{height:66px;background:linear-gradient(180deg,rgba(207,214,224,.3),rgba(207,214,224,.05));border-color:rgba(207,214,224,.35)}
.pod-3 .pod-block{height:46px;background:linear-gradient(180deg,rgba(214,139,74,.3),rgba(214,139,74,.05));border-color:rgba(214,139,74,.35)}
.pod-step.me .pod-name{color:var(--lime)}

/* HERO « gains en coins » sur chaque marche : élément DOMINANT du résultat. Grand
   bloc or (taille/poids/couleur marqués), au-dessus du chip XP. L'icône 🪙 et le
   montant sont sur une ligne. RTL-safe (flex, aucune marge directionnelle). */
.coins-hero{display:inline-flex;align-items:center;gap:4px;font-family:'Archivo Black';color:var(--gold);line-height:1.05;text-shadow:0 2px 10px rgba(255,200,61,.3)}
.coins-hero-ic{font-size:18px}
.coins-hero-v{font-size:clamp(18px,5.4vw,24px);letter-spacing:.01em}
/* La marche or (1ʳᵉ place) met le hero encore plus en avant. */
.pod-1 .coins-hero-ic{font-size:21px}
.pod-1 .coins-hero-v{font-size:clamp(20px,6vw,27px)}

/* Chip XP (podium + classement) : remplace l'ancien .elo-chip ; teinte lime
   (progression). Gabarit pilule compact, masqué si vide (xpGained ≤ 0). */
.xp-chip{font-family:'Archivo Black';font-size:10px;padding:2px 7px;border-radius:999px;letter-spacing:.02em;background:rgba(200,241,53,.16);color:var(--lime);white-space:nowrap}
.xp-chip:empty{display:none}

/* Chip « gains en coins » compact (classement complet) : teinte dorée pour le 🪙.
   RTL-safe (pas de marge directionnelle codée en dur). */
.coins-chip{font-family:'Archivo Black';font-size:10px;padding:2px 7px;border-radius:999px;letter-spacing:.02em;background:rgba(255,200,61,.16);color:var(--gold);white-space:nowrap}
.coins-chip:empty{display:none}
/* Conteneur des chips d'une ligne de classement : une seule cellule de grille
   (coins + XP côte à côte) pour ne pas casser .ts-row. */
.ts-chips{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end}

.tend-standings-title{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);align-self:center;margin-bottom:8px}
.tend-standings{width:100%;display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
/* 4 colonnes (rang · avatar · pseudo · chips coins+XP) — la colonne ELO absolue
   a été retirée (l'ELO n'est plus montré en fin de tournoi). */
.ts-row{display:grid;grid-template-columns:26px auto 1fr auto;align-items:center;gap:10px;background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:11px;padding:8px 12px}
.ts-row.me{border-color:var(--lime);box-shadow:0 0 0 1px rgba(200,241,53,.4)}
.ts-row .ts-rank{font-family:'Archivo Black';font-size:14px;color:var(--muted);text-align:center}
.ts-row.me .ts-rank{color:var(--lime)}
.ts-row .ts-badge .badge{width:28px;height:28px;font-size:9px}
.ts-row .ts-name{font-size:13px;font-weight:700;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tend-actions{width:100%;max-width:420px;margin-top:auto;display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;justify-content:center}
.tend-actions .btn{min-height:44px}
/* Profil : mêmes dimensions que #tend-share (inutile de répéter l'inline style) */
#tend-profile{font-size:12px;padding:12px 28px}
/* Classement : lignes cachées au-delà du seuil initial (≥ rang 7) */
.tend-standings.collapsed .ts-row--extra{display:none}
.ts-btn-more{display:block;width:100%;margin-top:4px;background:transparent;border:1px solid rgba(255,255,255,.15);border-radius:11px;padding:10px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;text-align:center;min-height:44px}
.ts-btn-more:hover,.ts-btn-more:focus-visible{border-color:var(--lime);color:var(--lime);outline:none}

/* ===================================================================
   LOT E1d — Récompenses (chip header, hub, ligue/XP profil)
   Réutilise le langage visuel existant (cartes .card-2, .btn, barres .pf/.lb).
   Mobile-first, cibles ≥44px, :focus-visible lime, RTL via propriétés logiques.
=================================================================== */

/* ---- Chip solde dans le header global (#hdr-coins) ---- */
.hdr-coins{
  flex:none;min-height:40px;border:none;
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  background:linear-gradient(145deg,rgba(255,200,61,.24),rgba(255,200,61,.06));
  border-radius:999px;padding:6px 13px;
  color:var(--gold);font-family:'Archivo',sans-serif;
  box-shadow:0 5px 11px rgba(0,0,0,.5),inset 2px 2px 3px rgba(255,255,255,.20),inset -3px -4px 6px rgba(0,0,0,.4);
  transition:transform .12s,box-shadow .12s;
}
.hdr-coins[hidden]{display:none}
.hdr-coins:active{transform:scale(.94);box-shadow:0 2px 5px rgba(0,0,0,.45),inset 3px 3px 6px rgba(0,0,0,.5),inset -2px -2px 4px rgba(255,255,255,.12)}
.hdr-coins .hc-ic{font-size:14px;line-height:1}
.hdr-coins .hc-val{font-family:'Archivo Black';font-size:14px;letter-spacing:.02em;color:var(--white)}

/* ---- Écran hub : le scroll porte lui-même la largeur/hauteur (pas de .ol-wrap). ---- */
#rewards{align-items:stretch}
#rewards .ol-scroll{width:min(560px,100%);margin:0 auto;height:100%}
/* Header global : on décale le haut du scroll (le header recouvre le sommet). */
body.has-app-header #rewards .ol-scroll{padding-top:calc(8px + var(--header-h) + env(safe-area-inset-top))}

/* ---- Cartes du hub ---- */
.rw-card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:15px 15px 16px;margin-bottom:14px}
.rw-card-title{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}

/* Solde : grande pastille pièce + valeur + bouton « Recharger ». */
.rw-balance-card{background:linear-gradient(160deg,rgba(255,200,61,.12),var(--card) 60%);border-color:rgba(255,200,61,.25)}
.rw-balance-head{display:flex;align-items:center;gap:13px}
.rw-balance-ic{font-size:30px;line-height:1;flex:none}
.rw-balance-box{flex:1;min-width:0}
.rw-balance-label{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rw-balance-val{font-family:'Archivo Black';font-size:30px;line-height:1.05;color:var(--gold);word-break:break-all}
.rw-recharge-toggle{flex:none;font-size:12px;padding:11px 16px;min-height:44px}
.rw-recharge-toggle.on{color:var(--white);border-color:rgba(255,255,255,.35)}

/* Packs de recharge (révélés par le bouton). */
.rw-packs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.rw-packs[hidden]{display:none}
.rw-pack{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;background:var(--card-2);border:1.5px solid rgba(255,200,61,.3);border-radius:13px;cursor:pointer;font-family:'Archivo',sans-serif;transition:transform .12s,border-color .15s,background .15s}
.rw-pack:hover{border-color:rgba(255,200,61,.6);background:rgba(255,200,61,.08)}
.rw-pack:active{transform:scale(.96)}
.rw-pack-ic{font-size:18px;line-height:1}
.rw-pack-amt{font-family:'Archivo Black';font-size:16px;color:var(--white)}

/* ---- Roue quotidienne v2 (8 secteurs colorés, pointeur+halo, hub glossy) ---- */
.rw-wheel-card{text-align:center}
.rw-wheel-wrap{position:relative;width:200px;height:200px;margin:8px auto 16px}
/* Halo lumineux derrière la roue (lueur douce, pulsation discrète). */
.rw-wheel-halo{position:absolute;inset:-14px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,200,61,.30),rgba(255,200,61,0) 68%);
  animation:rw-halo 2.6s ease-in-out infinite}
@keyframes rw-halo{0%,100%{opacity:.55;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}
.rw-wheel{position:absolute;inset:0;border-radius:50%;transform:rotate(0deg);z-index:1;
  /* 8 secteurs colorés (cosmétique, v2) ; le serveur décide du résultat.
     Palette alternée lime / sky-blue / gold / orange pour des secteurs lisibles. */
  background:conic-gradient(
    var(--lime) 0 45deg, var(--sky-blue) 45deg 90deg,
    var(--gold) 90deg 135deg, var(--pw-orange) 135deg 180deg,
    var(--lime) 180deg 225deg, var(--sky-blue) 225deg 270deg,
    var(--gold) 270deg 315deg, var(--pw-orange) 315deg 360deg);
  border:5px solid rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 3px rgba(8,13,26,.45),inset 0 0 30px rgba(0,0,0,.55),0 8px 26px rgba(0,0,0,.45);
}
.rw-wheel-face{position:absolute;inset:0}
.rw-wheel-lbl{position:absolute;top:50%;left:50%;width:0;height:0;display:flex;align-items:center;justify-content:center}
.rw-wheel-lbl>span{display:block;font-family:'Archivo Black';font-size:13px;color:var(--ink);text-shadow:0 1px 2px rgba(255,255,255,.45);white-space:nowrap}
/* Moyeu central glossy (cache le centre des secteurs, effet bouton brillant). */
.rw-wheel-hub{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;z-index:3;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#fff,#d7deea 38%,#aab4c8 70%,#7e889c);
  border:3px solid rgba(255,255,255,.7);box-shadow:0 3px 8px rgba(0,0,0,.5),inset 0 -3px 6px rgba(0,0,0,.25),inset 0 3px 5px rgba(255,255,255,.7)}
/* Pointeur fixe (haut, pointe vers le bas) + halo de lueur dorée. */
.rw-wheel-pin{position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:0;height:0;border-inline-start:12px solid transparent;border-inline-end:12px solid transparent;border-top:20px solid var(--gold);filter:drop-shadow(0 0 6px rgba(255,200,61,.85)) drop-shadow(0 2px 3px rgba(0,0,0,.5));z-index:4}
.rw-wheel-card .rw-spin{width:min(280px,100%);font-size:15px;padding:15px;min-height:48px}
.rw-wheel-card .rw-spin:disabled{opacity:.5;pointer-events:none}
.rw-next-spin{margin-top:9px;font-size:12px;font-weight:700;color:var(--muted);min-height:16px}

/* ---- Payoff du spin : halo/flash de la roue à l'arrêt (Lot R-A) ----
   .is-win posé ~900 ms par le JS quand le serveur a payé. Pulse doré bref
   (box-shadow). Coupé franchement sous prefers-reduced-motion (cf. bloc dédié). */
.rw-wheel.is-win{animation:rw-win-pulse .9s ease-out 1}
@keyframes rw-win-pulse{
  0%{box-shadow:inset 0 0 0 3px rgba(8,13,26,.45),inset 0 0 30px rgba(0,0,0,.55),0 0 0 0 rgba(255,200,61,.7),0 0 18px rgba(255,200,61,.5)}
  45%{box-shadow:inset 0 0 0 3px rgba(8,13,26,.45),inset 0 0 30px rgba(0,0,0,.55),0 0 0 10px rgba(255,200,61,0),0 0 46px rgba(255,200,61,.95)}
  100%{box-shadow:inset 0 0 0 3px rgba(8,13,26,.45),inset 0 0 30px rgba(0,0,0,.55),0 0 0 0 rgba(255,200,61,0),0 8px 26px rgba(0,0,0,.45)}
}

/* ---- Coin-fly : pièces volantes vers le solde (Lot R-A) ----
   Calque fixe plein écran NON interactif (pointer-events:none → ne bloque jamais
   les taps) ; chaque pièce part de son ancre (left/top posés inline par le JS) et
   file vers le solde via les vars --dx/--dy (+ arc --arc), retirée en fin d'anim. */
.rw-coinfly{position:fixed;inset:0;z-index:360;pointer-events:none}
.rw-coin{position:fixed;font-size:20px;line-height:1;pointer-events:none;will-change:transform,opacity;
  transform:translate(-50%,-50%);filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
  animation:rw-coin-fly .6s cubic-bezier(.4,.05,.5,1) both}
@keyframes rw-coin-fly{
  0%{transform:translate(-50%,-50%) scale(.6);opacity:0}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
  60%{transform:translate(calc(-50% + (var(--dx)*.6)),calc(-50% + (var(--dy)*.6) + var(--arc))) scale(1)}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.5);opacity:0}
}

/* ---- Reveal de gain (carte célébrative au payoff du spin, Lot R-A) ----
   Overlay fixe + backdrop (langage des modales) ; carte dorée glossy avec montant
   et texte ; burst de lueur derrière. Dismissable (tap/Échap) → pas de focus-trap.
   Toutes les animations coupées sous prefers-reduced-motion (la carte reste). */
.rw-reveal{position:fixed;inset:0;z-index:340;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(8,13,26,.66);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:modalFade .18s ease both;cursor:pointer}
.rw-reveal-card{position:relative;width:min(320px,100%);text-align:center;
  background:linear-gradient(170deg,rgba(255,200,61,.18),var(--card) 62%);
  border:1.5px solid rgba(255,200,61,.4);border-radius:22px;padding:30px 26px;
  box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 40px rgba(255,200,61,.25),inset 0 1px 0 rgba(255,255,255,.1);
  animation:rw-reveal-in .42s cubic-bezier(.22,1,.36,1) both}
@keyframes rw-reveal-in{0%{transform:scale(.6) translateY(10px);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1) translateY(0);opacity:1}}
/* Lueur pulsante derrière la carte (gerbe dorée). */
.rw-reveal-burst{position:absolute;inset:-30px;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,200,61,.45),rgba(255,200,61,0) 66%);
  animation:rw-reveal-glow 1.1s ease-in-out infinite}
@keyframes rw-reveal-glow{0%,100%{opacity:.6;transform:scale(.96)}50%{opacity:1;transform:scale(1.06)}}
.rw-reveal-amt{font-family:'Archivo Black',sans-serif;font-size:40px;line-height:1;color:var(--gold);
  text-shadow:0 2px 8px rgba(255,200,61,.4);letter-spacing:.01em}
.rw-reveal-text{margin-top:12px;font-family:'Archivo',sans-serif;font-size:15px;font-weight:800;color:var(--white)}

/* ---- Quêtes (jour / semaine) ---- */
/* En-tête : compte à rebours reset (00:00 UTC) + bouton « Tout réclamer ». */
.rw-quests-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.rw-reset{font-size:12px;font-weight:700;color:var(--muted);min-height:16px;font-variant-numeric:tabular-nums}
.rw-reset:empty{display:none}
.rw-claim-all{flex:none;font-size:11px;padding:9px 14px;min-height:40px;border-radius:11px}
.rw-claim-all[aria-busy="true"]{opacity:.6;pointer-events:none}
.rw-subhead{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin:14px 0 9px}
.rw-subhead:first-child{margin-top:0}
.rw-quest-list{display:flex;flex-direction:column;gap:8px}
.rw-quest{display:flex;align-items:center;gap:11px;background:var(--card-2);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:11px 12px}
.rw-quest.is-done{border-color:rgba(200,241,53,.4)}
.rw-quest.is-claimed{opacity:.6}
.rw-quest-main{flex:1;min-width:0}
.rw-quest-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px}
.rw-quest-title{font-size:13px;font-weight:700;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rw-quest-reward{flex:none;font-size:11px;font-weight:800;color:var(--gold)}
.rw-quest-count{margin-top:5px;font-size:10px;font-weight:700;color:var(--muted)}
/* Barre de progression de quête (réutilise l'allure des barres lb/xp). */
.rw-prog{height:7px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.rw-prog>i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--sky-blue),var(--lime));transition:width .45s cubic-bezier(.22,1,.36,1)}
[dir="rtl"] .rw-prog>i{margin-inline-start:auto;background:linear-gradient(270deg,var(--sky-blue),var(--lime))}
.rw-claim{flex:none;font-size:12px;padding:10px 16px;min-height:44px;border-radius:12px}
.rw-claim:disabled{opacity:.55;pointer-events:none}

/* ---- Succès à vie (lot R-C) ----------------------------------------------
   Rangée : icône de famille | titre + progression | récompense + bouton.
   Réutilise l'allure de .rw-quest / .rw-prog. États : débloqué (bordure lime,
   comme .is-done), réclamé (atténué .is-claimed). Boutons : .rw-ach-claim porte
   aussi .rw-claim → cible tactile ≥44px + désactivation héritées. La liste est
   scrollable (max-height) pour rester compacte malgré 16 succès.
   Aucune nouvelle animation → rien à neutraliser en reduced-motion (les barres
   .rw-prog réutilisent une transition déjà présente, gérée par le bloc existant). */
.rw-ach-list{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.rw-ach{display:flex;align-items:center;gap:11px;background:var(--card-2);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:11px 12px}
.rw-ach.is-done{border-color:rgba(200,241,53,.4)}
.rw-ach.is-claimed{opacity:.55}
.rw-ach-ic{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;border-radius:9px;background:rgba(255,255,255,.06)}
.rw-ach-main{flex:1;min-width:0}
.rw-ach-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px}
.rw-ach-title{font-size:13px;font-weight:700;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rw-ach-reward{flex:none;font-size:11px;font-weight:800;color:var(--gold)}
/* Récompenses d'un succès : coins + cosmétique(s) débloqué(s). */
.rw-ach-rewards{flex:none;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:60%}
.rw-ach-cos{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--pw-green);background:rgba(46,224,106,.1);border:1px solid rgba(46,224,106,.3);border-radius:999px;padding:2px 7px 2px 3px;max-width:130px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.rw-ach-cos-img{width:18px;height:18px;border-radius:50%;object-fit:cover;flex:none;background:rgba(0,0,0,.2)}
.rw-ach-count{margin-top:5px;font-size:10px;font-weight:700;color:var(--muted)}
/* Rangée de succès cliquable → ouvre le modal détail (clic hors bouton Réclamer). */
.rw-ach--clickable{cursor:pointer;transition:border-color .15s,background .15s}
.rw-ach--clickable:hover{border-color:rgba(255,255,255,.18)}

/* ---- Modal « détail d'un succès » (#ol-modal-body) : icône + titre + statut +
   barre de progression + récompense. Réutilise .rw-prog et les chips .rw-ach-*. ---- */
.achd{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:6px 2px 2px}
.achd-ic{font-size:46px;line-height:1}
.achd-title{font-size:17px;font-weight:900;color:var(--white);margin:0;line-height:1.2}
.achd-status{font-size:11px;font-weight:800;letter-spacing:.04em;padding:4px 12px;border-radius:999px;text-transform:uppercase}
.achd-status--locked{background:rgba(255,255,255,.08);color:var(--muted);border:1px solid rgba(255,255,255,.18)}
.achd-status--unlocked{background:rgba(200,241,53,.14);color:var(--lime);border:1px solid rgba(200,241,53,.4)}
.achd-status--claimed{background:rgba(46,224,106,.12);color:var(--pw-green);border:1px solid rgba(46,224,106,.4)}
.achd .rw-prog{width:100%;margin-top:2px}
.achd-count{font-size:12px;font-weight:800;color:var(--muted)}
.achd-reward-label{margin-top:6px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.achd-rewards{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}

/* ---- Calendrier de streak J1→J7 (v2 : jours faits remplis + jour courant) ---- */
.rw-streak{display:flex;gap:6px;flex-wrap:wrap}
.rw-streak-day{position:relative;flex:1;min-width:34px;min-height:42px;display:flex;align-items:center;justify-content:center;background:var(--card-2);border:1.5px solid rgba(255,255,255,.08);border-radius:10px;font-family:'Archivo Black';font-size:12px;color:var(--muted);transition:background .18s,border-color .18s,color .18s}
/* Jour déjà atteint : « rempli » lime + coche. */
.rw-streak-day.done{background:linear-gradient(180deg,rgba(200,241,53,.28),rgba(200,241,53,.14));border-color:var(--lime);color:var(--lime)}
.rw-streak-day.done::after{content:"✓";position:absolute;top:2px;inset-inline-end:4px;font-family:'Archivo',sans-serif;font-size:9px;font-weight:800;color:var(--lime)}
/* Jour courant (prochain à valider) : surligné or + halo pulsant. */
.rw-streak-day.today{border-color:var(--gold);color:var(--gold);background:rgba(255,200,61,.14);box-shadow:0 0 0 1px var(--gold),0 0 12px rgba(255,200,61,.45);animation:rw-today-pulse 1.8s ease-in-out infinite}
@keyframes rw-today-pulse{0%,100%{box-shadow:0 0 0 1px var(--gold),0 0 8px rgba(255,200,61,.35)}50%{box-shadow:0 0 0 1px var(--gold),0 0 16px rgba(255,200,61,.6)}}
/* Aperçu « Prochaine récompense : N 🪙 ». */
.rw-streak-next{margin-top:10px;font-size:12px;font-weight:800;color:var(--gold);text-align:center}

/* ---- Badge ligue (lecture seule) — petite pastille tintée par palier ---- */
.lg-badge{display:inline-flex;align-items:center;align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:rgba(95,182,255,.16);color:var(--sky-blue);border:1px solid rgba(95,182,255,.35);white-space:nowrap}
/* Teinte par palier : jeunes (bleu), espoir (vert), pro/ldc/légendes (or → chaud). */
.lg-badge[data-tier="u12"],.lg-badge[data-tier="u15"],.lg-badge[data-tier="u17"],.lg-badge[data-tier="u19"]{background:rgba(95,182,255,.16);color:var(--sky-blue);border-color:rgba(95,182,255,.35)}
.lg-badge[data-tier="espoir"]{background:rgba(46,224,106,.16);color:var(--pw-green);border-color:rgba(46,224,106,.4)}
.lg-badge[data-tier="pro"]{background:rgba(200,241,53,.16);color:var(--lime);border-color:rgba(200,241,53,.4)}
.lg-badge[data-tier="ldc"]{background:rgba(255,200,61,.16);color:var(--gold);border-color:rgba(255,200,61,.45)}
.lg-badge[data-tier="legendes"]{background:rgba(255,140,46,.18);color:var(--pw-orange);border-color:rgba(255,140,46,.5)}

/* ---- Niveau + barre XP (héro profil + fiche joueur) ----
   (.pf-prog/.pf-prog-row retirés avec leagueXpHTML, désormais inutilisés ;
   la barre XP du héro est posée par pfHeroHTML/.pf-hero-xp.) */
.pf-level{font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.xp-bar{position:relative;height:16px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;max-width:240px}
.xp-bar>i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--sky-blue),var(--lime));transition:width .5s cubic-bezier(.22,1,.36,1)}
[dir="rtl"] .xp-bar>i{margin-inline-start:auto;background:linear-gradient(270deg,var(--sky-blue),var(--lime))}
.xp-bar-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;letter-spacing:.04em;color:var(--white);text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* ===== SAISON (Lot R2) — bloc saison sous le héro du profil ============
   Carte compacte : rangée [badge ligue · « Saison N » · J-restants] puis ligne
   d'objectif (« Plus que X pts avant Y » ou « Ligue max ») + barre de montée
   (réutilise .xp-bar). Même langage que .pf-hero (carte, --muted, props logiques
   pour le RTL). Aucune animation ici → rien à neutraliser en reduced-motion. */
.pf-season{background:linear-gradient(165deg,var(--card),var(--card-2));border:1.5px solid rgba(255,255,255,.1);border-radius:16px;padding:13px 15px;margin-bottom:14px;margin-top:-2px;display:flex;flex-direction:column;gap:9px}
.pf-season-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pf-season-title{font-family:'Archivo Black';font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--white)}
/* J-restants : pastille discrète, calée en fin de ligne (logique → RTL safe). */
.pf-season-days{margin-inline-start:auto;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);background:rgba(255,200,61,.12);border:1px solid rgba(255,200,61,.35);border-radius:999px;padding:3px 9px;white-space:nowrap}
.pf-season-goal{font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--sky-blue)}
.pf-season-max{color:var(--gold)}
.pf-season-bar{max-width:none}

/* ===== ÉCRAN DE FIN DE SAISON (Lot R2) — contenu de #ol-modal ===========
   Carte de célébration (une seule fois) : trophée + titre + badge ligue + corps
   « Ligue X · +N 🪙 » + bouton Continuer (≥44px). Entrée/scintillement gardés
   sous prefers-reduced-motion (voir bloc dédié plus bas). */
.season-end{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:6px 2px 2px}
.season-end-burst{font-size:54px;line-height:1;filter:drop-shadow(0 6px 16px rgba(255,200,61,.45))}
.season-end.is-anim .season-end-burst{animation:seasonEndPop .5s cubic-bezier(.22,1,.36,1) both}
.season-end-title{font-family:'Archivo Black';font-size:21px;text-transform:uppercase;line-height:1.1;color:var(--white);margin:0}
.season-end-badge{font-size:11px;padding:5px 12px}
.season-end-body{font-size:15px;font-weight:700;color:var(--gold)}
.season-end-ok{width:100%;margin-top:6px;min-height:44px}
.season-end.is-anim{animation:seasonEndIn .32s ease-out both}
@keyframes seasonEndIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes seasonEndPop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}

@media (max-width:600px){
  .rw-wheel-wrap{width:180px;height:180px}
  .rw-wheel-lbl>span{font-size:12px}
}

/* Mouvement réduit : la roue ne tourne pas (l'angle final est posé direct par le
   JS qui lit prefers-reduced-motion) ; on neutralise aussi la transition CSS et
   toutes les pulsations (halo, jour courant) pour garantir l'absence d'animation.
   Le résultat reste annoncé via #toast. */
@media (prefers-reduced-motion:reduce){
  .rw-wheel{transition:none!important}
  .rw-wheel-halo,.rw-streak-day.today{animation:none!important}
  /* Payoff du spin (Lot R-A) : halo/flash de la roue et lueur du reveal coupés ;
     le coin-fly est déjà un no-op côté JS (on neutralise aussi par sécurité).
     La carte de révélation RESTE affichée mais sans mouvement (entrée/glow figés)
     — le texte + le solde restent mis à jour. */
  .rw-wheel.is-win,.rw-reveal,.rw-reveal-card,.rw-reveal-burst,.rw-coin{animation:none!important}
  /* Écran de fin de saison (Lot R2) : la carte RESTE affichée, sans mouvement
     (entrée + pop du trophée figés). Le texte + le bouton Continuer demeurent. */
  .season-end,.season-end.is-anim,.season-end.is-anim .season-end-burst{animation:none!important}
}

/* ===================================================================
   PORTEFEUILLE (Lot R3) — solde + dépôt multi-méthodes + retrait simulé +
   historique. Mobile-first, RTL-safe (logical props), reduced-motion respecté.
=================================================================== */
#wallet{align-items:stretch}
#wallet .ol-scroll{width:min(560px,100%);margin:0 auto;height:100%}
body.has-app-header #wallet .ol-scroll{padding-top:calc(8px + var(--header-h) + env(safe-area-inset-top))}

.wallet-card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:15px 15px 16px;margin-bottom:14px}
.wallet-card-title{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.wallet-sub{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin:12px 0 9px}

/* Solde : grande pastille pièce + valeur. */
.wallet-balance-card{display:flex;align-items:center;gap:13px;background:linear-gradient(160deg,rgba(255,200,61,.12),var(--card) 60%);border-color:rgba(255,200,61,.25)}
.wallet-balance-ic{font-size:30px;line-height:1;flex:none}
.wallet-balance-box{flex:1;min-width:0}
.wallet-balance-label{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wallet-balance-val{font-family:'Archivo Black';font-size:30px;line-height:1.05;color:var(--gold);word-break:break-all}

/* Sélecteur de méthodes de paiement (dépôt + retrait). */
.pay-methods{display:flex;flex-wrap:wrap;gap:8px}
.pay-method{flex:1 1 auto;min-width:84px;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:56px;padding:9px 6px;background:var(--card-2);border:1.5px solid rgba(255,255,255,.1);border-radius:13px;cursor:pointer;font-family:'Archivo',sans-serif;color:var(--muted);transition:transform .12s,border-color .15s,background .15s,color .15s}
.pay-method:hover{border-color:rgba(255,255,255,.3);color:var(--white)}
.pay-method:active{transform:scale(.96)}
.pay-method.active{background:rgba(95,182,255,.12);border-color:var(--sky-blue);color:var(--white)}
.pay-ic{font-size:20px;line-height:1}
.pay-name{font-size:11px;font-weight:700;text-align:center;white-space:nowrap}

/* Packs de dépôt (4 boutons « 🪙 N »). */
.wallet-packs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.wallet-pack{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;background:var(--card-2);border:1.5px solid rgba(255,200,61,.3);border-radius:13px;cursor:pointer;font-family:'Archivo',sans-serif;transition:transform .12s,border-color .15s,background .15s}
.wallet-pack:hover{border-color:rgba(255,200,61,.6);background:rgba(255,200,61,.08)}
.wallet-pack:active{transform:scale(.96)}
.wallet-pack-ic{font-size:18px;line-height:1}
.wallet-pack-amt{font-family:'Archivo Black';font-size:16px;color:var(--white)}

/* Retrait : champ montant + bouton + badge Simulation + encart succès. */
.wallet-amount{width:100%;box-sizing:border-box;min-height:48px;padding:12px 14px;background:var(--card-2);border:1.5px solid rgba(255,255,255,.14);border-radius:13px;color:var(--white);font-family:'Archivo Black';font-size:18px;text-align:center}
.wallet-amount:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.wallet-withdraw-btn{width:100%;margin-top:14px;min-height:48px;font-size:15px}
/* Badge « Simulation » discret (titre retrait + encart succès). */
.sim-badge{display:inline-flex;align-items:center;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:rgba(255,140,46,.16);color:var(--pw-orange);border:1px solid rgba(255,140,46,.4);white-space:nowrap}
.wallet-withdraw-done{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:13px;padding:12px 13px;background:rgba(46,224,106,.1);border:1px solid rgba(46,224,106,.4);border-radius:13px}
.wallet-withdraw-done[hidden]{display:none}
.wd-check{font-size:18px;line-height:1;flex:none}
.wd-text{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--white)}

/* Historique : lignes raison + date + montant signé coloré. */
.wallet-history{display:flex;flex-direction:column;gap:8px}
.tx-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card-2);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:11px 13px}
.tx-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.tx-reason{font-size:13px;font-weight:700;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-date{font-size:10px;font-weight:700;color:var(--muted)}
.tx-side{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.tx-amount{font-family:'Archivo Black';font-size:14px;white-space:nowrap}
.tx-amount.pos{color:var(--pw-green)}
.tx-amount.neg{color:var(--danger)}
.tx-bal{font-size:10px;font-weight:700;color:var(--muted)}
.wallet-empty{text-align:center;color:var(--muted);font-size:13px;font-weight:600;padding:22px 8px}
.wallet-more-btn{width:100%;margin-top:12px;min-height:44px;font-size:13px}
.wallet-more-btn[hidden]{display:none}

@media (max-width:600px){
  .pay-method{min-width:64px;padding:8px 4px}
  .pay-name{font-size:10px}
}

/* ===================================================================
   PARRAINAGE — mon code/lien d'invitation + stats + « j'ai un code ».
   Mêmes conventions d'écran que Wallet/Récompenses (largeur centrée,
   padding sous le header global) + cartes réutilisant les tokens .rw-card.
=================================================================== */
#referral{align-items:stretch}
#referral .ol-scroll{width:min(560px,100%);margin:0 auto;height:100%}
body.has-app-header #referral .ol-scroll{padding-top:calc(8px + var(--header-h) + env(safe-area-inset-top))}

.rf-card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:15px 15px 16px;margin-bottom:14px}
.rf-card-title{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.rf-code{font-family:'Archivo Black';font-size:28px;letter-spacing:.16em;color:var(--lime);user-select:all;-webkit-user-select:all;text-shadow:0 0 14px rgba(200,241,53,.35);word-break:break-all}
.rf-sub{font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.5;margin-top:10px}
.rf-link-label{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin:14px 0 7px}
.rf-link{font-size:12.5px;font-weight:700;color:var(--white);background:var(--card-2);border:1px solid rgba(255,255,255,.1);border-radius:11px;padding:10px 12px;word-break:break-all;user-select:all;-webkit-user-select:all}
.rf-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.rf-btn{flex:1 1 auto;min-height:46px;font-size:14px}
.rf-stats{font-size:14px;font-weight:700;color:var(--white)}
.rf-claim{display:flex;gap:8px;flex-wrap:wrap}
.rf-claim-input{flex:1 1 140px;min-width:0;box-sizing:border-box;min-height:48px;padding:12px 14px;background:var(--card-2);border:1.5px solid rgba(255,255,255,.14);border-radius:13px;color:var(--white);font-family:'Archivo Black';font-size:16px;letter-spacing:.1em;text-transform:uppercase}
.rf-claim-input:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.rf-claim-btn{flex:none;min-height:48px;font-size:14px}
.rf-claim-err{margin-top:10px;font-size:12.5px;font-weight:700;color:var(--danger)}
.rf-claim-err[hidden]{display:none}

/* ===================================================================
   BOUTIQUE — cosmétiques (avatars / émotes / stickers). Réutilise les
   tokens des cartes Récompenses (.rw-card / .rw-balance-card) + le badge
   .lg-badge pour le langage visuel. Grille responsive de cartes.
=================================================================== */
/* ── Layout chrome-compatible : barre de catégories FIXE sous le header global,
   vitrine défilante entre la barre et le footer. Le solde vit dans la pastille 🪙
   du header (pas de doublon). #shop s'aligne en haut (pas centré comme les écrans
   pleins) ; le décalage sous le header est porté par le padding-top du screen. */
#shop{justify-content:flex-start}
body.has-app-header #shop{padding-top:calc(var(--header-h) + env(safe-area-inset-top))}
/* Barre fixe : onglets (flex) + bouton loadout (icône). Largeur centrée (560px). */
.shop-topbar{flex:none;width:min(560px,100%);margin:0 auto;padding:10px 18px;border-bottom:1px solid rgba(255,255,255,.06)}
.shop-topbar-row{display:flex;align-items:stretch;gap:8px}
/* Vitrine défilante : largeur centrée (comme Récompenses) ; bas dégagé du footer
   par la règle générique body.has-app-footer .ol-scroll. */
#shop .ol-scroll{width:min(560px,100%);margin:0 auto;padding-top:12px}

/* Onglets segmentés (Avatars / Émotes / Stickers) avec icône — occupent la barre. */
.shop-tabs{flex:1;display:flex;gap:6px;margin:0;background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:5px}
.shop-tab{flex:1;min-height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:none;background:transparent;border-radius:11px;color:var(--muted);font-family:'Archivo',sans-serif;font-size:11px;font-weight:800;letter-spacing:.03em;cursor:pointer;transition:background .16s,color .16s,transform .1s}
.shop-tab-ic{font-size:18px;line-height:1}
.shop-tab:hover{color:var(--white)}
.shop-tab.on{background:linear-gradient(180deg,var(--card-2),rgba(200,241,53,.08));color:var(--lime);box-shadow:inset 0 0 0 1px rgba(200,241,53,.3)}
.shop-tab:active{transform:scale(.96)}
.shop-tab:focus-visible{outline:3px solid var(--lime);outline-offset:2px}

/* Grille responsive : 2 colonnes (3 en large, 1 en très étroit). */
.shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:560px){.shop-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:340px){.shop-grid{grid-template-columns:1fr}}

/* Carte article : halo teinté par rareté ; légère élévation au survol/tap. */
.shop-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  background:linear-gradient(180deg,var(--card-2),var(--card));border:1px solid rgba(255,255,255,.1);
  border-radius:18px;padding:16px 12px 13px;text-align:center;transition:transform .12s ease,box-shadow .15s ease,border-color .15s ease}
.shop-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.3)}
.shop-card[data-rarity="rare"]{border-color:rgba(95,182,255,.4);box-shadow:0 0 0 1px rgba(95,182,255,.12)}
.shop-card[data-rarity="epic"]{border-color:rgba(180,120,255,.45);box-shadow:0 0 0 1px rgba(180,120,255,.14)}
.shop-card[data-rarity="legendary"]{border-color:rgba(255,200,61,.5);box-shadow:0 0 22px rgba(255,200,61,.12)}
.shop-card.is-owned{border-color:rgba(46,224,106,.4)}

/* Ruban de coin : statut possédé/équipé (lecture rapide). */
.shop-ribbon{position:absolute;inset-block-start:9px;inset-inline-end:9px;z-index:2;font-size:9px;font-weight:900;letter-spacing:.03em;padding:3px 8px;border-radius:999px;white-space:nowrap;line-height:1}
.shop-ribbon.is-owned{background:rgba(46,224,106,.16);color:var(--pw-green);border:1px solid rgba(46,224,106,.45)}
.shop-ribbon.is-equipped{background:rgba(255,200,61,.18);color:var(--gold);border:1px solid rgba(255,200,61,.5)}

/* Aperçu : carré arrondi ; l'avatar (rond) ou l'image le remplit. */
.shop-card-preview{width:90px;height:90px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.06),rgba(8,13,28,.45));border-radius:16px;overflow:hidden}
.shop-preview-av{background:transparent}
.shop-card-preview .avatar{width:90px;height:90px}
.shop-img{width:100%;height:100%;object-fit:contain;display:block}

.shop-card-name{font-size:13px;font-weight:800;color:var(--white);line-height:1.2;word-break:break-word}
/* Légende multilingue (emote/sticker) sous le nom — masquée si vide via JS. */
.shop-card-caption{font-size:11px;font-weight:600;color:var(--muted);line-height:1.2;margin-top:-2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Badge de rareté : pastille tintée par data-rarity. */
.shop-rarity{display:inline-flex;align-items:center;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:rgba(95,182,255,.16);color:var(--sky-blue);border:1px solid rgba(95,182,255,.35);white-space:nowrap}
.shop-rarity[data-rarity="common"]{background:rgba(255,255,255,.08);color:var(--muted);border-color:rgba(255,255,255,.2)}
.shop-rarity[data-rarity="rare"]{background:rgba(95,182,255,.16);color:var(--sky-blue);border-color:rgba(95,182,255,.35)}
.shop-rarity[data-rarity="epic"]{background:rgba(180,120,255,.16);color:#c79bff;border-color:rgba(180,120,255,.42)}
.shop-rarity[data-rarity="legendary"]{background:rgba(255,200,61,.16);color:var(--gold);border-color:rgba(255,200,61,.45)}

/* Zone d'action : bouton RÉEL (acheter/obtenir/équiper) OU libellé succès.
   Absente (non rendue) quand l'article est possédé/équipé non actionnable. */
.shop-card-act{width:100%;margin-top:auto;padding-top:2px}
.shop-action{width:100%;min-height:42px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;box-sizing:border-box}
.shop-buy-price{display:inline-flex;align-items:center;gap:3px}
/* Libellé « réservé à un succès » (honnête : pas un bouton). */
.shop-ach{box-sizing:border-box;border-radius:13px;background:rgba(255,200,61,.1);color:var(--gold);border:1px solid rgba(255,200,61,.4);font-size:11px;line-height:1.2;padding:6px 10px;gap:4px}

/* Entrée « Mes expressions » (loadout) : bouton icône compact dans la barre fixe. */
.shop-loadout-btn{flex:none;width:54px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.1);background:var(--card);border-radius:14px;font-size:22px;line-height:1;cursor:pointer;transition:background .15s,transform .1s}
.shop-loadout-btn:hover{background:var(--card-2)}
.shop-loadout-btn:active{transform:scale(.95)}
.shop-loadout-btn:focus-visible{outline:3px solid var(--lime);outline-offset:2px}

/* ===== LOADOUT « Mes expressions » (modale #ol-modal) ===== */
.lo-modal{display:flex;flex-direction:column;gap:10px;padding:4px 2px}
.lo-title{font-size:18px;font-weight:900;color:var(--white);margin:0}
.lo-sub{font-size:13px;color:var(--muted);margin:0 0 2px}
.lo-section-label{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.lo-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.lo-slot{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--card-2);border:1.5px solid rgba(255,255,255,.1);cursor:pointer;overflow:hidden;transition:transform .1s,border-color .12s}
.lo-slot.filled{border-color:rgba(46,224,106,.45);background:rgba(46,224,106,.08)}
.lo-slot.empty{border-style:dashed;color:var(--muted)}
.lo-slot:active{transform:scale(.92)}
.lo-slot:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.lo-slot .emote-emoji{font-size:26px}
.lo-slot .emote-img{width:80%;height:80%}
.lo-plus{font-size:24px;font-weight:700;line-height:1}
.lo-pool{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:240px;overflow-y:auto}
.lo-pool-item{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);cursor:pointer;overflow:hidden;transition:background .12s,transform .1s}
.lo-pool-item:hover:not(:disabled){background:rgba(255,255,255,.12)}
.lo-pool-item:active:not(:disabled){transform:scale(.92)}
.lo-pool-item:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.lo-pool-item:disabled,.lo-pool-item.placed{opacity:.4;cursor:default}
.lo-pool-item .emote-emoji{font-size:22px}
.lo-pool-item .emote-img{width:78%;height:78%}
.lo-save{width:100%;min-height:46px;margin-top:8px;font-weight:800}

/* ===================================================================
   LOT R6 — UX bracket + profondeur profil + finitions classement.
   Mobile-first, RTL-safe (props logiques), reduced-motion respecté
   (les pulses/anims décoratifs sont coupés dans le bloc dédié plus bas).
=================================================================== */

/* ---- A. Bracket : parcours surligné + carte cliquable + pulse d'avancement ---- */
/* Mon parcours : accent lime discret sur TOUTES les cartes me concernant (a/b),
   pour tracer ma course d'un round à l'autre. .mine (ma carte « courante ») garde
   son surlignage fort ; .bk-mine-path pose un liseré de fond plus léger en plus.
   On évite de surcharger une carte .mine déjà très accentuée. */
.match-card.bk-mine-path:not(.mine){border-color:rgba(200,241,53,.4);background:linear-gradient(180deg,rgba(200,241,53,.06),var(--card-2))}
/* Curseur + focus clavier des cartes cliquables (détail au tap). */
.match-card[data-mid]{cursor:pointer}
.match-card[data-mid]:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.match-card[data-mid]:active{transform:scale(.99)}
/* Pulse d'avancement : surbrillance brève de la ligne gagnante quand un match
   vient d'être décidé (classe posée par le JS, retirée à animationend). */
@keyframes bkAdvance{0%{background:rgba(200,241,53,.45)}100%{background:rgba(255,255,255,.035)}}
.mc-row.bk-advance{animation:bkAdvance .9s ease-out 1}
.match-card.bk-advance{animation:bkAdvance .9s ease-out 1}

/* Détail d'un match (dans #ol-modal, réutilisé d'OnlineUI). */
.bk-md{display:flex;flex-direction:column;gap:10px}
.bk-md-title{font-family:'Archivo Black',sans-serif;font-size:17px;color:var(--white);text-align:center;letter-spacing:.01em}
.bk-md-round{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sky-blue);text-align:center;margin-top:-4px}
.bk-md-side{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:11px 13px}
.bk-md-side .avatar,.bk-md-side .mini-badge{width:34px;height:34px;flex:none}
.bk-md-side.win{border-color:rgba(200,241,53,.45);background:linear-gradient(180deg,rgba(200,241,53,.08),var(--card))}
.bk-md-side.me .bk-md-nm{color:var(--lime)}
.bk-md-nm{flex:1;min-width:0;color:var(--white);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-md-sc{flex:none;font-family:'Archivo Black';font-size:20px;color:var(--muted);min-width:24px;text-align:center}
.bk-md-side.win .bk-md-sc{color:var(--lime)}
.bk-md-status{text-align:center;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---- B. Profil : forme récente + barres de précision + vitrine de trophées ---- */
/* Forme récente : libellé + rangée de pastilles (●/○) colorées par résultat. */
.pf-form{display:flex;align-items:center;gap:12px;margin-bottom:16px;background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:11px 14px}
.pf-form-label{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex:none}
.pf-form-dots{display:flex;align-items:center;gap:7px;font-size:17px;line-height:1}
.pf-form-dot{display:inline-flex}
.pf-form-dot.res-w{color:var(--pw-green)}
.pf-form-dot.res-l{color:var(--danger)}
.pf-form-dot.res-f{color:var(--pw-orange)}
/* Performance : barres de précision (tir/arrêt) + compteurs bruts + forme récente.
   Chaque barre vit dans une carte .pf-acc-wrap (barre + ligne « N/M cadrés »). */
.pf-acc-grid{display:flex;flex-direction:column;gap:11px;margin-bottom:6px}
.pf-acc-wrap{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 14px}
.pf-acc{padding:0;background:none;border:none;border-radius:0}
.pf-acc-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.pf-acc-lbl{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pf-acc-pct{font-family:'Archivo Black';font-size:15px;color:var(--white)}
.pf-acc-bar{position:relative;height:10px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.pf-acc-bar>i{display:block;height:100%;width:0;border-radius:999px;transition:width .5s cubic-bezier(.22,1,.36,1)}
.pf-acc-bar.lime>i{background:linear-gradient(90deg,var(--lime-d),var(--lime))}
.pf-acc-bar.blue>i{background:linear-gradient(90deg,#2f7fcc,var(--sky-blue))}
[dir="rtl"] .pf-acc-bar>i{margin-inline-start:auto}
/* Compteurs bruts sous chaque barre (ex. « 12/20 cadrés »). */
.pf-acc-raw{margin-top:7px;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.02em}
/* Jalons (et ex-vitrine de trophées) : petites tuiles tintées par type.
   Grille auto-fit : 1 à 5 tuiles s'agencent sans casser la mise en page. */
.pf-trophies{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.pf-milestones{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
.pf-trophy{display:flex;flex-direction:column;align-items:center;gap:3px;border-radius:14px;padding:14px 10px;text-align:center;border:1px solid rgba(255,255,255,.08);background:var(--card)}
.pf-trophy.gold{background:linear-gradient(160deg,rgba(255,200,61,.16),var(--card) 65%);border-color:rgba(255,200,61,.3)}
.pf-trophy.silver{background:linear-gradient(160deg,rgba(207,214,224,.14),var(--card) 65%);border-color:rgba(207,214,224,.28)}
.pf-trophy.streak{background:linear-gradient(160deg,rgba(255,140,46,.14),var(--card) 65%);border-color:rgba(255,140,46,.3)}
.pf-trophy.win{background:linear-gradient(160deg,rgba(46,224,106,.14),var(--card) 65%);border-color:rgba(46,224,106,.3)}
.pf-trophy.matches{background:linear-gradient(160deg,rgba(95,182,255,.12),var(--card) 65%);border-color:rgba(95,182,255,.3)}
.pf-trophy.bronze{background:linear-gradient(160deg,rgba(205,127,50,.16),var(--card) 65%);border-color:rgba(205,127,50,.32)}
.pf-trophy.coins{background:linear-gradient(160deg,rgba(255,200,61,.16),var(--card) 65%);border-color:rgba(255,200,61,.3)}
.pf-trophy-ic{font-size:24px;line-height:1}
.pf-trophy-v{font-family:'Archivo Black';font-size:24px;line-height:1;color:var(--white)}
.pf-trophy.gold .pf-trophy-v{color:var(--gold)}
.pf-trophy.streak .pf-trophy-v{color:var(--pw-orange)}
.pf-trophy.bronze .pf-trophy-v{color:#cd7f32}
.pf-trophy.coins .pf-trophy-v{color:var(--gold)}
.pf-trophy-l{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* ---- C. Classement : badge de ligue + podium top-3 + filtres + mon rang collant ---- */
/* Nom + badge de ligue dans une même cellule flexible (le badge ne pousse pas l'ELO). */
.lb-name-wrap{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.lb-name-wrap .lb-name{flex:0 1 auto}
.lb-lg-badge{flex:none;font-size:9px;padding:2px 7px}
/* Barre de filtres Global / Ma ligue (onglets à bascule). */
.lb-filter{display:flex;gap:7px;background:rgba(0,0,0,.3);padding:5px;border-radius:13px;border:1px solid rgba(255,255,255,.1);margin-bottom:12px}
.lb-filter-btn{flex:1;text-align:center;font-family:'Archivo',sans-serif;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:10px 6px;min-height:40px;border-radius:9px;cursor:pointer;color:var(--muted);background:none;border:none;transition:background .15s,color .15s}
.lb-filter-btn.on{background:var(--lime);color:var(--ink)}
.lb-filter-btn:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
/* Podium top-3 : en-tête compact (argent · or · bronze), marches cliquables. */
.lb-podium{display:flex;align-items:flex-end;justify-content:center;gap:9px;margin-bottom:14px}
.lb-pod-step{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 8px 11px}
.lb-pod-step.pod-1{background:linear-gradient(180deg,rgba(255,200,61,.16),var(--card) 70%);border-color:rgba(255,200,61,.32);transform:translateY(-6px)}
.lb-pod-step.pod-2{background:linear-gradient(180deg,rgba(207,214,224,.12),var(--card) 70%);border-color:rgba(207,214,224,.26)}
.lb-pod-step.pod-3{background:linear-gradient(180deg,rgba(214,139,74,.14),var(--card) 70%);border-color:rgba(214,139,74,.3)}
.lb-pod-step.me{box-shadow:0 0 0 1px var(--lime)}
.lb-pod-medal{font-size:19px;line-height:1}
.lb-pod-av .avatar,.lb-pod-av .badge{width:40px;height:40px}
.lb-pod-step.pod-1 .lb-pod-av .avatar,.lb-pod-step.pod-1 .lb-pod-av .badge{width:50px;height:50px}
.lb-pod-name{font-size:11px;font-weight:800;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center}
.lb-pod-elo{font-family:'Archivo Black';font-size:14px;color:var(--white)}
.lb-pod-step.lb-clickable{cursor:pointer;transition:border-color .15s}
.lb-pod-step.lb-clickable:hover{border-color:rgba(255,255,255,.22)}
.lb-pod-step.lb-clickable:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
/* Mon rang « collant » : la ligne #lb-me est un frère flex:none de la liste
   scrollable (#leaderboard-body, flex:1) DANS .ol-wrap — elle est donc déjà
   épinglée en haut, hors du flux scrollé, toujours visible même quand mon rang
   dépasse le top affiché (comportement existant conservé). On la renforce ici :
   z-index + dégradé/filet bas pour qu'elle se détache nettement de la liste qui
   défile dessous. (position:sticky;top:0 n'est pas requis — l'élément ne scrolle
   pas — mais le pose sans nuire si le DOM venait à changer.) */
.lb-me:not([hidden]){position:sticky;top:0;z-index:4;background:linear-gradient(180deg,var(--night) 78%,transparent);padding-bottom:8px}

/* ---- Saison & Divisions (hub Classement) -----------------------------------
   Bannière saison : reprend le langage .pf-season (carte dégradée, badge ligue,
   barre .xp-bar) au-dessus de la liste. Panneaux Divisions/Palmarès : <details>
   au marqueur custom (même approche que .fr-add-summary). Props logiques pour RTL. */
.lb-season{background:linear-gradient(165deg,var(--card),var(--card-2));border:1.5px solid rgba(255,255,255,.1);border-radius:16px;padding:13px 15px;margin-bottom:14px;display:flex;flex-direction:column;gap:9px}
.lb-season-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.lb-season-rank{font-family:'Archivo Black';font-size:13px;color:var(--lime)}
.lb-season-title{font-family:'Archivo Black';font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--white)}
.lb-season-days{margin-inline-start:auto;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);background:rgba(255,200,61,.12);border:1px solid rgba(255,200,61,.35);border-radius:999px;padding:3px 9px;white-space:nowrap}
.lb-season-goal{font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--sky-blue)}
.lb-season-max{color:var(--gold)}
.lb-season-bar{max-width:none}
.lb-season-warn{font-size:11px;font-weight:800;letter-spacing:.02em;color:var(--danger);background:rgba(255,59,78,.1);border:1px solid rgba(255,59,78,.32);border-radius:10px;padding:6px 10px}
/* Onglets sous la bannière saison : ouvrent « Divisions & récompenses » et
   « Palmarès » en MODALE (remplacent les anciens panneaux dépliables). */
.lb-tabs{display:flex;gap:9px;margin-bottom:13px}
.lb-tab-btn{flex:1;min-height:42px;padding:0 12px;border-radius:13px;border:1.5px solid rgba(255,255,255,.14);background:var(--night-2);color:var(--white);font-family:'Archivo',sans-serif;font-size:12px;font-weight:800;letter-spacing:.02em;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.15}
.lb-tab-btn:hover{background:var(--card-2);border-color:rgba(255,255,255,.24)}
.lb-tab-btn:active{transform:scale(.97)}
.lb-tab-btn:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
/* « Voir plus » : pleine largeur, sous la liste. */
.lb-more{display:block;width:100%;margin:12px 0 4px;min-height:44px}
/* Titre des modales Divisions / Palmarès. */
.lb-modal-title{margin:0 0 12px;font-family:'Archivo Black';font-size:16px;color:var(--white);text-align:center}
.lb-div-list{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.lb-div-row{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:9px 13px}
.lb-div-row.is-me{background:rgba(200,241,53,.08);border-color:rgba(200,241,53,.45);box-shadow:0 0 0 1px rgba(200,241,53,.25)}
.lb-div-min{margin-inline-start:auto;font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.lb-div-reward{font-family:'Archivo Black';font-size:13px;color:var(--gold);white-space:nowrap;min-width:48px;text-align:end}
.lb-div-note{margin:10px 2px 0;font-size:10.5px;font-weight:600;line-height:1.4;color:var(--muted)}
.lb-palmares-list{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.lb-badge-row{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:9px 13px}
.lb-badge-season{font-size:12px;font-weight:700;color:var(--white)}

@media (max-width:600px){
  .lb-pod-name{font-size:10px}
  .pf-trophy-v{font-size:21px}
}

/* ---- Mouvement réduit (Lot R6) : pulses/anims décoratifs coupés franchement.
   Les barres de précision/XP gardent leur largeur finale (transition neutralisée
   par la règle globale *{transition-duration:.01s}), sans mouvement perceptible. */
@media (prefers-reduced-motion:reduce){
  /* Pulse d'avancement du bracket : pas d'animation (état final direct). */
  .mc-row.bk-advance,.match-card.bk-advance{animation:none!important;background:rgba(255,255,255,.035)!important}
  /* Barres de précision : pose directe de la largeur (pas de transition animée). */
  .pf-acc-bar>i{transition:none!important}
  /* Amis (Lot S2) : pas de scale/transition sur les boutons d'action (état direct). */
  .fr-btn{transition:none!important}
  .fr-btn:active{transform:none!important}
  /* Rangées : pas d'élévation/translation animée au survol (état direct). */
  .fr-row{transition:none!important}
  .fr-row:hover{transform:none!important}
}

/* ===== Intro "VS" de match (overlay piloté serveur) ===== */
#match-intro{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(circle at 50% 38%, rgba(20,30,60,.96), var(--night,#0b1020));
  opacity:0;pointer-events:none;transition:opacity .2s ease}
#match-intro.show{opacity:1;pointer-events:auto}
#match-intro .mi-row{display:flex;align-items:center;justify-content:center;gap:18px}
#match-intro .mi-stage:empty{display:none}
#match-intro .mi-stage{font-weight:800;font-size:18px;letter-spacing:1px;text-transform:uppercase;
  padding:4px 16px;border-radius:999px;background:rgba(255,255,255,.12);color:#e2e8f0}
#match-intro.show .mi-stage.final{background:linear-gradient(90deg,#f59e0b,#fbbf24);color:#1a1205;
  box-shadow:0 0 18px rgba(251,191,36,.6);font-size:22px}
#match-intro.show .mi-stage.smallfinal{background:linear-gradient(90deg,#b45309,#d97706);color:#fff;
  box-shadow:0 0 12px rgba(217,119,6,.45)}
#match-intro .mi-card{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:96px;
  opacity:0;transform:translateX(var(--mi-from,0))}
#match-intro .mi-a{--mi-from:-44px}
#match-intro .mi-b{--mi-from:44px}
#match-intro.show .mi-card{animation:mi-in .45s cubic-bezier(.2,.8,.3,1) forwards}
#match-intro.show .mi-vs{animation:mi-pop .4s ease .12s forwards}
#match-intro .mi-avatar{width:84px;height:84px;border-radius:50%;overflow:hidden;
  background:rgba(255,255,255,.08);box-shadow:0 6px 22px rgba(0,0,0,.45)}
#match-intro .mi-avatar img,#match-intro .mi-avatar svg{width:100%;height:100%;display:block;object-fit:cover}
#match-intro .mi-name{font-weight:700;font-size:16px;color:#fff;max-width:120px;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#match-intro .mi-elo{font-size:13px;color:var(--gold,#ffcf5a);font-variant-numeric:tabular-nums}
#match-intro .mi-vs{font-weight:900;font-size:34px;color:#fff;letter-spacing:2px;opacity:0;
  text-shadow:0 2px 12px rgba(0,0,0,.5)}
@keyframes mi-in{from{opacity:0;transform:translateX(var(--mi-from,0))}to{opacity:1;transform:translateX(0)}}
@keyframes mi-pop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion: reduce){
  #match-intro,#match-intro.show .mi-card,#match-intro.show .mi-vs{transition:none;animation:none}
  #match-intro .mi-card,#match-intro .mi-vs{opacity:1;transform:none}
}