/* Compartit · El full de tria d'un jugador.
 *
 * El diàleg que puja de baix amb la plantilla sencera, el cercador i les
 * files per demarcació. El va escriure la porra per triar els golejadors i
 * ara també el fa servir l'onze de Xisco per omplir el camp, la banqueta i
 * MVP: és el mateix gest —"tria algú de la plantilla"— i havia de ser el
 * mateix full, no dos que s'assemblessin.
 *
 * Aquí hi ha NOMÉS el full i les seves files. El que la porra hi posa a
 * sobre —el comptador de gols de cada fila (`.comptador`), la zona de
 * golejadors ja triats (`.tria-triats`) i el botó que obre el full
 * (`.tria-obre`)— es queda a `porra/styles.css`: és seu i l'onze no en té.
 *
 * Es carrega ABANS del full de cada aplicació, que és el que deixa que
 * aquelles el retoquin (la porra aprima les files al mòbil amb un `.jug` de
 * la mateixa especificitat, i ha de guanyar per ordre).
 */

.jug-cerca{
  width:100%;padding:10px 14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(245,242,236,.18);
  border-radius:14px;color:var(--cream);font-size:.95rem;
  font-family:'Space Grotesk',sans-serif;
}
.jug-cerca::placeholder{color:rgba(245,242,236,.35)}
.jug-cerca:focus{border-color:var(--or);outline:none}

/* Full de tria (bottom sheet): l'única superfície amb scroll de la plantilla.
   L'alçada és FIXA i en `svh`, no un `max-height` en `dvh`: amb `dvh` el full
   s'encongia en obrir-se el teclat per escriure a la cerca —que és
   justament quan mires la llista— i es quedava en capçalera, cercador i mig
   jugador. Amb `svh` el full manté la mida tant si el teclat hi és com si no,
   i el teclat només en tapa la part de baix: el que has escrit i els primers
   resultats es continuen veient. */
.tria-full{
  width:min(520px,100%);max-width:100%;margin:auto auto 0;
  padding:0;border:none;overflow:hidden;height:88svh;
  color:var(--cream);background:linear-gradient(180deg,#1b1113,#100b0c);
  border-radius:22px 22px 0 0;
  box-shadow:0 -22px 60px -20px rgba(0,0,0,.9),var(--edge-hi);
}
.tria-full[open]{display:flex;flex-direction:column;animation:tria-puja .22s ease}
@keyframes tria-puja{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.tria-full::backdrop{background:rgba(6,4,5,.68);backdrop-filter:blur(3px)}
.tf-cap{display:grid;gap:12px;padding:10px 16px 14px;border-bottom:1px solid var(--hairline)}
.tf-nansa{justify-self:center;width:38px;height:4px;border-radius:2px;background:rgba(245,242,236,.22)}
.tf-cap-fila{display:flex;align-items:center;gap:10px}
.tf-titol{
  flex:1 1 auto;min-width:0;color:var(--or);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;line-height:1.35;
}
/* rep el focus en obrir el full (l'anuncien els lectors) però sense marc */
.tf-titol:focus,.tf-titol:focus-visible{outline:none}
.tf-total{flex:0 0 auto;font-size:.95rem;font-weight:700;color:rgba(245,242,236,.7)}
.tf-total.ok{color:#7ec98a}
.tf-total.mal{color:#e07070}
.tf-tanca{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;line-height:1;
  background:rgba(245,242,236,.1);font-size:1.15rem;
}
.tf-tanca:hover{background:var(--grana)}
.tf-llista{
  flex:1 1 auto;min-height:0;padding:8px 10px 14px;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.tf-llista::-webkit-scrollbar{width:8px}
.tf-llista::-webkit-scrollbar-track{background:transparent}
.tf-llista::-webkit-scrollbar-thumb{background:rgba(245,242,236,.2);border-radius:4px}
.tf-fila{display:flex;align-items:center;gap:4px}
/* les dues formes de fila hereten la graella de `.jug` (dorsal · nom · acció);
   cal el pare per guanyar en especificitat, perquè `.jug` es declara més avall */
.tf-fila .tf-tria,
.tf-fila .tf-triat{flex:1 1 auto;min-width:0;padding:11px 12px;border-radius:10px;color:inherit;text-align:left}
.tf-fila .tf-tria:disabled{opacity:.32;cursor:not-allowed}
.tf-fila .tf-tria:disabled:hover{background:none}
.tf-marca{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:rgba(245,242,236,.1);font-weight:700;font-size:.95rem;line-height:1;
}
.tf-info{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:rgba(245,242,236,.1);font-weight:700;line-height:1;
  font-family:Georgia,serif;font-style:italic;
}
.tf-info:hover{background:var(--grana)}
.tf-peu{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--hairline);background:#0d090a;
}
.tf-nota{
  flex:1 1 auto;min-width:0;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(245,242,236,.45);
}
.tf-fet{
  flex:0 0 auto;padding:10px 24px;border-radius:12px;
  background:var(--grana);color:var(--cream);font-weight:700;
}
.tf-fet:hover{background:var(--grana-lite)}

/* a pantalla gran deixa de ser un full de baix i és un diàleg centrat */
@media (min-width:720px){
  /* A l'ordinador no hi ha teclat que tapi res i el diàleg torna a fer-se de
     la mida del que hi ha dins: un full de 88svh mig buit per triar entre
     quatre noms és una paret. */
  .tria-full{
    margin:auto;border-radius:22px;
    height:auto;max-height:min(680px,82dvh);
    box-shadow:var(--shadow-hero),var(--edge-hi);
  }
}
/* Pantalles baixes (mòbil apaïsat, teclat obert): la capçalera del full es
   menja la llista, així que l'aprimem i deixem més alçada per als jugadors.
   Va després del bloc de 720px perquè li ha de guanyar l'alçada màxima. */
@media (max-height:480px){
  .tria-full{height:94svh}
  .tf-nansa{display:none}
  .tf-cap{gap:8px;padding:8px 14px 10px}
  .tf-cap .jug-cerca{padding:7px 12px}
  .tf-peu{padding:8px 14px calc(8px + env(safe-area-inset-bottom))}
}

.jug{
  display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:12px;
  padding:8px 12px;border-radius:4px;
  transition:background .15s;
}
/* capçalera de demarcació dins la llista de jugadors */
.jug-grup{
  padding:6px 12px 2px;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--or);
}
.jug-grup:not(:first-child){
  margin-top:6px;padding-top:12px;
  border-top:1px solid rgba(245,242,236,.14);
}
.jug:hover{background:rgba(245,242,236,.05)}
.jug.actiu{background:rgba(163,23,58,.12)}
.jug .dorsal{
  font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.06em;
  color:rgba(245,242,236,.75);text-align:center;
}
.jug .dorsal.sense{color:rgba(245,242,236,.25)}
.jug .nom{font-size:.95rem;line-height:1.25}
.jug .nom .cognoms{font-weight:600}

.jug-buit{padding:20px;text-align:center;color:rgba(245,242,236,.4);font-size:.9rem}

@media (max-width:340px){
  /* els selectors porten el pare per guanyar a `.jug .nom`, que va més avall */
  .tf-fila .tf-tria,.tf-fila .tf-triat{padding:10px 8px;gap:8px;grid-template-columns:24px 1fr auto}
  .tf-fila .tf-tria .nom,.tf-fila .tf-triat .nom{font-size:.9rem}
}