/* Web · La classificació conjunta (porra + onze).
 *
 * Les files es veuen com les del rànquing del mini joc (`.ranking-*` de
 * /styles.css): la cara i l'àlies són les mateixes classes. El que és d'aquí
 * són les columnes de punts i la targeta del repte.
 */

/* ── El repte ── */
.challenge{
  display:flex;gap:clamp(16px,3vw,28px);align-items:center;
  margin:0 0 clamp(18px,3vh,28px);padding:clamp(14px,2.5vw,22px);
  border:1px solid rgba(212,175,106,.30);border-radius:16px;
  background:
    linear-gradient(120deg, rgba(212,175,106,.12), transparent 60%),
    var(--surf-1);
  box-shadow:var(--edge-hi);
}
/* La jaqueta, sense fons, damunt d'una llum grana: és el que la separa de
   la targeta fosca sense tornar-li a posar un rectangle al darrere. */
.challenge-prize{
  flex:0 0 auto;width:clamp(110px,20vw,170px);height:auto;max-width:100%;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.55));
  background:radial-gradient(closest-side, rgba(194,30,51,.28), transparent);
}
.challenge-body{min-width:0;flex:1 1 auto}
.challenge-kicker{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--or);
}
.challenge-title{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(1.3rem,3.2vw,1.9rem);line-height:1.05;margin:4px 0 8px;
  color:var(--cream);
}
.challenge-text{font-size:.92rem;line-height:1.5;color:rgba(245,242,236,.72)}
.challenge-text b{color:var(--cream);font-weight:600}

.challenge-days{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 10px}
.challenge-day{
  display:flex;align-items:center;justify-content:center;
  min-width:40px;height:28px;padding:0 8px;border-radius:999px;
  border:1px dashed rgba(245,242,236,.25);
  font-size:11px;letter-spacing:.08em;color:rgba(245,242,236,.5);
}
.challenge-day--closed{
  border-style:solid;border-color:var(--grana);
  background:var(--grana);color:var(--paper);
}
.challenge-day--tb{border-color:rgba(212,175,106,.6);color:var(--or)}
.challenge-day--tb.challenge-day--closed{background:rgba(212,175,106,.18)}
.challenge-status{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);
}

/* ── La tria de jornada ── */
.standings-pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.standings-pick-label{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,242,236,.5);
}
.standings-select{
  font-size:11px;letter-spacing:.1em;
  padding:8px 14px;border-radius:999px;max-width:100%;min-width:0;
  border:1px solid rgba(245,242,236,.35);background:var(--surf-1);color:var(--or);
}
.standings-select:focus{outline:none;border-color:var(--or)}

/* ── La taula ── */
.standings{margin-bottom:clamp(30px,5vh,50px)}
.standings-head,.standings-row{
  display:grid;align-items:center;gap:clamp(8px,1.6vw,14px);
  grid-template-columns:3ch minmax(0,1fr) repeat(3, 3.6rem);
}
.standings-head{
  padding:0 clamp(12px,2vw,18px) 8px;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,242,236,.4);
}
.standings-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.standings-row{
  padding:10px clamp(12px,2vw,18px);
  border:1px solid rgba(245,242,236,.08);border-radius:12px;
  background:var(--surf-1);box-shadow:var(--edge-hi);
}
.standings-row--first:not(.standings-row--me){
  border-color:rgba(212,175,106,.30);
  background:linear-gradient(90deg, rgba(212,175,106,.13), transparent 55%), var(--surf-1);
}
.standings-row--me{
  border-color:rgba(194,30,51,.45);
  background:linear-gradient(90deg, rgba(194,30,51,.16), transparent 55%), var(--surf-1);
}
.standings-row--tied{border-style:dashed;border-color:rgba(212,175,106,.55)}
.standings-pos{text-align:right;font-size:11px;letter-spacing:.1em;color:rgba(245,242,236,.45)}
.standings-row--first .standings-pos{color:var(--or)}
.standings-who{display:flex;align-items:center;gap:10px;min-width:0}
.standings-num{text-align:right;font-size:.9rem;color:rgba(245,242,236,.65)}
.standings-head .standings-num{font-size:9px;letter-spacing:.08em;overflow:hidden;text-overflow:clip}
.standings-total{color:var(--or);font-weight:700;font-size:1.05rem}
.standings-badge{
  flex:0 0 auto;padding:3px 8px;border-radius:999px;
  background:rgba(212,175,106,.18);color:var(--or);
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
}

/* ── El cercador d'àlies ──
   El camp és el de la porra (`.classi-cerca`, full compartit). Arriba amagat
   fins que el JS el munta, i les files que la cerca descarta s'amaguen amb
   `hidden`: tots dos porten `display` propi, que guanyaria a l'atribut. */
.classi-cerca[hidden],.standings-row[hidden]{display:none}
.standings-cerca-buida{padding:24px 12px;text-align:center}

/* ── La teva posició ──
   La targeta és la compartida (`/shared/css/leaderboard.css`); aquí només el
   desglossament, perquè aquest total és una suma, i l'arribada a la fila. */
.classi-jo-desglos{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,242,236,.55);
}
/* El botó porta a `#jo`: la fila no queda sota la capçalera fixa i fa la
   mateixa picada d'ullet que a la porra i a l'onze. */
.standings-row--me{scroll-margin-block:40vh}
.standings-row:target{animation:classi-assenyala 1.6s ease-in-out}
@media (prefers-reduced-motion:reduce){
  .standings-row:target{animation:none;box-shadow:var(--edge-hi), 0 0 0 3px rgba(212,175,106,.55)}
}
@media (prefers-reduced-motion:no-preference){
  html:has(.classi-jo-targeta){scroll-behavior:smooth}
}
/* El llorer surt de la cara per banda i banda (uns 7px): totes les cares
   porten el marge, amb llorer o sense, perquè no toqui la posició ni el nom
   i els noms de la llista quedin tots a la mateixa ratlla. */
.standings-who .ranking-face{margin-inline:7px 4px}

@media (max-width:520px){
  .challenge{flex-direction:column;align-items:stretch}
  .challenge-prize{width:60%;max-width:180px;margin:0 auto}
  .standings-head,.standings-row{grid-template-columns:2.4ch minmax(0,1fr) repeat(3, 2.6rem);gap:6px}
  .standings-num{font-size:.8rem}
  .standings-total{font-size:.95rem}
  .standings-badge{display:none}
}