/* 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 perquè la pàgina és fosca, però no apagada: d'aquest camp
   se'n fan captures i el que es comparteix ha de semblar un camp i no un
   requadre gris amb rodones. Les ratlles de la sega, el punt de llum de dalt i
   la vinyeta dels costats són tres degradats i prou —sense imatges ni
   dependències—, i s'estiren amb la caixa.

   `container-type:inline-size` fa que tot el que hi ha a dins es mesuri amb
   l'ample DEL CAMP (`cqw`) i no amb el de la finestra: a la pantalla de com ha
   anat hi ha dos camps de costat, cadascun de mig ample, i amb `vw` els
   cromos i els noms sortien de mida de pantalla gran dins d'un camp petit. */
.camp{
  position:relative;container-type:inline-size;
  /* 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. És la
     proporció que també fa servir el `viewBox` de les marques. */
  aspect-ratio:68/88;width:100%;
  border-radius:18px;overflow:hidden;
  border:1px solid rgba(245,242,236,.16);
  background:
    /* El punt de llum, com un focus des de la graderia de dalt. */
    radial-gradient(115% 78% at 50% -12%, rgba(226,255,232,.10), transparent 62%),
    /* La sega: catorze passades, com un camp de debò el dia del partit. */
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.05) 0 7.14%, rgba(0,0,0,.06) 7.14% 14.28%),
    linear-gradient(172deg, #1b3d27 0%, #123024 48%, #0b1f17 100%);
  box-shadow:
    /* La vinyeta: fosca als quatre costats, que és el que fa que la gespa
       sembli que té fondària i no que és un tros de paper pintat. */
    inset 0 0 70px 18px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.07),
    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(255,255,255,.30);stroke-width:.42;
  vector-effect:non-scaling-stroke;
}
/* El punt central i els de penal: són marques plenes i no traçades. */
.camp-linies .camp-punt{fill:rgba(255,255,255,.34);stroke:none}
.camp-linies-jugadors{position:absolute;inset:0;z-index:2}

/* ── La marca d'aigua ──
   El segell de la casa al mig del camp, sota tothom i ben apagat. És una marca
   d'aigua i no un rètol: ha de sortir a la captura que algú penja i no s'ha de
   llegir abans que l'onze. Per això va GRAN i molt transparent en comptes de
   petit i nítid —així no ha de buscar un forat entre línies que, segons el
   dibuix, no existeix: passa per sota de tothom i no molesta ningú.

   Rodó i centrat, cau al cercle central. La imatge és de 128 px i aquí es
   veu més gran: a aquesta transparència no es nota, i és l'únic logotip que
   tenim en fitxer. */
.camp-marca{
  position:absolute;left:0;right:0;top:50%;z-index:1;
  transform:translateY(-50%);
  display:flex;justify-content:center;
  pointer-events:none;user-select:none;
}
.camp-marca-logo{
  /* Just la mida del cercle central, que fa un 54% de l'ample del camp: és
     el forat que li toca i el que fa que es vegi a la captura que algú penja
     —més petit es perdia entre els cromos i, comprimit per Twitter, no
     s'arribava a llegir. Un pèl menys transparent pel mateix motiu, però
     prou perquè les plaques dels noms hi passin per sobre sense barallar-s'hi. */
  width:clamp(76px,52cqw,230px);height:auto;
  opacity:.15;
}
/* 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%. */
/* La línia no reparteix res: és només la barra a la seva alçada. Qui diu on
   cau cadascú és el seu CARRIL (`--carril`, que hi posa `laneStyles` de
   match-report.js), i per això els llocs van absoluts a dins i no en flux.

   Abans anaven en flux amb `justify-content:space-evenly`, que reparteix a
   parts iguals i prou: una línia de dos sempre sortia al terç i als dos
   terços, i qui volia dos extrems oberts es quedava amb dos interiors. Els
   repartiments per defecte dels carrils cauen on queia el `space-evenly`,
   de manera que el que no s'ha mogut de lloc es continua dibuixant igual. */
.camp-linia{
  position:absolute;left:0;right:0;height:0;
  list-style:none;
}
/* 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%}

/* La mida del cromo la mana el camp i la fan servir les dues cares que té —la
   samarreta de mirar i el cromo de triar—, que han de sortir iguals. Es mesura
   amb l'ample del camp (`cqw`) i no amb el de la finestra: vegeu `.camp`. */
.camp{--cromo:clamp(28px,13cqw,52px)}
/* Amb quatre línies de camp (cinc amb el porter) el terreny s'ha de repartir
   entre més gent i el cromo s'encongeix: un 4-2-3-1 o un 3-4-1-2 amb cromos
   de 4-4-2 deixava els noms d'una línia damunt dels cromos de la següent.
   Es mira quantes línies hi ha pintades i no cap classe: el dibuix ja no es
   tria d'una llista, es compta del camp. */
.camp:has(.camp-linia:nth-child(5)){--cromo:clamp(26px,11cqw,44px)}

/* Un lloc del camp, centrat al seu carril. `--carril` és on cau i `--ample`
   quant pot ocupar sense trepitjar el veí ni sortir per la banda; els dos els
   calcula `laneStyles` (match-report.js) mirant tota la línia alhora, perquè
   quant pot ocupar un lloc depèn de què té al costat.

   Els dos tenen valor de reserva perquè el mateix marcatge es fa servir fora
   del camp —la banqueta i MVP de l'onze—, on no hi ha carrils. */
.camp-linia > .camp-jugador,
.camp-linia > .camp-lloc{
  position:absolute;top:0;
  left:var(--carril,50%);width:var(--ample,26%);
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:5px;
  min-width:0;
}
/* La línia és una ratlla sense alçada i els llocs hi pengen cap avall; la del
   porter, en canvi, s'ancora al PEU del camp, i per tant el seu ha de créixer
   cap amunt o li quedaria mig cromo fora de la gespa. */
.camp-linia--porter > .camp-jugador,
.camp-linia--porter > .camp-lloc{top:auto;bottom:0}
/* L'ombra a terra. És el que fa que el cromo estigui SOBRE la gespa i no
   enganxat com un adhesiu: una taca fosca i desenfocada just a sota, que a
   més separa el nom de les ratlles del camp. */
.camp-samarreta::after,
.camp-cromo::after{
  content:"";position:absolute;z-index:-1;
  left:8%;right:8%;bottom:-7%;height:26%;
  border-radius:50%;background:rgba(0,0,0,.55);filter:blur(3px);
}
.camp-samarreta{
  position:relative;
  width:var(--cromo,32px);aspect-ratio:1;
  display:grid;place-items:center;border-radius:50%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 58%),
    linear-gradient(166deg, var(--grana-lite), var(--grana) 52%, #85101f);
  border:1px solid rgba(212,175,106,.5);
  box-shadow:0 4px 10px -2px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.3);
}
.camp-dorsal{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(.7rem,4.4cqw,.95rem);color:var(--cream);
  font-variant-numeric:tabular-nums;line-height:1;letter-spacing:0;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}
/* Sense dorsal fitxat no hi ha xapa: a la plantilla n'hi ha molts que encara
   no en tenen, i una píndola grana amb un punt a dins era soroll a cada
   cromo. Qui no en té es queda amb la cara sola, que ja el diu. */
.camp-dorsal:empty{display:none}
/* 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,
.camp-jugador.substituit .camp-cromo{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);
}
/* El nom va dins d'una placa i no directament sobre la gespa. Les ratlles del
   camp passen just per darrere (el porter cau sobre l'àrea petita) i, amb el
   text sol, l'única manera de separar-lo era una ombra tan carregada que el
   nom quedava tacat. La placa el separa de debò, i de passada fa que la fila
   de noms es llegeixi com una alineació i no com onze paraules escampades. */
.camp-nom{
  font-size:clamp(.55rem,3cqw,.74rem);line-height:1.2;text-align:center;
  color:var(--cream);font-weight:500;letter-spacing:.005em;
  padding:.16em .5em;border-radius:.55em;
  background:rgba(6,13,9,.72);
  border:1px solid rgba(245,242,236,.13);
  box-shadow:0 2px 6px rgba(0,0,0,.5);
  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)}
/* El gol del rival hi és perquè el partit s'entengui —un 3-2 no s'explica amb
   tres gols—, però és el seu i no una fita nostra: la pilota va apagada. */
.acta-del-rival{opacity:.62}
.acta-nota{font-size:.8rem;color:rgba(245,242,236,.45)}
/* La targeta a la llista de fets: la mateixa marca que al camp, però aquí no
   va enganxada a cap samarreta i pot ser una mica més gran. */
.acta-llista .camp-targeta{width:9px;height:13px;border-radius:2px;align-self:center}
.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. */

/* Els llocs es col·loquen pel carril com els de mirar (vegeu `.camp-linia`):
   aquí no hi ha res a repartir. */
.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:var(--cromo,40px);aspect-ratio:1;
  display:grid;place-items:center;border-radius:50%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 58%),
    linear-gradient(166deg, var(--grana-lite), var(--grana) 52%, #85101f);
  border:1px solid rgba(212,175,106,.5);
  box-shadow:0 4px 10px -2px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.3);
  transition:border-color .18s, opacity .18s, transform .18s, box-shadow .18s;
}
/* La foto no arriba a la vora: deixa veure un fil del cèrcol de sota, que és
   el que fa que la cara sembli emmarcada i no retallada amb tisores.

   El quadrat surt de dalt de la foto (`0%` i no `12%`): les fotos venen
   enquadrades amb el cap a la primera quarta part, i qualsevol valor més
   alt fa baixar la finestra i deixa la xapa mirant-se un pit. */
.camp-cromo-foto{
  position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);
  border-radius:50%;
  object-fit:cover;object-position:50% 0;
  background:#14090c;
}
/* 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,.7)}
.camp-cromo.amb-foto .camp-dorsal,
.camp-cromo.sense-foto .camp-dorsal{
  position:absolute;right:-6%;bottom:-4%;z-index:3;
  min-width:1.6em;padding:.12em .32em;border-radius:999px;
  background:linear-gradient(180deg, var(--grana-lite), var(--grana));
  border:1px solid rgba(245,242,236,.5);
  box-shadow:0 2px 5px rgba(0,0,0,.75);
  font-size:clamp(.5rem,2.9cqw,.66rem);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)}

/* ── Arrossegar la gent pel camp ────────────────────────────
   El gest el fa `/shared/ui/pitch-drag.js`; aquí hi ha com es veu.

   No hi ha cap `touch-action:none`: al mòbil el cromo s'agafa mantenint-lo
   premut, i qui atura el desplaçament de la pàgina és el mòdul, un cop
   agafat. Amb `touch-action:none` la pàgina no s'hauria pogut desplaçar mai
   des de damunt d'un cromo, i onze cromos ocupen mig camp.

   El que sí que cal és que mantenir premut no obri el menú del sistema ni
   seleccioni res ni comenci a arrossegar la foto pel seu compte: és el que
   fan `-webkit-touch-callout`, `user-select` i `-webkit-user-drag`. */
.camp-edit .tria-lloc{
  -webkit-touch-callout:none;user-select:none;-webkit-user-select:none;
}
/* La nansa dels llocs amb desplegable (l'acta): sis punts damunt del
   desplegable. Hi és perquè allà el lloc sencer no es pot agafar —prémer un
   `<select>` obre la seva llista— i sense nansa el camp de l'admin seria
   l'únic que no es pot col·locar arrossegant. */
.camp-nansa{
  position:absolute;left:50%;top:-11px;transform:translateX(-50%);
  width:26px;height:12px;border-radius:5px;cursor:grab;
  background:
    radial-gradient(circle, rgba(245,242,236,.55) 1px, transparent 1.2px)
    0 0/5px 5px;
  background-color:rgba(10,7,8,.75);
  border:1px solid rgba(245,242,236,.18);
  -webkit-touch-callout:none;user-select:none;touch-action:none;
}
.camp-nansa:hover{border-color:var(--or);background-color:rgba(163,23,58,.35)}
.camp-lloc:has(.camp-nansa){padding-top:2px}
.camp-edit .tria-lloc img{-webkit-user-drag:none}
.camp-edit .tria-lloc .camp-cromo{cursor:grab}
.camp-edit .tria-lloc:active .camp-cromo{cursor:grabbing}
/* El porter no es mou: la seva àrea és seva i no s'intercanvia amb ningú. */
.camp-edit .camp-linia--porter .tria-lloc .camp-cromo{cursor:pointer}

/* Mantenint premut: el cromo s'infla durant els mateixos 300 ms que s'espera
   (l'`ESPERA` de pitch-drag.js). És el que diu que allò s'està agafant i quant
   queda —sense això, mantenir premut era mig segon en què no passava res i
   ningú s'hi esperava. Si el dit es mou o s'aixeca abans, la classe se'n va i
   el cromo torna sol al seu lloc. */
.camp-lloc.esperant .camp-cromo{
  transform:scale(1.14);
  border-color:var(--or);
  box-shadow:0 0 0 3px rgba(212,175,106,.25), 0 6px 16px rgba(0,0,0,.6);
  transition:transform .3s ease-out, box-shadow .3s ease-out, border-color .15s;
}
@media (prefers-reduced-motion:reduce){
  .camp-lloc.esperant .camp-cromo{transition:box-shadow .3s, border-color .15s}
}

/* Mentre s'arrossega, la resta del camp s'aparta una mica de la vista: el que
   importa és on caurà, no qui hi ha. */
.camp.arrossegant .camp-lloc{transition:opacity .15s}
.camp.arrossegant .camp-lloc:not(.origen){opacity:.72}
/* D'on surt: el forat es queda marcat i buit. Sense això, arrossegar semblava
   copiar algú i no moure'l. */
.camp-lloc.origen .camp-cromo{
  opacity:.25;border-style:dashed;box-shadow:none;
}
.camp-lloc.origen .camp-nom{opacity:.25}

/* El cromo que segueix el dit. Va enganxat al `<body>` i no al camp perquè
   no el retalli la gespa quan el gest surti per la vora. */
.camp-fantasma{
  position:fixed;left:0;top:0;z-index:120;
  pointer-events:none;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.8));
}
.camp-fantasma .camp-cromo{
  width:100%;height:100%;
  transform:scale(1.18);
  border-color:var(--or);
  box-shadow:0 0 0 3px rgba(212,175,106,.3), 0 10px 24px rgba(0,0,0,.75);
  opacity:.96;
}

/* On caurà: una barra a l'alçada de la línia que el rebrà. Traçada quan el
   que s'obre és una línia NOVA —que és com es canvia de dibuix sense tocar
   cap desplegable— i plena quan és una línia que ja hi era. */
.camp-diana{
  position:absolute;left:4%;right:4%;height:0;z-index:3;
  pointer-events:none;transform:translateY(-50%);
  border-top:2px solid rgba(212,175,106,.85);
  box-shadow:0 0 14px 2px rgba(212,175,106,.35);
}
.camp-diana.nova{
  border-top-style:dashed;border-top-color:rgba(126,201,138,.9);
  box-shadow:0 0 14px 2px rgba(126,201,138,.3);
}
/* I on de la barra: la rodona marca el CARRIL on caurà. La barra sola deia a
   quina alçada anava, i des que els carrils existeixen l'amplada també és una
   decisió —arrossegar de banda obre o tanca el dibuix. */
.camp-diana::after{
  content:"";position:absolute;top:-6px;
  left:calc((var(--carril,50%) - 4%) / .92);
  width:12px;height:12px;margin-left:-6px;border-radius:50%;
  background:var(--or);box-shadow:0 0 10px 2px rgba(212,175,106,.5);
}
.camp-diana.nova::after{
  background:#7ec98a;box-shadow:0 0 10px 2px rgba(126,201,138,.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}
}