/* L'onze de Xisco.
 *
 * Aquí només hi ha el que és d'aquesta aplicació. La closca
 * (`/shared/css/shell.css`) porta els colors, la tipografia, el botó de
 * desar, el diàleg d'entrar i la barra; el camp i els seus llocs
 * (`/shared/css/match-report.css`) els comparteix amb l'acta de la porra. El
 * dia que es copiï res d'allà aquí, tornaran a divergir. */

/* Les mateixes mides que la vista de la porra (`.vista`): els dos webs són la
   mateixa plataforma i les caixes han de fer el mateix ample i respirar
   igual. Abans això era 62rem amb 22px de coixí i tot sortia més estret de
   dalt i més arrapat als costats. */
#app{
  width:100%;max-width:min(900px,100%);box-sizing:border-box;min-width:0;
  margin:0 auto;padding:clamp(30px,5vh,56px) clamp(18px,4vw,32px) 80px;
}
/* Les vistes s'amaguen amb l'atribut `hidden` i prou. Compte a donar-los cap
   `display`: una regla de classe guanya a l'estil per defecte de `[hidden]` i
   llavors es pinten totes alhora, una sota l'altra. */
.vista[hidden]{display:none}
.carregant{color:rgba(245,242,236,.55);padding:30px 0;text-align:center}
.eyebrow{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--or)}

/* ── Capçalera de la jornada ───────────────────────────────
   La caixa, els escuts i l'estat són de `/shared/css/matchday-header.css`:
   la mateixa que la porra. Aquí només el que hi penja a sota. */

.escut{width:26px;height:26px;object-fit:contain}
.jornada-cap .compte{
  font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.15em;
  color:rgba(245,242,236,.75);margin-top:8px;
}
.onze-quanta-gent{color:rgba(245,242,236,.45);font-size:.74rem;margin-top:10px}

.onze-avis{
  color:rgba(245,242,236,.7);text-align:center;line-height:1.6;
  border:1px solid var(--hairline);border-radius:14px;padding:22px;
  background:var(--surf-1);
}
.onze-hint{color:rgba(245,242,236,.5);font-size:.76rem;line-height:1.5}

/* ── El formulari ────────────────────────────────────────── */

/* La drecera per repetir l'onze de l'última jornada jugada. Va a dalt de tot
   del formulari i no al costat del botó de desar: la feina que estalvia és la
   d'omplir, i quan ja l'has omplert no serveix de res. */
.onze-repetir{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:12px 16px;margin-bottom:22px;
  padding:14px 18px;border-radius:16px;
  border:1px solid var(--hairline);background:var(--surf-1);
  box-shadow:var(--edge-hi);
}
.onze-repetir p{color:rgba(245,242,236,.6);font-size:.78rem}
.onze-repetir button{
  padding:9px 18px;border-radius:999px;
  border:1px solid rgba(212,175,106,.45);background:rgba(163,23,58,.16);
  color:var(--or);font-family:'Space Grotesk',sans-serif;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  cursor:pointer;transition:background .18s,border-color .18s,color .18s;
}
.onze-repetir button:hover{
  background:var(--grana);border-color:var(--grana);color:var(--cream);
}

/* El botó de tornar al calendari, sobre la capçalera de la jornada: només hi
   és quan s'hi ha entrat des d'allà. Mateixa peça i mateix lloc que a la
   porra, que és el mateix gest. */
.torna-calendari{margin-bottom:16px}

/* El dibuix, en una càpsula: és l'únic comandament que queda a la vista en
   tot el formulari —la resta són cromos— i com a barra solta a dalt del camp
   semblava una resta de l'antic formulari de desplegables. */
.dibuix-tria{display:flex;justify-content:center;margin-bottom:16px}
.dibuix-tria label{
  display:flex;align-items:center;gap:12px;
  padding:6px 8px 6px 16px;border-radius:999px;
  border:1px solid var(--hairline);background:var(--surf-1);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,242,236,.55);
}
/* El desplegable porta la fletxa dibuixada i no la del sistema: al mòbil, un
   `<select>` nu es veia com una etiqueta més de la càpsula i no com una cosa
   per prémer —ningú diria que "4-4-2" s'obre. Amb `appearance:none` la fletxa
   se'n va, i per això se'n posa una de pintada al fons; ha de ser una imatge
   i no un pseudo-element perquè un `<select>` no en té. */
.dibuix-tria select{
  appearance:none;-webkit-appearance:none;
  padding:8px 34px 8px 14px;border-radius:999px;
  background:rgba(10,7,8,.75)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23d4af6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 13px center/11px 8px;
  color:var(--cream);
  border:1px solid rgba(212,175,106,.28);
  font-family:'Space Grotesk',sans-serif;font-size:12.5px;letter-spacing:.12em;
  cursor:pointer;transition:border-color .18s;
}
.dibuix-tria select:hover{border-color:var(--or)}
.dibuix-tria select:focus-visible{outline:2px solid var(--or);outline-offset:2px}
/* Al mòbil és el dit qui l'ha de trobar: la càpsula creix fins a l'ample de
   la columna i el desplegable es fa prou alt per prémer-lo sense apuntar. */
@media (max-width:600px){
  .dibuix-tria label{width:100%;justify-content:space-between;padding:8px 10px 8px 18px}
  .dibuix-tria select{min-height:40px;font-size:13.5px;padding-right:38px}
}
.camp-zona{max-width:430px;margin:0 auto}

/* Dues columnes a l'ordinador: el camp a l'esquerra i el que l'acompanya a la
   dreta. En una sola columna, a l'ordinador quedava una tira vertical
   llarguíssima amb mig monitor buit als costats i la banqueta tan avall que
   no se sabia que hi era. El punt de tall és on el camp (430px) i una columna
   de banqueta còmoda comencen a cabre-hi de costat. */
.onze-form-graella{display:grid;gap:28px;align-items:start}
@media (min-width:840px){
  .onze-form-graella{grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:34px}
  /* La columna de la dreta s'enganxa mentre passes el camp: la banqueta i
     MVP han de ser a l'abast sense tornar a pujar. */
  .onze-form-costat{position:sticky;top:22px}
  .onze-form-costat .onze-banqueta{margin-top:0}
  .onze-desa{justify-items:stretch}
  .onze-desa .desar{width:100%}
}
/* Dins de la columna, l'espai el fa la graella: els marges propis de cada
   bloc s'hi sumarien i quedarien forats desiguals. */
.onze-form-costat{display:grid;gap:26px;min-width:0}
.onze-form-costat > *{margin-top:0}

/* La banqueta i MVP, cadascun a la seva caixa. Abans eren dos blocs de
   text seguits sobre el fons de la pàgina i no es veia on s'acabava una
   pregunta i on començava l'altra; ara són dues targetes com la resta del
   web (la capçalera de la jornada, els punts, l'avís). */
.onze-bloc{
  border:1px solid var(--hairline);border-radius:18px;
  padding:clamp(18px,3vw,24px);
  background:var(--surf-1);box-shadow:var(--edge-hi);
}
.onze-banqueta h2, .onze-banqueta-resum h2, .onze-esperat h2,
.onze-mvp h2, .onze-mvp-resum h2{
  font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:1.05rem;text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:4px;
}
/* El títol de cada pregunta, amb una marca d'or al davant: dins de la caixa
   fa d'ancoratge i lliga amb els `eyebrow` de la resta del web. */
.onze-bloc h2{
  display:flex;align-items:center;gap:10px;font-size:.95rem;
}
.onze-bloc h2::before{
  content:"";width:14px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--grana-lite),var(--or));flex:none;
}
/* Cinc rodones amb la cara de cadascú, com els llocs del camp: la banqueta
   és la mateixa pregunta que l'onze —qui hi surt— i amb barres de text no
   s'assemblaven gens. La peça és `.tria-lloc` de match-report.css.
   Cinc columnes fixes i no `auto-fit`: són cinc perquè cinc són els canvis, i
   una fila de cinc ho diu sola. Amb `auto-fit` la columna estreta de
   l'ordinador en posava quatre i un de sol a sota, que semblava un error. El
   cromo s'estreny amb la columna; el nom, si cal, fa dues ratlles. */
/* Obrir el full amb els cinc llocs alhora. Va sobre les rodones i no a sota:
   és la drecera per omplir-les, i qui arriba a la banqueta buida l'ha de
   veure abans de posar-se a tocar cromos d'un en un. */
.banqueta-tots{
  width:100%;margin-top:14px;padding:11px 16px;border-radius:12px;
  border:1px solid rgba(212,175,106,.4);background:rgba(163,23,58,.16);
  color:var(--or);font-family:'Space Grotesk',sans-serif;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  cursor:pointer;transition:background .18s,border-color .18s,color .18s;
}
.banqueta-tots:hover{background:var(--grana);border-color:var(--grana);color:var(--cream)}
.banqueta-llocs{
  list-style:none;display:grid;gap:14px 6px;margin-top:16px;
  grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;
}
/* La mida la mana el lloc que li toca de la fila i no la pantalla: al mòbil
   la columna és ampla i el cromo arriba als 54px, i a la columna estreta de
   l'ordinador s'encongeix fins al que hi cap. Amb `vw` passava el contrari
   —petit al mòbil, desbordat a la columna— perquè un `vw` no sap res de
   l'ample de la columna on cau. */
.banqueta-llocs .camp-cromo{width:min(50px,100%)}
.banqueta-llocs .camp-nom{
  white-space:normal;overflow:visible;text-overflow:clip;
  font-size:clamp(.58rem,1.7vw,.7rem);
}

/* MVP. Un sol cromo, centrat i més gran que els de la banqueta: és una
   pregunta a part i val el doble, i la mida ho ha de dir sense text. */
.onze-mvp{margin-top:26px}
.mvp-tria{display:flex;justify-content:center;margin-top:18px}
.tria-lloc--mvp .camp-cromo{
  width:clamp(66px,18vw,80px);
  border-color:rgba(212,175,106,.4);
}
.tria-lloc--mvp .camp-dorsal{font-size:clamp(.85rem,2.6vw,1rem)}
.tria-lloc--mvp .camp-nom{font-size:.82rem;white-space:normal;text-align:center}

.onze-desa{margin-top:26px;display:grid;justify-items:center;gap:10px}
.desa-nota{color:rgba(245,242,236,.6);font-size:.78rem;min-height:1.2em;text-align:center}

/* ── Com ha anat ─────────────────────────────────────────── */

.onze-punts{
  text-align:center;border:1px solid var(--hairline);border-radius:16px;
  padding:22px;background:var(--surf-2);box-shadow:var(--edge-hi);
  margin-bottom:26px;display:grid;gap:8px;justify-items:center;
}
.punts-gran{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:3rem;
  line-height:1;color:var(--or);
}
.punts-de{font-size:1.4rem;color:rgba(245,242,236,.4)}
.punts-detall{color:rgba(245,242,236,.6);font-size:.8rem}

.xiscometre{display:flex;align-items:center;gap:10px;font-size:.82rem;color:rgba(245,242,236,.8)}
.xiscometre-barra, .esperat-barra{
  display:block;width:120px;height:7px;border-radius:999px;
  background:rgba(245,242,236,.1);overflow:hidden;
}
.xiscometre-barra > span, .esperat-barra > span{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--grana),var(--or));
}

/* Els dos camps un al costat de l'altre quan hi caben, i un sota l'altre al
   mòbil: comparar-los és tot el sentit de la pantalla. */
.onze-comparativa{
  display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-bottom:26px;
}
.onze-comparativa .camp-titol{
  text-align:center;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,242,236,.55);margin-bottom:8px;
}
.camp-dibuix-nom{
  color:var(--or);letter-spacing:.06em;font-size:.78rem;margin-left:6px;
}

/* Al camp de l'onze hi va el nom sencer. "Joan Prohens" no cap a la ratlla
   única de 23% que fa servir l'acta, o sigui que aquí el lloc s'eixampla i
   el nom pot passar a dues línies.
   Limitat a `.onze-comparativa` a posta: el camp i les samarretes són el
   mateix CSS que pinta l'acta de la porra (`shared/css/match-report.css`), i
   allà el nom continua sent el cognom sol i en una ratlla.

   La mida del nom la mana el camp i no la finestra (`cqw`, no `vw`): al web
   els dos camps van de costat i cadascun fa la meitat d'ample, o sigui que
   amb `vw` sortien lletres de pantalla gran dins d'un camp de pantalla
   petita i els noms d'una mateixa línia s'encavallaven i sortien fora de la
   gespa. I cada lloc es reparteix la línia a parts iguals (`flex:1 1 0`) en
   comptes d'ocupar el que demani el nom: així el que no hi cap parteix en
   dues ratlles dins del seu tros i no trepitja el del costat. */
.onze-comparativa .camp{container-type:inline-size}
.onze-comparativa .camp-jugador{flex:1 1 0;max-width:30%}
.onze-comparativa .camp-nom{
  white-space:normal;overflow:visible;text-overflow:clip;
  overflow-wrap:anywhere;
  font-size:clamp(.55rem,2.6cqw,.66rem);
}

/* El camp del formulari, com els de mirar: cromo i nom sencer a sota, sense
   la barra del desplegable (que ara és invisible i cobreix el lloc sencer,
   a `shared/css/match-report.css`). El lloc s'eixampla i el nom pot passar a
   dues línies pel mateix motiu que a la comparativa: "Joan Prohens" no cap
   a la ratlla única del 22% que fa servir l'acta. */
.onze-form-camp .camp-lloc{max-width:30%}
.onze-form-camp .camp-nom{
  white-space:normal;overflow:visible;text-overflow:clip;
  font-size:clamp(.55rem,1.6vw,.66rem);
}

/* Els canvis del partit, sota el camp de Xisco. La llista és la mateixa que
   pinten la portada i el calendari (`subsList` de match-report.js) i per tant
   el seu CSS ja ve de `shared/css/match-report.css`: aquí només se li dona
   aire i se li posa el títol a to amb el del camp de sobre. */
.onze-canvis{margin-top:16px}
.onze-canvis .camp-titol{
  text-align:center;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,242,236,.55);margin-bottom:8px;
}

/* Encerts i errades: el color no ho diu tot sol —una vora gruixuda per
   l'encert i una de puntejada per l'errada— perquè es distingeixin també
   sense veure-hi els colors. */
.camp-jugador.encert .camp-samarreta{
  outline:2px solid var(--or);outline-offset:1px;
}
.camp-jugador.fallat .camp-samarreta{
  opacity:.45;outline:1px dotted rgba(245,242,236,.4);outline-offset:1px;
}

/* Els cinc de la banqueta, jugada la jornada: els mateixos cromos rodons amb
   la cara que es trien al formulari. Eren píndoles de text i no s'assemblaven
   ni a com els havies triat ni al camp del costat. Cinc columnes, com al
   formulari, perquè la fila torni a dir sola que en són cinc. */
.banqueta-fitxes{
  list-style:none;display:grid;gap:14px 6px;margin:16px 0 10px;
  grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;
  /* A la pantalla de com ha anat la caixa fa tot l'ample de la pàgina i cinc
     cromos escampats s'hi perdien: la fila es queda a l'ample del camp que
     tenen a sobre. */
  max-width:430px;
}
.banqueta-fitxa{
  display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;
}
.banqueta-fitxa .camp-cromo{width:min(50px,100%)}
.banqueta-fitxa .camp-nom{
  white-space:normal;overflow:visible;text-overflow:clip;
  font-size:clamp(.58rem,1.7vw,.7rem);
}
/* El veredicte, com al camp: vora d'or per l'encert i vel amb vora puntejada
   per l'errada, que es distingeixen també sense veure-hi els colors. */
.banqueta-fitxa.encert .camp-cromo{outline:2px solid var(--or);outline-offset:2px}
.banqueta-fitxa.encert .camp-nom{color:var(--or)}
.banqueta-fitxa.fallat .camp-cromo{
  opacity:.45;outline:1px dotted rgba(245,242,236,.4);outline-offset:2px;
}
.banqueta-fitxa.fallat .camp-nom{opacity:.6}

/* ── El cromo de MVP ────────────────────────────────────
   Germà petit del cromo de la plantilla (`/styles.css`, secció "El cromo").
   Mateixa recepta: tot en `em` a partir de `--mvp-card-w`, la foto enganxada
   a la vora de dalt perquè el zoom només mengi per baix i no decapiti ningú,
   i el vel que fa llegible el nom tant si al darrere hi ha sol com ombra.

   Escrit aquí i no compartit: el de la plantilla el pinta una macro de Jinja
   al servidor amb temporada, galons i distincions, i el seu CSS viu dins de
   `/styles.css`, que aquesta pàgina no carrega. Val la pena treure'l a
   `shared/css/` el dia que es toqui de debò —llavors seria un sol cromo. */
/* El bloc de MVP: el text a una banda i els cromos a l'altra.
   Al mòbil, l'un sota l'altre com la resta de blocs. Al web no: un cromo de
   230px centrat dins d'una caixa de 900 deixava mig bloc de negre a banda i
   banda i semblava que allà hi faltés alguna cosa. Amb el títol i la línia
   dels punts al costat, l'espai s'omple i de passada es diu què val
   encertar-lo. */
.onze-mvp-resum{
  margin-top:26px;display:grid;gap:14px;align-items:start;
}
@media (min-width:680px){
  .onze-mvp-resum{grid-template-columns:1fr auto;gap:28px}
}
.mvp-resum-text{min-width:0;display:grid;gap:6px}
.mvp-cromos{
  display:flex;flex-wrap:wrap;gap:18px;justify-content:center;
}
.mvp-cromo{
  --mvp-card-w:clamp(150px, 42vw, 230px);
  position:relative;width:var(--mvp-card-w);aspect-ratio:5/7;
  font-size:calc(var(--mvp-card-w) * .064);
  border-radius:1.25em;
  box-shadow:0 24px 52px -28px rgba(0,0,0,.9), 0 2px 8px rgba(0,0,0,.4);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .mvp-cromo:hover{transform:translateY(-4px)}
}
.mvp-cromo-cos{
  position:absolute;inset:0;border-radius:1.25em;overflow:hidden;
  background:linear-gradient(168deg,#211516 0%, #100c0c 55%, #0a0807 100%);
}
/* Sense foto, la marca fa de fons, igual que a la plantilla: el cromo manté
   la cara encara que la foto no hi sigui o no carregui. */
.mvp-cromo-marca{
  position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(60% 45% at 50% 30%, rgba(194,30,51,.28), transparent 68%);
}
.mvp-cromo-marca img{width:52%;height:auto;opacity:.10;filter:grayscale(1) contrast(1.1)}
.mvp-cromo-foto{position:absolute;inset:0}
.mvp-cromo-foto img{
  width:100%;height:100%;object-fit:cover;object-position:50% 0;
  transform:scale(1.3);transform-origin:50% 0;
}
/* Sense foto, la silueta no va a sang com una cara de debò —seria un cromo
   fals—: una taca centrada, prou amunt perquè el vel i el nom no se la
   mengin. */
.mvp-cromo-foto.sense-foto{display:grid;place-items:center;padding:2% 0 38%}
.mvp-cromo-foto.sense-foto img{
  width:54%;height:auto;object-fit:contain;transform:none;opacity:.42;
}
.mvp-cromo-vel{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,4,4,.5) 0%, rgba(6,4,4,.12) 16%, transparent 38%,
    rgba(9,7,7,.42) 55%, rgba(8,6,6,.82) 72%, rgba(8,6,6,.96) 86%, #080606 100%);
}
.mvp-cromo-filet{
  position:absolute;inset:0;border-radius:1.25em;pointer-events:none;z-index:10;
  border:1px solid rgba(245,242,236,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.mvp-cromo-peu{
  position:absolute;left:0;right:0;bottom:0;z-index:6;padding:0 1.375em 1.25em;
  display:flex;align-items:flex-end;justify-content:space-between;gap:.75em;
}
.mvp-cromo-nom{min-width:0;line-height:1.02}
.mvp-cromo-pila{
  display:block;font-weight:400;font-size:1em;color:var(--cream-2);
  text-shadow:0 1px 10px rgba(0,0,0,.7);
}
.mvp-cromo-cognom{
  display:block;font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:1.5em;letter-spacing:-.01em;color:var(--cream);
  word-break:break-word;text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.mvp-cromo-dorsal{
  flex:0 0 auto;font-weight:500;font-size:2.6em;line-height:.78;
  letter-spacing:-.02em;color:var(--grana-lite);
  text-shadow:0 2px 18px rgba(194,30,51,.32);
}
/* Qui és aquest cromo: el teu o el de l'acta. A la vora de dalt, que és on
   el cromo de la plantilla porta el galó. */
.mvp-cromo-etiqueta{
  position:absolute;top:0;left:0;right:0;z-index:8;
  border-radius:1.25em 1.25em 0 0;padding:.55em .9em;text-align:center;
  font-size:.62em;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream-2);background:rgba(8,6,6,.72);backdrop-filter:blur(4px);
  border-bottom:1px solid rgba(245,242,236,.10);
}
/* Encert i errada, amb la mateixa gramàtica que la banqueta i el camp: no
   només color —vora sencera i encesa, o apagada i puntejada. */
.mvp-cromo.encert{box-shadow:0 24px 52px -28px rgba(0,0,0,.9), 0 0 0 2px var(--or)}
.mvp-cromo.encert .mvp-cromo-etiqueta{
  color:var(--or);border-bottom-color:rgba(212,175,106,.45);
}
.mvp-cromo.fallat{opacity:.6}
.mvp-cromo.fallat .mvp-cromo-filet{border-style:dotted}


.onze-esperat{margin-top:30px}
/* Els números de la jornada porten el mateix aire que la resta de blocs del
   resultat: sense marge quedaven enganxats a la caixa de MVP i les dues
   vores es llegien com una de sola. Només aquí —a la classificació aquest
   mateix bloc va dins d'una graella que ja reparteix l'espai. */
#esperatHost .onze-stats{margin-top:30px}
.esperat-llista{list-style:none;display:grid;gap:8px;margin-top:12px}
.esperat-llista li{
  display:grid;grid-template-columns:1fr auto 3.2rem;align-items:center;gap:12px;
  font-size:.84rem;color:rgba(245,242,236,.8);
}
.esperat-llista b{text-align:right;color:rgba(245,242,236,.55);font-size:.78rem}
.esperat-barra{width:min(200px,35vw)}

/* ── Calendari ───────────────────────────────────────────
   La taula ja no és d'aquí: és la mateixa que la de la porra i viu a
   `/shared/css/calendar.css`, amb el marcatge de `/shared/ui/calendar.js`.
   Aquí només hi queda el que és d'aquest joc —què hi vas fer tu—, que és
   l'única cel·la que les dues llistes no comparteixen.
   Abans hi havia una taula pròpia (`.cal-llista`, amb el partit escrit en una
   línia i el marcador al mig): dient el mateix de dues maneres, els dos webs
   semblaven de dues cases. */

/* Els punts a la cel·la de la dreta, sobre el marcador: el número gran i el
   màxim del dia petit al costat, com a la resta del joc. */
.cal-fila .punts-mini b{
  color:var(--cream);font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:.95rem;margin-right:2px;
}

/* ── Classificació ───────────────────────────────────────
   La taula tampoc és d'aquí: és la mateixa que la de la porra i viu a
   `/shared/css/leaderboard.css`, amb el marcatge de
   `/shared/ui/leaderboard.js`. Aquí només hi queden les dues columnes que
   expliquen com s'han fet els punts —els encerts de banqueta i el
   percentatge sobre el màxim del dia—, que són d'aquest joc i la porra no en
   té. Abans hi havia una llista pròpia, més petita i amb una altra manera de
   dir la posició: la mateixa classificació semblava de dos webs. */

/* Sis columnes en comptes de cinc. Va amb doble classe perquè ha de guanyar
   la graella del full compartit, que es carrega després d'aquest.

   Les mides viuen en una variable perquè la capçalera de columnes i les files
   són dues graelles germanes i s'han d'alinear: escrites dues vegades, el dia
   que se'n toqui una els títols deixaran de caure sobre el seu número. Per
   això la columna dels punts té amplada fixa i no `auto`: amb `auto`, la
   capçalera l'ajustava a la paraula "Punts" i la fila a "17 / 170". */
/* L'última columna la marca el títol i no el número: "88%" hi cabria de
   sobres, però "XISCÒMETRE" no, i escurçar-lo hauria estat inventar-se un
   altre nom per al que a la resta del joc ja se'n diu així. Tots dos van a
   la dreta, i per tant el número segueix caient sota el títol. */
.classi--onze{--classi-cols:40px 40px minmax(0,1fr) 4.4rem 5.2rem 6rem 28px}
.classi.classi--onze li,
.classi-columnes.classi--onze{grid-template-columns:var(--classi-cols)}

/* La capçalera: els mateixos coixins laterals que la fila perquè les columnes
   caiguin al seu lloc, i prou pes visual per llegir-se com a títols i no com
   una fila més. */
.classi-columnes{
  display:grid;gap:14px;align-items:end;
  padding:0 18px 8px;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(245,242,236,.38);
}
.classi-columnes .col-banqueta{text-align:center}
.classi-columnes .col-punts{text-align:right}
.classi-columnes .col-pct{text-align:right;color:rgba(212,175,106,.55)}
/* L'última columna de la fila és l'estrella de seguir algú, i no porta
   títol: la capçalera hi posa una cel·la buida perquè les altres no es
   desplacin. */
.classi-columnes .col-estrella{display:block}
.classi-canvis{color:rgba(245,242,236,.45);font-size:.76rem;text-align:center}
/* Els MVP encertats, a la mateixa cel·la que els canvis: són el detall de com
   s'han fet els punts, i al mòbil desapareixen tots dos alhora. */
.classi-mvp{color:var(--or);margin-left:5px}
/* El màxim del dia, petit al costat dels punts: "12 / 16" es llegeix d'un
   cop i "12" tot sol no vol dir res quan el sostre canvia cada jornada. */
.classi-max{color:rgba(245,242,236,.35);font-size:.76rem;font-weight:400}
.classi-pct{text-align:right;color:var(--or);font-size:.82rem}
/* Amb amplada fixa, els punts van a la dreta: així el número gran cau
   sota el seu títol i les xifres queden en columna. */
.classi.classi--onze .punts{text-align:right}

@media (max-width:520px){
  /* Estret, el que es mira és qui va davant i amb quants punts: cauen els
     canvis i el màxim, i queden cinc columnes. La capçalera hi va a remolc
     —mateixa variable— i el títol de la banqueta cau amb la seva columna. */
  .classi--onze{--classi-cols:32px 32px minmax(0,1fr) auto 2.8rem 26px}
  .classi-canvis{display:none}
  .classi-max{display:none}
  .classi-columnes .col-banqueta{display:none}
  .classi-columnes{font-size:9px;letter-spacing:.1em;padding:0 14px 6px}
}

/* ── Estadístiques ────────────────────────────────────────
   Les fitxes de número gran: la mitjana d'una jornada, la sorpresa, la teva
   temporada. Sempre la mateixa forma —etiqueta petita a dalt, número o nom
   gran al mig, explicació a sota— perquè es puguin barrejar i llegir de cop
   sense haver d'entendre cada caixa per separat. */
.stat-graella{
  display:grid;gap:12px;margin-top:16px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
/* Les tres ratlles de cada fitxa, a la mateixa alçada a totes: la graella
   mana les files (`subgrid`) i no cada caixa per separat. Amb cada fitxa
   repartint-se el seu espai, un nom de dues ratlles ("José María Amo")
   empenyia la seva explicació avall i la fila es llegia tota escalonada.
   Als navegadors sense `subgrid` la declaració cau i queden tres files
   `auto`, que és exactament el que hi havia abans. */
.stat-fitxa{
  border:1px solid var(--hairline);border-radius:14px;
  padding:14px 16px;background:rgba(255,255,255,.02);
  display:grid;grid-template-rows:subgrid;grid-row:span 3;
  align-content:start;gap:4px;min-width:0;
}
.stat-etiqueta{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--or);
}
.stat-valor{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(1.15rem,3.4vw,1.5rem);line-height:1.15;color:var(--cream);
  overflow-wrap:anywhere;
}
.stat-de{font-size:.62em;font-weight:600;color:rgba(245,242,236,.4)}
.stat-peu{font-size:.72rem;line-height:1.4;color:rgba(245,242,236,.55)}

/* Els blocs de números sota la classificació. Separats de la taula perquè
   són una lectura a part i no més files d'aquella llista. */
.onze-numeros{display:grid;gap:20px;margin-top:28px}
/* El número de la dreta no parteix mai: "3 cops" en dues ratlles feia que la
   llista deixés de llegir-se com una columna. */
.onze-numeros .esperat-llista b{white-space:nowrap}

/* ── Regles i textos llargs ──────────────────────────────── */

/* La pàgina de regles és la mateixa que la de la porra i viu a
   `/shared/css/rules.css`. Aquí només hi queda la llista del desempat, que és
   d'aquest joc: la porra no en té. */
/* El desempat va numerat i no amb punts: l'ordre dels criteris ÉS la regla
   —primer punts, després banqueta, i si res d'això separa, empat—, i una
   llista de rodones ho explicava com si fossin tres coses soltes. */
.regles-empat{
  display:grid;gap:10px;margin:0 0 10px;padding-left:1.4em;
  color:rgba(245,242,236,.8);
}
.regles-empat li{padding-left:.2em}
.regles-empat li::marker{color:var(--or);font-family:'Space Grotesk',sans-serif}

.contact-lede{color:rgba(245,242,236,.7);margin-bottom:20px}

/* ── El diàleg d'entrar ──────────────────────────────────── */

/* La caixa del diàleg és de `/shared/css/shell.css` i la comparteixen els
   tres webs. Aquí només hi ha la capçalera amb la foto de Xisco, que és d'un
   sol diàleg: el d'entrar a l'onze. Va marcada amb `.login-amb-foto` i no
   directament amb `.login-modal` perquè a la porra la mateixa classe la duen
   els diàlegs d'admin, i allà una foto de l'entrenador no hi pinta res.

   És l'única pantalla que veu qui encara no juga, i era tota de text: la foto
   diu de què va el joc abans que ningú llegeixi el lede. */

.login-foto{
  position:relative;height:190px;overflow:hidden;
  /* Un píxel menys que el `border-radius` del diàleg: amb el mateix valor,
     la vora clara de la caixa queda per fora de la cantonada de la foto. */
  border-radius:13px 13px 0 0;
}
.login-foto img{
  display:block;width:100%;height:100%;object-fit:cover;
  /* En Xisco no és al centre del pla i queda una mica alt: aquest
     enquadrament el deixa dins la meitat de dalt de la banda, que és la part
     que el degradat no s'acaba de menjar. */
  object-position:46% 26%;
  /* La foto ve d'un dia de sol i entrava massa viva al costat del granat de
     la caixa. */
  filter:saturate(.85) contrast(1.05);
}
/* El degradat cap al fons del diàleg: sense això la foto s'acaba amb una
   ratlla recta i el títol sembla d'una altra targeta. */
.login-foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(10,7,8,.15) 0%, rgba(10,7,8,.35) 45%, #150d0f 100%);
}
/* L'eyebrow puja a la foto: és el retolet que diu on ets i, deixat a sota,
   repetia feina amb el títol i separava la imatge del text. */
.login-foto .login-eyebrow{
  position:absolute;left:0;right:0;bottom:12px;z-index:1;text-align:center;
}
/* El cos ja no obre amb l'eyebrow sinó amb el títol, i els 38px de coixí de
   dalt el deixaven surant lluny de la foto. */
.login-amb-foto .login-cos{padding-top:22px}

/* En pantalla petita el diàleg ja és gairebé tota la finestra: amb 190px de
   foto, el botó de Google queda per sota del plec. */
@media (max-height:640px){
  .login-foto{height:130px}
}

/* La creu de tancar cau damunt de la foto i li passaven dues coses.
   La primera: `.login-foto` va DESPRÉS al marcatge i també està posicionada,
   així que es pintava per sobre del botó i se'l menjava —no és que no es
   veiés, és que no s'hi podia clicar. D'aquí el `z-index`.
   La segona: el crema al 55% que porta de `/shared/` desapareixia contra la
   grada clara del fons, i per això aquí es puja el contrast i se li posa una
   ombra, que és el que la fa llegible tant si sota hi ha gent com si hi ha el
   degradat fosc. */
.login-amb-foto .login-tancar{
  z-index:2;
  color:rgba(245,242,236,.9);
  text-shadow:0 1px 6px rgba(10,7,8,.9), 0 0 2px rgba(10,7,8,.8);
}
.login-amb-foto .login-tancar:hover{color:var(--or)}