/* Fantadragons — Formazioni / Risultati UI v2
   Foglio dedicato alla sola pagina /formazioni/.
   Non modifica il tema globale fd.css.
*/

/* =========================================================
   MATCH E CARD SQUADRA
   ========================================================= */

.matches{
  gap:22px;
}

.match-block{
  margin:6px 0 26px;
}

.match-title{
  margin:8px 2px 10px;
  color:#aeb8c2;
  font-size:.82rem;
  letter-spacing:.055em;
}

.match-title .line{
  background:rgba(255,255,255,.10);
}

.match-title .label{
  background:transparent;
  padding:0;
  color:#aeb8c2;
}

.team-card{
  min-height:420px;
  padding:14px;
  overflow:hidden;
  border:1px solid rgba(151,166,180,.18);
  border-radius:13px;
  background:
    linear-gradient(155deg, #222d36 0%, #1b252e 58%, #17212a 100%);
  box-shadow:
    0 13px 30px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.025);
}

/* =========================================================
   HEADER SQUADRA
   ========================================================= */

.team-head{
  position:relative;
  overflow:hidden;
  min-height:88px;
  margin:0 0 16px;
  padding:12px 14px;
  border-radius:11px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 7px 18px rgba(0,0,0,.18);
}

/* Accento diagonale discreto, come nel mockup */
.team-head::after{
  content:"";
  position:absolute;
  z-index:0;
  top:-24px;
  right:64px;
  width:118px;
  height:145px;
  transform:skewX(-18deg);
  background:
    linear-gradient(
      90deg,
      transparent 0 18%,
      rgba(255,255,255,.08) 18% 28%,
      transparent 28% 38%,
      rgba(255,255,255,.055) 38% 48%,
      transparent 48% 100%
    );
  pointer-events:none;
}

.team-head-inner{
  position:relative;
  z-index:1;
  gap:12px;
}

.score-badge{
  position:absolute;
  z-index:2;
}

.team-logo{
  width:54px;
  height:54px;
  border-radius:12px;
  background:rgba(7,14,22,.52);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 6px 13px rgba(0,0,0,.22);
}

.team-name{
  color:#fff;
  font-size:19px;
  font-weight:850;
  letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
}

.team-meta{
  margin-top:2px;
  color:rgba(255,255,255,.88);
  font-size:12px;
}

/* QPM non era presente nei vecchi gradient per-club */
.team-head.qpm{
  background:linear-gradient(120deg,#10243a 0%,#173e67 58%,#10253d 100%);
  border-color:#3879b6;
}

/* Mantiene i colori sociali già definiti in fd.css, rendendoli appena più netti */
.team-head.athletic-cs{
  background:linear-gradient(120deg,#d20b19 0%,#a60d19 58%,#7d1018 100%);
}

.score-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  top:10px;
  right:10px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(7,14,22,.78);
  color:#f8fbff;
  font-size:24px;
  font-weight:850;
  line-height:1;
  border:1px solid rgba(167,187,205,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(0,0,0,.10),
    0 8px 18px rgba(0,0,0,.16);
}

/* =========================================================
   TITOLARI / RISERVE
   ========================================================= */

.team-sec{
  margin-top:13px;
}

.team-sec-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:28px;
  padding:0 7px 7px;
}

.team-sec-title{
  color:#e5ebf0;
  font-size:16px;
  font-weight:750;
}

.team-sec-col{
  min-width:56px;
  text-align:center;
  color:#aeb9c4;
  font-size:12px;
}

/* Una lista continua, non più tante "scatolette" separate */
.player-line{
  min-height:43px;
  margin:0;
  padding:9px 11px;
  border:0;
  border-bottom:1px solid rgba(229,235,240,.14);
  border-radius:0;
  background:#3d4852;
  color:#f6f8fa;
  box-shadow:none;
}

/* Zebra appena percepibile */
.team-sec > .player-line:nth-child(odd){
  background:#39444e;
}

.team-sec > .player-line:nth-child(even){
  background:#414c56;
}

/* Arrotondamento solo dell'intero blocco visuale */
.team-sec-head + .player-line{
  border-radius:9px 9px 0 0;
}

.team-sec > .player-line:last-child{
  border-bottom:0;
  border-radius:0 0 9px 9px;
}

.player-line.ghost{
  opacity:.90;
  color:#e5e9ed;
}

.player-line .player-name{
  color:#f8fafb;
  font-weight:700;
}

.player-line .player-team3{
  color:#b6c0c9;
  font-size:12px;
  font-weight:500;
}

.player-line .right.stats{
  gap:8px;
}

/* Il trattino senza voto resta discreto */
.player-line:not(.has-vote) .vote{
  color:#d7dde2;
  opacity:.72;
}

.player-line:not(.has-vote) .fv{
  color:#d7dde2;
  opacity:.75;
}

/* =========================================================
   CHIP RUOLI
   ========================================================= */

.chip-role{
  flex:0 0 auto;
  width:25px;
  height:25px;
  margin-right:7px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 2px 5px rgba(0,0,0,.16);
}

.chip-role[data-role="P"], .chip-role.P{
  background:#2e6cca;
  color:#fff;
}

.chip-role[data-role="D"], .chip-role.D{
  background:#15964e;
  color:#fff;
}

.chip-role[data-role="C"], .chip-role.C{
  background:#bb8217;
  color:#fff;
}

.chip-role[data-role="T"], .chip-role.T{
  background:#7051ad;
  color:#fff;
}

.chip-role[data-role="A"], .chip-role.A{
  background:#ce3840;
  color:#fff;
}

/* =========================================================
   VOTI: PROVVISORI VS DEFINITIVI
   ========================================================= */

/* Preview: pill gialla piena, immediatamente riconoscibile */
.player-line.preview-vote .vote{
  min-width:45px;
  padding:4px 8px;
  border-radius:7px;
  background:linear-gradient(180deg,#f6cf4a,#e7b72a);
  color:#17202a;
  font-weight:850;
  text-align:center;
  opacity:1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 2px 7px rgba(0,0,0,.20);
}

/* Definitivo: stesso giallo, ma soltanto tipografico */
.player-line.has-vote:not(.preview-vote) .vote{
  min-width:39px;
  color:#f3c744;
  background:transparent;
  font-weight:850;
  opacity:1;
  text-align:right;
  text-shadow:0 1px 1px rgba(0,0,0,.20);
}

/* Il FV definitivo rimane separato dal voto base */
.player-line.has-vote:not(.preview-vote) .fv{
  color:#fff;
  font-weight:850;
}

/* =========================================================
   ICONE EVENTI SVG — v2.4
   ========================================================= */

.player-line .evs{
  display:flex;
  align-items:center;
  gap:5px;
  min-height:24px;
  padding:1px 4px;
  border-radius:6px;
  background:rgba(19,27,34,.18);
}

.player-line .evs:empty{
  display:none;
  min-height:0;
  padding:0;
  background:transparent;
}

.player-line .ev{
  width:20px;
  height:20px;
  flex:0 0 20px;
  display:inline-block;
  background-size:auto 20px;
  background-repeat:no-repeat;
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.30))
    saturate(1.08)
    contrast(1.08);
}

.player-line .ev-gf   { background-position:   0    0; }
.player-line .ev-ass  { background-position: -20px 0; }
.player-line .ev-amm  { background-position: -40px 0; }
.player-line .ev-esp  { background-position: -60px 0; }
.player-line .ev-r    { background-position: -80px 0; }
.player-line .ev-rs   { background-position:-100px 0; }
.player-line .ev-rp   { background-position:-120px 0; }
.player-line .ev-au   { background-position:-140px 0; }
.player-line .ev-gs   { background-position:-160px 0; }
.player-line .ev-in   { background-position:-180px 0; }
.player-line .ev-out  { background-position:-200px 0; }

/* =========================================================
   RISERVE — tono più discreto rispetto ai titolari
   ========================================================= */

.bench-sec .team-sec-title{
  color:#c8d1da;
  font-size:15px;
  font-weight:700;
}

.bench-sec .team-sec-col{
  color:#9eacb9;
}

.bench-sec .player-line{
  min-height:39px;
  padding:8px 11px;
  font-size:.96rem;
  color:#d8dee5;
  background:#38434d;
}

.bench-list > .player-line:nth-child(odd){
  background:#343f49;
}

.bench-list > .player-line:nth-child(even){
  background:#39444e;
}

.bench-sec .player-name{
  font-weight:700;
  opacity:.90;
}

.bench-sec .player-team3{
  color:#aab4be;
  opacity:.82;
}

.bench-sec .chip-role{
  opacity:.52;
  filter:saturate(.7);
}

.bench-sec .vote,
.bench-sec .fv{
  opacity:.88;
}

.bench-sec .evs{
  opacity:.80;
}

.bench-list > .player-line:first-child{
  border-radius:9px 9px 0 0;
}

.bench-list > .player-line:last-child{
  border-bottom:0;
  border-radius:0 0 9px 9px;
}

.bench-list > .player-line:only-child{
  border-radius:9px;
}

.bench-head-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  min-width:0;
}

.bench-toggle{
  appearance:none;
  border:1px solid rgba(154,171,186,.20);
  border-radius:999px;
  padding:5px 9px;
  background:rgba(8,16,24,.28);
  color:#c4ced7;
  font:inherit;
  font-size:11px;
  font-weight:650;
  line-height:1.2;
  cursor:pointer;
  white-space:nowrap;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .08s ease;
}

.bench-toggle:hover{
  background:rgba(143,178,217,.10);
  border-color:rgba(143,178,217,.32);
  color:#edf2f6;
}

.bench-toggle:active{
  transform:translateY(1px);
}

.bench-toggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(143,178,217,.20);
}

/* Animazione senza altezze hard-coded: il contenuto viene compresso in una grid row */
.bench-collapse{
  display:grid;
  grid-template-rows:1fr;
  opacity:1;
  transition:grid-template-rows .22s ease, opacity .16s ease;
}

.bench-list{
  min-height:0;
  overflow:hidden;
}

.bench-sec.is-collapsed .bench-collapse{
  grid-template-rows:0fr;
  opacity:0;
  pointer-events:none;
}

.bench-sec.is-collapsed .team-sec-head{
  padding-bottom:2px;
}

/* =========================================================
   TOTALI / MODIFICATORI FINALI
   ========================================================= */

.team-tsbar{
  padding:11px 5px 2px;
}

.team-tsbar .chip.score{
  min-width:60px;
  padding:5px 9px;
  border-radius:7px;
  background:#d7ad32;
  color:#17212a;
  font-size:17px;
  box-shadow:0 3px 8px rgba(0,0,0,.18);
}

.team-mods{
  margin-top:8px;
  padding:7px 9px;
  border-radius:7px;
  background:#303b45;
  color:#dce3e8;
  border:1px solid rgba(255,255,255,.07);
}

/* =========================================================
   BANNER PREVIEW
   ========================================================= */

.preview-banner{
  margin:0 0 17px;
  padding:10px 14px;
  border:1px solid rgba(231,183,42,.30);
  border-radius:9px;
  background:
    linear-gradient(135deg,rgba(83,64,20,.44),rgba(31,42,51,.90));
  color:#efe5c3;
}

.preview-banner strong{
  color:#f6cf4a;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:800px){
  /* Mantiene la squadra Serie A accanto al nome anche su mobile.
     Solo il blocco voto/bonus viene spinto a destra. */
  .player-line .player-name{
    flex:0 1 auto;
    min-width:0;
  }

  .player-line .player-team3{
    flex:0 0 auto;
  }

  .player-line .right.stats{
    margin-left:auto;
  }

  .player-line svg.ev{
    width:20px;
    height:20px;
    flex-basis:20px;
  }

  .bench-sec .team-sec-col{
    display:none;
  }

  .bench-head-actions{
    gap:0;
  }

  .bench-toggle{
    padding:6px 10px;
    font-size:11px;
    background:rgba(8,16,24,.34);
  }

  .bench-sec.is-collapsed{
    margin-top:10px;
  }

  .team-card{
    padding:11px;
    border-radius:11px;
  }

  .team-head{
    min-height:80px;
    padding:10px 11px;
    margin-bottom:13px;
  }

  .team-logo{
    width:46px;
    height:46px;
  }

  .team-name{
    font-size:17px;
  }

  .team-meta{
    font-size:11px;
  }

  .score-badge{
    width:42px;
    height:42px;
    top:10px;
    right:10px;
  }

  .player-line{
    min-height:41px;
    padding:8px 8px;
  }

  .player-line .player-name{
    font-size:.93rem;
  }

  .player-line .player-team3{
    font-size:11px;
  }

  .chip-role{
    width:23px;
    height:23px;
    margin-right:5px;
  }

  .team-sec-title{
    font-size:15px;
  }

  .team-sec-col{
    min-width:48px;
    font-size:11px;
  }

  .player-line.preview-vote .vote{
    min-width:42px;
    padding:3px 6px;
  }
}

@media (max-width:480px){
  .team-head::after{
    right:48px;
    opacity:.68;
  }

  .player-line{
    gap:4px;
  }

  .player-line .right.stats{
    gap:4px;
  }
}


.player-line .right.stats{ gap:8px; }