/* ====== Partita – Layout generale ====== */
#partita-section { display:flex; flex-direction:column; gap:14px; }
#match-panel     { display:flex; flex-direction:column; gap:16px; }

.match-header {
  display:flex; justify-content:space-between; align-items:baseline;
  padding: 8px 10px;
  background:#0f172a; color:#e2e8f0;
  border-radius:10px; box-shadow:0 2px 8px rgba(2,6,23,.35);
}
.match-header .teams { font-size:16px; }
.match-header .meta  { font-size:12px; opacity:.9; }

/* ====== Griglia live: campo + riserve ====== */
.live-layout { display:grid; grid-template-columns: 1fr 300px; gap:14px; }
.field-col   { display:flex; flex-direction:column; gap:8px; }

/* campo più piccolo */
.field {
  min-height: 300px; /* <— ridotto */
  background: linear-gradient(180deg, #065f46 0%, #064e3b 100%);
  border: 2px solid #10b981;
  border-radius: 14px;
  padding: 10px;
  display: grid;
  grid-template-rows: repeat(5, minmax(44px, 1fr)); /* <— righe più basse */
  gap: 8px;
  box-shadow: inset 0 0 0 2px rgba(16,185,129,.3), 0 12px 30px rgba(0,0,0,.25);
}

/* Slot in campo più compatti */
.live-slot {
  background: rgba(255,255,255,0.06);
  border: 1px dashed rgba(255,255,255,0.25);
  border-radius: 10px;
  display: flex; align-items: center;
  padding: 8px 10px; /* <— ridotto */
  color: #ecfeff; font-size: 14px;
}
.live-slot .empty { opacity:.85; font-weight:700; letter-spacing:.3px; }
.live-slot .assigned { width:100%; display:flex; justify-content:space-between; gap:8px; align-items:center; }
.live-slot .assigned .name { font-weight:700; letter-spacing:.2px; display:flex; align-items:center; gap:6px; }
.live-slot .assigned .name .role {
  font-size: 11px;
  background: rgba(15,23,42,.5);
  border:1px solid rgba(148,163,184,.35);
  padding: 2px 6px; border-radius: 999px; color:#cbd5e1;
}
.live-slot .assigned .cond {
  font-size: 11px;
  background: rgba(16,185,129,.18);
  border: 1px solid rgba(16,185,129,.35);
  padding: 2px 8px; border-radius: 999px; color: #bbf7d0;
}

.controls { display:flex; gap:8px; }
.fatigue-note { color:#475569; font-size:12px; }

/* ====== Colonna riserve ====== */
.reserves-col {
  background:#0b1020; border:1px solid #1f2a44; border-radius:12px;
  padding:10px; color:#e2e8f0; box-shadow:0 8px 22px rgba(2,6,23,.35);
}
.reserves-col h4 { margin:2px 0 8px; font-size:15px; }
.reserves { display:flex; flex-direction:column; gap:8px; max-height:360px; overflow:auto; padding-right:4px; }
.pill {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:7px 9px; border-radius:999px; background:#1f2937; border:1px solid #374151;
  color:#f8fafc; cursor:grab; user-select:none; transition:transform .08s, box-shadow .12s, background .12s;
  font-size:14px;
}
.pill:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.25); background:#0f172a; }
.pill .n { font-weight:700; }
.pill .c {
  font-size:11px; background:#0b4a3b; border:1px solid #14532d; padding:2px 8px; border-radius:999px; color:#86efac;
}
.pill .inf {
  font-size:10px; background:#4c0519; border:1px solid #7f1d1d; padding:2px 6px; border-radius:6px; color:#fecaca;
}

/* ====== Timeline ====== */
.timeline {
  background:#0b1020; border:1px solid #1f2a44; border-radius:12px; padding:10px; color:#e2e8f0;
}
.timeline h4 { margin:2px 0 8px; font-size:15px; }
.timeline ol { padding-left:18px; margin:0; display:grid; gap:6px; }
.timeline li {
  padding:6px 8px; border-left:3px solid #334155; background:rgba(148,163,184,.08); border-radius:6px;
}

/* ===== Snapshot pre-partita ===== */
.pregame { display:flex; align-items:center; gap:10px; }
.snap-row { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.team-box {
  background:#0b1020; border:1px solid #1f2a44; border-radius:10px; padding:8px; color:#e2e8f0;
}
.team-box h4 { margin:0 0 6px 0; }
.team-box ul { margin:0; padding-left:16px; }

@media (max-width: 980px) { .live-layout { grid-template-columns: 1fr; } }


/* ====== Barre statistiche pre-gara (senza numeri) ====== */
.team-box { position: relative; }
.statbars { display: grid; gap: 8px; }
.statbars .stat { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 8px; }
.statbars .label { color:#cbd5e1; font-size:12px; text-transform: uppercase; letter-spacing:.4px; }
.statbars .bar {
  height: 10px; background: #0f172a; border: 1px solid #1f2a44; border-radius: 999px; overflow: hidden;
}
.statbars .bar i {
  display:block; height:100%; width:40%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
}


/* ================== OVERRIDES COMPATTI PER PARTITA ================== */
:root {
  /* manopole veloci */
  --field-min-h: 190px;   /* altezza minima del campo (default prima era ~260px) */
  --slot-min-h: 38px;     /* altezza minima slot giocatore */
  --slot-pad: 6px 8px;    /* padding slot */
  --reserves-w: 260px;    /* larghezza colonna riserve */
  --timeline-max-h: 460px;/* altezza massima timeline (più grande = più visibilità) */
  --timeline-font: 0.98rem;
  --name-font: 0.95rem;
  --role-badge-font: 0.70rem;
  --cond-font: 0.85rem;
}

/* Layout: campo + riserve */
.live-layout {
  grid-template-columns: 1fr var(--reserves-w);
  gap: 10px;
}

/* Campo più compatto */
.field {
  min-height: var(--field-min-h);
  gap: 8px;
  padding: 10px;
}

/* Slot giocatore più piccoli */
.live-slot {
  min-height: var(--slot-min-h);
  padding: var(--slot-pad);
  border-radius: 8px;
}
.live-slot .name { font-size: var(--name-font); }
.live-slot .name .role { font-size: var(--role-badge-font); padding: 1px 6px; }
.live-slot .cond { font-size: var(--cond-font); }

/* Colonna Riserve più stretta e compatta */
.reserves-col { padding: 8px; }
.reserves-col h4 { font-size: 0.98rem; margin: 0 0 6px; }
.reserves { gap: 6px; max-height: 280px; }
.pill { padding: 6px 8px; border-radius: 8px; }
.pill .n { font-size: 0.95rem; }
.pill .c { font-size: 0.85rem; }

/* Timeline più importante: più alta, scrollabile, font leggermente più grande */
.timeline {
  padding: 10px;
  max-height: var(--timeline-max-h);
  overflow: auto;
}
.timeline h4 { margin: 0 0 6px; }
.timeline ol { font-size: var(--timeline-font); }
.timeline li { padding: 6px 2px; }

/* Barre pre-gara leggermente più compatte (se le usi) */
.snap-row { gap: 10px; }
.team-box { padding: 8px; }
.stat { grid-template-columns: 86px 1fr; gap: 8px; }
.stat .label { font-size: 0.85rem; }
.stat .bar { height: 8px; }
