/* 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. */

/* ── Vista ── */
.view{
  max-width:1200px;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ó. */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(20px,3vw,34px);
  border-radius:18px;
  border:1px solid rgba(194,30,51,.28);
  background:
    radial-gradient(80% 130% at 50% 0%, rgba(194,30,51,.20), transparent 64%),
    var(--surf-1);
  box-shadow:var(--edge-hi), var(--shadow-hero), var(--halo-grana);
}
.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:999px;
  font-size:10.5px;letter-spacing:.18em;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. */

@media (max-width:820px){
  .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:9px;letter-spacing:.2em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
  border:1px solid rgba(245,242,236,.18);
  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:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(245,242,236,.4);padding-top:clamp(14px,2.8vw,22px);
}
.match-context{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--or);
  text-align:center;
}
.match-when{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,242,236,.62);text-align:center;
}

/* ── Detall: goals, MVP, targetes, pronòstic ── */
.detail-title{
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(245,242,236,.42);font-weight:500;margin-bottom:6px;
}
.detail-empty{
  font-size:10px;letter-spacing:.14em;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:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,242,236,.5);text-align:center;
}
.acta-carregant{
  font-size:10px;letter-spacing:.14em;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{
  margin-top:clamp(30px,5vh,50px);
  padding:clamp(20px,3vw,34px);
  border-radius:18px;
  border:1px solid rgba(245,242,236,.14);
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(212,175,106,.05), transparent 62%),
    var(--surf-1);
  box-shadow:var(--edge-hi), var(--shadow-card);
}
/* 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);
}
.sheet-context{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--or);
  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:10px;letter-spacing:.2em;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. */
.sheet-body{
  display:grid;align-items:start;
  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);
}
/* Contra la base del camp: el que sobra queda entre els fets i el gràfic, que
   es llegeix com a aire i no com un forat al final. */
.sheet-body .season{grid-area:2 / 2;align-self:end}
/* Jornades entrades abans que hi hagués acta: sense camp que faci de columna,
   els fets i el gràfic ocupen tota l'amplada. */
.sheet-body:not(:has(.camp-zona)) .acta-costat,
.sheet-body:not(:has(.camp-zona)) .season{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,
  .sheet-body .season{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. */
.season{
  --win:#7bbe7b;--draw:var(--or);--loss:var(--grana-lite);
  display:flex;flex-direction:column;gap:clamp(12px,2vh,18px);width:100%;
}
.season-title{
  font-size:10px;letter-spacing:.2em;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,.split-item--win{--c:var(--win)}
.form-chip--draw,.split-item--draw{--c:var(--draw)}
.form-chip--loss,.split-item--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;
}

.season-figures{
  display:grid;gap:clamp(16px,3vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  align-items:center;
}

/* El formatget i la seva llegenda. */
.split{display:flex;align-items:center;gap:clamp(14px,2.5vw,20px)}
.split-pie{
  position:relative;flex:none;
  width:clamp(86px,9vw,106px);aspect-ratio:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
/* El forat del mig el fa una màscara i no un cercle opac a sobre: la caixa té
   degradat de fons i un cercle de color pla s'hi veuria retallat. */
.split-ring{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(
    var(--win) 0 var(--win-stop),
    var(--draw) var(--win-stop) var(--draw-stop),
    var(--loss) var(--draw-stop) 100%);
  -webkit-mask:radial-gradient(closest-side, transparent 61%, #000 61.5%);
          mask:radial-gradient(closest-side, transparent 61%, #000 61.5%);
}
.split-figure{font-size:1.5rem;font-weight:700;line-height:1;color:var(--cream)}
.split-caption{
  font-size:8px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,242,236,.45);margin-top:3px;
}
.split-legend{list-style:none;display:flex;flex-direction:column;gap:7px;min-width:0}
.split-item{
  display:flex;align-items:baseline;gap:7px;
  font-size:11px;letter-spacing:.06em;color:rgba(245,242,236,.75);
}
.split-dot{
  width:8px;height:8px;border-radius:2px;flex:none;align-self:center;
  background:var(--c);
}
.split-count{font-weight:700;color:var(--cream);min-width:1.4em}
.split-name{
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(245,242,236,.45);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* El tant per cent, a la dreta i alineat: és el que es compara entre files. */
.split-pct{margin-left:auto;font-weight:600;color:var(--or);flex:none}

/* Les dues barres de gols, a la mateixa escala. */
.goals{display:flex;flex-direction:column;gap:9px;min-width:0}
.goal-row{display:flex;align-items:center;gap:10px}
.goal-label{
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(245,242,236,.45);flex:none;min-width:5.6em;
}
.goal-track{
  flex:1 1 0;min-width:0;height:9px;border-radius:999px;
  background:rgba(245,242,236,.07);overflow:hidden;
}
/* El mínim és el que fa que un zero es vegi com un zero i no com un buit. */
.goal-fill{display:block;height:100%;min-width:3px;border-radius:999px}
.goal-fill--for{background:linear-gradient(90deg, rgba(212,175,106,.55), var(--or))}
.goal-fill--against{background:linear-gradient(90deg, rgba(226,67,87,.35), rgba(226,67,87,.75))}
.goal-value{
  font-size:.95rem;font-weight:700;color:var(--cream);
  flex:none;min-width:1.8em;text-align:right;
}

.prediction{
  padding:clamp(10px,1.6vw,14px);
  border-radius:12px;
  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;
}

/* ── 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:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(245,242,236,.45);
}

.calendar{list-style:none;display:flex;flex-direction:column;gap:8px}
.matchday{
  border-radius:12px;
  border:1px solid rgba(245,242,236,.10);
  background:var(--surf-1);
  box-shadow:var(--edge-hi);
  overflow:hidden;
  transition:border-color .2s;
}
.matchday--played:hover{border-color:rgba(245,242,236,.24)}
/* La que ve ara: l'única que ha de cridar l'atenció de tota la llista. */
.matchday--open{
  border-color:rgba(194,30,51,.45);
  background:
    linear-gradient(90deg, rgba(194,30,51,.12), transparent 40%),
    var(--surf-1);
}

.matchday-row{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;gap:clamp(10px,2vw,20px);
  padding:clamp(11px,1.6vw,15px) clamp(12px,2vw,20px);
}
.matchday-details > summary{cursor:pointer;list-style:none}
/* Les pendents no s'obren: que el cursor no prometi el contrari. */
.matchday-row--pending{cursor:default}
.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:10px;letter-spacing:.14em;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:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,242,236,.3);
}
.matchday-status{
  font-size:9px;letter-spacing:.16em;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(0,0,0,.22);
}
.matchday-detail .detail-block{min-width:150px}

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

/* ── 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:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--or);
  padding:10px 18px;border-radius:999px;
  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:10px;letter-spacing:.16em;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:14px;
  border:1px solid rgba(245,242,236,.10);
  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:12px;object-fit:cover;
  border:1px solid rgba(245,242,236,.14);
  background:#000;
}
.credit-role{
  font-size:10px;letter-spacing:.24em;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:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--or);
  padding:10px 18px;border-radius:999px;
  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:11px;letter-spacing:.24em;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:9px;letter-spacing:.1em;
  color:rgba(245,242,236,.4);
  padding:2px 7px;border-radius:999px;
  border:1px solid rgba(245,242,236,.14);
}

/* 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;
}
.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 —la del Segura comença amb el monyo al 1,5% de
   l'original— quedaven decapitades, i les altes (fins a 999×3706), que
   `cover` ja retalla molt, encara més.

   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ó. */
.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-mvp{
  display:flex;align-items:center;gap:.375em;
  padding:.3125em .625em;border-radius:999px;
  background:rgba(245,242,236,.06);backdrop-filter:blur(4px);
}
.player-mvp-star{color:#ffcf3f;font-size:.6875em;line-height:1}
.player-mvp b{font-weight:600;font-size:.75em}
.player-mvp span{font-size:.53125em;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-2)}

.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);
}
.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);
  display:grid;grid-template-columns:repeat(5,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;
}
.player-stat-label{
  font-size:.5em;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cream-2);
  height:1.375em;display:flex;align-items:center;justify-content:center;gap:.5em;
}
.player-dot{width:.75em;height:1.125em;border-radius:.25em;display:inline-block}
.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)}

/* Galó: la categoria del cromo, a la vora de dalt. Els mèrits porten metall
   (or, plata) i les targetes el seu propi color: un rècord de vermelles no
   s'ha de veure com un premi. */
.player-galo{
  position:absolute;top:0;left:0;right:0;height:1.75em;z-index:8;
  border-radius:1.25em 1.25em 0 0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.32);
}
.player-galo b{
  position:relative;z-index:2;
  font-size:.53125em;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
}
.player-galo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 41%,rgba(255,255,255,.42) 50%,transparent 59%);
}
/* Els mèrits porten rampa de metall: la franja clara del mig és el que ho fa
   semblar or i plata, i no groc i gris. */
.player-galo--goals{background:linear-gradient(180deg,#FBEBC0,#D9B66F 34%,#B98F3C 52%,#E7CD92 68%,#A87E32)}
.player-galo--goals b{color:#241704}
.player-galo--assists{background:linear-gradient(180deg,#FFFFFF,#DCDAD4 34%,#A9A69E 52%,#EFEEEA 68%,#8E8A82)}
.player-galo--assists b{color:#1C1B19}
/* Les targetes, planes: són el cartró de l'àrbitre, no un premi. */
.player-galo--yellow{background:linear-gradient(180deg,#FFDA5E,#FFC81F 55%,#E0A800)}
.player-galo--yellow b{color:#2A1D00}
.player-galo--red{background:linear-gradient(180deg,#EE5566,#E0334A 55%,#A31F2C)}
.player-galo--red b{color:#2A0508}
/* Amb galó, la fitxa de dalt baixa i la carta llueix: escampa al voltant la
   llum del metall que porta a sobre. */
.player-card--galo .player-top{top:2.5em}
.player-card--galo{
  box-shadow:0 0 0 1px var(--halo), 0 0 44px -8px var(--halo),
    0 28px 64px -30px rgba(0,0,0,.9), 0 2px 8px rgba(0,0,0,.4);
}
.player-card--goals{--halo:rgba(212,175,106,.42)}
.player-card--assists{--halo:rgba(214,211,203,.34)}
.player-card--yellow{--halo:rgba(255,207,63,.36)}
.player-card--red{--halo:rgba(226,67,87,.38)}

/* 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}
}

/* ── 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 rgba(245,242,236,.12);border-radius:20px;
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(212,175,106,.09), transparent 60%),
    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:10px;letter-spacing:.28em;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:10px;letter-spacing:.16em;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:10px;letter-spacing:.16em;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:11px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--ink);background:var(--or);
  padding:11px 22px;border:0;border-radius:999px;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:12px;border:1px solid rgba(245,242,236,.14);
  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:10px;letter-spacing:.16em;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:999px;
  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:12px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  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:999px;
  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:999px;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:20px;
  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:10px;letter-spacing:.28em;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:11px;letter-spacing:.2em;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:14px;
  background:rgba(212,175,106,.07);
}
.memory-over-rank[hidden]{display:none}
.memory-over-rank-label{
  font-size:10px;letter-spacing:.28em;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:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,242,236,.45);
}
.memory-over-detail{
  margin-top:12px;min-height:1.2em;
  font-size:10px;letter-spacing:.16em;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:11px;letter-spacing:.02em;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:999px;
  border:1px solid rgba(245,242,236,.22);
  background:none;color:rgba(245,242,236,.7);
  font-size:10.5px;letter-spacing:.18em;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:11px;letter-spacing:.14em;
  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:12px;
}

/* ── 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:10px;letter-spacing:.18em;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 rgba(245,242,236,.08);border-radius:12px;
  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:11px;letter-spacing:.14em;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:11px;letter-spacing:.16em;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:10px;letter-spacing:.14em;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:14px;
  border:1px solid rgba(245,242,236,.10);
  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;
}

/* ── 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:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--or);transition:color .2s;
}
.section-more:hover{color:var(--cream)}
.section-more:hover .arrow{transform:translateX(5px)}

/* ── Tira de jugadors de la portada ── */
.strip-section{margin-top:clamp(30px,5vh,50px)}
.strip-tools{display:flex;align-items:center;gap:clamp(12px,2vw,20px)}

/* Fletxes de la tira. Es desactiven als extrems en comptes d'amagar-se:
   així la capçalera no balla cada cop que s'arriba al final. */
.strip-nav{display:flex;gap:6px}
.strip-arrow{
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  font-size:.9rem;line-height:1;
  color:var(--cream);
  background:rgba(245,242,236,.06);
  border:1px solid rgba(245,242,236,.14);
  cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,opacity .2s;
}
.strip-arrow:hover:not(:disabled){
  background:rgba(212,175,106,.14);
  border-color:rgba(212,175,106,.4);
  color:var(--or);
}
.strip-arrow:focus-visible{outline:2px solid var(--llauto);outline-offset:2px}
.strip-arrow:disabled{opacity:.28;cursor:default}

/* Tira horitzontal: es llegeix d'un cop d'ull i s'arrossega, com la de
   motogp.com. La graella de /squad és per consultar; això és per fullejar. */
.strip{
  list-style:none;
  --card-w:210px;
  display:grid;grid-auto-flow:column;
  grid-auto-columns:var(--card-w);
  gap:clamp(14px,1.8vw,22px);
  overflow-x:auto;
  /* La carta s'aixeca en tombar-se: si el marge no hi és, el contenidor
     que fa scroll li retalla la vora de dalt. */
  padding:10px 0;
  scroll-behavior:smooth;
  /* El dit ha de moure la tira de costat i prou. */
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  scrollbar-color:rgba(245,242,236,.18) transparent;
}
.strip > .player{scroll-snap-align:start}
.strip::-webkit-scrollbar{height:6px}
.strip::-webkit-scrollbar-track{background:transparent}
.strip::-webkit-scrollbar-thumb{
  background:rgba(245,242,236,.16);border-radius:999px;
}
.strip::-webkit-scrollbar-thumb:hover{background:rgba(245,242,236,.3)}
/* La carta hi va sencera i una mica més petita que a /squad: aquí n'hi ha
   d'entrar unes quantes de cop, i la mida la fa `--card-w` tota sola. */
@media (max-width:520px){
  .strip{--card-w:180px}
}

/* Qui ha demanat menys moviment al sistema, que no en tingui: les fletxes
   segueixen movent la tira, però d'un salt. */
@media (prefers-reduced-motion:reduce){
  .strip{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}