/* résumé de la run sauvegardée (niveau/score/PV/tour) : sous la ligne principale */
  .lp-run-summary{
    flex-basis:100%; display:flex; flex-wrap:wrap; gap:3px 10px;
    color:var(--ink-dim); font-size:.72rem; padding-top:1px;
  }
  .lp-del{color:var(--ink-dim); padding:2px 7px; border-radius:4px}
  .lp-del:hover{color:#ff8070; background:#2a2030}
  .lp-resume{
    color:#111; font-size:.82rem; font-weight:700; letter-spacing:.03em;
    padding:5px 12px; border-radius:6px; white-space:nowrap; cursor:pointer;
    background:linear-gradient(180deg,#f0c25f,#d69a3e);   /* ambre chaud : s'accorde au rouge */
    border:2px solid #111;   /* liseré + texte noirs qui pulsent en rouge */
    animation:heartbeatRed 3s ease-in-out infinite;
  }
  .lp-resume:hover{ background:linear-gradient(180deg,#ffd677,#e6ab4a); animation-duration:2s; }
  /* Battement de cœur ROUGE : le liseré + le texte passent du noir au rouge
     avec une légère lueur — battements amples et fondus, longue pause ensuite */
  @keyframes heartbeatRed{
    0%   { border-color:#111; color:#111; text-shadow:none;
           box-shadow:0 0 4px rgba(224,60,50,.12); transform:scale(1); }
    10%  { border-color:#e0503c; color:#e0503c; text-shadow:0 0 7px rgba(255,90,72,.85);
           box-shadow:0 0 16px rgba(224,60,50,.85); transform:scale(1.05); }
    22%  { border-color:#111; color:#111; text-shadow:none;
           box-shadow:0 0 4px rgba(224,60,50,.12); transform:scale(1); }
    34%  { border-color:#e0503c; color:#e0503c; text-shadow:0 0 7px rgba(255,90,72,.85);
           box-shadow:0 0 16px rgba(224,60,50,.85); transform:scale(1.05); }
    48%  { border-color:#111; color:#111; text-shadow:none;
           box-shadow:0 0 4px rgba(224,60,50,.12); transform:scale(1); }
    100% { border-color:#111; color:#111; text-shadow:none;
           box-shadow:0 0 4px rgba(224,60,50,.12); transform:scale(1); }
  }
  @media (prefers-reduced-motion: reduce){ .lp-resume{ animation:none } }
  #lbBox, #homeLb{margin-bottom:12px}
  .lb-head{color:var(--accent); font-size:.85rem; font-weight:bold; margin-bottom:6px; letter-spacing:.04em}
  /* Ligne du classement sur DEUX niveaux (voir buildLeaderboard, js/57) : le
     nom et son titre au-dessus, le détail chiffré en dessous. Auparavant tout
     tenait sur une seule ligne, le nom en `nowrap` + ellipsis : un pseudo un
     peu long — ou accompagné d'un titre de classe — se retrouvait tronqué,
     d'autant que le score lui disputait la largeur. */
  .lb-row{display:flex; align-items:flex-start; gap:8px; padding:5px 8px; font-size:.82rem;
          background:#1a2228; border-radius:6px; margin-bottom:3px}
  .lb-rank{width:24px; text-align:center; flex:0 0 auto; line-height:1.35}
  /* ---------- CODE COULEUR DU PODIUM (2026-09-03, demande Pixel) ----------
     Or au premier, violet au deuxième, bleu au troisième, vert aux quatrième et
     cinquième, gris pour la suite. Le liseré gauche porte la couleur : lisible
     d'un coup d'œil, sans repeindre le fond de la ligne (les noms resteraient
     illisibles sur un aplat saturé). Valable PARTOUT où le classement paraît. */
  .lb-row{ border-left:3px solid transparent }
  .lb-r1  { border-left-color:#e0a83c; background:#241d12 }
  .lb-r2  { border-left-color:#a97ce0; background:#201a2c }
  .lb-r3  { border-left-color:#5aa0e0; background:#161f2c }
  .lb-r45 { border-left-color:#5ec27a; background:#152318 }
  .lb-rest{ border-left-color:#4a4658 }
  .lb-r1 .lb-score{ color:#f0c060 }
  .lb-r2 .lb-score{ color:#c9a6ff }
  .lb-r3 .lb-score{ color:#8ec4ff }
  .lb-r45 .lb-score{ color:#8fe0a8 }
  .lb-rest .lb-name, .lb-rest .lb-score{ color:var(--ink-dim) }
  .lb-body{display:flex; flex-direction:column; gap:1px; flex:1; min-width:0}
  /* le nom peut désormais REVENIR À LA LIGNE plutôt que d'être coupé */
  .lb-name{color:var(--ink); line-height:1.3; overflow-wrap:anywhere}
  .lb-score{color:var(--accent); font-size:.76rem} .lb-score small{color:var(--ink-dim)}
  /* (le classement est informatif : la reprise se fait via la liste des profils) */
  .lb-cheat{
    color:#e0a040; font-size:.66rem; font-style:italic;
    border:1px solid #7a5a24; border-radius:4px; padding:0 5px; margin-left:4px;
    background:#332512; letter-spacing:.04em;
  }
  .lb-title{ color:#c090f0; font-size:.72rem; font-style:italic; font-weight:normal; margin-left:2px } /* repli — la vraie couleur est posée en ligne par rankTitleColor() (js/02) */
  .lb-del{
    flex:0 0 auto; width:20px; height:20px; line-height:18px; padding:0;
    margin-left:4px; border-radius:5px; border:1px solid #7a3030; background:#3a1c1c;
    color:#ff9a8a; font-size:.72rem; font-weight:bold; cursor:pointer;
  }
  .lb-del:hover{background:#5a2424; border-color:#c05050}
  .lb-filter{display:flex; gap:6px; margin-bottom:8px}
  .lb-filter-btn{
    flex:1; font:inherit; font-size:.74rem; padding:4px 6px; border-radius:6px;
    border:1px solid var(--panel-edge); background:#1a2228; color:var(--ink-dim); cursor:pointer;
  }
  .lb-filter-btn:hover{color:var(--ink); border-color:var(--accent)}
  .lb-filter-btn.active{color:#111; background:var(--accent); border-color:var(--accent); font-weight:bold}
  .lb-mode{flex:0 0 auto; font-size:.8rem; opacity:.85}
  .lb-empty{color:var(--ink-dim); font-size:.78rem; padding:6px 8px; font-style:italic}
  .lp-empty{color:var(--ink-dim); font-size:.78rem; margin-bottom:12px; line-height:1.5}
  .lp-new{display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap}
  /* Champs de saisie des écrans de connexion. #charNewName (nom du nouveau
     personnage, écran #charPick) était ABSENT de cette liste : il tombait donc
     sur le style natif du navigateur — fond blanc, bordure grise en relief,
     angles carrés — en plein milieu d'un panneau sombre (2026-08-20, retour
     Pixel : « le champ nom du nouveau perso n'est pas propre visuellement »). */
  /* INSCRIPTION (2026-09-03, retour Pixel : « les champs de créer un compte
     doivent avoir le même design que ceux de login / mot de passe ») : les trois
     champs du volet d'inscription rejoignent la MÊME règle, plutôt qu'une copie
     parallèle qui aurait dérivé au premier ajustement. */
  #loginName, #loginPassword, #charNewName,
  #signupName, #signupPassword, #signupPassword2{
    flex:1; font:inherit; color:var(--ink);
    background:#231d2c; border:1px solid var(--panel-edge); border-radius:6px;
    padding:6px 10px; min-width:110px;
  }
  #loginName::placeholder, #loginPassword::placeholder, #charNewName::placeholder,
  #signupName::placeholder, #signupPassword::placeholder, #signupPassword2::placeholder{
    color:var(--ink-dim); opacity:.75;
  }
  #loginName:focus, #loginPassword:focus, #charNewName:focus,
  #signupName:focus, #signupPassword:focus, #signupPassword2:focus{
    outline:none; border-color:var(--accent-dim);
    box-shadow:0 0 0 2px rgba(138,122,176,.25);
  }
  .lp-new #btnCreateProfile, .lp-new #btnSignup{flex:0 0 100%}
  /* Le bouton « Créer » reste à côté du champ (une seule ligne) tant que la
     place le permet : contrairement à l'écran de compte, il n'y a qu'un champ. */
  .lp-new #btnCharCreate{flex:0 0 auto; white-space:nowrap}
  .lp-auth-msg{color:#ff8877; font-size:.72rem; margin:-4px 0 8px; text-align:center}
  .lp-auth-msg:empty{display:none}
  .lp-actions{display:flex; gap:8px; flex-wrap:wrap}
  .lp-actions button{flex:1}
  .lp-note{margin-top:12px; font-size:.68rem; color:var(--ink-dim); text-align:center}
  .cp-note{margin-top:12px; font-size:.68rem; color:var(--ink-dim); text-align:center}
  /* --- personnalisation --- */
  .cp-actions{margin-top:12px; display:flex; justify-content:space-between; gap:10px}
  #btnCustomPlay{
    background:var(--accent); color:#111; border:2px solid #111; font-weight:700;
    animation:heartbeatRed 3s ease-in-out infinite;   /* liseré + texte noirs pulsant rouge */
  }
  #btnCustomPlay:hover{background:#f0bc55; animation-duration:2s}
  @media (prefers-reduced-motion: reduce){ #btnCustomPlay{ animation:none } }
  .cp-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
    gap:10px;
  }
  .cp-class{
    border:1px solid var(--panel-edge);
    border-radius:10px;
    background:#231d2c;
    padding:14px;
    cursor:pointer;
    transition:border-color .12s, background .12s, transform .05s;
  }
  .cp-class:hover{border-color:var(--target); background:#1e2b33}
  .cp-class:active{transform:translateY(1px)}
  .cp-class h3{color:var(--ink); font-size:1rem; margin-bottom:6px}
  .cp-class p{font-size:.72rem; color:var(--ink-dim); line-height:1.5}
  .cp-class .cp-abilities{
    margin-top:8px; font-size:.72rem; color:var(--ink-dim); line-height:1.7;
    border-top:1px solid var(--panel-edge); padding-top:6px;
  }
  /* écran de personnalisation : compact, tout tient sans ascenseur */
  #customPick .cp-card{max-width:440px; padding:16px 22px}
  #customPick h2{margin-bottom:10px; font-size:1.05rem}
  .cp-carousel-col{ display:flex; flex-direction:column; align-items:center; flex:0 0 auto; }
  .cp-carousel{ display:flex; align-items:center; gap:4px; flex:0 0 auto; }
  /* aperçus flous des sprites voisins, glissés DERRIÈRE le sprite sélectionné */
  .cp-thumb{ width:58px; height:58px; border-radius:8px; background:#141018;
    border:1px solid var(--panel-edge); image-rendering:pixelated;
    filter:blur(1.2px); opacity:.5; position:relative; z-index:1; }
  #cpThumbPrev{ margin-right:-20px; }
  #cpThumbNext{ margin-left:-20px; }
  #cpPreview{ position:relative; z-index:2; box-shadow:0 0 12px rgba(0,0,0,.6); }
  .cp-arrow{ flex:0 0 auto; width:34px; height:44px; padding:0; font-size:1.15rem; line-height:1;
    border-radius:8px; background:#3a2d52; border:1px solid #5c4a78; color:#e8def7; cursor:pointer;
    transition:background .12s, transform .12s; }
  .cp-arrow:hover{ background:#5c4a78; transform:scale(1.08); }
  .cp-arrow:active{ transform:scale(.94); }
  .cp-spritename{ text-align:center; font-size:.85rem; color:#d8c8f0; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:8px; max-width:220px; }
  /* icône-sprite dans les cartes de classe */
  .cp-class .cls-emblem{ width:2em; height:2em; vertical-align:middle; image-rendering:pixelated;
    margin-right:4px; }
  .cp-abilities img{ width:1.2em; height:1.2em; vertical-align:middle; image-rendering:pixelated; }
  .cp-custom{
    margin-top:8px; padding-top:10px;
    border-top:1px solid var(--panel-edge);
    display:flex; gap:14px; align-items:flex-start;
  }
  #cpPreview{
    width:110px; height:110px;
    background:#141018;
    border:1px solid var(--panel-edge); border-radius:10px;
    flex:0 0 auto;
  }
  .cp-opts{flex:1; min-width:0}
  .cp-opts label{
    display:block; font-size:.65rem; color:var(--ink-dim);
    margin:7px 0 4px; letter-spacing:.08em; text-transform:uppercase;
  }
  .cp-opts label:first-child{margin-top:0}
  #cpName{
    font:inherit; color:var(--ink);
    background:#231d2c; border:1px solid var(--panel-edge); border-radius:6px;
    padding:4px 10px; width:100%;
  }
  #cpName:focus{outline:none; border-color:var(--accent-dim)}
  .sw-row{display:flex; gap:6px; flex-wrap:wrap}
  .sw{
    width:22px; height:22px; border-radius:50%;
    border:2px solid var(--panel-edge); cursor:pointer;
    transition:transform .08s, border-color .12s, box-shadow .12s;
  }
  .sw:hover{transform:scale(1.15)}
  .sw.active{border-color:var(--target); box-shadow:0 0 6px rgba(92,200,216,.5)}
  .sw-auto{background:repeating-linear-gradient(45deg,#3b5e8c 0 5px,#6a4a9c 5px 10px,#4a7a40 10px 15px)}
  .sw-none{background:#241d2c; display:flex; align-items:center; justify-content:center;
           color:#c88; font-size:12px; font-weight:bold}
  .sw-free{
    position:relative; overflow:hidden; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
    background:conic-gradient(#ff5040,#ffd860,#7fe08f,#40e0d0,#5fd0f0,#a060ff,#ff8fc0,#ff5040);
  }
  .sw-free::after{
    content:"🎨"; font-size:11px; line-height:1;
    filter:drop-shadow(0 0 1px rgba(0,0,0,.8));
  }
  .sw-free input{
    position:absolute; inset:0; width:100%; height:100%;
    opacity:0; cursor:pointer; border:none; padding:0;
  }


/* ---------- RAPPORT DE MORT (voir deathReportHtml(), js/27) ----------
   L'écran de défaite ne donnait qu'une phrase générique ; il détaille désormais
   le coup fatal (absorption, dégâts perçants, PV restants) et l'état de la run.
   La CAUSE ressort en tête, le reste en lignes secondaires plus discrètes pour
   rester lisible d'un coup d'œil sans noyer l'essentiel. */
  .death-cause{ font-size:1.06rem; font-weight:800; color:#ffb0a0;
    background:rgba(90,30,30,.35); border:1px solid #7a3a3a; border-radius:8px;
    padding:8px 12px; margin:2px 0 10px }
  .death-line{ font-size:.88rem; color:var(--ink-dim,#c8c0d0); line-height:1.5 }

/* Classe jouée au moment du score (2026-09-07, avis #4 de Pixel). Discrète :
   c'est le nom du joueur puis son titre qui portent l'information, la classe
   vient en appui — d'où la taille réduite et la couleur atténuée. */
.lb-cls{
  font-size:.72rem; font-weight:600; letter-spacing:.02em;
  color:var(--ink-dim,#b7abc8); opacity:.9; margin-left:6px;
  white-space:nowrap;
}

/* Miniature du sprite au classement (2026-09-07, demande Pixel : « mets pas
   l'emoji du bonhomme, mets une miniature du sprite du perso utilisé »).
   `image-rendering:pixelated` est indispensable : ces sprites sont peints case
   par case dans l'éditeur, un lissage les transformerait en bouillie. */
.lb-sprite{
  /* Doublée le 2026-09-08 (demande Pixel : « 2 fois plus grosse la
     miniature ») : 1,5 em → 3 em, soit 34 px mesurés au lieu de 17.
     L'em se calcule sur .lb-mode, dont la taille de police est FIXE (.8rem) :
     la vignette a donc la même taille sur toutes les lignes, du 1er au 10e.
     C'est voulu — un sprite est une identité, pas un rang ; la hiérarchie des
     places est déjà portée par la taille du texte (lb-r1 … lb-rest). */
  width:3em; height:3em; display:block;
  object-fit:contain; image-rendering:pixelated;
}
/* En-tête du second classement : même forme que le premier, teinte d'alerte
   pour qu'on ne confonde pas les deux tableaux d'un coup d'œil. */
.lb-head-cheat{
  margin-top:14px;
  color:#e0908a;
  border-top:1px solid rgba(224,144,138,.35);
  padding-top:10px;
}

/* Score FIGÉ PAR LA MORT du personnage (2026-09-08, demande Pixel : « mets le
   pseudo en barré avec une tête de mort si c'est un score figé suite au décès
   du perso »). La tête de mort suivait déjà le nom ; il manquait la rature, qui
   dit d'un coup d'œil que ce score ne bougera plus. Teinte éteinte plutôt que
   rouge : la ligne reste un score honorable, pas une alerte. */
.lb-dead{
  text-decoration:line-through;
  text-decoration-color:rgba(224,120,110,.75);
  text-decoration-thickness:2px;
  opacity:.85;
}

/* « Utiliser un autre compte » (2026-09-08, avis #15 de Pixel). Discret : c'est
   une sortie de secours, pas l'action principale de l'écran — laquelle est de
   cliquer le compte déjà connu, juste au-dessus. */
.lp-other{
  display:block; margin:10px auto 0; padding:6px 14px;
  background:transparent; border:1px solid var(--panel-edge,#3a3050);
  border-radius:8px; color:var(--ink-dim,#b7abc8);
  font-size:.78rem; cursor:pointer;
}
.lp-other:hover{ color:var(--ink,#e8e0f0); border-color:var(--accent-dim,#8a7ab0) }