/* 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%}
/* ── La tria d'una jornada ──
   Va en línia pròpia, sota els xips, i no entre ells: dins de la fila de
   xips el desplegable apareixia enmig i els feia saltar de lloc, i el menú
   semblava un altre cada cop que es premia "Per jornada". Aquí els xips no
   es mouen mai i el que s'obre és una tria, que és el que és. */
.classi-jornada{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;min-width:0}
/* La línia va amagada mentre no es miri per jornada, i `display:flex` guanya
   per especificitat a l'`[hidden]` del navegador: cal dir-ho aquí. */
.classi-jornada[hidden]{display:none}
.classi-jornada-etiqueta{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(245,242,236,.5);
}
.classi-select{
  font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:8px 30px 8px 14px;border-radius:999px;
  border:1px solid rgba(245,242,236,.35);
  background:#150d0f;color:var(--or);cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--or) 50%),linear-gradient(135deg,var(--or) 50%,transparent 50%);
  background-position:calc(100% - 14px) 55%, calc(100% - 9px) 55%;
  background-size:5px 5px, 5px 5px;background-repeat:no-repeat;
  /* Native <select> pren de per si el width de l'opció més llarga
     ("Jornada 102 · Unió Esportiva Olot (1–1)"). Sense aquest límit,
     en mòbil força la línia per sobre del viewport i la columna de punts
     de la llista queda tallada. */
  min-width:0;max-width:100%;text-overflow:ellipsis;
}
.classi-select:hover{border-color:var(--or)}
.classi-select:focus{outline:none;border-color:var(--or)}

/* 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}
/* L'àlies amb una línia a sota (els plens, a la porra): la cel·la segueix
   sent una de sola perquè la graella de la fila no canviï. La línia pot
   baixar de ratlla: a mòbil, dos plens no hi caben i tallar-ne un amagaria
   justament el que es ve a mirar. */
.classi .nom-bloc{display:grid;min-width:0;gap:2px}
.classi .nom-sota{
  font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--or);min-width:0;line-height:1.4;row-gap:2px;
  display:flex;flex-wrap:wrap;column-gap:14px;
}
.classi .nom-sota .ple{display:inline-flex;flex-wrap:wrap;align-items:center;column-gap:8px}
.classi .nom-sota .ple-partit{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.classi .nom-sota .ple-gols{white-space:nowrap}
/* L'escut del rival, a mida de text. `.classi img` el faria rodó i de 30px
   com una cara: aquí es desfà. */
.classi .nom-sota img.ple-escut{width:14px;height:14px;border-radius:0;object-fit:contain}
/* Els golejadors, més apagats que el partit: el daurat ja diu què és la
   línia, i dos trossos del mateix color es llegeixen com un de sol. */
.classi .nom-sota .ple-gols{color:rgba(245,242,236,.6)}
.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}

/* ── On vas tu ──
   La targeta de sobre la taula: quina posició fas, de quants i amb quants
   punts. La fila teva ja va destacada, però amb dos-cents classificats
   destacar-la no es veu fins que la trobes, i trobar-se era la feina.

   Es veu com la fila `.jo` —mateixa vora crema, mateix fons— perquè es
   llegeixi que parla de la mateixa cosa, i és la mateixa a tots dos jocs. */
.classi-jo-targeta{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;
  margin-bottom:14px;padding:14px 18px;border-radius:14px;
  border:1px solid rgba(245,242,236,.5);
  background:linear-gradient(180deg, rgba(245,242,236,.09), rgba(245,242,236,.04));
  box-shadow:var(--edge-hi);
}
.classi-jo-etiqueta{
  flex:0 0 100%;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(245,242,236,.5);
}
/* Els dos números grans, amb la seva paraula petita al costat: sols
   ("34" i "21") no es distingeixen l'un de l'altre. */
.classi-jo-pos,.classi-jo-punts{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.6rem;
  display:inline-flex;align-items:baseline;gap:7px;
}
.classi-jo-pos{color:var(--or)}
.classi-jo-punts{color:var(--cream)}
.classi-jo-pos small,.classi-jo-punts small{
  font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,242,236,.45);
}
/* El botó, sempre al final de la línia: és l'acció, no un número més. */
.classi-jo-anar{margin-left:auto}

/* Quan s'hi arriba des del botó, la fila fa una picada d'ullet: després de
   baixar mig full, sense això toca tornar a buscar-la amb la vista. */
@keyframes classi-assenyala{
  0%,100%{box-shadow:var(--edge-hi)}
  30%,70%{box-shadow:var(--edge-hi), 0 0 0 3px rgba(212,175,106,.55)}
}
.classi li.assenyalada{animation:classi-assenyala 1.6s ease-in-out}
@media (prefers-reduced-motion:reduce){
  .classi li.assenyalada{animation:none;box-shadow:var(--edge-hi), 0 0 0 3px rgba(212,175,106,.55)}
}

/* 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. */
  /* La columna de la cara, més ampla que la cara: el llorer dels coronats en
     surt per banda i banda i amb 32px tocava el nom. */
  .classi li{grid-template-columns:30px 40px minmax(0,1fr) auto 26px;padding:10px 12px;gap:10px}
  .classi .nom-sota{letter-spacing:.06em}
  .classi-cerca input{max-width:none;flex:1 1 100%}
  /* La targeta de "on vas tu" hi cap en dues línies: els dos números a dalt
     i el botó a sota, ample, que és on va el dit. */
  .classi-jo-anar{margin-left:0;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,
.segment[data-filtre="coronats"].active{background:rgba(212,175,106,.14);color:var(--or)}
.segment:focus-visible{outline:2px solid var(--or);outline-offset:2px}
/* A la porra el filtre té tres segments (tothom, favorits i coronats) i a
   mida de mòbil no hi cabien: s'estrenyen una mica. Va aquí i no amb la
   resta de mòbil, que és més amunt i perdria contra `.segment`. */
@media (max-width:520px){
  .segment{padding:7px 9px;letter-spacing:.08em}
}
/* 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}
}