/* Compartit · La classificació: la capçalera, la llista i la fila.
 *
 * La va escriure la porra i ara la fan servir les dues aplicacions. És la
 * mateixa pregunta —qui va davant— i per tant la mateixa taula: mateixa
 * capçalera amb els xips a la dreta, mateixa fila amb la posició, la cara,
 * l'àlies i els punts grans a la dreta.
 *
 * El que canvia és què hi ha ENTRE l'àlies i els punts, i què hi ha després:
 * la porra hi posa l'estrella de favorits i l'onze les columnes de com s'han
 * fet els punts (canvis encertats, màxim del dia, percentatge). Cada web es
 * paga aquestes cel·les al seu full i, si li canvien les columnes, la
 * graella de la fila amb un `.classi--<qui>` que guanyi per especificitat.
 * El marcatge el fa `/shared/ui/leaderboard.js`.
 *
 * Es carrega DESPRÉS del full de cada aplicació, com la resta de peces
 * compartides.
 */

/* ── Classificació ── */
.classi-cap{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:18px;margin-bottom:20px;min-width:0}
/* El títol, amb els mateixos números que el del calendari: el gran de les
   vistes de la porra, que és d'on ve aquesta pantalla. */
.classi-cap h1{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:clamp(2rem,5vw,3.4rem);line-height:.95;
  text-transform:uppercase;margin-bottom:24px;
}
/* La línia que explica la taula, quan n'hi ha. */
.classi-lede{color:rgba(245,242,236,.5);font-size:.9rem;margin:6px 0 14px}
/* En mòbil el select de jornada pot ser ample; els flex items han de poder encongir-se i el chip "Per jornada" pot baixar de línia. */
.classi-tria{display:flex;gap:6px;flex-wrap:wrap;min-width:0;max-width:100%}
/* Cercador d'àlies: filtra la llista ja carregada, sense tornar al servidor.
   El filtre de favorits l'acompanya: tots dos treballen sobre les mateixes
   dades i es poden combinar. */
.classi-cerca{margin-bottom:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.classi-cerca input{
  width:100%;max-width:320px;
  font-family:'Space Grotesk',sans-serif;font-size:.9rem;
  padding:10px 14px;border-radius:999px;
  border:1px solid rgba(245,242,236,.15);
  background:rgba(245,242,236,.04);color:var(--cream);
  transition:border-color .25s;
}
.classi-cerca input::placeholder{color:rgba(245,242,236,.4)}
.classi-cerca input:hover{border-color:rgba(245,242,236,.3)}
.classi-cerca input:focus{outline:none;border-color:var(--or)}
.classi{list-style:none;display:grid;gap:8px}
.classi li{
  display:grid;grid-template-columns:40px 40px minmax(0,1fr) auto 28px;align-items:center;gap:14px;
  padding:12px 18px;border:1px solid rgba(245,242,236,.1);border-radius:14px;
  background:var(--surf-1);
}
/* L'únic destacat de la llista és on ets tu: el primer classificat ja el
   distingeix la posició. En crema i no en grana, perquè a aquesta pantalla el
   grana ja marca els avatars i el xip actiu: aquí ha de dir "ets tu", no
   convidar a prémer res. */
.classi li.jo{
  border-color:rgba(245,242,236,.5);
  background:linear-gradient(180deg, rgba(245,242,236,.09), rgba(245,242,236,.04));
}
.classi li.jo .nom{color:var(--cream);font-weight:600}
/* Un favorit es nota, però molt just: el destacat fort segueix sent on ets tu. */
.classi li.preferit{border-color:rgba(212,175,106,.28)}
.classi .pos{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.1em;color:var(--or)}
/* Amb el filtre de favorits la llista es renumera; la posició general queda
   aquí sota, petita, per no perdre la referència de la porra sencera. */
.classi .pos-global{display:block;font-size:9.5px;letter-spacing:.06em;color:rgba(245,242,236,.35)}
/* La cara: la foto, la lletra de qui no en té (`avatarHtml` de
   `/shared/ui/account.js`) o el buit. Les tres, de la mateixa mida: la lletra
   no la portava i s'estirava fins a omplir la cel·la, i on hi havia d'haver
   una rodona hi quedava un oval. */
.classi img,
.classi .avatar-inicial,
.classi .placeholder{width:30px;height:30px;border-radius:50%;object-fit:cover}
.classi .avatar-inicial{font-size:12px}
.classi .placeholder{background:rgba(245,242,236,.15)}
.classi .nom{font-family:'Space Grotesk',sans-serif;font-size:.95rem;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.classi .punts{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.4rem;color:var(--cream)}
/* el missatge buit ocupa tota la fila: no ha d'heretar la graella de .classi li */
.classi li.classi-buida{
  display:block;text-align:center;padding:40px 20px;
  color:rgba(245,242,236,.5);
}
.classi-buida{color:rgba(245,242,236,.5);text-align:center;padding:40px 20px}

/* La llum superior de les superfícies elevades, que a la porra li venia de la
   seva llista d'`edge highlights`: ara viatja amb la fila. */
.classi li{box-shadow:var(--edge-hi)}

@media (max-width:520px){
  /* Estret: la fila s'aprima i el cercador ocupa tota l'amplada. */
  .classi li{grid-template-columns:32px 32px minmax(0,1fr) auto 26px;padding:10px 12px;gap:10px}
  .classi-cerca input{max-width:none;flex:1 1 100%}
}

/* ── Favorits ──
   Marcar gent és la manera de fer-se una lliga petita dins de la gran: una
   estrella per fila, un selector per filtrar. Res més, cap convit ni cap
   grup. Ho fan servir els dos jocs —a la porra, també la targeta d'una
   jornada— i per això és aquí i no al full de cap dels dos. */
.estrella{
  width:28px;height:28px;line-height:1;border-radius:50%;
  font-size:1.1rem;color:rgba(245,242,236,.3);
  display:flex;align-items:center;justify-content:center;
  transition:color .2s, background .2s, transform .1s;
}
.estrella:hover{color:var(--or);background:rgba(212,175,106,.1)}
.estrella:active{transform:scale(.9)}
.estrella.marcada{color:var(--or)}
.estrella:disabled{opacity:.4;cursor:wait}
.estrella:focus-visible{outline:2px solid var(--or);outline-offset:2px}
/* Manté la columna quan una fila no té estrella (tu mateix, o algú sense àlies). */
.estrella-buida{width:28px;height:28px}
/* Selector de dos estats. Va en una càpsula única, i no com dos xips solts,
   perquè es llegeixi com "una de les dues" i no com un botó que s'encén:
   així es veu sempre que estàs filtrant i per on es torna a la llista. */
.filtre-favorits{
  display:inline-flex;align-items:center;gap:2px;padding:3px;
  border:1px solid rgba(245,242,236,.15);border-radius:999px;
  background:rgba(245,242,236,.03);max-width:100%;
}
.segment{
  font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  padding:7px 13px;border-radius:999px;color:rgba(245,242,236,.55);
  transition:background .2s, color .2s;
}
.segment:hover{color:var(--cream)}
.segment.active{background:rgba(245,242,236,.1);color:var(--cream)}
/* quan el filtre actiu és el de favorits, el daurat el lliga amb les estrelles */
.segment[data-favs="true"].active{background:rgba(212,175,106,.14);color:var(--or)}
.segment:focus-visible{outline:2px solid var(--or);outline-offset:2px}
/* Avís curt (sessió caducada, límit de favorits): flota a peu de pantalla. */
.fav-avis{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;
  max-width:min(92vw,420px);text-align:center;
  padding:10px 18px;border-radius:999px;
  background:rgba(20,14,15,.96);border:1px solid rgba(212,175,106,.4);
  color:var(--cream);font-size:12px;letter-spacing:.06em;
  box-shadow:var(--shadow-card);
}

/* Estret, l'estrella s'encongeix. Va amb el mateix tall que la fila de la
   porra, que és d'on venia. */
@media (max-width:600px){
  .estrella,.estrella-buida{width:26px;height:26px}
}