/* Compartit · L'acta d'un partit (camp, gols i canvis).
 *
 * Germà de `match-report.js`: el marcatge el pinta ell i els colors surten de
 * les variables que ja defineixen les dues aplicacions (--cream, --grana,
 * --or…). Qui el carrega decideix quant espai li dona amb `.acta-partit`;
 * aquí dins tot s'hi adapta.
 */

.acta-partit{
  display:grid;align-items:start;
  grid-template-columns:minmax(0,330px) minmax(0,1fr);
  gap:clamp(16px,3vw,40px);
  width:100%;max-width:860px;margin-inline:auto;
}
/* Sense onze marcat (les jornades entrades abans que hi hagués acta) no hi ha
   camp: la llista de fets es queda sola i no cal reservar-li mitja graella. */
.acta-partit.sense-camp{grid-template-columns:minmax(0,1fr);max-width:560px}
@media (max-width:720px){
  .acta-partit{grid-template-columns:minmax(0,1fr)}
  /* El camp no creix més enllà de la mida que tenia a dues columnes: estirat a
     tota l'amplada, un camp de 700 px de front fa la jornada tres pantalles.

     Enganxat a l'esquerra i no centrat: apilats, el títol del camp i els de la
     llista de sota fan una sola columna de títols, i centrar només el camp
     deixava "L'onze" endins i "Gols" al marge. */
  .acta-partit .camp-zona{max-width:330px}
}

.camp-titol{
  font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--or);font-weight:400;margin-bottom:10px;
}
/* El dibuix (4-4-2, 3-5-2…) al costat del títol: es compta dels jugadors
   col·locats i només surt quan l'onze està col·locat de debò. */
.camp-dibuix{
  margin-left:6px;padding:1px 6px;border-radius:999px;
  color:rgba(245,242,236,.75);letter-spacing:.12em;
  border:1px solid rgba(245,242,236,.16);background:rgba(255,255,255,.03);
}

/* ── El camp ──
   La gespa és fosca a propòsit: és un element més de la pàgina i no una
   il·lustració que se la mengi. Les línies són un SVG i prou, sense imatges
   ni dependències, i s'estiren amb la caixa. */
.camp{
  position:relative;
  /* Una mica menys llarg que un camp de veritat (68×105): hi caben les quatre
     línies sense que la jornada es converteixi en tres pantalles. */
  aspect-ratio:68/88;width:100%;
  border-radius:14px;overflow:hidden;
  border:1px solid rgba(245,242,236,.14);
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.018) 0 8.33%, transparent 8.33% 16.66%),
    linear-gradient(180deg, #14251a, #0d1a12);
  box-shadow:var(--shadow-card, 0 1px 2px rgba(0,0,0,.5));
}
.camp-linies{
  position:absolute;inset:0;width:100%;height:100%;
  fill:none;stroke:rgba(245,242,236,.16);stroke-width:.4;
  vector-effect:non-scaling-stroke;
}
.camp-linies-jugadors{position:absolute;inset:0}
/* L'alçada de cada línia la posa `match-report.js` amb un `style` a la mateixa
   línia: depèn de quantes n'hi hagi (un 4-2-3-1 en té una més que un 4-4-2) i
   el porter va sempre a la seva àrea, del 83% al 99%. */
.camp-linia{
  position:absolute;left:0;right:0;padding:0 2%;
  list-style:none;
  display:flex;justify-content:space-evenly;align-items:flex-start;gap:2px;
}
/* El porter, al peu del camp i no a una alçada.
   La resta de línies es col·loquen per dalt (`top`), que és com es reparteix
   el terreny; ell no, perquè el que ha de quedar dins del dibuix és tot el
   seu cromo —nom i targetes incloses— i des de dalt això depèn de com de
   gran surti a cada pantalla. Ancorat aquí, sempre cau a la seva àrea. */
.camp-linia--porter{top:auto;bottom:1.5%}

.camp-jugador{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  min-width:0;max-width:23%;
}
.camp-samarreta{
  position:relative;
  width:clamp(26px,7.5vw,34px);aspect-ratio:1;
  display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(180deg, var(--grana-lite), var(--grana));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.camp-dorsal{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(.7rem,2.2vw,.85rem);color:var(--cream);
  font-variant-numeric:tabular-nums;line-height:1;letter-spacing:0;
}
/* Qui ha estat substituït es marca al camp: hi era, i el minut és a la llista
   de canvis del costat. */
.camp-jugador.substituit .camp-samarreta{opacity:.6}
.camp-fora{
  position:absolute;top:-4px;right:-5px;
  width:14px;height:14px;border-radius:50%;
  display:grid;place-items:center;line-height:1;
  font-size:9px;color:#e07070;
  background:rgba(10,7,8,.95);border:1px solid rgba(224,112,112,.6);
}
.camp-nom{
  font-size:clamp(.6rem,1.8vw,.72rem);line-height:1.15;text-align:center;
  color:rgba(245,242,236,.88);
  /* Les ratlles del camp passen per darrere dels noms (el porter cau sobre
     l'àrea petita): l'ombra els separa sense haver de moure ningú. */
  text-shadow:0 1px 3px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.7);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.camp-marques{display:flex;align-items:center;gap:2px;line-height:1}
.camp-icona{font-size:.58rem}
.camp-mvp{color:var(--or);font-size:.68rem;line-height:1}
.camp-targeta{width:5px;height:8px;border-radius:1px;display:inline-block}
.camp-targeta.groga{background:#e8c14a}
.camp-targeta.vermella{background:var(--grana-lite)}

/* ── Els fets del partit: gols, canvis, banqueta ── */
.acta-costat{display:flex;flex-direction:column;gap:18px}
.acta-llista{list-style:none;display:flex;flex-direction:column;gap:6px}
.acta-llista li{
  display:flex;align-items:baseline;gap:10px;
  padding:8px 12px;border-radius:11px;
  border:1px solid rgba(245,242,236,.1);
  background:rgba(255,255,255,.02);
}
.acta-minut{
  color:var(--or);font-size:11px;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;min-width:30px;flex:none;
}
.acta-fet{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0;
  font-size:.92rem;color:rgba(245,242,236,.9);
}
.acta-qui{font-weight:500}
.acta-assist{font-size:.8rem;color:rgba(245,242,236,.5)}
.acta-ag{color:rgba(245,242,236,.75)}
.acta-nota{font-size:.8rem;color:rgba(245,242,236,.45)}
.acta-llista .canvi-entra{color:#7ec98a}
.acta-llista .canvi-surt{color:rgba(245,242,236,.55)}

/* ── El camp editable ──────────────────────────────────────
   Quan el camp serveix per COL·LOCAR gent i no per ensenyar-la: cada lloc és
   un desplegable. El fa servir l'acta de la porra (l'admin hi posa l'onze
   titular) i l'onze de Xisco (tothom hi posa el seu pronòstic). El marcatge
   el pinta /shared/ui/pitch-editor.js. */

.camp-edit .camp-linia{padding:0 1.5%;gap:3px}
.camp-lloc{flex:1 1 0;min-width:0;max-width:22%}
.camp-lloc select{
  width:100%;padding:4px 2px;border-radius:9px;
  font-size:10.5px;text-align:center;
  background:rgba(10,7,8,.82);color:var(--cream);
  border:1px solid rgba(245,242,236,.22);
  box-shadow:0 2px 6px rgba(0,0,0,.45);
}
/* Un lloc buit no crida l'atenció com un de ple: es veu on falta gent sense
   haver de comptar els onze. */
.camp-lloc select:has(option[value=""]:checked){
  color:rgba(245,242,236,.4);border-style:dashed;background:rgba(10,7,8,.5);
}
/* ── El lloc on es tria algú (`.tria-lloc`) ──────────────────
   La peça de `cromoPicker`: el cromo de qui hi has posat —la seva cara si en
   tenim foto, i si no el dorsal sobre el fons grana— i el seu nom a sota. La
   fan servir els onze llocs del camp, els cinc de la banqueta i MVP: és la
   mateixa pregunta i ha de tenir la mateixa cara. Abans el camp anava amb
   cromos i la banqueta amb barres grises.
   El desplegable hi continua sent, però invisible i estirat per tot el lloc:
   qui es clica és el cromo. */
.tria-lloc{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:5px;
}
/* El botó que obre el full de tria: transparent i estirat per tot el lloc,
   perquè el que es clica és el cromo.
   Va ser un `<select>` invisible i calia un `opacity:.001` per no perdre'l de
   l'arbre d'accessibilitat (el Chrome ignora el que té l'opacitat a zero).
   Ara és un botó de debò, sense fons ni vora: es veu igual de poc i no cal
   cap truc perquè un lector de pantalla el trobi. */
.tria-lloc .tria-boto{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;padding:0;border:0;border-radius:14px;
  background:transparent;box-shadow:none;cursor:pointer;
}
/* Que s'hi pot clicar es diu de tres maneres, perquè una rodona sola es
   llegeix com un dibuix i no com un botó: el "+" del lloc buit (el posa
   `paintShirts`), el dit del cursor i l'anell que s'encén en passar-hi per
   sobre o en arribar-hi amb el teclat. */
.tria-lloc .camp-cromo{cursor:pointer}
.tria-lloc .camp-nom{cursor:pointer}
.tria-lloc:hover .camp-cromo,
.tria-lloc:has(.tria-boto:focus-visible) .camp-cromo{
  border-color:var(--or);opacity:1;
  box-shadow:0 0 0 3px rgba(212,175,106,.22), 0 4px 14px rgba(0,0,0,.5);
}
/* Un pèl amunt en passar-hi per sobre: diu que la peça respon sense haver de
   canviar-li ni el color ni la mida, que al camp mouria les línies. */
.tria-lloc:hover .camp-cromo{transform:translateY(-1px)}
.tria-lloc .camp-cromo{transition:border-color .18s, box-shadow .18s, transform .18s}
.tria-lloc .camp-nom.buit{color:rgba(245,242,236,.42)}
.tria-lloc:hover .camp-nom{color:var(--cream)}
/* Sense `overflow:hidden`: la xapa del dorsal surt de la circumferència i
   retallar-la aquí la deixava mig menjada. Qui es retalla és la foto, que ja
   ho fa amb el seu propi `border-radius`. */
.camp-cromo{
  position:relative;
  width:clamp(30px,8vw,42px);aspect-ratio:1;
  display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(180deg, var(--grana-lite), var(--grana));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 2px 8px rgba(0,0,0,.55);
  transition:border-color .18s, opacity .18s;
}
.camp-cromo-foto{
  position:absolute;inset:0;width:100%;height:100%;border-radius:50%;
  object-fit:cover;object-position:50% 12%;
}
/* Sense foto hi va la silueta compartida, apagada perquè no es confongui amb
   una cara de debò: hi ha gent de la plantilla que no en té, i el cromo ha de
   continuar semblant el cromo d'algú i no un forat amb un número. */
.camp-cromo.sense-foto .camp-cromo-foto{opacity:.5}
/* Amb foto, el dorsal passa a ser una xapa a la cantonada: a sobre de la cara
   sencera no es llegiria. Sense foto, igual: el número no ha de caure sobre
   el cap de la silueta. */
.camp-cromo.amb-foto{border-color:rgba(212,175,106,.55)}
.camp-cromo.amb-foto .camp-dorsal,
.camp-cromo.sense-foto .camp-dorsal{
  position:absolute;right:-4px;bottom:-3px;z-index:2;
  min-width:1.5em;padding:.1em .3em;border-radius:999px;
  background:var(--grana);border:1px solid rgba(255,255,255,.45);
  box-shadow:0 1px 4px rgba(0,0,0,.7);
  font-size:clamp(.52rem,1.6vw,.64rem);line-height:1.3;text-align:center;
}
/* Un lloc buit es queda amb la silueta traçada: es veu quants en falten
   sense haver de comptar els onze. */
.camp-cromo.buit{
  background:rgba(10,7,8,.55);border-style:dashed;
  border-color:rgba(245,242,236,.28);opacity:.75;
}
.camp-cromo.buit .camp-dorsal{color:rgba(245,242,236,.45)}

/* Al mòbil el camp no arriba als 320px i una mitja de cinc deixa els llocs a
   uns 55px: el cognom es talla, però el dorsal va davant i alineat a
   l'esquerra, i amb el dorsal ja se sap qui és. Va aquí i no al bloc de
   mòbil de més avall perquè una media query no suma especificitat: allà
   perdria contra la regla de sobre. */
@media (max-width:600px){
  .camp-lloc select{font-size:9.5px;padding:3px 1px 3px 4px;text-align:left}
}