/* Zona Nàstic · el web (portada, calendari, plantilla, joc, contacte).
   La paleta, la base i la closca —barra, aplicacions, pestanyes, sessió i
   peu— no són aquí: viuen a `/shared/css/shell.css`, que és el mateix full
   que carrega la porra. Aquí només hi ha el que és d'aquest web. */

/* Text que hi és per a qui no veu la pantalla. La taula de precedents en fa
   servir per al `caption`: un títol repetit a sobre d'una taula que ja en té
   un no aporta res a qui la veu, i a qui la sent li diu de què va. */
.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* ── El plec ──
   Un sol format per a tot el que s'obre i es tanca. La portada n'havia
   acumulat tres —els antecedents eren una fila pelada, l'acta de la darrera
   jornada i l'onze de l'hemeroteca eren píndoles de mides diferents— i tots
   tres feien exactament la mateixa cosa. Tres formes per a una sola acció
   vol dir que cap no ensenya res: qui aprèn què fa l'una no en treu res per
   a les altres.

   És una FILA SENCERA i no una píndola. El que s'obre és una secció, i una
   píndola enmig d'un bloc sembla un botó que farà una altra cosa; una fila
   que ocupa l'amplada es llegeix com "això s'obre". A la dreta, la pista
   (quants n'hi ha) i la fletxa que gira.

   `--plec-vora` és perquè el mateix plec ha de viure sobre fons diferents:
   dins de la propera jornada, que és grana, la vora de la resta s'hi perd. */
.plec{--plec-vora:rgba(245,242,236,.12)}
.plec-obre{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  cursor:pointer;list-style:none;
  padding:11px 15px;border-radius:var(--r-sm);
  border:1px solid var(--plec-vora);
  background:rgba(245,242,236,.045);
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
  color:var(--or);
  transition:border-color .2s,background .2s,color .2s;
}
.plec-obre::-webkit-details-marker{display:none}
.plec-obre::marker{content:""}
.plec-obre:hover{
  border-color:rgba(212,175,106,.42);background:rgba(245,242,236,.045);
  color:var(--cream);
}
.plec-obre:focus-visible{outline:2px solid var(--llauto);outline-offset:3px}
.plec-que{min-width:0;overflow-wrap:anywhere}
/* La pista i la fletxa van juntes a la dreta i no se separen mai: plegat,
   són l'única cosa que diu que allà hi ha res a obrir. */
.plec-dreta{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  color:rgba(245,242,236,.55);
}
.plec-obre:hover .plec-dreta{color:inherit}
.plec-fletxa{display:inline-block;transition:transform .2s}
/* A l'amplada d'un telèfon la pista s'embolica i les files deixen de fer la
   mateixa alçada: tres plecs de 38, 53 i 67 píxels ja no són un sol format.
   L'etiqueta de l'esquerra diu prou i la fletxa es queda. */
@media (max-width:560px){
  .plec-pista{display:none}
}
.plec[open] .plec-fletxa{transform:rotate(180deg)}
/* El que s'obre, separat de la fila amb el filet de sempre. */
.plec-cos{
  margin-top:clamp(12px,2vh,16px);
  padding-top:clamp(12px,2vh,16px);
  border-top:1px solid rgba(245,242,236,.09);
}

/* ── Els destacats de la plantilla ──
   Un resum pel davant de la graella: un cromo petit per rècord, amb la
   foto, la xifra i el nom, i la mateixa pestanya que porta el cromo gran
   de qui el lidera. Per saber qui és el màxim golejador abans s'havia de
   recórrer la plantilla sencera buscant una etiqueta petita.

   Es desplacen de costat i no es parteixen en dues files: són cinc rècords
   i poden ser més, i dues files els farien semblar dos grups de coses
   diferents. */
.destacats{margin-bottom:clamp(28px,4.5vh,44px)}
.destacats .squad-group-title{margin-bottom:clamp(14px,2.2vh,20px)}
.destacats-tira{
  list-style:none;
  display:flex;gap:clamp(12px,1.8vw,20px);
  overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:12px;
  /* L'aire de tot el voltant és per a la pestanya, que surt per sobre de la
     vora, i per al que pugen els cromos en passar-hi per sobre: una tira que
     es desplaça retalla tot el que surt de la seva caixa. El de sota, a més,
     per a la barra. */
  padding:20px 12px 18px;margin:-20px -12px -18px;
  scrollbar-width:thin;scrollbar-color:rgba(245,242,236,.16) transparent;
}
.destacats-tira::-webkit-scrollbar{height:6px}
.destacats-tira::-webkit-scrollbar-track{background:transparent}
.destacats-tira::-webkit-scrollbar-thumb{
  background:rgba(245,242,236,.16);border-radius:var(--r-pill);
}
.destacats-tira::-webkit-scrollbar-thumb:hover{background:rgba(245,242,236,.3)}

/* El mini cromo: les mateixes capes que el de la graella (el fons amb la
   marca, la foto i el vel, que són les mateixes classes) i la mateixa
   pestanya, a una mida que en faci cabre quatre o cinc de costat. El peu no
   porta les sis xifres: només la del rècord i qui el porta.

   El que el fa "de col·lecció" és l'acabat: un filet interior com el d'una
   carta impresa, un vernís que hi passa per sobre en apuntar-hi, i la vora
   i la pestanya del color del rècord (veure `.rec--*`). */
.mini-cromo-item{scroll-snap-align:start;flex:0 0 auto}
.mini-cromo{
  position:relative;display:block;
  width:clamp(146px,14.5vw,172px);aspect-ratio:3 / 4;
  font-size:clamp(15px,1.5vw,17px);
  border-radius:1.1em;text-decoration:none;color:inherit;
  box-shadow:0 0 0 1px rgba(var(--rec),.42),
    0 20px 40px -22px rgba(0,0,0,.95), 0 2px 6px rgba(0,0,0,.4);
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.mini-cromo .player-body{border-radius:inherit}
.mini-cromo:hover{
  transform:translateY(-4px);
  box-shadow:0 0 0 1px rgba(var(--rec),.7), 0 0 38px -14px rgba(var(--rec),.5),
    0 26px 44px -22px rgba(0,0,0,.95), 0 2px 6px rgba(0,0,0,.4);
}
.mini-cromo:focus-visible{outline:2px solid var(--or);outline-offset:4px}
/* La foto, una mica menys a prop que al cromo gran: aquí la cara ha de
   cabre sencera sobre el peu. */
.mini-cromo .player-photo img{transform:scale(1.12)}
/* La pestanya, a la mida del cromo petit. */
.mini-cromo > .player-distincio{font-size:.5em}
/* El filet interior i el vernís. El vernís és una franja clara en diagonal
   que dorm fora del cromo i hi travessa en apuntar-hi. */
.mini-cromo-marc{
  position:absolute;inset:.42em;z-index:9;pointer-events:none;
  border-radius:.75em;border:1px solid rgba(245,242,236,.13);
  overflow:hidden;
}
.mini-cromo-marc::after{
  content:"";position:absolute;inset:-40% -60%;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.10) 50%,transparent 58%);
  transform:translateX(-60%);transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.mini-cromo:hover .mini-cromo-marc::after{transform:translateX(60%)}
@media (prefers-reduced-motion:reduce){
  .mini-cromo-marc::after{transition:none}
}
.mini-cromo-peu{
  position:absolute;left:0;right:0;bottom:0;z-index:8;
  display:flex;flex-direction:column;gap:.45em;
  padding:0 1.05em 1.05em;
}
.mini-cromo-xifra{display:flex;align-items:baseline;gap:.4em}
.mini-cromo-num{
  font-size:2.3em;font-weight:700;line-height:.85;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--cream);
}
.mini-cromo-unitat{
  font-size:.55em;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,242,236,.6);
}
/* Entre la xifra i el nom, un traç del color del rècord: el mateix que porta la
   xifra del rècord a la fila del cromo gran. */
.mini-cromo-nom{
  position:relative;padding-top:.5em;
  font-size:.92em;font-weight:700;line-height:1.1;color:var(--cream);
  text-transform:uppercase;letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mini-cromo-nom::before{
  content:"";position:absolute;top:0;left:0;width:1.6em;height:2px;border-radius:2px;
  background:rgb(var(--rec));
}

/* ── La carta ──
   El marc que comparteixen la propera jornada, la darrera, l'hemeroteca i la
   temporada. Estava escrit quatre vegades amb quatre encoixinats i tres
   radis diferents; ara el que canvia de cada una és `--card-tint`, que és
   l'única cosa que de debò ha de canviar-hi.

   Res de vores de colors ni d'ombres per bloc: la fondària la fa el mateix
   sistema a tot arreu, i el que distingeix una carta d'una altra és el que
   hi diu a dins. */
.card{
  padding:var(--card-pad);
  border-radius:var(--r-lg);
  border:1px solid var(--card-vora);
  background:
    /* El halo va arran de la vora de dalt, i per això el radi vertical és
       en pixels i no en percentatge: amb `130%` creixia amb la carta, i al
       mòbil —on la carta és més alta que ampla— l'el·lipse es girava i el
       que a l'escriptori era una llum plana a dalt baixava pel mig com una
       taca, amb les cantonades de dalt fosques. En pixels fa el mateix a
       qualsevol forma de carta. */
    radial-gradient(130% 260px at 50% -30px, var(--card-tint), transparent 70%),
    var(--surf-card);
  box-shadow:var(--card-relleu), var(--shadow-card);
}
/* El títol d'una carta. Puja de 1,3-1,9rem: el salt entre el que mana i el
   que acompanya ha de ser evident sense llegir res. */
.card .section-title{font-size:clamp(1.45rem,2.8vw,2.1rem);letter-spacing:-.015em}
.card .section-head{
  padding-bottom:clamp(13px,2vh,18px);
  margin-bottom:clamp(18px,2.8vh,26px);
  border-bottom-color:rgba(245,242,236,.08);
}
/* Les dades que són DADES i no etiquetes, en minúscula i a mida de text.
   Les majúscules daurades eren l'element que més envellia la pàgina, i les
   que es menjaven eren justament les que la gent ve a llegir: quan es juga,
   quan es va jugar. Les que es queden en majúscula són les que titulen. */
.card .dada{
  font-size:clamp(.88rem,1.3vw,1rem);letter-spacing:0;
  text-transform:none;color:rgba(245,242,236,.7);
}
/* Entre cartes, sempre el mateix aire. */
.card + .card,
.view > .card{margin-top:clamp(22px,3.6vh,38px)}

/* ── La fila de dalt ──
   La propera jornada i la temporada, al mateix nivell. Apilades al mòbil i
   de costat a partir d'on hi caben, amb la propera jornada a dos terços: és
   la que demana l'acció. Si no hi ha temporada, la propera jornada ocupa la
   fila sencera, que és com anava.

   El `minmax(0,…)` hi és perquè una columna de graella no baixa de la seva
   mida mínima de contingut, i un nom d'equip llarg desbordava la carta. */
.portada-fila{display:grid;gap:clamp(22px,3.6vh,38px)}
.portada-fila > .card{margin-block:0}
.portada-fila > .card{--card-pad:clamp(30px,4.2vw,48px)}
@media (min-width:1080px){
  .portada-fila{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
  .portada-fila > .card:only-child{grid-column:1 / -1}
  /* Les dues acaben a la mateixa alçada, i el que sobra a la temporada va
     per sobre del gràfic, que queda arran de baix. */
  /* De costat, el filet de sota del títol fa una sola línia d'una carta a
     l'altra: la fila té dues pistes —les capçaleres i el cos— i cada carta
     les comparteix amb `subgrid`. Mana la capçalera més alta, sigui quina
     sigui: amb una alçada mínima fixa, en quan una de les dues passava a dues
     línies (la ratxa sota el títol, els dos xips de la porra) el filet es
     tornava a desquadrar. */
  .portada-fila{grid-template-rows:auto 1fr}
  .portada-fila > .card{
    display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0;
  }
  .portada-fila > .card:only-child{grid-row:auto;display:block}
  .portada-fila > .card > .section-head{margin-bottom:clamp(16px,2.5vh,24px)}
  .portada-fila .card-cos{display:flex;flex-direction:column}
  .portada-fila .season-chart{margin-top:auto}
  /* Amb els antecedents oberts la propera jornada fa tres pantalles, i
     estirar-hi la temporada la deixava amb un forat enorme i el gràfic a baix
     de tot. Mentre el plec és obert, la temporada surt de la `subgrid` —que
     sempre estira, `align-self` no hi fa res— i fa la seva alçada. */
  .portada-fila:has(.hero-h2h[open]) > .season-card{display:block;align-self:start}
}
.view > .portada-fila,
.portada-fila + .season-panels,
.season-panels + .card{margin-top:clamp(22px,3.6vh,38px)}

/* L'etiqueta petita en majúscules, que és el text més repetit del web.
   Tres passos (`--txt-*`) i no trenta-nou combinacions. */
.etiqueta{
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);
  text-transform:uppercase;color:var(--or);
}

/* ── Vista ── */
.view{
  /* 1200 venia de quan el web era text. Ara la major part del que hi ha són
     DADES —files de calendari, graelles de cromos, taules de precedents— i
     les dades volen amplada: en una pantalla de 1800 quedaven 300 píxels de
     marge a cada costat i la pàgina es llegia com si fos la versió de
     mòbil estirada.

     1340 i no més: una fila de calendari de dos mil píxels de front deixa
     de ser una fila i es converteix en una recta amb dues coses molt
     separades. */
  max-width:1340px;margin:0 auto;
  padding:clamp(28px,5vh,56px) clamp(18px,4vw,40px);
  width:100%;flex:1;
  display:flex;flex-direction:column;
}

/* ── La propera jornada ──
   Sola a dalt de tot i a tota amplada: és l'única acció de la portada i el que
   li demanem a qui entra. El partit a l'esquerra (amb lloc per al que hi
   haguem d'afegir) i el panell de joc a la dreta, amb el botó. */
/* ── La propera jornada, refeta ──
   La primera carta que s'ha fet amb els quatre principis del repàs de
   disseny. La resta de la pàgina encara va com anava, a posta: així es poden
   comparar de costat.

   1. AIRE. L'encoixinat puja de 20-34px a 30-48. És el senyal que més es nota
      i el més barat: una carta que respira es llegeix com una peça i no com
      un contenidor ple.
   2. SENSE VORA. La carta deixa de dur perfil d'1px i es distingeix perquè la
      seva superfície és un pas més CLARA que el fons. Amb vora, és un
      rectangle dibuixat; amb llum pròpia, és un objecte. És el canvi que més
      la separa del web d'abans.
   3. CONTRAST TIPOGRÀFIC. El títol passa de 1,3-1,9rem a 1,7-2,6 i els noms
      dels equips de 0,95 a 1,35: el salt entre el que mana i el que
      acompanya ha de ser evident sense llegir res.
   4. MENYS MAJÚSCULES DAURADES. Eren l'element que més envellia la pàgina.
      L'hora del partit passa a minúscula i a mida de text de debò; només es
      queden en majúscula les que són etiquetes de veritat. */
.hero{
  position:relative;overflow:hidden;

  /* L'única amb tint i halo grana, i la que porta el títol més gros: és la
     que demana l'acció i ha de manar sobre les altres tres. */
  --card-pad:clamp(30px,4.2vw,48px);
  --card-tint:rgba(194,30,51,.22);
  box-shadow:var(--card-relleu), var(--shadow-hero), var(--halo-grana);
}
.hero .section-title{font-size:clamp(1.7rem,3.2vw,2.6rem);letter-spacing:-.02em}
/* El cos es parteix per l'amplada de la carta i no de la pantalla: ara
   comparteix fila amb la temporada, i a 1200px de pantalla la carta en fa
   700. El contenidor és el cos i no la carta sencera: una carta contenidor
   no pot compartir pistes amb la del costat (`subgrid`), i el cos té la
   mateixa amplada útil. */
.hero > .card-cos{container-type:inline-size}
/* Els equips, a mida de titular. El marcador del partit que ve és el que la
   portada ensenya de més lluny. */
.hero .team-name{font-size:clamp(1.05rem,1.9vw,1.35rem);letter-spacing:-.01em}
.hero .score{gap:clamp(16px,3.5vw,34px);padding:clamp(8px,1.6vh,16px) 0}
.hero .score-vs{
  font-size:var(--txt-xs);letter-spacing:var(--track-xs);
  padding-top:clamp(18px,3.4vw,30px);
}
/* L'hora, en minúscula i a mida de text: era una etiqueta daurada més i és
   la dada que la gent busca. */
.hero .match-when{
  font-size:clamp(.92rem,1.4vw,1.05rem);letter-spacing:0;
  text-transform:none;color:rgba(245,242,236,.72);
}
.hero .match-context{margin-bottom:clamp(6px,1vh,10px)}
/* La separació entre el partit i el joc, més aire i el filet més fi. */
.hero-body{gap:clamp(24px,4vw,44px)}
.hero .hero-play{
  padding-left:clamp(24px,4vw,44px);
  border-left-color:rgba(245,242,236,.09);
}
.hero .hero-cta{padding:17px 28px}
.hero .section-head{margin-bottom:clamp(16px,2.5vh,24px);align-items:center}
.hero-body{
  display:grid;gap:clamp(18px,3vw,34px);
  grid-template-columns:minmax(0,1fr) minmax(0,340px);
  align-items:center;
}
.hero-match{display:flex;flex-direction:column;gap:clamp(10px,1.6vh,16px)}
/* El partit, més gran i més junt que a la resta del web: és el que ha de
   mirar qui arriba. Sense `flex:1` als equips, que estirats a tota la columna
   deixaven el "vs" nedant i el partit no es llegia com una sola cosa. */
.hero .team{flex:0 1 240px}
.hero .team-crest{width:clamp(52px,5.5vw,76px);height:clamp(52px,5.5vw,76px)}
.hero .team-name{font-size:clamp(.95rem,1.4vw,1.15rem)}
.hero .score{gap:clamp(14px,3vw,44px)}
.hero .score-vs{padding-top:clamp(20px,3.2vw,34px)}
/* El panell de joc separat per una línia i no per una caixa: dins d'una caixa
   ja prou destacada, una segona vora hi feia nines russes. */
.hero-play{
  display:flex;flex-direction:column;gap:clamp(14px,2vh,20px);
  padding-left:clamp(18px,3vw,34px);
  border-left:1px solid rgba(245,242,236,.12);
}
.hero-claim{
  font-size:.95rem;line-height:1.45;color:rgba(245,242,236,.7);
  text-wrap:balance;
}
/* La crida és un botó i no un enllaç: mateix tractament que el d'entrar, que
   és l'altra cosa que volem que es cliqui de tot el web. */
.hero-cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:var(--r-pill);
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;font-weight:600;
  background:var(--grana);border:1px solid var(--grana);color:var(--paper);
  box-shadow:0 14px 34px -16px rgba(194,30,51,.95);
  text-align:center;text-wrap:balance;
  transition:background .25s, border-color .25s, box-shadow .25s;
}
.hero-cta:hover{
  background:var(--grana-viu);border-color:var(--grana-viu);
  box-shadow:0 16px 40px -14px rgba(194,30,51,1);
}
.hero-cta:hover .arrow{transform:translateX(5px)}
/* Les dues pastilles d'estat, una per joc. En columna a l'ordinador —van
   alineades a la dreta del títol— i en fila quan la capçalera es parteix. */
.hero-estats{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
/* Els dos botons són iguals, i a posta: la porra i l'onze són dues maneres de
   jugar-se el mateix partit i cap de les dues és la de segona. */

@container (max-width:620px){
  .hero-body{grid-template-columns:minmax(0,1fr)}
  .hero-play{
    padding-left:0;padding-top:clamp(14px,2.5vh,20px);
    border-left:0;border-top:1px solid rgba(245,242,236,.12);
  }
}

/* ── Pastilla d'estat: el resultat d'una jornada o com està la porra ── */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--txt-xs);letter-spacing:var(--track-xs);text-transform:uppercase;
  padding:5px 11px;border-radius:var(--r-pill);
  border:1px solid transparent;
  background:rgba(10,7,8,.4);
  color:rgba(245,242,236,.7);
  white-space:nowrap;
}
.badge--win{
  color:#cdeccd;border-color:rgba(120,190,120,.4);background:rgba(80,150,80,.16);
}
.badge--loss{
  color:rgba(245,242,236,.6);border-color:rgba(245,242,236,.16);
}
.badge--draw{
  color:var(--or);border-color:rgba(212,175,106,.35);background:rgba(212,175,106,.10);
}
.badge-dot{width:7px;height:7px;border-radius:50%;background:rgba(245,242,236,.45);flex:none}
.badge--open{
  color:var(--cream);border-color:var(--grana-viu);background:rgba(194,30,51,.16);
}
.badge--open .badge-dot{
  background:var(--grana-soft);animation:badge-pulse 2s ease-out infinite;
}
@keyframes badge-pulse{
  0%   { box-shadow:0 0 0 0 rgba(255,94,114,.55); }
  70%  { box-shadow:0 0 0 9px rgba(255,94,114,0); }
  100% { box-shadow:0 0 0 0 rgba(255,94,114,0); }
}

/* ── Marcador de la propera jornada: escut, nom, "vs", escut ── */
.score{
  display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(10px,2.5vw,22px);width:100%;
  padding:clamp(4px,1vh,10px) 0;
}
.team{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  flex:1 1 0;min-width:0;
}
.team-crest{
  width:clamp(40px,7vw,56px);height:clamp(40px,7vw,56px);
  object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6));
}
.team-name{
  font-weight:600;font-size:clamp(.82rem,1.2vw,.95rem);
  line-height:1.25;color:var(--cream);text-align:center;text-wrap:balance;
}
.score-vs{
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
  color:rgba(245,242,236,.4);padding-top:clamp(14px,2.8vw,22px);
}
.match-context{
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;color:var(--or);
  text-align:center;
}
.match-when{
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
  color:rgba(245,242,236,.62);text-align:center;
}

/* ── Detall: goals, MVP, targetes, pronòstic ── */
.detail-title{
  font-size:var(--txt-xs);letter-spacing:var(--track-xs);text-transform:uppercase;
  color:rgba(245,242,236,.42);font-weight:500;margin-bottom:6px;
}
.detail-empty{
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
  color:rgba(245,242,236,.35);
}
.facts{list-style:none;display:flex;flex-direction:column;gap:5px}
.fact{
  display:flex;align-items:center;gap:8px;
  font-size:.92rem;color:rgba(245,242,236,.85);
}
.fact-icon{font-size:.8rem;flex:none;opacity:.9}
.fact--mvp .fact-icon{color:var(--or);opacity:1}
.fact-name{min-width:0;overflow-wrap:anywhere}
.fact-count{
  font-size:.75rem;color:var(--or);letter-spacing:.06em;
}

/* ── L'acta d'un partit ──
   El camp, els gols i els canvis els pinta el mòdul compartit amb la porra i
   els vesteix `/shared/match-report.css`. Aquí només hi ha el marc: on penja
   dins d'una jornada del calendari i com es plega a la caixa de la portada. */
.match-sheet{display:flex;flex-direction:column;gap:14px;width:100%}
.match-sheet-when{
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
  color:rgba(245,242,236,.5);text-align:center;
}
.acta-carregant{
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
  color:rgba(245,242,236,.35);text-align:center;padding:14px 0;
}

/* ── La darrera jornada: el resultat i la seva acta ──
   Van juntes i a tota amplada. El marcador fa de capçalera de la seva pròpia
   acta, i el camp i els fets hi caben com a dues columnes; dins d'una caixa de
   mitja portada l'acta quedava escanyada. */
.sheet{--card-tint:rgba(212,175,106,.05)}
/* Sense propera jornada al calendari, la darrera obre la portada i el marge
   que la separava de la de dalt ja no separa res. */
.sheet:first-child{margin-top:0}
.sheet .section-head{margin-bottom:clamp(14px,2vh,20px);align-items:center}
/* El marcador a la capçalera, al costat del títol de la secció. */
.sheet-result{display:flex;align-items:center;gap:clamp(8px,1.2vw,14px);flex-wrap:wrap}
.sheet-result .team-crest{width:34px;height:34px}
.sheet-team{
  font-weight:600;font-size:clamp(.85rem,1.1vw,1rem);color:var(--cream);
}
.sheet-goals{
  font-weight:700;font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1;
  color:var(--cream);padding:0 clamp(2px,.6vw,6px);
}
/* La data és una DADA i no una etiqueta: en minúscula i a mida de text.
   Les majúscules daurades eren el que més envellia la pàgina, i es menjaven
   justament el que la gent ve a llegir. */
.sheet-context{
  font-size:clamp(.85rem,1.2vw,.95rem);letter-spacing:0;
  color:rgba(245,242,236,.62);
  margin-bottom:clamp(14px,2.5vh,22px);
}
.sheet-cta{
  margin-top:clamp(18px,3vh,26px);
  padding-top:clamp(12px,2vh,16px);
  border-top:1px solid rgba(245,242,236,.10);
  display:flex;align-items:center;gap:9px;
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
  color:var(--or);transition:color .2s;
}
.sheet-cta:hover{color:var(--cream)}
.sheet-cta:hover .arrow{transform:translateX(5px)}
/* El cos: el camp a l'esquerra i, a la dreta, els fets a dalt i el gràfic de
   la temporada omplint el que queda.

   El mòdul compartit ve amb la seva pròpia graella (camp | fets) capada a
   860px, que és el que li convé dins d'una fila del calendari. Aquí la deixem
   passar amb `display:contents` en comptes de reajustar-la: així el camp, els
   fets i el gràfic són caselles d'una mateixa graella i el gràfic pot anar al
   costat del camp, que és molt més alt que dos gols i un canvi. Amb dues
   graelles imbricades no s'hi podia arribar. */
/* L'acta, plegada. El marcador de la capçalera és el que la portada ve a dir
   de la darrera jornada; el camp, els gols i els canvis són la pregunta
   següent i desplegats es menjaven mitja pantalla. La fila que l'obre és el
   mateix plec. */
.sheet-acta{margin-top:clamp(14px,2.4vh,20px)}

.sheet-body{
  margin-top:clamp(14px,2.4vh,20px);
  padding-top:clamp(14px,2.4vh,20px);
  border-top:1px solid rgba(245,242,236,.09);
}

.sheet-body{
  display:grid;align-items:start;
  /* Una columna per al camp i una per als fets. Abans la segona la
     compartia amb el gràfic de la temporada, que ara té carta pròpia. */
  grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:clamp(18px,3vw,32px);
}
.sheet-body [data-acta],
.sheet-body .acta-partit{display:contents}
.sheet-body .camp-zona{grid-area:1 / 1 / span 2 / auto}
/* Dues columnes fixes i no `auto-fit`: amb només gols i canvis, l'ajust
   automàtic obria una tercera columna que es quedava buida a la dreta. */
.sheet-body .acta-costat{
  grid-area:1 / 2;
  display:grid;align-content:start;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.5vw,28px);
}
/* Jornades entrades abans que hi hagués acta: sense camp que faci de columna,
   els fets ocupen tota l'amplada. */
.sheet-body:not(:has(.camp-zona)) .acta-costat{grid-column:1 / -1}
@media (max-width:820px){
  .sheet-body{grid-template-columns:minmax(0,1fr)}
  /* Sense col·locació explícita tornen a l'ordre del document: camp, fets i
     gràfic, un sota l'altre. */
  .sheet-body .camp-zona,
  .sheet-body .acta-costat{grid-area:auto}
  .sheet-body .acta-costat{grid-template-columns:minmax(0,1fr)}
  /* El camp mana la seva amplada a partir d'aquí: estirat a tota la columna es
     menjava la pantalla. Enganxat a l'esquerra i no centrat: apilat, el seu
     títol i els dels fets fan una sola columna de títols, i centrar només el
     camp deixava "L'onze" endins i "Gols" al marge. */
  .sheet-body .camp-zona{max-width:340px}
}

/* ── El resum de la temporada ──
   La ratxa partit a partit, el repartiment de resultats i els gols. Tot amb
   CSS: les mides i els talls els calcula el servidor en tant per cent, i aquí
   no hi ha ni JS ni cap llibreria de gràfics.

   Els colors dels tres resultats surten d'aquí i els comparteixen els
   quadradets, el formatget i la llegenda: si el verd de "victòria" canvia,
   canvia als tres llocs alhora. */
/* La temporada: carta pròpia i no un racó de la darrera jornada.
   Hi vivia perquè el camp de l'acta és molt més alt que dos gols i un canvi
   i aquell buit del costat era el que omplia. Però responia una altra
   pregunta —com anem, no com va anar diumenge— des de dins de la caixa d'un
   sol partit, i amb l'acta plegada aquell buit ja no hi és. */
.season-card{
  --win:#7bbe7b;--draw:var(--or);--loss:var(--grana-lite);
  --card-tint:rgba(123,190,123,.05);
}
/* La ratxa va a la capçalera, al costat del títol: és el resum del resum i
   es llegeix d'una ullada. */
.season-card .section-head{align-items:center}
.season-subtitle{
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
  color:var(--or);font-weight:400;
}

/* El color de cada resultat, en un sol lloc. El quadradet, la porció del
   formatget i el punt de la llegenda el llegeixen d'aquí: així la "V" de la
   ratxa és exactament del mateix verd que la seva porció, i es veu de seguida
   que parlen del mateix. */
.form-chip--win{--c:var(--win)}
.form-chip--draw{--c:var(--draw)}
.form-chip--loss{--c:var(--loss)}

/* Un quadradet per partit. Contorn i lletra del color del resultat; el fons és
   el mateix color rebaixat, prou perquè el quadradet es llegeixi com una peça
   i no com quatre lletres soltes. */
.form-row{list-style:none;display:flex;flex-wrap:wrap;gap:4px}
.form-chip{
  width:22px;height:22px;border-radius:6px;
  display:grid;place-items:center;
  font-family:'Space Grotesk',sans-serif;
  font-size:10px;font-weight:700;line-height:1;
  border:1px solid var(--c);color:var(--c);
  background:color-mix(in srgb, var(--c) 16%, transparent);
  cursor:default;
}


/* ── Les xifres del peu ──
   Punts, diferència i porteries a zero. Una fila que s'ajusta: a la columna
   estreta de l'escriptori i al mòbil caben de tres en tres perquè el nom va
   SOTA el número i no al costat.

   Separades per un filet de dalt i no per una caixa: és el mateix que fan
   les files de l'hemeroteca, i una caixa aquí dins seria una caixa dins
   d'una carta. */
.season-xifres{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,2vw,18px);
  margin-top:clamp(16px,2.6vh,22px);padding-top:clamp(14px,2.2vh,18px);
  border-top:1px solid rgba(245,242,236,.08);
  list-style:none;
}
.season-xifra{display:flex;flex-direction:column;gap:3px;min-width:0}
.season-xifra-num{
  font-size:clamp(1.1rem,2.4vw,1.35rem);line-height:1;
  font-weight:700;color:var(--cream);
}
.season-xifra-nom{
  font-size:var(--txt-xs);letter-spacing:var(--track-xs);
  text-transform:uppercase;color:rgba(245,242,236,.55);
  line-height:1.35;overflow-wrap:break-word;
}

/* Els punts, la xifra que mana, amb "de 12" al costat en petit. */
.season-punts{display:flex;align-items:baseline;gap:10px}
.season-punts-num{
  font-size:clamp(2.6rem,5vw,3.4rem);font-weight:700;line-height:.9;
  letter-spacing:-.02em;color:var(--or);
}
.season-punts-nom{
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
  color:var(--cream);
}
.season-punts-de{color:rgba(245,242,236,.45);margin-left:4px}

/* La barra dels resultats: tres trossos de color, cadascun la seva part,
   i la llegenda a sota amb el mateix color a cada número. */
.season-split{margin-top:clamp(14px,2.2vh,18px);display:flex;flex-direction:column;gap:9px}
.season-split-barra{
  display:flex;gap:3px;height:10px;border-radius:var(--r-pill);overflow:hidden;
  background:rgba(245,242,236,.07);
}
.season-split-tros{display:block;height:100%}
.season-split-tros--win{background:var(--win)}
.season-split-tros--draw{background:var(--draw)}
.season-split-tros--loss{background:var(--loss)}
.season-split-llegenda{
  list-style:none;display:flex;flex-wrap:wrap;gap:4px 18px;
  font-size:var(--txt-xs);letter-spacing:var(--track-xs);text-transform:uppercase;
  color:rgba(245,242,236,.55);
}
.season-split-item b{font-size:.95rem;letter-spacing:0;margin-right:3px;color:var(--c)}
.season-split-item--win{--c:var(--win)}
.season-split-item--draw{--c:var(--draw)}
.season-split-item--loss{--c:var(--loss)}

/* ── Els gràfics de la temporada ──
   SVG pintats al servidor: els punts els calcula la presentació en unitats
   del `viewBox`, i aquí només hi ha els colors. Els traços no s'estiren amb
   l'SVG (`non-scaling-stroke`), perquè a la carta ampla no semblin més
   gruixuts que a la del mòbil. */
.season-chart{
  margin-top:clamp(18px,3vh,26px);padding-top:clamp(14px,2.2vh,20px);
  border-top:1px solid rgba(245,242,236,.08);
  display:flex;flex-direction:column;gap:10px;
}
.season-chart svg{display:block;width:100%;height:auto;overflow:visible}
.points-terra{stroke:rgba(245,242,236,.12);stroke-width:1;vector-effect:non-scaling-stroke}
.points-area{fill:rgba(212,175,106,.08)}
.points-final{
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;
  fill:var(--or);
}

.points-line{
  fill:none;stroke:var(--or);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.points-dot{fill:#231819;stroke:var(--c);stroke-width:2;vector-effect:non-scaling-stroke}
.points-dot--win{--c:var(--win)}
.points-dot--draw{--c:var(--draw)}
.points-dot--loss{--c:var(--loss)}
.season-chart-eix{
  display:flex;justify-content:space-between;gap:10px;
  font-size:var(--txt-xs);letter-spacing:var(--track-xs);text-transform:uppercase;
  color:rgba(245,242,236,.4);
}
.season-chart-eix > *{white-space:nowrap}

/* Les tres peces del detall, sota la fila de dalt. Una fila que s'ajusta:
   tres de costat a l'escriptori, una sota l'altra al mòbil. Més arran que
   les cartes grans: són peces petites i no han de competir amb les de dalt. */
.season-panels{
  display:grid;gap:clamp(16px,2.4vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.season-panel{
  --card-pad:clamp(18px,2.4vw,26px);
  --card-tint:rgba(212,175,106,.05);
  --win:#7bbe7b;--draw:var(--or);--loss:var(--grana-lite);
  margin:0;display:flex;flex-direction:column;gap:14px;
}
.card + .season-panel{margin-top:0}
.season-panel .season-subtitle{margin:0}

/* Partit a partit: una fitxa per partit, amb el filet de l'esquerra i la
   lletra del color del resultat. S'ajusta sola: dues columnes a la carta
   ampla, una a la del mòbil. */
.recent-list{
  list-style:none;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.recent{
  --c:rgba(245,242,236,.4);
  display:flex;align-items:center;gap:10px;min-width:0;
  padding:8px 10px;border-radius:var(--r-md);
  background:color-mix(in srgb, var(--c) 9%, rgba(245,242,236,.03));
  box-shadow:inset 3px 0 0 var(--c);
}
.recent--win{--c:var(--win)}
.recent--draw{--c:var(--draw)}
.recent--loss{--c:var(--loss)}
.recent-num{
  font-size:var(--txt-xs);letter-spacing:var(--track-xs);text-transform:uppercase;
  color:rgba(245,242,236,.45);min-width:2.4em;
}
.recent-partit{display:flex;align-items:center;justify-content:center;gap:6px;flex:1 1 auto;min-width:0}
.recent-partit .team-crest{width:22px;height:22px;flex:none}
.recent-score{
  font-weight:700;font-size:1rem;color:var(--cream);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.recent-lletra{font-size:11px;font-weight:700;color:var(--c)}

/* Casa i fora: els punts en gran, els resultats un per un amb els
   quadradets de la ratxa i els gols en dues xifres amb nom. */
.venue-list{list-style:none;display:flex;flex-direction:column;gap:16px}
.venue{display:flex;flex-direction:column;gap:9px}
.venue + .venue{padding-top:16px;border-top:1px solid rgba(245,242,236,.07)}
.venue-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.venue-name{font-weight:600;font-size:1.05rem;color:var(--cream)}
.venue-points{font-weight:700;font-size:1.35rem;color:var(--or)}
.venue-possible{
  font-weight:400;font-size:var(--txt-xs);letter-spacing:var(--track-xs);text-transform:uppercase;
  color:rgba(245,242,236,.45);
}
.venue-gols{
  display:flex;gap:18px;
  font-size:var(--txt-xs);letter-spacing:var(--track-xs);text-transform:uppercase;
  color:rgba(245,242,236,.5);
}
.venue-gols b{font-size:1rem;letter-spacing:0;color:var(--cream);margin-right:3px}
.scorer-track{
  display:block;height:7px;border-radius:var(--r-pill);
  background:rgba(245,242,236,.07);overflow:hidden;
}
.scorer-fill{
  display:block;height:100%;min-width:3px;border-radius:var(--r-pill);
  background:linear-gradient(90deg, rgba(212,175,106,.55), var(--or));
}

/* Els golejadors i les assistències: dues llistes curtes, una sota l'altra,
   amb el mateix format. La barra de les assistències va en plata, el color
   del galó d'assistències del cromo: que no es confongui amb la dels gols. */
.leader-grup{display:flex;flex-direction:column;gap:12px}
.leader-grup + .leader-grup{padding-top:14px;border-top:1px solid rgba(245,242,236,.07)}
.scorer-fill.scorer-fill--assists{background:linear-gradient(90deg, rgba(214,211,203,.45), #e4e2dc)}
/* Els golejadors: nom, barra contra el primer i els gols. */
.scorer-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.scorer{
  display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr) auto;
  align-items:center;gap:12px;
}
.scorer-name{
  color:var(--cream);text-decoration:none;font-size:.92rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.scorer-name:hover{color:var(--or)}
.scorer-goals{font-weight:700;color:var(--cream);min-width:1.6em;text-align:right}
.season-panel-more{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
  color:var(--or);text-decoration:none;transition:color .2s;
}
.season-panel-more:hover{color:var(--cream)}
.season-panel-more .arrow{display:inline-block;transition:transform .2s}
.season-panel-more:hover .arrow{transform:translateX(5px)}

.prediction{
  padding:clamp(10px,1.6vw,14px);
  border-radius:var(--r-md);
  border:1px solid rgba(212,175,106,.22);
  background:rgba(212,175,106,.06);
}
.prediction-score{
  font-weight:700;font-size:1.5rem;line-height:1;color:var(--or);
  margin-bottom:8px;
}
.prediction .detail-title{color:var(--or);opacity:.8}

/* ── Capçalera de pàgina ── */
.page-head{
  margin-bottom:clamp(22px,3.5vh,34px);
}
.page-title{
  font-weight:700;text-transform:uppercase;letter-spacing:-.015em;
  font-size:clamp(2rem,5vw,3rem);line-height:1;color:var(--cream);
}
.page-lede{
  margin-top:10px;max-width:52ch;
  color:rgba(245,242,236,.62);font-size:clamp(.92rem,1.1vw,1rem);line-height:1.55;
}

/* La nota de sota el lede: de quan a quan arriba l'històric. Petita i en or
   fluix: és context, no titular. */
.page-note{
  margin-top:10px;
  font-size:var(--txt-xs);letter-spacing:var(--track-xs);text-transform:uppercase;
  color:rgba(212,175,106,.6);
}

/* ── Calendari ── */

/* La tria de competició. El xip és el mateix que a la porra (`porra/styles.css`)
   —mateixa mida, mateixa pastilla grana quan està triat— perquè filtrar el
   calendari s'ha de veure igual als dos llocs. No es confon amb la
   subnavegació: aquella canvia de pàgina dins d'una secció i va buida; aquesta
   tria què s'ensenya d'una llista, i la triada va plena. */
.cal-tria{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(14px,2vh,20px)}

/* La tria de la plantilla porta títol i la del calendari no, perquè no fan el
   mateix: allà els xips treuen jornades de la llista i aquí no treuen ningú
   —els jugadors són sempre els mateixos—, només canvien què compten les
   xifres dels cromos. Sense el títol, el control sembla el d'allà. */
.squad-tria{margin-bottom:clamp(14px,2vh,20px)}
.squad-tria .cal-tria{margin-bottom:0}
.squad-tria-titol{
  margin-bottom:8px;
  font-size:var(--txt-xs);letter-spacing:var(--track-xs);text-transform:uppercase;
  color:rgba(245,242,236,.45);
}

.calendar{list-style:none;display:flex;flex-direction:column;gap:10px}
/* Les files del calendari, amb els mateixos principis que les cartes de la
   portada: sense perfil d'1px i amb la superfície un pas més clara que el
   fons. Aquí es nota encara més que en una carta sola, perquè n'hi ha
   quaranta seguides: amb vora era una graella dibuixada i ara són peces. */
.matchday{
  border-radius:var(--r-md);
  border:1px solid transparent;
  background:var(--surf-card);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  transition:background .2s, box-shadow .2s;
}
/* Sense vora, el senyal de "s'hi pot clicar" també passa a ser la llum: la
   fila s'encén en comptes de perfilar-se. */
.matchday--played:hover{
  background:linear-gradient(180deg, rgba(68,46,50,.68), rgba(30,21,23,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
/* La que ve ara: l'única que ha de cridar l'atenció de tota la llista, i ho
   fa amb el grana i no amb una ratlla.

   Va per `--next` i no per `--open`: `--open` és un estat de la jornada
   (té hora futura i admet pronòstic) i el tenen totes les que vénen, no
   només la primera. A principi de temporada, quan encara no hi ha cap
   horari, no el tenia cap: 38 jornades i cap ressaltada. */
.matchday--next{
  background:
    linear-gradient(90deg, rgba(194,30,51,.18), transparent 46%),
    var(--surf-card);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),
             0 10px 30px -18px rgba(194,30,51,.8);
}

/* Els dos costats fan el mateix i no depenen del que hi posi cada fila: si la
   dreta mana, el marcador d'una jugada i el "vs" d'una pendent queden a
   alçades diferents i la columna central es veu torta. */
.matchday-row{
  --matchday-side:clamp(8.5rem,17vw,13.5rem);
  display:grid;
  grid-template-columns:var(--matchday-side) minmax(0,1fr) var(--matchday-side);
  align-items:center;gap:clamp(10px,2vw,20px);
  padding:clamp(11px,1.6vw,15px) clamp(12px,2vw,20px);
}
.matchday-end{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;
  column-gap:clamp(10px,2vw,20px);row-gap:4px;min-width:0;
}
.matchday-details > summary{cursor:pointer;list-style:none}
/* Les pendents sense antecedents no van enlloc: que el cursor no prometi el
   contrari. Les que en tenen són un enllaç i s'hi comporten com a tal. */
.matchday-row--pending{cursor:default}
.matchday-row--rival:hover{background:rgba(245,242,236,.03)}
.matchday-row--rival:focus-visible{outline:2px solid var(--llauto);outline-offset:-2px}
/* Quants precedents hi ha, al lloc de la fletxa de desplegar. En or fluix
   fins que s'hi passa per sobre: és una porta, no una dada del partit. */
.matchday-rival{
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(212,175,106,.55);white-space:nowrap;text-align:right;
  transition:color .2s;
}
.matchday-row--rival:hover .matchday-rival{color:var(--or)}
.matchday-details > summary::-webkit-details-marker{display:none}
.matchday-details > summary:focus-visible{outline:2px solid var(--llauto);outline-offset:-2px}

.matchday-num{
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);color:var(--or);
  min-width:42px;
}
.matchday-teams{
  display:flex;align-items:center;gap:clamp(8px,1.5vw,16px);
  min-width:0;
}
.matchday-team{
  display:flex;align-items:center;gap:8px;
  font-size:clamp(.85rem,1.1vw,.98rem);
  color:rgba(245,242,236,.62);
  flex:1 1 0;min-width:0;
}
.matchday-team:first-child{justify-content:flex-end}
.matchday-team-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.matchday-team--nastic{color:var(--cream);font-weight:600}
/* L'escut de la fila del calendari: prou petit per no fer créixer la fila. */
.matchday-team .team-crest{
  width:26px;height:26px;flex:none;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
.matchday-score{
  font-weight:700;font-size:clamp(.95rem,1.3vw,1.1rem);
  color:var(--cream);flex:none;min-width:56px;text-align:center;
}
.matchday-score--empty{
  font-weight:400;font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
  color:rgba(245,242,236,.3);
}
.matchday-status{
  font-size:var(--txt-xs);letter-spacing:var(--track-xs);text-transform:uppercase;
  color:rgba(245,242,236,.42);white-space:nowrap;
}
.matchday-status--win{color:#9ed49e}
.matchday-status--loss{color:rgba(245,242,236,.4)}
.matchday-status--draw{color:var(--or)}
.matchday-toggle{
  font-size:10px;color:rgba(245,242,236,.35);
  min-width:12px;text-align:right;
  transition:transform .2s ease;
}
.matchday-details[open] .matchday-toggle{transform:rotate(180deg)}

.matchday-detail{
  display:flex;flex-wrap:wrap;gap:clamp(16px,4vw,44px);
  padding:clamp(12px,2vw,18px) clamp(12px,2vw,20px) clamp(16px,2.4vw,22px);
  border-top:1px solid rgba(245,242,236,.08);
  background:rgba(245,242,236,.045);
}
.matchday-detail .detail-block{min-width:150px}

@media (max-width:620px){
  .matchday-row{
    grid-template-columns:auto minmax(0,1fr);
    row-gap:8px;
  }
  .matchday-teams{grid-column:1 / -1;order:2}
  .matchday-num{order:1}
  .matchday-end{order:1}
  .matchday-detail{flex-direction:column;gap:14px}
  .matchday-team .team-crest{width:22px;height:22px}
}

/* ── La pàgina d'un rival ──
   Tot el que se sap d'un equip i quan s'hi torna a jugar. Existeix perquè la
   llista sencera de precedents no cap dins d'una fila del calendari: allà hi
   anava una taula amb barra pròpia dins d'un bloc desplegat, que són dos
   desplaçaments un dins de l'altre i no els fa servir ningú. */
.rival-head{
  display:flex;align-items:center;gap:clamp(14px,3vw,24px);
  margin-bottom:clamp(20px,3.4vh,30px);
}
.rival-head .team-crest{
  flex:none;width:clamp(56px,7vw,76px);height:clamp(56px,7vw,76px);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));
}
.rival-head-text{min-width:0}
.rival-kicker{
  font-size:var(--txt-xs);letter-spacing:var(--track-xs);text-transform:uppercase;
  color:var(--or);margin-bottom:4px;
}
.rival-head .page-title{margin-bottom:0}

.rival-next{margin-bottom:clamp(20px,3.4vh,30px)}
.rival-next .h2h-title{margin-bottom:9px}
.rival-fixtures{list-style:none;display:flex;flex-wrap:wrap;gap:9px}
.rival-fixture-link{
  display:flex;flex-direction:column;gap:3px;
  padding:13px 18px;border-radius:var(--r-md);
  border:1px solid transparent;
  /* El partit que ve crida amb el grana, com la fila oberta del calendari,
     i no amb una ratlla al voltant. */
  background:
    linear-gradient(90deg, rgba(194,30,51,.24), transparent 72%),
    var(--surf-card);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:background .2s, box-shadow .2s;
}
.rival-fixture-link:hover{
  background:
    linear-gradient(90deg, rgba(194,30,51,.34), transparent 72%),
    var(--surf-card);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11);
}
.rival-fixture-label{font-size:var(--txt-xs);letter-spacing:var(--track-xs);text-transform:uppercase;color:var(--or)}
.rival-fixture-when{font-size:.95rem;color:var(--cream);font-weight:600}
.rival-fixture-venue{
  font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(245,242,236,.45);
}

/* Les dues seccions del rival es pintaven la carta elles soles, amb el seu
   encoixinat (16-24 en comptes de 26-42), el seu radi (16) i el perfil
   d'1px. Ara són `.card` com les de la portada: la pàgina del rival és on
   s'acaba anant des del calendari i des de la portada, i arribar-hi i trobar
   un altre llenguatge és el que fa que el web sembli fet a trossos.

   El títol no va dins d'un `.section-head` —aquí és un <h2> sol—, o sigui
   que el seu aire el posa aquesta regla i no el de la carta. */
.rival-h2h{margin-bottom:clamp(22px,3.6vh,38px)}
.rival-h2h .section-title,.rival-all .section-title{
  display:block;margin-bottom:clamp(18px,2.8vh,26px);
  padding-bottom:clamp(13px,2vh,18px);
  border-bottom:1px solid rgba(245,242,236,.08);
}
/* A la pàgina, el bloc no repeteix els cinc últims: els té tots a sota. */
.rival-h2h .h2h-recent{display:none}
.rival-count{
  font-size:var(--txt-md);letter-spacing:var(--track-md);color:var(--or);
  vertical-align:middle;padding-left:4px;
}
.rival-all .h2h-all{padding-top:0;margin-top:0;border-top:0}

/* ── Res a ensenyar ── */
.empty{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:clamp(40px,8vh,80px) 20px;text-align:center;
}
.empty-text{color:rgba(245,242,236,.6);font-size:1rem}
.empty-cta{
  display:inline-flex;align-items:center;gap:9px;
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;color:var(--or);
  padding:10px 18px;border-radius:var(--r-pill);
  border:1px solid rgba(212,175,106,.3);
  transition:color .2s,border-color .2s;
}
.empty-cta:hover{color:var(--cream);border-color:rgba(245,242,236,.4)}

/* ── Col·laboradors ──
   Una fitxa per persona. Ara n'hi ha una de sola, i per això la graella té
   sostre: una caixa estirada als 1200px de la vista per dir quatre línies
   sembla una pàgina buida. Amb sostre, la fitxa té la mida del que explica i
   el dia que n'hi hagi una segona s'hi posa al costat sense tocar res. */
/* ── Contacte ──
   El formulari no es pinta aquí: viu a `/shared/contact.css`, que és el
   mateix full que carrega la porra. Això és només com seu a la pàgina. */
.contact{max-width:640px}
.contact-as{
  margin-bottom:18px;
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
  color:rgba(245,242,236,.5);
}
.contact-as b{color:var(--or);font-weight:600}

.credits{
  list-style:none;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:clamp(12px,2vw,20px);
  max-width:760px;
}
.credit{
  height:100%;
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:clamp(20px,2.8vw,30px);
  border-radius:var(--r-md);
  border:1px solid transparent;
  background:var(--surf-1);
  box-shadow:var(--shadow-card),var(--edge-hi);
}
/* La marca de qui col·labora, al costat del nom i no al damunt: la seva ja
   porta el nom escrit a dins, i posada gran competiria amb el títol de la
   pàgina. El fons negre del fitxer es fon amb el de la fitxa, i per això la
   vora: sense ella el logotip sura. */
.credit-head{display:flex;align-items:center;gap:14px}
.credit-logo{
  width:60px;height:60px;flex:none;
  border-radius:var(--r-md);object-fit:cover;
  border:1px solid transparent;
  background:#000;
}
.credit-role{
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;font-weight:600;
  color:var(--or);
}
.credit-name{
  font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.1;font-weight:700;
  letter-spacing:-.01em;color:var(--cream);
}
.credit-text{
  color:rgba(245,242,236,.62);font-size:clamp(.9rem,1.05vw,.98rem);line-height:1.6;
}
/* La crida de la fitxa: el mateix tracte que la de "res a ensenyar", que és
   l'altra pastilla del web que porta a fora. */
.credit-link{
  margin-top:auto;
  display:inline-flex;align-items:center;gap:9px;
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;color:var(--or);
  padding:10px 18px;border-radius:var(--r-pill);
  border:1px solid rgba(212,175,106,.3);
  transition:color .2s,border-color .2s;
}
.credit-link svg{width:15px;height:15px;flex:none}
.credit-link:hover{color:var(--cream);border-color:rgba(245,242,236,.4)}
.credit-link:hover .arrow{transform:translate(2px,-2px)}

/* ── Plantilla ── */
.squad-group{margin-bottom:clamp(28px,4.5vh,44px)}
.squad-group-title{
  display:flex;align-items:center;gap:10px;
  font-size:var(--txt-md);letter-spacing:var(--track-md);text-transform:uppercase;
  color:var(--or);font-weight:600;
  padding-bottom:10px;margin-bottom:clamp(12px,2vh,18px);
  border-bottom:1px solid rgba(245,242,236,.10);
}
.squad-group-count{
  font-size:var(--txt-xs);letter-spacing:var(--track-xs);
  color:rgba(245,242,236,.4);
  padding:2px 7px;border-radius:var(--r-pill);
  border:1px solid transparent;background:rgba(245,242,236,.06);
}

/* La graella deixa créixer la cel·la, però el cromo no: es queda a
   `--card-w` i es centra. Una carta estirada deixa de ser una carta. */
.squad{
  list-style:none;
  --card-w:250px;
  display:grid;gap:clamp(20px,2.6vw,34px);
  grid-template-columns:repeat(auto-fill,minmax(var(--card-w),1fr));
  justify-items:center;
}

/* ── El cromo ──
   Ve del servei de plantilla, que era una app a part. Tot el que hi ha a
   dins es mesura en `em` i el cos surt de `--card-w`: canviant només
   l'amplada, la carta es fa gran o petita sencera i sense retocar res.
   (250px de carta = 16px de cos, que és d'on surten totes les mides.) */
.player{
  width:var(--card-w);aspect-ratio:5/7;
  font-size:calc(var(--card-w) * .064);
  perspective:1600px;
}
/* El cromo sencer és l'enllaç a la fitxa. L'ancora ha de portar
   `preserve-3d`: la perspectiva de `.player` només arriba als seus fills
   directes, i sense això el cromo es tombaria pla —una rotació de dibuix
   animat en comptes d'una carta a la mà. */
.player-link{
  display:block;width:100%;height:100%;
  transform-style:preserve-3d;
  color:inherit;text-decoration:none;
}
.player-link:focus-visible{outline:2px solid var(--or);outline-offset:6px;border-radius:1.25em}

.player-card{
  position:relative;display:block;width:100%;height:100%;
  border-radius:1.25em;
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
  box-shadow:0 28px 64px -30px rgba(0,0,0,.9), 0 2px 8px rgba(0,0,0,.4);
}
.player-body{
  position:absolute;inset:0;border-radius:1.25em;overflow:hidden;
  transform:translateZ(0);
  background:linear-gradient(168deg,#211516 0%, #100c0c 55%, #0a0807 100%);
}

/* Sense foto, la marca fa de fons: quadrícula tènue i l'escut esvaït. */
.player-mark{
  position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(60% 45% at 50% 30%, rgba(194,30,51,.28), transparent 68%);
}
.player-mark::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background:
    linear-gradient(rgba(245,242,236,.03) 1px, transparent 1px) 0 0/100% 24px,
    linear-gradient(90deg, rgba(245,242,236,.03) 1px, transparent 1px) 0 0/24px 100%;
  -webkit-mask:radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 75%);
  mask:radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 75%);
}
.player-mark img{
  position:relative;width:52%;height:auto;
  opacity:.10;filter:grayscale(1) contrast(1.1);
}

/* El cromo és el jugador, i el jugador és la cara: la foto s'acosta fins que
   el cap ocupa prou carta perquè es reconegui d'un cop d'ull.

   La clau és que la foto va enganxada a dalt (`--fy` a 0 i, sobretot, el
   `transform-origin` a la vora de dalt): així el zoom només menja per baix i
   no hi ha manera que retalli cap cap. Amb el zoom centrat, les fotos que
   vénen sense gens d'aire quedaven decapitades.

   Qui posa la cara al mig no és aquest full: són els fitxers, que entren
   enquadrats tots igual —cap centrat, un pam de cel a sobre i el cap a una
   cinquena part de l'alçada (vegeu `tools/optimize_photos.py`)—. Mentre
   arribin així, el retall d'aquí val per a totes.

   Amb la vora de dalt clavada, el zoom ja no té risc i pot ser generós.
   `--fx/--fy/--fz` queden com el mando de cada foto: si algun dia n'entra
   una amb massa cel a sobre, pujar-li `--fy` la baixa dins del cromo. */
.player-photo{position:absolute;inset:0}
.player-photo img{
  width:100%;height:100%;object-fit:cover;
  object-position:var(--fx,50%) var(--fy,0%);
  transform:scale(var(--fz,1.3));transform-origin:50% 0;
}

/* El vel. Amb foto, la meitat de baix ha de quedar prou fosca perquè el nom
   i les xifres s'hi llegeixin sempre, tant si al darrere hi ha gespa al sol
   com si hi ha ombra. */
.player-scrim{
  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%);
}

/* El filet de la vora resegueix la silueta exacta de la carta, per això no
   s'aixeca: tot el que porta translateZ, la perspectiva l'engrandeix i el
   treu fora del cromo. Va al capdamunt per tancar també la vora del galó. */
/* I aquesta tampoc no és un perfil: emmarca una FOTO. Una imatge que arriba
   a la vora sense filet es vessa cap al fons, i a més aquest filet tanca la
   vora del galó. La regla de treure perfils val per a les superfícies. */
.player-frame{
  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);
}

.player-top{
  position:absolute;top:1.25em;left:1.25em;right:1.25em;z-index:6;
  transform:translateZ(40px);
  display:flex;justify-content:space-between;align-items:flex-start;
}
.player-logo{width:2.625em;height:2.625em;opacity:.96}
.player-logo img{width:100%;height:100%;object-fit:contain}
.player-top-right{display:flex;flex-direction:column;align-items:flex-end;gap:.5625em}
.player-season{text-align:right;line-height:1.1}
.player-season-label{
  display:block;font-size:.5em;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cream);margin-bottom:.5em;
}
.player-season-year{font-weight:600;font-size:1em;color:var(--cream)}
.player-info{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  padding:0 1.375em 1.25em;transform:translateZ(34px);
}
.player-idrow{display:flex;align-items:flex-end;justify-content:space-between;gap:.75em}
.player-name{min-width:0;line-height:1.02}
.player-first{
  display:block;font-weight:400;font-size:1em;color:var(--cream-2);
  text-shadow:0 1px 10px rgba(0,0,0,.7);
}
.player-last{
  display:block;font-weight:700;font-size:1.625em;letter-spacing:-.01em;
  color:var(--cream);word-break:break-word;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
/* Els cognoms llargs, més petits: el que reparteix l'ample de la fila és el
   dorsal, que no s'encongeix, i el que en queda no dóna per a un Menargues
   ni un Valderrama a mida sencera. El `word-break` de sobre queda de xarxa,
   per a un cognom que no hem vist encara. */
.player-last--llarg{font-size:1.375em}
.player-last--molt-llarg{font-size:1.1875em}
.player-num{
  flex:0 0 auto;font-weight:500;font-size:3em;line-height:.78;
  letter-spacing:-.02em;color:var(--grana-lite);
  text-shadow:0 2px 18px rgba(194,30,51,.32);
}
.player-position{
  margin-top:.5625em;
  font-size:.65625em;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--grana-soft);text-shadow:0 1px 8px rgba(0,0,0,.6);
}

.player-stats{
  margin-top:1em;padding-top:.8125em;
  border-top:1px solid rgba(245,242,236,.10);
  /* `minmax(0,1fr)` i no `1fr`: les sis caselles valen el mateix a tots els
     cromos, i una etiqueta més llarga que la seva part no se n'emporta l'espai
     de les veïnes —les xifres del porter han de quedar repartides igual que
     les del cromo del costat. */
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.25em;
}
/* Xifra a dalt i etiqueta a sota, però al marcatge la definició va després
   del terme, que és com s'escriu una llista de definicions. */
.player-stat{
  position:relative;
  display:flex;flex-direction:column-reverse;align-items:center;gap:.375em;
}
/* Un filet entre xifra i xifra: el bloc es llegeix com la taula del darrere
   d'un cromo imprès i no com cinc números posats de qualsevol manera. */
.player-stat+.player-stat::before{
  content:"";position:absolute;left:-2px;top:1px;bottom:1px;width:1px;
  background:rgba(245,242,236,.08);
}
.player-stat-value{
  font-weight:600;font-size:1.3125em;line-height:1;color:var(--cream);
  height:1em;display:flex;align-items:center;
}
/* Sis caselles i no cinc des que l'MVP és una xifra més: l'etiqueta
   s'estreny —lletra i espaiat— perquè "Imbatut" i "Partits" hi càpiguen
   al cromo del mòbil sense tocar-se amb la del costat. */
.player-stat-label{
  font-size:.4375em;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:var(--cream-2);white-space:nowrap;
  height:1.5em;display:flex;align-items:center;justify-content:center;gap:.35em;
}
.player-dot{width:.7em;height:1.1em;border-radius:.25em;display:inline-block;flex:none}
.player-dot--yellow{background:#ffcf3f}
.player-dot--red{background:var(--grana-lite)}

.player-foot{
  margin-top:.9375em;display:flex;justify-content:space-between;align-items:center;
  font-size:.53125em;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream-2);
}
.player-foot-right{color:var(--cream)}

/* ── La pestanya del rècord ──
   Qui lidera una xifra de la temporada porta una pestanya que surt per
   sobre de la vora de dalt, amb la icona i el nom del rècord, i la seva
   xifra subratllada a la fila del peu. Fora de la foto i sense tapar res:
   el cromo continua sent el cromo de sempre.

   Totes iguals: abans eren galons de metall —or per als gols, plata per a
   les assistències— i el metall deia que un rècord valia més que l'altre,
   que no és cert. El que distingeix un rècord d'un altre és la icona i el
   text. */
/* El color del rècord, en un sol lloc: la pestanya, la vora, el subratllat
   i el traç del mini cromo el llegeixen d'aquí. Va en components RGB perquè
   cada peça hi posa la seva transparència.

   Els tres mèrits van en plata —una de sola per als tres, que cap no val
   més que un altre— i les targetes en el seu color. Abans anava tot en
   grana, i el grana és el vermell de la targeta: un màxim golejador
   semblava un avís. I en or l'MVP es confonia amb el groc de les grogues. */
.rec--goals,.rec--assists,.rec--mvp{--rec:214,211,203}
.rec--yellow{--rec:255,207,63}
.rec--red{--rec:226,67,87}
.player-distincio{
  position:absolute;top:0;left:50%;z-index:12;
  transform:translate(-50%,-58%) translateZ(20px);
  display:inline-flex;align-items:center;gap:.6em;white-space:nowrap;
  padding:.55em 1.05em .55em .8em;border-radius:var(--r-pill);
  /* Vidre fosc amb llum a dalt: prou pes per llegir-se sobre qualsevol
     foto, sense ser una etiqueta de color. L'anella fosca de fora la
     separa de la vora del cromo, que és del mateix color. */
  background:linear-gradient(180deg,#2a1c1e,#140e0f);
  border:1px solid rgba(var(--rec),.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 3px rgba(10,9,8,.55), 0 8px 20px -8px rgba(0,0,0,.9);
  font-size:.5625em;
}
.player-distincio b{
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);
}
.player-distincio-ico{width:1.2em;height:1.2em;flex:none;color:rgb(var(--rec))}
.player-card--destacat .player-frame{border-color:rgba(var(--rec),.45)}
.player-stat--record .player-stat-label{color:var(--cream)}
.player-stat--record::after{
  content:"";position:absolute;left:24%;right:24%;bottom:-.4em;
  height:2px;border-radius:2px;background:rgb(var(--rec));
}

/* El reflex segueix el punter; el JS de `base.html` li passa on és. */
.player-sheen{
  position:absolute;inset:0;border-radius:1.25em;pointer-events:none;z-index:11;
  opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.13), transparent 45%);
}
.player:hover .player-sheen{opacity:1}

@media (max-width:560px){
  .squad{--card-w:270px;gap:22px}
}

/* ── La fitxa d'un jugador ──
   El darrere del cromo: qui és, què porta fet i d'on ve. El cromo hi torna a
   sortir tal com és a la llista —mateix macro i mateix full— i només se li
   deixa una mica més d'amplada: la fitxa és mirar-se'l de prop. */
.fitxa-tornar{margin-bottom:clamp(14px,2vh,20px)}
.fitxa-tornar-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--txt-md);letter-spacing:var(--track-md);text-transform:uppercase;
  color:var(--cream-2);text-decoration:none;
}
.fitxa-tornar-link:hover{color:var(--or)}

/* Cromo a l'esquerra i dades a la dreta mentre hi càpiguen; per sota, un
   sobre l'altre. El cromo no s'estira: es queda a la seva amplada i el que
   creix és la columna de les dades. */
.fitxa-cap{
  display:flex;flex-wrap:wrap;align-items:flex-start;
  gap:clamp(22px,3.4vw,44px);
  margin-bottom:clamp(30px,4.5vh,48px);
}
.fitxa-cromo{--card-w:290px;flex:0 0 auto;display:block;list-style:none}
.fitxa-qui{flex:1 1 300px;min-width:0}
.fitxa-nom{
  font-size:clamp(1.9rem,4.6vw,2.8rem);font-weight:700;line-height:1.04;
  letter-spacing:-.02em;color:var(--cream);
  margin-bottom:clamp(18px,2.6vh,26px);
}

/* Les dades, en columnes que s'ajusten: cadascuna és una etiqueta petita amb
   la seva resposta a sota, com el darrere d'un cromo imprès.

   Van en flex i no en graella perquè una graella deixa el forat de l'última
   fila quan les dades no fan un compte rodó —quatre columnes i cinc dades— i
   aquell tros de plafó buit al costat de l'última es veu com una taca. Amb
   `flex:1 1` les que hi ha s'estiren fins a omplir la fila i no hi ha res a
   dissimular: la darrera dada és tan ampla com calgui.

   Els filets els dibuixa cada dada per dins (`inset`) i no la separació
   entre elles, que és el que abans pintava la taca: el que hi ha al mig de
   dues dades és el filet, i prou. */
.fitxa-dades{
  display:flex;flex-wrap:wrap;
  background:#100b0c;
  border:1px solid var(--hairline);border-radius:var(--r-md);overflow:hidden;
}
.fitxa-dada{
  flex:1 1 170px;min-width:170px;padding:14px 16px;
  box-shadow:inset -1px 0 var(--hairline), inset 0 -1px var(--hairline);
}
.fitxa-dada-etiqueta{
  display:block;margin-bottom:6px;
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;color:var(--or);
}
.fitxa-dada-valor{font-size:.98rem;color:var(--cream);line-height:1.35}

.fitxa-seccio{margin-bottom:clamp(24px,4vh,40px)}

/* La taula pot ser més ampla que un mòbil: es desplaça dins de la seva caixa
   en comptes de perdre columnes o de fer scroll la pàgina sencera. */
.traj-caixa{
  overflow-x:auto;
  border:1px solid var(--hairline);border-radius:var(--r-md);
  background:var(--surf-1);box-shadow:var(--edge-hi);
}
.traj{width:100%;border-collapse:collapse;min-width:480px}
.traj th,.traj td{padding:11px 14px;text-align:left;white-space:nowrap}
.traj thead th{
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
  font-weight:600;color:var(--or);
  border-bottom:1px solid var(--hairline);
  font-family:'Space Grotesk',sans-serif;
}
.traj tbody tr+tr td{border-top:1px solid rgba(245,242,236,.06)}
.traj-temporada{color:var(--cream-2);font-size:.85rem}
/* L'equip s'ho queda tot el que sobra i les xifres es lligen juntes a la
   dreta: escampades per l'amplada de la taula no es comparen. */
.traj-equip{width:100%}
.traj-equip-nom{display:block;color:var(--cream);font-size:.95rem}
.traj-categoria{
  display:block;margin-top:3px;
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;color:var(--cream-2);
}
/* Les xifres, a la dreta i totes de la mateixa amplada: així es comparen
   columna avall sense haver-les de llegir.

   El selector porta l'element (`td`/`th`) a posta: `.traj td` ja diu
   `text-align:left` i, amb només la classe, la regla d'alinear-les perdia per
   especificitat i les xifres queien a l'esquerra de la seva columna. */
.traj td.traj-xifra,.traj th.traj-xifra{text-align:right}
.traj-xifra{font-variant-numeric:tabular-nums;color:var(--cream)}
.traj thead .traj-xifra .player-dot{margin-right:5px;vertical-align:-2px}

/* La temporada que s'està jugant no és una fila tancada: es marca amb el
   grana del club perquè es vegi que encara s'hi està escrivint. */
.traj-ara td{background:rgba(194,30,51,.10)}
.traj-ara .traj-equip-nom{color:var(--grana-soft);font-weight:600}

.traj tfoot th,.traj tfoot td{
  border-top:1px solid var(--hairline);
  background:rgba(245,242,236,.03);font-weight:600;
}
.traj-total{
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;color:var(--or);
}

.fitxa-nota{
  margin-top:12px;font-size:.82rem;line-height:1.5;color:var(--cream-2);
}

@media (max-width:560px){
  .fitxa-cromo{--card-w:270px;margin:0 auto}
  .traj th,.traj td{padding:10px 12px}
}

/* ── Joc de memòria ──
   Les cartes són el cromo en petit: el mateix dors amb la marca, la mateixa
   foto i el mateix retall enganxat a dalt. Aquí, però, la carta gira de debò
   (dues cares i `backface-visibility`), que és el gest del joc. */
.memory{
  margin-bottom:clamp(30px,5vh,50px);
  padding:clamp(18px,2.6vw,26px);
  border:1px solid transparent;border-radius:var(--r-lg);
  background:
    /* El mateix halo que `.card`: radi vertical en píxels perquè no es
       giri quan el bloc es fa alt i estret al mòbil. */
    radial-gradient(130% 260px at 50% -30px, rgba(212,175,106,.09), transparent 70%),
    var(--surf-1);
  box-shadow:var(--edge-hi);
  /* Jugant, la secció canvia de mida sola (reparteix, gira, acaba). Que el
     navegador no ho "arregli" desplaçant la pàgina: l'encaix el fa el joc. */
  overflow-anchor:none;
}
.memory-head{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.memory-eyebrow{font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;color:var(--or)}
.memory-title{
  margin-top:7px;font-weight:700;letter-spacing:-.015em;
  font-size:clamp(1.2rem,2.4vw,1.7rem);line-height:1.05;color:var(--cream);
}
.memory-lede{margin-top:8px;max-width:56ch;font-size:.88rem;line-height:1.5;color:var(--cream-2)}

/* Jugant, tot el que explica el joc sobra: el que fa falta és alçada perquè
   el tauler càpiga sencer sense haver de baixar. La marca va a la pàgina i no
   a la secció perquè també s'hi replega la capçalera, que és a fora. Torna tot
   en acabar la partida. */
.view--playing .page-head{display:none}
.view--playing .memory-lede{display:none}
.view--playing .memory-eyebrow{display:none}
.view--playing .memory-title{margin-top:0;font-size:clamp(1rem,2vw,1.25rem)}
.view--playing .memory-hud{margin-top:12px;padding-top:10px}
.view--playing .memory-board{margin-top:12px}

.memory-scores{text-align:right;flex:0 0 auto}
/* Al mòbil la capçalera no cap en una fila —l'entradeta i el "rècord 1150
   punts" sumen més que l'ample— i el rellotge acabava penjat al mig de la
   pàgina, alineat a la dreta d'una caixa que ja no toca cap vora. Baixa a una
   fila seva, a l'esquerra i amb el rècord al costat.

   Només mentre NO es juga: jugant, l'entradeta desapareix i el títol es fa
   petit, la fila hi cap de sobres, i baixar el rellotge costaria una línia de
   l'alçada que el tauler necessita per cabre sencer. */
@media (max-width:560px){
  .view:not(.view--playing) .memory-head{flex-direction:column;gap:12px}
  .view:not(.view--playing) .memory-scores{
    display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;
  }
  .view:not(.view--playing) .memory-best{margin-top:0}
}
.memory-clock{
  font-weight:700;font-size:clamp(1.7rem,4vw,2.4rem);line-height:1;
  color:var(--cream);transition:color .3s;
}
.memory-clock--urgent{color:var(--grana-soft)}
/* Memoritzant, el rellotge presta el seu lloc al compte enrere: és el número
   més gran de la secció i és on ja es mira el temps. Daurat per no confondre'l
   amb el del joc, i amb un batec a cada segon perquè es vegi de cua d'ull. */
.memory-clock--peek{color:var(--or)}
.memory-clock--tick{animation:memory-tick .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes memory-tick{
  0%{transform:scale(1.3);text-shadow:0 0 22px rgba(212,175,106,.85)}
  100%{transform:scale(1);text-shadow:none}
}
.memory-best{margin-top:5px;font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;color:var(--or)}

.memory-hud{
  display:flex;align-items:center;gap:clamp(12px,2vw,20px);flex-wrap:wrap;
  margin-top:18px;padding-top:14px;
  border-top:1px solid rgba(245,242,236,.10);
}
.memory-stat{
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;color:rgba(245,242,236,.5);
}
.memory-stat b{
  display:inline-block;margin-left:6px;
  font-size:1.05rem;font-weight:700;color:var(--cream);
}
.memory-stat--points b{font-size:1.3rem;color:var(--or)}
/* La ratxa: què valdrà el pròxim encert. Apagada mentre no n'hi ha cap
   —al començament i just després de fallar— i encesa mentre dura, que és
   quan hi ha alguna cosa a perdre. */
.memory-stat--ratxa b{color:rgba(245,242,236,.55);transition:color .2s}
.memory-stat--viva b{color:var(--or)}
.memory-stat--viva{color:rgba(212,175,106,.75)}
/* Els punts fan un bot en pujar: el número canvia massa de pressa perquè es
   noti tot sol, i el premi s'ha de veure. */
.memory-stat--bump b{animation:memory-bump .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes memory-bump{
  0%{transform:scale(1)}
  35%{transform:scale(1.45);text-shadow:0 0 18px rgba(212,175,106,.8)}
  100%{transform:scale(1)}
}
/* El missatge empeny el botó a la dreta i s'endú l'espai que sobra. Va en una
   sola línia i sempre ocupa el mateix: canvia de text cada segon mentre es
   memoritza, i si es reajustés la fila el navegador ho compensaria movent la
   pàgina —el tauler marxava de la pantalla tot sol. */
.memory-msg{
  flex:1 1 auto;min-width:12ch;min-height:1.3em;
  font-size:.82rem;color:var(--or);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:640px){
  /* Amb els comptadors al costat no li queda ample per dir res: línia pròpia. */
  .memory-msg{flex:1 0 100%;order:3}
}
.memory-start{
  flex:0 0 auto;
  font-family:inherit;font-size:var(--txt-md);letter-spacing:var(--track-md);text-transform:uppercase;
  font-weight:600;color:var(--ink);background:var(--or);
  padding:11px 22px;border:0;border-radius:var(--r-pill);cursor:pointer;
  transition:transform .2s, box-shadow .2s, background .2s;
}
.memory-start:hover{background:#e7c98c;transform:translateY(-1px);box-shadow:0 10px 24px -14px rgba(212,175,106,.9)}
.memory-start[hidden]{display:none}

/* ── La portada del joc ──
   El que hi ha mentre no s'ha jugat cap partida: tres dorsos, el botó i una
   línia. Sense això, arribar a la pàgina era trobar-se una caixa buida amb un
   marcador a zero, que és el que sembla un joc espatllat. */
.memory-cover{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(14px,2.2vh,20px);
  margin-top:clamp(18px,3.2vh,30px);
}
/* Tres cartes escampades com les deixaria algú a la taula. Són el mateix dors
   que les del tauler —mateixa forma, mateix filet, mateixa marca— perquè el
   que s'ensenya aquí és exactament el que sortirà en començar. */
.memory-cover-deck{display:flex;justify-content:center;align-items:flex-end}
.memory-cover-card{
  display:grid;place-items:center;
  width:clamp(48px,7vw,64px);aspect-ratio:5/7;
  border-radius:var(--r-md);border:1px solid transparent;
  background:
    radial-gradient(70% 55% at 50% 40%, rgba(194,30,51,.34), transparent 70%),
    linear-gradient(168deg,#241618,#0f0b0c 60%,#0a0807);
  box-shadow:0 22px 30px -24px #000;
}
.memory-cover-card img{width:52%;height:auto;opacity:.45;filter:grayscale(1) contrast(1.1)}
/* Les de fora, tombades i una mica avall; la del mig, dreta i al davant. */
.memory-cover-card:first-child{transform:rotate(-9deg) translateY(7px);margin-right:-12px}
.memory-cover-card:nth-child(2){z-index:1;transform:translateY(-5px)}
.memory-cover-card:last-child{transform:rotate(9deg) translateY(7px);margin-left:-12px}
.memory-cover-note{
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;text-align:center;
  color:rgba(245,242,236,.42);
}
@media (max-width:560px){
  /* Amb l'ample just, els dorsos s'encavalquen massa i el del mig se'ls menja:
     una mica més grans i una mica més separats. */
  .memory-cover-card{width:56px}
  .memory-cover-card:first-child{margin-right:-9px}
  .memory-cover-card:last-child{margin-left:-9px}
}
/* Dins de la portada el botó no porta el seu marge: l'aire el reparteix la
   columna, que si no en tindria el doble per sobre. */
.memory-cover .memory-play{margin-top:0}

/* Jugant no hi ha portada: el que fa falta és alçada perquè el tauler càpiga
   sencer. */
.view--playing .memory-cover{display:none}
/* Feta la primera partida, la portada ja ha explicat el que havia d'explicar
   i el marcador diu coses de debò: se'n van els dorsos i la línia, i entren
   els comptadors. */
.memory--played .memory-cover-deck,
.memory--played .memory-cover-note{display:none}
.memory:not(.memory--played) .memory-hud{display:none}
/* I el rellotge, mentre no corre, apagat: aturat als quaranta-cinc segons és
   decoració, i en blanc i a aquesta mida li guanyava el pols al botó. S'encén
   sol quan comença a comptar. */
.memory:not(.memory--played) .memory-clock{color:rgba(245,242,236,.42)}

/* El botó de la pàgina (el del diàleg es queda com estava).
   Jugar és l'única cosa que ha vingut a fer qui obre això, i la pastilla
   petita al final de la fila dels comptadors no ho deia: entre el rellotge i
   els punts semblava un control més del marcador. Sol, ample i al mig del lloc
   on sortiran les cartes, ja no s'ha de buscar. */
.memory-play{
  position:relative;
  display:block;width:min(100%,340px);
  margin:clamp(16px,2.6vh,24px) auto 0;
  padding:17px 30px;font-size:13px;letter-spacing:.22em;
  box-shadow:0 16px 34px -18px rgba(212,175,106,.95);
}
.memory-play:hover{transform:translateY(-2px);box-shadow:0 18px 38px -16px rgba(212,175,106,1)}
/* Un halo que batega a fora del botó. Va en un pseudoelement i no al mateix
   botó perquè una animació sobre l'ombra guanyaria sempre a la del `:hover`,
   i llavors passar-hi el ratolí no faria res. */
.memory-play::after{
  content:"";position:absolute;inset:-6px;border-radius:var(--r-pill);
  border:1px solid rgba(212,175,106,.4);pointer-events:none;
  animation:memory-call 2.8s ease-in-out infinite;
}
@keyframes memory-call{
  0%,100%{opacity:0;transform:scale(.97)}
  50%{opacity:1;transform:scale(1.03)}
}
@media (prefers-reduced-motion:reduce){
  .memory-play::after{animation:none;opacity:0}
}

/* Quatre en línia: dues files de sis serien una tira, i tres files de quatre
   es llegeixen com un tauler. Al mòbil, tres columnes: amb quatre, l'ample
   de la pantalla deixaria les cartes massa petites per veure-hi una cara.

   `--cols` el llegeix el JS per saber quantes files li surten, i `--card-w`
   el hi torna ell un cop ha mesurat què hi cap. Mentre no ho ha fet, les
   columnes reparteixen l'ample com sempre. */
.memory-board{
  --cols:4;
  display:grid;grid-template-columns:repeat(var(--cols),var(--card-w,1fr));
  justify-content:center;
  gap:clamp(8px,1.4vw,14px);margin-top:18px;
}
/* Buit no s'amaga, només es queda sense alçada ni marge: amagar-lo el deixava
   sense caixa i el JS no podia mesurar ni què hi cap ni on comença. */
.memory-board:empty{margin-top:0}
@media (max-width:640px){ .memory-board{--cols:3} }

.memory-card{
  aspect-ratio:5/7;padding:0;border:0;background:none;
  perspective:900px;cursor:pointer;
}
.memory-card:disabled{cursor:default}
.memory-inner{
  position:relative;display:block;width:100%;height:100%;
  transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.9,.3,1);
}
/* De cara: la carta ensenya el davant. Girada, el dors. */
.memory-card--up .memory-inner{transform:rotateY(180deg)}
.memory-face{
  position:absolute;inset:0;overflow:hidden;border-radius:var(--r-md);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  /* Emmarca una foto, com `.player-frame`. */
  border:1px solid rgba(245,242,236,.14);
}
.memory-back{
  display:grid;place-items:center;
  background:
    radial-gradient(70% 55% at 50% 40%, rgba(194,30,51,.34), transparent 70%),
    linear-gradient(168deg,#241618,#0f0b0c 60%,#0a0807);
}
.memory-back img{width:52%;height:auto;opacity:.5;filter:grayscale(1) contrast(1.1)}
.memory-card:not(:disabled):hover .memory-back{border-color:rgba(212,175,106,.5)}
.memory-front{
  transform:rotateY(180deg);
  background:linear-gradient(168deg,#211516,#100c0c 60%,#0a0807);
}
/* El mateix retall que el cromo: enganxat a dalt, que és l'única manera que
   cap foto hi perdi el cap. */
.memory-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 0;
  transform:scale(1.15);transform-origin:50% 0;
}
.memory-front::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%, rgba(8,6,6,.86) 82%, #080606 100%);
}
.memory-name{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:0 7px 7px;text-align:center;
  font-size:clamp(8px,1.1vw,10px);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--cream);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Encertada: es queda de cara, apagada i amb el filet d'or. Ja no és feina
   pendent, però ha de continuar ensenyant qui era. */
.memory-card--done{opacity:.55}
.memory-card--done .memory-front{border-color:rgba(212,175,106,.75)}

/* El cop de llum de l'encert. Va a la carta sencera i no a la cara, que amb
   el gir de 180° la cara es mou i l'aurèola quedaria del revés. */
.memory-card--hit{animation:memory-hit .6s ease-out}
@keyframes memory-hit{
  0%{transform:scale(1);filter:none}
  30%{transform:scale(1.07);filter:brightness(1.5) saturate(1.2)}
  100%{transform:scale(1);filter:none}
}
.memory-card--hit .memory-front{
  box-shadow:0 0 0 2px var(--or), 0 0 30px -4px rgba(212,175,106,.9);
}

/* El pin de +25: surt al mig de la parella encertada i puja fent-se fonedís.
   No para el joc ni tapa res, que el rellotge corre. */
.memory-board{position:relative}
.memory-pin{
  position:absolute;z-index:20;pointer-events:none;
  display:flex;align-items:center;gap:6px;
  padding:6px 12px 6px 7px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,#FBEBC0,#D9B66F 45%,#B98F3C);
  box-shadow:0 8px 22px -8px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.6);
  transform:translate(-50%,-50%);
  animation:memory-pin 1.1s cubic-bezier(.2,.8,.3,1) forwards;
}
.memory-pin img{width:20px;height:20px;object-fit:contain}
.memory-pin b{font-size:14px;font-weight:700;color:#241704;letter-spacing:.02em}
/* En ratxa el pin creix i s'escalfa: la xifra ja és més gran, i que a més ho
   sembli és el que fa que encadenar encerts s'ENGANXI. */
.memory-pin--ratxa{
  padding:7px 14px 7px 8px;
  background:linear-gradient(180deg,#FFF3D2,#E9C067 45%,#C4922F);
  box-shadow:0 10px 26px -8px rgba(0,0,0,.9),
             inset 0 1px 0 rgba(255,255,255,.7),
             0 0 26px -4px rgba(212,175,106,.65);
}
.memory-pin--ratxa b{font-size:16px}
@keyframes memory-pin{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  25%{opacity:1;transform:translate(-50%,-60%) scale(1.1)}
  45%{transform:translate(-50%,-62%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-150%) scale(.95)}
}

/* La barra de memoritzar: es buida a la vora de dalt del tauler, on es miren
   les cartes. Va absoluta i al gap de sobre (no ocupa lloc ni tapa cap cara):
   si empenyés el tauler, l'alçada que el joc ha mesurat ja no seria la seva. */
.memory-peek{
  position:absolute;left:0;top:-8px;height:3px;z-index:20;
  border-radius:var(--r-pill);pointer-events:none;
  background:linear-gradient(90deg,rgba(212,175,106,.35),var(--or));
  box-shadow:0 0 14px -2px rgba(212,175,106,.7);
  animation:memory-peek linear forwards;
}
@keyframes memory-peek{
  0%{width:100%}
  100%{width:0}
}

/* ── El final de la partida ──
   El temps s'acaba mirant el tauler, i les cartes destapant-se soles no diuen
   prou: el resum surt al davant i amb el botó de tornar-hi. */
.memory-over{
  margin:auto;padding:clamp(22px,3vw,32px);
  max-width:min(92vw,380px);width:max-content;
  border:1px solid rgba(212,175,106,.4);border-radius:var(--r-lg);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(212,175,106,.16), transparent 62%),
    var(--surf-1);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95), var(--edge-hi);
  color:var(--cream);text-align:center;
  animation:memory-over .35s cubic-bezier(.2,1.1,.35,1);
}
.memory-over::backdrop{background:rgba(6,6,8,.72);backdrop-filter:blur(3px)}
@keyframes memory-over{
  0%{opacity:0;transform:translateY(14px) scale(.96)}
  100%{opacity:1;transform:none}
}
.memory-over-eyebrow{
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
  color:rgba(245,242,236,.5);
}
.memory-over-eyebrow--record{color:var(--or)}
.memory-over-title{
  margin-top:8px;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.4rem,3.4vw,1.9rem);line-height:1;
}
.memory-over-score{margin-top:16px;font-size:var(--txt-md);letter-spacing:var(--track-md);text-transform:uppercase;color:rgba(245,242,236,.55)}
.memory-over-score b{
  display:block;margin-bottom:2px;
  font-size:clamp(2.6rem,8vw,3.4rem);font-weight:700;line-height:1;color:var(--or);
  letter-spacing:-.02em;
}
/* On et deixa la partida. En acabar-ne una, "quin lloc he fet" es pregunta
   tant com "quants punts": per això va en gran i emmarcat, i no de peu de
   pàgina. El `display:flex` obliga a apagar-lo a mà quan ve amagat. */
.memory-over-rank{
  margin-top:16px;padding:12px 18px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  border:1px solid rgba(212,175,106,.28);border-radius:var(--r-md);
  background:rgba(212,175,106,.07);
}
.memory-over-rank[hidden]{display:none}
.memory-over-rank-label{
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
  color:rgba(245,242,236,.5);
}
.memory-over-rank b{
  font-size:clamp(1.9rem,6vw,2.4rem);font-weight:700;line-height:1.05;
  letter-spacing:-.02em;color:var(--cream);
}
.memory-over-rank-of{
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
  color:rgba(245,242,236,.45);
}
.memory-over-detail{
  margin-top:12px;min-height:1.2em;
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;color:rgba(245,242,236,.45);
}
/* Què en queda desat. Més fluix que el detall i en minúscula: és la lletra
   petita de la partida, no el seu resultat. */
.memory-over-note{
  margin-top:8px;
  font-size:var(--txt-md);letter-spacing:var(--track-md);color:rgba(245,242,236,.38);
  line-height:1.5;
}
.memory-over-actions{
  margin-top:24px;display:flex;align-items:center;justify-content:center;
  gap:16px;flex-wrap:wrap;
}
/* La segona sortida: anar a veure la classificació. Va discreta i al costat
   de "Tornar a jugar", que és el que vol la majoria de qui acaba de jugar;
   dos botons massissos es disputarien el clic i no en guanyaria cap. */
.memory-sortir{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:var(--r-pill);
  border:1px solid rgba(245,242,236,.22);
  background:none;color:rgba(245,242,236,.7);
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
  cursor:pointer;transition:color .2s,border-color .2s,background .2s;
}
.memory-sortir:hover{
  color:var(--or);border-color:rgba(212,175,106,.5);
  background:rgba(212,175,106,.08);
}
.memory-sortir:hover .arrow{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .memory-inner{transition:none}
  .memory-card--hit{animation:none}
  .memory-stat--bump b{animation:none}
  .memory-clock--tick{animation:none}
  .memory-over{animation:none}
}

/* ── Les pestanyes del joc ──
   Les regles i la classificació comparteixen lloc sota el tauler: les primeres
   es llegeixen una vegada i la segona es mira sempre, i posades una sota
   l'altra qui ja sap jugar es passava el text pel damunt cada vegada.

   Es pinten com les de la closca (`shared/css/shell.css`) perquè una pestanya
   ha de ser la mateixa cosa a tot arreu, però amb classe pròpia: les `.tab`
   d'allà les mana el JS de la barra i aquestes són de la pàgina. */
.game-tabs{margin-bottom:clamp(30px,5vh,50px)}
.game-tabs-bar{
  display:flex;gap:clamp(16px,2.2vw,30px);
  margin-bottom:clamp(16px,2.6vh,24px);
  border-bottom:1px solid rgba(245,242,236,.10);
  overflow-x:auto;scrollbar-width:none;
}
.game-tabs-bar::-webkit-scrollbar{display:none}
.game-tab{
  flex:0 0 auto;
  font-family:'Space Grotesk',sans-serif;font-size:var(--txt-md);letter-spacing:var(--track-md);
  text-transform:uppercase;padding:10px 2px;
  background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  color:rgba(245,242,236,.5);cursor:pointer;white-space:nowrap;
  transition:color .2s,border-color .2s;
}
.game-tab:hover{color:var(--or)}
.game-tab[aria-selected="true"]{color:var(--cream);border-bottom-color:var(--or)}
/* Dins de la pestanya el marge de baix el posa el contenidor: si el deixessin
   posat, la pàgina acabaria amb el doble d'aire. */
.game-panel{margin-bottom:0}
.game-panel[hidden]{display:none}
/* El panell rep el focus en canviar de pestanya (és com s'hi arriba amb el
   teclat), però només s'ha de veure quan es navega amb teclat. */
.game-panel:focus{outline:none}
.game-panel:focus-visible{
  outline:2px solid rgba(212,175,106,.6);outline-offset:8px;border-radius:var(--r-md);
}

/* ── Classificació del joc ──
   La millor partida de cadascú. Es veu encara que no hi juguis: és el que
   explica de què va abans d'entrar-hi. La teva fila va marcada en grana per
   trobar-t'hi sense llegir la llista sencera. */
.ranking{margin-bottom:clamp(30px,5vh,50px)}
.ranking-note{
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
  color:rgba(245,242,236,.45);
}
.ranking-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.ranking-row{
  display:flex;align-items:center;gap:clamp(10px,2vw,16px);
  padding:10px clamp(12px,2vw,18px);
  border:1px solid transparent;border-radius:var(--r-md);
  background:var(--surf-1);box-shadow:var(--edge-hi);
}
.ranking-row--me{
  border-color:rgba(194,30,51,.45);
  background:
    linear-gradient(90deg, rgba(194,30,51,.16), transparent 55%),
    var(--surf-1);
}
.ranking-pos{
  flex:0 0 auto;min-width:2ch;text-align:right;
  font-size:var(--txt-md);letter-spacing:var(--track-md);color:rgba(245,242,236,.45);
}
/* El podi es distingeix del gruix de la llista, i prou: tres colors i avall.
   El primer, a més, amb un bany d'or que s'apaga cap a la dreta: una llista
   de deu files iguals no diu qui mana, i pintar-ne tres de diferents faria
   que el podi pesés més que la llista. Si el primer ets tu, mana el grana:
   trobar-t'hi és el que fa servei. */
.ranking-row:nth-child(1):not(.ranking-row--me){
  border-color:rgba(212,175,106,.30);
  background:
    linear-gradient(90deg, rgba(212,175,106,.13), transparent 55%),
    var(--surf-1);
}
.ranking-row:nth-child(1) .ranking-pos{color:var(--or)}
.ranking-row:nth-child(2) .ranking-pos{color:rgba(245,242,236,.8)}
.ranking-row:nth-child(3) .ranking-pos{color:#c8926a}
.ranking-face{flex:0 0 auto;display:block;width:28px;height:28px}
.ranking-face img,.ranking-initial{
  width:28px;height:28px;border-radius:50%;object-fit:cover;display:block;
}
.ranking-initial{
  display:flex;align-items:center;justify-content:center;
  background:var(--grana);color:var(--paper);
  font-size:11px;font-weight:700;text-transform:uppercase;
}
.ranking-name{
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.95rem;color:var(--cream);
}
.ranking-points{
  flex:0 0 auto;font-weight:700;font-size:1.05rem;color:var(--or);
}
.ranking-empty{
  padding:22px 0;text-align:center;
  font-size:var(--txt-md);letter-spacing:var(--track-md);text-transform:uppercase;
  color:rgba(245,242,236,.4);
}
.ranking-empty[hidden]{display:none}

/* Que la llista talla als deu. Sense dir-ho sembla que hi surt tothom qui ha
   jugat, i llavors una llista curta fa pensar que el joc no el fa servir
   ningú. */
.ranking-cut{
  margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(245,242,236,.08);
  text-align:center;
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
  color:rgba(245,242,236,.38);
}

/* ── Com es juga ──
   Hi és sempre, també per a qui encara no ha entrat: la classificació sense
   explicació és una llista de noms amb números. */
.howto{margin-bottom:clamp(30px,5vh,50px)}
.howto-steps{
  list-style:none;display:grid;gap:12px;margin-top:16px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.howto-step{
  display:flex;gap:12px;align-items:flex-start;
  padding:16px 18px;border-radius:var(--r-md);
  border:1px solid transparent;
  background:var(--surf-1);
  box-shadow:var(--edge-hi);
}
.howto-step p{font-size:.92rem;line-height:1.5;color:rgba(245,242,236,.72)}
.howto-step b{color:var(--cream);font-weight:600}
/* El número és el que fa que es llegeixi com uns passos i no com quatre
   caixes soltes. */
.howto-num{
  flex:0 0 auto;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(212,175,106,.45);
  color:var(--or);font-size:11px;font-weight:700;
}

/* ── Antecedents ──
   Com hem anat sempre contra aquest rival. Surt resumit a la portada (dins
   de la propera jornada) i sencer a la pàgina del rival.

   Els tres colors de resultat són els mateixos que el resum de temporada i
   es declaren igual, amb `--c` per peça: el verd d'aquí ha de ser el mateix
   verd que el d'allà o semblarà que parlen de coses diferents. */
/* La paleta dels tres resultats. Va també a `.h2h-all` perquè a la pàgina
   del rival la llista de precedents viu fora del bloc d'antecedents, i sense
   això les files es quedaven sense color. */
.h2h,.h2h-all{--win:#7bbe7b;--draw:var(--or);--loss:var(--grana-lite)}
.h2h{display:flex;flex-direction:column;gap:clamp(14px,2.2vh,20px);width:100%}
/* El balanç a l'esquerra i les dades a la dreta. La columna del balanç té
   l'amplada que li cal i no la meitat de la carta: amb dues columnes iguals,
   una sola dada de 44 píxels d'alt deixava un forat de 219 al costat d'un
   balanç de 263, i aquell buit és el que fa que una carta ampla sembli mal
   aprofitada. */
.h2h-figures{
  display:grid;gap:clamp(16px,2.8vw,32px);
  grid-template-columns:minmax(260px,400px) minmax(0,1fr);
  align-items:start;
}
@media (max-width:760px){
  .h2h-figures{grid-template-columns:minmax(0,1fr)}
}
.h2h-split{display:flex;flex-direction:column;gap:clamp(12px,1.8vh,16px);min-width:0}

/* La frase de recanvi: quan no hi ha prou partits per repartir-los en tres
   xifres, el balanç no es pinta i el que ho explica és una frase. */
.h2h-headline{
  font-size:clamp(.98rem,1.5vw,1.12rem);line-height:1.35;
  color:var(--cream);font-weight:600;text-wrap:balance;
}

/* ── El balanç ──
   El resum de tot el bloc: guanyats, empats i perduts, i la barra que els
   reparteix. Una sola caixa amb tres columnes i no tres caixes: el que se'n
   vol fer és comparar-les, i tres targetes separades es llegien com tres
   dades independents.

   Les etiquetes van a sobre de les xifres. Abans anaven a peu de bloc, en
   una llegenda de vuit píxels que deia quin color era quin, i per llegir un
   "9 · 15 · 12" calies mirar dues vegades. */
.h2h-balance{
  display:flex;flex-direction:column;gap:11px;min-width:0;
  padding:clamp(14px,2vw,18px) clamp(15px,2.2vw,20px) clamp(15px,2.2vw,19px);
  border-radius:var(--r-md);
  border:1px solid transparent;
  background:rgba(245,242,236,.045);
}
/* De què parla el balanç i de quants partits: una xifra sense saber sobre
   quants compta no es pot llegir. */
.h2h-scope{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:6px 14px;flex-wrap:wrap;
  font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
}
.h2h-scope-where{color:var(--or)}
.h2h-scope-meta{color:rgba(245,242,236,.38);white-space:nowrap}
.h2h-scope-sep{padding:0 2px}
.h2h-scope-rate{color:rgba(245,242,236,.6)}

.h2h-tally{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.h2h-tally-cell{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:2px 4px;min-width:0;
}
/* Una ratlla entre columnes i no una vora per columna: el que separa les
   tres xifres és el mínim que les separa. */
.h2h-tally-cell + .h2h-tally-cell{border-left:1px solid rgba(245,242,236,.08)}
.h2h-tally-label{
  font-size:8px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,242,236,.42);
}
.h2h-tally-num{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(1.55rem,3.6vw,2.05rem);font-weight:700;line-height:1;
  color:var(--c);font-variant-numeric:tabular-nums;
}
/* El zero es queda sense color: no és cap resultat, és l'absència. */
.h2h-tally-num.is-nil,.h2h-n.is-nil{color:rgba(245,242,236,.26)}
.h2h-tally-cell--win{--c:var(--win)}
.h2h-tally-cell--draw{--c:var(--draw)}
.h2h-tally-cell--loss{--c:var(--loss)}

/* La barra: la mateixa peça al balanç i a les files de camp, perquè és la
   mateixa cosa dita sobre llistes diferents. */
.h2h-bar{
  display:flex;height:8px;border-radius:var(--r-pill);overflow:hidden;
  background:rgba(245,242,236,.07);min-width:0;
}
.h2h-balance .h2h-bar{height:10px}
.h2h-seg{display:block;height:100%;min-width:3px}
.h2h-seg--win{background:var(--win)}
.h2h-seg--draw{background:var(--draw)}
.h2h-seg--loss{background:var(--loss)}

/* ── El repartiment per camp ──
   Sota el balanç i amb la mateixa lletra petita que la resta de marges: no
   és una segona portada, és el detall de la de dalt. La taula reparteix les
   columnes una sola vegada per a totes les files, que és el que fa que les
   barres arrenquin del mateix punt. */
.h2h-summary{width:100%;border-collapse:separate;border-spacing:0 7px}
.h2h-summary td,.h2h-summary th{padding:0;vertical-align:middle}
.h2h-row-camp{
  font-size:var(--txt-xs);letter-spacing:var(--track-xs);text-transform:uppercase;font-weight:400;
  color:rgba(245,242,236,.45);text-align:left;white-space:nowrap;
  padding-right:12px !important;
}
.h2h-row-tally{
  font-size:11px;white-space:nowrap;text-align:right;
  padding-right:12px !important;
}
.h2h-row-cell{width:99%}
.h2h-row-pct{
  font-size:11px;font-weight:700;color:rgba(245,242,236,.55);
  text-align:right;padding-left:12px !important;
}
/* La del camp on es juga: la que respon la pregunta d'avui. No canvia de
   mida —les files han de seguir sent comparables—, només de llum. */
.h2h-row--on .h2h-row-camp{color:var(--cream)}
.h2h-row--on .h2h-row-pct{color:var(--or)}
.h2h-n{font-weight:700}
.h2h-n--win{color:var(--win)}
.h2h-n--draw{color:var(--draw)}
.h2h-n--loss{color:var(--loss)}
.h2h-sep{color:rgba(245,242,236,.25);padding:0 3px}

/* Els gols, al peu del balanç: no són un tercer camp, són una altra cosa
   que es diu del mateix munt de partits. */
.h2h-goals{
  display:flex;flex-wrap:wrap;gap:5px clamp(14px,3vw,26px);
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,242,236,.38);
  padding-top:11px;border-top:1px solid rgba(245,242,236,.07);
}
.h2h-goals-pair{display:inline-flex;align-items:baseline;gap:6px}
.h2h-goals-num{
  font-size:13px;font-weight:700;letter-spacing:0;
  color:rgba(245,242,236,.82);
}

/* ── Les dades ──
   Xifra gran i frase al costat. Abans eren tres línies de text amb un guió al
   davant: la xifra que es vol recordar hi quedava enmig de la frase i el bloc
   semblava una llista de la compra.

   El color diu si la dada és bona o dolenta; les que només són un fet —quan
   va ser l'últim cop— es queden en or, que és el to de la casa per al que
   només informa. Cada frase diu de quin àmbit parla, o sigui que la llista no
   necessita cap títol al damunt que ho digui per elles. */
.h2h-facts{list-style:none;display:flex;flex-direction:column;gap:8px;min-width:0}
.h2h-fact{
  /* La columna de la xifra és fixa i no "auto": amb tres targetes seguides,
     un "4" i un "19/20" feien començar les frases a llocs diferents i la
     pila es veia desalineada. */
  display:grid;grid-template-columns:3.7em minmax(0,1fr);
  align-items:center;gap:12px;
  padding:11px 14px;border-radius:var(--r-md);
  border:1px solid transparent;
  /* El filet de color es queda: no és un perfil, és el que diu de quin
     signe és la dada. */
  border-left:3px solid var(--c);
  background:rgba(245,242,236,.045);
}
.h2h-fact-figure{
  font-size:1.25rem;font-weight:700;line-height:1;color:var(--c);
  text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.h2h-fact-text{font-size:.85rem;line-height:1.4;color:rgba(245,242,236,.78)}
.h2h-fact--win{--c:var(--win)}
.h2h-fact--loss{--c:var(--loss)}
.h2h-fact--neutral{--c:var(--or)}

.h2h-recent{display:flex;flex-direction:column;gap:9px;min-width:0}
.h2h-title{font-size:var(--txt-xs);letter-spacing:var(--track-xs);text-transform:uppercase;
  color:var(--or);font-weight:400}

/* Els últims precedents. Una targeta per partit i totes iguals d'amples —una
   graella i no una filera que s'estira—: són cinc coses del mateix pes i, si
   cadascuna feia l'amplada del seu marcador, la successió es llegia com un
   gràfic que no és. El color el porta la vora de dalt i el marcador; la
   lletra del resultat sobrava, perquè el marcador ja diu com va anar. */
.h2h-strip{
  list-style:none;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;
  /* Amb el heroi a mil dos-cents píxels, cinc targetes estirades a tota
     l'amplada són cinc rectangles buits amb un marcador al mig: la tira té
     la mida del que hi ha escrit i s'acaba on s'acaba. */
  max-width:600px;
}
.h2h-card{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:11px 7px 10px;border-radius:var(--r-md);min-width:0;
  border:1px solid transparent;
  /* Com a `.h2h-fact`: el filet de dalt no és perfil, és el color del
     resultat. */
  border-top:3px solid var(--c);
  background:rgba(245,242,236,.045);
  cursor:default;
}
.h2h-card-when{font-size:8.5px;letter-spacing:.1em;color:rgba(245,242,236,.45)}
.h2h-card-score{
  font-size:1.05rem;font-weight:700;line-height:1;color:var(--c);
  font-variant-numeric:tabular-nums;
}
.h2h-card-where{
  font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,242,236,.38);
}
.h2h-card--win{--c:var(--win)}
.h2h-card--draw{--c:var(--draw)}
.h2h-card--loss{--c:var(--loss)}

/* ── Tots els precedents ──
   La llista sencera, a la pàgina del rival. Abans hi anava al damunt una
   tira de lletres (V, E, D per partit) que havia de donar la forma de
   vuitanta anys d'una ullada: contra un rival de tota la vida són quaranta
   quadradets en tres línies que no diuen res que el balanç no digui millor,
   i el que es ve a buscar aquí és un any concret. */
.h2h-all{
  display:flex;flex-direction:column;gap:10px;
  padding-top:clamp(14px,2.2vh,18px);margin-top:clamp(4px,1vh,8px);
  border-top:1px solid rgba(245,242,236,.08);
}

/* La llista sencera. Sense alçada màxima i sense barra pròpia —una llista
   que es desplaça dins d'un bloc que ja s'havia desplegat no la fa servir
   ningú—: viu a la pàgina del rival, on el desplaçament és el de la pàgina.

   Les columnes són una graella d'amples fixos i no una taula: cada fila és un
   `<details>` que s'obre, i perquè les columnes quadrin d'una fila a l'altra
   sense taula els amples no poden dependre del contingut. */
.h2h-list-wrap{
  border-radius:var(--r-md);border:1px solid transparent;
  background:rgba(245,242,236,.045);overflow:hidden;
}
.h2h-list-head,.h2h-match-row{
  display:grid;align-items:center;gap:0 14px;padding:8px 14px;
  grid-template-columns:72px minmax(0,1fr) 44px 64px 10px;
}
/* La capçalera no s'enganxa a dalt: la barra del web ja hi és, sticky i per
   damunt, i el que quedava enganxat es quedava a sota seu sense veure's. */
.h2h-list-head{
  padding-top:9px;padding-bottom:9px;white-space:nowrap;
  font-family:'Space Grotesk',sans-serif;
  font-size:8px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(245,242,236,.4);
  background:#140b0e;
  border-bottom:1px solid rgba(245,242,236,.1);
}
.h2h-list-head span:nth-child(4){text-align:right}
/* "Temporada" en capçalera és més ample que "25/26" a la fila, i al mòbil
   se'n menjava la columna del costat. */
.h2h-head-short{display:none}
.h2h-list{list-style:none;margin:0;padding:0;font-size:11.5px}
.h2h-tr{border-bottom:1px solid rgba(245,242,236,.05)}
.h2h-tr:last-child{border-bottom:0}
/* La barra de color a l'esquerra fa de columna de resultat sense gastar-ne
   una: la llista ja és estreta i "Victòria" escrit seixanta-vuit vegades no
   diu res que el color no digui abans. */
.h2h-tr{box-shadow:inset 3px 0 0 var(--c)}
.h2h-tr--win{--c:var(--win)}
.h2h-tr--draw{--c:var(--draw)}
.h2h-tr--loss{--c:var(--loss)}
.h2h-match-row{cursor:pointer;list-style:none;color:rgba(245,242,236,.7)}
.h2h-match-row::-webkit-details-marker{display:none}
.h2h-match-row:hover,.h2h-match[open] > .h2h-match-row{background:rgba(245,242,236,.03)}
.h2h-match-row:focus-visible{outline:2px solid var(--llauto);outline-offset:-2px}
/* La fletxa diu que la fila s'obre. Petita i fluixa: la fila és el marcador,
   i la fletxa és només la nansa. */
.h2h-match-row::after{
  content:"";width:5px;height:5px;justify-self:end;
  border-right:1.5px solid rgba(245,242,236,.35);
  border-bottom:1.5px solid rgba(245,242,236,.35);
  transform:translateY(-2px) rotate(45deg);transition:transform .15s;
}
.h2h-match[open] > .h2h-match-row::after{transform:translateY(1px) rotate(-135deg)}
.h2h-td-season{white-space:nowrap;color:rgba(245,242,236,.85)}
.h2h-td-comp{color:rgba(245,242,236,.5);min-width:0}
.h2h-td-where{color:rgba(245,242,236,.45);white-space:nowrap}
.h2h-td-score{
  font-weight:700;color:var(--c);text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* La tanda de penals, al costat del marcador i més fluixa: no és el resultat
   del partit —aquell va acabar empat— però és qui va passar l'eliminatòria. */
.h2h-pens{
  display:block;font-size:8.5px;letter-spacing:.1em;font-weight:400;
  color:rgba(245,242,236,.45);
}

/* El que hi ha dins d'un precedent. Les peces són les de l'acta
   (`match-report.css`), i aquí només es posa el marc: el mateix aire que el
   detall d'una jornada del calendari, centrat i amb amplada de lectura. */
.h2h-sheet{
  padding:clamp(14px,2vh,20px) clamp(14px,3vw,28px) clamp(18px,2.6vh,26px);
  border-top:1px solid rgba(245,242,236,.06);
  background:rgba(245,242,236,.045);
}
/* L'onze en graella: onze targetes d'una fila cadascuna farien el desplegable
   més llarg que la llista de precedents. Les columnes les decideix l'amplada,
   i els noms llargs de fa setanta anys hi caben en dues línies. */
.acta-llista.h2h-onze{
  display:grid;gap:6px;
  grid-template-columns:repeat(auto-fill,minmax(128px,1fr));
}
.acta-llista.h2h-onze li{padding:6px 10px}
.h2h-onze .acta-fet{font-size:.85rem;gap:6px;overflow-wrap:anywhere}
.h2h-sheet-none{text-align:center;font-style:italic}

/* Els que més hi han jugat. Una llista de cinc, no una taula: el nom mana i
   la resta l'acompanya en gris i petit, que és l'ordre en què es llegeix
   ("qui" abans que "quant"). Els minuts van en negreta a la dreta perquè són
   la xifra que compara les cinc files entre elles. */
.h2h-tops{margin-top:14px;padding-top:12px;border-top:1px solid rgba(245,242,236,.07)}
.h2h-top{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px}
.h2h-top-row{
  display:grid;align-items:baseline;gap:0 8px;padding:4px 0;
  grid-template-columns:14px minmax(0,1fr) auto;
}
.h2h-top-row + .h2h-top-row{border-top:1px solid rgba(245,242,236,.05)}
.h2h-top-place{font-size:9px;color:rgba(245,242,236,.28);font-variant-numeric:tabular-nums}
/* El nom pot ser llarg —tres cognoms de l'any 1945— i abans d'estrènyer la
   xifra de la dreta val més que sigui ell qui es talli. */
.h2h-top-name{font-size:13px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.h2h-top-tally{
  font-size:11px;color:rgba(245,242,236,.5);white-space:nowrap;text-align:right;
  font-variant-numeric:tabular-nums;
}
.h2h-top-tally b{color:rgba(245,242,236,.85);font-weight:700}
/* De quan a quan, a la segona línia i sota el nom: és el context de la xifra
   i no una columna més. */
.h2h-top-when{
  grid-column:2;font-size:8.5px;letter-spacing:.12em;
  color:rgba(245,242,236,.3);
}
@media (max-width:560px){
  .h2h-top-played{display:none}
}

/* Fins on arriben les dades. Al peu i en petit: no és una dada del partit,
   és el marge de totes les altres. */
.h2h-since{
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,242,236,.32);
  padding-top:10px;border-top:1px solid rgba(245,242,236,.07);
}

/* Al mòbil el bloc va en una columna i les peces s'estrenyen: la taula de
   precedents perd els cantons de coixí i les files de camp deixen anar el
   tant per cent, que és el que primer sobra quan la barra es queda sense
   lloc per dir res. */
@media (max-width:560px){
  .h2h-summary{border-spacing:0 6px}
  .h2h-row-camp,.h2h-row-tally{padding-right:9px !important}
  .h2h-row-pct{display:none}
  .h2h-card{padding:9px 4px 8px}
  .h2h-list-head,.h2h-match-row{
    padding-left:10px;padding-right:10px;gap:0 10px;
    grid-template-columns:44px minmax(0,1fr) 36px 54px 8px;
  }
  .h2h-head-long{display:none}
  .h2h-head-short{display:inline}
  .h2h-td-comp{font-size:10.5px}
}

/* El detall d'una jornada pendent no és una acta: no hi van dues columnes
   amples de fets, hi va un bloc sol que ocupa la fila sencera. */
.matchday-detail--history{display:block}

/* ── Els antecedents dins de la propera jornada ──
   No són una caixa a part: parlen del partit que ve i van dins seu, separats
   per una línia i amb títol propi. La línia fa la feina que abans feia una
   segona vora, sense les nines russes de caixa dins de caixa. */
/* Ara és un PLEC i no una caixa-enllaç. El que la portada ve a dir d'aquest
   bloc és contra qui es juga i quan; com hi hem anat sempre és la pregunta
   següent, i desplegada s'havia de passar per sobre cada vegada. Plegat, el
   títol sol ja diu què hi ha a dins.

   I com que ja no és tot ell un enllaç, la sortida cap al rival pot ser un
   <a> de debò: abans era un <span> perquè un enllaç dins d'un altre no és
   marcatge vàlid. */
.hero-h2h{
  display:block;
  margin-top:clamp(18px,3vh,26px);
  padding-top:clamp(16px,2.6vh,22px);
  border-top:1px solid rgba(245,242,236,.12);
}
/* Dins de la propera jornada el plec va sobre fons grana: la vora de sempre
   s'hi perdia. */
.hero-h2h{--plec-vora:rgba(245,242,236,.16)}

.hero-h2h-more{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  text-decoration:none;transition:color .2s;
  margin-top:clamp(12px,2vh,16px);
  padding-top:clamp(10px,1.6vh,14px);
  border-top:1px solid rgba(245,242,236,.07);
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
  color:var(--or);
}
.hero-h2h-more:hover{color:var(--cream)}
.hero-h2h-more:hover .arrow{transform:translateX(5px)}
.hero-h2h-more .arrow{display:inline-block;transition:transform .2s}

/* ── Capçalera de secció de la portada (l'acta i la plantilla) ── */
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:clamp(12px,2vh,18px);
  border-bottom:1px solid rgba(245,242,236,.10);
}
.section-title{
  font-weight:700;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1;color:var(--cream);
}
.section-more{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
  color:var(--or);transition:color .2s;
}
.section-more:hover{color:var(--cream)}
.section-more:hover .arrow{transform:translateX(5px)}

/* ── Un dia com avui ──
   Plegat: una tira d'una línia que diu quantes coses hi ha a dins, i en
   obrir-la, dues llistes —partits i aniversaris— amb una fila per cosa.
   Cap fila destaca sobre les altres: totes tenen la mateixa forma, amb la
   xifra dels anys a l'esquerra en el color de com va anar.

   Mateixa superfície que les cartes però sense halo: al damunt de la
   propera jornada ha de semblar una nota, no un bloc que hi competeixi. */
.almanac{
  --win:#7bbe7b;--draw:var(--or);--loss:var(--grana-lite);
  border-radius:var(--r-lg);
  background:var(--surf-card);
  box-shadow:var(--card-relleu);
}
.almanac-tira{
  display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;
  padding:14px clamp(16px,2.4vw,26px);
  list-style:none;cursor:pointer;border-radius:var(--r-lg);
  transition:background .2s;
}
.almanac-tira::-webkit-details-marker{display:none}
.almanac-tira::marker{content:""}
.almanac-tira:hover{background:rgba(245,242,236,.03)}
/* Només amb el teclat: amb el ratolí, el contorn quedava posat després del
   clic i la tira semblava seleccionada. */
.almanac-tira:focus{outline:none}
.almanac-tira:focus-visible{outline:2px solid var(--llauto);outline-offset:3px}
.almanac-titol{
  font-size:var(--txt-md);letter-spacing:var(--track-md);text-transform:uppercase;
  font-weight:600;color:var(--or);
}
.almanac-today{
  font-size:var(--txt-xs);letter-spacing:var(--track-xs);text-transform:uppercase;
  color:rgba(245,242,236,.45);
}
.almanac-resum{font-size:.92rem;color:rgba(245,242,236,.75)}
.almanac-mes{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
  color:rgba(245,242,236,.55);transition:color .2s;
}
.almanac-tira:hover .almanac-mes{color:var(--cream)}
.almanac[open] .almanac-mes .plec-fletxa{transform:rotate(180deg)}
.almanac[open] .almanac-mes-text{display:none}

.almanac-cos{
  padding:0 clamp(16px,2.4vw,26px) clamp(14px,2.2vh,20px);
  border-top:1px solid rgba(245,242,236,.07);
}
.almanac-grup{
  margin-top:clamp(14px,2.2vh,18px);
  font-size:var(--txt-xs);letter-spacing:var(--track-xs);text-transform:uppercase;
  color:rgba(245,242,236,.45);font-weight:400;
}
.almanac-files{list-style:none}
.almanac-fila{
  display:grid;grid-template-columns:clamp(84px,9vw,104px) minmax(0,1fr);
  align-items:center;gap:clamp(12px,2vw,22px);
  padding:clamp(10px,1.6vh,13px) 0;
}
.almanac-fila + .almanac-fila{border-top:1px solid rgba(245,242,236,.06)}
.almanac-fila--win{--c:var(--win)}
.almanac-fila--loss{--c:var(--loss)}
.almanac-fila--draw{--c:var(--draw)}
.almanac-fila--neutral{--c:var(--or)}

/* "fa 79 anys": la xifra en el color de com va anar, les paraules petites. */
.almanac-fig{display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.almanac-fig-num{
  font-size:1.35rem;font-weight:700;line-height:1;
  color:var(--c,var(--or));font-variant-numeric:tabular-nums;
}
.almanac-fig-unit{
  font-size:var(--txt-xs);letter-spacing:var(--track-xs);text-transform:uppercase;
  color:rgba(245,242,236,.45);
}

.almanac-que{min-width:0;display:flex;flex-direction:column;gap:4px}
.almanac-text{font-size:.98rem;line-height:1.4;color:var(--cream);text-wrap:pretty}
.almanac-score{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.almanac-score .team-crest{width:22px;height:22px;flex:none}
.almanac-team{font-weight:600;font-size:.98rem;color:var(--cream)}
.almanac-goals{
  font-weight:700;font-size:1.1rem;color:var(--cream);
  padding:0 3px;font-variant-numeric:tabular-nums;
}
.almanac-pens{font-size:var(--txt-sm);letter-spacing:var(--track-sm);color:var(--or)}
.almanac-when{font-size:.85rem;color:rgba(245,242,236,.55)}


/* Sota el partit, arran de l'esquerra del text: és el que ve després de
   llegir-lo, i dit sencer ("Tots els partits contra el SD Huesca") no cal
   endevinar cap a on porta. */
.almanac-surt{
  align-self:flex-start;margin-top:clamp(8px,1.4vh,12px);
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:var(--txt-xs);letter-spacing:var(--track-xs);text-transform:uppercase;
  color:rgba(212,175,106,.7);transition:color .2s;
}
.almanac-surt:hover{color:var(--or)}
.almanac-surt .arrow{display:inline-block;transition:transform .2s}
.almanac-surt:hover .arrow{transform:translateX(4px)}

.almanac-scope{
  margin-top:10px;padding-top:10px;border-top:1px solid rgba(245,242,236,.06);
  font-size:var(--txt-xs);letter-spacing:var(--track-xs);text-transform:uppercase;
  color:rgba(245,242,236,.35);
}

/* L'acta d'aquell dia. Tancada: el que la carta ve a dir és l'efemèride, i
   això és per a qui en vulgui més. La fila que l'obre és el plec de sempre
   (`.plec`), com la de la darrera jornada i la dels antecedents. */
.almanac-acta{margin-top:clamp(11px,1.8vh,15px)}

/* L'acta es pinta amb el macro de la pàgina del rival, i allà viu dins d'una
   fila de taula: per això ve centrada, amb amplada de lectura i amb marc
   propi. Aquí dins tot això juga en contra i es notava molt —la carta té una
   vora esquerra i el contingut de l'acta en tenia una altra 180 píxels més
   endins, amb la data centrada per sobre de tot plegat—, que és exactament
   la sensació de desquadrat.

   No es toca el macro ni el seu full: allà està bé. Es desfà aquí, que és on
   molesta. */
.almanac-acta .acta-partit{margin-inline:0;max-width:none}
.almanac-acta .match-sheet-when{text-align:left}
/* I sense marc propi: el filet i l'aire els posa `.plec-cos`, i tornar-hi a
   posar fons i vora és la caixa dins de la caixa de sempre. */
.almanac-acta .h2h-sheet{padding:0;border-top:none;background:none}

@media (max-width:560px){
  /* Estret: la xifra a sobre del que va passar. */
  .almanac-fila{grid-template-columns:minmax(0,1fr);row-gap:6px}
  .almanac-score .team-crest{display:none}
    }

/* Qui ha demanat menys moviment al sistema, que no en tingui. */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}