/* ============================================================
   FightItalia — design system
   Font display: Oswald (titoli, numeri) — Inter (testo)
   Palette scura, accento rosso energico, tipico editoriale sportivo
   ============================================================ */

:root {
  --bg: #0a0a0d;
  --bg-elevated: #16161c;
  --bg-elevated-2: #1f1f27;
  --border: #2a2a33;
  --border-soft: #1e1e26;

  --text: #f4f4f6;
  --text-secondary: #a6a6b3;
  --text-muted: #6b6b78;

  --accent: #e8352f;
  --accent-hover: #ff453e;
  --accent-soft: rgba(232, 53, 47, 0.12);
  --gold: #d4a53d;
  --win: #2fb872;
  --loss: #e8352f;
  --draw: #8a8a94;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.4);

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.fighter-card .name a:hover,
.compare-col h2 a:hover {
  color: var(--accent);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 13, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.brand .dot { color: var(--accent); }

/* Stemma grande, centrato sulla scritta. */
.brand-logo {
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
  transition: transform 0.2s ease;
}

.brand:hover .brand-logo { transform: rotate(-8deg) scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .brand:hover .brand-logo { transform: none; }
}

@media (max-width: 980px) {
  .brand-logo { width: 40px; height: 40px; }
}

.nav-links {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: block;
  padding: 10px 16px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background 0.15s ease;
}

.nav-links a:hover { color: var(--text); background: var(--bg-elevated); }

.nav-links a.active {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.nav-links a.nav-gauntlet {
  color: var(--accent);
  font-weight: 600;
}

.nav-links a.nav-gauntlet:hover { color: var(--accent-hover); background: var(--accent-soft); }

.nav-links a.nav-gauntlet.active { box-shadow: inset 0 -2px 0 var(--accent); }

.lingua {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.lingua select {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font: 500 12.5px var(--font-body, Inter, sans-serif);
  cursor: pointer;
}

.lingua select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Sotto i 980px il menu non ci sta piu' su una riga: marchio e lingua in
   alto, voci del menu sotto in una striscia scorrevole. */
@media (max-width: 980px) {
  .nav { flex-wrap: wrap; height: auto; padding-top: 10px; row-gap: 4px; }
  .nav-links {
    order: 3;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; }
}

/* ---------- Hero ---------- */

.hero {
  padding: 56px 0 36px;
  border-bottom: 1px solid var(--border-soft);
}

.hero h1 {
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
  max-width: 820px;
}

.hero h1 .accent { color: var(--accent); }

.hero p {
  color: var(--text-secondary);
  font-size: 16px;
  max-width: 620px;
  margin: 16px 0 0;
}

.stat-strip {
  display: flex;
  gap: 32px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.stat-strip .stat .value {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--accent);
}

.stat-strip .stat .label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Section heading ---------- */

.section-title {
  font-size: 22px;
  margin: 40px 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-title .count {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 400;
}

/* ---------- Filter bar ---------- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 18px 0;
}

.search-input {
  position: relative;
  flex: 1 1 240px;
  max-width: 320px;
}

.search-input svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.search-input input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 14px 10px 36px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease;
}

.search-input input:focus { border-color: var(--accent); }

.pill {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.pill:hover { border-color: var(--text-muted); color: var(--text); }

.pill.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: #ff9d99;
}

/* ---------- Fighter grid / card ---------- */

.fighter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  padding-bottom: 60px;
}

.fighter-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.fighter-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: #35353f;
}

.fighter-card .top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.card-foto {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated-2);
}

.foto-lottatore-grande {
  display: block;
  margin-top: 24px;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
}

.tt-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13.5px;
}

.tt-row .v { text-align: right; }
.tt-row .v:last-child { text-align: left; }
.tt-row .k {
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.card-foto-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text-muted);
}

.fighter-card .name {
  font-family: var(--font-display);
  font-size: 17px;
  text-transform: none;
  letter-spacing: 0;
}

.fighter-card .nickname {
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
  margin-top: 2px;
}

.tag {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-elevated-2);
  color: var(--text-secondary);
  white-space: nowrap;
}

.tag.numerato { background: rgba(212, 165, 61, 0.14); color: var(--gold); }
.tag.fight-night { background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); }

.fighter-card .meta-row {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  color: var(--text-secondary);
  font-size: 13px;
}

.fighter-card .meta-row span { display: flex; align-items: center; gap: 5px; }
.fighter-card .meta-row svg { color: var(--text-muted); flex-shrink: 0; }

.fighter-card .record {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fighter-card .record .value {
  font-family: var(--font-display);
  font-size: 20px;
  flex-shrink: 0;
}

.fighter-card .record .last {
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
  max-width: 60%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.empty-state {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
}

/* ---------- Confronto page ---------- */

.vs-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 32px 0 8px;
}

.vs-picker .vs-label {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--accent);
}

.autocomplete { position: relative; }

.autocomplete input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
}

.autocomplete input:focus { border-color: var(--accent); }

.autocomplete-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 280px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: var(--shadow-card-hover);
  display: none;
}

.autocomplete-list.open { display: block; }

.autocomplete-list div {
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
}

.autocomplete-list div:last-child { border-bottom: none; }
.autocomplete-list div:hover, .autocomplete-list div.highlighted { background: var(--accent-soft); }
.autocomplete-list .sub { color: var(--text-muted); font-size: 12px; }

.compare-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.compare-col h2 {
  font-size: 24px;
  text-transform: none;
}

.compare-col .row {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13.5px;
}

.compare-col .row .k { color: var(--text-muted); }
.compare-col .row .v { text-align: right; max-width: 65%; overflow-wrap: break-word; }

.compare-col.b .row { flex-direction: row-reverse; }
.compare-col.b .row .v { text-align: left; }

.vs-divider {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 40px;
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--text-muted);
}

.form-dots { display: flex; gap: 6px; margin-top: 10px; }
.compare-col.b .form-dots { flex-direction: row-reverse; }

.dot-result {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #0a0a0d;
  cursor: pointer;
  outline: none;
}

.dot-result.win { background: var(--win); }
.dot-result.loss { background: var(--loss); color: #fff; }
.dot-result.draw { background: var(--draw); }

.dot-tooltip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 11px;
  font-size: 11.5px;
  font-weight: 400;
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: var(--shadow-card-hover);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 30;
}

.dot-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border);
}

.dot-result:hover .dot-tooltip,
.dot-result:focus .dot-tooltip {
  opacity: 1;
  visibility: visible;
}

.bar-compare { margin-top: 32px; }

.bar-compare .metric { margin-bottom: 18px; }

.bar-compare .metric .label {
  text-align: center;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.bar-compare .pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  height: 22px;
}

.bar-compare .bar {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text);
  height: 100%;
  border-radius: 3px;
  min-width: 2px;
}

.bar-compare .bar.a { background: linear-gradient(90deg, transparent, var(--accent)); justify-content: flex-end; padding-right: 8px; margin-left: auto; }
.bar-compare .bar.b { background: linear-gradient(90deg, var(--gold), transparent); justify-content: flex-start; padding-left: 8px; }

.head-to-head {
  margin-top: 28px;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  font-size: 14px;
}

.head-to-head.found { border-color: rgba(47, 184, 114, 0.4); background: rgba(47, 184, 114, 0.07); }
.head-to-head strong { color: var(--win); }

.key-points {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

.key-points-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.key-points ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.key-points li {
  font-size: 13.5px;
  color: var(--text);
}

.history-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin: 8px 0 50px;
}

.history-columns h3 {
  text-transform: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.history-columns h3 .count {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-muted);
  font-size: 13px;
}

.history-list {
  max-height: 440px;
  overflow-y: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-elevated);
}

.history-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}

.history-row:last-child { border-bottom: none; }
.history-row .dot-result { flex-shrink: 0; width: 22px; height: 22px; }

.history-main { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.history-main .opp { font-weight: 500; }
.history-main .meta {
  color: var(--text-muted);
  font-size: 11.5px;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-date {
  color: var(--text-muted);
  font-size: 11.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------- Card evento (main/prelim/early prelim) ---------- */

.event-group-title {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 28px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}

.bout-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }

.bout-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}

.bout-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bout-cat { color: var(--text-muted); }

.bout-posizione {
  font-family: "Oswald", sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.bout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.bout-lato { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bout-lato.b { flex-direction: row-reverse; text-align: right; }
.bout-lato-testo { min-width: 0; }

.bout-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
}

.bout-avatar-vuoto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Oswald", sans-serif;
  font-size: 13px;
  color: var(--text-muted);
}

.bout-lato.vincitore .bout-avatar { border-color: var(--win); }

.bout-nome {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.bout-nome a { color: var(--text); }
.bout-nome a:hover { color: var(--accent); }
.bout-lato.vincitore .bout-nome, .bout-lato.vincitore .bout-nome a { color: var(--win); font-weight: 600; }

.bout-w {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 3px;
  background: rgba(47, 184, 114, 0.14);
  color: var(--win);
  font-size: 10px;
  font-weight: 700;
  vertical-align: 2px;
}

.bout-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.bout-meta.k { margin-top: 0; color: var(--text-muted); font-size: 11.5px; }

.bout-vs {
  font-family: "Oswald", sans-serif;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bout-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--border-soft);
  font-size: 12px;
}

.bout-esito { color: var(--text-secondary); }
.bout-esito.da-disputare { color: var(--text-muted); }

.bout-confronto-link {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

.bout-confronto-link:hover { text-decoration: underline; }

.bout-confronto-na {
  color: var(--text-muted);
  white-space: nowrap;
  font-size: 11.5px;
}

@media (max-width: 520px) {
  .bout-avatar { width: 32px; height: 32px; }
  .bout-grid { gap: 8px; }
  .bout-nome { font-size: 13.5px; }
  .bout-meta { font-size: 11px; }
}

/* ---------- Home: hero + lottatori a sinistra, eventi a destra ---------- */
/* Tre aree con nome (hero/aside/lottatori) invece di un blocco unico:
   cosi' da mobile si puo' riordinarle senza margini finti o "order" che
   lasciano buchi (era il problema prima: l'eventi in cima con un vuoto
   enorme sotto, perche' restavano i margini pensati per l'altro ordine). */

.home-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-areas: "hero aside" "lottatori aside";
  gap: 32px;
  align-items: start;
}

.home-hero { grid-area: hero; padding-bottom: 0; border-bottom: none; }
.home-aside { grid-area: aside; min-width: 0; margin-top: 178px; }
.home-lottatori { grid-area: lottatori; min-width: 0; }

.hero-tagline-mobile, .hero-sub-mobile { display: none; }

.evento-widget {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 18px;
}

.evento-widget-titolo {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.03em;
  margin-bottom: 14px;
}

.mini-evento {
  display: block;
  padding: 10px 12px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.mini-evento:last-of-type { margin-bottom: 0; }
.mini-evento:hover { border-color: var(--accent); transform: translateX(2px); }
.mini-evento .mini-data { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.mini-evento .mini-nome { font-size: 13.5px; margin-top: 3px; color: var(--text); }

.evento-widget-tutti {
  display: block;
  margin-top: 14px;
  text-align: center;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 12.5px;
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.evento-widget-tutti:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 900px) {
  .home-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "hero" "aside" "lottatori";
    gap: 20px;
  }
  .home-aside { margin-top: 0; }
  .hero-sub-desktop { display: none; }
  .hero-tagline-mobile { display: block; font-size: 18px; font-weight: 600; color: var(--text-secondary); margin-top: 8px; }
  .hero-sub-mobile { display: block; font-size: 13px; color: var(--text-muted); margin: -6px 0 14px; }
}

/* ---------- Orario di inizio (scheda evento) ---------- */

.orari-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.orario-fase {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
}

.orario-fase:last-child { border-bottom: none; }

.fase-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--text-secondary);
}

.fase-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex: none; }
.orario-fase.prelims .fase-dot { background: var(--gold); }
.orario-fase.main .fase-dot { background: var(--accent); }

.orario-fase.main .fase-label { color: var(--text); font-weight: 600; }

.fase-orari { text-align: right; }

.fase-italia {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--text);
}

.orario-fase.main .fase-italia { font-size: 20px; color: var(--accent); }

.fase-giorno-dopo {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-body);
  letter-spacing: 0.04em;
  margin-left: 4px;
}

.fase-sede {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ---------- Eventi ---------- */

.event-row {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  margin-bottom: 8px;
  transition: border-color 0.15s ease;
}

.event-row:hover { border-color: #35353f; }

.event-date {
  text-align: center;
  font-family: var(--font-display);
  line-height: 1.1;
  border-right: 1px solid var(--border-soft);
  padding-right: 14px;
}

.event-date .day { font-size: 22px; color: var(--accent); display: block; }
.event-date .month { font-size: 11px; text-transform: uppercase; color: var(--text-muted); display: block; }

.event-main .name {
  font-family: var(--font-display);
  font-size: 16px;
  text-transform: none;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.event-main .venue {
  color: var(--text-secondary);
  font-size: 13px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.risultati-org {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.risultato-riga {
  font-size: 12.5px;
  color: var(--text-secondary);
}

.risultato-riga b { color: var(--text); font-weight: 600; }

.event-link {
  color: var(--text-muted);
  font-size: 13px;
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 999px;
  transition: all 0.15s ease;
}

.event-link:hover { color: var(--text); border-color: var(--text-muted); }

.dazn-note {
  margin: 18px 0 8px;
  font-size: 13px;
  color: var(--text-muted);
  padding: 12px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

.load-more {
  display: block;
  margin: 20px auto 60px;
  padding: 10px 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.load-more:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Tab organizzazione (Roster / Eventi) ---------- */

.org-tabs {
  display: flex;
  gap: 4px;
  margin: 32px 0 8px;
  border-bottom: 1px solid var(--border-soft);
}

.org-tab {
  padding: 10px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}

.org-tab:hover { color: var(--text-secondary); }
.org-tab.active { color: var(--text); border-bottom-color: var(--accent); }

/* ---------- Bacheca campioni ---------- */

.champ-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 8px 0 20px;
}

.champ-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.champ-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }

.champ-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.champ-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px;
  background: linear-gradient(to top, rgba(10, 10, 13, 0.95) 20%, rgba(10, 10, 13, 0.4) 70%, transparent);
}

/* Senza foto la card mantiene la stessa forma delle altre: iniziali
   grandi al posto della foto, invece di una card piu' bassa e vuota. */
.champ-iniziali { display: none; }

.champ-card.senza-foto .champ-iniziali {
  display: flex;
  position: absolute;
  inset: 0 0 35% 0;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 64px;
  color: var(--border);
  background: radial-gradient(circle at 50% 40%, var(--bg-elevated-2), var(--bg-elevated));
}

.champ-card.senza-foto .champ-foto { display: none; }

.champ-div {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(212, 165, 61, 0.16);
  color: var(--gold);
  margin-bottom: 8px;
}

.champ-nome-grande {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--text);
  line-height: 1.15;
}

.champ-record-grande {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ---------- Europa (organizzazioni) ---------- */

.org-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 18px;
  padding: 8px 0 60px;
}

.org-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-card);
}

.org-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 6px;
}

.org-head h2 {
  font-size: 22px;
  text-transform: none;
}

.org-sub {
  color: var(--text-muted);
  font-size: 12.5px;
  margin-top: 4px;
}

.org-desc {
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 12px 0 16px;
}

.champ-list {
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
}

.champ-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 13.5px;
}

.champ-cat { color: var(--text-muted); }
.champ-nome { font-weight: 500; text-align: right; }

.percentile {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 400;
}

.streak-badge {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: 6px;
}

/* ---------- News ---------- */

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  padding: 8px 0 60px;
}

.news-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.news-fonte { color: var(--accent); font-weight: 600; }
.news-tempo { color: var(--text-muted); }

.news-titolo {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.3;
  text-transform: none;
}

.news-riassunto {
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.6;
  flex-grow: 1;
}

.news-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12.5px;
  border-top: 1px solid var(--border-soft);
  padding-top: 10px;
}

.news-link:hover { color: var(--accent); }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border-soft);
  padding: 26px 0 50px;
  color: var(--text-muted);
  font-size: 12.5px;
}

/* ---------- Gauntlet ---------- */

.gauntlet-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding: 28px 0 50px;
}

.gauntlet-regole {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.regola {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.regola strong {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.regola span { color: var(--text-secondary); font-size: 13px; }

.gauntlet-sotto {
  color: var(--text-secondary);
  font-size: 13.5px;
  margin: -8px 0 2px;
}

.nickname-wrap { width: 100%; max-width: 360px; }

.nickname-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.nickname-input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease;
}

.nickname-input:focus { border-color: var(--accent); }

.personaggi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  width: 100%;
}

.personaggio-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-body);
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.personaggio-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.personaggio-card:active { transform: scale(0.99); }

.personaggio-emoji { font-size: 26px; }

.personaggio-nome {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.personaggio-eta {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.personaggio-tagline {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.personaggio-stats { font-size: 12px; color: var(--text-muted); }

.personaggio-perk {
  font-size: 11.5px;
  color: var(--gold);
  font-weight: 600;
}

.gauntlet-box { padding-bottom: 60px; }

.gauntlet-status {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}

.gauntlet-turno-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.gauntlet-personaggio-riga { display: flex; align-items: baseline; gap: 6px; }

.gauntlet-personaggio {
  font-size: 12.5px;
  color: var(--accent-hover);
  font-weight: 600;
}

.gauntlet-eta { font-size: 12px; color: var(--text-muted); }

.gauntlet-record { display: flex; align-items: baseline; gap: 10px; }

.gauntlet-record .label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.gauntlet-record .valore {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--text);
}

.gauntlet-turno {
  font-size: 12.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-bar { margin-bottom: 14px; }

.stat-head {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.stat-head .stat-valore { font-family: var(--font-display); color: var(--text); }

.stat-track {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}

.stat-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.35s ease;
}

.stat-fill.mento { background: var(--win); }
.stat-fill.hype { background: var(--gold); }
.stat-fill.aura { background: var(--accent); }

.stat-bar.critica .stat-head .stat-valore { color: var(--loss); }
.stat-bar.critica .stat-track { border-color: var(--loss); }

.gauntlet-hint {
  font-size: 12.5px;
  color: var(--accent-hover);
  margin: -4px 0 16px;
}

.gauntlet-ritiro { display: flex; justify-content: flex-end; margin: -6px 0 14px; }

.link-ritiro {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 4px 0;
}

.link-ritiro:hover { color: var(--accent-hover); }

.scenario-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.scenario-tag {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.scenario-testo {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 22px;
}

.scenario-testo.esito { color: var(--text-secondary); }

.scelte { display: flex; flex-direction: column; gap: 10px; }

.scelta {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.scelta:hover { border-color: var(--text-muted); background: #26262f; }
.scelta:active { transform: scale(0.99); }

.scelta.speciale { border-color: var(--gold); }
.scelta.speciale:hover { background: rgba(212, 165, 61, 0.1); }

.scelta-badge {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #0a0a0d;
  background: var(--gold);
  border-radius: 999px;
  padding: 3px 8px;
}

.scelta.primaria {
  background: var(--accent);
  border-color: var(--accent);
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  justify-content: center;
}

.scelta.primaria:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.scelta.avanti {
  justify-content: center;
  color: var(--accent);
  border-color: var(--accent);
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-top: 4px;
}

.scelta.avanti:hover { background: var(--accent-soft); }

.esito-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.esito-badge.vittoria { background: rgba(47, 184, 114, 0.14); color: var(--win); }
.esito-badge.sconfitta { background: var(--accent-soft); color: #ff9d99; }

.delta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }

.delta {
  font-size: 12px;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.delta.su { color: var(--win); border-color: rgba(47, 184, 114, 0.35); }
.delta.giu { color: var(--loss); border-color: rgba(232, 53, 47, 0.35); }
.delta.neutro { color: var(--text-muted); }

.finale {
  max-width: 520px;
  margin: 40px auto 80px;
  text-align: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 44px 30px;
  box-shadow: var(--shadow-card);
}

.finale.goat { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(212, 165, 61, 0.25), var(--shadow-card); }

.finale-emoji { font-size: 44px; margin-bottom: 6px; }

.finale-sopra {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.finale h2 {
  font-size: 32px;
  margin: 8px 0 4px;
}

.finale.goat h2 { color: var(--gold); }
.finale.sconfitta h2 { color: var(--accent); }

.finale-record {
  font-family: var(--font-display);
  font-size: 48px;
  margin: 6px 0 18px;
}

.finale p {
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 20px;
}

.finale-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border-soft);
}

.finale-azioni { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.finale-azioni .scelta { width: auto; }

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .brand { font-size: 16px; gap: 6px; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 8px 8px; font-size: 11px; letter-spacing: 0.03em; }
  .org-grid { grid-template-columns: minmax(0, 1fr); }
  .history-columns { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .gauntlet-regole { grid-template-columns: minmax(0, 1fr); }
  .finale { padding: 32px 20px; margin: 24px auto 60px; }
  .finale-record { font-size: 38px; }
}

@media (max-width: 760px) {
  .vs-picker, .compare-grid { grid-template-columns: minmax(0, 1fr); }
  .vs-divider, .vs-picker .vs-label { padding-top: 0; }
  .compare-col.b .row { flex-direction: row; }
  .compare-col.b .row .v { text-align: right; }
  .compare-col.b .form-dots { flex-direction: row; }
  .event-row { grid-template-columns: 60px 1fr; }
  .event-link { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- Giochi ---------- */

.giochi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  padding: 28px 0 70px;
}

.gioco-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.gioco-card:hover { transform: translateY(-3px); border-color: var(--border); }
.gioco-card.top { border-color: rgba(232, 53, 47, 0.5); }
.gioco-card h2 { font-family: var(--font-display); font-size: 26px; text-transform: uppercase; letter-spacing: 0.03em; margin: 0; }
.gioco-card p { color: var(--text-secondary); font-size: 14px; line-height: 1.6; margin: 0; flex: 1; }
.gioco-tag { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.gioco-cta { color: var(--accent); font-weight: 600; font-size: 14px; }

.hero-gioco { padding-bottom: 18px; }

.btn-gioco {
  display: inline-block;
  padding: 11px 18px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
}

.btn-gioco:hover { background: var(--accent-hover); }
.btn-gioco:disabled { opacity: 0.5; cursor: default; }
.btn-gioco.secondario { background: var(--bg-elevated-2); color: var(--text); border: 1px solid var(--border); }
.btn-gioco:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* Chi e'? */
.chie { max-width: 820px; padding-bottom: 70px; display: flex; flex-direction: column; gap: 16px; }
.chie-top { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.chie-foto { position: relative; }
.chie-foto canvas {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  image-rendering: pixelated;
  background: var(--bg-elevated);
}
.chie-contatore {
  position: absolute; left: 10px; bottom: 10px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(10, 10, 13, 0.8);
  font-size: 12px; color: var(--text-secondary);
}

.indizi { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.indizi-titolo, .indizio-extra .k, .tent-cella .k { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.storico-indizi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.storico-indizi li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; font-size: 13.5px; align-items: baseline; }
.storico-indizi .met { grid-column: 2; font-size: 11.5px; color: var(--text-muted); }
.storico-indizi li.nascosto { color: var(--text-muted); }
.esito { display: inline-flex; justify-content: center; font-weight: 700; font-size: 11px; padding: 2px 0; border-radius: 4px; background: var(--bg-elevated-2); color: var(--text-muted); }
.esito.win { background: rgba(47, 184, 114, 0.16); color: var(--win); }
.esito.loss { background: rgba(232, 53, 47, 0.16); color: var(--loss); }
.indizio-extra { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; border-top: 1px solid var(--border-soft); padding-top: 8px; }

.chie-form { display: flex; gap: 8px; }
.chie-form input {
  flex: 1; min-width: 0;
  padding: 11px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: 15px var(--font-body);
}
.chie-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.chie-msg { margin: 0; min-height: 1em; font-size: 13px; color: var(--gold); }

.tent-lista { display: flex; flex-direction: column; gap: 8px; }
.tent-riga { display: grid; grid-template-columns: 1.3fr repeat(5, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
.tent-nome { display: flex; align-items: center; font-weight: 600; font-size: 14px; }
.tent-cella { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 7px 8px; border-radius: var(--radius-sm); font-size: 12.5px; background: var(--bg-elevated-2); font-variant-numeric: tabular-nums; }
.tent-cella.ok, .chie-legenda .ok { background: rgba(47, 184, 114, 0.22); color: var(--text); }
.tent-cella.vicino, .chie-legenda .vicino { background: rgba(212, 165, 61, 0.22); color: var(--text); }
.tent-cella.no { background: rgba(232, 53, 47, 0.14); }
.chie-legenda { font-size: 11.5px; color: var(--text-muted); margin: 0; }
.chie-legenda span { background: none !important; }
.chie-legenda .ok { color: var(--win); }
.chie-legenda .vicino { color: var(--gold); }
.chie-legenda .no { color: var(--loss); }

.chie-fine { text-align: center; padding: 22px; border-radius: var(--radius); background: var(--bg-elevated); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.chie-fine.vinto { border-color: rgba(47, 184, 114, 0.5); }
.chie-fine.perso { border-color: rgba(232, 53, 47, 0.5); }
.chie-fine-titolo { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.chie-fine-nome { font-family: var(--font-display); font-size: 30px; text-transform: uppercase; }
.chie-fine-sub { color: var(--text-secondary); font-size: 13.5px; margin: 0; }

@media (max-width: 700px) {
  .chie-top { grid-template-columns: minmax(0, 1fr); }
  .chie-foto canvas { max-width: 100%; margin: 0 auto; }
  .tent-riga { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tent-nome { grid-column: 1 / -1; }
  .tent-cella { font-size: 11px; padding: 6px; }
  .tent-cella .k { font-size: 9px; letter-spacing: 0.02em; }
}

/* Piu' o meno */
.pom { max-width: 720px; padding-bottom: 70px; display: flex; flex-direction: column; gap: 16px; }
.pom-punteggio { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-secondary); }
.pom-punteggio b { color: var(--text); font-family: var(--font-display); font-size: 20px; margin-left: 4px; }
.pom-domanda { font-size: 17px; text-align: center; text-wrap: balance; }
.pom-arena { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; }
.pom-vs { font-family: var(--font-display); color: var(--text-muted); text-transform: uppercase; }
.pom-lato { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius); text-align: center; transition: border-color 0.2s ease; }
.pom-lato.giusto { border-color: var(--win); }
.pom-lato.sbagliato { border-color: var(--loss); }
.pom-foto { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; object-position: top; border: 1px solid var(--border); background: var(--bg-elevated-2); }
.pom-foto-vuota { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 34px; color: var(--text-muted); }
.pom-nome { font-weight: 600; font-size: 15px; }
.pom-sub { font-size: 12px; color: var(--text-muted); }
.pom-valore { font-family: var(--font-display); font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pom-valore span { font-size: 13px; color: var(--text-muted); font-family: var(--font-body); }
.pom-bottoni { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pom-bottoni .btn-gioco { font-size: 16px; padding: 14px; }

@media (max-width: 520px) {
  .pom-foto { width: 76px; height: 76px; }
  .pom-valore { font-size: 26px; }
  .pom-nome { font-size: 13.5px; }
}

/* ---------- Ricerca eventi passati ---------- */
.filtri-eventi {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.filtri-eventi input,
.filtri-eventi select {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: 14px var(--font-body);
  color-scheme: dark;
}

.filtri-eventi input:focus,
.filtri-eventi select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (max-width: 700px) {
  .filtri-eventi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filtro-cerca { grid-column: 1 / -1; }
}

.news-lingua {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* Menu a tendina di "Chi e'?" */
.ac { position: relative; flex: 1; min-width: 0; display: flex; }
.ac input { width: 100%; }
.ac-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  list-style: none; margin: 0; padding: 4px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card-hover);
  max-height: 420px; overflow-y: auto;
}
.ac-lista li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.ac-lista li.attiva, .ac-lista li:hover { background: var(--bg-elevated); }
.ac-av { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; object-fit: cover; object-position: top; background: var(--bg); border: 1px solid var(--border); }
.ac-av.vuoto { display: inline-flex; align-items: center; justify-content: center; font: 12px var(--font-display); color: var(--text-muted); }
.ac-testo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ac-nome { font-size: 14px; font-weight: 600; }
.ac-info { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.ac-sesso { font: 600 11px var(--font-body); padding: 2px 7px; border-radius: 999px; }
.ac-sesso.m { background: rgba(57, 135, 229, 0.18); color: #7fb2f0; }
.ac-sesso.f { background: rgba(232, 123, 164, 0.18); color: #f0a3c2; }
.bandiera { width: 20px; height: 15px; object-fit: cover; border-radius: 2px; vertical-align: -2px; display: inline-block; }

/* News brevi (campioni) */
.news-brevi { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.news-breve {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  transition: border-color 0.15s ease;
}
.news-breve:hover { border-color: var(--border); }
.news-breve-meta { font-size: 11.5px; color: var(--text-muted); }
.news-breve-meta b { color: var(--gold); font-weight: 600; }
.news-breve-titolo { font-size: 14px; line-height: 1.45; color: var(--text); }

/* Scheda lottatore: foto e dati a sinistra, news (solo campioni) a destra */
.profilo-colonne { display: block; }
.profilo-colonne.con-news {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.profilo-news { padding-top: 24px; }
.news-colonna { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 900px) {
  .profilo-colonne.con-news { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

.champ-card.vacante { box-shadow: none; border-style: dashed; }
.champ-card.vacante:hover { transform: none; }
.champ-card.vacante .champ-nome-grande { color: var(--text-muted); }

[hidden] { display: none !important; }

/* ---------- Griglia MMA (Tiki Taka Toe) ---------- */
.gr { max-width: 760px; padding-bottom: 70px; display: flex; flex-direction: column; gap: 16px; }
.gr-modi { display: flex; gap: 6px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 999px; padding: 4px; align-self: center; flex-wrap: wrap; justify-content: center; }
.gr-modi button { font: 600 13px var(--font-body); color: var(--text-secondary); background: none; border: 0; border-radius: 999px; padding: 8px 16px; cursor: pointer; }
.gr-modi button[aria-selected="true"] { background: var(--accent); color: #fff; }
.gr-modi button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
#gr-partita { display: flex; flex-direction: column; gap: 14px; }
.gr-barra { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; flex-wrap: wrap; }
.gr-tentativi { color: var(--accent); letter-spacing: 2px; font-size: 13px; }
.gr-tentativi span { color: var(--text-muted); letter-spacing: 0; margin-left: 6px; }
.gr-tab { display: grid; grid-template-columns: minmax(0, 0.85fr) repeat(3, minmax(0, 1fr)); gap: 6px; }
.gr-angolo { display: flex; align-items: center; justify-content: center; }
.gr-int { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 8px 4px; min-height: 76px; }
.gr-riga { align-items: flex-end; text-align: right; padding-right: 10px; }
.gr-fam { font: 600 9.5px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.gr-cond { font: 600 14px/1.2 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; overflow-wrap: break-word; hyphens: auto; }
.bandiera.grande { width: 36px; height: 27px; border-radius: 3px; }
.gr-cella { position: relative; aspect-ratio: 1; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; cursor: pointer; overflow: hidden; font: inherit; transition: transform .12s ease, border-color .12s ease; }
.gr-cella:not([disabled]):hover { border-color: var(--accent); transform: translateY(-2px); }
.gr-cella[disabled] { cursor: default; }
.gr-cella:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.gr-piu { font: 600 30px/1 var(--font-display); color: var(--text-muted); }
.gr-poss { font-size: 10.5px; color: var(--text-muted); }
.gr-es { font-size: 11px; color: var(--text-secondary); line-height: 1.35; text-align: center; }
.gr-cella.piena { border-color: rgba(47, 184, 114, 0.6); background: linear-gradient(180deg, rgba(47, 184, 114, 0.08), var(--bg-elevated)); }
.gr-av { width: 58%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: top; background: var(--bg); border: 2px solid var(--border); }
.gr-av.vuoto { display: inline-flex; align-items: center; justify-content: center; font: 600 20px var(--font-display); color: var(--text-secondary); }
.gr-nome { font: 600 12.5px/1.15 var(--font-display); text-transform: uppercase; text-align: center; overflow-wrap: break-word; hyphens: auto; }
.gr-rar { font-size: 10px; color: var(--text-muted); }
.gr-rar.alta { color: var(--gold); font-weight: 600; }
.gr-cella.g1 { border-color: var(--accent); background: linear-gradient(180deg, rgba(232, 53, 47, 0.22), var(--bg-elevated)); }
.gr-cella.g2 { border-color: var(--gold); background: linear-gradient(180deg, rgba(212, 165, 61, 0.22), var(--bg-elevated)); }
.gr-cella.linea { box-shadow: 0 0 0 3px var(--text) inset; }
.gr-segno { position: absolute; top: 5px; left: 8px; font: 700 15px var(--font-display); }
.g1 .gr-segno, .gr-giocatore.g1 span, b.g1 { color: var(--accent); }
.g2 .gr-segno, .gr-giocatore.g2 span, b.g2 { color: var(--gold); }
.gr-sfida-top { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.gr-giocatore { font: 600 15px var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elevated); }
.gr-giocatore.g2 { text-align: right; }
.gr-giocatore.attivo.g1 { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.gr-giocatore.attivo.g2 { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.gr-turno { text-align: center; font-size: 14px; }
#gr-tempo { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.gr-opzioni { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; font-size: 13px; color: var(--text-secondary); }
.gr-opzioni label { display: flex; align-items: center; gap: 8px; }
.gr-opzioni select { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 8px; font: inherit; }
.gr-dialog { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 0; width: min(520px, calc(100vw - 32px)); overflow: visible; }
.gr-dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
.gr-d-box { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.gr-d-titolo { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; }
.gr-d-cond { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; max-width: 42%; }
.gr-per { font: 600 20px var(--font-display); color: var(--text-muted); }
.gr-d-sotto { width: 100%; font-size: 12.5px; color: var(--text-muted); }
.gr-d-box .ac input { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; font: 15px var(--font-body); }
.gr-d-box .ac input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.gr-d-box .ac-lista { top: 100%; }
.gr-d-azioni { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 560px) {
  .gr-tab { gap: 4px; grid-template-columns: minmax(0, 0.8fr) repeat(3, minmax(0, 1fr)); }
  .gr-cond { font-size: 11.5px; }
  .gr-fam { font-size: 8.5px; letter-spacing: 0.06em; }
  .gr-int { min-height: 64px; padding: 4px 2px; }
  .gr-riga { padding-right: 4px; }
  .gr-nome { font-size: 10.5px; }
  .gr-rar, .gr-poss { font-size: 9px; }
  .gr-angolo img { width: 38px; height: 38px; }
  .bandiera.grande { width: 28px; height: 21px; }
  .gr-sfida-top { grid-template-columns: 1fr 1fr; }
  .gr-turno { grid-column: 1 / -1; grid-row: 2; }
}
.gr-sfida-banner { background: var(--accent-soft); border: 1px solid rgba(232, 53, 47, 0.45); border-radius: var(--radius); padding: 12px 14px; font-size: 14px; text-align: center; }
.gr-confronto { line-height: 1.6; }
.gr-confronto b { color: var(--text); font-size: 15px; }

/* ---------- Social ---------- */
.footer-social { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.footer-social > span { font: 600 11px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-right: 4px; }
.social-link { display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elevated); font-size: 13px; color: var(--text); }
.social-link:hover { border-color: var(--accent); }
.social-nome { font-weight: 600; }
.social-testo { color: var(--text-muted); }
.social-link.whatsapp .social-nome, .seguici-card.whatsapp .gioco-tag { color: #25d366; }
.seguici-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; padding: 28px 0 70px; }
.seguici-card { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: transform .15s ease, border-color .15s ease; }
.seguici-card:hover { transform: translateY(-3px); border-color: var(--border); }
.seguici-card.whatsapp { border-color: rgba(37, 211, 102, 0.45); }
.seguici-card h2 { font-family: var(--font-display); font-size: 26px; text-transform: uppercase; letter-spacing: 0.03em; margin: 0; }
.seguici-card p { color: var(--text-secondary); font-size: 14px; line-height: 1.6; margin: 0; flex: 1; }
.gr-whatsapp { font-size: 13.5px; color: var(--text-secondary); margin: 4px 0 0; }
.gr-whatsapp a { color: #25d366; font-weight: 600; }
.contatti { padding: 0 0 70px; display: flex; flex-direction: column; gap: 14px; }
.contatti h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; margin: 0; }
.contatti-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.contatto { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 18px; }
.contatto h3 { margin: 0 0 6px; font-size: 16px; }
.contatto p { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.contatti-email { font-size: 15px; margin: 0; }
.contatti-email a { color: var(--accent); font-weight: 600; }

/* ---------- Traduttore Google dentro la pagina: niente barra, niente evidenziazioni ---------- */
body > .skiptranslate, iframe.skiptranslate, .goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame, .VIpgJd-ZVi9od-ORHb-OEVmcd { display: none !important; }
html.tradotto body { top: 0 !important; position: static !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
font { background: none !important; box-shadow: none !important; }
/* ritratti ESPN: ritagliati su trasparente, sfondo chiaro come su UFC.com */
img.foto-bianca { background: linear-gradient(180deg, #ffffff 0%, #e9e9ee 100%); object-position: top; }