/* ═══════════════════════════════════════════════════════════════════════
   PG-CONTROLS — curseurs et barres de défilement au dessin du site
   ───────────────────────────────────────────────────────────────────────
   Un <input type="range"> ou une barre de défilement « de base » trahit le
   navigateur au milieu d'une page qui, partout ailleurs, est PentaGuess.
   Les barres apparaissent n'importe où dès que la fenêtre rétrécit (une
   liste de salons, la bande des skins du Puzzle, la page entière) : ce
   fichier est donc chargé sur TOUTES les pages, pas seulement celles qui ont
   un curseur.  Modèle : le bloc « Sliders — style PentaGuess » de
   deferlante_v2.html. Le remplissage doré du curseur (webkit) est peint par
   pg-controls.js (variable --val) ; Firefox a ::-moz-range-progress.
   Thème : or par défaut, rouge sur les pages Valorant (html.pg-valo, posé par
   pg-controls.js d'après l'URL).  CLAUDE.md § 5, règle SLIDER du checker.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --pgc-a:#C8AA6E;            /* accent : or (Valorant : rouge) */
  --pgc-b:#785A28;            /* accent sombre */
  --pgc-l:#F0E6D3;            /* accent clair */
  --pgc-rgb:200,170,110;      /* l'accent en rgb, pour les transparences */
  --pgc-l-rgb:240,230,211;
}
html.pg-valo{ --pgc-a:#FF4655; --pgc-b:#7A1620; --pgc-l:#FFD7DB; --pgc-rgb:255,70,85; --pgc-l-rgb:255,215,219; }

/* ── Le curseur de la souris ──────────────────────────────────────────── */
/* Un V orienté comme une flèche classique : V doré + V bleu hextech dans le
   creux (rouge + cyan sur Valorant) ; sur ce qui est cliquable, le V intérieur
   recule et s'allume (*-lit.svg) ; ce qui s'attrape : reculé, éteint
   (*-grab.svg) ; tenu (grabbing) : allumé et enclenché contre le grand
   (*-hold.svg). Dessinés par tools/make-cursors.py, 32×32 exactement
   (au-delà Chrome cache le curseur près des bords). Les pages écrivent
   `cursor:pointer` / `cursor:default` à des centaines d'endroits : on ne les
   réécrit pas, pg-controls.js lit la valeur calculée au survol et pose
   data-pg-cur sur l'élément survolé — c'est lui qui choisit le dessin. Les
   autres valeurs (text, grab, not-allowed, crosshair…) gardent le curseur
   natif : elles disent quelque chose. Chemins absolus exprès : un url() dans
   une variable se résout d'après la page, pas d'après la feuille. */
:root{
  --pgc-cur-arrow:url(/cursors/lol-arrow.svg?v=20260918-7) 2 2;
  --pgc-cur-click:url(/cursors/lol-arrow-lit.svg?v=20260918-7) 2 2;
  --pgc-cur-grab:url(/cursors/lol-arrow-grab.svg?v=20260918-7) 2 2;   /* attrapable : petit V reculé */
  --pgc-cur-hold:url(/cursors/lol-arrow-hold.svg?v=20260918-7) 2 2;   /* tenu (grabbing) : petit V allumé enclenché contre le grand */
}
html.pg-valo{
  --pgc-cur-arrow:url(/cursors/valo-arrow.svg?v=20260918-7) 2 2;
  --pgc-cur-click:url(/cursors/valo-arrow-lit.svg?v=20260918-7) 2 2;
  --pgc-cur-grab:url(/cursors/valo-arrow-grab.svg?v=20260918-7) 2 2;
  --pgc-cur-hold:url(/cursors/valo-arrow-hold.svg?v=20260918-7) 2 2;
}
/* Le curseur choisi par le joueur (25/09/2026) : pg-controls.js recopie
   dans html[data-pg-cursor] le choix gardé par pg-look.js (localStorage
   pg_look). Écrit APRÈS html.pg-valo, même spécificité : le choix du joueur
   l'emporte sur l'univers de la page. Sans choix, rien n'est posé. */
html[data-pg-cursor=lol]{
  --pgc-cur-arrow:url(/cursors/lol-arrow.svg?v=20260925) 2 2;
  --pgc-cur-click:url(/cursors/lol-arrow-lit.svg?v=20260925) 2 2;
  --pgc-cur-grab:url(/cursors/lol-arrow-grab.svg?v=20260925) 2 2;
  --pgc-cur-hold:url(/cursors/lol-arrow-hold.svg?v=20260925) 2 2;
}
html[data-pg-cursor=valo]{
  --pgc-cur-arrow:url(/cursors/valo-arrow.svg?v=20260925) 2 2;
  --pgc-cur-click:url(/cursors/valo-arrow-lit.svg?v=20260925) 2 2;
  --pgc-cur-grab:url(/cursors/valo-arrow-grab.svg?v=20260925) 2 2;
  --pgc-cur-hold:url(/cursors/valo-arrow-hold.svg?v=20260925) 2 2;
}
html[data-pg-cursor=braise]{
  --pgc-cur-arrow:url(/cursors/braise-arrow.svg?v=20260925) 2 2;
  --pgc-cur-click:url(/cursors/braise-arrow-lit.svg?v=20260925) 2 2;
  --pgc-cur-grab:url(/cursors/braise-arrow-grab.svg?v=20260925) 2 2;
  --pgc-cur-hold:url(/cursors/braise-arrow-hold.svg?v=20260925) 2 2;
}
html[data-pg-cursor=platine]{
  --pgc-cur-arrow:url(/cursors/platine-arrow.svg?v=20260925) 2 2;
  --pgc-cur-click:url(/cursors/platine-arrow-lit.svg?v=20260925) 2 2;
  --pgc-cur-grab:url(/cursors/platine-arrow-grab.svg?v=20260925) 2 2;
  --pgc-cur-hold:url(/cursors/platine-arrow-hold.svg?v=20260925) 2 2;
}
html[data-pg-cursor=neant]{
  --pgc-cur-arrow:url(/cursors/neant-arrow.svg?v=20260925) 2 2;
  --pgc-cur-click:url(/cursors/neant-arrow-lit.svg?v=20260925) 2 2;
  --pgc-cur-grab:url(/cursors/neant-arrow-grab.svg?v=20260925) 2 2;
  --pgc-cur-hold:url(/cursors/neant-arrow-hold.svg?v=20260925) 2 2;
}
html[data-pg-cursor=chall]{
  --pgc-cur-arrow:url(/cursors/chall-arrow.svg?v=20260925) 2 2;
  --pgc-cur-click:url(/cursors/chall-arrow-lit.svg?v=20260925) 2 2;
  --pgc-cur-grab:url(/cursors/chall-arrow-grab.svg?v=20260925) 2 2;
  --pgc-cur-hold:url(/cursors/chall-arrow-hold.svg?v=20260925) 2 2;
}
html{cursor:var(--pgc-cur-arrow),auto;}
[data-pg-cur=default]{cursor:var(--pgc-cur-arrow),default!important;}
[data-pg-cur=pointer]{cursor:var(--pgc-cur-click),pointer!important;}
[data-pg-cur=grab]{cursor:var(--pgc-cur-grab),grab!important;}
[data-pg-cur=grabbing]{cursor:var(--pgc-cur-hold),grabbing!important;}

/* ── Curseurs ─────────────────────────────────────────────────────────── */
input[type=range]{
  -webkit-appearance:none;appearance:none;
  height:8px;border-radius:5px;outline:none;cursor:pointer;margin:6px 0;
  background:linear-gradient(90deg,var(--pgc-l) 0%,var(--pgc-a) var(--val,50%),rgba(var(--pgc-rgb),.16) var(--val,50%),rgba(var(--pgc-rgb),.16) 100%);
  border:1px solid rgba(var(--pgc-rgb),.32);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.55),0 0 8px rgba(var(--pgc-rgb),.10);
}
input[type=range]:disabled{opacity:.45;cursor:default;}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff6e0,var(--pgc-a) 55%,var(--pgc-b));
  border:1px solid var(--pgc-b);
  box-shadow:0 0 8px rgba(var(--pgc-rgb),.6),0 1px 3px rgba(0,0,0,.6);cursor:pointer;transition:box-shadow .12s;
}
input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 13px rgba(var(--pgc-l-rgb),.9),0 1px 3px rgba(0,0,0,.6);}
input[type=range]::-moz-range-track{height:8px;border-radius:5px;background:rgba(var(--pgc-rgb),.16);border:1px solid rgba(var(--pgc-rgb),.32);}
input[type=range]::-moz-range-progress{height:8px;border-radius:5px;background:linear-gradient(90deg,var(--pgc-l),var(--pgc-a));}
input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff6e0,var(--pgc-a) 55%,var(--pgc-b));
  border:1px solid var(--pgc-b);box-shadow:0 0 8px rgba(var(--pgc-rgb),.6);cursor:pointer;
}

/* ── Barres de défilement ─────────────────────────────────────────────── */
/* Firefox : les deux propriétés standard. ⚠️ Réservées aux moteurs qui n'ont
   pas ::-webkit-scrollbar — Chrome (≥ 121) les comprend aussi, et dès qu'elles
   sont posées il IGNORE tout style ::-webkit-scrollbar de l'élément : on
   perdrait notre poignée dégradée, et les pages qui cachent une barre de
   carrousel (`::-webkit-scrollbar{display:none}`) la verraient réapparaître.
   Pour la même raison, ne pas écrire `scrollbar-width:thin` dans une page. */
@supports not selector(::-webkit-scrollbar){
  *{scrollbar-width:thin;scrollbar-color:var(--pgc-b) rgba(1,10,19,.55);}
}
/* WebKit / Blink : piste sombre, poignée dégradée qui s'éclaire au survol. */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:rgba(1,10,19,.55);border-radius:6px;}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--pgc-a),var(--pgc-b));border-radius:6px;border:2px solid rgba(1,10,19,.75);}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(var(--pgc-l),var(--pgc-a));}
::-webkit-scrollbar-corner{background:rgba(1,10,19,.55);}

/* ── Les icônes de champion en rond ───────────────────────────────────── */
/* L'icône carrée de Data Dragon (img/champion/<Id>.png, 128 px) porte dans
   l'image même un cadre presque noir de 4 px et une vignette sombre. Dans un
   cercle, ce cadre devient un anneau noir à l'intérieur du liseré doré —
   « je l'ai vu plusieurs fois dans tout PentaGuess » (21/09/2026). On rogne
   4,5 % de chaque côté à la source, sans toucher au balisage des pages ;
   un navigateur qui ignore object-view-box garde l'aspect d'avant. Les splash
   et loading n'ont pas ce cadre. Une page qui rogne déjà elle-même (le
   portrait dans un .ava des pages champion) remet none. */
img[src*="/img/champion/"]:not([src*="/splash/"]):not([src*="/loading/"]){ object-view-box:inset(4.5%); }

/* ── L'en-tête sur mobile ─────────────────────────────────────────────── */
/* 15/10/2026. Sur mobile l'en-tête alignait « P » + langue + amis + cloche
   + LoL/Valo + profil avec pseudo (+ « Jeu suivant » des journaliers),
   ≈ 500 px pour 360 : tout se chevauchait, ou la page s'élargissait et le
   téléphone la dézoomait. Les pages écrivent chacune leur en-tête et les
   boutons arrivent de quatre scripts (lang.js, amis.js, notifs.js,
   user-system.js) : la version compacte est donc posée ici, chargé partout.
   Compacte : drapeau seul, avatar seul (le pseudo est dans le profil),
   LoL/Valo centré (la séparation au milieu de l'écran),
   « Jeu suivant » du haut retiré (celui du bas de page reste).
   Seuil 760 px mesuré : entre 600 et 760 ça se chevauchait encore. */
@media (max-width:760px){
  .header{gap:.4rem!important;padding-left:.6rem!important;padding-right:.6rem!important;}
  .header-right{display:flex!important;align-items:center;gap:.35rem!important;flex-shrink:0;margin-left:auto;}
  .lang-switcher{margin:0!important;flex-shrink:0;}
  .lang-switcher .pg-lang-current .pg-lang-code,
  .lang-switcher .pg-lang-current .pg-lang-caret{display:none!important;}
  .lang-switcher .pg-lang-current{padding:.34rem .45rem!important;}
  /* LoL/Valo : la séparation des deux segments au milieu de l'écran —
     segments de même largeur + bouton centré sur l'en-tête (sticky, donc
     bloc conteneur ; .header-right n'est pas positionné). */
  .header-right{position:static!important;}
  .universe-toggle{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;height:30px!important;margin:0!important;}
  .universe-toggle .ut-seg{width:3rem;justify-content:center;padding:0!important;letter-spacing:.08em!important;}
  #pga-wrap,#pgn-wrap{margin:0!important;}
  #us-btn{padding:.24rem!important;gap:0!important;}
  #us-btn-name{display:none!important;}
  #daily-nav-fab{display:none!important;}
}
/* Très petits écrans : le LoL/Valo centré doit laisser passer amis + cloche
   + avatar à droite (mesuré à 320 px, amis compris : il arrive après coup). */
@media (max-width:374px){
  .header{gap:.3rem!important;padding-left:.5rem!important;padding-right:.5rem!important;}
  .header-right{gap:.25rem!important;}
  .universe-toggle .ut-seg{width:2.55rem;letter-spacing:.04em!important;}
  #pga-btn,#pgn-btn{width:29px!important;}
}