/* ============================================
   Mondiali 2026 — stile (mobile first)
   ============================================ */

/* Variabili: cambia qui colori e font una volta sola */
:root {
  --bg: #0b1410;            /* verde-nero da stadio notturno */
  --bg-card: #12201a;
  --bg-card-hover: #182b22;
  --linea: #1f3a2d;
  --testo: #e8f3ec;
  --testo-muto: #8fa89b;
  --accento: #38e07b;       /* verde prato acceso */
  --accento-2: #f5c542;     /* oro coppa */
  --oggi: #ff5d5d;          /* rosso "live/oggi" */
  --font: "Archivo", system-ui, sans-serif;
  --raggio: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--testo);
  line-height: 1.5;
  padding: 16px;
  max-width: 760px;
  margin: 0 auto;
}

/* ---------- Header ---------- */
.header { text-align: center; padding: 24px 0 8px; }

.header__kicker {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  color: var(--testo-muto);
}

.header__title {
  font-size: clamp(2.4rem, 9vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.03em;
}
.header__title span { color: var(--accento); }

.header__sub { color: var(--accento-2); font-weight: 600; margin-top: 4px; }

/* ---------- Layout a due colonne ---------- */
/* Mobile: una colonna, le NUOVE (soldi) prima perché sono il focus quotidiano */
.layout { display: flex; flex-direction: column; }
.col-dx { order: 1; }
.col-sx { order: 2; }

/* Desktop: due colonne affiancate — sinistra calendario, destra soldi */
@media (min-width: 900px) {
  .layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
  }
  .col-sx { order: 0; }   /* colonna 1 = sinistra */
  .col-dx { order: 0; }   /* colonna 2 = destra */
  .col section:first-child { margin-top: 0; }
}

/* ---------- Sezioni ---------- */
section { margin: 28px 0; }

.sezione-titolo {
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  border-left: 4px solid var(--accento);
  padding-left: 10px;
}
.sezione-titolo small { color: var(--testo-muto); font-weight: 400; text-transform: none; }

.nota { color: var(--testo-muto); font-size: 0.85rem; margin-bottom: 12px; }
code { background: var(--bg-card); padding: 1px 6px; border-radius: 6px; font-size: 0.85em; }

/* ---------- Griglia calendario: una card per giorno ---------- */
.griglia-giorni {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* mobile: 3 colonne */
  gap: 8px;
}

.card-giorno {
  background: var(--bg-card);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.card-giorno:hover { background: var(--bg-card-hover); border-color: var(--accento); transform: translateY(-2px); }

/* Giorno selezionato e giorno odierno */
.card-giorno.selezionato { background: var(--accento); border-color: var(--accento); }
.card-giorno.selezionato .card-giorno__numero,
.card-giorno.selezionato .card-giorno__sett,
.card-giorno.selezionato .card-giorno__partite { color: #04120a; }
.card-giorno--oggi { border-color: var(--oggi); box-shadow: 0 0 0 1px var(--oggi); }

.card-giorno__sett {
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--testo-muto);
  font-weight: 600;
}

.card-giorno__numero {
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1.1;
  color: var(--testo);
}

.card-giorno__partite {
  font-size: 0.68rem;
  color: var(--accento-2);
  font-weight: 700;
}

/* Pannello sotto la griglia con le partite del giorno cliccato */
.dettaglio-giorno { margin-top: 16px; }

.dettaglio-giorno .giorno__data {
  font-weight: 800;
  color: var(--accento-2);
  font-size: 0.95rem;
  margin-bottom: 8px;
  text-transform: capitalize;
}

.partita {
  display: grid;
  /* ora | girone | squadre+città | risultato */
  grid-template-columns: 52px 30px 1fr auto;
  gap: 10px;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: background 0.15s;
}
.partita:hover { background: var(--bg-card-hover); }

/* Partita di oggi: bordo acceso */
.partita--oggi { border-color: var(--oggi); box-shadow: 0 0 0 1px var(--oggi); }

.partita__ora { font-weight: 800; color: var(--accento); font-size: 0.9rem; }

.partita__girone {
  background: var(--linea);
  border-radius: 8px;
  text-align: center;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 4px 0;
  color: var(--accento-2);
}

.partita__squadre { font-weight: 600; font-size: 0.95rem; }
.partita__citta { color: var(--testo-muto); font-size: 0.78rem; font-weight: 400; }

.partita__risultato {
  font-weight: 900;
  font-size: 1.05rem;
  min-width: 48px;
  text-align: right;
}
.partita__risultato--vuoto { color: var(--testo-muto); font-weight: 400; font-size: 0.8rem; }

/* ---------- Sezione "oggi" ---------- */
.oggi .partita { background: linear-gradient(135deg, #1a2e23, #12201a); }
.oggi-vuoto { color: var(--testo-muto); font-style: italic; }

/* ---------- Filtri gironi ---------- */
.filtri {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  position: sticky;
  top: 0;
  background: var(--bg);
  padding: 10px 0;
  z-index: 10;
}

.filtro {
  font-family: var(--font);
  background: var(--bg-card);
  color: var(--testo);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
}
.filtro:hover { border-color: var(--accento); }
.filtro.attivo { background: var(--accento); color: #04120a; border-color: var(--accento); }

/* ---------- Classifiche ---------- */
.classifiche { display: grid; gap: 14px; grid-template-columns: 1fr; }

.classifica {
  background: var(--bg-card);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  padding: 14px;
}

.classifica h3 { color: var(--accento-2); font-size: 0.95rem; margin-bottom: 8px; }

.classifica table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.classifica th {
  text-align: right; color: var(--testo-muto); font-weight: 600;
  font-size: 0.7rem; text-transform: uppercase; padding: 2px 4px;
}
.classifica th:first-child { text-align: left; }
.classifica td { padding: 4px; text-align: right; border-top: 1px solid var(--linea); }
.classifica td:first-child { text-align: left; font-weight: 600; }
.classifica tr.qualificata td:first-child { color: var(--accento); }

/* ---------- Fase finale ---------- */
.fase-finale ul { list-style: none; }
.fase-finale li {
  background: var(--bg-card);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  padding: 10px 14px;
  margin-bottom: 6px;
}

/* ============ BANKROLL ============ */
.bankroll { background: linear-gradient(135deg, #16271e, #0e1813); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 18px; }

.bk-numeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.bk-big { display: flex; flex-direction: column; gap: 2px; }
.bk-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--testo-muto); }
.bk-valore { font-size: clamp(1.6rem, 7vw, 2.4rem); font-weight: 900; line-height: 1.1; }
.bk-obiettivo { color: var(--accento-2); }
.bk-pl { font-size: 0.9rem; font-weight: 800; }
.bk-pl.pos, .pos { color: var(--accento); }
.bk-pl.neg, .neg { color: var(--oggi); }

.bk-barra-wrap { margin-top: 16px; background: #0a120d; border-radius: 999px; height: 14px; position: relative; overflow: hidden; border: 1px solid var(--linea); }
.bk-barra { height: 100%; background: linear-gradient(90deg, var(--accento), var(--accento-2)); border-radius: 999px; transition: width 0.6s; min-width: 2px; }
.bk-barra-tappe { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--testo-muto); margin-top: 4px; }

/* ---------- Motori ---------- */
.motori { display: grid; grid-template-columns: 1fr; gap: 10px; }
.motore { background: var(--bg-card); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 14px; }
.motore__top { display: flex; justify-content: space-between; align-items: baseline; }
.motore__nome { font-weight: 800; font-size: 1.05rem; }
.motore__budget { font-weight: 900; color: var(--accento-2); }
.motore__stato { font-size: 0.8rem; color: var(--testo-muto); margin: 4px 0; }
.motore__pl { font-weight: 800; font-size: 1.1rem; }
.motore__descr { font-size: 0.82rem; color: var(--testo-muto); margin-top: 8px; line-height: 1.4; }

/* ---------- Value del giorno ---------- */
.value-decisione { background: var(--bg-card); border-left: 4px solid var(--accento-2); border-radius: 8px; padding: 10px 12px; font-size: 0.9rem; margin-bottom: 12px; }
/* su mobile le tabelle larghe scrollano dentro il loro box, non rompono la pagina */
.tab-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.value-tab, .reg-tab { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.value-tab { min-width: 460px; }
.reg-tab { min-width: 540px; }
.value-tab th, .reg-tab th { text-align: left; color: var(--testo-muto); font-size: 0.68rem; text-transform: uppercase; padding: 6px 6px; border-bottom: 1px solid var(--linea); }
.value-tab td, .reg-tab td { padding: 8px 6px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.value-tab td.c, .reg-tab td.c { text-align: center; white-space: nowrap; }

.vb, .eb { font-size: 0.68rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; white-space: nowrap; }
.vb-ok { background: var(--accento); color: #04120a; }
.vb-warn { background: #4a3a12; color: var(--accento-2); }
.vb-mid { background: var(--linea); color: var(--testo-muto); }
.vb-no { background: #2a1414; color: var(--oggi); }

/* ---------- Registro ---------- */
.reg-track { opacity: 0.72; }
.reg-nota { font-size: 0.72rem; color: var(--testo-muto); margin-top: 3px; }
.eb-att { background: #4a3a12; color: var(--accento-2); }
.eb-win { background: var(--accento); color: #04120a; }
.eb-lose { background: #2a1414; color: var(--oggi); }
.eb-void { background: var(--linea); color: var(--testo-muto); }
/* badge tracking: contorno, non pieni — sono esiti TEORICI, non soldi nostri */
.eb-track-win { background: transparent; border: 1px solid var(--accento); color: var(--accento); }
.eb-track-lose { background: transparent; border: 1px solid var(--oggi); color: var(--oggi); }

/* ---------- Diario ---------- */
.diario-riga { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.diario-data { font-weight: 800; color: var(--accento-2); font-size: 0.85rem; flex-shrink: 0; }
.diario-testo { font-size: 0.86rem; color: var(--testo); line-height: 1.45; }

/* ---------- Footer ---------- */
.footer { text-align: center; color: var(--testo-muto); font-size: 0.75rem; padding: 24px 0; }

/* ---------- Desktop ---------- */
@media (min-width: 640px) {
  body { padding: 24px; max-width: 1280px; }
  .classifiche { grid-template-columns: 1fr 1fr; }
  .partita__squadre { font-size: 1.05rem; }
  .griglia-giorni { grid-template-columns: repeat(6, 1fr); } /* desktop: 6 colonne, stile calendario */
  .card-giorno__numero { font-size: 2.3rem; }
}

@media (min-width: 900px) {
  body { max-width: 1600px; }
  .layout { gap: 40px; }
  .classifiche { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1400px) {
  body { max-width: 90%; }
}

@media (min-width: 640px) {
  .motori { grid-template-columns: repeat(3, 1fr); }
}