/* Fantadragons UI — Deep Sea theme
   Palette (by user):
   --bg-900 #0D1B2A, --bg-800 #1B263B, --bg-700 #415A77, --bg-600 #778DA9, --bg-100 #E0E1DD
*/
:root{
  /* scale & radii */
  --gap: 12px; --radius: 14px;
  /* palette */
  --bg-900:#0D1B2A; /* page */
  --bg-800:#1B263B; /* surface */
  --bg-700:#415A77; /* cards/primary */
  --bg-600:#778DA9; /* accents, hover */
  --bg-100:#E0E1DD; /* text light */
  /* derived */
  --page: var(--bg-900);
  --surface: #142233; /* blend of 0D1B2A/1B263B for contrast */
  --card: #18263A;    /* a touch lighter than surface */
  --border:#33425E;   /* lines */
  --text:#E0E1DD;     /* main text */
  --muted:#B8C5D3;    /* secondary text */
  --accent:#8FB2D9;   /* interactive accents on dark bg */
  --accent-strong:#6E90B5; /* pressed/active */
  --ok:#36C690; --err:#F87171; /* semantic */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background: var(--page);
}
a{color:var(--accent)}

h2 { font-family:"Oswald",system-ui,-apple-system,Segoe UI,sans-serif; }

/* Layout */
.container{ position: relative; background:#0d1b24 url("/assets/header2025.jpg") top center no-repeat; max-width:960px; margin:0 auto; padding:16px; padding-top: 170px; }
.row{display:flex; flex-wrap:wrap; gap:var(--gap)}
.col{flex:1 1 280px}
.grid{display:grid; gap:var(--gap)}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:720px){ .grid.cols-2,.grid.cols-3{grid-template-columns:1fr} }

header{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 0; }
.brand{display:flex; align-items:center; gap:10px}
.brand img{width:36px; height:36px; border-radius:8px; object-fit:cover}
.brand h1{font-size:18px; margin:0}
.muted{color:var(--muted)}

/* Surfaces */
.card{
  background: linear-gradient(180deg,var(--card), #1C2C43);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px; box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.pill{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:var(--surface); font-size:12px}

/* Buttons */
.btn{appearance:none; border:0; padding:10px 14px; margin: 2px 0; border-radius:10px; cursor:pointer; background:#223650; color:var(--text); transition:filter .15s, transform .06s}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.btn.primary{background:#40808C;}
.btn.ghost{background:transparent; border:1px solid var(--border)}
.btn.danger{background: linear-gradient(180deg,#E04E4E,#C63D3D)}
#submitBtn {background:#C33063;}

/* Inputs */
label{display:block; font-size:14px; margin-bottom:6px}
input,select{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:#0F1B2B; color:var(--text); outline:none;
}
input:focus, select:focus{ box-shadow:0 0 0 3px rgba(143,178,217,.35); border-color: var(--bg-600); }

/* Stepper */
.stepper{display:flex; gap:10px; overflow:auto; padding:4px 0 12px}
.step{display:flex; align-items:center; gap:10px}
.step .dot{width:28px; height:28px; border-radius:999px; background:#223650; display:grid; place-items:center; border:1px solid var(--border)}
.step.active .dot{background:#5A8C40;}
.step.done .dot{background:#586174;}
.step .title{white-space:nowrap; font-size:14px}

/* Roster */
.role{background:#212F48; border:1px solid var(--border); border-radius:12px; padding:12px}
.role h3{margin:0 0 10px 0; color: #778DA9; font-size:15px; font-weight:600}
.player{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px; border-radius:10px; border:1px solid var(--border); margin:6px 0; background:#0F1B2B}
.player small{color:var(--muted)}
.counter{display:flex; gap:8px; flex-wrap:wrap}
.counter .pill{background:#0F1B2B}

/* Bench */
.benchSlots{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap)}
@media (max-width:720px){ .benchSlots{grid-template-columns:1fr} }

.status{font-weight:600}
.status.ok{color:var(--ok)}
.status.err{color:var(--err)}
.footer{display:flex; gap:10px; justify-content:flex-end; margin-top:16px}

/* Styled checkboxes */
.player input[type="checkbox"]{
  appearance: none; width:22px; height:22px; border:1px solid #394B6B;
  border-radius:6px; background:#0F1B2B; display:inline-grid; place-content:center; cursor:pointer; margin:2px;
  transition: box-shadow .15s, border-color .15s, background .15s, transform .06s;
}
.player input[type="checkbox"]::after{ content:"✓"; transform:scale(0); transition:transform .12s ease-in-out; font-size:16px; line-height:1; color:var(--bg-100); }
.player input[type="checkbox"]:checked{ background: linear-gradient(180deg,var(--bg-700),#5A8C40); border-color:#3A5273; }
.player input[type="checkbox"]:checked::after{ transform:scale(1); }
.player input[type="checkbox"]:focus{ outline:none; box-shadow:0 0 0 3px rgba(143,178,217,.35); }
.player input[type="checkbox"]:disabled{ opacity:.5; cursor:not-allowed; }

/* Chips for modules */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips .chip{padding:8px 10px; border-radius:999px; border:1px solid var(--border); cursor:pointer; user-select:none; background:#0F1B2B}
.chips .chip.active{background:#2A3E59; border-color:#3A5273}

/* Homepage tiles (reusable) */
.tile{background: linear-gradient(180deg,var(--card), #1C2C43); border:1px solid var(--border); border-radius:14px; padding:16px; text-decoration:none; color:inherit; display:flex; gap:10px; align-items:center}
.tile:hover{outline:2px solid rgba(143,178,217,.25)}
.icon{width:36px; height:36px; border-radius:10px; background:#0F1B2B; display:grid; place-items:center}
.title{font-weight:700}

/* --- Pitch layout --- */
.pitch{
  width:100%;
  aspect-ratio: 3 / 4;                 /* verticale; si adatta */
  background: #0c7a2a url("/formazione/pitch.jpg") center/cover no-repeat;
  border:1px solid var(--border);
  border-radius:16px;
  display:flex; 
  flex-direction:column; 
  justify-content:space-between;
  padding:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.pitch-row{
  display:flex; 
  justify-content:space-evenly;        /* distribuzione orizzontale */
  align-items:center;
  gap:12px; 
  min-height:38px;
}
.pitch-row.role-P{ align-items:flex-start; }   /* libertà di tweak */
.pitch-row.role-A{ align-items:flex-end; }

.badge{
  background: rgba(15,27,43,.85);
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px; 
  font-size:13px;
  color: var(--text);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  white-space:nowrap;
}

@media (min-width: 900px){
  .pitch{ aspect-ratio: 2 / 3; }       /* un po’ più alto su desktop */
}

/* --- Role chips & lines --- */
.chip-role{
  display:inline-grid; place-items:center;
  width:22px; height:22px; border-radius:999px;
  font-size:12px; font-weight:700;
  margin-right:8px;
  border:1px solid var(--border);
  background:#0F1B2B; color:var(--text);
}
.chip-role.ghost{ background:#2a3242; color:#c9cfd8; }

.chip-role::after{ content:''; } /* compatibility */

.player-line{
  display:flex; align-items:center; gap:6px;
  padding:6px 8px; border-radius:8px;
  border:1px solid var(--border);
  background:#0F1B2B; margin:6px 0;
}
.player-line.ghost{
  opacity:.85; color:#b9c1c9;
}
.player-name{ font-weight:600; }
.player-team3{ color:var(--muted); font-size:12px; margin-left:4px; }

/* colori ruolo */
.chip-role[data-role="P"], .chip-role.P { background:#1f3b7a; color:#e9efff; }
.chip-role[data-role="D"], .chip-role.D { background:#165d3a; color:#e5fff1; }
.chip-role[data-role="C"], .chip-role.C { background:#6a4e16; color:#fff4da; }
.chip-role[data-role="T"], .chip-role.T { background:#4b2e83; color:#f2e9ff; }
.chip-role[data-role="A"], .chip-role.A { background:#7a1f1f; color:#ffe9e9; }

/* applica la lettera ruolo come classe */
.player-line .chip-role + .player-name {}

.team-card .team-sec{ margin-top:10px; }
.team-head{ margin-bottom:8px; }
.team-head-inner{ display:flex; align-items:center; gap:10px; }
.team-logo{ width:36px; height:36px; border-radius:10px; object-fit:cover; background:#0F1B2B; border:1px solid var(--border); }
.team-name{ font-weight:800; font-size:16px; }
.team-meta{ color:var(--muted); font-size:12px; }

/* contenitore delle 4 righe di match */
.matches{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ogni riga: due colonne fisse */
.match-row{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;   /* mobile: 1 colonna */
}
@media (min-width: 900px){
  .match-row{ grid-template-columns: 1fr 1fr; } /* desktop: 2 colonne */
}

/* card stabili (anche se vuote) */
.team-card{ min-height: 420px; display:flex; flex-direction:column; }
@media (min-width: 1100px){ .team-card{ min-height: 460px; } }
.team-card.empty{ align-items:center; justify-content:center; text-align:center; }
.team-card.empty .score-badge { display: none; }
.team-empty-note{ color:#98a3b3; font-style:italic; padding:24px 8px; }

/* skeleton loader */
.skel .skel-head{ height:40px; background:#1a2333; border-radius:10px; margin:6px 0 12px; }
.skel .skel-line{ height:18px; background:#1a2333; border-radius:6px; margin:8px 0; }
.skel .skel-line.short{ width:60%; }

/* Header squadra con classe per-club e badge punteggio */
.team-head{
  position: relative;
  padding: 10px;
  border-radius: 12px;
  /* colore neutro di base; poi lo sovrascrivi per club */
  background: linear-gradient(135deg, #0f1b2b, #172338);
  border: 1px solid var(--border);
  margin-bottom: 8px;
}
.team-head-inner{
  display: flex; align-items: center; gap: 10px;
}

/* logo più grande (48x48) per pareggiare il badge a destra */
.team-logo{
  width: 48px; height: 48px;
  border-radius: 12px; object-fit: cover;
  background: #0F1B2B; border: 1px solid var(--border);
}

/* cerchio gol in alto a destra */
.score-badge{
  position: absolute; top: 11px; right: 9px;
  width: 48px; height: 48px;
  font-size:28px !important;
  line-height: 1em;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(0,0,0,.5);
  color: #fff; font-weight: 800; font-size: 18px;
  border: 1px solid var(--border);
  user-select: none;
}

/* Esempi di gradient personalizzati per club (puoi aggiungerne altri) */
/* rosso Man Utd */
.team-head.kendermore-utd{
  background: linear-gradient(135deg, #DA291C, #8A0C0C);
}
.team-head.trucastle-utd{
  /* bianconero Newcastle (uso grigi per il gradiente) */
  background: linear-gradient(135deg, #0A0A0A, #2E2E2E);
}
.team-head.olympique-f{
  /* azzurro OM */
  background: linear-gradient(135deg, #00AEEF, #0086C9);
}
.team-head.honved-savi{
  /* rosso→bianco Honvéd */
  background: linear-gradient(315deg,rgba(242, 242, 242, 1) 19%, rgba(220, 37, 57, 1) 48%, rgba(188, 30, 47, 1) 100%);
}
.team-head.bayern-greki{
  /* rosso Bayern + blu storico */
  background: linear-gradient(135deg, #DC052D, #0066B2);
}
/* Premier League */
.team-head.vitaliverpool{
  /* rosso Liverpool */
  background: linear-gradient(135deg, #C8102E, #7F0C1D);
}
.team-head.mottenham{
  /* navy Spurs */
  background: linear-gradient(135deg, #2A44AD, #131F4F);
}
.team-head.athletic-cs{
  /* rosso Athletic (il bianco non rende in gradiente) */
  background: linear-gradient(135deg, #D50000, #8A0D1B);
}
/* fallback se il club ha nome non sluggabile */
.team-head.no-club{
  background: linear-gradient(135deg, #0f1b2b, #172338);
}
.team-head .team-name { color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.team-head .team-meta { color:rgba(255,255,255,.85); text-shadow:0 1px 2px rgba(0,0,0,.25); }

.team-head.kendermore-utd { border-color:#FBE122; }
.team-head.trucastle-utd  { border-color:#9ea3a9; }
.team-head.olympique-f    { border-color:#00a5e0; }
.team-head.honved-savi    { border-color:#f4bdc3; }
.team-head.bayern-greki   { border-color:#005c9f; }
.team-head.vitaliverpool  { border-color:#7f0c1d; }
.team-head.mottenham      { border-color:#526bd4; }
.team-head.athletic-cs    { border-color:#ffffff; }

@media (hover:hover){
  .team-card:not(.empty) .team-head { transition: transform .15s ease, box-shadow .15s ease; }
  .team-card:not(.empty) .team-head:hover { transform: translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.25); }
}

.stats { display:flex; align-items:center; gap:6px; }
.stats .fv { font-weight:700; color:#fff; margin-left:6px; }
.stats .vote { opacity:.75; }

.evs { display:flex; gap:4px; }
.ev {
  width:16px; height:16px; display:inline-block;
  background-image:url('/assets/icons/events-32.png');
  background-repeat:no-repeat;
  background-size:auto 16px; /* scala l’altezza a 16px */
  position:relative;
}
.ev .badge {
  position:absolute; right:-4px; top:-6px;
  background:#111; color:#fff; font-size:10px; line-height:12px;
  padding:0 3px; border-radius:8px; min-width:12px; text-align:center;
}

/* Ordine (indice 0..): Gf, Ass, Amm, Esp, R, Rs, Rp, Au, Gs, Entrato, Uscito */
.ev-gf   { background-position:   0   0; }   /* 0  */
.ev-ass  { background-position: -16px 0; }   /* 1  */
.ev-amm  { background-position: -32px 0; }   /* 2  */
.ev-esp  { background-position: -48px 0; }   /* 3  */
.ev-r    { background-position: -64px 0; }   /* 4  */
.ev-rs   { background-position: -80px 0; }   /* 5  */
.ev-rp   { background-position: -96px 0; }   /* 6  */
.ev-au   { background-position:-112px 0; }   /* 7  */
.ev-gs   { background-position:-128px 0; }   /* 8  */
.ev-in   { background-position:-144px 0; }   /* 9  */
.ev-out  { background-position:-160px 0; }   /* 10 */

.page-loader {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  display: none; align-items: center; justify-content: center;
  z-index: 9999; backdrop-filter: blur(2px);
  color: #fff; font-weight: 600;
}

/* fa sì che la riga possa restringersi senza rompere il layout */
.player-line{ min-width:0; }

/* il nome può andare in ellissi se lungo */
.player-line .player-name{
  flex:0 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* blocco destro: occupa lo spazio residuo e allinea contenuti a destra */
.player-line .right.stats{
  margin-left:auto;          /* spinge il blocco a destra */
  flex:1 1 auto;             /* occupa lo spazio residuo */
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;  /* [voto] icone FV allineati a destra */
  gap:6px;
}

/* opzionale: le icone non devono stirarsi */
.player-line .right.stats .evs{ display:flex; gap:4px; flex:0 0 auto; }

.match-block{ margin:4px 0 18px; }
.match-title{
  display:flex; align-items:center; gap:10px;
  font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:#9aa0a6; font-size:0.9rem; margin:6px 0 8px;
}
.match-title .line{ flex:1; height:1px; background:rgba(255,255,255,.12); }
.match-title .label{ flex:0 0 auto; background:#283e5f; padding:2px 4px; border-radius:3px; }

.team-tsbar{
  padding: 4px 12px 0;
}
.team-tsbar .ts-right{
  display:flex;
  align-items:center;
  justify-content:flex-end; /* allinea a destra */
  gap:8px;
}
.team-tsbar .chip.score{
  font-weight:700;
  color: #e1f1f3;
  font-size: 18px;
  background: #224d51;
  padding:2px 4px;
  border-radius:4px;
}

.team-mods{
  padding: 4px 8px;
  background: #224d51;
  color: #e1f1f3;   /* stile "muted" */
  font-size: .85rem;
  display: flex;
  justify-content: center;      /* allinea a destra sotto gli FV */
  gap: 12px;
  flex-wrap: wrap;                /* evita overflow su schermi stretti */
}

/* Smartphone/Tablet */
@media (max-width: 800px){
  /* la riga può comprimersi senza rompere */
  .player-line{ min-width:0; }

  /* nome: elastico con ellissi + font più piccolo */
  .player-line .player-name{
    flex: 1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size: .95rem;
  }

  /* blocco destro: compatto, allineato a destra, no wrap */
  .player-line .right.stats{
    margin-left:auto;
    flex: 0 0 auto;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:4px;
    white-space:nowrap;
  }
  .player-line .right.stats .evs{ display:flex; gap:3px; flex:0 0 auto; }

  /* voto più piccolo (FV resta leggibile) */
  .player-line .right.stats .vote{ font-size:.9rem; }
  .player-line .right.stats .fv{ font-size:1rem; }

  /* opzionale: chip ruolo leggermente più piccola */
  .chip-role{ transform:scale(.95); transform-origin:left center; }

  /* opzionale: titolo match più compatto */
  .match-title{ font-size:.8rem; }
}

.crumb{ 
	display:block;
	position: absolute;
	background: rgba(0, 0, 0, 0.65);
	top:140px;
	right: 5px;
	text-align: right;
	margin: 0 10px;
	padding:4px 10px;
    font-size:14px; 
	color:#b6c1c8;
}
.crumb .back{ color:#0ea5e9; font-weight:600; text-decoration:none; }
.crumb .back:hover{ text-decoration:underline; }

@media (max-width:480px){
  .container{ background:#0d1b24 url("/assets/header-mobile2025.jpg") top center no-repeat; max-width:480px; margin:0 auto; padding:16px; padding-top: 125px; }
  .crumb{ top: 110px; margin-right: 0; font-size:13px; }
}