/* ============================================================
   PvP Arena · pvpnew - reskin DA CINÉMATIQUE BFFR (2026-07-05)
   Chargé APRÈS pvp.css : override des tokens (le gros du reskin)
   + chrome du site (loader, grain, drawer, fab, hero, curseur)
   + restyle des composants signature. La logique (pvp.js) et la
   structure DOM de l'app sont STRICTEMENT inchangées.
   Palette : dark violet #070709 / accent #A78BFF (fini le rouge).
   ============================================================ */

/* ---------- 1. TOKENS (override) ---------- */
:root {
  --bg-0: #070709;
  --bg-1: #0D0D13;
  --bg-2: #101019;
  --bg-3: #14141e;
  --bg-4: #1d1d2a;

  --line-1: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);
  --line-3: rgba(255,255,255,.22);

  --tx-0: #F2F2F6;
  --tx-1: #D9D9E2;
  --tx-2: #9C9CAB;
  --tx-3: #80808E;
  --tx-4: #5c5c6a;

  --accent:      #A78BFF;
  --accent-ink:  #0b0b10;
  --accent-dim:  #6C4DF0;
  --accent-rgb:  167, 139, 255;   /* accent en rgb : les littéraux tokenisés de pvp.css passent en violet */
  --accent-fade: rgba(167,139,255,.16);
  --accent-glow: rgba(167,139,255,.38);

  --ok:   #3BE08A;
  --warn: #F5C451;
  --err:  #FF7676;
  --live: #3BE08A;

  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 15px;
  --r-xl: 20px;

  --f-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Chrome cinématique */
  --pn-accent-rgb: 167,139,255;
  --pn-teal-rgb: 46,233,205;
  --pn-discord: #5865F2;
}

/* ---------- 2. FOND AURORA + BASE (le quadrillage de pvp.css est SUPPRIMÉ) ---------- */
html { background: var(--bg-0); overflow-x: clip; }
body { overflow-x: hidden; }
body {
  background:
    radial-gradient(1000px 560px at 85% -6%, rgba(var(--pn-accent-rgb), .15), transparent 60%),
    radial-gradient(760px 500px at -8% 24%, rgba(var(--pn-teal-rgb), .07), transparent 60%),
    radial-gradient(820px 560px at 50% 118%, rgba(var(--pn-accent-rgb), .08), transparent 62%),
    var(--bg-0);
  font-family: var(--f-sans);
}
/* le "subtle bg grid" (quadrillage 64px) de pvp.css : dégagé */
body::before { background-image: none !important; }
::selection { background: var(--accent); color: var(--bg-0); }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-thumb { background: #23232f; border-radius: 99px; }

/* Les gros titres passent en Archivo Expanded */
.card__title, .card__title-lg, .card__title-xl, .page-head__title,
.brand__title, .end-match-panel__title, .match-found-overlay__title,
.modal__title, .rules-modal__title {
  font-family: "Archivo Expanded", "Archivo", sans-serif !important;
  letter-spacing: -.02em;
}

/* ---------- 3. CHROME : loader / grain / progress / curseur ---------- */
#pvpnewLoader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: radial-gradient(120% 80% at 50% 38%, #101019, #070709 70%); transition: opacity .55s ease, visibility .55s; }
#pvpnewLoader.hide { opacity: 0; visibility: hidden; }
#pvpnewLoader img { border-radius: 18px; box-shadow: 0 0 54px rgba(var(--pn-accent-rgb), .55); }
#pvpnewLoader .pnl-box { display: flex; flex-direction: column; align-items: center; }
#pvpnewLoader .pnl-name { margin-top: 20px; font-family: "Archivo Expanded", sans-serif; font-weight: 900; font-size: 1rem; letter-spacing: .1em; color: #fff; }
#pvpnewLoader .pnl-bar { margin-top: 20px; width: 148px; height: 3px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
#pvpnewLoader .pnl-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); box-shadow: 0 0 12px var(--accent); animation: pnlLoad 1.1s cubic-bezier(.5,0,.2,1) .05s forwards; }
@keyframes pnlLoad { to { width: 100%; } }

#pvpnewGrain { position: fixed; inset: -50%; z-index: 96; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 140px; animation: pnGrain 1.1s steps(3) infinite; }
@keyframes pnGrain { 0%{transform:translate(0,0)} 30%{transform:translate(-3%,2%)} 60%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }

#pvpnewProgress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 130; background: linear-gradient(90deg, transparent, var(--accent)); box-shadow: 0 0 14px var(--accent); pointer-events: none; }

#pvpnewCursor { position: fixed; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(var(--pn-accent-rgb), .5); pointer-events: none; z-index: 200; transform: translate(-50%,-50%); transition: width .25s, height .25s, border-color .25s, background .25s, opacity .3s; opacity: 0; }
#pvpnewCursor.show { opacity: 1; }
#pvpnewCursor.hot { width: 54px; height: 54px; border-color: var(--accent); background: rgba(var(--pn-accent-rgb), .07); }

/* ---------- 4. CHROME : fab + drawer ---------- */
.pvpnew-fab { position: fixed; bottom: 24px; right: 24px; z-index: 85; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 99px; background: var(--pn-discord); color: #fff; box-shadow: 0 12px 34px rgba(88,101,242,.5), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .25s cubic-bezier(.34,1.5,.6,1), box-shadow .25s; }
.pvpnew-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 18px 44px rgba(88,101,242,.65); }

.pvpnew-navtoggle { position: fixed; top: 14px; right: 16px; z-index: 132; width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: rgba(13,13,19,.6); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; transition: background .25s, border-color .25s, opacity .3s, transform .3s; }
.pvpnew-navtoggle:hover { background: rgba(13,13,19,.9); border-color: var(--accent); }
.pvpnew-navtoggle span { display: block; width: 19px; height: 2px; border-radius: 2px; background: #fff; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.pvpnew-navtoggle.open { opacity: 0; pointer-events: none; transform: scale(.85); }

.pvpnew-navmenu { position: fixed; inset: 0; z-index: 125; visibility: hidden; }
.pvpnew-navmenu.open { visibility: visible; }
.pvpnew-navmenu__scrim { position: absolute; inset: 0; background: rgba(5,5,8,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .45s; cursor: pointer; }
.pvpnew-navmenu.open .pvpnew-navmenu__scrim { opacity: 1; }
.pvpnew-navmenu__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 86vw); background: radial-gradient(115% 55% at 100% 0%, rgba(var(--pn-accent-rgb), .13), rgba(255,255,255,0) 58%), linear-gradient(180deg, #0f0f17, #08080c); border-left: 1px solid rgba(255,255,255,.08); box-shadow: -30px 0 80px rgba(0,0,0,.55); display: flex; flex-direction: column; padding: 26px 30px 24px; transform: translateX(100%); transition: transform .5s cubic-bezier(.16,.84,.2,1); overflow-y: auto; overscroll-behavior: contain; }
.pvpnew-navmenu.open .pvpnew-navmenu__panel { transform: none; }
.pvpnew-navmenu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.pvpnew-navmenu__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.pvpnew-navmenu__close { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #fff; cursor: pointer; transition: background .2s, border-color .2s; }
.pvpnew-navmenu__close:hover { background: rgba(255,255,255,.1); border-color: var(--accent); }
.pvpnew-navmenu__list { flex: 1 0 auto; }
.pvpnew-navmenu__cat { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: rgb(var(--cat, 167,139,255)); margin: 18px 2px 7px; }
.pvpnew-navmenu__cat::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--cat)); box-shadow: 0 0 10px rgba(var(--cat), .85); }
.pvpnew-navmenu__group:first-child .pvpnew-navmenu__cat { margin-top: 0; }
.pvpnew-navmenu__item { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; margin: 0 -14px; border-radius: 12px; text-decoration: none; transition: background .25s; }
.pvpnew-navmenu__item b { font-family: "Archivo Expanded", "Archivo", sans-serif; font-weight: 800; font-size: 1.02rem; color: #fff; letter-spacing: -.01em; transition: color .25s, transform .3s; }
.pvpnew-navmenu__item small { font-size: 11.5px; color: var(--tx-2); }
.pvpnew-navmenu__item:hover { background: rgba(var(--cat), .1); }
.pvpnew-navmenu__item:hover b { color: rgb(var(--cat)); transform: translateX(6px); }
.pvpnew-navmenu__item.is-active b { color: rgb(var(--cat)); }
.pvpnew-navmenu__item.is-active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 56%; border-radius: 99px; background: rgb(var(--cat)); }
.pvpnew-navmenu__disc { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; padding: 14px; border-radius: 13px; background: var(--pn-discord); color: #fff; font-weight: 800; font-size: 14px; text-decoration: none; box-shadow: 0 10px 26px rgba(88,101,242,.3); transition: transform .2s, box-shadow .2s; }
.pvpnew-navmenu__disc:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(88,101,242,.42); }

/* ---------- 5. HERO compact (route matchmaking uniquement) ---------- */
/* Hauteur resserree (2026-08-06, demande ratox : la banniere mangeait tout l'ecran).
   La topbar est en `sticky`, elle occupe donc deja sa place dans le flux : les 96px de
   padding haut d'origine etaient du vide pur, plus une reserve pour une barre fixe qui
   n'existe pas. `clamp` borne la hauteur en px pour qu'un grand ecran ne l'etire pas :
   avant, 64vh donnait ~690px sur un 1080p. */
.pvpnew-hero { position: relative; min-height: clamp(300px, 38vh, 400px); display: flex; align-items: flex-end; overflow: hidden; padding: 40px 0 34px; }
body[data-proute="leaderboard"] .pvpnew-hero, body[data-proute="history"] .pvpnew-hero, body[data-proute="ranks"] .pvpnew-hero { display: none; }
.pvpnew-hero__bg { position: absolute; inset: -6% -3%; background: url('/bffr/assets/hero-banner.webp') center 26% / cover no-repeat; }
.pvpnew-hero__veil { position: absolute; inset: 0; pointer-events: none; }
.pvpnew-hero__veil.a { background: linear-gradient(180deg, rgba(7,7,9,.62) 0%, rgba(7,7,9,.3) 34%, rgba(7,7,9,.66) 74%, var(--bg-0) 100%); }
.pvpnew-hero__veil.b { background: linear-gradient(100deg, rgba(7,7,9,.9) 0%, rgba(7,7,9,.6) 30%, rgba(7,7,9,.18) 58%, rgba(7,7,9,0) 75%); }
.pvpnew-hero__fruit { position: absolute; z-index: 2; pointer-events: none; filter: drop-shadow(0 24px 44px rgba(0,0,0,.6)); }
.pvpnew-hero__fruit.f1 { width: 92px; right: 12%; top: 18%; }
.pvpnew-hero__fruit.f2 { width: 62px; right: 5%; bottom: 18%; }
.pvpnew-hero__inner { position: relative; z-index: 3; width: 100%; max-width: 1460px; margin: 0 auto; padding: 0 var(--page-pad); }
.pvpnew-hero__badge { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px; border-radius: 99px; background: rgba(7,7,9,.5); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); margin-bottom: 13px; }
.pvpnew-hero__badge i { width: 8px; height: 8px; border-radius: 99px; background: var(--ok); box-shadow: 0 0 12px var(--ok); animation: pnPulse 1.8s infinite; }
.pvpnew-hero__badge span { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #D7D7E0; }
@keyframes pnPulse { 0%,100%{opacity:.45} 50%{opacity:1} }
.pvpnew-hero__title { margin: 0; font-family: "Archivo Expanded", "Archivo", sans-serif; font-weight: 900; font-size: clamp(1.9rem, 4.2vw, 3.3rem); line-height: .95; color: #fff; text-transform: uppercase; letter-spacing: -.03em; text-shadow: 0 2px 10px rgba(0,0,0,.65); }
.pvpnew-hero__title .stroke { color: transparent; -webkit-text-stroke: 2px var(--accent); }
.pvpnew-hero__p { max-width: 620px; margin: 11px 0 0; font-size: clamp(.9rem, 1.05vw, 1rem); line-height: 1.55; color: #D8D8E2; text-shadow: 0 1px 10px rgba(0,0,0,.7); }
.pvpnew-hero__word { position: absolute; right: 4%; top: 10%; z-index: 2; font-family: 'Great Vibes', cursive; font-size: clamp(2rem, 4.4vw, 3.5rem); color: #efeaff; opacity: .92; text-shadow: 0 0 24px rgba(var(--pn-accent-rgb), .85), 0 0 8px rgba(var(--pn-accent-rgb), .55); transform: rotate(-8deg); pointer-events: none; line-height: 1; }
html.pn-motion .pvpnew-hero__badge, html.pn-motion .pvpnew-hero__title, html.pn-motion .pvpnew-hero__p, html.pn-motion .pvpnew-hero__word { opacity: 0; transform: translateY(26px); }
.pvpnew-hero.is-in .pvpnew-hero__badge, .pvpnew-hero.is-in .pvpnew-hero__title, .pvpnew-hero.is-in .pvpnew-hero__p, .pvpnew-hero.is-in .pvpnew-hero__word { opacity: 1 !important; transform: none !important; transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.pvpnew-hero.is-in .pvpnew-hero__title { transition-delay: .08s; }
.pvpnew-hero.is-in .pvpnew-hero__p { transition-delay: .16s; }
.pvpnew-hero.is-in .pvpnew-hero__word { transition-delay: .3s; }

/* ---------- 5bis. MARQUEE (masqué hors matchmaking, comme le hero) ---------- */
.pvpnew-marquee { position: relative; z-index: 2; padding: 9px 0; overflow: hidden; background: var(--bg-0); border-top: 1px solid rgba(var(--pn-accent-rgb), .18); border-bottom: 1px solid rgba(var(--pn-accent-rgb), .18); transform: rotate(-1.2deg) scale(1.02); margin: 4px 0 2px; }
body[data-proute="leaderboard"] .pvpnew-marquee, body[data-proute="history"] .pvpnew-marquee, body[data-proute="ranks"] .pvpnew-marquee { display: none; }
.pvpnew-marquee__track { display: inline-flex; align-items: center; gap: 26px; white-space: nowrap; animation: pnMarquee 26s linear infinite; }
.pvpnew-marquee__track span { font-family: "Archivo Expanded", "Archivo", sans-serif; font-weight: 900; font-size: clamp(.82rem, 1.25vw, 1rem); letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.pvpnew-marquee__track i { color: var(--accent); font-style: normal; font-size: .85rem; }
.pvpnew-marquee:hover .pvpnew-marquee__track { animation-play-state: paused; }
@keyframes pnMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 6. RESKIN : topbar (nav pills flottante) ---------- */
.topbar { background: rgba(8,8,12,.72) !important; border-bottom: 1px solid var(--line-1) !important; -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--pn-accent-rgb), .5), transparent); pointer-events: none; }
.topbar { position: sticky; }
.brand__title { font-family: "Archivo Expanded", "Archivo", sans-serif !important; font-weight: 900 !important; letter-spacing: -.02em; }
.brand__sub { color: var(--accent) !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 9.5px !important; }
.brand__logo { border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.nav { background: rgba(255,255,255,.04); border: 1px solid var(--line-1); border-radius: 99px; padding: 4px !important; gap: 2px !important; }
.nav__item { border-radius: 99px !important; font-weight: 700; padding: 8px 16px !important; transition: background .25s, color .25s; }
.nav__item:hover { color: #fff !important; background: rgba(255,255,255,.05) !important; }
.nav__item.is-active, .nav__item[aria-current="page"] { background: var(--accent) !important; color: var(--accent-ink) !important; box-shadow: 0 8px 22px rgba(var(--pn-accent-rgb), .35); }
.lang-switch { background: rgba(255,255,255,.04); border: 1px solid var(--line-1); border-radius: 99px; padding: 3px 10px !important; }
.lang-switch__sep { opacity: .3; }
.lang-switch__opt { font-weight: 800 !important; border-radius: 8px; }
.lang-switch__opt[aria-selected="true"] { color: var(--accent) !important; text-shadow: 0 0 14px rgba(var(--pn-accent-rgb), .6); }
.user-block { background: rgba(255,255,255,.04); border: 1px solid var(--line-1); border-radius: 99px; padding: 4px 12px 4px 4px !important; }
.user-block__avatar { border-radius: 99px !important; box-shadow: 0 0 0 2px rgba(var(--pn-accent-rgb), .4); }
/* laisse la place au navtoggle du site à droite */
.topbar__inner { padding-right: 56px; }

/* ---------- 7. RESKIN : stats band (chips lumineuses) ---------- */
.stats-band { background: linear-gradient(180deg, rgba(18,18,26,.6), rgba(10,10,16,.6)) !important; border-bottom: 1px solid var(--line-1) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.stat { position: relative; padding: 6px 14px !important; border-radius: 12px; transition: background .25s; }
.stat:hover { background: rgba(255,255,255,.035); }
.stat__label { color: var(--tx-3) !important; font-weight: 800 !important; letter-spacing: .14em !important; text-transform: uppercase; font-size: 9.5px !important; }
.stat__value { font-family: var(--f-mono) !important; font-feature-settings: 'tnum' on, 'zero' on; font-weight: 800; color: #fff !important; }
.stat--top .stat__elo { color: var(--accent) !important; }
.stat__clock { color: var(--accent) !important; text-shadow: 0 0 18px rgba(var(--pn-accent-rgb), .35); font-family: var(--f-mono) !important; font-feature-settings: 'tnum' on, 'zero' on; }
.stat-sep { background: var(--line-1) !important; }

/* ---------- 8. RESKIN : cartes (langage tool-card) ---------- */
.card { position: relative; background: linear-gradient(180deg, rgba(var(--pn-accent-rgb), .07), rgba(var(--pn-accent-rgb), .015) 42%, var(--bg-1) 100%) !important; border: 1px solid var(--line-1) !important; border-radius: var(--r-xl) !important; overflow: hidden; transition: border-color .3s, transform .3s, box-shadow .3s; }
.card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, rgba(var(--pn-accent-rgb), 0), rgba(var(--pn-accent-rgb), .9), rgba(var(--pn-accent-rgb), 0)); opacity: .7; pointer-events: none; }
.card:hover { border-color: rgba(var(--pn-accent-rgb), .34) !important; }
.card--prime::before { opacity: 1; }
.card__eyebrow { color: var(--accent) !important; font-weight: 800 !important; letter-spacing: .2em !important; }
.card--inset { background: rgba(255,255,255,.028) !important; border-radius: var(--r-lg) !important; }

/* ---------- 9. RESKIN : boutons ---------- */
.btn { border-radius: 99px !important; font-weight: 800 !important; }
.btn--accent, .btn--cta { background: var(--accent) !important; color: var(--accent-ink) !important; box-shadow: 0 12px 30px rgba(var(--pn-accent-rgb), .35) !important; border: 0 !important; transition: transform .22s, box-shadow .22s, filter .22s; }
.btn--accent:hover, .btn--cta:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 38px rgba(var(--pn-accent-rgb), .45) !important; }
.btn--ghost { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.16) !important; color: #fff !important; }
.btn--ghost:hover { border-color: var(--accent) !important; background: rgba(255,255,255,.1) !important; }
.btn--discord { background: var(--pn-discord) !important; color: #fff !important; border: 0 !important; box-shadow: 0 10px 26px rgba(88,101,242,.35) !important; }
.icon-btn { border-radius: 11px !important; }
.icon-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
/* Bouton "Règles" (#rules-toggle) sur téléphone : par défaut (pvp.css, ≤720px) l'icône
   se retrouvait collée à gauche dans un carré de 36px et le libellé était masqué. On la
   recentre et on réaffiche le mot "Règles" juste à côté, comme sur ordinateur. */
@media (max-width: 720px) {
  #rules-toggle.icon-btn--label {
    width: auto !important;
    padding: 0 12px !important;
    border: 1px solid var(--line-2) !important;
    justify-content: center;
  }
  #rules-toggle .icon-btn__label { display: inline !important; }
}
/* Barre d'onglets (Matchmaking / Classement / Historique / Rangs) sur téléphone :
   c'est une cellule de grille avec min-width:auto, donc elle s'étirait au-delà de
   l'écran et son overflow-x:auto ne s'activait jamais -> "Rangs" coupé et barre figée.
   min-width:0 la borne à la largeur de l'écran (le défilement horizontal s'active) et
   les onglets ne se compriment plus : on peut faire glisser vers la droite pour tout voir. */
@media (max-width: 768px) {
  .nav {
    min-width: 0;
    justify-self: stretch;   /* remplir la colonne : sinon justify-self:start la laisse à sa largeur de contenu et rien ne défile */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .nav__item { flex-shrink: 0; white-space: nowrap; }
  /* Fondu adaptatif sur les bords pour signaler que la barre se fait glisser.
     Les classes pn-fade-l / pn-fade-r sont posées par pvpnew_chrome.js selon la
     position de défilement : le fondu droit disparaît une fois arrivé au bout
     (pas de faux "il reste du contenu"), le fondu gauche apparaît dès qu'on glisse. */
  .nav.pn-fade-r {
    -webkit-mask-image: linear-gradient(to right, #000 68%, transparent 98%);
            mask-image: linear-gradient(to right, #000 68%, transparent 98%);
  }
  .nav.pn-fade-l {
    -webkit-mask-image: linear-gradient(to right, transparent 2%, #000 24%);
            mask-image: linear-gradient(to right, transparent 2%, #000 24%);
  }
  .nav.pn-fade-l.pn-fade-r {
    -webkit-mask-image: linear-gradient(to right, transparent 2%, #000 20%, #000 70%, transparent 98%);
            mask-image: linear-gradient(to right, transparent 2%, #000 20%, #000 70%, transparent 98%);
  }
}
/* Ecran de match sur telephone (<=1279px) : le chat est remonte dans la colonne
   principale par pvpnew_chrome.js (echange de place avec le serveur prive). Le selecteur
   ".match-active__side .chat" de pvp.css ne s'applique alors plus : on garantit ici que le
   chat occupe toute la largeur, aligne comme les autres cartes du match. */
@media (max-width: 1279px) {
  /* Le chat devient une case a part entiere (fond + cadre + coins arrondis), detachee
     des autres blocs par l'espacement de la colonne. */
  .match-active__main > .chat {
    align-self: stretch;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
  }
  /* Les enjeux "Victoire +X / Defaite -Y" rejoignent la carte du face-a-face : une ligne
     pleine largeur sous les deux joueurs, separee par un fin filet (rendu relie au VS). */
  .vs > .vs-stakes {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--line-2);
  }
}
/* Carte "Declarer le resultat" plus compacte sur telephone : chaque joueur passe sur UNE
   seule ligne (avatar + nom a gauche, compteur de score a droite) au lieu de la pile
   avatar / nom / compteur, et les tailles sont legerement reduites. Divise ~par deux la
   hauteur du tableau de score. (demande 2026-07-23) */
@media (max-width: 540px) {
  .report-score-board { gap: 8px; padding: 12px; }
  .report-score-board__side {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .report-score-board__meta { align-items: flex-start; text-align: left; }
  .report-score-board__field { margin-left: auto; }
  .report-score-board__avatar { width: 38px; height: 38px; }
  .report-score-board__input { width: 46px; height: 38px; font-size: 19px; }
  .report-stepper { width: 32px; height: 32px; }
  .report-score-board__separator { padding: 0; }
  /* Boutons Defaite / Victoire plus compacts : cote a cote (au lieu d'empiles pleine
     hauteur) et un peu plus petits, tout en restant de bonnes cibles tactiles. */
  .report-card__verdict { grid-template-columns: 1fr 1fr; gap: 8px; }
  .btn--verdict { padding: 11px 8px; gap: 2px; }
  .btn--verdict svg { width: 18px; height: 18px; }
  .btn--verdict .btn__main { font-size: 14px; }
  .btn--verdict .btn__sub { font-size: 9px; letter-spacing: 0.1em; }
}
/* Anti-zoom automatique iOS : Safari zoome sur un champ dont la police fait moins de 16px
   des qu'on le selectionne/qu'on tape dedans. On passe les champs de saisie a 16px sur
   mobile pour l'eviter (le compteur de score reste a 19px, deja au-dessus du seuil). */
@media (max-width: 768px) {
  .input,
  .chat__input,
  .search__input,
  .picker__search { font-size: 16px; }
  .report-score-board__input { font-size: 19px; }
}
/* Bouton "Appeler un staff" du chat : par defaut (pvp.css, <=720px) seul l'icone cloche
   reste, le libelle est masque. On reaffiche "Appeler un staff" a cote de la cloche, sur
   une seule ligne (demande 2026-07-23). Tout tient dans l'en-tete avec le badge "live". */
@media (max-width: 720px) {
  .chat__call-staff span { display: inline; white-space: nowrap; }
  .chat__call-staff { padding: 6px 10px; }
}
/* Chat plus grand sur telephone : plus de place pour lire et ecrire les messages
   (demande 2026-07-23). Le chat vit dans la colonne principale sur telephone ; on
   remonte sa hauteur mini de 380px a 500px (borne haute a 82vh pour les longs echanges). */
@media (max-width: 768px) {
  .match-active__main > .chat { min-height: 500px; max-height: 82vh; }
}
/* Overlays plein ecran (Resultat declare, Match trouve, Regles a accepter, etc.) : les
   rendre DEFILABLES. Avant, le panneau etait centre (position fixed) SANS defilement : sur
   telephone, quand le formulaire de contestation s'ouvrait, le panneau depassait de l'ecran
   et le bouton "Confirmer la contestation" devenait inatteignable -> interface "gelee".
   flex + margin:auto = centre si le panneau tient, defile proprement s'il est plus haut que
   l'ecran (le haut n'est jamais coupe). (demande 2026-07-23) */
.match-found-overlay { overflow-y: auto; }
@media (max-width: 768px) {
  .match-found-overlay { display: flex; flex-direction: column; align-items: center; }
  .match-found-overlay__panel { margin: auto 0; }
  /* Panneau "Resultat declare" (confirmer / contester) plus compact : il etait trop grand. */
  .opp-report-panel { padding: 18px 16px; gap: 12px; }
  .opp-report-panel__title { font-size: 15.5px; }
  .opp-report-panel__vs { padding: 12px; gap: 12px; }
  .opp-report-panel__avatar { width: 50px; height: 50px; }
  .opp-report-panel__score { padding: 8px 12px; min-width: 70px; }
  .opp-report-panel__score-val { font-size: 22px; }
}
/* Messages du STAFF dans le chat PvP en ROUGE (demande 2026-07-23) : l'accent global du
   site est violet (#A78BFF). On redefinit l'accent LOCALEMENT pour les messages staff, ce
   qui teinte en rouge d'un coup le fond, le cadre, la barre laterale et le libelle "STAFF".
   Cible uniquement .msg--staff, aucun autre element n'est touche. */
.msg--staff { --accent: #ff4d4f; }
/* Chat du match legerement descendu sur ORDINATEUR uniquement (demande 2026-07-23). Sur
   telephone le chat vit dans la colonne principale (deplace par pvpnew_chrome.js) et n'est
   pas concerne : on cible donc >=1280px (la mise en page en 2 colonnes). */
@media (min-width: 1280px) {
  .match-active__side { margin-top: 30px; }
}
.lang-switch__opt[aria-selected="true"] { color: var(--accent) !important; }

/* ---------- 10. RESKIN : leaderboard / tables / podium ---------- */
.lb__row { border-radius: 12px; transition: background .2s, transform .2s; }
.lb__row:hover { background: rgba(var(--pn-accent-rgb), .06) !important; transform: translateX(3px); }
.lb__row.is-me { background: var(--accent-fade) !important; box-shadow: inset 2px 0 0 var(--accent); }
.lb__wr--high { color: var(--ok) !important; }
.lb__wr--low { color: var(--err) !important; }
.lb__head, thead th { color: var(--tx-3) !important; font-weight: 800 !important; letter-spacing: .12em !important; text-transform: uppercase; font-size: 10px !important; }
.podium__slot { position: relative; border-radius: var(--r-xl) !important; background: linear-gradient(180deg, rgba(var(--pn-accent-rgb), .1), rgba(var(--pn-accent-rgb), .02) 46%, var(--bg-1) 100%) !important; border: 1px solid rgba(var(--pn-accent-rgb), .22) !important; overflow: hidden; transition: transform .3s, border-color .3s, box-shadow .3s; }
.podium__slot::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, rgba(var(--pn-accent-rgb), .9), transparent); }
.podium__slot:hover { transform: translateY(-4px); border-color: rgba(var(--pn-accent-rgb), .45) !important; box-shadow: 0 22px 50px rgba(0,0,0,.45), 0 0 36px rgba(var(--pn-accent-rgb), .16); }
.podium__slot--1, .podium__slot.is-first { border-color: rgba(245,196,81,.4) !important; }
.podium__slot--1::before, .podium__slot.is-first::before { background: linear-gradient(90deg, transparent, #f5c451, transparent); }
.lb__medal--1 { text-shadow: 0 0 16px rgba(245,196,81,.7); }
.rank-progress__fill, .progress__fill { background: linear-gradient(90deg, var(--accent-dim), var(--accent)) !important; box-shadow: 0 0 14px rgba(var(--pn-accent-rgb), .5); }

/* ---------- 10bis. RESKIN : sélecteur de Sea + CTA queue ---------- */
.sea-select__opt, [data-sea] { border-radius: 14px !important; transition: border-color .25s, background .25s, box-shadow .25s; }
.sea-select__opt.is-active, [data-sea].is-active, [data-sea][aria-pressed="true"] { border-color: rgba(var(--pn-accent-rgb), .55) !important; background: var(--accent-fade) !important; box-shadow: 0 0 0 1px rgba(var(--pn-accent-rgb), .3), 0 10px 26px rgba(var(--pn-accent-rgb), .16); }
.btn--cta { position: relative; padding: 16px 26px !important; font-size: 15px !important; background: linear-gradient(135deg, var(--accent), var(--accent-dim)) !important; overflow: hidden; }
.btn--cta::after { content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-20deg); transition: left .6s ease; }
.btn--cta:hover::after { left: 120%; }
.queue-state-pill, .pill { border-radius: 99px !important; }

/* ---------- 11. RESKIN : modales & overlays ---------- */
.modal__backdrop, .match-found-overlay, .end-match-overlay, .opp-report-overlay, .streak-overlay { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal__panel, .rules-modal__panel, .match-found-overlay__panel, .end-match-panel, .opp-report-panel, .streak-panel {
  background: radial-gradient(120% 60% at 50% 0%, rgba(var(--pn-accent-rgb), .12), rgba(255,255,255,0) 55%), linear-gradient(180deg, #101018, #0a0a0f) !important;
  border: 1px solid rgba(var(--pn-accent-rgb), .3) !important;
  border-radius: 22px !important;
  box-shadow: 0 40px 120px rgba(0,0,0,.65) !important;
}
.match-found-overlay__pulse, .end-match-panel__pulse { background: radial-gradient(circle, rgba(var(--pn-accent-rgb), .3), transparent 65%) !important; }
/* Contour néon selon le résultat (bat le reskin générique ci-dessus) :
   vert vif pour célébrer une victoire, rouge pour une défaite. */
.end-match-panel[data-result="win"] {
  border: 1.5px solid rgba(72, 255, 156, 0.95) !important;
  box-shadow:
    0 0 22px rgba(52, 255, 140, 0.55),
    0 0 62px rgba(52, 255, 140, 0.34),
    inset 0 0 28px rgba(52, 255, 140, 0.13),
    0 40px 120px rgba(0, 0, 0, 0.58) !important;
}
.end-match-panel[data-result="loss"] {
  border: 1.5px solid rgba(255, 90, 90, 0.95) !important;
  box-shadow:
    0 0 22px rgba(255, 70, 70, 0.5),
    0 0 62px rgba(255, 70, 70, 0.3),
    inset 0 0 28px rgba(255, 70, 70, 0.11),
    0 40px 120px rgba(0, 0, 0, 0.58) !important;
}
.end-match-panel[data-result="win"] .end-match-panel__pulse { background: radial-gradient(circle, rgba(52, 255, 140, .28), transparent 65%) !important; }
.end-match-panel[data-result="loss"] .end-match-panel__pulse { background: radial-gradient(circle, rgba(255, 70, 70, .26), transparent 65%) !important; }
/* Panneau "résultat déclaré par l'adversaire" : MÊME code couleur que l'écran de fin de match
   (demande pouv 2026-07-21). L'adversaire déclare SA victoire = je perds -> halo rouge ; il me
   déclare gagnant = je gagne -> halo vert néon. data-result posé par showOppReportOverlay ;
   une annulation ne pose rien -> le panneau reste neutre (violet). */
.opp-report-panel[data-result="win"] {
  border: 1.5px solid rgba(72, 255, 156, 0.95) !important;
  box-shadow:
    0 0 22px rgba(52, 255, 140, 0.55),
    0 0 62px rgba(52, 255, 140, 0.34),
    inset 0 0 28px rgba(52, 255, 140, 0.13),
    0 40px 120px rgba(0, 0, 0, 0.58) !important;
}
.opp-report-panel[data-result="loss"] {
  border: 1.5px solid rgba(255, 90, 90, 0.95) !important;
  box-shadow:
    0 0 22px rgba(255, 70, 70, 0.5),
    0 0 62px rgba(255, 70, 70, 0.3),
    inset 0 0 28px rgba(255, 70, 70, 0.11),
    0 40px 120px rgba(0, 0, 0, 0.58) !important;
}
.opp-report-panel[data-result="win"] .opp-report-panel__pulse { background: radial-gradient(circle, rgba(52, 255, 140, .28), transparent 65%) !important; }
.opp-report-panel[data-result="loss"] .opp-report-panel__pulse { background: radial-gradient(circle, rgba(255, 70, 70, .26), transparent 65%) !important; }
/* Bandeau eyebrow "RÉSULTAT DÉCLARÉ" teinté selon le verdict, pour marteler le rouge/vert. */
.opp-report-panel[data-result="win"] .opp-report-panel__eyebrow { color: rgba(72, 255, 156, .95) !important; }
.opp-report-panel[data-result="loss"] .opp-report-panel__eyebrow { color: rgba(255, 105, 105, .98) !important; }
.field input, .field select, .field textarea, .chat__input input, .chat__input textarea, input[type="search"], select {
  border-radius: 12px !important;
}
.field input:focus, .field select:focus, .chat__input input:focus, input:focus, select:focus, textarea:focus {
  border-color: rgba(var(--pn-accent-rgb), .55) !important;
  box-shadow: 0 0 0 3px rgba(var(--pn-accent-rgb), .14) !important;
}

/* ---------- 11bis. RESKIN : wizard profil / picker d'items ---------- */
/* Le bug visuel d'origine : .picker--lg a min-height 380-460px et le grid étire
   les cellules d'une rangée unique sur toute la hauteur -> cartes géantes vides.
   align-content:start + hauteur naturelle des cartes = grille compacte et propre. */
.picker, .picker--lg { align-content: start !important; }
.picker {
  grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)) !important;
  gap: 9px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.02) !important;
  border: 1px solid var(--line-1) !important;
}
.picker--lg { min-height: 0 !important; max-height: min(54vh, 560px) !important; }
/* FIX 2026-07-18 (Ignir) : chevauchement des cartes du picker sous 768px
   (telephones, tablettes, fenetres etroites). L'aspect-ratio gonflait la carte
   quand peu de colonnes tenaient (2-4 col -> cartes larges -> tres hautes), mais
   la piste de grille auto ne reservait pas cette hauteur -> les cartes se
   superposaient et les labels passaient par-dessus les images. On remplace
   l'aspect-ratio par une hauteur mini fixe que la grille respecte partout. */
.picker--lg .picker__opt { min-height: 118px !important; }
.picker__opt {
  min-height: 118px;
  height: auto !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 12px 8px !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.028) !important;
  border: 1px solid var(--line-1) !important;
  transition: transform .18s, border-color .2s, background .2s, box-shadow .2s;
}
.picker__opt:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--pn-accent-rgb), .45) !important;
  background: rgba(var(--pn-accent-rgb), .06) !important;
}
.picker__opt.is-selected {
  background: var(--accent-fade) !important;
  border-color: rgba(var(--pn-accent-rgb), .65) !important;
  box-shadow: 0 0 0 1px rgba(var(--pn-accent-rgb), .35), 0 12px 26px rgba(var(--pn-accent-rgb), .16);
}
.picker__opt--none { border-style: dashed !important; }
.picker--lg .picker__img, .picker__img { width: 54px !important; height: 54px !important; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.picker--lg .picker__emoji-fallback, .picker__emoji-fallback { width: 54px !important; height: 54px !important; font-size: 34px !important; display: grid; place-items: center; opacity: .8; }
.picker__none-icon { font-size: 26px; color: var(--tx-3); }
.picker__lbl {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  text-align: center;
  color: var(--tx-2) !important;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.picker__opt.is-selected .picker__lbl { color: #fff !important; }
.picker__empty { color: var(--tx-3); padding: 22px; text-align: center; grid-column: 1 / -1; }
/* fine scrollbar dans le picker */
.picker::-webkit-scrollbar { width: 8px; }
.picker::-webkit-scrollbar-thumb { background: rgba(var(--pn-accent-rgb), .25); border-radius: 99px; }
.picker::-webkit-scrollbar-thumb:hover { background: rgba(var(--pn-accent-rgb), .4); }

/* ---------- 12. RESKIN : divers ---------- */
.toasts .toast, .toast { border-radius: 13px !important; border-color: rgba(var(--pn-accent-rgb), .3) !important; }
.alert { border-radius: var(--r-lg) !important; }
.dot--live { background: var(--live) !important; box-shadow: 0 0 10px var(--live) !important; }
a { transition: color .2s; }
footer .footer__inner a:hover, .footer a:hover { color: var(--accent) !important; }

/* ---------- 13. RESPONSIVE chrome ---------- */
@media (max-width: 860px) {
  .pvpnew-hero { min-height: clamp(230px, 34vh, 300px); padding: 30px 0 26px; }
  .pvpnew-hero__fruit { display: none; }
  .pvpnew-hero__word { top: 6%; right: 6%; font-size: clamp(1.7rem, 8vw, 2.4rem); opacity: .55; }
  .pvpnew-navmenu__panel { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: auto; max-height: 82vh; border-left: 0; border-top: 1px solid rgba(255,255,255,.1); border-radius: 22px 22px 0 0; transform: translateY(100%); }
  .pvpnew-navmenu.open .pvpnew-navmenu__panel { transform: none; }
  .pvpnew-fab { bottom: 18px; right: 16px; }
  .topbar__inner { padding-right: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  #pvpnewGrain, .pvpnew-hero__badge i { animation: none !important; }
  #pvpnewCursor { display: none !important; }
}

/* ============================================================
   ÉCRAN "MATCH TROUVÉ" - refonte stylée (2026-07-09)
   Scoped .mfo2 : ne touche QUE l'overlay de /pvp, pas les autres
   overlays qui partagent .match-found-overlay (opp-report, end-match...).
   Réutilise les tokens de la DA cinématique (--accent, --pn-accent-rgb, Archivo).
   ============================================================ */
.mfo2 {
  background:
    radial-gradient(90% 70% at 50% 38%, rgba(var(--pn-accent-rgb), .18), transparent 70%),
    rgba(7, 7, 10, .9) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
}
.mfo2__panel {
  position: relative;
  width: 100%;
  max-width: 620px;
  padding: clamp(30px, 5vw, 50px) clamp(22px, 4vw, 44px);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(22, 20, 34, .96), rgba(11, 11, 16, .98));
  border: 1px solid rgba(var(--pn-accent-rgb), .5);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .04),
    0 40px 120px -30px rgba(0, 0, 0, .85),
    0 0 90px -20px rgba(var(--pn-accent-rgb), .55);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(16px, 2.6vw, 24px);
  overflow: hidden;
  animation: mfo2Pop 520ms cubic-bezier(.22, 1.4, .3, 1);
}
@keyframes mfo2Pop {
  from { opacity: 0; transform: scale(.9) translateY(24px); }
  to   { opacity: 1; transform: none; }
}
/* Halo conique lent derrière le panneau */
.mfo2__glow {
  position: absolute; inset: -45%;
  background: conic-gradient(from 0deg, transparent 0 60%, rgba(var(--pn-accent-rgb), .5) 78%, transparent 92%);
  filter: blur(40px);
  opacity: .45;
  pointer-events: none;
  animation: mfo2Spin 7s linear infinite;
}
@keyframes mfo2Spin { to { transform: rotate(360deg); } }
.mfo2__eyebrow, .mfo2__title, .mfo2__vs, .mfo2__meta, .mfo2__cta { position: relative; z-index: 1; }

.mfo2__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--accent); opacity: .92;
}
.mfo2__live {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  animation: mfo2Live 1.6s ease-out infinite;
}
@keyframes mfo2Live {
  0%   { box-shadow: 0 0 0 0 rgba(var(--pn-accent-rgb), .55); }
  70%  { box-shadow: 0 0 0 9px rgba(var(--pn-accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--pn-accent-rgb), 0); }
}
.mfo2__title {
  font-family: "Archivo Expanded", "Archivo", sans-serif;
  font-weight: 900; font-size: clamp(30px, 6.4vw, 54px);
  line-height: .98; letter-spacing: -.01em; margin: 0;
  background: linear-gradient(180deg, #fff 32%, rgba(var(--pn-accent-rgb), 1));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 6px 26px rgba(var(--pn-accent-rgb), .5));
  animation: mfo2Title 600ms cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes mfo2Title {
  from { opacity: 0; transform: translateY(-10px); letter-spacing: .12em; }
  to   { opacity: 1; transform: none; letter-spacing: -.01em; }
}

.mfo2__vs {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(10px, 3vw, 26px); width: 100%;
}
.mfo2__player { display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; }
.mfo2__player--me { animation: mfo2SlideL 560ms cubic-bezier(.2, .9, .25, 1) both; }
.mfo2__player--op { animation: mfo2SlideR 560ms cubic-bezier(.2, .9, .25, 1) both; }
@keyframes mfo2SlideL { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes mfo2SlideR { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }

.mfo2__avatar-ring {
  position: relative;
  width: clamp(76px, 15vw, 116px); height: clamp(76px, 15vw, 116px);
  border-radius: 50%; padding: 3px;
  background: linear-gradient(135deg, var(--accent), rgba(var(--pn-accent-rgb), .25));
  box-shadow: 0 0 26px -4px rgba(var(--pn-accent-rgb), .7);
}
.mfo2__player--op .mfo2__avatar-ring {
  background: linear-gradient(135deg, #ff5765, rgba(255, 87, 101, .25));
  box-shadow: 0 0 26px -4px rgba(255, 87, 101, .7);
}
.mfo2__avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--bg-1); display: block; }
.mfo2__flag {
  position: absolute; right: -2px; bottom: -2px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; line-height: 1;
  /* Police drapeaux (comme .flag) : sinon les regional indicators s'affichent "FR"/"US"
     en texte sur Windows, sur l'ecran "Match trouve" le plus mis en scene. */
  font-family: 'Twemoji Country Flags', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', system-ui;
  background: rgba(10, 10, 14, .92); border: 1px solid var(--line-2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
.mfo2__name {
  font-weight: 700; font-size: clamp(14px, 2.4vw, 18px); color: var(--tx-0);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mfo2__elo {
  font-size: 12px; letter-spacing: .06em; color: var(--tx-2);
  padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03);
}

.mfo2__clash { position: relative; display: grid; place-items: center; width: clamp(48px, 9vw, 72px); height: clamp(48px, 9vw, 72px); }
.mfo2__vs-badge {
  position: relative; z-index: 2;
  font-family: "Archivo Expanded", "Archivo", sans-serif; font-weight: 900;
  font-size: clamp(16px, 3.2vw, 24px); color: #fff;
  width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, rgba(var(--pn-accent-rgb), .92), rgba(15, 12, 22, .96));
  border: 1.5px solid rgba(var(--pn-accent-rgb), .8);
  box-shadow: 0 0 24px -2px rgba(var(--pn-accent-rgb), .8), inset 0 1px 0 rgba(255, 255, 255, .2);
  animation: mfo2VsPop 620ms cubic-bezier(.2, 1.8, .3, 1) both, mfo2VsPulse 1.8s ease-in-out 620ms infinite;
}
@keyframes mfo2VsPop { from { opacity: 0; transform: scale(.3) rotate(-16deg); } to { opacity: 1; transform: none; } }
@keyframes mfo2VsPulse {
  0%, 100% { box-shadow: 0 0 24px -2px rgba(var(--pn-accent-rgb), .8), inset 0 1px 0 rgba(255, 255, 255, .2); }
  50%      { box-shadow: 0 0 40px 2px rgba(var(--pn-accent-rgb), .95), inset 0 1px 0 rgba(255, 255, 255, .28); }
}
.mfo2__bolt {
  position: absolute; inset: -30%;
  background: conic-gradient(from 90deg, transparent, rgba(var(--pn-accent-rgb), .55), transparent 40%);
  filter: blur(6px); border-radius: 50%;
  animation: mfo2Spin 3.5s linear infinite;
}

.mfo2__meta { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); }
.mfo2__cta {
  margin-top: 2px; min-width: 220px;
  justify-content: center; /* centre "Voir le match" + la fleche dans le bouton */
  box-shadow: 0 12px 36px -12px rgba(var(--pn-accent-rgb), .8);
  animation: mfo2Cta 700ms ease 200ms both;
}
/* Fleche rendue en CSS (retiree du texte i18n) : plus grande, centree, animee au survol */
.mfo2__cta::after {
  content: '→';
  font-size: 1.4em;
  line-height: 1;
  transition: transform .25s ease;
}
.mfo2__cta:hover::after { transform: translateX(4px); }
@keyframes mfo2Cta { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 520px) {
  .mfo2__vs { gap: 8px; }
  .mfo2__name { font-size: 13px; }
  .mfo2__elo { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .mfo2__panel, .mfo2__title, .mfo2__player--me, .mfo2__player--op, .mfo2__vs-badge, .mfo2__cta { animation: none !important; }
  .mfo2__glow, .mfo2__bolt { animation: none !important; opacity: .3; }
}

/* ============================================================
   12. RULES MODAL - theme rouge neon (demande pouv 2026-07-14)
   Le panneau des regles passe en rouge neon (comme le bouton
   #rules-toggle) pour marteler son importance. Les tokens d'accent
   sont redefinis LOCALEMENT sur .rules-modal : aucun effet de bord
   sur le reste du site (qui reste violet).
   ============================================================ */
.rules-modal {
  --accent:        #ff4d4d;
  --accent-dim:    #c81e1e;
  --accent-rgb:    255, 77, 77;
  --pn-accent-rgb: 239, 68, 68;
  --accent-fade:   rgba(239, 68, 68, .16);
  --accent-glow:   rgba(255, 90, 90, .5);
  --accent-ink:    #ffffff;
}
/* Panneau : contour + halo rouge neon pulse (bat le reskin generique .modal__panel) */
.modal__panel.rules-modal {
  border: 1.5px solid rgba(239, 68, 68, .9) !important;
  box-shadow:
    0 0 24px rgba(255, 60, 60, .5),
    0 0 66px rgba(255, 45, 45, .3),
    inset 0 0 32px rgba(255, 40, 40, .09),
    0 40px 120px rgba(0, 0, 0, .62) !important;
  animation: rulesNeonPulse 2.6s ease-in-out infinite;
}
@keyframes rulesNeonPulse {
  0%, 100% { box-shadow: 0 0 24px rgba(255,60,60,.42), 0 0 66px rgba(255,45,45,.24), inset 0 0 32px rgba(255,40,40,.09), 0 40px 120px rgba(0,0,0,.62); }
  50%      { box-shadow: 0 0 32px rgba(255,72,72,.62), 0 0 88px rgba(255,55,55,.4), inset 0 0 36px rgba(255,45,45,.13), 0 40px 120px rgba(0,0,0,.62); }
}
@media (prefers-reduced-motion: reduce) { .modal__panel.rules-modal { animation: none !important; } }
/* Titre : rouge lumineux */
.rules-modal .modal__title { color: #ffe4e4 !important; text-shadow: 0 0 18px rgba(255, 70, 70, .55); }
/* Numeros de section + puces : halo rouge */
.rules-modal .rules-section__num { box-shadow: 0 0 12px rgba(239, 68, 68, .3); }
.rules-modal .rules-list li::before { box-shadow: 0 0 8px rgba(255, 70, 70, .85); opacity: .95; }
/* Point 4 mis en avant : cadre rouge + leger fond teinte */
.rules-modal .rules-hl {
  border-color: rgba(239, 68, 68, .55);
  background: linear-gradient(180deg, rgba(239, 68, 68, .13), rgba(239, 68, 68, .04));
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .18), 0 0 22px rgba(255, 60, 60, .12);
}
/* Passage ESSENTIEL du point 4 (demande pouv "essentiel de fou") : rouge neon appuye */
.rules-em {
  color: #ff5555;
  font-weight: 800;
  text-shadow: 0 0 12px rgba(255, 70, 70, .65);
}

/* ============================================================
   13. Boutons Victoire/Defaite desactives (score incoherent) - demande pouv 2026-07-14
   Etat grise net + aucune animation/lift au survol tant que ce n'est pas cliquable.
   ============================================================ */
.btn--verdict:disabled{ opacity:.42 !important; cursor:not-allowed; box-shadow:none !important; }
.btn--verdict:disabled:hover{ transform:none !important; box-shadow:none !important; }
.btn--verdict:disabled:hover::before{ transform:translateX(-100%) !important; }
.btn--verdict-loss:disabled:hover{ background:rgba(242,107,107,.08) !important; border-color:rgba(242,107,107,.4) !important; }
.btn--verdict-win:disabled:hover{ background:linear-gradient(180deg, rgba(111,227,155,.15), rgba(111,227,155,.08)) !important; border-color:rgba(111,227,155,.55) !important; }

/* ============================================================
   Règles 1v1 : petite ligne dans le chat + porte d'acceptation
   au début du match (demande Ignir 2026-07-18)
   ============================================================ */
/* Petite ligne cliquable dans le chat -> ouvre les règles complètes.
   Thème rouge néon (demande Pouv 2026-07-21) : même code couleur que la modale des
   règles (#rules-modal) et la porte d'acceptation. Les tokens d'accent sont redéfinis
   LOCALEMENT ici -> le fond, la bordure, le texte et l'icône passent en rouge, sans
   aucun effet de bord sur le reste du site (qui reste violet). */
.chat__rules-link {
  --accent-rgb:    255, 77, 77;
  --pn-accent-rgb: 239, 68, 68;
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  margin: 0 0 4px;
  padding: 8px 12px;
  background: rgba(var(--pn-accent-rgb), .09);
  border: 1px solid rgba(var(--pn-accent-rgb), .34);
  border-radius: 10px;
  color: #ffb4b4;
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  cursor: pointer; text-align: left;
  transition: background .2s, border-color .2s, color .2s;
}
.chat__rules-link:hover {
  background: rgba(var(--pn-accent-rgb), .18);
  border-color: rgba(var(--pn-accent-rgb), .55);
  color: #fff;
}
.chat__rules-link svg { width: 15px; height: 15px; flex: none; color: rgba(var(--pn-accent-rgb), .98); }

/* Overlay d'acceptation : SOUS le hype "MATCH TROUVÉ" (z 1000), au-dessus de la vue match.
   Theme rouge neon (demande pouv 2026-07-21) : meme code couleur que la modale des regles
   (#rules-modal / bouton "Regles"). Les tokens d'accent sont redefinis LOCALEMENT sur
   l'overlay -> le bouton "J'accepte", les bordures et le halo passent en rouge, sans aucun
   effet de bord sur le reste du site (qui reste violet). */
.rules-accept-overlay {
  z-index: 990 !important;
  --accent:        #ff4d4d;
  --accent-dim:    #c81e1e;
  --accent-rgb:    255, 77, 77;
  --pn-accent-rgb: 239, 68, 68;
  --accent-fade:   rgba(239, 68, 68, .16);
  --accent-glow:   rgba(255, 90, 90, .5);
  --accent-ink:    #ffffff;
}
/* Panneau : contour + halo rouge neon (bat le reskin generique .match-found-overlay__panel). */
.rules-accept-overlay .rules-accept-panel {
  border: 1px solid rgba(239, 68, 68, .55) !important;
  box-shadow:
    0 26px 80px rgba(0, 0, 0, .6),
    0 0 34px rgba(255, 60, 60, .28),
    inset 0 0 30px rgba(255, 40, 40, .06),
    0 0 0 1px rgba(239, 68, 68, .2) !important;
}
/* Titre en rouge lumineux, comme la modale des regles. */
.rules-accept-overlay .modal__title { color: #ffe4e4 !important; text-shadow: 0 0 18px rgba(255, 70, 70, .5); }
.rules-accept-panel {
  width: 100%; max-width: 640px; max-height: 86vh;
  display: flex; flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 20px;
  background: var(--bg-1);
  border: 1px solid rgba(var(--pn-accent-rgb), .38);
  box-shadow: 0 26px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--pn-accent-rgb), .16);
}
.rules-accept__head {
  padding: 22px 24px 14px;
  border-bottom: 1px solid var(--line-1);
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  flex: none;
}
.rules-accept__sub { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--tx-2); }
.rules-accept__body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  padding: 18px 24px !important;
}
.rules-accept__foot {
  flex: none;
  padding: 16px 24px;
  border-top: 1px solid var(--line-1);
  background: var(--bg-1);
}
.rules-accept__foot .btn { width: 100%; justify-content: center; }
@media (max-width: 560px) {
  .rules-accept-panel { max-height: 92vh; }
  .rules-accept__head, .rules-accept__body, .rules-accept__foot { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ============================================================
   Reponse integree : la declaration de l'adversaire (#opp-report-overlay) est
   deplacee EN TETE de l'ecran de match et de-modalisee (plus de popup bloquant,
   plus de "Plus tard"). Elle reste affichee en permanence, avec Accepter /
   Contester directement dessous, tant que le resultat n'est pas tranche.
   ============================================================ */
.opp-report--inline {
  position: static; inset: auto; z-index: auto;
  display: block; padding: 0; margin: 0 0 14px;
  background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  animation: none;
}
.opp-report--inline .opp-report-panel {
  width: 100%; max-width: 660px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 28px) clamp(18px, 3vw, 30px);
  gap: 16px;
  animation: oppInlineIn .3s cubic-bezier(.2, .7, .2, 1);
}
/* Plus de bouton "Plus tard" : il ne reste que Contester / Accepter. */
.opp-report--inline #opp-report-dismiss { display: none; }
@keyframes oppInlineIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .opp-report--inline .opp-report-panel { animation: none; }
}

/* ============================================================
   AIDE PVP ARENA - bouton "?" (Responsable PvP + admins) + pop-up tuto.
   Le bouton #pvp-help-toggle (.pvp-help-btn) est une pastille violet-jaune
   "attrape l'oeil" (halo qui pulse), revelee par pvpnew_chrome.js UNIQUEMENT
   quand le serveur repond isResp=true. Au clic il ouvre #pvp-help-modal :
   7 ecrans (accueil, 5 parties, partie finale). Logique = wireHelpTutorial().
   ============================================================ */

/* -- Bouton "?" dans la topbar : anneau de lumiere violet qui tourne autour d'un
     centre sombre profond, "?" epure. Design carte blanche (demande 3wht 2026-07-24). -- */
.pvp-help-btn {
  position: relative;
  isolation: isolate;
  width: 46px; height: 46px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: #ece6ff;
  box-shadow: 0 6px 20px -8px rgba(124,77,240,.6);
  transition: transform .2s cubic-bezier(.34,1.4,.6,1), box-shadow .25s;
}
.pvp-help-btn::before {                  /* anneau : degrade conique violet + point lumineux, rotation lente */
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: conic-gradient(from 0deg,
    #4a2c8f 0deg, #7c4df0 90deg, #b79bff 160deg, #ffffff 196deg,
    #b79bff 232deg, #7c4df0 300deg, #4a2c8f 360deg);
  animation: pvpHelpSpin 5s linear infinite;
}
.pvp-help-btn::after {                   /* centre sombre profond : ne laisse qu'un fin anneau lumineux */
  content: ""; position: absolute; inset: 3px; border-radius: inherit; z-index: 1;
  background: radial-gradient(circle at 50% 32%, #17121f, #0a0a11 78%);
  box-shadow: inset 0 0 10px rgba(124,77,240,.28);
}
.pvp-help-btn svg {
  width: 22px; height: 22px; position: relative; z-index: 2;
  filter: drop-shadow(0 0 4px rgba(160,120,255,.6));
}
.pvp-help-btn:hover {
  transform: translateY(-1px) scale(1.08);
  box-shadow: 0 10px 26px -8px rgba(124,77,240,.85), 0 0 18px -4px rgba(183,155,255,.5);
}
.pvp-help-btn:active { transform: translateY(0) scale(1.03); }
@keyframes pvpHelpSpin { to { transform: rotate(1turn); } }

/* -- Overlay du pop-up -- */
.pvphelp {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: pvphelpFade .28s ease;
}
.pvphelp__backdrop {
  position: absolute; inset: 0;
  /* degrade : bien sombre au centre (derriere le contenu) puis s'estompe vers les
     bords jusqu'a retrouver l'arriere-plan d'origine du site (effet "spot" sombre,
     plus de voile uniforme). Demande 3wht 2026-07-24. */
  background: radial-gradient(ellipse 92% 84% at 50% 47%,
    rgba(2,2,6,.96) 0%,
    rgba(2,2,6,.92) 48%,
    rgba(2,2,6,.62) 72%,
    rgba(2,2,6,.22) 88%,
    rgba(2,2,6,0) 100%);
}
.pvphelp__panel {
  position: relative;
  width: 94vw; max-width: 1300px;        /* pop-up quasi plein ecran */
  height: 90vh; max-height: calc(100dvh - 24px);
  display: flex; flex-direction: column;
  padding: clamp(26px, 5vh, 60px) clamp(22px, 6vw, 90px);
  background: transparent;               /* transparent : le contenu flotte sur le fond assombri */
  border: none;
  box-shadow: none;
  overflow: hidden;
  animation: pvphelpPop .34s cubic-bezier(.22,.9,.3,1.12);
}
.pvphelp__panel::before { content: none; } /* plus de carte -> plus de lisere */
.pvphelp__x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  color: var(--tx-3); background: transparent; border: 1px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.pvphelp__x svg { width: 17px; height: 17px; }
.pvphelp__x:hover { color: var(--tx-0); background: var(--bg-3); border-color: var(--line-2); }

.pvphelp__dots { display: flex; gap: 7px; justify-content: center; margin: 2px 0 20px; }
.pvphelp__dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--line-3);
  transition: width .28s cubic-bezier(.22,.9,.3,1.1), background .28s;
}
.pvphelp__dot.is-on  { background: linear-gradient(90deg, #7c4df0, #b388ff); }
.pvphelp__dot.is-cur { width: 22px; background: linear-gradient(90deg, #7c4df0, #b388ff); }

.pvphelp__screens { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.pvphelp__screen { display: none; }
.pvphelp__screen.is-active {
  display: flex; flex-direction: column; align-items: center;
  animation: pvphelpScreen .32s cubic-bezier(.22,.8,.25,1);
}
.pvphelp__icon {
  display: grid; place-items: center;
  width: clamp(78px, 12vh, 108px); height: clamp(78px, 12vh, 108px); border-radius: 28px;
  margin-bottom: clamp(18px, 3.2vh, 30px);
  color: #ffffff; background: linear-gradient(140deg, #7c4df0, #b388ff);
  box-shadow: 0 16px 40px -10px rgba(124,77,240,.6), 0 8px 20px -8px rgba(167,139,255,.5);
}
.pvphelp__icon svg { width: clamp(40px, 6vh, 56px); height: clamp(40px, 6vh, 56px); }
.pvphelp__eyebrow { font-size: clamp(11px, 1.5vh, 13.5px); font-weight: 600; letter-spacing: .18em; color: var(--accent); margin-bottom: clamp(8px, 1.6vh, 14px); }
.pvphelp__title {
  font-family: "Archivo Expanded", "Archivo", sans-serif;
  font-weight: 800; font-size: clamp(1.9rem, 5.2vw, 3.2rem); line-height: 1.12;
  color: var(--tx-0); margin: 0 0 clamp(14px, 2.4vh, 24px);
}
.pvphelp__text { font-size: clamp(15px, 2.1vh, 20px); line-height: 1.65; color: var(--tx-1); max-width: 54ch; margin: 0 auto; }
.pvphelp__text strong { color: var(--tx-0); font-weight: 700; }

/* -- Illustrations explicatives par etape (effet "spotlight" sur l'element cle) --
   Chaque etape 1-5 remplace la grosse icone par une mini-interface SVG reconstituee :
   tout est assombri sauf l'action a faire (halo violet + anneau + curseur). Vectoriel,
   net sur tout ecran, neutre en langue. Les scenes sont inline dans pvpnew.html et
   partagent ces "atomes" (.ph-*) + les defs #phGrad/#phCard/#phBlur. */
.pvphelp__screen--fig .pvphelp__icon { display: none; }
.pvphelp__defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.pvphelp__figure {
  width: 100%;
  max-width: clamp(320px, 52vh, 560px);
  margin: 0 auto clamp(16px, 2.8vh, 26px);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(124,77,240,.14), rgba(10,10,16,.5));
  border: 1px solid rgba(179,136,255,.18);
  box-shadow: 0 26px 60px -26px rgba(124,77,240,.6), 0 10px 30px -16px rgba(0,0,0,.7);
}
.ph-svg { display: block; width: 100%; height: auto; }
.ph-white { fill: #e9e9f2; }
.ph-bar { fill: #2b2b3a; }
.ph-bar2 { fill: #37374a; }
.ph-chip { fill: #14141e; stroke: rgba(255,255,255,.07); stroke-width: 1.4; }
.ph-chip2 { fill: #1c1c28; stroke: rgba(255,255,255,.08); stroke-width: 1.4; }
.ph-ring { fill: none; stroke: #bda4ff; stroke-width: 2.6; }
.ph-cursor { fill: #fff; stroke: #0b0b12; stroke-width: 1.6; stroke-linejoin: round; }
.ph-ico { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ph-ico-dim { fill: none; stroke: #8f8fa4; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ph-num { fill: #fff; font-family: var(--f-sans, system-ui, sans-serif); font-weight: 800; font-size: 22px; text-anchor: middle; }
.ph-num-dim { fill: #9a9ab0; font-family: var(--f-sans, system-ui, sans-serif); font-weight: 800; font-size: 22px; text-anchor: middle; }
.ph-mini { fill: #c9c9dc; font-family: var(--f-sans, system-ui, sans-serif); font-weight: 800; font-size: 15px; letter-spacing: .06em; text-anchor: middle; }
@media (max-height: 730px) {
  .pvphelp__figure { max-width: clamp(280px, 40vh, 430px); }
}

.pvphelp__foot {
  flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  margin-top: clamp(20px, 3vh, 34px); padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1);
}
.pvphelp__skip, .pvphelp__next, .pvphelp__go, .pvphelp__back {
  display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 22px; border-radius: 12px;
  font-family: var(--f-sans); font-size: 15px; font-weight: 700; cursor: pointer;
  transition: transform .16s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.pvphelp__skip { background: transparent; color: var(--tx-2); border: 1px solid var(--line-2); }
.pvphelp__skip:hover { color: var(--tx-0); border-color: var(--line-3); background: var(--bg-3); }
/* bouton Retour : discret (ghost), pousse a gauche ; visible sur les parties 1-5 seulement */
.pvphelp__back { display: none; margin-right: auto; background: transparent; color: var(--tx-2); border: 1px solid var(--line-2); }
.pvphelp__back svg { width: 17px; height: 17px; }
.pvphelp__back:hover { color: var(--tx-0); border-color: var(--line-3); background: var(--bg-3); }
.pvphelp[data-screen="1"] .pvphelp__back,
.pvphelp[data-screen="2"] .pvphelp__back,
.pvphelp[data-screen="3"] .pvphelp__back,
.pvphelp[data-screen="4"] .pvphelp__back,
.pvphelp[data-screen="5"] .pvphelp__back { display: inline-flex; }
.pvphelp__next {
  color: #ffffff; border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, #7c4df0 0%, #a274f5 100%);
  box-shadow: 0 8px 20px -8px rgba(124,77,240,.75);
}
.pvphelp__next svg { width: 17px; height: 17px; }
.pvphelp__next:hover { transform: translateY(-1px); color: #fff; background: linear-gradient(135deg, #8a5cf7 0%, #b388ff 100%); box-shadow: 0 10px 26px -8px rgba(124,77,240,.9); }
.pvphelp__go {
  color: #ffffff; border: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(135deg, #7c4df0 0%, #a274f5 100%);
  box-shadow: 0 10px 26px -8px rgba(124,77,240,.8), 0 4px 14px -6px rgba(167,139,255,.5);
  height: 56px; padding: 0 52px; font-size: 17px; letter-spacing: .04em;
}
.pvphelp__go:hover { transform: translateY(-1px) scale(1.02); color: #fff; background: linear-gradient(135deg, #8a5cf7 0%, #b388ff 100%); box-shadow: 0 14px 32px -8px rgba(124,77,240,.95), 0 6px 18px -6px rgba(167,139,255,.6); }

/* ecran final (6) : uniquement le bouton GO, centre */
.pvphelp__go { display: none; }
.pvphelp[data-screen="6"] .pvphelp__skip,
.pvphelp[data-screen="6"] .pvphelp__next { display: none; }
.pvphelp[data-screen="6"] .pvphelp__go { display: inline-flex; }
.pvphelp[data-screen="6"] .pvphelp__foot { justify-content: center; }

/* ============================================================
   ONBOARDING avant connexion (demande 3wht 2026-07-24) : le tuto s'ouvre tout seul
   a CHAQUE visite tant qu'on n'est pas connecte, et l'ecran final propose la
   connexion Discord. Ni croix ni fond cliquable tant qu'on n'a pas atteint la fin.
   La 1re fois (data-onboard-first) il est pleinement OBLIGATOIRE (pas de skip) ;
   ensuite le bouton "Skip" reste disponible. Pilote par pvpnew_chrome.js.
   ============================================================ */
.pvphelp__connect {
  display: none; align-items: center; gap: 10px;
  height: 56px; padding: 0 40px; border-radius: 12px;
  font-family: var(--f-sans); font-size: 16px; font-weight: 700; letter-spacing: .02em;
  text-decoration: none; cursor: pointer; color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(135deg, #7c4df0 0%, #a274f5 100%);
  box-shadow: 0 10px 26px -8px rgba(124,77,240,.8), 0 4px 14px -6px rgba(167,139,255,.5);
  transition: transform .16s, box-shadow .2s, background .2s;
}
.pvphelp__connect svg { width: 22px; height: 22px; }
.pvphelp__connect:hover { transform: translateY(-1px) scale(1.02); background: linear-gradient(135deg, #8a5cf7 0%, #b388ff 100%); box-shadow: 0 14px 32px -8px rgba(124,77,240,.95), 0 6px 18px -6px rgba(167,139,255,.6); }

.pvphelp[data-onboarding="1"] .pvphelp__x { display: none; }                     /* pas de croix pendant le tuto */
.pvphelp[data-onboarding="1"][data-onboard-first="1"] .pvphelp__skip { display: none; }  /* pas de skip : obligatoire la 1re fois seulement (ensuite le skip reste dispo) */
.pvphelp[data-onboarding="1"][data-screen="6"] .pvphelp__x { display: grid; }    /* croix debloquee a la fin */
.pvphelp[data-onboarding="1"][data-screen="6"] .pvphelp__go { display: none; }
.pvphelp[data-onboarding="1"][data-screen="6"] .pvphelp__connect { display: inline-flex; }

@keyframes pvphelpFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pvphelpPop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pvphelpScreen { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* -- Apparition du tuto (demande 3wht 2026-07-24) : UNE seule animation, lente et douce
   (confort visuel) - tout le panneau apparait d'un bloc en fondu leger. Plus de cascade
   (fini le logo qui pop, le halo, les textes decales). La classe is-launching est posee
   par pvpnew_chrome.js a l'ouverture. -- */
@keyframes pvphelpAppear {
  from { opacity: 0; transform: scale(.99); }
  to   { opacity: 1; transform: none; }
}
.pvphelp.is-launching .pvphelp__panel { animation: pvphelpAppear 1s ease both; }
.pvphelp.is-launching .pvphelp__screen.is-active { animation: none; } /* pas de slide d'ecran : une seule anim, le fondu lent du panneau */

@media (max-width: 520px) {
  /* Tuto plus compact sur telephone : les tailles en vh gonflaient trop sur les
     grands ecrans mobiles (icone ~100px, titre ~30px, illustration 350px).
     On rapetisse icone / titre / texte / illustration + espacements. Demande 3wht 2026-07-24. */
  .pvphelp { padding: 0; }
  .pvphelp__panel { width: 100vw; max-width: none; height: 100dvh; max-height: 100dvh; padding: 28px 18px 20px; }
  .pvphelp__dots { margin: 2px 0 14px; }
  .pvphelp__icon { width: 66px; height: 66px; border-radius: 20px; margin-bottom: 14px; }
  .pvphelp__icon svg { width: 32px; height: 32px; }
  .pvphelp__eyebrow { font-size: 11px; margin-bottom: 7px; }
  .pvphelp__title { font-size: clamp(1.4rem, 6vw, 1.7rem); margin-bottom: 12px; }
  .pvphelp__text { font-size: 14.5px; line-height: 1.55; max-width: 42ch; }
  .pvphelp__figure { max-width: 250px; margin-bottom: 14px; }
  .pvphelp__foot { gap: 8px; margin-top: 16px; padding-top: 14px; }
  .pvphelp__skip, .pvphelp__next { padding: 0 16px; height: 46px; font-size: 14px; }
  .pvphelp__go { padding: 0 38px; height: 52px; }
  .pvphelp__connect { padding: 0 26px; height: 52px; font-size: 15px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pvp-help-btn::before { animation: none; }
  .pvphelp, .pvphelp__panel, .pvphelp__screen.is-active { animation: none; }
  .pvphelp.is-launching .pvphelp__panel { animation: none; }
  .pvphelp__dot { transition: none; }
}

/* ============================================================
   RESKIN header : bande de navigation plus grande + plus soignee
   (demande 3wht 2026-07-24). Desktop large uniquement : en dessous
   de 1280px la mise en page responsive existante reste inchangee
   (sinon la rangee d'actions de droite deborde). !important pour
   battre les regles "pilule" de la section nav plus haut. */
@media (min-width: 1280px) {
  .topbar__inner { padding-top: 20px !important; padding-bottom: 20px !important; }
  .nav {
    padding: 6px !important; gap: 4px !important;
    background: rgba(255,255,255,.055) !important;
    border-color: rgba(255,255,255,.11) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 18px rgba(0,0,0,.25) !important;
  }
  .nav__item { font-size: 14.5px !important; padding: 11px 20px !important; }
  .brand__mark { width: 46px !important; height: 46px !important; }
  .brand__title { font-size: 17.5px !important; }
  .brand__sub { font-size: 11px !important; }
}

/* ============================================================
   ECHEC DE CONNEXION DISCORD (2026-08-07)
   ------------------------------------------------------------
   Bandeau persistant : une notification de 3 s serait manquee,
   et c'est justement le message dont l'utilisateur a besoin
   pour comprendre pourquoi il n'arrive pas a se connecter.
   ============================================================ */
.loginerr {
  position: fixed; z-index: 1150;
  left: 50%; top: 84px; transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px));
}
.loginerr__box {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 15px 16px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 118, 118, .12), transparent 60%), var(--bg-1);
  border: 1px solid rgba(255, 118, 118, .4);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .55);
}
.loginerr__ic { flex-shrink: 0; color: var(--err); display: grid; place-items: center; margin-top: 1px; }
.loginerr__ic svg { width: 21px; height: 21px; display: block; }
.loginerr__body { flex: 1; min-width: 0; }
.loginerr__title { font-size: 14.5px; font-weight: 800; color: var(--tx-0); margin-bottom: 3px; }
.loginerr__text { font-size: 13px; line-height: 1.55; color: var(--tx-2); }
.loginerr__join {
  display: inline-block; margin-top: 10px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--pn-discord); color: #fff;
  font-size: 12.5px; font-weight: 700; text-decoration: none;
  transition: transform .18s, box-shadow .18s;
}
.loginerr__join:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(88, 101, 242, .38); }
.loginerr__close {
  flex-shrink: 0; background: none; border: 0; cursor: pointer;
  color: var(--tx-3); font-size: 20px; line-height: 1; padding: 0 2px;
}
.loginerr__close:hover { color: var(--tx-0); }
@media (max-width: 560px) { .loginerr { top: 72px; } }

/* ============================================================
   IDENTIFIANT DISCORD SOUS LE PSEUDO (2026-08-06)
   ------------------------------------------------------------
   Le pseudo et l'ID sont empilés dans .lb__ident. L'ID reste
   discret (petit, gris, chasse fixe) pour ne pas concurrencer
   le pseudo, et se tronque proprement si la colonne rétrécit.
   ============================================================ */
.lb__ident {
  display: flex; flex-direction: column; justify-content: center;
  gap: 1px; min-width: 0;
}
.lb__uid {
  font-size: 9.5px; line-height: 1.25;
  color: var(--tx-4);
  letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb__row:hover .lb__uid { color: var(--tx-3); }
/* écrans étroits : le pseudo prime, l'ID passe à la trappe */
@media (max-width: 560px) {
  .lb__uid { display: none; }
}

/* ============================================================
   CHOIX DE LA LANGUE - 1re visite (2026-08-06)
   ------------------------------------------------------------
   z-index 1200 : au-dessus du tutoriel de bienvenue (1100) et du
   loader (1000), pour que le visiteur choisisse sa langue AVANT
   de lire quoi que ce soit.
   ============================================================ */
.pvplang {
  position: fixed; inset: 0; z-index: 1200;
  display: grid; place-items: center;
  padding: 24px;
  opacity: 0; transition: opacity .24s ease;
}
.pvplang.is-in { opacity: 1; }
.pvplang__scrim {
  position: absolute; inset: 0;
  background: rgba(4, 4, 7, .82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pvplang__panel {
  position: relative;
  width: 100%; max-width: 396px;
  padding: 30px 26px 24px;
  text-align: center;
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--pn-accent-rgb), .16), transparent 62%),
    var(--bg-1);
  border: 1px solid rgba(var(--pn-accent-rgb), .28);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(var(--pn-accent-rgb), .1);
  transform: translateY(14px) scale(.98);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.pvplang.is-in .pvplang__panel { transform: none; }
.pvplang__panel::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.pvplang__globe {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin: 0 auto 14px;
  border-radius: 50%;
  color: var(--accent);
  background: rgba(var(--pn-accent-rgb), .12);
  border: 1px solid rgba(var(--pn-accent-rgb), .3);
}
.pvplang__globe svg { width: 24px; height: 24px; display: block; }

.pvplang__title {
  margin: 0;
  font-family: "Archivo Expanded", "Archivo", sans-serif;
  font-size: 21px; font-weight: 800; letter-spacing: -.02em;
  color: var(--tx-0);
}
.pvplang__sub {
  margin: 8px 0 20px;
  font-size: 11.5px; line-height: 1.6; color: var(--tx-3);
}

.pvplang__list { display: flex; flex-direction: column; gap: 8px; }
.pvplang__opt {
  display: flex; align-items: center; gap: 13px;
  width: 100%; padding: 11px 14px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  color: var(--tx-0);
  font: inherit; text-align: left; cursor: pointer;
  transition: background .18s, border-color .18s, transform .18s;
}
.pvplang__opt:hover {
  background: rgba(var(--pn-accent-rgb), .1);
  border-color: rgba(var(--pn-accent-rgb), .42);
  transform: translateX(3px);
}
.pvplang__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pvplang__flag { font-size: 21px; line-height: 1; flex-shrink: 0; }
.pvplang__name { font-size: 14.5px; font-weight: 600; }

@media (max-width: 480px) {
  .pvplang__panel { padding: 24px 18px 20px; }
  .pvplang__title { font-size: 18px; }
  .pvplang__sub { font-size: 10.5px; margin-bottom: 16px; }
}

/* ============================================================
   ÉVÉNEMENT CLASSEMENT - RÉCOMPENSES DU TOP 10 (2026-08-06)
   ------------------------------------------------------------
   Une colonne "Récompense" est insérée juste après la place dans
   l'aperçu ET le classement complet, + un panneau récapitulatif
   des 10 places + la récompense sur chaque marche du podium.
   Le contenu vient de EVENT_REWARDS (pvp.js) : une seule source.
   Familles de lots : argent = or, fruit = turquoise, prestige = violet.
   ============================================================ */

/* ---------- Colonne Récompense : grilles ---------- */
/* Largeur FIXE et pas `auto` : chaque ligne du classement est sa propre grille, donc
   une colonne `auto` se calculerait ligne par ligne et les pseudos ne seraient plus
   alignés. 200px = la 3e place, la plus longue ("50 € ou [cadeau] Admin Gift"), sans
   troncature. Si un lot est renommé plus long, c'est cette valeur qu'il faut augmenter. */
/* Aperçu (accueil) : #, récompense, joueur, pays, ELO, V-D */
.lb-head,
.lb__row--preview { grid-template-columns: 52px 200px 1fr 76px 76px 86px; }
/* Classement complet : + rang et winrate */
.lb-head--full,
.lb--full .lb__row { grid-template-columns: 52px 200px 1fr 84px 104px 76px 76px 58px; }

.lb-head__reward { letter-spacing: .1em; }

/* ---------- Pastille de récompense dans une ligne ---------- */
.lb__reward {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  line-height: 1.5;
  white-space: nowrap; overflow: hidden;
  border: 1px solid transparent;
}
.lb__reward-tx { overflow: hidden; text-overflow: ellipsis; }
.lb__reward-ic { display: grid; place-items: center; flex-shrink: 0; }
/* place non récompensée : cellule vide, l'alignement des colonnes est conservé */
.lb__reward--none { padding: 0; border: 0; }

/* Visuel du lot : vraie image (fruit / badge Prestige) ou pile de pièces dessinée. */
.rw-img {
  display: block; object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
}
.lb__reward .rw-img { width: 20px; height: 20px; }
/* le billet n'est pas carré : sa boîte suit son ratio pour qu'il reste lisible */
.lb__reward--cash .rw-img { width: 23px; height: 15px; }
/* lot au choix ("50 € ou [cadeau] Admin Gift") : le "ou" sépare les deux options */
.lb__reward-or {
  flex-shrink: 0;
  font-size: 9.5px; font-weight: 500; text-transform: lowercase;
  opacity: .62; margin: 0 1px;
}
/* Le cadeau est carré, contrairement au billet : on le cible par son fichier
   (les deux images sont dans des conteneurs distincts, `:first-of-type` ne
   les distinguerait pas). Source 32x32 : ne jamais dépasser ~28px. */
.lb__reward--cash .rw-img[src*="admin-gift"] { width: 18px; height: 18px; }

/* Chaque lot est teinté par sa propre couleur dominante (--rw-glow, posée en ligne).
   Les deux déclarations doublées sont un repli : un navigateur sans color-mix()
   garde la version neutre au lieu d'une pastille transparente. */
.lb__reward {
  /* Le texte est ÉCLAIRCI vers le blanc : certaines couleurs d'identité sont trop
     sombres sur fond noir (le bordeaux de Prestige Ultra devenait illisible). */
  color: var(--rw-glow, var(--accent));
  color: color-mix(in srgb, var(--rw-glow, var(--accent)) 72%, #ffffff);
  background: rgba(255, 255, 255, .05);
  background: color-mix(in srgb, var(--rw-glow, var(--accent)) 12%, transparent);
  border-color: rgba(255, 255, 255, .14);
  border-color: color-mix(in srgb, var(--rw-glow, var(--accent)) 34%, transparent);
}
/* la place n°1 respire un peu plus */
.lb__reward[data-rank="1"] {
  box-shadow: 0 0 14px rgba(245, 196, 81, .25);
  border-color: rgba(245, 196, 81, .55);
}

/* ---------- Récompense sur le podium ---------- */
.podium__reward {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  max-width: 100%;
  padding: 6px 13px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 12px; font-weight: 700; letter-spacing: .01em;
  border: 1px solid transparent;
}
.podium__reward-ic { display: grid; place-items: center; flex-shrink: 0; }
.podium__reward .rw-img { width: 22px; height: 22px; }
.podium__reward--cash .rw-img { width: 25px; height: 16px; }
.podium__reward--cash .rw-img[src*="admin-gift"] { width: 18px; height: 18px; }
.podium__reward-or { font-size: 10px; font-weight: 500; opacity: .6; margin: 0 1px; }
.podium__reward-tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium__reward {
  color: var(--rw-glow, var(--accent));
  color: color-mix(in srgb, var(--rw-glow, var(--accent)) 72%, #ffffff);
  background: rgba(255, 255, 255, .06);
  background: color-mix(in srgb, var(--rw-glow, var(--accent)) 14%, transparent);
  border-color: rgba(255, 255, 255, .16);
  border-color: color-mix(in srgb, var(--rw-glow, var(--accent)) 36%, transparent);
}
.podium__slot[data-rank="1"] .podium__reward {
  box-shadow: 0 0 20px rgba(245, 196, 81, .28);
  border-color: rgba(245, 196, 81, .6);
}

/* ---------- Panneau récapitulatif des récompenses ---------- */
.pvpev {
  border-color: rgba(var(--pn-accent-rgb), .2) !important;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(245, 196, 81, .06), transparent 55%),
    linear-gradient(180deg, rgba(var(--pn-accent-rgb), .05), transparent 42%),
    var(--bg-1) !important;
}
.pvpev__head { align-items: flex-start; flex-wrap: wrap; gap: 14px; }

.pvpev__deadline {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  padding: 9px 15px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line-2);
}
.pvpev__deadline-k { font-size: 9.5px; letter-spacing: .12em; color: var(--tx-3); }
.pvpev__deadline-v {
  font-size: 19px; font-weight: 700; color: #F5C451;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.pvpev__deadline-d { font-size: 11px; color: var(--tx-2); }
.pvpev.is-over .pvpev__deadline-v { color: var(--tx-3); }

.pvpev__intro {
  margin: 2px 0 20px;
  font-size: 13.5px; line-height: 1.65; color: var(--tx-1);
  max-width: 76ch;
}
.pvpev__foot {
  margin: 18px 0 0;
  font-size: 12px; line-height: 1.6; color: var(--tx-3);
}

/* Intertitre de section ("Le podium" / "Places 4 à 10") */
.pvpev__sect {
  display: flex; align-items: baseline; gap: 10px;
  margin: 4px 0 12px;
}
.pvpev__sect-k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tx-1);
}
.pvpev__sect-s { font-size: 12px; color: var(--tx-3); }
.pvpev__sect::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}

/* ---- Bloc 1 : les 3 places en argent réel ---- */
.pvpev__cash {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, 1fr);
}
.pvpev-cash {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  /* centré verticalement : la 3e carte porte une ligne de plus (le lot au choix) et
     tire la hauteur des trois ; sans ça, les cartes 1 et 2 flottent en haut. */
  justify-content: center;
  gap: 4px; padding: 20px 16px 16px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 50% -20%, color-mix(in srgb, var(--rw-glow) 22%, transparent), transparent 70%),
    var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--rw-glow) 30%, transparent);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.pvpev-cash::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--rw-glow), transparent);
}
.pvpev-cash:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--rw-glow) 55%, transparent);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45), 0 0 32px color-mix(in srgb, var(--rw-glow) 18%, transparent);
}
.pvpev-cash__medal {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 13px; font-weight: 800;
  color: #14141e; background: var(--rw-glow);
  box-shadow: 0 0 18px color-mix(in srgb, var(--rw-glow) 45%, transparent);
  margin-bottom: 6px;
}
/* Le billet : même traitement "art posé sur une lueur" que les cartes de lots, mais la
   lueur reste NEUTRE (blanche) et non dorée, sinon le vert du billet vire au kaki. */
/* Le billet est au ratio 480x304 (~1,58) : on lui donne une boîte à sa forme au lieu
   d'un carré, sinon `object-fit: contain` le réduit à la hauteur et il paraît minuscule
   à côté des fruits. */
.pvpev-cash__art {
  position: relative;
  display: grid; place-items: center;
  width: 78px; height: 56px;
  margin: 4px 0 6px;
}
.pvpev-cash__art::before {
  content: ''; position: absolute; inset: -8px -2px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .11), transparent 66%);
  filter: blur(5px);
}
.pvpev-cash__art .rw-img {
  position: relative; width: 78px; height: 50px;
  transition: transform .25s;
}
.pvpev-cash:hover .rw-img { transform: scale(1.06); }

.pvpev-cash__amount {
  display: inline-flex; align-items: baseline;
  font-family: var(--f-mono);
  font-size: 30px; font-weight: 800; letter-spacing: -.02em;
  color: var(--rw-glow);
  text-shadow: 0 0 26px color-mix(in srgb, var(--rw-glow) 40%, transparent);
  line-height: 1.15;
}
/* symbole monétaire plus petit et collé au nombre (la mono met sinon un trou de 0.6em) */
.pvpev-cash__cur { font-size: .58em; font-weight: 700; margin-left: 3px; opacity: .82; }
/* Lot au choix : petite ligne "ou [cadeau] Admin Gift" sous le montant. */
.pvpev-cash__alt {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 8px 0 2px; padding: 4px 11px 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-2);
  max-width: 100%;
}
.pvpev-cash__or {
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-3);
}
.pvpev-cash__alt .rw-img { width: 22px; height: 22px; }
.pvpev-cash__alt-tx {
  font-size: 12.5px; font-weight: 700; color: var(--tx-0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pvpev-cash__place {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx-3);
}

/* La 1re place domine : carte plus large, plus haute, halo plus franc. */
.pvpev__cash { grid-template-columns: 1.22fr 1fr 1fr; align-items: stretch; }
.pvpev-cash[data-rank="1"] { padding: 26px 16px 20px; }
.pvpev-cash[data-rank="1"] .pvpev-cash__amount { font-size: 40px; }
.pvpev-cash[data-rank="1"] .pvpev-cash__medal {
  width: 34px; height: 34px; font-size: 15px;
  box-shadow: 0 0 26px color-mix(in srgb, var(--rw-glow) 60%, transparent);
}
.pvpev-cash[data-rank="1"]::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 60px;
  background: linear-gradient(0deg, color-mix(in srgb, var(--rw-glow) 12%, transparent), transparent);
  pointer-events: none;
}

/* ---- Bloc 2 : places 4 à 10, avec le vrai visuel du lot ---- */
.pvpev__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.pvpev-lot {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 12px 14px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(100% 68% at 50% 0%, color-mix(in srgb, var(--rw-glow) 16%, transparent), transparent 72%),
    var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--rw-glow) 24%, transparent);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.pvpev-lot:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--rw-glow) 52%, transparent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 30px color-mix(in srgb, var(--rw-glow) 16%, transparent);
}
.pvpev-lot__rank {
  position: absolute; top: 9px; left: 11px;
  font-size: 11px; font-weight: 700; color: var(--tx-3);
  font-variant-numeric: tabular-nums;
}
.pvpev-lot__art {
  position: relative;                 /* ancre la lueur ci-dessous sur l'image, pas sur la carte */
  display: grid; place-items: center;
  width: 78px; height: 78px;
  margin-top: 6px;
}
/* la lueur derrière l'objet : c'est elle qui donne le côté "carte de butin" */
.pvpev-lot__art::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rw-glow) 34%, transparent), transparent 68%);
  filter: blur(6px);
}
.pvpev-lot__art .rw-img {
  position: relative;
  width: 72px; height: 72px;
  transition: transform .25s;
}
.pvpev-lot:hover .rw-img { transform: scale(1.07); }
.pvpev-lot__label {
  font-size: 13.5px; font-weight: 700; color: var(--tx-0);
  text-align: center; line-height: 1.3;
}
.pvpev-lot__kind {
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--rw-glow) 78%, #ffffff);
  opacity: .95;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  /* pvp.css masque ici les cellules 4 et 7 du classement complet (pays / WR).
     L'insertion de la colonne Récompense décale ces index d'un cran : on rétablit
     ces deux-là, puis on masque les bonnes cellules (rang / winrate) par classe. */
  .lb-head--full,
  .lb--full .lb__row { grid-template-columns: 44px 200px 1fr 76px 78px 58px; }
  .lb-head--full > :nth-child(4), .lb--full .lb__row > :nth-child(4) { display: flex; }
  .lb-head--full > :nth-child(7), .lb--full .lb__row > :nth-child(7) { display: block; }
  .lb-head--full > .lb-head__tier, .lb-head--full > .lb-head__wr,
  .lb--full .lb__row > .lb__tier-cell, .lb--full .lb__row > .lb__wr { display: none; }
}

@media (max-width: 768px) {
  /* Trop étroit pour une colonne dédiée : la pastille passe sur une 2e ligne
     pleine largeur sous la ligne du joueur. Placement explicite = aucune
     ambiguïté de placement automatique de la grille. */
  .lb-head__reward { display: none; }
  .lb-head, .lb-head--full { grid-template-columns: 34px 1fr 58px 68px; }
  .lb__row--preview, .lb--full .lb__row { grid-template-columns: 34px 1fr 58px 68px; row-gap: 7px; }

  .lb__row--preview > .lb__rank,   .lb--full .lb__row > .lb__rank   { grid-column: 1; grid-row: 1; }
  .lb__row--preview > .lb__player, .lb--full .lb__row > .lb__player { grid-column: 2; grid-row: 1; }
  .lb__row--preview > .lb__elo,    .lb--full .lb__row > .lb__elo    { grid-column: 3; grid-row: 1; }
  .lb__row--preview > .lb__wl,     .lb--full .lb__row > .lb__wl     { grid-column: 4; grid-row: 1; }
  .lb__row--preview > .lb__reward, .lb--full .lb__row > .lb__reward {
    grid-column: 1 / -1; grid-row: 2; justify-self: start;
  }
  .lb__reward--none { display: none; }

  /* Le pays est masqué sur mobile par pvp.css, mais la règle "≤1100px" ci-dessus
     le réaffiche (elle reste active à 390px) : on le remasque explicitement, sinon
     la cellule PAYS déborde sur une 2e ligne et décale l'en-tête. */
  .lb-head > :nth-child(4), .lb-head--full > :nth-child(4),
  .lb__row--preview > .lb__country, .lb--full .lb__row > .lb__country { display: none; }

  .pvpev__head { flex-direction: column; }
  .pvpev__deadline { align-items: flex-start; width: 100%; }
  /* Le podium reste sur 3 colonnes (c'est ce qui le fait LIRE comme un podium),
     seuls les montants rétrécissent. La grille des lots tombe d'elle-même à
     2 colonnes grâce à auto-fit : pas besoin de la forcer à 1. */
  .pvpev__cash { gap: 8px; }
  .pvpev-cash { padding: 15px 8px 12px; }
  .pvpev-cash__art { width: 54px; height: 40px; margin: 2px 0 4px; }
  .pvpev-cash__art .rw-img { width: 54px; height: 34px; }
  /* Carte de ~80px de large en interieur : "ou [cadeau] Admin Gift" ne tient pas sur
     une ligne. Le "ou" prend toute la largeur et pousse l'icone + le nom en dessous. */
  .pvpev-cash__alt {
    flex-wrap: wrap; justify-content: center;
    gap: 1px 4px; padding: 4px 6px; margin: 6px 0 2px;
    border-radius: var(--r-sm);
  }
  .pvpev-cash__or { flex-basis: 100%; text-align: center; font-size: 8px; }
  .pvpev-cash__alt .rw-img { width: 15px; height: 15px; }
  .pvpev-cash__alt-tx { font-size: 9.5px; }
  .pvpev-cash__amount { font-size: 21px; }
  .pvpev-cash[data-rank="1"] .pvpev-cash__amount { font-size: 24px; }
  .pvpev-cash__medal { width: 25px; height: 25px; font-size: 12px; }
  .pvpev-cash__place { font-size: 8.5px; letter-spacing: .1em; }
  .pvpev__grid { gap: 9px; }
  .pvpev-lot__art, .pvpev-lot__art .rw-img { width: 62px; height: 62px; }
  .pvpev-lot__label { font-size: 12.5px; }
}

/* ---- Téléphone : le panneau des récompenses faisait ~1240px de haut (dont ~610px
   rien que pour les lots 4 à 10) sur un écran de 844px, soit 1,5 écran de défilement
   pour une seule section. On resserre : 3 vignettes par ligne au lieu de 2, visuel
   et textes réduits d'un cran. Le podium (les 3 places en argent) garde sa taille,
   c'est lui qui doit rester l'accroche. ---- */
@media (max-width: 560px) {
  .pvpev__intro { margin: 2px 0 14px; font-size: 12.5px; line-height: 1.55; }
  .pvpev__sect { margin: 2px 0 9px; }
  .pvpev__cash { margin-bottom: 18px; }

  .pvpev__grid { gap: 7px; grid-template-columns: repeat(3, 1fr); }
  .pvpev-lot {
    gap: 3px; padding: 17px 5px 9px;
    border-radius: var(--r-md);
  }
  .pvpev-lot__rank { top: 5px; left: 7px; font-size: 9.5px; }
  .pvpev-lot__art, .pvpev-lot__art .rw-img { width: 46px; height: 46px; }
  .pvpev-lot__art { margin-top: 0; }
  .pvpev-lot__label { font-size: 10.5px; line-height: 1.25; }
  .pvpev-lot__kind { font-size: 7.5px; letter-spacing: .1em; }
  .pvpev__foot { margin-top: 12px; font-size: 11px; }
}

/* ---- Téléphone : l'aperçu du top 3 du classement (le podium) faisait ~920px de
   haut, soit PLUS d'un écran entier (844px) rien que pour 3 joueurs. La cause :
   pvp.css bascule `.podium` sur UNE colonne sous 768px, donc les 3 cartes
   s'empilent en pleine largeur. On le remet sur 3 colonnes - c'est ce qui le fait
   lire comme un podium - et on réduit chaque élément d'un cran. Résultat : ~190px
   au lieu de ~920, le podium tient d'un coup d'oeil sans défilement.
   pvpnew.css est chargé APRÈS pvp.css : ces règles gagnent sans `!important`. ---- */
@media (max-width: 768px) {
  .podium {
    grid-template-columns: 1fr 1.12fr 1fr;
    gap: 6px;
    padding: 0;
    margin-bottom: 22px;
  }
  /* pvp.css remet `order: 0` sur les 3 places quand elles s'empilent : on rétablit
     l'ordre du podium (2e à gauche, 1er au centre, 3e à droite). */
  .podium__slot[data-rank="2"] { order: 1; }
  .podium__slot[data-rank="1"] { order: 2; }
  .podium__slot[data-rank="3"] { order: 3; }

  .podium__slot { padding: 11px 5px 10px; border-radius: var(--r-md) !important; }
  .podium__crown { width: 21px; height: 21px; font-size: 11px; margin-bottom: 7px; }
  .podium__avatar { width: 46px; height: 46px; margin-bottom: 7px; border-radius: var(--r-sm); }
  .podium__slot[data-rank="1"] .podium__avatar {
    width: 54px; height: 54px; border-width: 1px 1px 2px 1px;
  }
  .podium__name { font-size: 11px; margin-bottom: 2px; }
  .podium__country { font-size: 8.5px; margin-bottom: 6px; letter-spacing: .04em; }
  .podium__country .flag { font-size: 9px; }
  .podium__elo { font-size: 17px; }
  .podium__slot[data-rank="1"] .podium__elo { font-size: 20px; transform: none; }

  /* La pastille de récompense doit tenir dans ~115px de large : « 50 € ou Admin
     Gift » ne passe pas sur une ligne, donc le « ou » prend toute la largeur et
     pousse l'icône + le libellé de l'alternative en dessous (même parade que sur
     les cartes de lots juste au-dessus). */
  .podium__reward {
    margin-top: 8px;
    display: flex; flex-wrap: wrap; justify-content: center;
    /* Pleine largeur de la carte : les 3 pastilles s'alignent, et surtout
       « Admin Gift » gagne les quelques pixels qui lui manquaient pour tenir
       sur une ligne (75px de contenu pour 75px dispo = ça passait à la ligne). */
    width: 100%; box-sizing: border-box;
    gap: 1px 4px;
    padding: 4px 5px;
    border-radius: 10px;
    font-size: 9.5px;
  }
  .podium__reward .rw-img { width: 16px; height: 16px; }
  .podium__reward--cash .rw-img { width: 19px; height: 12px; }
  .podium__reward--cash .rw-img[src*="admin-gift"] { width: 13px; height: 13px; }
  .podium__reward-or { flex-basis: 100%; text-align: center; font-size: 8px; line-height: 1.1; margin: 0; }
  .podium__reward-tx { min-width: 0; }
}

/* Petits Android (360px) : la carte tombe à ~94px, et « Admin Gift » se retrouvait
   séparé de son icône (75px à caser dans 72px). Un cran de moins sur la pastille
   suffit à les garder sur la même ligne. */
@media (max-width: 400px) {
  .podium__reward { padding: 4px; gap: 1px 3px; font-size: 9px; }
  .podium__reward .rw-img { width: 14px; height: 14px; }
  .podium__reward--cash .rw-img { width: 17px; height: 11px; }
  .podium__reward--cash .rw-img[src*="admin-gift"] { width: 12px; height: 12px; }
}