/* ============================================================================
   RANKED — l'échelle des potes (écran in-app).
   Maquette validée : brandnew/drafts/ranked-01-home.html — recopiée telle quelle,
   les sélecteurs sont seulement scopés sous #sec-ranked.
   Barème et règle d'entrée : src/config/ranked.js + saisons/saison-2-neon/RANKED.md
   Rempli par public/js/ranked.js depuis /api/ranked (le serveur est l'autorité).
   ============================================================================ */
#sec-ranked .rk-wrap { display:flex; flex-direction:column; gap:12px; }
  /* ── LA CARTE DE RANG ───────────────────────────────────────────────── */
  /* fond encre -> l'ombre prend la couleur du rang. Jamais de noir sur noir. */
  #sec-ranked .rk-hero { position:relative; overflow:hidden; border:4px solid var(--ink);
    box-shadow:8px 8px 0 var(--magenta); background:var(--ink); color:var(--paper); padding:15px; }
  #sec-ranked .rk-hero .se { position:absolute; top:11px; right:11px; font-family:var(--fb); font-weight:800;
    font-size:9px; letter-spacing:1.6px; background:var(--magenta); color:var(--paper);
    border:3px solid var(--paper); padding:4px 8px; }
  #sec-ranked .rk-top { display:flex; align-items:center; gap:14px; }
  #sec-ranked .rk-emb { width:84px; height:84px; flex:none; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:2px; border:4px solid var(--ink);
    box-shadow:5px 5px 0 #0A0A0A; transform:rotate(-5deg); background:var(--rkc); color:#0A0A0A; }
  #sec-ranked .rk-emb .rn { font-family:var(--fd); font-size:30px; line-height:.8; }
  #sec-ranked .rk-emb .rl { font-family:var(--fb); font-weight:800; font-size:8px; letter-spacing:1.4px; }
  #sec-ranked .rk-id { flex:1; min-width:0; }
  #sec-ranked .rk-id .tt { font-family:var(--fb); font-weight:800; font-size:9px; letter-spacing:1.8px; opacity:.7; }
  #sec-ranked .rk-id .rk { font-family:var(--fd); font-size:34px; line-height:1; margin-top:3px; color:var(--rkc); }
  #sec-ranked .rk-bar { position:relative; height:17px; margin-top:9px; border:3px solid var(--paper);
    background:rgba(255,255,255,.12); overflow:hidden; }
  #sec-ranked .rk-bar i { display:block; height:100%; background:var(--rkc); }
  #sec-ranked .rk-bl { display:flex; justify-content:space-between; margin-top:6px;
    font-family:var(--fb); font-weight:800; font-size:9px; letter-spacing:1.1px; }
  #sec-ranked .rk-bl .b { opacity:.72; }
  #sec-ranked .rk-floor { display:flex; align-items:center; gap:9px; margin-top:12px; padding:9px 10px;
    background:var(--green); color:#0A0A0A; border:3px solid var(--paper);
    font-family:var(--fb); font-weight:800; font-size:9px; letter-spacing:.9px; line-height:1.5; }
  #sec-ranked .rk-floor .sh { width:26px; height:26px; flex:none; }
  #sec-ranked .rk-meta { display:flex; gap:7px; margin-top:10px; flex-wrap:wrap; }
  #sec-ranked .rk-meta span { font-family:var(--fb); font-weight:800; font-size:9px; letter-spacing:1.2px;
    border:3px solid var(--paper); padding:4px 8px; }
  #sec-ranked .rk-meta .co { background:var(--yellow); color:#0A0A0A; border-color:var(--ink); }

  /* ── L'ÉCHELLE ──────────────────────────────────────────────────────── */
  #sec-ranked .rk-h { display:flex; align-items:center; gap:10px; margin-top:4px;
    font-family:var(--fb); font-weight:800; font-size:10px; letter-spacing:1.8px; }
  #sec-ranked .rk-h i { flex:1; height:4px; background:var(--ink); }
  /* Edwin : « il faut que les blocs GOAT, NÉON, CHROME, CUIVRE, CARTON
     puissent avoir de l'ombre, au lieu que ce soit juste des éléments
     encadrés ». Chaque rang porte donc l'ombre DE SA COULEUR, et le rang
     atteint est teinté : on voit d'un coup d'œil où on en est. */
  #sec-ranked .rk-row { position:relative; display:flex; align-items:center; gap:10px; padding:12px 11px;
    border:4px solid var(--ink); box-shadow:6px 6px 0 var(--rkc); background:var(--paper); }
  #sec-ranked .rk-row.ici { box-shadow:7px 7px 0 var(--rkc); background:color-mix(in srgb, var(--rkc) 22%, var(--paper)); }
  #sec-ranked .rk-row.lock { box-shadow:6px 6px 0 var(--gray); background:var(--paper); }
  #sec-ranked .rk-row.lock .rk-chip { background:var(--gray); }
  #sec-ranked .rk-row.fait { background:color-mix(in srgb, var(--rkc) 12%, var(--paper)); }
  #sec-ranked .rk-chip { font-family:var(--fd); font-size:15px; letter-spacing:.6px; padding:6px 9px;
    border:3px solid var(--ink); background:var(--rkc); color:#0A0A0A; flex:none; }
  #sec-ranked .rk-bx { flex:1; min-width:0; }
  #sec-ranked .rk-bx .d { font-family:var(--fb); font-weight:700; font-size:9px; letter-spacing:1.1px;
    opacity:.72; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #sec-ranked .rk-div { display:flex; gap:4px; margin-top:6px; }
  #sec-ranked .rk-div i { width:22px; height:8px; border:2px solid var(--ink); display:block; }
  #sec-ranked .rk-div i.f { background:var(--ink); }
  #sec-ranked .rk-tag { font-family:var(--fb); font-weight:800; font-size:8px; letter-spacing:1.2px;
    padding:4px 7px; border:3px solid var(--ink); flex:none; }
  #sec-ranked .rk-tag.zero { background:var(--green); } .rk-tag.risk { background:var(--red); color:var(--paper); }
  #sec-ranked .rk-ici { position:absolute; top:-11px; left:9px; font-family:var(--fb); font-weight:800;
    font-size:8px; letter-spacing:1.4px; background:var(--magenta); color:var(--paper);
    border:3px solid var(--ink); padding:2px 7px; }
  #sec-ranked .rk-st { width:22px; height:22px; flex:none; position:relative; }
  #sec-ranked .rk-st.ok::before, #sec-ranked .rk-st.ok::after { content:''; position:absolute; background:var(--green); }
  #sec-ranked .rk-st.ok::before { width:4px; height:10px; left:5px; top:8px; transform:rotate(-45deg); }
  #sec-ranked .rk-st.ok::after  { width:4px; height:17px; left:12px; top:2px; transform:rotate(35deg); }
  #sec-ranked .rk-st.lk { border:3px solid var(--ink); border-radius:2px 2px 0 0; }

  /* ── CE QUI COMPTE : la regle d'entree, lisible dans l'ecran ───────── */
  #sec-ranked .rk-rule { border:4px solid var(--ink); box-shadow:6px 6px 0 var(--cyan);
    background:var(--ink); color:var(--paper); padding:13px; }
  #sec-ranked .rk-rule > b { display:block; font-family:var(--fd); font-size:17px; letter-spacing:.5px; margin-bottom:9px; }
  #sec-ranked .rk-rule ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
  #sec-ranked .rk-rule li { display:flex; align-items:flex-start; gap:9px;
    font-family:var(--fb); font-weight:700; font-size:11px; letter-spacing:.4px; line-height:1.35; }
  #sec-ranked .rk-mk { width:17px; height:17px; flex:none; position:relative; margin-top:1px; }
  #sec-ranked .rk-mk::before, #sec-ranked .rk-mk::after { content:''; position:absolute; }
  #sec-ranked .rk-mk.y::before { width:3px; height:8px; left:4px; top:6px; background:var(--green); transform:rotate(-45deg); }
  #sec-ranked .rk-mk.y::after  { width:3px; height:14px; left:10px; top:0; background:var(--green); transform:rotate(35deg); }
  #sec-ranked .rk-mk.n::before, #sec-ranked .rk-mk.n::after { width:3px; height:17px; left:7px; top:0; background:var(--red); }
  #sec-ranked .rk-mk.n::before { transform:rotate(45deg); } .rk-mk.n::after { transform:rotate(-45deg); }

  /* ── LE REÇU (écran ②) ─────────────────────────────────────────────── */
  #sec-ranked .rk-ctx { display:flex; gap:6px; flex-wrap:wrap; }
  #sec-ranked .rk-ctx span { font-family:var(--fb); font-weight:800; font-size:9px; letter-spacing:1.2px;
    border:3px solid var(--ink); padding:4px 8px; background:var(--paper); }
  #sec-ranked .rk-big { font-family:var(--fd); font-size:74px; line-height:.9; text-align:center; margin-top:6px; }
  #sec-ranked .rk-big u { font-size:26px; text-decoration:none; }
  #sec-ranked .rk-bigs { text-align:center; font-family:var(--fb); font-weight:800; font-size:9px;
    letter-spacing:1.6px; opacity:.7; }
  #sec-ranked .rk-rcpt { border:4px solid var(--ink); box-shadow:6px 6px 0 var(--ink);
    background:var(--paper); padding:13px; transform:rotate(-1deg); }
  #sec-ranked .rk-rh { text-align:center; font-family:var(--fd); font-size:17px; letter-spacing:2px; }
  #sec-ranked .rk-rs { text-align:center; font-family:var(--fb); font-weight:700; font-size:8px;
    letter-spacing:1.2px; opacity:.6; margin-top:3px; }
  #sec-ranked .rk-sep { height:0; border-top:3px dashed var(--ink); margin:9px 0; opacity:.45; }
  #sec-ranked .rk-ln { display:flex; align-items:baseline; gap:6px; font-family:var(--fb);
    font-weight:700; font-size:10px; letter-spacing:.8px; margin:5px 0; }
  #sec-ranked .rk-ln .dots { flex:1; border-bottom:2px dotted var(--ink); opacity:.4; }
  #sec-ranked .rk-ln .v { font-family:var(--fd); font-size:15px; }
  #sec-ranked .rk-tot { display:flex; justify-content:space-between; align-items:baseline;
    font-family:var(--fd); font-size:21px; }
  #sec-ranked .rk-bc { height:34px; margin-top:9px; background:repeating-linear-gradient(90deg,
    var(--ink) 0 3px, transparent 3px 6px, var(--ink) 6px 7px, transparent 7px 11px); }
  #sec-ranked .rk-bcn { text-align:center; font-family:var(--fb); font-weight:700; font-size:8px;
    letter-spacing:2.6px; margin-top:4px; opacity:.6; }
  /* la barre qui DÉBORDE : le reliquat sort du cadre, il n'est jamais perdu */
  #sec-ranked .rk-ov { position:relative; height:26px; border:4px solid var(--ink); background:var(--gray); }
  #sec-ranked .rk-ov .b1 { position:absolute; inset:0; width:84%; background:var(--cyan); }
  #sec-ranked .rk-ov .b2 { position:absolute; left:100%; top:-4px; bottom:-4px; width:34px;
    background:var(--green); border:4px solid var(--ink); }
  #sec-ranked .rk-ovl { display:flex; justify-content:space-between; margin-top:7px;
    font-family:var(--fb); font-weight:800; font-size:9px; letter-spacing:1.1px; }
  #sec-ranked .rk-stamp { display:inline-block; border:4px solid var(--green); color:var(--green);
    background:var(--ink); padding:7px 13px; transform:rotate(-7deg); text-align:center; }
  #sec-ranked .rk-stamp .a { font-family:var(--fb); font-weight:800; font-size:9px; letter-spacing:2px; }
  #sec-ranked .rk-stamp .b { font-family:var(--fd); font-size:22px; letter-spacing:1px; }

  /* ── LES RENDEZ-VOUS ───────────────────────────────────────────────── */
  #sec-ranked .rk-wid { display:flex; align-items:center; gap:11px; padding:11px;
    border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); background:var(--paper); }
  #sec-ranked .rk-wid .pos { font-family:var(--fd); font-size:26px; flex:none; }
  #sec-ranked .rk-wid .bx { flex:1; min-width:0; }
  #sec-ranked .rk-wid .l { font-family:var(--fd); font-size:17px; letter-spacing:.4px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #sec-ranked .rk-wid .d { font-family:var(--fb); font-weight:700; font-size:9px; letter-spacing:1.1px;
    opacity:.7; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #sec-ranked .rk-wid .go { font-family:var(--fd); font-size:26px; flex:none; }
  #sec-ranked .rk-night { display:flex; align-items:center; gap:11px; padding:12px;
    border:4px solid var(--ink); box-shadow:6px 6px 0 var(--yellow);
    background:var(--ink); color:var(--paper); }
  #sec-ranked .rk-night .bx { flex:1; min-width:0; }
  #sec-ranked .rk-night .l { font-family:var(--fd); font-size:17px; }
  #sec-ranked .rk-night .d { font-family:var(--fb); font-weight:700; font-size:9px; letter-spacing:1.1px;
    opacity:.75; margin-top:4px; }
  #sec-ranked .rk-night .x { font-family:var(--fd); font-size:16px; background:var(--yellow);
    color:#0A0A0A; border:3px solid var(--paper); padding:5px 8px; flex:none; }

/* ── L'ENTRÉE DEPUIS LE CLASSEMENT ────────────────────────────────────────
   Une tuile, pas un lien perdu : le rang se voit avant même d'ouvrir l'écran.
   Fond encre → ombre colorée, comme partout (brandbook, règle d'or n°2). */
#sec-classement .rk-tease { display:flex; align-items:center; gap:11px; padding:11px;
  margin:0 0 10px; cursor:pointer; border:4px solid var(--ink);
  box-shadow:5px 5px 0 var(--magenta); background:var(--ink); color:var(--paper); }
#sec-classement .rk-tease .emb { width:52px; height:52px; flex:none; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px; border:3px solid var(--paper);
  transform:rotate(-5deg); background:var(--rkc, var(--magenta)); color:#0A0A0A; }
#sec-classement .rk-tease .emb .rn { display:block; font-family:var(--fd); font-size:18px; line-height:.8; }
#sec-classement .rk-tease .emb .rl { display:block; font-family:var(--fb); font-weight:800; font-size:7px; letter-spacing:1px; }
#sec-classement .rk-tease .bx { flex:1; min-width:0; display:flex; flex-direction:column; }
#sec-classement .rk-tease .k { display:block; font-family:var(--fb); font-weight:800; font-size:8px; letter-spacing:1.6px; opacity:.72; }
#sec-classement .rk-tease .nm { display:block; font-family:var(--fd); font-size:20px; line-height:1.05; margin-top:2px; color:var(--rkc, var(--magenta)); }
#sec-classement .rk-tease .bar { display:block; position:relative; height:10px; margin-top:6px; width:100%;
  border:2px solid var(--paper); background:rgba(255,255,255,.12); overflow:hidden; }
#sec-classement .rk-tease .bar i { display:block; height:100%; background:var(--rkc, var(--magenta)); }
#sec-classement .rk-tease .go { font-family:var(--fd); font-size:22px; flex:none; }

/* ── LE REÇU DE RP, EN FIN DE PARTIE ──────────────────────────────────────
   Écran ② de la maquette, posé dans l'écran de résultat du joueur
   (public/screens/play/over.html › #overRanked). Mêmes mesures que la
   maquette : le ticket est juste un peu plus serré pour tenir sous le podium. */
#overRanked { margin:4px 0 14px; display:flex; flex-direction:column; gap:9px; }
#overRanked .rk-big { font-family:var(--fd); font-size:58px; line-height:.9; text-align:center; }
#overRanked .rk-big u { font-size:22px; text-decoration:none; }
#overRanked .rk-bigs { text-align:center; font-family:var(--fb); font-weight:800; font-size:9px;
  letter-spacing:1.6px; opacity:.7; }
#overRanked .rk-rcpt { border:4px solid var(--ink); box-shadow:6px 6px 0 var(--rkc, var(--magenta));
  background:var(--paper); color:var(--ink); padding:13px; transform:rotate(-1deg); }
#overRanked .rk-rh { text-align:center; font-family:var(--fd); font-size:17px; letter-spacing:2px; }
#overRanked .rk-rs { text-align:center; font-family:var(--fb); font-weight:700; font-size:8px;
  letter-spacing:1.2px; opacity:.6; margin-top:3px; }
#overRanked .rk-sep { height:0; border-top:3px dashed var(--ink); margin:9px 0; opacity:.45; }
#overRanked .rk-ln { display:flex; align-items:baseline; gap:6px; font-family:var(--fb);
  font-weight:700; font-size:10px; letter-spacing:.8px; margin:5px 0; }
#overRanked .rk-ln .dots { flex:1; border-bottom:2px dotted var(--ink); opacity:.4; }
#overRanked .rk-ln .v { font-family:var(--fd); font-size:15px; }
#overRanked .rk-tot { display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--fd); font-size:21px; }
#overRanked .rk-bc { height:30px; margin-top:9px; background:repeating-linear-gradient(90deg,
  var(--ink) 0 3px, transparent 3px 6px, var(--ink) 6px 7px, transparent 7px 11px); }
#overRanked .rk-bcn { text-align:center; font-family:var(--fb); font-weight:700; font-size:8px;
  letter-spacing:2.6px; margin-top:4px; opacity:.6; }
#overRanked .rk-stampw { text-align:center; }
#overRanked .rk-stamp { display:inline-block; border:4px solid var(--green); color:var(--green);
  background:#0A0A0A; padding:7px 13px; transform:rotate(-7deg); text-align:center; }
#overRanked .rk-stamp .a { display:block; font-family:var(--fb); font-weight:800; font-size:9px; letter-spacing:2px; }
#overRanked .rk-stamp .b { display:block; font-family:var(--fd); font-size:22px; letter-spacing:1px; }
#overRanked .rk-ov { position:relative; height:22px; border:4px solid var(--ink); background:var(--gray); }
#overRanked .rk-ov .b1 { position:absolute; inset:0; background:var(--rkc, var(--cyan)); }
#overRanked .rk-ovl { display:flex; justify-content:space-between;
  font-family:var(--fb); font-weight:800; font-size:9px; letter-spacing:1.1px; }

/* ── LA COURSE (événement hebdo) ──────────────────────────────────────────
   Même composant que la SOIRÉE (bandeau encre, ombre colorée), puis les lignes
   du classement de la semaine. Ta ligne est teintée jaune. */
#sec-ranked .rk-course-h { box-shadow:6px 6px 0 var(--cyan); }
#sec-ranked .rk-course { display:flex; flex-direction:column; gap:6px; }
#sec-ranked .rk-course-r { display:flex; align-items:center; gap:10px; padding:8px 10px;
  border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); background:var(--paper); color:var(--ink); }
#sec-ranked .rk-course-r.moi { background:var(--yellow); color:#0A0A0A; }
#sec-ranked .rk-course-r .n { width:30px; height:30px; flex:none; display:grid; place-items:center;
  background:var(--ink); color:var(--paper); font-family:var(--fd); font-size:16px; }
#sec-ranked .rk-course-r .nm { flex:1; min-width:0; font-family:var(--fd); font-size:16px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#sec-ranked .rk-course-r .nm i { font-style:normal; font-family:var(--fb); font-weight:800; font-size:9px;
  letter-spacing:1.2px; background:var(--magenta); color:var(--paper); padding:2px 6px; margin-left:6px; vertical-align:2px; }
#sec-ranked .rk-course-r .rp { font-family:var(--fd); font-size:16px; flex:none; }
#sec-ranked .rk-course-v { font-family:var(--fb); font-weight:700; font-size:10px; letter-spacing:1px;
  line-height:1.5; padding:10px 12px; border:3px dashed var(--ink); background:var(--paper); color:var(--ink); }