/* ======================================================================
   COMPONENTI: grammatica visiva condivisa
   Generato dalla migrazione Fase 0; modificare nel file della responsabilita.
   ====================================================================== */

/* ---------- Bottoni ---------- */
button {
  background: var(--surface-interactive);
  color: var(--text-primary);
  border: 0;
  min-height: 44px;
  padding: 10px 18px;
  font-size: var(--type-corpo);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent) inset, 0 6px 14px color-mix(in srgb, var(--fx-shade) 30%, transparent);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, background .15s, border-color .15s, box-shadow .15s;
}
button:active:not(:disabled) { transform: translateY(0); }

button.ghost { background: transparent; box-shadow: none; border: 1px solid var(--border-subtle); }
button.danger { border-color: color-mix(in srgb, var(--state-negative-strong) 50%, transparent); color: var(--state-negative); background: color-mix(in srgb, var(--state-negative-strong) 7%, transparent); }
button.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--state-negative-strong) 15%, transparent); border-color: var(--state-negative); }
button:disabled { opacity: .4; cursor: not-allowed; }

select, input[type=text], input[type=number], input[type=search] {
  background: var(--surface-raised);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: .92rem;
  font-family: inherit;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
select:focus, input[type=text]:focus, input[type=number]:focus, input[type=search]:focus, .sg-campo textarea:focus {
  outline: none; border-color: var(--accent-brand); box-shadow: 0 0 0 3px var(--accent-brand-glow);
}

/* ---------- Card ---------- */
/* Una card e un piano appoggiato sul fondale: prende luce sul bordo alto e
   fa ombra sotto. Il contorno da 1px, ripetuto trenta volte in una pagina,
   e quello che faceva sembrare tutto un modulo da compilare. */
.card {
  position: relative;
  border: 0;
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.card.accent { border-color: color-mix(in srgb, var(--accent-brand) 45%, transparent); box-shadow: 0 0 0 1px var(--accent-brand-glow), var(--elevation-2); }
.card.accent::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: linear-gradient(90deg, var(--accent-brand), transparent);
}

details.card > summary {
  cursor: pointer; list-style: none; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: '▾'; color: var(--text-muted); transition: transform .2s; }
details.card[open] > summary::after { transform: rotate(180deg); }

.muted { color: var(--text-secondary); font-size: .85rem; }
.gold { color: var(--accent-achievement); }
.small { font-size: .8rem; }

/* ---------- Home ---------- */
.home-hero .ball { font-size: 3.4rem; filter: drop-shadow(0 4px 16px var(--accent-brand-glow)); }
.home-hero h2 {
  font-size: .92rem; letter-spacing: 3.5px; font-weight: 700;
  color: var(--accent-brand); text-transform: uppercase;
}
.home-actions { display: flex; gap: 9px; }
.home-actions button { padding: 11px 14px; }

/* ---------- Creazione ---------- */

/* schede di scelta (punto di partenza, agente) */
.pick.sel {
  box-shadow: 0 0 0 1px var(--accent-brand-glow); /* background e border-color li dichiara la regola a fondo file */
}
.pick .p-tag { font-size: .74rem; text-transform: uppercase; letter-spacing: .7px; }

/* ---------- Topbar ---------- */
.topbar { flex-wrap: wrap; justify-content: space-between;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--surface-raised), var(--surface-content));
  border: 1px solid var(--border-subtle);
  box-shadow: var(--elevation-1);
}
.topbar .title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.topbar .actions button { padding: 6px 11px; font-size: .8rem; }
/* Alto quanto la riga che lo ospita (18px): con i 35px di .icon-btn la landing si spostava giu' di 18. Il padding e' l'area di tocco, il margine negativo la toglie dal calcolo. */
.lang-pick { font: inherit; font-size: .68rem; font-weight: 700; letter-spacing: .12em; width: 46px; height: 18px; padding: 0 0 0 2px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }

/* ---------- Layout hub ---------- */
.hub-grid { display: grid; align-items: start; }
/* Il pannello segue lo scroll ma, se è più alto della finestra, scorre al suo
   interno: il fondo (contratto, scouting, Legend Points) resta raggiungibile. */

/* navigazione a schede */
.tabs { display: flex; gap: 4px; margin-bottom: 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow-x: auto; }
.tabs button {
  flex: 1; white-space: nowrap; background: transparent; border: none;
  padding: 8px 12px; color: var(--text-secondary); border-radius: var(--radius-sm);
}
.tabs button:hover { background: var(--surface-raised); transform: none; color: var(--text-primary); }

/* ---------- Diario ---------- */
.latest {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-player) 10%, transparent), color-mix(in srgb, var(--accent-player) 2%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent-player) 28%, transparent);
  font-size: var(--type-corpo);
}
.latest .l-when { font-size: var(--type-nota); color: var(--text-muted); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 2px; }
.feed { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column-reverse; }
.feed > div { padding: 7px 2px; border-bottom: 1px solid var(--border-subtle); font-size: var(--type-corpo); }
.feed > div:first-child { border-bottom: none; }
.feed::-webkit-scrollbar { width: 8px; }
.feed::-webkit-scrollbar-thumb { background: var(--surface-interactive); border-radius: var(--radius-xs); }

/* ---------- Pannello giocatore ---------- */

.bar { height: 7px; background: var(--surface-track); border-radius: var(--radius-xs); overflow: hidden; box-shadow: inset 0 1px 2px color-mix(in srgb, var(--fx-shade) 50%, transparent); }
.bar > span { display: block; height: 100%; border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--accent-player-deep), var(--accent-player)); transition: width .3s ease; }
.bar.b-good > span { background: linear-gradient(90deg, var(--state-positive-deep), var(--state-positive)); }
.bar.b-warn > span { background: linear-gradient(90deg, var(--accent-achievement-deep), var(--state-warning)); }
.bar.b-bad > span { background: linear-gradient(90deg, var(--state-negative-deep), var(--state-negative)); }

.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: var(--type-corpo); padding: 3px 0; }
.kv .k { color: var(--text-secondary); }

.badge {
  display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill); font-size: .74rem;
  font-weight: 600; border: 1px solid var(--border-default); background: var(--surface-raised); margin: 2px 3px 2px 0;
}
.badge.ok { border-color: color-mix(in srgb, var(--state-positive-strong) 40%, transparent); color: var(--state-positive); background: color-mix(in srgb, var(--state-positive-strong) 10%, transparent); }

.divider { border: none; border-top: 1px solid var(--border-subtle); margin: 12px 0; }

/* ---------- Focus allenamento ---------- */
.focus-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 7px; }
.focus-grid button { padding: 9px 6px; font-size: .84rem; }
.focus-grid button.sel {
  background: linear-gradient(180deg, var(--accent-achievement-bright), var(--accent-brand)); color: var(--text-on-achievement);
  border-color: var(--accent-brand-strong); box-shadow: 0 2px 10px var(--accent-brand-glow);
}

/* ---------- Tabelle / classifica ---------- */
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border-subtle); }
th { color: var(--text-muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .7px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--fx-lift) 1.5%, transparent); }
tbody tr:last-child td { border-bottom: none; }
tbody tr.me { background: linear-gradient(90deg, color-mix(in srgb, var(--accent-player) 16%, transparent), transparent); }
tr.me td { color: var(--accent-brand); font-weight: 700; }
.table-wrap { overflow-x: auto; }

/* pallini zona classifica */
.zone { display: inline-block; width: 4px; height: 15px; border-radius: var(--radius-xs); margin-right: 7px; vertical-align: -3px; background: transparent; }
.zone.z-ucl, .zone.z-eu1 { background: var(--accent-player); }
.zone.z-uel, .zone.z-eu2 { background: var(--state-warning); }
.zone.z-rel { background: var(--state-negative); }
/* Zone di classifica: il colore dice la destinazione, la legenda la nomina. */
.zone.z-eu3 { background: var(--field-accent); }
.zone.z-promo { background: var(--state-positive); }
.zone-legend { display: flex; flex-wrap: wrap; gap: 5px 16px; margin-top: 9px; color: var(--text-muted); font-size: var(--type-etichetta); }
.zone-legend span { display: inline-flex; align-items: center; gap: 7px; }
.zone-legend .zone { margin: 0; }
.legend-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 9px; font-size: .74rem; color: var(--text-muted); }

/* ---------- Offerte ---------- */
.offer { margin-bottom: 11px;
}

/* ---------- Modale evento ---------- */
.overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px;
  animation: fade .18s ease;
}
/* La scena della partita sta a z-index 100 (.match-transition): un overlay a 50
   ci finisce SOTTO, e il modulo si vede ma non si tocca — misurato da
   interfaccia-motore con elementFromPoint, che restituiva la scena a ogni
   altezza. Si alza SOLO questo, non tutti gli overlay: il bottone "segnala"
   e' l unico che si preme mentre una scena a 100 e' aperta. */
.sg-overlay { z-index: 120; }
.modal {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); width: 100%;
  box-shadow: var(--elevation-2);
  animation: pop .2s cubic-bezier(.2, .9, .3, 1.1);
  max-height: 90vh; overflow-y: auto;
}
.modal .ev-text { margin-bottom: 15px; font-size: .97rem; }
.modal .choice { width: 100%; text-align: left; font-weight: 400; }
.modal .choice b { font-weight: 700; }
.modal .choice .fx { display: block; margin-top: 4px; line-height: 1.45; }

/* ---------- Riepilogo carriera ---------- */
.stars { color: var(--accent-brand); letter-spacing: .5px; }

h1, h2, .title { font-family: var(--font-display-ui); letter-spacing: -.01em; }
/* Un occhiello nomina una sezione: e mondo, non una scelta. Era lime in ogni
   angolo dello schermo, ed e uno dei motivi per cui il lime aveva smesso di
   voler dire qualcosa. */
/* ETICHETTE MAIUSCOLE: una regola sola, tre colori per tre ranghi.
   Erano dodici (.eyebrow, .rtp4-kicker, .transition-kicker, .rc-eyebrow,
   .ci-kicker, .matchday-kicker, .modal-kicker, .cel-kicker, .aw-label...)
   con spaziature da .05em a .34em e corpi da .56rem a 1rem. */
.eyebrow, .rtp4-kicker, .aw-label, .modal-kicker, .cel-kicker, .imc-kicker small, .transition-kicker, .ci-kicker {
  color: var(--text-muted); font-size: var(--type-etichetta); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
}
/* quello che ti chiede il club, e le scene: stessa forma, colore e respiro diversi */
.transition-kicker, .ci-kicker { color: var(--accent-energy); letter-spacing: .26em; }

button { border-radius: var(--radius-md); letter-spacing: .01em; }
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--accent-brand); outline-offset: 3px; }
button.primary { background: var(--accent-brand); color: var(--text-on-accent); border-color: var(--accent-brand); box-shadow: 0 8px 28px var(--accent-brand-glow); }
button.primary:hover:not(:disabled) { background: var(--accent-brand-bright); border-color: var(--accent-brand-bright); }
.card { background: linear-gradient(150deg, color-mix(in srgb, var(--ink-700) 98%, transparent), color-mix(in srgb, var(--ink-850) 98%, transparent)); border-color: var(--border-subtle); box-shadow: var(--elevation-1); }

/* Home */
.home-shell { min-height: calc(100dvh - 74px); display: flex; flex-direction: column; justify-content: center; }
.home-nav { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 22px; border-bottom: 1px solid var(--border-subtle); }
.brand-lockup, .home-nav-end { display: flex; align-items: center; gap: 11px; }
.brand-word { font: 700 var(--type-valore)/1 var(--font-display-ui); letter-spacing: .12em; text-transform: uppercase; }
.season-chip { color: var(--text-muted); font-size: .68rem; font-weight: 700; letter-spacing: .12em; white-space: nowrap; }
.home-hero { flex: 1; min-height: 0; max-height: clamp(360px, 58dvh, 545px); display: grid; grid-template-columns: 1.08fr .92fr; gap: 42px; align-items: stretch; text-align: left; padding: clamp(20px, 4dvh, 56px) 3vw clamp(18px, 3dvh, 42px); }
.hero-copy { align-self: center; }
.home-hero h1 { max-width: 760px; margin: clamp(6px, 1.2dvh, 11px) 0 clamp(10px, 2dvh, 18px); font-size: clamp(2.4rem, min(6.4vw, 9.5dvh), 6.8rem); line-height: .88; text-transform: uppercase; letter-spacing: -.065em; }
.home-hero h1 span { color: transparent; -webkit-text-stroke: 1.5px var(--accent-brand); text-shadow: 0 0 36px color-mix(in srgb, var(--accent-brand) 9%, transparent); }
.hero-lead { max-width: 630px; color: var(--text-secondary); font-size: clamp(.95rem, min(1.55vw, 2.1dvh), 1.22rem); line-height: 1.55; }
.home-actions { max-width: 560px; margin: clamp(14px, 2.6dvh, 28px) 0 0; flex-direction: row; }
.hero-cta { min-width: 250px; display: flex; justify-content: space-between; align-items: center; padding: clamp(11px, 1.9dvh, 16px) 19px; text-transform: uppercase; font-size: .78rem; letter-spacing: .11em; }
.hero-cta b { font-size: 1.35rem; }
/* Le due modalita di creazione: la seconda strada e dichiarata, non nascosta,
   ma resta secondaria. Il sottotitolo dice cosa cambia davvero. */
.home-actions.modi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 640px; }
.home-actions.modi .hero-cta { min-width: 0; flex-wrap: wrap; row-gap: 2px; }
.home-actions.modi .hero-cta small { flex: 1 0 100%; order: 3; font-size: var(--type-etichetta); letter-spacing: .04em; text-transform: none; opacity: .78; }
.hero-visual { position: relative; min-height: 0; height: 100%; container-type: size; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: linear-gradient(150deg, color-mix(in srgb, var(--state-positive-deep) 16%, transparent), color-mix(in srgb, var(--ink-1000) 75%, transparent)); }
.stadium-lines { position: absolute; inset: 11%; border: 1px solid color-mix(in srgb, var(--accent-brand) 17%, transparent); border-radius: 50%; transform: perspective(500px) rotateX(58deg); box-shadow: 0 0 0 38px color-mix(in srgb, var(--accent-brand) 3.5%, transparent), 0 0 0 76px color-mix(in srgb, var(--accent-brand) 2.5%, transparent); }
.stadium-lines::before, .stadium-lines::after { content:""; position:absolute; background:color-mix(in srgb, var(--accent-brand) 14%, transparent); }
.stadium-lines::before { width:1px; inset:0 auto 0 50%; }.stadium-lines::after { height:1px; inset:50% 0 auto; }
.hero-shirt-wrap {
  /* 84% dell altezza della scheda: la maglia riempie il vuoto invece di
     spingere la pagina fuori schermo. Il clamp serve ai browser senza
     unita di contenitore. */
  --shirt-h: clamp(190px, min(30vw, 42dvh), 420px);
  position: relative; display: inline-block;
  transform: rotate(-4deg); filter: drop-shadow(0 26px 40px color-mix(in srgb, var(--fx-shade) 50%, transparent));
}
@supports (height: 1cqh) {
  .hero-shirt-wrap { --shirt-h: min(84cqh, 96cqw, 470px); }
}
.hero-shirt { display: block; width: auto; height: var(--shirt-h); }
.shirt-name, .shirt-number {
  position: absolute; left: 56.5%; transform: translate(-50%, -50%);
  color: var(--shirt-print); font-family: var(--font-display-ui);
  text-transform: uppercase; white-space: nowrap; pointer-events: none;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
}
.shirt-name { top: 22.8%; font-size: calc(var(--shirt-h) * .088); font-weight: 700; letter-spacing: .06em; }
.shirt-number { top: 44.8%; font-size: calc(var(--shirt-h) * .42); font-weight: 700; letter-spacing: -.02em; }
/* La stampa sta nel tessuto: due cifre larghe al corpo pieno sforavano. */
.shirt-number[data-cifre="2"] { font-size: calc(var(--shirt-h) * .33); }
.shirt-name[data-lungo="m"] { font-size: calc(var(--shirt-h) * .075); }
.shirt-name[data-lungo="l"] { font-size: calc(var(--shirt-h) * .062); }
.shirt-name[data-lungo="xl"] { font-size: calc(var(--shirt-h) * .052); }

.career-route { position: absolute; left: 24px; right: 24px; bottom: 22px; display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: .64rem; font-weight: 700; letter-spacing: .1em; }
.career-route i { flex: 1; height: 1px; background: var(--border-default); }.career-route .route-on { color: var(--accent-brand); }
.home-proof { display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid var(--border-subtle); }
.home-proof div { display: flex; align-items: baseline; gap: 9px; padding: clamp(11px, 2.2dvh, 20px) 4vw; border-right: 1px solid var(--border-subtle); }.home-proof div:last-child{border:0}.home-proof strong { font: 700 2rem/1 var(--font-display-ui), sans-serif; color: var(--accent-brand); }.home-proof span { color: var(--text-secondary); text-transform: uppercase; font-size: .67rem; letter-spacing: .12em; }
.home-utilities { padding: clamp(12px, 2.4dvh, 22px) 0 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; align-items: center; }.home-utilities>div:first-child{display:flex;flex-direction:column}.home-utilities span{color:var(--text-secondary);font-size:.78rem}.utility-actions{display:flex;gap:6px}.utility-actions button{font-size:.75rem;padding:7px 10px}.home-utilities>p{grid-column:1/-1}

/* Creazione guidata */
.create-steps .on {
  color: var(--accent-brand);
}
.create-steps .on b {
  border-color: var(--accent-brand);
}
.pick.sel {
  background: linear-gradient(145deg,color-mix(in srgb, var(--accent-brand) 15%, transparent),color-mix(in srgb, var(--field-accent) 4.5%, transparent));
  border-color: var(--accent-brand);
}
.pick .p-tag {
  color: var(--accent-energy);
}

/* Hub e gerarchia della stagione */
.topbar {
  display: grid;
  /* laterali UGUALI, o la barra non e' al centro della larghezza vera. `1fr`
     e non `minmax(0,1fr)`: il minimo resta il contenuto, il giocatore non si
     tronca mai, e a cedere e' il nome del club (scritto anche altrove). */
  grid-template-columns: minmax(0, 1fr) minmax(240px, 370px) 1fr;
  align-items: center;
  gap: 26px;
  padding: 14px 18px;
  border-left: 0;
  border-radius: var(--radius-md);
}
.club-lockup {
  display: flex;
  align-items: center;
  gap: 11px;
}
.club-crest,
.mini-crest {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg,var(--accent-brand),var(--accent-brand-deep));
  color: var(--text-on-accent-deep);
  font: 700 1rem var(--font-display-ui);
}
.club-crest { width: 42px; height: 42px; }
/* Nel vivaio la testata diceva "Napoli · Serie A" e sembrava la prima squadra.
   La categoria sta accanto al nome del club, dove non si puo non vederla. */
.badge-vivaio {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--accent-player) 55%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent-player) 10%, transparent);
  color: var(--accent-player);
  font-size: var(--type-etichetta);
  font-weight: 700;
  letter-spacing: .08em;
  vertical-align: 2px;
}
.topbar .title {
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.season-progress { justify-self: center; width: 100%; }
.topbar .actions { justify-self: end; }
.season-progress>div:first-child {
  display: flex;
  justify-content: space-between;
  color: var(--text-secondary);
  font-size: var(--type-etichetta);
  text-transform: uppercase;
  letter-spacing: .08em;
}
/* La percentuale non c e piu: diceva per la terza volta quello che gia dicono
   "Giornata 19 di 38" e la barra — e delle tre era l unica a non dire quante
   ne restano. I pixel che liberava vanno alla barra, che raddoppia e si legge
   da lontano. Resta avorio: e cronaca, non un segnale (niente lime, che e dei
   Punti Leggenda, e niente colore del club, nero su Juventus e Inter). */
.progress-track {
  height: 8px;
  margin-top: 7px;
  background: var(--ink-900);
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.progress-track i {
  display: block;
  height: 100%;
  background: var(--text-primary);
  transition: width .6s ease;
}
.icon-btn {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  padding: 0;
  border-radius: 50%;
}
.hub-grid {
  grid-template-columns: minmax(0,1fr) 350px;
  gap: 16px;
}
.hub-grid>* {
  min-width: 0;
}
.tabs {
  position: sticky;
  top: 8px;
  z-index: 8;
  padding: 5px;
  background: color-mix(in srgb, var(--ink-900) 88%, transparent);
  backdrop-filter: blur(14px);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tabs button.on {
  background: var(--surface-interactive);
  color: var(--accent-brand);
  box-shadow: inset 0 -2px 0 var(--accent-brand);
}
.mini-crest {
  width: 58px;
  height: 58px;
  font-size: 1.35rem;
  background: var(--surface-interactive);
  color: var(--text-primary);
}
.mini-crest.mine {
  background: var(--accent-player);
  color: var(--text-on-player);
}

/* Il blocco decisione: l'accento più forte della pagina sta sul CONTENITORE della scelta, le opzioni restano graficamente equivalenti */
/* La decisione non ha piu bisogno di una cornice accesa per farsi trovare:
   il lime sta sul bottone che porta avanti la storia, e basta quello. */
/* Quante sono le strade cambia con la fase: due nell'estate con la nazionale,
   tre in campionato, quattro quando c'e un big match. La griglia si adatta da
   sola, invece di avere un modificatore per ogni caso. */
.decision-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
/* il primario vince sulla regola generica del blocco, che viene dopo */
.decision-options>button.primary, .decision-options .opt>button.primary {
  background: linear-gradient(180deg, var(--accent-brand), var(--accent-brand-strong));
  color: var(--text-on-accent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--fx-lift) 35%, transparent) inset, 0 10px 26px color-mix(in srgb, var(--accent-brand) 18%, transparent);
}
.decision-options>button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 76px;
  padding: 12px 14px;
  text-align: left;
  background: var(--surface-control);
  border-color: var(--border-strong);
}
.decision-options>button:hover:not(:disabled) {
  border-color: var(--accent-brand);
  background: var(--ink-700);
  transform: translateY(-2px);
}
.decision-options>button:focus-visible {
  outline: 2px solid var(--accent-player);
  outline-offset: 2px;
}
.decision-options strong {
  font: 700 .9rem/1.2 var(--font-ui);
  text-transform: none;
}
.decision-options strong svg {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
}
.decision-options small {
  color: var(--text-secondary);
  font-size: .8rem;
  line-height: 1.35;
}
.decision-confirm {
  grid-column: 1/-1;
  display: grid;
  gap: 5px;
  padding: 13px 15px;
  border: 1px dashed var(--accent-brand);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent-brand) 7%, transparent);
}
.decision-confirm strong {
  font-size: .95rem;
}
.decision-confirm small {
  color: var(--text-secondary);
  font-size: .82rem;
  line-height: 1.4;
}
.decision-confirm>div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.decision-confirm>div button {
  font-size: .86rem;
}
.section-label {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin: 24px 3px 9px;
}
.section-label small {
  color: var(--text-muted);
}

/* Pre-campionato: una sola decisione, senza rumore laterale */
.preseason-focus-mode {
  max-width: 1060px;
  margin: 0 auto;
  min-height: calc(100dvh - 210px);
  display: grid;
  align-content: center;
}
/* la testata del ritiro alla stessa scala della creazione */
.camp-head { margin-bottom: 16px; }
.camp-head h1 { margin: 4px 0 0; font-size: clamp(1.7rem, 3vw, 2.7rem); text-transform: uppercase; letter-spacing: -.03em; }
.preseason-decision {
  padding: clamp(22px,4vw,42px);
  border-color: var(--ink-450);
  box-shadow: var(--elevation-2);
}
.preseason-head {
  max-width: 760px;
  margin: 0 auto 30px;
  text-align: center;
}
.preseason-head>span {
  color: var(--accent-energy);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .18em;
}
.preseason-head h1 {
  margin: 8px 0 10px;
  font-size: clamp(1.8rem,4vw,3.3rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.045em;
}
.preseason-head p {
  color: var(--text-secondary);
  line-height: 1.55;
}
.training-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.training-slot {
  padding: 20px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--ink-850);
}
.training-slot-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 11px;
  align-items: start;
  margin-bottom: 16px;
}
.training-slot-head>span {
  color: var(--accent-energy);
  font: 700 .8rem var(--font-display-ui);
}
.training-slot-head h2 {
  font-size: 1rem;
}
.training-slot-head p {
  color: var(--text-secondary);
  font-size: .68rem;
}
.training-slot-head em {
  padding: 3px 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
  font-size: .48rem;
  font-style: normal;
  letter-spacing: .08em;
}
.training-slot .focus-grid {
  grid-template-columns: repeat(2,1fr);
}
.training-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 10px 12px;
  background: var(--ink-800);
  border-color: var(--ink-500);
  text-align: left;
}
.training-choice small {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--surface-scoreboard);
  color: var(--text-muted);
  font-size: .62rem;
}
.training-choice.sel {
  border-color: var(--accent-brand);
  background: color-mix(in srgb, var(--accent-brand) 10%, transparent);
  color: var(--accent-brand);
}
.training-choice.sel small {
  background: var(--accent-brand);
  color: var(--text-on-accent);
}
.preseason-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-default);
}
.preseason-confirm p {
  color: var(--text-secondary);
  font-size: .78rem;
}
.preseason-confirm button {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 13px 17px;
  border-color: var(--accent-brand);
  color: var(--accent-brand);
  background: transparent;
}
.preseason-confirm button span {
  font-size: 1.1rem;
}

/* Player card progressivamente rivelata */
/* Il tuo momento: una riga per voce, non sei mattonelle da tre. Cosi il
   nome sta a sinistra, il numero e la parola a destra, e la barra sotto
   attraversa tutta la larghezza: si leggono in colonna, in un colpo. */

/* Decisioni */
.overlay {
  background: color-mix(in srgb, var(--ink-1000) 86%, transparent);
  backdrop-filter: blur(12px);
}
.modal {
  max-width: 620px;
  padding: 26px;
  border-top: 1px solid var(--accent-brand);
  background: linear-gradient(145deg,var(--ink-700),var(--surface-inset-soft));
}
.modal-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--accent-brand);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
}
.modal-kicker i {
  flex: 1;
  height: 1px;
  background: var(--border-default);
}
.modal-kicker small {
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0;
}
.modal h2 {
  margin: 17px 0 10px;
  font-size: 1.65rem;
  text-transform: uppercase;
}
.modal .ev-text {
  padding: 13px 14px;
  border-left: 2px solid var(--accent-energy);
  background: color-mix(in srgb, var(--fx-lift) 2.5%, transparent);
  color: var(--text-secondary);
}
.modal .choice {
  display: grid;
  grid-template-columns: 32px 1fr 24px;
  gap: 11px;
  align-items: center;
  margin-bottom: 8px;
  padding: 14px;
  background: var(--surface-control);
  border-color: var(--border-subtle);
}
.modal .choice:hover {
  border-color: var(--accent-brand);
  transform: translateX(3px);
}
.choice-num {
  font: 700 .72rem var(--font-display-ui);
  color: var(--accent-energy);
}
.choice-copy {
  display: flex;
  flex-direction: column;
}
.modal .choice .fx {
  color: var(--text-secondary);
  font-size: .69rem;
}
.choice-arrow {
  color: var(--accent-brand);
  font-size: 1.2rem;
}
.modal .choice.is-selected {
  border-color: var(--accent-brand);
  background: color-mix(in srgb, var(--accent-brand) 12%, transparent);
  transform: scale(.99);
}

/* ======================================================================
   TRANSIZIONI: LA PARTITA, LA SIMULAZIONE, I PASSAGGI DI STAGIONE
   La partita segue il mockup approvato (docs/mockup-fase1/partita.html):
   fondale di stadio coi colori sociali delle due squadre, tabellone e
   cronaca in alto, in basso l'azione appena vista e come stai andando tu.
   Ranghi di colore, qui: azzurro = te (il tuo voto, i tuoi episodi in
   cronaca), oro = un tuo gol (traguardo, non decisione), lime = solo il
   pulsante che manda avanti, i colori dei club solo sul fondale e sulle
   bande del tabellone. Le altre transizioni (simulazione lunga, nuova
   stagione, inizio carriera) restano la colonna centrata di prima.
   ====================================================================== */
.match-transition {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ink-950);
  color: var(--text-primary);
  opacity: 0;
  transition: opacity .28s ease;
}
.match-transition.show { opacity: 1; }
.match-transition.leave { opacity: 0; }
.transition-noise {
  position: absolute;
  inset: -20%;
  background: repeating-linear-gradient(115deg,transparent 0 28px,color-mix(in srgb, var(--accent-brand) 2.2%, transparent) 29px 30px);
  animation: sweep 5s linear infinite;
}
.transition-content {
  position: relative;
  width: min(var(--measure-stage), 92vw);
  text-align: center;
}
.transition-round {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: var(--type-etichetta);
  letter-spacing: .12em;
}
.transition-match {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  margin: 30px 0 20px;
}
.transition-match strong {
  font: 700 clamp(1.25rem,4vw,3.3rem)/.95 var(--font-display-ui);
  text-transform: uppercase;
}
.transition-clock {
  font: 700 clamp(2.8rem,7vw,5.4rem)/1 var(--font-display-ui);
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent-brand);
}
.transition-bar {
  height: 3px;
  margin: 13px auto 12px;
  background: var(--ink-700);
  overflow: hidden;
  width: min(680px,86%);
}
.transition-bar i {
  display: block;
  width: 3%;
  height: 100%;
  background: linear-gradient(90deg,var(--accent-player),var(--accent-brand),var(--accent-energy));
  transition: width .25s ease;
}
.transition-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 38px;
  color: var(--text-secondary);
  font-size: var(--type-nota);
}
.transition-result>b {
  color: var(--text-primary);
  font: 700 1rem var(--font-display-ui);
}
.transition-result span strong { color: var(--accent-brand); }
.match-transition.season .transition-clock,
.match-transition.career .transition-clock,
.match-transition.run .transition-clock {
  font-size: clamp(3rem,10vw,7.5rem);
}
.transition-continue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 150px;
  padding: 13px 16px;
  border: 1px solid var(--accent-brand);
  border-radius: var(--radius-sm);
  background: var(--accent-brand);
  color: var(--text-on-accent);
  font-size: var(--type-etichetta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  transition: transform .18s ease,box-shadow .18s ease;
}
.transition-continue:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-brand) 16%, transparent);
}
.transition-continue:focus-visible {
  outline: 2px solid var(--accent-player);
  outline-offset: 3px;
}
.transition-continue:disabled { cursor: wait; opacity: .7; }

/* ---- La scena della partita ---- */
/* DUE BARRE SU TRE (utente, 9 settembre): scorrevano sia questo contenitore sia
   .transition-content.hud dentro. Misurato: l esterno scorreva 38px, l interno
   140. Una delle due esisteva per trentotto pixel ed era quella che si vedeva.
   Scorre solo l interno, dove sta il contenuto. */
.match-transition.match {
  place-items: stretch;
  overflow: hidden;
  overscroll-behavior: contain;
  background: var(--ink-1000);
}
body:has(.match-transition.match) .rtp4-schedule { overflow-y: hidden; }
.stadio {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 46%, var(--ink-1000) 100%);
}
/* i due fari che illuminano la scena dall'alto */
.faro {
  position: absolute;
  top: -16%;
  width: 50%;
  height: 96%;
  background: linear-gradient(178deg, color-mix(in srgb, var(--text-primary) 13%, transparent), color-mix(in srgb, var(--text-primary) 3%, transparent) 54%, transparent 82%);
  filter: blur(16px);
}
.faro.l { left: -12%; transform: rotate(11deg); transform-origin: top center; }
.faro.r { right: -12%; transform: rotate(-11deg); transform-origin: top center; }
.curva {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 22%;
  height: 26%;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--text-primary) 7%, transparent) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, var(--ink-850), var(--ink-950));
  mask-image: linear-gradient(180deg, transparent, var(--fx-shade) 34%, var(--fx-shade) 76%, transparent);
}
.prato {
  position: absolute;
  left: -46%;
  right: -46%;
  bottom: -2%;
  height: 250%;
  transform: perspective(1500px) rotateX(58deg);
  transform-origin: bottom center;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--text-primary) 5%, transparent) 0 90px, transparent 90px 180px),
    linear-gradient(180deg, color-mix(in srgb, var(--field-accent) 55%, var(--ink-900)) 0%, var(--ink-850) 50%, var(--ink-900) 100%);
  border-top: 2px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
  opacity: .55;
}
.prato::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--ink-1000) 0%, color-mix(in srgb, var(--ink-1000) 50%, transparent) 22%, transparent 52%);
}
.prato .circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 320px;
  height: 320px;
  margin: -160px 0 0 -160px;
  border: 3px solid color-mix(in srgb, var(--text-primary) 16%, transparent);
  border-radius: var(--radius-pill);
}
/* i colori sociali entrano solo da qui: due lame di luce ai lati */
.lato { position: absolute; top: 0; bottom: 0; width: 22%; pointer-events: none; }
.lato.l { left: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--home-c, transparent) 20%, transparent), transparent 84%); }
.lato.r { right: 0; background: linear-gradient(270deg, color-mix(in srgb, var(--away-c, transparent) 20%, transparent), transparent 84%); }
.vig {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, var(--ink-1000) 0%, transparent 36%),
    radial-gradient(126% 100% at 50% 46%, transparent 46%, color-mix(in srgb, var(--ink-1000) 68%, transparent) 100%);
}
.match-transition.match .transition-content.hud {
  z-index: 3;
  width: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Tutto in un blocco solo, centrato: il fondale dello stadio resta dietro,
     ma la scena non si spacca in due meta con un buco in mezzo. Quel vuoto
     era del mockup, che lo teneva per il campo; finche non c e niente da
     mettere li, e solo distanza fra le cose che leggi. */
  justify-content: flex-start;
  gap: 18px;
  padding: 20px 26px 24px;
  text-align: center;
}
.hud-top { display: flex; flex: none; flex-direction: column; align-items: center; min-height: 0; }
/* Il bottone per avanzare spariva scrollando (utente, 11 settembre): "se non sai
   che c'e' non sai che fare a fine primo tempo". Sticky sul BOTTONE non funziona
   — il suo blocco contenitore e' alto 98px e non c'e' spazio in cui restare,
   misurato: stesso punto con e senza. Sticky va qui, sul contenitore dentro la
   colonna che scorre: misurato top 522 / bottom 566 in cima, a meta' e in fondo.
   Pinza anche la barra della velocita', che e' un guadagno. */
.hud-bottom { display: flex; flex: none; flex-direction: column; align-items: center; gap: 14px;
  position: sticky; bottom: 0; z-index: 4; padding-bottom: 4px; background: linear-gradient(transparent, var(--ink-1000) 42%); }
.match-transition.match .transition-round {
  order: -1;
  margin: 0 0 2px;
}
.match-transition.match .transition-bar {
  width: 100%;
  height: 2px;
  margin: 0;
}

/* ---- Il tabellone ---- */
.board {
  display: flex;
  align-items: stretch;
  /* si stende quanto il blocco: la tua riga sotto e larga uguale */
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-scoreboard);
  overflow: hidden;
  box-shadow: 0 26px 70px var(--ink-1000);
}
/* Il tabellone e la tua riga sono la stessa colonna: la riga sta sotto il
   risultato ed e larga quanto lui. */
.tabellone { display: flex; flex-direction: column; align-items: stretch; width: max-content; max-width: 100%; }
.board-team { display: flex; align-items: center; flex: 1; padding: 13px 26px; min-width: 0; }
.board-team.away { justify-content: flex-end; }
/* I due colori della squadra si toccano: il pieno del primo sta sul bordo
   esterno, attaccato alla banda che porta il secondo, e sfuma verso il
   punteggio. Il nome ci sta sopra scritto con l inchiostro che ClubColors
   dichiara per quella maglia — bianco sul Napoli, nero sul Parma — cosi si
   legge senza ombre e senza schiarire il colore. */
.board-team.home { background: linear-gradient(to right, var(--home-c) 0 34%, color-mix(in srgb, var(--home-c) 10%, var(--ink-1000))); color: var(--home-ink, var(--text-primary)); }
.board-team.away { background: linear-gradient(to left, var(--away-c) 0 34%, color-mix(in srgb, var(--away-c) 10%, var(--ink-1000))); color: var(--away-ink, var(--text-primary)); }
/* Lo spazio c e: il nome per intero, non una sigla di tre lettere. */
.board-name {
  font-family: var(--font-display-ui);
  font-weight: 700;
  font-size: var(--type-sezione);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board-team.away { text-align: right; }
.board-score {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 26px;
  background: var(--ink-1000);
  border-left: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
}
/* Il colore del club e una riga verticale spessa sul bordo esterno, non un
   rettangolo dipinto: si vede da lontano e non rende illeggibile un nome.
   ClubColors dichiara due colori per squadra e ci stanno tutti e due —
   il secondo e la striscia sottile all esterno. */
.board-tab { width: 26px; align-self: stretch; }
.board-tab.home { background: var(--home-c2, var(--home-c)); }
.board-tab.away { background: var(--away-c2, var(--away-c)); }

.board-n {
  font-family: var(--font-display-ui);
  font-weight: 700;
  font-size: var(--type-numero);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--text-primary);
}
.board-min { text-align: center; }
.match-transition.match .board-min .transition-clock {
  display: block;
  font: 700 var(--type-valore)/1 var(--font-display-ui);
  letter-spacing: -.01em;
  color: var(--text-primary);
  -webkit-text-stroke: 0;
}
.board-tempo {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--type-etichetta);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.match-transition.match .transition-comp { margin-bottom: 10px; }

/* ---- La cronaca ---- */
/* LA CARTA DI SCENA. Le schermate che stanno su un fondale — la partita, il
   verdetto, l annuario — usano tutte lo stesso contenitore: scuro e
   traslucido, cosi la scena dietro si vede, con un bordo sottile. Le carte
   opache (.card) restano dove non c e una scena: hub, mercato, statistiche. */
.crono, .live, .fine-box {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--ink-850) 82%, transparent);
  box-shadow: 0 20px 60px var(--ink-1000);
}
.crono {
  width: min(var(--measure-text), 100%);
  margin-top: 16px;
  padding: var(--space-2) var(--space-3);
  min-height: 0;
  flex: none;
}
.crono .eyebrow { display: block; text-align: center; margin-bottom: var(--space-1); }
.transition-events {
  display: flex;
  flex-direction: column;
  max-height: 8rem;
  overflow-y: auto;
  scrollbar-width: thin;
}
.transition-event {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: baseline;
  padding: var(--space-1) 0;
  border-top: 1px solid var(--border-subtle);
  text-align: left;
  color: var(--text-muted);
  font-size: var(--type-nota);
  animation: eventIn .25s ease both;
}
.transition-event:last-child { border-top: 0; }
.transition-event time {
  font: 700 var(--type-nota) var(--font-display-ui);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.transition-event>b { color: var(--text-secondary); font-size: var(--type-nota); font-weight: 400; }
/* i tuoi episodi sono azzurri, il tuo gol e' oro: il resto e' mondo, e resta
   neutro. Casa e trasferta non si colorano piu' di squadra: lo dice gia' il
   tabellone, e due colori in piu' qui rendevano illeggibile la riga. */
/* Chi ha fatto l azione lo dice il colore della squadra: una riga verticale a
   sinistra e un velo che sfuma. Il colore resta sulla forma e non sul testo,
   perche un club con la maglia blu notte scriverebbe illeggibile su nero. */
.transition-event.home, .transition-event.away { padding-left: 10px; border-left: 3px solid var(--border-strong); }
.transition-event.home { --evento-c:var(--home-c); --evento-ink:var(--home-ink); border-left-color: var(--home-c); background: linear-gradient(90deg, color-mix(in srgb, var(--home-c) 16%, transparent), transparent 62%); }
.transition-event.away { --evento-c:var(--away-c); --evento-ink:var(--away-ink); border-left-color: var(--away-c); background: linear-gradient(90deg, color-mix(in srgb, var(--away-c) 16%, transparent), transparent 62%); }
.transition-event.player-assist,
.transition-event.player-save,
.transition-event.player-defense,
.transition-event.player-in,
.transition-event.player-out { color: var(--text-secondary); }
.transition-event.player-assist time,.transition-event.player-save time,.transition-event.player-defense time { color: var(--accent-player); }
.transition-event.goal { color:var(--evento-ink); background:var(--evento-c); animation:playerGoal .5s ease both; }
.transition-event.goal>b,.transition-event.goal time { color:var(--evento-ink); }

/* ---- L'azione in corso e la tua riga ---- */
.live {
  width: min(var(--measure-text), 100%);
  padding: var(--space-2) var(--space-3);
}
.match-stop { width: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.you {
  width: 100%;
  margin-top: 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 26px;
  padding: 15px 22px;
  border: 1px solid var(--accent-player);
  border-radius: var(--radius-md);
  background: var(--surface-scoreboard);
  box-shadow: 0 18px 50px var(--ink-1000);
}
.you-id { display: flex; align-items: center; gap: 13px; text-align: left; }
.you-no {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--accent-player) 30%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-player) 12%, transparent);
  color: var(--accent-player);
  font-family: var(--font-display-ui);
  font-weight: 700;
  font-size: var(--type-valore);
}
.you-name {
  display: block;
  font-family: var(--font-display-ui);
  font-weight: 650;
  font-size: var(--type-valore);
}
.match-transition.match .transition-player {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--type-etichetta);
}
.match-transition.match .transition-player b { font-weight: 400; }
.match-transition.match .transition-player small { margin-left: 6px; }
.match-transition.match .transition-player.did-score b { color: var(--accent-player); }
.you-stats { display: flex; gap: 28px; justify-content: flex-end; }
.you-stat .eyebrow { display: block; margin-bottom: 3px; }
.you-stat b { font-family: var(--font-display-ui); font-weight: 700; font-size: var(--type-valore); }
/* ---- Il verdetto ---- */
.match-transition.final .transition-result {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: var(--space-4);
  background:
    radial-gradient(66% 42% at 50% 106%, color-mix(in srgb, var(--esito-c) 22%, transparent), transparent 64%),
    linear-gradient(180deg, color-mix(in srgb, var(--ink-1000) 62%, transparent), color-mix(in srgb, var(--ink-1000) 78%, transparent));
  overflow: auto;
}
.match-transition.match { --esito-c: var(--text-muted); }
.match-transition.e-vittoria { --esito-c: var(--state-positive); }
.match-transition.e-sconfitta { --esito-c: var(--state-negative); }
.match-transition.e-pareggio { --esito-c: var(--text-muted); }
.match-transition.final .hud { filter: blur(7px); opacity: .4; }
.match-transition.final .speed-ctl { display: none; }
.fine-box {
  width: min(760px, 92vw);
  padding: 22px 24px 22px;
  text-align: center;
}
.fine-esito {
  margin: 14px 0 0;
  font-family: var(--font-display-ui);
  font-weight: 700;
  font-size: var(--type-sezione);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--esito-c);
  line-height: 1;
}
/* la targa della competizione e il tabellone sono gli stessi della partita */
.fine-box .transition-comp { margin: 0 auto 14px; }
.fine-box .board { width: 100%; }
/* I numeri del verdetto: una griglia sola a quattro colonne, con i bordi che
   si incontrano. Prima erano tre blocchi impilati — quattro celle, poi tre,
   poi una centrata da sola — e non si allineava niente con niente. La prima
   riga pesa di piu perche e quella che guardi: voto, gol, assist, minuti. */
.fine-nums {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 24px 0;
  border-top: 1px solid var(--border-subtle);
  border-left: 1px solid var(--border-subtle);
}
.fine-nums > div {
  /* etichetta in cima e numero in fondo: cosi i numeri di una riga si
     allineano anche quando un etichetta va a capo e un altra no */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 10px;
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  min-width: 0;
}
.fine-nums > div > span {
  display: block;
  margin-bottom: 5px;
  color: var(--text-muted);
  font-size: var(--type-etichetta);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.fine-nums b {
  display: block;
  font-family: var(--font-display-ui);
  font-weight: 700;
  font-size: var(--type-valore);
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.fine-nums .forte b { font-size: var(--type-numero); }
.fine-nums .voto b { color: var(--accent-player); }
/* senza convocazione c e una riga sola: prende tutta la larghezza */
.fine-nums .wide { grid-column: 1 / -1; }
.fine-box .transition-continue { width: 100%; justify-content: center; }
.fine-box .transition-growth { justify-content: center; margin-bottom: 16px; }

/* Creazione giocatore: wizard visivo */
.create-steps button.on {
  color: var(--accent-brand);
}
.create-steps button.on b {
  border-color: var(--accent-brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-brand) 7%, transparent);
}
.create-steps button.done {
  color: var(--state-positive);
}
.create-steps button.done b {
  border-color: var(--state-positive);
}
.map-pin.sel {
  background: var(--accent-brand);
  border-color: var(--accent-brand);
  color: var(--text-on-accent-deep);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-brand) 12%, transparent),0 8px 24px color-mix(in srgb, var(--fx-shade) 40%, transparent);
}
.nation-pill.sel {
  border-color: var(--accent-brand);
  color: var(--accent-brand);
  background: color-mix(in srgb, var(--accent-brand) 7%, transparent);
}
.pitch-box.top {
  top: 18px;
  border-top: 0;
}
.role-dot.sel {
  width: 58px;
  height: 58px;
  background: var(--accent-brand);
  border-color: var(--accent-brand-bright);
  color: var(--text-on-accent);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent-brand) 12%, transparent),0 10px 24px color-mix(in srgb, var(--fx-shade) 35%, transparent);
}
.role-report>p:not(.eyebrow) {
  color: var(--text-secondary);
  font-size: .86rem;
  line-height: 1.55;
}
.foot-fit.good {
  border-left-color: var(--state-positive);
}
.foot-fit.warn {
  border-left-color: var(--accent-energy);
}
.foot-fit.warn b {
  color: var(--accent-energy);
}
.foot-choice.sel {
  background: var(--accent-brand);
  border-color: var(--accent-brand);
  color: var(--text-on-accent);
}
.journey-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}
.journey-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 405px;
  padding: 18px;
  text-align: left;
  background: var(--ink-850);
  border-color: var(--border-subtle);
  font-weight: 400;
}
.create-shell.breve .journey-card, .create-shell.breve .agent-card { min-height: 0; }
/* le carte del ritiro dicono quattro colonne e una riga: si fermano li */
.camp-card { min-height: 0; }
.camp-lascia { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: var(--type-nota); }
.camp-lascia small { display: none; color: var(--text-muted); font-size: var(--type-etichetta); letter-spacing: .06em; text-transform: uppercase; } /* solo sul telefono: vedi responsive.css */
.journey-card:hover:not(:disabled) {
  transform: translateY(-3px);
}
.journey-card.sel {
  border-color: var(--accent-brand);
  background: linear-gradient(150deg,color-mix(in srgb, var(--accent-brand) 13%, transparent),color-mix(in srgb, var(--ink-900) 96%, transparent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-brand) 18%, transparent);
}
.journey-top {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 15px;
}
.journey-index {
  color: var(--accent-energy);
  font: 700 .7rem var(--font-display-ui);
}
.journey-top em {
  margin-left: auto;
  padding: 3px 6px;
  border-radius: var(--radius-lg);
  background: var(--accent-brand);
  color: var(--text-on-accent-deep);
  font-size: .48rem;
  font-style: normal;
  font-weight: 700;
}
.journey-card>strong {
  font: 700 1.05rem var(--font-display-ui);
  text-transform: uppercase;
}
.journey-card>p {
  min-height: 38px;
  color: var(--text-secondary);
  font-size: .72rem;
}
.journey-card ul,
.journey-card li,
.journey-card li::before,
.agent-card.sel {
  border-color: var(--accent-brand);
  background: linear-gradient(150deg,color-mix(in srgb, var(--accent-brand) 12%, transparent),var(--ink-850));
}
.wizard-footer>button.primary { justify-self: end; min-width: 180px; }

/* Responsive delle nuove superfici decisionali */

/* ---------- Stelle di valutazione (niente moltiplicatori in faccia al giocatore) ---------- */
.star-rows { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 10px; }
.star-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.star-rows span { font-size: .76rem; color: var(--text-secondary); letter-spacing: .2px; }
.stars-row { display: flex; gap: 3px; flex-shrink: 0; }
.stars-row i {
  width: 11px; height: 11px; border-radius: var(--radius-xs); display: block;
  background: color-mix(in srgb, var(--fx-lift) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fx-lift) 6%, transparent);
}
.stars-row i.on {
  background: linear-gradient(160deg, var(--accent-brand), var(--accent-brand-strong));
  box-shadow: 0 0 6px var(--accent-brand-glow);
}

/* ---------- Scelta della squadra di partenza ---------- */
.club-card.sel {
  border-color: var(--accent-brand);
  background: linear-gradient(180deg, var(--accent-brand-soft), transparent);
  box-shadow: 0 0 0 1px var(--accent-brand-glow);
}

/* ---------- Motto dell'agente ---------- */

/* la rotta della carriera: tre tappe leggibili */
.career-route span { font-size: .64rem; letter-spacing: .14em; font-weight: 700; }

/* ---------- Simulazione lunga: risultati veri e classifica che si muove ---------- */
.run-feed { display: flex; flex-direction: column; gap: 6px; width: min(560px, 92vw); }
.run-result {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 12px; border-radius: var(--radius-sm); border-left: 3px solid var(--text-muted);
  background: color-mix(in srgb, var(--fx-lift) 4.5%, transparent); animation: runIn .28s ease;
}
.run-result.win { border-left-color: var(--state-positive); }
.run-result.loss { border-left-color: var(--state-negative); }
.run-result.draw { border-left-color: var(--state-warning); }
.run-result b { font-weight: 700; }
.run-result span { font-size: .76rem; color: var(--text-secondary); white-space: nowrap; }

/* la colonna della simulazione e larga 560 e sta in mezzo: senza il margin
   auto la classifica restava incollata a sinistra, fuori asse di 151px
   rispetto ai risultati e alla striscia dei numeri sopra */
.run-table { display: flex; flex-direction: column; gap: 3px; width: min(560px, 92vw); margin-inline: auto; }
/* e la barra di avanzamento sta nella stessa colonna, non piu larga */
.match-transition.run .transition-bar { width: min(560px, 92vw); }
.run-row {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--fx-lift) 3%, transparent); transition: background .3s, transform .3s;
}
.run-row i { font-style: normal; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.run-row b { font-variant-numeric: tabular-nums; }
.run-row.me { background: color-mix(in srgb, var(--accent-player) 14%, transparent); color: var(--accent-player); font-weight: 700; }
.run-row.me i { color: inherit; }
.run-row.up { animation: rowUp .45s ease; }
.run-row.down { animation: rowDown .45s ease; }

/* ---------- Paese di partenza per chi nasce fuori dai campionati mappati ---------- */
.start-country .eyebrow { margin-bottom: 4px; }

/* ---------- Icone SVG: ereditano colore e dimensione dal testo ---------- */
.ico {
  width: 1.05em; height: 1.05em;
  flex: 0 0 auto;
  vertical-align: -0.16em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
button .ico { margin-right: .1em; }

/* icone piene per gli stati di risultato */
.run-result.win .ico { color: var(--state-positive); }
.run-result.loss .ico { color: var(--state-negative); }
.run-result.draw .ico { color: var(--state-warning); }

/* nel diario le icone si distinguono dal testo senza urlare */
.feed .ico, .latest .ico { opacity: .85; }

/* ---------- Chip nazione: sigla grafica, non bandiere emoji ---------- */
/* Su Windows le bandiere emoji non vengono disegnate: comparirebbe "IT". */
.flag-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.55em; padding: .12em .38em;
  border-radius: var(--radius-xs);
  font-size: var(--type-etichetta); font-weight: 700; letter-spacing: .06em;
  line-height: 1.5;
  vertical-align: .06em;
  color: hsl(var(--fh, 90) 70% 88%);
  background: linear-gradient(160deg, hsl(var(--fh, 90) 45% 26%), hsl(var(--fh, 90) 45% 17%));
  box-shadow: inset 0 0 0 1px hsl(var(--fh, 90) 45% 38% / .8);
  font-variant-numeric: tabular-nums;
}
.flag-chip[data-bandiera] { min-width: 0; width: 1.5em; height: 1em; padding: 0; background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fx-lift) 24%, transparent); }
.nation-pill .flag-chip, .map-pin .flag-chip { font-size: .62em; }
.nation-pill.sel .flag-chip { box-shadow: inset 0 0 0 1px currentColor; }

/* ---------- Mappa mondiale interattiva ---------- */
/* Lo stile interno dell'SVG viene rimosso in build: i colori li decide il gioco. */
.world-svg { width: 100%; height: auto; max-height: 60dvh; display: block; }
.world-svg path { fill: var(--surface-control-hover); stroke: var(--map-terra); stroke-width: 1.1; vector-effect: non-scaling-stroke; transition: fill .18s ease; }
.world-svg .circlexx, .world-svg .subxx, .world-svg .noxx { opacity: 0; }
.world-svg #ocean path, .world-svg path#ocean, .world-svg #ocean { fill: transparent; stroke: none; }
/* paesi con cui puoi giocare: si accendono */
.world-svg g.is-nation path, .world-svg path.is-nation { fill: var(--ink-600); }
.world-svg g.is-playable path, .world-svg path.is-playable { fill: var(--map-giocabile); }
.world-svg g.is-playable, .world-svg g.is-nation, .world-svg path.is-playable, .world-svg path.is-nation { cursor: pointer; }
.world-svg g.is-playable:hover path, .world-svg g.is-nation:hover path, .world-svg path.is-playable:hover, .world-svg path.is-nation:hover { fill: var(--map-giocabile-su); }
.world-svg g.is-sel path, .world-svg path.is-sel { fill: var(--accent-brand); stroke: var(--map-scelta); }

/* ---------- Obiettivi di stagione ---------- */
.objectives-card h3 { display: flex; align-items: center; gap: 8px; }
.obj-count { margin-left: auto; font-size: var(--type-etichetta); color: var(--text-muted); letter-spacing: .08em; }
.objective { padding: 9px 0; border-bottom: 1px solid var(--border-subtle); }
.objective:last-child { border-bottom: none; padding-bottom: 0; }
.obj-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.obj-head span { font-size: var(--type-corpo); }
.obj-head b { font-variant-numeric: tabular-nums; font-size: var(--type-valore); }
.obj-bar { height: 6px; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--fx-lift) 7%, transparent); overflow: hidden; }
.obj-bar i { display: block; height: 100%; border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--accent-energy), var(--state-warning)); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.objective small { display: block; margin-top: 5px; color: var(--text-muted); }
.objective.done .obj-head b, .objective.done small { color: var(--state-positive); }
.objective.done small .ico { width: .9em; height: .9em; }

/* ---------- Crescita mostrata a fine partita ---------- */
.transition-growth { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }
.grow-ovr {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--radius-md);
  font-size: 1.02rem; font-weight: 700; letter-spacing: .02em;
  color: var(--text-on-achievement); background: linear-gradient(160deg, color-mix(in srgb, var(--accent-achievement) 55%, var(--text-primary)), var(--accent-achievement));
  box-shadow: 0 4px 18px var(--accent-achievement-glow);
  animation: growPop .5s cubic-bezier(.2,.9,.3,1.3) both;
}
.grow-ovr span { opacity: .6; }
.grow-attr {
  padding: 5px 10px; border-radius: var(--radius-sm); font-size: .76rem; font-weight: 700;
  color: var(--state-positive); background: color-mix(in srgb, var(--state-positive-strong) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--state-positive-strong) 28%, transparent);
  animation: growPop .5s cubic-bezier(.2,.9,.3,1.3) both;
}
.grow-attr:nth-child(2) { animation-delay: .07s } .grow-attr:nth-child(3) { animation-delay: .14s }

/* ---------- Momenti da celebrare ---------- */
/* Vignettatura, raggi rotanti, bagliore, titolo che sbatte, coriandoli. */
.celebrate {
  position: fixed; inset: 0; z-index: 200; /* sopra transizioni e modali */
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--fx-shade) 45%, transparent), color-mix(in srgb, var(--fx-shade) 88%, transparent) 70%);
  opacity: 0; transition: opacity .28s ease; cursor: pointer; overflow: hidden;
}
.celebrate.show { opacity: 1; }
.celebrate.leave { opacity: 0; }

.cel-rays {
  position: absolute; width: 150vmax; height: 150vmax; left: 50%; top: 45%;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg,
    var(--accent-achievement-soft) 0deg 7deg, transparent 7deg 20deg);
  opacity: 0; animation: celRays 22s linear infinite, celRaysIn .7s ease both;
}

.cel-bloom {
  position: absolute; width: 62vmin; height: 62vmin; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-achievement-glow), transparent 65%);
  animation: celBloom 2.4s ease-out both;
}

.cel-body { position: relative; text-align: center; padding: 0 22px; }
.cel-icon {
  font-size: 3.4rem; color: var(--accent-brand); line-height: 1;
  animation: celRise .62s cubic-bezier(.22,1,.36,1) both;
}
.cel-icon .ico { width: 1em; height: 1em; stroke-width: 1.6; }
.cel-kicker {
  margin-top: 14px;
  animation: celFade .5s ease .18s both;
}
.cel-title {
  margin-top: 6px; font-family: var(--font-display-ui); font-weight: 700;
  font-size: clamp(1.7rem, 5.5vw, 3rem); line-height: 1.05; letter-spacing: -.02em;
  color: var(--text-primary);
  animation: celSlam .5s cubic-bezier(.22,1,.36,1) .12s both;
}
.cel-detail {
  margin-top: 10px; font-size: .92rem; color: var(--accent-brand); font-weight: 700;
  animation: celFade .5s ease .3s both;
}

.cel-confetti { position: absolute; inset: 0; pointer-events: none; }
.confetto {
  position: absolute; top: -6vh; left: var(--x);
  width: 7px; height: 11px; border-radius: var(--radius-xs);
  background: var(--accent-brand);
  transform: rotate(var(--confetti-rotation));
  animation: celFall 2.3s cubic-bezier(.35,.6,.5,1) both;
  animation-delay: calc(var(--i) * 55ms);
}
.confetto:nth-child(3n) { background: var(--accent-player); }
.confetto:nth-child(3n+1) { background: var(--state-positive); }

/* ---------- Il momento del gol ---------- */
.goal-burst {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, var(--accent-achievement-glow), transparent 62%);
  animation: burstFade 1.4s ease-out both;
}
.gb-word {
  font-family: var(--font-display-ui); font-weight: 700;
  font-size: clamp(3rem, 13vw, 7rem); line-height: .9; letter-spacing: -.03em;
  color: var(--accent-achievement);
  text-shadow: 0 0 42px color-mix(in srgb, var(--accent-achievement) 55%, transparent);
  animation: burstWord .55s cubic-bezier(.22,1,.36,1) both;
}
.gb-who {
  font-size: .84rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-primary); animation: burstWho .5s ease .16s both;
}

/* la scossa dello schermo, breve e contenuta */
.match-transition.shake .transition-content { animation: shakeIt .46s cubic-bezier(.36,.07,.19,.97) both; }

/* il punteggio scatta quando cambia */
.score-pop { animation: scorePop .5s cubic-bezier(.22,1,.36,1) both; display: inline-block; }

.count-pulse { animation: countPulse .5s cubic-bezier(.22,1,.36,1) both; }
.count-up { color: var(--state-positive); transition: color 1.1s ease .4s; }
.count-down { color: var(--state-negative); transition: color 1.1s ease .4s; }

/* ---------- Esito di una scelta rischiosa ---------- */
.modal.outcome { text-align: center; max-width: 400px; }
.modal.outcome h2 { margin: 4px 0 6px; font-size: 1.5rem; }
.outcome-mark {
  width: 62px; height: 62px; margin: 2px auto 12px; border-radius: 50%;
  display: grid; place-items: center;
  animation: outcomeMark .52s cubic-bezier(.22,1,.36,1) both;
}
.outcome-mark svg { width: 30px; height: 30px; }
.modal.outcome.riuscito .outcome-mark { background: color-mix(in srgb, var(--state-positive-strong) 16%, transparent); color: var(--state-positive); box-shadow: 0 0 0 1px color-mix(in srgb, var(--state-positive-strong) 34%, transparent); }
.modal.outcome.fallito .outcome-mark { background: color-mix(in srgb, var(--state-negative-strong) 15%, transparent); color: var(--state-negative); box-shadow: 0 0 0 1px color-mix(in srgb, var(--state-negative-strong) 32%, transparent); }
.modal.outcome.neutro .outcome-mark { background: color-mix(in srgb, var(--fx-lift) 7%, transparent); color: var(--text-muted); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-lift) 12%, transparent); }
.outcome-roll {
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 2px;
}
.outcome-roll b { color: var(--text-primary); }
.outcome-text { font-size: .95rem; font-weight: 600; margin: 0 0 8px; }
.outcome-detail { color: var(--text-muted); font-size: .84rem; margin: 0 0 16px; line-height: 1.5; }
.modal.outcome .btn.wide { width: 100%; }

/* obiettivo sopra il bersaglio ma non ancora al sicuro: la media puo scendere */
.objective.pending .obj-bar i { background: var(--accent-brand); }
.objective.pending small { color: var(--accent-brand); }
.objective.pending small svg { width: 11px; height: 11px; vertical-align: -1px; }

/* ---------- Attributi: peso nel ruolo e crescita ---------- */
.attr-w { display: inline-flex; gap: 2px; margin-right: 6px; vertical-align: 1px; }
.attr-w i { width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--fx-lift) 20%, transparent); }
.attr-w.w3 i { background: var(--accent-brand); }
.attr-w.w2 i { background: var(--state-warning); opacity: .8; }
.training-choice .attr-w { margin-left: 6px; margin-right: 0; }

/* ---------- Le sezioni si aprono: deve vedersi ---------- */
/* Erano <details> senza nessun segno: sembravano titoli morti. Ora hanno
   la freccia che ruota, uno sfondo che reagisce e l'aria di un bottone. */
/* la freccia: disegnata, non un carattere che il font potrebbe non avere */

/* ---------- Assist e parata: stesso momento, tono diverso ---------- */
.burst-assist { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent-player) 20%, transparent), transparent 62%); }
.burst-assist .gb-word { color: var(--accent-player); text-shadow: 0 0 38px color-mix(in srgb, var(--accent-player) 50%, transparent); font-size: clamp(2.4rem, 10vw, 5.4rem); }
.burst-parata { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--state-positive-strong) 20%, transparent), transparent 62%); }
.burst-parata .gb-word { color: var(--state-positive); text-shadow: 0 0 38px color-mix(in srgb, var(--state-positive-strong) 45%, transparent); font-size: clamp(2.4rem, 10vw, 5.4rem); }
.burst-intervento { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent-player) 20%, transparent), transparent 62%); }
.burst-intervento .gb-word { color: var(--accent-player); text-shadow: 0 0 38px color-mix(in srgb, var(--accent-player) 45%, transparent); font-size: clamp(2.4rem, 10vw, 5.4rem); }

/* scossa piu breve: non e un gol, ma si sente */
.match-transition.shake-soft .transition-content { animation: shakeSoft .34s cubic-bezier(.36,.07,.19,.97) both; }

/* la riga in cronaca ---------- */
.transition-event.player-assist {
  margin: 2px 0; padding: 8px 10px;
  border: 1px solid var(--accent-player); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-player) 12%, transparent); color: var(--accent-player);
  animation: playerGoal .45s ease both;
}
.transition-event.player-save {
  margin: 2px 0; padding: 8px 10px;
  border: 1px solid var(--state-positive); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--state-positive-strong) 12%, transparent); color: var(--state-positive);
  animation: playerGoal .45s ease both;
}
.transition-event.player-defense {
  margin: 2px 0; padding: 8px 10px;
  border: 1px solid var(--accent-player); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-player) 12%, transparent); color: var(--accent-player);
  animation: playerGoal .45s ease both;
}

/* il grezzo sotto la percentuale: senza volume una percentuale mente */

/* ---------- Snodo di carriera: la decisione deve pesare ---------- */
.event-modal { max-width: 660px; }
.event-modal .ev-text {
  padding: 15px 16px; border-left: 3px solid var(--accent-energy);
  background: color-mix(in srgb, var(--fx-lift) 3.5%, transparent); color: var(--text-primary);
}
.ev-choices { display: grid; gap: 10px; margin-top: 16px; }

.event-modal .choice {
  display: grid; grid-template-columns: 38px 1fr 26px; gap: 13px;
  align-items: center; margin: 0; padding: 16px 15px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-control); text-align: left;
  transition: border-color .16s ease, background .16s ease, transform .16s cubic-bezier(.22,1,.36,1);
}
.event-modal .choice:hover:not(:disabled) {
  border-color: var(--accent-brand); background: var(--surface-control-hover); transform: translateX(4px);
}
.event-modal .choice-num {
  align-self: start; font: 700 1.05rem var(--font-display-ui); color: var(--accent-energy);
}
.event-modal .choice-copy > b {
  display: block; margin-bottom: 8px;
  font: 700 1.02rem var(--font-display-ui); letter-spacing: -.01em;
  color: var(--text-primary); text-transform: none;
}

/* le conseguenze: targhette leggibili, non una riga di testo minuscolo */
.event-modal .fx { display: flex; flex-wrap: wrap; gap: 5px; }
.fx-chip {
  padding: 4px 9px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-default); background: color-mix(in srgb, var(--fx-lift) 3%, transparent);
  color: var(--text-secondary); font-size: var(--type-nota); font-weight: 600; line-height: 1.3;
}
.fx-chip.su { border-color: color-mix(in srgb, var(--state-positive-strong) 42%, transparent); background: color-mix(in srgb, var(--state-positive-strong) 10%, transparent); color: var(--state-positive-bright); }
.fx-chip.giu { border-color: color-mix(in srgb, var(--state-negative-strong) 42%, transparent); background: color-mix(in srgb, var(--state-negative-strong) 10%, transparent); color: var(--state-negative-bright); }
.fx-chip.forse { border-color: color-mix(in srgb, var(--accent-brand) 38%, transparent); background: color-mix(in srgb, var(--accent-brand) 8%, transparent); color: var(--accent-brand); }

/* la probabilita si vede, non si legge in mezzo a una frase */
.chance { display: grid; gap: 4px; margin: 0 0 9px; }
.chance i {
  display: block; height: 6px; border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--accent-energy), var(--accent-brand));
  animation: chanceGrow .55s cubic-bezier(.22,1,.36,1) both;
}
.chance::before {
  content: ""; grid-row: 1; grid-column: 1;
  height: 6px; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--fx-lift) 7%, transparent);
}
.chance i { grid-row: 1; grid-column: 1; }
.chance em {
  font-style: normal; font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent-brand);
}

.event-modal .choice.is-selected {
  border-color: var(--accent-brand); background: color-mix(in srgb, var(--accent-brand) 13%, transparent); transform: scale(.99);
}
.event-modal .choice:disabled { opacity: .42; }
.event-modal .choice.is-selected:disabled { opacity: 1; }

/* ---------- Cartellini in cronaca ---------- */
.transition-event.card b::before {
  content: ""; display: inline-block; width: 9px; height: 12px;
  margin-right: 7px; border-radius: var(--radius-xs); vertical-align: -1px;
  background: var(--state-warning);
}
.transition-event.card.rosso b::before { background: var(--state-negative); }
.transition-event.card.rosso { color: var(--state-negative); }

/* ---------- Il bivio dentro la partita ---------- */
.in-match-choice {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--ink-1000) 82%, transparent); backdrop-filter: blur(9px);
  opacity: 0; transition: opacity .26s ease;
}
.in-match-choice.show { opacity: 1; }
.imc-card {
  width: min(600px, 100%); max-height: 92%; overflow: auto;
  padding: 22px; border-radius: var(--radius-md);
  border: 1px solid var(--border-default); border-top: 2px solid var(--accent-brand);
  background: linear-gradient(150deg, var(--ink-700), var(--surface-inset-soft));
  box-shadow: 0 24px 70px color-mix(in srgb, var(--fx-shade) 55%, transparent);
  transform: translateY(14px) scale(.98);
  transition: transform .32s cubic-bezier(.22,1,.36,1);
}
.in-match-choice.show .imc-card { transform: none; }
.imc-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.imc-kicker span { font: 700 1.5rem/1 var(--font-display-ui); color: var(--accent-brand); }
.imc-kicker i { flex: 1; height: 1px; background: var(--border-default); }
.imc-kicker small { color: var(--accent-energy); }
.imc-text {
  margin: 0 0 15px; padding: 13px 14px;
  border-left: 3px solid var(--accent-energy); background: color-mix(in srgb, var(--fx-lift) 3.5%, transparent);
  color: var(--text-primary); font-size: .92rem; line-height: 1.5;
}
.imc-card .choice {
  display: grid; grid-template-columns: 34px 1fr 24px; gap: 12px; align-items: center;
  width: 100%; margin-bottom: 9px; padding: 15px 14px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-control); text-align: left;
  transition: border-color .16s ease, background .16s ease, transform .16s cubic-bezier(.22,1,.36,1);
}
.imc-card .choice:hover:not(:disabled) { border-color: var(--accent-brand); background: var(--surface-control-hover); transform: translateX(4px); }
.imc-card .choice-num { align-self: start; font: 700 1rem var(--font-display-ui); color: var(--accent-energy); }
.imc-card .choice-copy > b { display: block; margin-bottom: 8px; font: 700 1rem var(--font-display-ui); color: var(--text-primary); }
.imc-card .fx { display: flex; flex-wrap: wrap; gap: 5px; }
.imc-card .choice.is-selected { border-color: var(--accent-brand); background: color-mix(in srgb, var(--accent-brand) 13%, transparent); transform: scale(.99); }
.imc-card .choice:disabled { opacity: .42; }
.imc-card .choice.is-selected:disabled { opacity: 1; }
.imc-card .choice-arrow { color: var(--accent-brand); font-size: 1.15rem; }

.burst-fallito { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--state-negative-strong) 18%, transparent), transparent 62%); }
.burst-fallito .gb-word { color: var(--state-negative); text-shadow: 0 0 34px color-mix(in srgb, var(--state-negative-strong) 40%, transparent); font-size: clamp(2.2rem, 9vw, 4.8rem); }

/* ---------- Bacheca: un palmares che si legge ---------- */
.bacheca-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.bacheca-summary > div { padding: 14px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-inset-soft); text-align: center; }
.bacheca-summary .metric__value { display: block; font: 700 var(--type-numero)/1 var(--font-display-ui); color: var(--accent-achievement); }
.bacheca-summary .metric__label { display: block; margin-top: 4px; color: var(--text-muted); font-size: var(--type-etichetta); letter-spacing: .1em; text-transform: uppercase; }

.palmares { display: grid; gap: 2px; }
.pal-row {
  display: grid; gap: 4px 10px; align-items: center; border-bottom: 1px solid var(--border-subtle);
}
.pal-row:last-child { border-bottom: 0; }
.pal-ico { grid-row: 1 / 3; display: grid; place-items: center; }
.pal-name { font-weight: 700; color: var(--text-primary); }
.pal-count {
  padding: 2px 8px; border-radius: var(--radius-pill);
  font: 700 .68rem var(--font-display-ui);
}
.pal-years { grid-column: 2 / 4; color: var(--text-muted); font-size: .66rem; }

.bacheca-more {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-weight: 700; color: var(--text-secondary);
}
.bacheca-more::-webkit-details-marker { display: none }
.bacheca-more::after {
  content: ""; width: 6px; height: 6px; margin-left: auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .22s cubic-bezier(.22,1,.36,1);
}
details[open] > .bacheca-more { color: var(--accent-brand); }
details[open] > .bacheca-more::after { transform: translateY(1px) rotate(-135deg); }

/* ---------- Cosa hai vinto in questa stagione ---------- */
.awards-card .aw-group { margin-top: 12px; }
.aw-label { display: block; margin-bottom: 7px; }
.aw-items { display: flex; flex-wrap: wrap; gap: 6px; }
.aw-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--accent-achievement-glow); font-weight: 700;
}
.aw-item svg { width: 13px; height: 13px; }
.aw-group.solo .aw-item { border-color: color-mix(in srgb, var(--accent-energy) 36%, transparent); background: color-mix(in srgb, var(--accent-energy) 8%, transparent); color: var(--accent-energy); }

/* ---------- Coppe: il percorso turno per turno ---------- */
.cup-card h3 small { font-weight: 500; font-size: .7rem; }
/* la testa della carta coppa e' l'anteprima di una riga del suo <details>:
   dentro il summary non ha margini propri e non spinge via il chevron */
.cup-card > summary { flex-wrap: wrap; align-items: baseline; }
.cup-card > summary h3 { margin-bottom: 0; }
.cup-card > summary .cup-head { margin: 0; flex: 1 1 auto; }
.cup-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 10px; }
.cup-state { font-size: .68rem; }
.cup-state.won { color: var(--accent-achievement); }
.cup-state.out { color: var(--state-negative); }
.cup-state.alive { color: var(--state-positive); }
.cup-state svg { width: 13px; height: 13px; vertical-align: -2px; }

.cup-goal { position: relative; display: grid; gap: 3px; margin-bottom: 12px; padding: 10px 12px 14px; border-radius: var(--radius-md); background: var(--surface-inset-soft); overflow: hidden; }
.cup-goal span { font-size: .72rem; }
.cup-goal b { color: var(--accent-achievement); }
.cup-goal i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent-brand); }

.ties { display: grid; gap: 2px; }
.ties.ko { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-default); }
.tie {
  display: grid; grid-template-columns: 1fr auto; gap: 1px 10px;
  padding: 9px 10px; border-left: 3px solid var(--border-default); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: color-mix(in srgb, var(--fx-lift) 2.2%, transparent);
}
.tie.vinta { border-left-color: var(--state-positive); }
.tie.persa { border-left-color: var(--state-negative); }
.tie.pari { border-left-color: var(--state-warning); }
.tie-round { color: var(--text-muted); font-size: .55rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tie-score { grid-row: 1 / 3; grid-column: 2; align-self: center; font: 700 1.05rem var(--font-display-ui); }
.tie.vinta .tie-score { color: var(--state-positive); }
.tie.persa .tie-score { color: var(--state-negative); }
.tie-opp { grid-column: 1; font-size: .82rem; font-weight: 700; }
.tie-me { grid-column: 1; color: var(--text-muted); font-size: .64rem; }

/* la competizione nella lista risultati durante la simulazione */
.run-comp {
  display: block; font-style: normal;
  font-size: .52rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}
.run-comp.coppa { color: var(--accent-brand); }

/* ---------- Hover neutro: passare col mouse non e scegliere ---------- */
/* Il vecchio hover globale era blu e si confondeva con la selezione. Ora
   l hover e una variazione di superficie; solo la scelta vera usa il lime. */
button:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--ink-600), var(--ink-700));
  border-color: var(--ink-500);
  transform: translateY(-1px);
}
.agent-card:hover:not(.sel):not(:disabled) {
  border-color: var(--ink-500); background: var(--ink-700); box-shadow: none;
}

/* ---------- 3) Mobile: il tuo stato accanto alla partita ---------- */
/* Il pannello completo resta sotto; questa striscia porta OVR, forma,
   morale e titolarita dove servono, cioe vicino alla prossima partita. */

/* ---------- 5) Classifica compatta ---------- */
tr.table-gap td { padding: 2px 0; color: var(--text-muted); text-align: center; font-size: .7rem; letter-spacing: .3em; border: 0; }
.table-toggle { display: block; width: 100%; margin-top: 8px; padding: 8px; background: transparent; border: 1px dashed var(--border-default); color: var(--text-secondary); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.table-toggle:hover:not(:disabled) { color: var(--accent-brand); border-color: var(--accent-brand); background: transparent; transform: none; }

/* ---------- Schede a tutta larghezza: Statistiche, Bacheca, Agente ---------- */
.hub-wide { display: grid; gap: 12px; }
.wide-main { display: grid; gap: 12px; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.stats-grid .span-2 { grid-column: 1 / -1; }
.wide-main.tab-bacheca > .card:first-child .bacheca-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 620px; }

/* tessere: un numero grande, un etichetta, una nota */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 7px; }
.stat-tile { display: grid; gap: 2px; padding: 11px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-inset-soft); min-width: 0; }
.stat-tile > .metric__value { font: 700 var(--type-valore)/1.05 var(--font-display-ui); overflow: hidden; text-overflow: ellipsis; }
.stat-tile > .metric__label { color: var(--text-muted); font-size: var(--type-etichetta); letter-spacing: .1em; text-transform: uppercase; }
.stat-tile > .metric__detail { font-style: normal; color: var(--text-secondary); font-size: var(--type-nota); }
.stat-tile.gold > .metric__value { color: var(--accent-achievement); }
.stat-tile.good > .metric__value { color: var(--state-positive); }
.stat-tile.warn > .metric__value { color: var(--state-warning); }
.stat-tile.bad > .metric__value { color: var(--state-negative); }

/* agente */
.agent-hero-head { display: flex; gap: 14px; align-items: flex-start; }
.agent-avatar { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: var(--radius-md); background: var(--accent-brand); color: var(--text-on-accent); }
.agent-avatar svg { width: 24px; height: 24px; }
.agent-hero h2 { margin: 2px 0 4px; font: 700 var(--type-pagina)/1.02 var(--font-display-ui); }
.agent-fx { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 10px; }

/* fine carriera */
.over-hero { position: relative; text-align: center; padding: 34px 24px 26px; border-top: 2px solid var(--accent-brand); }
.over-hero .over-home { position: absolute; top: 14px; left: 14px; }
.over-hero h1 { margin: 6px 0 2px; font-size: clamp(1.8rem, 5vw, 3rem); text-transform: uppercase; letter-spacing: -.03em; }
.over-lp { margin: 16px 0 6px; }
.over-lp b { display: block; font: 700 clamp(2.6rem, 8vw, 4.4rem)/1 var(--font-display-ui); color: var(--accent-brand); }
.over-lp span { color: var(--text-muted); font-size: .58rem; letter-spacing: .18em; }
.over-hero h2 { margin: 8px 0 4px; font-size: 1.3rem; }
.over-desc { max-width: 560px; margin: 0 auto; color: var(--text-secondary); }
.over-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.lp-rows { display: grid; gap: 6px; }
.lp-row { display: grid; grid-template-columns: 1fr 3fr auto; gap: 10px; align-items: center; }
.lp-row i { height: 6px; border-radius: var(--radius-xs); background: var(--ink-900); overflow: hidden; }
.lp-row u { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-energy), var(--accent-brand)); text-decoration: none; }
.lp-row b { color: var(--accent-brand); font: 700 .9rem var(--font-display-ui); }

/* mercato: le offerte come schede confrontabili, non blocchi di testo */
.offer { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: linear-gradient(160deg, var(--surface-control), var(--surface-inset-soft)); }
.offer button.primary { margin-top: auto; align-self: flex-start; }

/* ---------- Scelta della nazione: cerca, poi sfoglia ---------- */

/* ---------- Barra della creazione: compatta e discreta su mobile ---------- */
.wizard-footer.away { transform: translateY(calc(100% + 14px)); opacity: 0; pointer-events: none; }

/* ---------- Il bivio del mercato: salto o prestito ---------- */
/* La formula del contratto e la prima cosa da leggere in una carta del
   mercato: prestito e definitivo non sono la stessa offerta. Il patto di
   riscatto e arancione perche e una condizione che il club ti chiede. */
.badge.formula { display: inline-flex; align-items: center; padding: 5px 10px; font-weight: 700; letter-spacing: .06em; }
.badge.formula.f-loan { border-style: dashed; color: var(--text-secondary); }
.badge.formula.f-patto { border-color: var(--accent-energy-line); color: var(--accent-energy); background: var(--accent-energy-soft); }

/* ---------- La competizione nel Match Day ---------- */
.transition-comp {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 10px auto 0; padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-default); background: color-mix(in srgb, var(--fx-lift) 4%, transparent);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
}
.transition-comp b { font-weight: 700; }
.transition-comp span { color: var(--text-secondary); letter-spacing: .06em; }
.transition-comp.campionato { border-color: color-mix(in srgb, var(--accent-player) 45%, transparent); color: var(--accent-player); }
.transition-comp.coppa { border-color: color-mix(in srgb, var(--accent-brand) 50%, transparent); color: var(--accent-brand); }
/* Mondiale per Club insieme a europa: sono la stessa cosa — un club che gioca
   fuori dal suo campionato — e un colore in piu' direbbe una differenza che non
   c'e'. */
.transition-comp.europa,
.transition-comp.mondiale { border-color: color-mix(in srgb, var(--accent-energy) 50%, transparent); color: var(--accent-energy); }
.transition-comp.nazionale { border-color: color-mix(in srgb, var(--state-positive) 50%, transparent); color: var(--state-positive); }

/* "Inizia la Coppa Italia": la scena di apertura di una competizione */
.comp-intro {
  position: absolute; inset: 0; z-index: 30; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent-brand) 14%, transparent), color-mix(in srgb, var(--ink-950) 92%, transparent) 60%);
  opacity: 0; transition: opacity .28s ease;
}
.comp-intro.show { opacity: 1; }
.comp-intro.europa { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent-energy) 16%, transparent), color-mix(in srgb, var(--ink-950) 92%, transparent) 60%); }
.comp-intro.nazionale { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--state-positive) 16%, transparent), color-mix(in srgb, var(--ink-950) 92%, transparent) 60%); }
.ci-body { text-align: center; transform: translateY(12px); transition: transform .5s cubic-bezier(.22,1,.36,1); }
.comp-intro.show .ci-body { transform: none; }
.ci-kicker { display: block; }
.ci-name {
  display: block; margin: 8px 0 10px;
  font: 700 clamp(1.8rem, 6vw, 4rem)/1 var(--font-display-ui); text-transform: uppercase; letter-spacing: -.02em;
  color: var(--accent-brand); text-shadow: 0 0 40px color-mix(in srgb, var(--accent-brand) 35%, transparent);
}
.comp-intro.europa .ci-name { color: var(--accent-energy); text-shadow: 0 0 40px color-mix(in srgb, var(--accent-energy) 35%, transparent); }
.comp-intro.nazionale .ci-name { color: var(--state-positive); text-shadow: 0 0 40px color-mix(in srgb, var(--state-positive) 35%, transparent); }
.ci-sub { display: block; color: var(--text-secondary); font-size: .8rem; letter-spacing: .06em; }

/* il badge della competizione non si mostra vuoto */
.transition-comp:empty { display: none; }

/* la competizione e il titolo del Match Day */
.transition-comp.headline {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  margin: 0 auto 6px; padding: 10px 22px; border-radius: var(--radius-md);
  font-size: .62rem;
}
.transition-comp.headline b { font: 700 clamp(1.5rem, 3.4vw, 2.4rem)/1.1 var(--font-display-ui); letter-spacing: .02em; }
.transition-comp.headline span { font-size: .66rem; letter-spacing: .14em; }
.transition-kicker:empty, .transition-round:empty { display: none; }
.match-transition.match .transition-kicker:not(:empty) { margin-top: 6px; }

/* ---------- Le tue carriere (slot) ---------- */
.home-slots { margin: 26px 0 8px; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.slot-card { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: linear-gradient(160deg, var(--surface-control), var(--surface-inset-soft)); }
.slot-card.over { opacity: .8; border-style: dashed; }
.slot-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.slot-head b { font: 700 .95rem var(--font-display-ui); text-transform: uppercase; }
.slot-head span { color: var(--text-muted); }
.slot-meta { display: flex; gap: 8px; flex-wrap: wrap; color: var(--text-secondary); }
.slot-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.slot-nums > div { padding: 7px 4px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--fx-lift) 3%, transparent); text-align: center; }
.slot-nums b { display: block; font: 700 .95rem var(--font-display-ui); color: var(--accent-brand); }
.slot-nums span { color: var(--text-muted); text-transform: uppercase; }
.slot-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.over-headline { max-width: 640px; margin: 10px auto 0; font: 700 1.05rem/1.35 var(--font-display-ui); color: var(--text-primary); }

/* la fase di carriera accanto al verdetto */
.kv .good { color: var(--state-positive); } .kv .bad { color: var(--state-negative); }

/* I momenti che restano, in bacheca: righe .kv come il resto della pagina, ma
   il valore qui e' prosa e non un numero. Una .kv allinea a destra perche' di
   solito a destra c'e' una cifra da confrontare con quella sopra; due righe di
   racconto allineate a destra si leggono male e basta. Nessun colore: un
   momento e' roba tua, ma questa e' la lista dove si rileggono — la fiamma
   nell'intestazione dice gia' di che si tratta. */
/* I traguardi: azzurro, che nel rango dei colori vuol dire "te". Il bordo e'
   l'unico segno — titoli e testo restano nei colori di sempre, cosi' il
   contrasto dichiarato non cambia e il rango si legge lo stesso. */
.traguardi-card { border-left: 3px solid var(--accent-player); }
.traguardi-card > summary .ico { color: var(--accent-player); }
/* dove l'anno non c'e', la colonna della data non esiste: una cella vuota si
   legge come un dato perso, che e' peggio di non avere la colonna */
.traguardi-card .kv.tg-senza-anno > span:last-child { padding-left: 0; }
/* quello che il gioco guarda e che non hai ancora preso: in coda, senza
   intestazione e senza conto. Non e' la lista di cio' che manca — e' il gioco
   che dice cosa nota. */
.traguardi-card .tg-notati { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border-subtle); }
.traguardi-card .tg-notati p { margin: 0 0 5px; color: var(--text-muted); font-size: var(--type-nota); line-height: 1.5; }
.traguardi-card .tg-notati p:last-child { margin-bottom: 0; }

.momenti-card .kv, .traguardi-card .kv { align-items: flex-start; }
.momenti-card .kv .k, .traguardi-card .kv .k { flex: none; min-width: 58px; }
/* la colonna della prosa prende quello che resta: senza `flex` una .kv la
   spinge a destra con space-between, e la riga cominciava a meta' pagina */
.momenti-card .kv > span:last-child,
.traguardi-card .kv > span:last-child { flex: 1; text-align: left; }
.momenti-card .kv small,
.traguardi-card .kv small { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--type-nota); }

/* ---------- Le parole fisse di ogni opzione ---------- */
.fx-meta { display: flex; flex-wrap: wrap; margin-top: 7px; }
.fx-meta em { display: inline-flex; flex-direction: column; gap: 1px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--fx-lift) 3.5%, transparent); border: 1px solid var(--border-subtle); font-style: normal; font-weight: 700; color: var(--text-primary); text-transform: lowercase; }
.fx-meta em small { color: var(--text-muted); text-transform: uppercase; }
.fx-meta em.r-nessuno { color: var(--state-positive); } .fx-meta em.r-basso { color: var(--state-positive); } .fx-meta em.r-medio { color: var(--state-warning); } .fx-meta em.r-alto { color: var(--state-negative); }
.fx-meta em.storto { color: var(--state-negative); border-color: color-mix(in srgb, var(--state-negative-strong) 35%, transparent); }
.fx-meta em.dip { color: var(--accent-player); border-color: color-mix(in srgb, var(--accent-player) 35%, transparent); }

/* ---------- Promesse in sospeso ---------- */
.promise-row { padding: 9px 10px; margin-top: 6px; border-left: 3px solid var(--state-warning); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: color-mix(in srgb, var(--fx-lift) 2.5%, transparent); }
.promise-row.ok { border-left-color: var(--state-positive); }
.promise-row.ko { border-left-color: var(--state-warning); }
.pr-head { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; font-weight: 700; }
.promise-row.ok .pr-head b { color: var(--state-positive); } .promise-row.ko .pr-head b { color: var(--state-warning); }
.promise-row small { display: block; margin-top: 3px; color: var(--text-muted); font-size: .64rem; }

/* Il contenitore assegna la tipografia; il contatore anima solo il valore. */
.num-ct {
  font: inherit; color: inherit; letter-spacing: inherit;
  text-transform: none; display: inline-block;
  font-variant-numeric: tabular-nums; margin: 0;
}

/* livello 1: didascalie */
.stat-tile > .metric__label, .bacheca-summary .metric__label, .aw-label, .fx-meta em small, .season-progress > div:first-child, .section-label span, .modal-kicker span, .modal-kicker small, .tabs button, .foot-fit small, .key-attrs > small, .role-style span, .season-chip {
  font-size: var(--type-etichetta); letter-spacing: .07em;
}
/* livello 2: note e sotto-numeri */
.stat-tile > .metric__detail, .pal-years, .kv, .fx-meta em, .fx-chip, .small, .muted, .table-toggle, .legend-row, .transition-event, .foot-fit p, .key-attrs b, .home-proof span, .decision-options small, table td, table th, .latest .l-when, .feed, .cup-head, .tie {
  font-size: var(--type-nota);
}
.muted.small, .muted .small { font-size: var(--type-nota); }
/* livello 3: numeri */
.stat-tile > .metric__value { font-size: var(--type-valore); }
.bacheca-summary .metric__value { font-size: var(--type-numero); }

/* ---------- Blocco decisione: solo il titolo, la spiegazione dietro il "?" ---------- */
.decision-options .opt { position: relative; display: flex; }
.decision-options .opt > button {
  flex: 1; display: flex; align-items: center; min-height: 56px; padding: 12px 40px 12px 14px;
  text-align: left; background: var(--surface-control); border-color: var(--border-strong);
  font: 700 .92rem/1.25 var(--font-ui); color: var(--text-primary); text-transform: none;
}
.decision-options .opt > button:hover:not(:disabled) { border-color: var(--accent-brand); background: var(--ink-700); transform: translateY(-2px); }
.decision-options .opt > button svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }
/* le richieste all agente sono cinque in fila: il titolo e lo stato vanno incolonnati, o a 1280 il titolo si spezza in tre righe */
.agent-ask .opt > button { flex-direction: column; align-items: flex-start; gap: 3px; }
.help {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; border-radius: 50%; color: var(--text-secondary);
  font: 700 .72rem/1 var(--font-ui); cursor: help; z-index: 2;
}
.help:hover, .help:focus-visible { color: var(--accent-brand); border-color: var(--accent-brand); outline: none; }
.help::after {
  content: attr(data-tip); position: absolute; right: -6px; bottom: calc(100% + 9px); width: 250px;
  padding: 9px 11px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: var(--surface-inset-soft);
  color: var(--text-primary); font: 500 .84rem/1.4 var(--font-ui); text-align: left; white-space: normal;
  box-shadow: var(--elevation-2); opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 6;
}
.help:hover::after, .help:focus::after, .help:focus-visible::after { opacity: 1; }

/* ---------- Bollini coi colori del club ---------- */
/* L unico !important vero: .rtp4-crest mette un fondo neutro e rtp4.css carica DOPO. */
/* Il taglio era a meta' (52%) e la lettera ci stava sopra a cavallo. Finche' i
   colori erano di ripiego — due toni desaturati, tutti e due scuri — l'inchiostro
   bianco reggeva su entrambi. Con i colori VERI di database la seconda tinta e'
   spesso #FFFFFF (Arsenal, Chelsea, Liverpool, Everton, Newcastle...) e meta'
   lettera bianca spariva sul bianco: misurato, 243 club con l'inchiostro sotto
   4.5:1 contro una delle due tinte, 206 sotto 3:1, e visto in una cattura.
   Il taglio scende a 70%: la seconda tinta resta una fetta d'angolo che si vede,
   e la lettera sta tutta sulla prima, che e' quella per cui l'inchiostro e'
   scelto. Nessun dato nuovo da chiedere a database — i colori sono giusti, era
   il disegno a metterci sopra la lettera. */
.crest {
  background: linear-gradient(135deg, var(--c1) 0 70%, var(--c2) 70% 100%) !important;
  color: var(--ink) !important; text-shadow: 0 1px 2px color-mix(in srgb, var(--fx-shade) 35%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fx-lift) 14%, transparent), 0 2px 8px color-mix(in srgb, var(--fx-shade) 35%, transparent);
}

/* ---------- Bacheca: ogni trofeo ha il colore della sua categoria ---------- */
.pal-row { grid-template-columns: 26px 1fr auto; padding: 11px 6px 11px 10px; border-left: 3px solid var(--t, var(--border-default)); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 4px; }
.pal-ico { color: var(--t, var(--accent-achievement)); }
.pal-ico svg { width: 17px; height: 17px; }
.pal-name { font-size: var(--type-corpo); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pal-tag { font: 700 .68rem/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border-radius: var(--radius-sm); color: var(--t, var(--text-secondary)); border: 1px solid color-mix(in srgb, var(--t, var(--border-default)) 45%, transparent); background: color-mix(in srgb, var(--t, var(--border-default)) 10%, transparent); }
.pal-count { background: var(--t, var(--accent-achievement)); color: var(--text-on-achievement); }
.t-top { --t: var(--accent-brand); } .t-scorer { --t: var(--accent-energy); } .t-mvp { --t: var(--trofeo-top); } .t-young { --t: var(--accent-player); }
.t-club { --t: var(--trofeo-club); } .t-role { --t: var(--trofeo-naz); } .t-wall { --t: var(--trofeo-altro); }
.t-euro { --t: var(--trofeo-euro); } .t-cup { --t: var(--accent-energy); } .t-natl { --t: var(--accent-brand); } .t-league { --t: var(--state-positive); }
.aw-item { border-color: color-mix(in srgb, var(--t, var(--border-default)) 45%, transparent); background: color-mix(in srgb, var(--t, var(--border-default)) 10%, transparent) !important; color: var(--t, var(--text-primary)) !important; font-size: var(--type-nota); }
.t-ink { color: var(--t, var(--text-primary)); }
.bacheca-more { font-size: var(--type-corpo); }

/* ---------- Snodo di carriera: prima cosa succede, poi le opzioni, poi i dettagli ---------- */
.event-modal h2 { font-size: 1.05rem; color: var(--text-secondary); letter-spacing: 0; margin-bottom: 8px; }
.event-modal .ev-text { font-size: 1.08rem; line-height: 1.5; }
.event-modal .choice-copy > b { font-size: 1.08rem; }
.fx-chip { display: inline-block; max-width: 100%; overflow-wrap: anywhere; white-space: normal; height: auto; }
.fx-chip.long { flex: 1 1 100%; border-radius: var(--radius-md); }
.fx-meta { gap: 6px; }
.fx-meta em { font-size: var(--type-nota); padding: 5px 9px; }
.fx-meta em small { font-size: .68rem; letter-spacing: .08em; }
.fx-meta em.storto { flex: 1 1 100%; }
/* barra identità delle schede a tutta larghezza: stessi livelli della scala */

/* "?" che spiega un numero del pannello: si apre al click, non ingombra */
.kv-help { margin: 2px 0 8px; }
.kv-help summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--text-muted); }
.kv-help summary::-webkit-details-marker { display: none; }
.kv-help summary i { font-style: normal; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--text-muted); display: inline-flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; }
.kv-help[open] summary i { border-color: var(--accent-brand); color: var(--accent-brand); }
.kv-help p { margin: 6px 0 0; font-size: var(--type-nota); line-height: 1.45; color: var(--text-muted); }
.kv-help p b { color: var(--text-primary); }
.transition-event.esito b { color: var(--accent-brand); }

/* ---------- Sidebar: stato in parole, piano di allenamento, sezioni una alla volta ---------- */

/* ---------- Regia: stato neutro all'apertura degli eventi, scroll bloccato sotto i popup ---------- */
.event-modal.no-hover .choice:hover:not(:disabled) { border-color: var(--border-subtle); background: var(--surface-control); transform: none; }

/* ---------- Obiettivi interpretati ---------- */
.objective small { font-size: var(--type-nota); }

/* ---------- Perché giochi (o no) ---------- */

/* ---------- Partita: ritmo, pausa, cronaca finale scorribile ---------- */
.speed-ctl { display: flex; justify-content: center; gap: 5px; margin: 8px auto 0; flex-wrap: wrap; }
.speed-ctl button { padding: 5px 10px; font-size: var(--type-nota); background: transparent; border-color: var(--border-subtle); color: var(--text-secondary); }
.speed-ctl button.on { border-color: var(--accent-brand); color: var(--accent-brand); background: color-mix(in srgb, var(--accent-brand) 8%, transparent); }
.speed-ctl button[data-pause].on { border-color: var(--accent-energy); color: var(--accent-energy); }
.transition-content { overflow-x: hidden; }

/* ---------- Semantica: l'h1 in testata mantiene lo stile del titolo ---------- */
.topbar h1.title { font-size: var(--type-valore); margin: 0; letter-spacing: .03em; }

/* ---------- Mercato: confronto riga per riga ---------- */

/* ---------- Creazione su mobile: confrontabile, senza cose sotto il footer ---------- */

/* ======================================================================
   RANGHI DI COLORE — un colore vuol dire una cosa sola.
   lime      = una decisione tua (blocco "Cosa vuoi fare", piano di allenamento)
             e il filo Legend, che al gioco da il nome: Legend Points, rango
             raggiunto, cammino verso la leggenda
   oro       = un traguardo vinto: trofei, premi, coppe
   azzurro   = te: identità, OVR, stato, sezioni del pannello
   arancione = quello che il club ti chiede: obiettivi
   nessuno   = il mondo intorno: classifica, coppe, diario, statistiche
   Niente più titoli in lime maiuscolo su ogni card: i titoli sono testo.
   ====================================================================== */
.card > h3, .card h3:first-child, .cup-card > summary h3, .objectives-card h3 {
  font: 600 var(--type-sezione)/1.15 var(--font-display-ui);
  text-transform: uppercase; letter-spacing: .01em; color: var(--text-primary); margin-bottom: .7rem;
}
.card > h3 svg, .card h3:first-child svg { color: var(--text-muted); }
/* arancione: gli obiettivi del club — la barra lo prende dalla sua regola sopra */
.objectives-card { border-color: color-mix(in srgb, var(--accent-energy) 28%, transparent); }
.objectives-card h3 svg { color: var(--accent-energy); }
.objective.done .obj-bar i { background: var(--state-positive); }
/* azzurro: te */
/* niente: il mondo intorno */
.section-label span { font: 700 .95rem var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--text-secondary); }
.section-label small { font-size: var(--type-nota); }
.tabs button { text-transform: none; letter-spacing: 0; font-size: .88rem; font-weight: 700; }
.legend-row, .table-toggle { text-transform: none; letter-spacing: 0; }
.cup-state { text-transform: none; letter-spacing: 0; font-weight: 700; }
/* lime: solo le decisioni (già così: .decision, .training-plan). L'eyebrow del cassetto mobile segue. */

/* ---------- Home adattiva: promozionale senza carriera, personale con una carriera ---------- */
.home-hero h1.welcome { font-size: clamp(2.4rem, 5vw, 4.6rem); margin: 6px 0 14px; }
.active-career { display: grid; gap: clamp(7px, 1.4dvh, 12px); padding: clamp(10px, 1.8dvh, 16px) 18px; border: 1px solid color-mix(in srgb, var(--accent-player) 35%, transparent); border-radius: var(--radius-lg); background: linear-gradient(150deg, color-mix(in srgb, var(--accent-player) 10%, transparent), color-mix(in srgb, var(--ink-1000) 40%, transparent)); max-width: 620px; }
.active-career.over { border-style: dashed; }
.ac-club { display: flex; align-items: center; gap: 12px; }
.ac-club .ac-crest { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font: 700 1.1rem var(--font-display-ui); flex: none; }
.ac-club b { display: block; font: 700 1.25rem/1.1 var(--font-display-ui); }
.ac-club span { color: var(--text-secondary); font-size: var(--type-corpo); }
.ac-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ac-nums > div { padding: clamp(5px, 1dvh, 9px) 6px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--fx-lift) 4%, transparent); text-align: center; }
.ac-nums b { display: block; font: 700 1.35rem/1 var(--font-display-ui); color: var(--accent-player); }
.ac-nums span { display: block; margin-top: 4px; color: var(--text-muted); font-size: var(--type-etichetta); letter-spacing: .06em; text-transform: uppercase; }
.ac-next { display: grid; gap: 2px; padding: 10px 12px; border-left: 3px solid var(--accent-brand); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: color-mix(in srgb, var(--accent-brand) 6%, transparent); }
.ac-next span { color: var(--text-muted); font-size: var(--type-etichetta); letter-spacing: .06em; text-transform: uppercase; }
.ac-next b { font-size: var(--type-corpo); }
.home-shell.returning .home-hero { padding-top: clamp(16px, 3dvh, 40px); }
.career-route .route-done { color: var(--text-secondary); }
.career-route.decor span { color: var(--text-muted); }
.home-proof .proof-text span { text-transform: none; letter-spacing: 0; font-size: var(--type-corpo); color: var(--text-secondary); }
.home-active-tools { margin: 14px 0 0; }
.home-active-tools .slot-actions { align-items: center; }
/* schede delle altre carriere: leggibili, non micro */
.slot-head b { font-size: 1.05rem; }
.slot-head span { font-size: var(--type-nota); letter-spacing: 0; text-transform: none; }
.slot-meta { font-size: var(--type-nota); }
.slot-nums b { font-size: 1.1rem; }
.slot-nums span { font-size: var(--type-etichetta); letter-spacing: .04em; }
.slot-actions button { padding: 9px 14px; font-size: var(--type-nota); min-height: 40px; }

/* ---------- Audit dashboard: OVR meno saturo, niente doppio scroll, "?" toccabile ---------- */
/* la colonna scorre con la pagina: un solo scroll */
.help { width: 36px; height: 36px; border: 0; background: transparent; font-size: 0; right: 2px; }
.help::before { content: '?'; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-default); color: var(--text-secondary); background: color-mix(in srgb, var(--fx-lift) 3%, transparent); font: 700 .72rem/1 var(--font-ui); }
.help:hover::before, .help:focus-visible::before { color: var(--accent-brand); border-color: var(--accent-brand); }
.help::after { font-size: .84rem; }

/* ---------- Mercato: una carta per opzione, stesse voci, un solo bottone ---------- */
/* Che club e: posizione e ambizione. E informazione sul mondo, non una
   scelta: nessun accento, solo gerarchia di grigi. */
.market-fold summary { font-size: var(--type-corpo); }

/* ---------- Coda audit: riepilogo e transizioni su mobile, testata schede larghe, agente ---------- */
.agent-now .kv { margin-top: 8px; }
.agent-now .kv + .muted { margin: 2px 0 6px; font-size: var(--type-nota); }
.agent-now > .muted { font-size: var(--type-nota); margin-top: 6px; }
.bacheca-empty .muted { font-size: var(--type-corpo); }
.camp-done { margin: 6px 0 4px; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--state-positive) 35%, transparent); background: color-mix(in srgb, var(--state-positive) 7%, transparent); color: var(--text-secondary); font-size: var(--type-nota); }
.camp-done b { color: var(--text-primary); }
.camp-done svg { width: 13px; height: 13px; vertical-align: -2px; color: var(--state-positive); }

/* ---------- Numero di maglia nella creazione ---------- */
.name-row input.num { flex: 0 0 82px; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.name-row input.num::-webkit-outer-spin-button, .name-row input.num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Fine stagione, slide "Come sei cresciuto": il nuovo OVR è il protagonista ---------- */
/* il resto della slide alla scala: motivi, attributi, note */
/* slide "Il bilancio" e Legend Points alla scala */

.lp-row { font-size: var(--type-nota); }
.lp-row b { font-size: 1.05rem; }
.card > h3, .card h3:first-child, .cup-card > summary h3, .objectives-card h3 { font-size: var(--type-sezione); }
.section-label span { font-size: 1.05rem; }

/* stato: sei celle, tre per riga */

/* "?" inline, a fianco della parola che spiega */
.help.inline { position: relative; display: inline-grid; top: auto; right: auto; transform: none; width: 24px; height: 24px; vertical-align: middle; margin-left: 2px; }
.help.inline::before { width: 16px; height: 16px; font-size: .62rem; }
.help.inline::after { right: auto; left: 50%; transform: translateX(-50%); bottom: calc(100% + 6px); width: min(260px, 82vw); }

/* allenamento e attributi in un blocco: righe con P / S */

/* simulazione veloce: le tue statistiche che salgono, sopra i risultati */
.run-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; width: min(560px, 92vw); margin: 14px auto 0; }
.run-stats > div { padding: 8px 6px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--fx-lift) 4%, transparent); border: 1px solid var(--border-subtle); text-align: center; }
.run-stats b { display: block; font: 700 1.35rem/1 var(--font-display-ui); color: var(--accent-brand); }
.run-stats span { display: block; margin-top: 3px; color: var(--text-muted); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.match-transition.run .transition-clock { font-size: 1.5rem; letter-spacing: .04em; }
.run-feed { margin: 12px auto 10px; }
.run-result { font-size: .92rem; }
.run-result b { font-size: .95rem; }
.run-row { font-size: .92rem; padding: 6px 10px; }
.run-row.me { font-size: 1rem; }

/* mercato a tutta larghezza: quattro opzioni in fila */
/* righe allenamento: il nome intero sta nella colonna, la barra si stringe */
/* simulazione veloce: il titolo del gioco non è la notizia */
.match-transition.run .transition-match strong { font-size: .95rem; letter-spacing: .12em; color: var(--text-muted); }
.match-transition.run .transition-round { display: none; }

/* ---------- Audit flussi: finale partita, simulazione su mobile, mercato su mobile ---------- */
/* cronaca finale in ordine cronologico e tutta scorribile */
.match-transition.final .transition-events { flex-direction: column-reverse; justify-content: flex-end; height:auto; max-height:220px; overflow-y:auto; scrollbar-width:thin; padding-right:4px; }
/* simulazione veloce: il comando per chi ha già visto abbastanza */
.run-skip { margin: 12px auto 0; display: block; padding: 8px 14px; font-size: var(--type-nota); background: transparent; }
/* mercato: la carta "resta" non è consigliata, ha lo stesso vestito delle altre */

/* ---------- Stato del giocatore: stessa informazione, meno spazio ---------- */

/* ---------- Simulazione lunga: ritmo, pausa e salta ---------- */
.speed-ctl.run { margin-top: 16px; }
.run-skip { margin-top: 8px; }
/* la testata del riepilogo è l'intestazione della schermata, non un'etichetta */

/* ---------- Niente scorrimento orizzontale nelle schermate a piena pagina ----------
   La regola generica perdeva per specificità contro ".match-transition .transition-content". */
.match-transition .transition-content,
.transition-events, .run-feed, .run-table, .run-stats { max-width: 100%; }

/* ======================================================================
   TABELLONI DELLE COPPE
   Una coppa si legge come tabellone, non come lista di risultati: dove sei
   arrivato, chi incontri adesso, chi resta dall'altra parte. Nessun lime:
   il tabellone e' contesto, non una decisione. La tua squadra e' azzurra.
   ====================================================================== */

/* La prossima sfida: la sola riga che chiede attenzione, quindi sta in alto. */
.next-tie {
  display: grid; gap: var(--space-1); margin-bottom: var(--space-3);
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--accent-player);
  background: var(--surface-inset-soft);
}
.nt-round { color: var(--text-muted); font-size: var(--type-etichetta); letter-spacing: .06em; text-transform: uppercase; }
.nt-opp { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.nt-opp b { font-size: var(--type-corpo); }
.nt-crest { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 .7rem var(--font-display-ui); flex: none; }
.nt-where { color: var(--text-secondary); font-size: var(--type-nota); }
.nt-extra { color: var(--text-muted); font-size: var(--type-nota); }

.cup-winner { margin: 0 0 var(--space-3); color: var(--text-secondary); font-size: var(--type-nota); }
.cup-winner b { color: var(--accent-achievement); }
.cup-winner svg { width: 13px; height: 13px; vertical-align: -2px; color: var(--accent-achievement); }

/* Una sfida: due squadre, il punteggio, chi passa. */
.bt {
  display: grid; gap: 2px; padding: 8px 9px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle); background: var(--surface-inset-soft);
}
.bt.mine {
  border-color: color-mix(in srgb, var(--accent-player) 45%, transparent);
  background: color-mix(in srgb, var(--accent-player) 7%, var(--surface-inset-soft));
}
.bt.todo { opacity: .82; }
.bt-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-2); min-width: 0; }
.bt-team { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bt-crest { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font: 700 .52rem var(--font-display-ui); flex: none; }
.bt-name { font-size: var(--type-nota); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-goals { font: 700 var(--type-nota) var(--font-display-ui); font-variant-numeric: tabular-nums; color: var(--text-muted); }
.bt-row.win .bt-name { font-weight: 700; color: var(--text-primary); }
.bt-row.win .bt-goals { color: var(--state-positive); }
.bt-row.lose .bt-name, .bt-row.lose .bt-goals { color: var(--text-muted); }
.bt-row.me .bt-name { color: var(--accent-player); font-weight: 700; }
.bt-note { color: var(--text-muted); font-size: var(--type-etichetta); }

/* Il tuo percorso: una tappa per turno, in colonna. */
.my-path { display: grid; gap: var(--space-2); }
.mp-step { display: grid; gap: 3px; }
.mp-round { color: var(--text-muted); font-size: var(--type-etichetta); letter-spacing: .06em; text-transform: uppercase; }

/* Il tabellone completo: una colonna per turno, si sfoglia in orizzontale.
   Lo scroll-snap fa arrivare un turno alla volta, anche su telefono. */
/* L IMBUTO. Ogni sfida sta a META ALTEZZA fra le due che la alimentano, e una
   staffa la collega: e' il disegno che dice "da qui si arriva li", e senza il
   tabellone e' solo una fila di liste affiancate.
   La geometria non ha numeri da tarare: se ogni turno e' alto uguale e ha meta
   delle sfide del precedente, una casella qui e' alta il DOPPIO di una casella
   li, quindi le due che la alimentano stanno a un quarto sopra e un quarto
   sotto il suo centro. Staffa alta il 50%, che parte dal 25%. Vale per
   qualunque numero di turni, e servira' identica a playoff, play-in e play-out. */
.bracket-board {
  display: flex; align-items: stretch; gap: 30px;
  overflow-x: auto; padding-bottom: var(--space-2);
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.bracket-board > .bb-round { scroll-snap-align: start; display: flex; flex-direction: column; min-width: 210px; }
.bb-round-name {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
  margin: 0 0 var(--space-2); padding: 4px 0;
  background: var(--surface-content);
  color: var(--text-primary); font-size: var(--type-nota); font-weight: 700; letter-spacing: 0; text-transform: none;
}
.bb-round-name span { color: var(--text-muted); font-size: var(--type-etichetta); font-weight: 500; }
/* La casella non e' la sfida: e' lo SPAZIO della sfida. Una casella qui e' alta
   il doppio di una casella li', perche' il turno ha meta' delle sfide e la
   colonna e' alta uguale — e solo cosi' una staffa alta meta' casella tocca
   davvero i centri delle due che la alimentano. Disegnandola sulla sfida
   copriva meta' del salto: misurato, 29px di staffa su 58 di distanza. */
.bb-ties { display: flex; flex-direction: column; flex: 1; }
.bb-slot { flex: 1 0 auto; display: flex; align-items: center; position: relative; }
.bb-slot > .bt { flex: 1; position: relative; }
/* Dove il motore NON estrae (round.sorteggiato === false) la discendenza esiste
   e le linee la dicono. Il colore e' misurato: quello di linea sta a 1.33:1 sul
   fondo della card, cioe' invisibile; questo a 3.13:1. */
.bb-entra .bb-slot::before {
  content: ''; position: absolute; right: 100%; top: 25%; width: 13px; height: 50%;
  border: 1px solid var(--bracket-filo); border-right: 0; border-radius: var(--radius-xs) 0 0 var(--radius-xs);
}
.bb-esce .bb-slot::after { content: ''; position: absolute; left: 100%; top: 50%; width: 13px; border-top: 1px solid var(--bracket-filo); }
/* Dove estrae, l'assenza di linee sarebbe indistinguibile da una dimenticanza:
   si dichiara. Vale per la coppa nazionale a ogni turno e per gli ottavi euro. */
.bb-sorteggio { display: flex; align-items: center; justify-content: center; width: 34px; margin: 0 -9px; }
.bb-sorteggio span {
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  padding: 12px 7px; border-left: 1px dashed var(--ink-500); border-right: 1px dashed var(--ink-500);
  color: var(--text-muted); font-size: var(--type-etichetta); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.bb-round:first-child { opacity: .72; }

.bracket-fold { margin-top: var(--space-3); }
.bracket-fold > summary {
  cursor: pointer; list-style: none; padding: 7px 0;
  color: var(--text-secondary); font-size: var(--type-nota);
}
.bracket-fold > summary::-webkit-details-marker { display: none; }
.bracket-fold > summary::before { content: '+ '; }
.bracket-fold[open] > summary::before { content: '\2212 '; }
.bracket-fold > summary:hover { color: var(--text-primary); }

/* Creazione, passo "La tua storia": le sette origini con la stessa forma
   delle card di vivaio e agente. Il tratto e' la regola che resta. */

/* Estate con la nazionale: finche restano partite da vedere sta prima del
   mercato, una per volta. Lime solo sul pulsante: e' l'azione. */
.summer-card.pending { border-color: var(--border-strong); }
.summer-card.pending button.primary small { font-weight: 500; opacity: .8; margin-left: 4px; }

/* L'apertura di una competizione e' una scena a se: mentre gira, il
   tabellone sotto non c'e ancora. Compare quando la scena si spegne. */
.match-transition .transition-content { transition: opacity .28s ease; }
.match-transition.introducing .transition-content { opacity: 0; }

/* Estate con la nazionale: il cammino gia giocato, sotto la sua home. */
.summer-path .sm-rows { display: grid; gap: 2px; }
.sm-row {
  display: grid; grid-template-columns: 116px minmax(0, 1fr) auto minmax(0, 130px);
  align-items: baseline; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm);
  background: var(--surface-inset-soft); font-size: var(--type-nota);
}
.sm-row .sm-fase { color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-size: var(--type-etichetta); }
.sm-row .sm-opp { color: var(--text-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-row b { font: 700 1rem var(--font-display-ui); font-variant-numeric: tabular-nums; }
.sm-row .sm-tuo { color: var(--text-secondary); text-align: right; }
.sm-row.win b { color: var(--state-positive); }
.sm-row.lose b { color: var(--state-negative); }

/* Fine carriera: le maglie vestite, con i titoli vinti in quegli anni. */
.career-path { display: grid; gap: 10px; }
.cp-club { padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-inset-soft); border-left: 3px solid var(--border-default); }
.cp-club.vinta { border-left-color: var(--accent-achievement); }
.cp-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.cp-who b { display: block; font: 700 1.02rem var(--font-display-ui); }
.cp-who span { display: block; color: var(--text-muted); font-size: var(--type-etichetta); }
.cp-when { text-align: right; }
.cp-when b { display: block; font-size: var(--type-nota); font-variant-numeric: tabular-nums; }
.cp-when span { display: block; color: var(--text-muted); font-size: var(--type-etichetta); }
.cp-nums { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; color: var(--text-secondary); font-size: var(--type-nota); }
.cp-nums b { color: var(--text-primary); font: 700 1rem var(--font-display-ui); font-variant-numeric: tabular-nums; }
.cp-trofei { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cp-trofeo {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: var(--radius-pill);
  background: var(--surface-raised); color: var(--text-secondary); font-size: var(--type-etichetta);
}
.cp-trofeo svg { width: 13px; height: 13px; }
.cp-trofeo b { color: var(--text-primary); }
.cp-trofeo.t-top, .cp-trofeo.t-mvp { color: var(--accent-achievement); }
.cp-vuoto { margin: 8px 0 0; color: var(--text-muted); font-size: var(--type-etichetta); }

/* La prossima partita è il soggetto della home: una scena, non una card fra
   le altre. I due colori sociali illuminano da destra e da sinistra, i nomi
   pesano, e sotto c'è il motivo per cui questa giornata conta. */

/* La stagione, impaginata come il mockup: il torneo prende la larghezza — è
   la cosa che resta a schermo mentre pensi — e la partita sta nella barra
   destra, dove si guarda un attimo e si clicca. Su mobile la barra sale in
   cima, quindi la partita resta comunque la prima cosa. */
/* come nel mockup: l azione principale prende tutta la riga, le due
   scorciatoie stanno appaiate sotto */

/* la barra in alto sul fondale dell hub: qui va sostituito il gradiente
   intero, perche un background-image sta sopra a background-color e un
   colore translucido da solo non la toccherebbe */
body:has(.rtp4-state) .topbar {
  background: color-mix(in srgb, var(--surface-scene) 58%, transparent);
}

/* ---------- Il modulo per segnalare un problema ---------- */
/* Etichette sopra e campi larghi: si compila da telefono senza zoom. La
   gravita' ha tre voci e non cinque — una scala che nessuno sa usare non
   separa niente, ed e' la stessa lezione delle quattro soglie del rilievo. */
.sg-modal h3 { margin: 8px 0 16px; font: 700 var(--type-sezione)/1.1 var(--font-display-ui); }
.sg-campo { display: grid; gap: 5px; margin-bottom: 14px; }
.sg-campo > label { color: var(--text-secondary); font-size: var(--type-etichetta); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.sg-campo > small { color: var(--text-muted); font-size: var(--type-etichetta); }
.sg-campo textarea {
  width: 100%; min-height: 64px; padding: 10px 12px; resize: vertical;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--surface-raised); color: var(--text-primary);
  font: 400 var(--type-nota) var(--font-ui);
}
.sg-gravita { display: flex; gap: 7px; }
.sg-gravita button { flex: 1; padding: 9px 8px; font-size: var(--type-etichetta); font-weight: 600; }
.sg-gravita button.on {
  border-color: var(--accent-brand); color: var(--accent-brand);
  background: color-mix(in srgb, var(--accent-brand) 16%, transparent);
  box-shadow: 0 0 0 2px var(--accent-brand-glow);
}
/* quello che il gioco allega da se': si dice, non si chiede */
.sg-allegato {
  margin: 4px 0 16px; padding: 10px 12px;
  border-left: 3px solid var(--accent-player);
  background: color-mix(in srgb, var(--accent-player) 7%, transparent);
  color: var(--text-secondary); font-size: var(--type-etichetta); line-height: 1.7;
}
.sg-azioni { display: flex; gap: 9px; justify-content: flex-end; }
.sg-piede { display: flex; justify-content: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.sg-piede button { color: var(--text-muted); font-size: var(--type-etichetta); font-weight: 600; letter-spacing: .06em; }
/* La prosa di racconto sotto ogni maglia e in chiusura: e' commento, non dato,
   quindi sta sotto i numeri e non fra loro (js/racconto-carriera.js). */
.cp-nota { margin: 8px 0 0; color: var(--text-secondary); font-size: var(--type-nota); }
.cp-chiusura { margin: 12px 0 0; color: var(--text-secondary); font-size: var(--type-corpo); font-style: italic; }