/* Classement (mockups/js/classement.js, docs/classement.md). À l'intégration : copié en mockups/js/classement.css,
   chargé par <link> dans index.html, comme js/ferme.css. Même DA que Crédits et la Collection (lex-head, lex-body). */
#classement .clt-body { gap: 10px; padding-bottom: 0; }
.clt-ico { width: 14px; height: 14px; flex: none; image-rendering: pixelated; }
.clt-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.clt-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; border-radius: 8px;
  background: var(--panel-2); color: var(--text); font: 800 16px var(--font); cursor: pointer; }
.clt-tab.on { background: #E8B640; color: #2B1D14; }
.clt-tab .clt-ico { width: 16px; height: 16px; }
.clt-total, .clt-invites, .clt-erreur { margin: 0; font-size: 13.5px; color: var(--muted); text-align: center; }
.clt-etat { display: grid; justify-items: center; gap: 10px; padding: 24px 8px; text-align: center; color: var(--muted); }
.clt-etat p { margin: 0; }
.clt-lien { border: 0; background: none; color: inherit; text-decoration: underline; font: inherit; cursor: pointer; padding: 0; }

/* portée : Monde ou une langue (drapeaux) */
.clt-portee { display: flex; gap: 4px; align-items: stretch; min-width: 0; }
.clt-lg { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 34px; min-height: 36px; padding: 0 4px;
  border: 0; border-radius: 8px; background: var(--panel-2); color: var(--text); font: 800 14px var(--font); cursor: pointer; }
.clt-lg.monde { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; }
.clt-lg.on { background: #E8B640; color: #2B1D14; }
.clt-lg .drapeau { display: block; height: 12px; width: auto; }
.clt-lg-code { display: none; }
.clt-note { margin: -4px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }

/* colonnes : rang, pseudo, trophées, mots */
.clt-entete, .clt-l { display: grid; grid-template-columns: 2.8em minmax(0, 1fr) 5.4em 4.6em; align-items: center; gap: 6px; }
.clt-entete { padding: 0 10px; font-size: 12px; color: var(--muted); }
.clt-entete button { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 2px 0; }
.clt-entete button.on { color: var(--text); }
.clt-entete .clt-r { text-align: center; }
.clt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.clt-l { min-height: 40px; padding: 4px 10px; background: var(--panel); border-radius: 8px; }
.clt-l .clt-r { text-align: center; font: 800 16px var(--font); color: var(--muted); }
.clt-l .clt-p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 17px var(--font); }
.clt-l .clt-p em { font-style: normal; font-size: .8em; opacity: .75; }
.clt-l .clt-tr, .clt-l .clt-m { text-align: right; font: 800 16px var(--font); font-variant-numeric: tabular-nums; }
.clt-l .clt-m.inconnu { opacity: .6; }
.clt-l.moi { background: #E8B640; color: #2B1D14; }
.clt-l.moi .clt-r { color: #2B1D14; }

/* ta ligne, collée en bas de la liste quand elle n'y est pas (loin, pas classé, invité) */
.clt-moi { position: sticky; bottom: 0; z-index: 2; display: grid; gap: 6px; margin: 4px -16px 0; padding: 10px 16px calc(12px + var(--sab, 0px));
  background: var(--bg-2, #181B21); box-shadow: 0 -6px 12px rgba(0,0,0,.25); }
.clt-moi-txt { margin: 0; font-size: 13.5px; text-align: center; color: var(--muted); }
.clt-moi-cta { display: grid; gap: 6px; justify-items: center; text-align: center; }
.clt-moi-cta p { margin: 0; font-size: 13.5px; color: var(--muted); }
.clt-moi-cta .btn { min-height: 44px; padding: 0 18px; }

/* ---------- DA pixel ---------- */
html.px .clt-tab { font: 400 20px var(--font); color: var(--inkc); background: var(--paper-2); border-radius: 0; margin: 2px;
  box-shadow: 0 -2px 0 0 var(--wood-0), 0 2px 0 0 var(--wood-0), -2px 0 0 0 var(--wood-0), 2px 0 0 0 var(--wood-0), 0 6px 0 -2px rgba(20,10,4,.5), inset 0 2px 0 0 var(--cream), inset 0 -4px 0 0 var(--paper-edge); }
html.px .clt-tab.on { background: #E8B640; box-shadow: 0 -2px 0 0 var(--wood-0), 0 2px 0 0 var(--wood-0), -2px 0 0 0 var(--wood-0), 2px 0 0 0 var(--wood-0), 0 6px 0 -2px rgba(20,10,4,.5), inset 0 2px 0 0 #F6DC86, inset 0 -4px 0 0 #B8862A; }
html.px .clt-tab:active { transform: translateY(2px); }
html.px .clt-tab:focus-visible, html.px .clt-entete button:focus-visible { outline: 3px solid #FFD54A; outline-offset: 3px; }
html.px .clt-lg { font: 400 17px var(--font); color: var(--inkc); background: var(--paper-2); border-radius: 0; margin: 2px;
  box-shadow: 0 -2px 0 0 var(--wood-0), 0 2px 0 0 var(--wood-0), -2px 0 0 0 var(--wood-0), 2px 0 0 0 var(--wood-0), 0 5px 0 -2px rgba(20,10,4,.5), inset 0 2px 0 0 var(--cream), inset 0 -3px 0 0 var(--paper-edge); }
html.px .clt-lg.on { background: #E8B640; box-shadow: 0 -2px 0 0 var(--wood-0), 0 2px 0 0 var(--wood-0), -2px 0 0 0 var(--wood-0), 2px 0 0 0 var(--wood-0), 0 5px 0 -2px rgba(20,10,4,.5), inset 0 2px 0 0 #F6DC86, inset 0 -3px 0 0 #B8862A; }
html.px .clt-lg:active { transform: translateY(2px); }
html.px .clt-lg:focus-visible { outline: 3px solid #FFD54A; outline-offset: 3px; }
html.px .clt-note { font-family: var(--font-r); font-size: 14px; color: var(--muted); }
html.px .clt-total, html.px .clt-invites, html.px .clt-erreur, html.px .clt-etat { font-family: var(--font-r); color: var(--muted); }
html.px .clt-total { font-size: 15px; }
html.px .clt-etat p { font-size: 17px; color: var(--cream); text-shadow: 0 2px 0 var(--wood-0); }
html.px .clt-entete { font: 400 10px var(--font-s); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
html.px .clt-entete button.on { color: #F6DC86; }
html.px .clt-liste { gap: 6px; padding: 0 2px; }
html.px .clt-l { border-radius: 0; color: var(--inkc); background: var(--paper);
  box-shadow: 0 -2px 0 0 var(--wood-0), 0 2px 0 0 var(--wood-0), -2px 0 0 0 var(--wood-0), 2px 0 0 0 var(--wood-0), inset 0 2px 0 0 var(--cream), inset 0 -3px 0 0 var(--paper-3); }
html.px .clt-l .clt-r { font: 400 20px var(--font); color: var(--ink-muted); }
html.px .clt-l .clt-p { font: 400 22px var(--font); color: var(--inkc); }
html.px .clt-l .clt-p em { font-family: var(--font-r); font-size: 15px; color: var(--ink-muted); opacity: 1; }
html.px .clt-l .clt-tr, html.px .clt-l .clt-m { font: 400 20px var(--font); color: var(--inkc); }
html.px .clt-l .clt-m.inconnu { color: var(--ink-faint); opacity: 1; }
/* podium : or, argent, bronze (pastille du rang) */
html.px .clt-l.p1 .clt-r, html.px .clt-l.p2 .clt-r, html.px .clt-l.p3 .clt-r { justify-self: center; min-width: 26px; line-height: 24px; color: var(--inkc);
  box-shadow: 0 -2px 0 0 var(--wood-0), 0 2px 0 0 var(--wood-0), -2px 0 0 0 var(--wood-0), 2px 0 0 0 var(--wood-0), inset 0 -2px 0 0 rgba(0,0,0,.18); }
html.px .clt-l.p1 .clt-r { background: #E8B640; }
html.px .clt-l.p2 .clt-r { background: #C9CED6; }
html.px .clt-l.p3 .clt-r { background: #D08A4E; }
html.px .clt-l.moi { background: #F6DC86;
  box-shadow: 0 -2px 0 0 var(--wood-0), 0 2px 0 0 var(--wood-0), -2px 0 0 0 var(--wood-0), 2px 0 0 0 var(--wood-0), inset 0 0 0 2px #E8B640, inset 0 -4px 0 0 #B8862A; }
html.px .clt-moi { background: var(--wood-1) var(--tex-wood-dark) repeat; background-size: 128px 96px; box-shadow: inset 0 2px 0 var(--wood-0), 0 -4px 0 rgba(20,10,4,.35); }
html.px .clt-moi-txt, html.px .clt-moi-cta p { font-family: var(--font-r); font-size: 15px; color: var(--cream); }
html.px .clt-moi-cta .btn { font-size: 20px; }

@media (min-width: 700px) {
  .clt-lg-code { display: inline; }
  .clt-lg { padding: 0 8px; }
  .clt-entete, .clt-l { grid-template-columns: 3.4em minmax(0, 1fr) 6.4em 5.6em; }
  html.px .clt-l { min-height: 46px; }
  html.px .clt-l .clt-p { font-size: 24px; }
  html.px .clt-l .clt-r, html.px .clt-l .clt-tr, html.px .clt-l .clt-m { font-size: 22px; }
  html.px .clt-entete { font-size: 11px; }
}
@media (max-width: 360px) {
  .clt-entete, .clt-l { grid-template-columns: 2.4em minmax(0, 1fr) 4.6em 4em; gap: 4px; }
  html.px .clt-l .clt-p { font-size: 19px; }
}