/* ======================================================================
   SCENE DI PAGINA
   Solo variabili --scene-*, fondali e layout di pagina. Mai componenti.
   Il file resta intenzionalmente vuoto fino ai prototipi approvati.
   ====================================================================== */

/* ----------------------------------------------------------------------
   LA LANDING: stadio di notte
   Fondale originale: tribune, fari e campo. Le velature mantengono il
   contrasto della UI senza ridurre lo stadio a un pattern geometrico.
   ---------------------------------------------------------------------- */
.home-shell {
  position: relative;
  isolation: isolate;
}
.home-shell::before, .home-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.home-shell::before {
  z-index: -2;
  background-color: var(--ink-950);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--scene-veil) 62%, transparent) 0%, color-mix(in srgb, var(--scene-veil) 22%, transparent) 50%, color-mix(in srgb, var(--scene-veil) 40%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--scene-veil) 02%, transparent) 0%, color-mix(in srgb, var(--scene-veil) 08%, transparent) 45%, color-mix(in srgb, var(--scene-veil) 62%, transparent) 100%),
    url("../assets/landing-stadium-bg-v2.jpg") center center / cover no-repeat;
}
.home-shell::after {
  z-index: -1;
  background:
    radial-gradient(ellipse 66% 58% at 50% 42%, transparent 0 38%, color-mix(in srgb, var(--scene-vignette) 34%, transparent) 78%, color-mix(in srgb, var(--scene-vignette) 70%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--scene-veil) 04%, transparent) 0%, transparent 24%, color-mix(in srgb, var(--scene-veil) 28%, transparent) 70%, color-mix(in srgb, var(--scene-veil) 78%, transparent) 100%);
}
/* Su monitor ruotati o finestre desktop molto alte, `cover` taglierebbe i
   fari laterali. La scena viene quindi mostrata per intero in larghezza e
   sfuma naturalmente nel fondale scuro sotto il campo. */
@media (min-width: 761px) and (max-aspect-ratio: 1/1) {
  .home-shell::before {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--scene-veil) 58%, transparent), color-mix(in srgb, var(--scene-veil) 18%, transparent) 52%, color-mix(in srgb, var(--scene-veil) 38%, transparent)),
      linear-gradient(180deg, transparent 0 26%, color-mix(in srgb, var(--scene-veil) 12%, transparent) 44%, var(--ink-950) 75%),
      url("../assets/landing-stadium-bg-v2.jpg") center top / 100% auto no-repeat;
  }
}
@media (max-width: 760px) {
  .home-shell::before {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--scene-veil) 52%, transparent), color-mix(in srgb, var(--scene-veil) 24%, transparent), color-mix(in srgb, var(--scene-veil) 52%, transparent)),
      linear-gradient(180deg, color-mix(in srgb, var(--scene-veil) 03%, transparent), color-mix(in srgb, var(--scene-veil) 22%, transparent) 64%, color-mix(in srgb, var(--scene-veil) 78%, transparent)),
      url("../assets/landing-stadium-bg-mobile-v2.jpg") center top / cover no-repeat;
  }
  .home-shell::after {
    background:
      radial-gradient(ellipse 94% 54% at 50% 42%, transparent 0 34%, color-mix(in srgb, var(--scene-vignette) 46%, transparent) 100%),
      linear-gradient(180deg, transparent 0 48%, color-mix(in srgb, var(--scene-veil) 70%, transparent) 100%);
  }
}

/* ----------------------------------------------------------------------
   FINE PARTITA: lo spogliatoio dopo il fischio finale
   La scena esiste gia durante il match ma resta invisibile: quando arriva
   il verdetto entra sotto la carta, mentre il centro calmo protegge i dati.
   ---------------------------------------------------------------------- */
.match-transition.match::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--ink-950);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--scene-veil) 18%, transparent), color-mix(in srgb, var(--scene-veil) 08%, transparent) 50%, color-mix(in srgb, var(--scene-veil) 18%, transparent)),
    linear-gradient(180deg, color-mix(in srgb, var(--scene-shade) 08%, transparent), color-mix(in srgb, var(--scene-shade) 34%, transparent) 100%),
    url("../assets/match-end-locker-room-v1.jpg") center center / cover no-repeat;
  opacity: 0;
  transform: scale(1.018);
  transition: opacity .72s ease, transform 1.1s ease;
  pointer-events: none;
}
.match-transition.match.final::before {
  opacity: 1;
  transform: none;
}

@media (max-width: 760px) {
  .match-transition.match::before {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--scene-veil) 20%, transparent), color-mix(in srgb, var(--scene-veil) 10%, transparent) 50%, color-mix(in srgb, var(--scene-veil) 20%, transparent)),
      linear-gradient(180deg, color-mix(in srgb, var(--scene-shade) 10%, transparent), color-mix(in srgb, var(--scene-shade) 42%, transparent) 100%),
      url("../assets/match-end-locker-room-v1.jpg") center center / cover no-repeat;
  }
}

/* ----------------------------------------------------------------------
   CREAZIONE GIOCATORE: il primo spogliatoio
   L'ambiente resta fermo dietro ai cinque passaggi del wizard; superfici e
   controlli mantengono così la stessa grammatica mentre cambia il contenuto.
   ---------------------------------------------------------------------- */
.create-shell {
  position: relative;
  isolation: isolate;
  min-height: calc(100dvh - 74px);
}
.create-shell::before,
.create-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.create-shell::before {
  z-index: -2;
  background-color: var(--ink-950);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--scene-veil) 66%, transparent), color-mix(in srgb, var(--scene-veil) 34%, transparent) 50%, color-mix(in srgb, var(--scene-veil) 62%, transparent)),
    linear-gradient(180deg, color-mix(in srgb, var(--scene-veil) 18%, transparent), color-mix(in srgb, var(--scene-veil) 50%, transparent) 58%, color-mix(in srgb, var(--scene-veil) 88%, transparent)),
    url("../assets/character-creation-locker-room-v1.jpg") center center / cover no-repeat;
}
.create-shell::after {
  z-index: -1;
  background:
    radial-gradient(ellipse 46% 40% at 66% 29%, color-mix(in srgb, var(--metal-gold) 08%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--scene-shade) 10%, transparent), color-mix(in srgb, var(--scene-shade) 38%, transparent) 42%, color-mix(in srgb, var(--scene-shade) 76%, transparent) 100%);
}
@media (max-width: 760px) {
  .create-shell::before {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--scene-veil) 68%, transparent), color-mix(in srgb, var(--scene-veil) 40%, transparent), color-mix(in srgb, var(--scene-veil) 68%, transparent)),
      linear-gradient(180deg, color-mix(in srgb, var(--scene-veil) 22%, transparent), color-mix(in srgb, var(--scene-veil) 58%, transparent) 52%, color-mix(in srgb, var(--scene-veil) 90%, transparent)),
      url("../assets/character-creation-locker-room-v1.jpg") center -10vh / auto 100vh no-repeat;
  }
  .create-shell::after {
    background: linear-gradient(180deg, color-mix(in srgb, var(--scene-shade) 16%, transparent), color-mix(in srgb, var(--scene-shade) 68%, transparent) 46%, color-mix(in srgb, var(--scene-shade) 92%, transparent));
  }
}

/* ----------------------------------------------------------------------
   PRE-CAMPIONATO: campo d'allenamento all'alba
   L'attrezzatura resta ai margini; il pannello centrale conserva una base
   scura uniforme, indispensabile per confrontare le scelte alla pari.
   ---------------------------------------------------------------------- */
.preseason-focus-mode {
  position: relative;
  isolation: isolate;
}
.preseason-focus-mode::before,
.preseason-focus-mode::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.preseason-focus-mode.preseason-camp-scene::before {
  z-index: -2;
  background-color: var(--ink-950);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--scene-veil) 58%, transparent), color-mix(in srgb, var(--scene-veil) 30%, transparent) 52%, color-mix(in srgb, var(--scene-veil) 48%, transparent)),
    linear-gradient(180deg, color-mix(in srgb, var(--scene-veil) 08%, transparent), color-mix(in srgb, var(--scene-veil) 36%, transparent) 54%, color-mix(in srgb, var(--scene-veil) 78%, transparent)),
    url("../assets/preseason-training-ground-v1.jpg") center center / cover no-repeat;
}
.preseason-focus-mode.preseason-camp-scene::after {
  z-index: -1;
  background:
    radial-gradient(ellipse 42% 38% at 88% 20%, color-mix(in srgb, var(--scene-lamp) 08%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in srgb, var(--scene-shade) 10%, transparent), color-mix(in srgb, var(--scene-shade) 30%, transparent) 48%, color-mix(in srgb, var(--scene-shade) 72%, transparent));
}
.preseason-focus-mode.training-plan-scene::before {
  z-index: -2;
  background-color: var(--ink-950);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--scene-veil) 52%, transparent), color-mix(in srgb, var(--scene-veil) 32%, transparent) 50%, color-mix(in srgb, var(--scene-veil) 48%, transparent)),
    linear-gradient(180deg, color-mix(in srgb, var(--scene-veil) 10%, transparent), color-mix(in srgb, var(--scene-veil) 38%, transparent) 56%, color-mix(in srgb, var(--scene-veil) 82%, transparent)),
    url("../assets/season-training-plan-room-v1.jpg") center center / cover no-repeat;
}
.preseason-focus-mode.training-plan-scene::after {
  z-index: -1;
  background:
    radial-gradient(ellipse 35% 45% at 84% 39%, color-mix(in srgb, var(--cyan-400) 07%, transparent), transparent 74%),
    radial-gradient(ellipse 28% 38% at 7% 26%, color-mix(in srgb, var(--metal-gold) 07%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in srgb, var(--scene-shade) 10%, transparent), color-mix(in srgb, var(--scene-shade) 34%, transparent) 48%, color-mix(in srgb, var(--scene-shade) 76%, transparent));
}
@media (max-width: 760px) {
  .preseason-focus-mode.preseason-camp-scene::before {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--scene-veil) 65%, transparent), color-mix(in srgb, var(--scene-veil) 38%, transparent), color-mix(in srgb, var(--scene-veil) 62%, transparent)),
      linear-gradient(180deg, color-mix(in srgb, var(--scene-veil) 10%, transparent), color-mix(in srgb, var(--scene-veil) 52%, transparent) 46%, color-mix(in srgb, var(--scene-veil) 88%, transparent)),
      url("../assets/preseason-training-ground-v1.jpg") 68% top / auto 100vh no-repeat;
  }
  .preseason-focus-mode.preseason-camp-scene::after {
    background: linear-gradient(180deg, color-mix(in srgb, var(--scene-shade) 12%, transparent), color-mix(in srgb, var(--scene-shade) 62%, transparent) 44%, color-mix(in srgb, var(--scene-shade) 92%, transparent));
  }
  .preseason-focus-mode.training-plan-scene::before {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--scene-veil) 66%, transparent), color-mix(in srgb, var(--scene-veil) 42%, transparent), color-mix(in srgb, var(--scene-veil) 62%, transparent)),
      linear-gradient(180deg, color-mix(in srgb, var(--scene-veil) 12%, transparent), color-mix(in srgb, var(--scene-veil) 54%, transparent) 48%, color-mix(in srgb, var(--scene-veil) 90%, transparent)),
      url("../assets/season-training-plan-room-v1.jpg") 58% top / auto 100vh no-repeat;
  }
  .preseason-focus-mode.training-plan-scene::after {
    background: linear-gradient(180deg, color-mix(in srgb, var(--scene-shade) 12%, transparent), color-mix(in srgb, var(--scene-shade) 64%, transparent) 46%, color-mix(in srgb, var(--scene-shade) 92%, transparent));
  }
}

/* ======================================================================
   FINE STAGIONE — il fondale
   Lo stadio dietro le tre pagine dice DOVE giochi, e lo sceglie il contesto
   della squadra (UIOnori.stadio): campo di provincia, stadio pro, arena.
   L inquadratura tiene il campo e la linea laterale in vista, e il velo
   scurisce da sinistra e dal basso — dove sta il testo — lasciando respirare
   la parte alta, che e quella che si guarda.
   ====================================================================== */
.season-recap .fs-scena {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../assets/stadio-elite.jpg") center bottom / auto 140% no-repeat;
}
.season-recap[data-stadio="vivaio"] .fs-scena { background-image: url("../assets/stadio-vivaio.jpg"); }
.season-recap[data-stadio="pro"] .fs-scena { background-image: url("../assets/stadio-pro.jpg"); }
.season-recap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--scene-veil) 88%, transparent), color-mix(in srgb, var(--scene-veil) 34%, transparent) 62%, color-mix(in srgb, var(--scene-veil) 10%, transparent)),
    linear-gradient(0deg, var(--ink-1000) 0%, color-mix(in srgb, var(--ink-1000) 94%, transparent) 20%, transparent 75%),
    color-mix(in srgb, var(--scene-veil) 26%, transparent);
}
@media (max-width: 900px) {
  .season-recap .fs-scena { background-size: auto 125%; }
}

/* ======================================================================
   IL FONDALE DELL HUB — assets/hub-stadium-blur-v1.jpg, scheda in
   docs/da-codex/hub-stadium-blur-v1.md.
   NON "cover": su una finestra piu stretta di 16:9 il cover scala sull altezza
   e taglia via le fasce laterali, che sono dove stanno tutte le luci. Restava
   visibile solo il centro, che nell immagine e volutamente calmo e scuro — si
   vedeva un rettangolo nero e sembrava che il fondale non ci fosse. Con
   "100% auto" si vede tutta la larghezza. Sotto l immagine il colore continua
   dal suo bordo inferiore vero, campionato sul file e messo in un token, o
   si vede lo scalino.
   ====================================================================== */
body:has(.rtp4-state), body:has(.wide-main.tab-stats), body:has(.wide-main.tab-bacheca), body:has(.wide-main.tab-agente) {
  background:
    linear-gradient(180deg, var(--scene-hub-veil-top), var(--scene-hub-veil-mid) 52%, var(--scene-hub-veil-low)),
    var(--scene-hub-image) center top / 100% auto no-repeat,
    linear-gradient(180deg, var(--scene-hub-floor), var(--surface-canvas));
  background-attachment: fixed}
body:has(.rtp4-state) { --scene-hub-image:url('../assets/hub-stadium-blur-v1.jpg') } body:has(.wide-main.tab-stats) { --scene-hub-image:url('../assets/hub-statistiche-blur-v1.jpg') } body:has(.wide-main.tab-bacheca) { --scene-hub-image:url('../assets/hub-bacheca-blur-v1.jpg') } body:has(.wide-main.tab-agente) { --scene-hub-image:url('../assets/hub-agente-blur-v1.jpg') }