/* =====================================================================
   TWIZA FANTACALCIO — LAYER DI INTEGRAZIONE V2
   Caricato per ULTIMO. Contiene SOLO i delta necessari a cablare i due
   file consegnati nel repo, così `fantacalcio-redesign.css` (V1) e
   `twiza-fantacalcio-v2.css` (V2) restano VERBATIM e verificabili
   con i checksum del MANIFEST.
   ===================================================================== */

/* V1 referenzia `/assets/stadium-night.webp`, asset mai incluso nei pacchetti
   (404 in console, vietato dalla checklist §9.7). Lo sfondo dell'hero di login
   è definito più sotto, nel blocco Aurora, su `hero_login_tunnel.jpg`.
   NB: qui c'era un layer su `hero_login.jpg`, file mai finito nel repo — era
   esso stesso un 404 in console, mascherato dal fallback su `bg_app_stadium.jpg`.
   Rimosso con la regola che lo conteneva: non lasciamo due sorgenti in conflitto. */

/* La card di login eredita da V2 il vetro e il raggio pieno: ripristiniamo
   l'accoppiamento a due colonne dell'hero (V2 non definisce `.login`). */
@media (min-width: 901px) {
  .login .stadium { border-radius: var(--fc-r-lg) 0 0 var(--fc-r-lg); }
  .login .card { border-radius: 0 var(--fc-r-lg) var(--fc-r-lg) 0; }
}
@media (max-width: 900px) {
  .login .stadium { border-radius: var(--fc-r-lg) var(--fc-r-lg) 0 0; }
  .login .card { border-radius: 0 0 var(--fc-r-lg) var(--fc-r-lg); }
}

/* `.budget-hero` (spec §4.2) raccoglie titolo, crediti e slot per reparto in
   un'unica fascia di controllo. V1 la definisce sticky con sfondo pieno e
   z-index alto: i reparti DEVONO starle dentro (come nel markup della spec),
   altrimenti la fascia ci passa sopra e li nasconde. */
.budget-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 16px;
}
.budget-hero .reparti { flex: 1 1 100%; }

/* Volti giocatori: dimensioni dei mini-ritratti nei target d'asta (V2 fissa la
   misura grande del campo; il target resta compatto come da §4.2). */
.tgt .mini-face { width: 40px; height: 46px; }

/* La board del mediatore usa colonne a larghezza fissa: evita che il raggio
   ampio di V2 sulle `.bcol` mangi lo spazio degli slot. */
.bcol { border-radius: var(--fc-r-md); }

/* ---------------------------------------------------------------------
   Controlli secondari: NON sono call-to-action.
   V2 applica il gradiente CTA a `button:not(.nav-item):not(.nav-tab)`
   — specificità (0,2,1) — che in questo markup cattura anche chip,
   segmenti, frecce della board e link inline, rendendo tutto verde e
   azzerando la gerarchia (spec §5: la CTA primaria dev'essere UNA).
   Qui li riportiamo a controlli neutri, senza toccare i file consegnati.
   --------------------------------------------------------------------- */
/* NB: ogni selettore porta `:not(.nav-tab)` per pareggiare la specificità (0,2,1)
   della regola CTA di V2 e vincere per ordine di caricamento. Senza, l'ordine
   del file non basterebbe e questi controlli resterebbero verdi. */
button.chip:not(.nav-tab),
.seg button:not(.on):not(.nav-tab),
.bmove button:not(.nav-tab),
button.brm:not(.nav-tab),
button.linkbuy:not(.nav-tab),
button.chipsel:not(.on):not(.nav-tab),
.bslot.empty {
  color: var(--fc-text-muted);
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(176, 220, 190, .28);
  box-shadow: none;
  font-weight: 600;
}
button.chip:not(.nav-tab):hover,
.seg button:not(.on):not(.nav-tab):hover,
.bmove button:not(.nav-tab):hover,
button.chipsel:not(.on):not(.nav-tab):hover {
  color: var(--fc-green-intense);
  border-color: var(--fc-green);
  background: rgba(69, 217, 132, .12);
}
/* La "×" di rimozione e il "＋" inline restano testuali, non pulsanti pieni. */
button.brm:not(.nav-tab),
button.linkbuy:not(.nav-tab) {
  padding: 0 6px;
  background: none;
  border: 0;
  min-height: 0;
  font-weight: 700;
}
button.brm:not(.nav-tab):hover { color: var(--fc-danger); }
button.linkbuy:not(.nav-tab):hover { color: var(--fc-green-intense); }
/* Slot vuoto della board: tratteggio, non bottone pieno. */
.bslot.empty {
  border-style: dashed;
  background: none;
  justify-content: center;
}
.bslot.empty:hover { border-color: var(--fc-green); color: var(--fc-green-intense); }
/* Frecce dell'ordine di chiamata: compatte. */
.bmove button:not(.nav-tab) { min-height: 24px; width: 26px; padding: 0; font-size: 12px; border-radius: 8px; }
.bmove button:not(.nav-tab):disabled { opacity: .3; }

/* ---------------------------------------------------------------------
   Responsive: nessuno scorrimento orizzontale della pagina (spec §7).
   La topbar a 390px non entra (logo + wordmark + selettore lega + Esci):
   il wordmark testuale sparisce, il logo resta, il selettore si comprime.
   --------------------------------------------------------------------- */
@media (max-width: 620px) {
  .top { gap: 8px; padding-inline: 12px; }
  .top .wm { display: none; }
  .top .leaguesel { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .top .leaguesel select { max-width: 100%; min-width: 0; }
  .top .chip { flex: 0 0 auto; padding-inline: 12px; }
}
/* Il decoro di sfondo non deve mai allargare il documento. */
.pitchbg { overflow: hidden; max-width: 100vw; }
html, body { overflow-x: clip; }

/* =====================================================================
   AURORA STRATEGY ROOM — integrazione incrementale
   I file V1/V2 restano invariati: qui vivono solamente asset, movimento
   e micro-layout della nuova direzione visiva.
   ===================================================================== */
body:not(.admin) {
  background-image:
    linear-gradient(180deg, rgba(3, 10, 6, .35) 0%, rgba(3, 10, 6, .82) 66%, rgba(3, 10, 6, .96) 100%),
    url("/assets/ui/bg_app_aurora.jpg");
}
body.admin,
body:has(#shell .sidebar) {
  background-image:
    linear-gradient(90deg, rgba(3, 10, 6, .90), rgba(3, 10, 6, .61)),
    url("/assets/ui/bg_admin_canopy.jpg");
}

body::after {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  pointer-events: none;
  opacity: .36;
  background:
    radial-gradient(42% 24% at 16% 20%, rgba(39, 255, 150, .22), transparent 70%),
    radial-gradient(34% 22% at 84% 16%, rgba(137, 255, 95, .16), transparent 72%),
    radial-gradient(28% 18% at 62% 74%, rgba(69, 217, 132, .10), transparent 74%);
  filter: blur(20px) saturate(1.18);
}

@keyframes aurora-drift {
  0%, 100% { transform: translate3d(-1%, -1%, 0) rotate(-2deg) scale(1); }
  50% { transform: translate3d(2%, 1%, 0) rotate(2deg) scale(1.06); }
}
@keyframes aurora-card-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes aurora-mascot-breathe {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}
/* L'ingresso anima il blocco contenuto UNA volta per cambio di scheda, mai le
   singole card. Motivo operativo: durante l'asta la lavagna si ridisegna in
   place a ogni assegnazione (`astaLiveView(main)` — 7 punti di richiamo) e
   `astaView` passa da `render()` a ogni acquisto. Con l'animazione sulle card,
   ogni giocatore battuto faceva ripartire fade + scorrimento sull'intero
   tabellone: illeggibile proprio nella serata in cui deve restare fermo.
   La classe `.enter` la mette `render()` SOLO quando la vista cambia davvero. */
@media (prefers-reduced-motion: no-preference) {
  body::after { animation: aurora-drift 18s ease-in-out infinite; }
  .wrap#main.enter { animation: aurora-card-rise 420ms var(--fc-ease, ease-out) both; }
  .main .sec { animation: aurora-card-rise 420ms var(--fc-ease, ease-out) both; }
  .main .sec:nth-child(2) { animation-delay: 70ms; }
  .login-mascot { animation: aurora-mascot-breathe 5.5s ease-in-out infinite; }
}

/* Login: tunnel cinematografico con area a destra lasciata deliberatamente calma. */
.login .stadium {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(3, 10, 6, .18) 0%, rgba(3, 10, 6, .25) 42%, rgba(3, 10, 6, .86) 100%),
    url("/assets/ui/hero_login_tunnel.jpg") center / cover no-repeat,
    #061008;
}
.login .stadium::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(38% 58% at 18% 14%, rgba(103, 255, 151, .16), transparent 72%);
  mix-blend-mode: screen;
}
.login-mascot {
  position: absolute;
  z-index: 2;
  right: clamp(10px, 3vw, 40px);
  bottom: -4px;
  width: min(40%, 235px);
  max-height: 84%;
  object-fit: contain;
  object-position: bottom right;
  filter: drop-shadow(0 20px 18px rgba(0, 0, 0, .42));
  user-select: none;
}
.login .logo,
.top .logobadge,
.gate .logo,
.sb-logo {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.login .logo { width: 76px; height: 76px; }
.top .logobadge { width: auto; height: auto; }
.gate .logo { width: 76px; height: 76px; }
.sb-logo { width: 42px; height: 42px; }

.login-brand {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(176, 220, 190, .18);
}
.login-brand img { width: min(172px, 56%); height: auto; opacity: .76; }
.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding-top: 0;
  padding-bottom: 28px;
}
.app-footer img { width: clamp(118px, 12vw, 174px); height: auto; opacity: .72; }

/* Mascotte dosata: solo negli stati senza dati, mai sulle tabelle operative. */
.empty-state {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 10px 0;
}
.empty-mascot {
  width: 58px;
  height: 76px;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .28));
}

/* Gli scenari post-login cambiano realmente per contesto operativo. */
[data-scene="auction"] {
  background-image:
    linear-gradient(90deg, rgba(3, 10, 6, .92) 0%, rgba(3, 10, 6, .48) 70%, rgba(3, 10, 6, .88) 100%),
    url("/assets/ui/bg_auction_theatre.jpg");
}
[data-scene="formation"],
.pitch {
  background-image:
    linear-gradient(180deg, rgba(3, 10, 6, .12), rgba(3, 10, 6, .64)),
    url("/assets/ui/bg_formation_nightpitch.jpg");
}

/* Firma discreta nell'area amministrativa. */
.sb-foot { display: grid; justify-items: center; gap: 7px; }
.sb-foot .shakazamba-footer { width: 142px; max-width: 78%; height: auto; opacity: .70; }
.sb-foot .shaka { display: none; }

@media (max-width: 900px) {
  .login-mascot { width: min(38%, 180px); right: 18px; }
}
@media (max-width: 620px) {
  .login-mascot { width: 132px; right: 8px; opacity: .78; }
  .app-footer { align-items: flex-start; flex-direction: column; gap: 12px; }
  .app-footer img { width: 136px; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}
/* TWIZA Fantacalcio V3 — email/UI companion layer.
 * Appendere a public/twiza-v2-integration.css dopo gli override Aurora.
 */

.login.login-v3 { grid-template-columns: 1.18fr .82fr; max-width: 1120px; }
/* Il pannello sinistro deve arrivare in fondo come la colonna dell'accesso: con
   una `min-height` fissa restava piu' corto e le due colonne finivano sfalsate. */
.login-v3 .stadium { min-height: 620px; height: 100%; align-self: stretch; display:flex; align-items:center; overflow:auto; }
/* Con il testo spostato a sinistra, fra il titolo e il selettore non c'e' piu'
   niente a fare da respiro. */
.login-v3 .auth-switch { margin-top: 26px; }
/* La spiegazione sta a sinistra, sotto il logo. Non e' piu' una didascalia
   appoggiata sull'immagine: e' il testo che racconta il prodotto, quindi il
   pannello lo contiene invece di farcelo galleggiare sopra. */
.login-v3 .login-wordmark { position:relative; z-index:2; margin:0; padding:38px 34px; max-width:520px; }
.login-v3 .login-wordmark img { display:block; width:min(100%,320px); height:auto; filter:drop-shadow(0 16px 28px rgba(0,0,0,.38)); }
.login-v3 .login-wordmark img { margin-bottom:22px; }
.login-v3 .login-wordmark .login-pitch p { margin:0 0 12px; color:rgba(238,246,240,.86); font-size:15px; line-height:1.6; font-weight:400; }
.login-v3 .login-wordmark .login-pitch b { color:#fff; font-weight:700; }
.login-v3 .login-wordmark .login-claim { padding-top:4px; }
/* Il logo master contiene già la giraffa: non aggiungere una seconda mascotte nel hero. */
.login-v3 .login-mascot { display:none!important; }
/* Il logo si dimensiona per ALTEZZA, non per larghezza: e' l'altezza a decidere quanto
   e' alta la barra, e quindi dove comincia la tabbar. Con `width:156px` l'immagine era
   alta 88px dentro una barra da 72px e usciva sopra le schede. */
.top .logobadge img { display:block; height:var(--topbar-logo-h,52px); width:auto; max-width:none; object-fit:contain; }
.app-logo-master { display:block; width:156px; max-width:26vw; height:auto; object-fit:contain; }
.admin .app-logo-master { width:172px; max-width:100%; }
.login-command-card { min-height:620px; padding:44px 38px 30px; display:flex; flex-direction:column; justify-content:center; }
.login-command-card .eyebrow { margin:0 0 8px; color:var(--pitch); font-size:11px; line-height:1.2; letter-spacing:1.6px; font-weight:800; }
.login-command-card h1 { margin:0; font-size:clamp(31px,3vw,42px); line-height:1.02; }
.login-intro { margin:12px 0 24px; color:var(--text-muted); font-size:15px; line-height:1.5; }
.auth-switch { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; margin:0 0 20px; border:1px solid rgba(137,190,153,.22); border-radius:999px; background:rgba(3,18,10,.6); }
.auth-switch-btn { min-height:38px; padding:0 10px; white-space:nowrap; color:var(--text-muted); font:700 13px/1 inherit; border:0; border-radius:999px; background:transparent; cursor:pointer; }
.auth-switch-btn.is-active { color:#04120a; background:var(--pitch); box-shadow:0 7px 18px rgba(69,217,132,.16); }
.auth-panel label { display:block; margin:0 0 7px; color:var(--text-muted); font-size:12px; font-weight:700; }
.auth-panel input { width:100%; min-height:46px; box-sizing:border-box; }
.auth-panel .btn { width:100%; min-height:48px; margin-top:10px; }
.password-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.login-help { margin:18px 0 0; color:var(--text-muted); font-size:12px; line-height:1.55; }
.login-v3 .login-brand { display:block; margin:22px 0 0; }
.login-v3 .login-brand img { width:148px; max-width:48%; opacity:.82; transition:opacity .18s ease; }
.login-v3 .login-brand:hover img { opacity:1; }

/* Post-login: più densità senza impoverire la leggibilità. */
/* Una sola misura per la barra e per l'aggancio della tabbar: se cambia il logo,
   cambiano insieme e non si sovrappongono mai. */
/* `--topbar-h` e' solo il valore di partenza: l'altezza vera la misura
   `misuraTopbar()` in index.html e la riscrive qui sopra. */
:root { --topbar-logo-h:66px; --topbar-h:88px; }
.top { min-height:var(--topbar-h); padding-block:8px; gap:14px; flex-wrap:wrap; }
nav.tabs, .tabbar { top:var(--topbar-h); }
/* Il selettore lega cede spazio al logo invece di finirgli sotto. */
.top .leaguesel { min-width:0; flex:0 1 auto; }
.top .leaguesel select { min-width:0; max-width:min(38vw,260px); text-overflow:ellipsis; }
.tabbar, .tabs { gap:6px; }
.tabbar button, .tabs button { min-height:38px; padding-inline:14px; }
.kpi, .metric-card { min-height:unset; padding:16px 18px; }
.empty-state .giraffe-context { width:min(200px,42vw); max-height:220px; object-fit:contain; }

@media (max-width: 760px) {
  .login.login-v3 { grid-template-columns:1fr; margin:16px 12px; }
  /* Il pannello teneva 216px fissi con `overflow:auto`: bastavano per una
     didascalia di due righe, non per il testo che racconta il prodotto — che
     infatti veniva tagliato, logo compreso. Qui si lascia crescere. */
  /* `aspect-ratio:16/7` legava l'altezza alla larghezza: 366px diventavano 160, e
     il testo (514px) veniva tagliato con dentro il logo. Su una colonna sola il
     pannello deve essere alto quanto quello che contiene. */
  .login-v3 .stadium { aspect-ratio:auto; min-height:0; height:auto; overflow:visible; align-items:center; justify-content:center; }
  .login-v3 .login-wordmark { position:static; top:auto; left:auto; max-width:none; margin-inline:auto; padding:26px 20px 22px; }
  .login-v3 .login-wordmark img { width:min(78%,280px); margin:0 auto 20px; }
  /* Il logo sta al centro, il testo no: un paragrafo centrato di sei righe si
     legge male, perche' l'occhio deve ritrovare l'inizio di ogni riga. */
  .login-v3 .login-wordmark .login-pitch { text-align:left; }
  .login-v3 .login-wordmark .login-pitch p { font-size:14.5px; line-height:1.6; }
  .app-logo-master { width:128px; max-width:40vw; }
  .top { column-gap:9px; }
  .top .leaguesel select { max-width:min(30vw,140px); }
  .login-command-card { min-height:0; padding:28px 20px 24px; }
  .password-fields { grid-template-columns:1fr; gap:8px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-v3 .login-brand img { transition:none; }
}

/* Admin: il logo master contiene già "TWIZA Fantacalcio", quindi accanto non ci va una
   seconda scritta. La testata della sidebar diventa logo + badge dell'ambiente, e il
   gate d'accesso usa lo stesso logo al posto di crest + titolo ripetuto. */
.admin-brand { display: block; line-height: 0; text-decoration: none; }
.sb-head .sb-badge { align-self: center; }
.gate .gate-logo-master { width: 240px; max-width: 72%; margin: 0 auto 14px; }

/* ── Guida, registrazione, footer legale ─────────────────────────────────────
   Componenti aggiunti con il pulsante Guida in topbar e il modulo di richiesta
   accesso esteso. Tutto sta in un solo overlay riutilizzabile. */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(8px, 3vw, 32px);
  background: rgba(2, 8, 5, .74);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: mdlIn .16s ease-out;
}
@keyframes mdlIn { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .modal-backdrop { animation: none } }

.modal {
  display: flex; flex-direction: column;
  width: min(1080px, 100%); max-height: min(88vh, 900px);
  border: 1px solid var(--fc-line, rgba(137,190,153,.22)); border-radius: 18px;
  background: linear-gradient(180deg, #0B1710, #071009);
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
  overflow: hidden;
}
.modal > header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--fc-line, rgba(137,190,153,.22));
  background: rgba(255,255,255,.03);
}
.modal > header .sp { flex: 1 }

.guida-body, .reg-body { display: grid; grid-template-columns: 250px 1fr; min-height: 0; flex: 1 }

.guida-nav {
  display: flex; flex-direction: column; gap: 2px; padding: 12px; overflow-y: auto;
  border-right: 1px solid var(--fc-line, rgba(137,190,153,.22)); background: rgba(0,0,0,.22);
}
.guida-nav button {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 11px; border: 0; border-radius: 10px; background: transparent; color: var(--text-muted, #A9C0B0);
  font: 600 13px/1.3 inherit;
}
.guida-nav button:hover { background: rgba(255,255,255,.06) }
.guida-nav button.on { background: rgba(82,224,141,.14); color: #EAF6EE }
.guida-nav em { display: block; margin-top: 2px; font: 500 10px/1.2 inherit; font-style: normal; color: var(--text-dim, #7C9686); text-transform: uppercase; letter-spacing: .06em }

.guida-doc { padding: clamp(16px, 2.5vw, 30px); overflow-y: auto; min-height: 0 }
.guida-doc h2 { font-size: clamp(20px, 2.2vw, 27px); line-height: 1.15 }
.guida-sub { margin: 6px 0 20px; color: var(--text-muted, #A9C0B0); font-size: 14px }
.guida-block { padding-top: 16px; margin-top: 16px; border-top: 1px solid rgba(137,190,153,.14) }
.guida-block:first-of-type { border-top: 0; margin-top: 0; padding-top: 0 }
.guida-block h3 { font-size: 15px; letter-spacing: .01em }
.guida-block p { margin: 8px 0 0; color: var(--text-muted, #A9C0B0); font-size: 14px; line-height: 1.6 }
.guida-block b { color: #EAF6EE }
.guida-block dl { margin: 12px 0 0; display: grid; grid-template-columns: minmax(120px, 210px) 1fr; gap: 7px 16px }
.guida-block dt { color: #EAF6EE; font-size: 13px; font-weight: 700 }
.guida-block dd { margin: 0; color: var(--text-muted, #A9C0B0); font-size: 13px; line-height: 1.55 }
.guida-warn {
  margin-top: 12px; padding: 11px 13px; border-radius: 11px; font-size: 13px; line-height: 1.55;
  color: #F4E3B4; background: rgba(224,179,65,.10); border: 1px solid rgba(224,179,65,.28);
}

.reg-side { padding: clamp(16px, 2vw, 24px); overflow-y: auto; border-right: 1px solid var(--fc-line, rgba(137,190,153,.22)); background: rgba(0,0,0,.22) }
.reg-side h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .09em; color: var(--pitch, #52E08D) }
.reg-side dl { margin: 14px 0 0 }
.reg-side dt { margin-top: 12px; color: #EAF6EE; font-size: 13px; font-weight: 700 }
.reg-side dd { margin: 3px 0 0; color: var(--text-muted, #A9C0B0); font-size: 12px; line-height: 1.5 }
.reg-form { padding: clamp(16px, 2vw, 26px); overflow-y: auto; min-height: 0 }
.reg-form textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  font: inherit; font-size: 14px;
}
.reg-consenso { display: flex; gap: 9px; align-items: flex-start; margin: 16px 0 4px; color: var(--text-muted, #A9C0B0); font-size: 12px; line-height: 1.5 }
.reg-consenso input { width: auto; min-height: 0; margin-top: 2px; flex: 0 0 auto }
.reg-fatto { padding: 22px 4px }
.reg-fatto h3 { font-size: 19px; color: var(--pitch, #52E08D) }
.reg-fatto p { margin: 9px 0 0; color: var(--text-muted, #A9C0B0); font-size: 14px; line-height: 1.6 }

.link-more {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--pitch, #52E08D); font: inherit; font-size: inherit; text-decoration: underline;
}
.login-pitch p { margin: 0 0 11px; color: var(--text-muted, #A9C0B0); font-size: 14px; line-height: 1.62 }
.login-pitch b { color: #EAF6EE }
.login-claim { padding-top: 4px }
.signup-teaser { margin: 0 0 18px; padding-left: 18px; color: var(--text-muted, #A9C0B0); font-size: 13px; line-height: 1.7 }
.signup-teaser b { color: #EAF6EE }

.app-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap }
.footer-legal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px }
.footer-legal a { color: var(--text-muted, #A9C0B0); text-decoration: none }
.footer-legal a:hover { color: var(--pitch, #52E08D); text-decoration: underline }
.footer-legal .sep { color: var(--text-dim, #7C9686) }

@media (max-width: 860px) {
  .guida-body, .reg-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr }
  .guida-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--fc-line, rgba(137,190,153,.22)) }
  .guida-nav button { width: auto; white-space: nowrap }
  .guida-nav em { display: none }
  .reg-side { border-right: 0; border-bottom: 1px solid var(--fc-line, rgba(137,190,153,.22)); max-height: 34vh }
  .guida-block dl { grid-template-columns: 1fr; gap: 2px }
  .guida-block dd { margin-bottom: 9px }
  .modal { max-height: 94vh }
}


/* ── Topbar sul telefono: due righe ───────────────────────────────────────────
   Sotto i 560px in una riga sola non ci stanno logo, selettore lega, Guida ed
   Esci: i due chip finivano oltre il bordo destro, tagliati a meta'. Il logo si
   prende la prima riga tutta per se', centrato; i comandi stanno sotto, dove
   c'e' spazio per leggerne le etichette.

   `--topbar-h` cresce di conseguenza: e' la stessa variabile che aggancia la
   tabbar, quindi le due cose restano allineate invece di sovrapporsi — era il
   difetto di prima, e va evitato di reintrodurlo da un'altra porta. */
@media (max-width: 760px) {
  /* Il logo ha una riga tutta per se', ed e' centrato: tanto vale che si veda. */
  :root { --topbar-logo-h:64px; }
  .top { row-gap:10px; column-gap:8px; }
  .top .logobadge { flex:1 0 100%; justify-content:center; }
  .top .sp { display:none; }
  /* `flex-basis:auto` sul selettore vuol dire "quanto e' lungo il nome della lega":
     abbastanza da spingere i due chip a una TERZA riga. Con una base piccola la riga
     si forma con tutti e tre, e poi il selettore si prende lo spazio che avanza. */
  .top .leaguesel { flex:1 1 110px; min-width:0; }
  .top .leaguesel select { max-width:none; width:100%; }
  .top .chip { flex:0 0 auto; }

  /* Qui si scioglie l'accoppiamento che ci ha gia' fatto male una volta: la tabbar
     era incollata a `--topbar-h`, un numero scritto a mano che appena la barra cambia
     altezza smette di corrispondere — misurata 181px contro 112 dichiarati, e scrollando
     le schede sarebbero finite sotto la barra. Sul telefono la barra scorre via e
     restano appese le schede, che sono quelle che servono mentre si legge: nessun
     numero da tenere allineato, e un centinaio di pixel restituiti alla pagina. */
  .top { position:static; min-height:0; }
  nav.tabs, .tabbar { top:0; }
}


/* ── Bottoni che non sono pulsanti ────────────────────────────────────────────
   `twiza-fantacalcio-v2.css` ha una regola generale — `button:not(.nav-item):not(.nav-tab)`
   — che rende ogni `<button>` una CTA verde piena. E' giusta come base per l'app, ma
   ha specificita' (0,2,1) e travolgeva tre cose che button lo sono solo tecnicamente:
   il selettore Link rapido / Password / Registrati (tutte e tre sembravano attive), il
   "Continua a leggere" del login e le voci di indice della guida.

   Non si tocca quella regola: qui si sale sopra la sua specificita'. Attenzione al conto:
   `:not(.nav-item):not(.nav-tab)` vale due classi, quindi il selettore generale e' (0,2,1)
   e due classi non bastano — ne servono tre. */

.login-v3 .auth-switch .auth-switch-btn {
  min-height:38px; padding:0 10px; color:var(--text-muted); font:700 13px/1 inherit;
  background:transparent; border:0; border-radius:999px; box-shadow:none;
}
.login-v3 .auth-switch .auth-switch-btn.is-active {
  color:#04120a; background:var(--pitch); box-shadow:0 7px 18px rgba(69,217,132,.16);
}
.login-v3 .auth-switch .auth-switch-btn:hover { transform:none; filter:none; }

.login-v3 .login-wordmark .link-more, .modal .reg-side .link-more,
.modal .reg-fatto .link-more, .login-v3 .login-help .link-more {
  min-height:0; padding:0; color:var(--pitch); font:inherit; text-decoration:underline;
  background:none; border:0; border-radius:0; box-shadow:none;
}
.login-v3 .login-wordmark .link-more:hover, .modal .reg-side .link-more:hover,
.modal .reg-fatto .link-more:hover, .login-v3 .login-help .link-more:hover { transform:none; filter:none; opacity:.8; }

.modal .guida-body .guida-nav button {
  min-height:0; padding:9px 11px; color:var(--text-muted); font:600 13px/1.3 inherit;
  background:transparent; border:0; border-radius:10px; box-shadow:none; text-align:left;
}
.modal .guida-body .guida-nav button:hover { background:rgba(255,255,255,.06); transform:none; filter:none; }
.modal .guida-body .guida-nav button.on { background:rgba(82,224,141,.14); color:#EAF6EE; }


/* ── Foto giocatore: rotonde ──────────────────────────────────────────────────
   La base in index.html le disegnava gia' tonde, ma due fogli piu' avanti le
   ritagliavano a scudo con un `clip-path` e le rendevano rettangolari (58x66).
   Un clip-path vince su qualunque border-radius, quindi va spento, non
   sovrascritto — e il riquadro va rimesso quadrato, o il cerchio esce ovale. */
.player-face, .plr .sh {
  clip-path: none;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  height: auto;
  overflow: hidden;
}
.player-face { width: 48px; }
.plr .sh { width: 58px; }
/* La foto e' inquadrata sul viso: senza `center top` il cerchio taglia la fronte. */
.player-face img, .plr .sh img { object-fit: cover; object-position: center top; border-radius: 50%; }
@media (max-width: 760px) { .player-face { width: 42px; } .plr .sh { width: 48px; } }
@media (max-width: 430px) { .player-face { width: 38px; } .plr .sh { width: 42px; } }

/* ── Landing language applied post-login ─────────────────────────────────────
   Logo alto anche nella shell applicativa; la misura dinamica in index.html
   mantiene la tabbar agganciata alla sua altezza reale. */
:root { --topbar-logo-h: 88px; --topbar-h: 112px; }
.top { min-height: var(--topbar-h); padding-block: 12px; }

/* I pulsanti riprendono il taglio netto della landing; superfici e box restano
   leggermente smussati ma non diventano pillole decorative. */
button.btn, .chip, .swapbtn, .tabbar button, .tabs button, .nav-tab { border-radius: 2px; }
.card, .rep, .h2h, .agentbox, .planrole, .credits, .stadium, .modal { border-radius: 8px; }

/* Tutti i volti mantengono una riserva di spazio identica: righe del listone,
   target e formazione restano quindi allineati anche quando l'immagine carica. */
.player-row, .tgt { align-items: center; }
.player-row > .player-face, .tgt > .player-face { margin-right: 8px; vertical-align: middle; }
.player-face, .tgt .mini-face, .plr .sh { flex: 0 0 auto; aspect-ratio: 1 / 1; }
.player-face img, .plr .sh img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* Controllo condiviso di ritorno all'inizio, presente in ogni scheda dell'app. */
.app-to-top { position: fixed; right: 18px; bottom: 18px; z-index: 70; width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--pitch, #52E08D);
  border-radius: 2px; background: rgba(7,16,9,.92); color: var(--pitch, #52E08D); cursor: pointer;
  font: 700 20px/1 var(--fm, inherit); box-shadow: 0 10px 24px rgba(0,0,0,.32); opacity: 0;
  transform: translateY(10px); pointer-events: none; transition: opacity .16s ease, transform .16s ease; }
.app-to-top.visibile { opacity: 1; transform: none; pointer-events: auto; }
.app-to-top:hover { color: #06120C; background: var(--pitch, #52E08D); }
.guide-to-top { position: sticky; left: calc(100% - 42px); bottom: 2px; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--pitch, #52E08D);
  border-radius: 2px; background: rgba(7,16,9,.92); color: var(--pitch, #52E08D); cursor: pointer;
  font: 700 18px/1 var(--fm, inherit); box-shadow: 0 8px 18px rgba(0,0,0,.3); }
.guide-to-top:hover { color: #06120C; background: var(--pitch, #52E08D); }

@media (max-width: 760px) {
  :root { --topbar-logo-h: 64px; }
  .top { padding-block: 8px; }
  .app-to-top { right: 12px; bottom: 12px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .app-to-top { transition: none; } }

/* Il lockup del login è contenuto nello stesso pannello delle velature stadium:
   assegniamo livelli espliciti perché gli pseudo-elementi decorativi non possano
   attenuare o coprire il logo su alcun motore di rendering. */
.login .stadium::before, .login .stadium::after { z-index: 0; }
.login-v3 .login-wordmark { z-index: 3; }

/* Alcuni compositori del pannello cinematico degradano l'immagine inline nel
   layer del login. Il lockup resta un asset proprietario, reso come superficie
   CSS indipendente sopra le velature, con una dimensione prevedibile. */
.login-v3 .login-wordmark > img { display: none; }
.login-v3 .login-wordmark::before {
  content: "";
  display: block;
  width: min(100%, 320px);
  height: 180px;
  margin: 0 0 22px;
  background: url("/assets/brand/twiza-fantacalcio-master-ui.png") center / contain no-repeat;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.38));
}
@media (max-width: 760px) {
  .login-v3 .login-wordmark::before { width: min(78%, 280px); height: 158px; margin: 0 auto 20px; }
}

/* ===========================================================================
   APP SHELL — grammatica pedissequa della landing
   La landing usa Titillium per il testo, linee sottili, taglio a 2px e controlli
   a registro. La shell eredita la grammatica senza toccare i fondali di scenario,
   la palette, i dati o le animazioni Aurora già presenti sopra.
   =========================================================================== */
:root {
  --app-grid-line: rgba(30, 61, 42, .92);
  --app-grid-line-strong: rgba(44, 91, 62, .92);
  --app-square: 2px;
  --app-box: 8px;
}

/* Titillium è l'unica famiglia tipografica della superficie operativa. */
#shell, #shell :where(button, input, select, textarea, table, th, td, code, .mono, .tnum, .kpi-value, .credits, .badge, .wm, .msg, .faint) {
  font-family: "Titillium Web", Arial, sans-serif !important;
}
#shell :where(h1, h2, h3, h4) {
  font-family: "Titillium Web", Arial, sans-serif !important;
  font-weight: 700;
  letter-spacing: -.012em;
}

/* Barra e tabbar: il foglio d'asta della landing, non una serie di pillole. */
#shell .top {
  gap: 16px;
  border-bottom: 1px solid var(--app-grid-line-strong);
  box-shadow: none;
}
#shell .top::after { height: 1px; background: var(--app-grid-line-strong); }
#shell .leaguesel,
#shell .chip {
  border-radius: var(--app-square);
  background: rgba(6, 18, 12, .56);
  border-color: var(--app-grid-line-strong);
  font-size: 13px;
  font-weight: 600;
}
#shell nav.tabs,
#shell .tabbar {
  gap: 0;
  padding-block: 0;
  border-bottom: 1px solid var(--app-grid-line);
  background: rgba(6, 18, 12, .54);
}
#shell nav.tabs button,
#shell .tabbar button,
#shell .tabs button {
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-right: 1px solid var(--app-grid-line);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .035em;
  text-transform: uppercase;
  box-shadow: none;
}
#shell nav.tabs button:first-child,
#shell .tabbar button:first-child,
#shell .tabs button:first-child { border-left: 1px solid var(--app-grid-line); }
#shell nav.tabs button.on,
#shell .tabbar button.on,
#shell .tabs button.on {
  color: var(--pitch);
  background: rgba(52, 215, 126, .10);
  box-shadow: inset 0 -2px 0 var(--pitch);
}
#shell nav.tabs button:hover,
#shell .tabbar button:hover,
#shell .tabs button:hover { color: var(--text); background: rgba(255,255,255,.035); transform:none; filter:none; }

/* Contenuto: stessa cadenza della colonna landing, con divisi netti e box sobri. */
#main.wrap { max-width: 1180px; padding-inline: clamp(18px, 4vw, 40px); }
#shell .card,
#shell .rep,
#shell .h2h,
#shell .agentbox,
#shell .planrole,
#shell .credits,
#shell .modal {
  border-radius: var(--app-box);
  border-color: var(--app-grid-line);
}
#shell .card {
  box-shadow: none;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
#shell .card > h2,
#shell .card > h3 { text-transform: uppercase; }
#shell .card > h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  margin-top: 10px;
  background: var(--pitch);
}
#shell :where(button.btn, .chip, .swapbtn, .nav-tab, .seg button, .chipsel, .bmove button, .brm) { border-radius: var(--app-square); }
#shell :where(button.btn, .chip, .swapbtn, .nav-tab, .seg button, .chipsel) {
  font-weight: 600;
  letter-spacing: .035em;
}

/* To-top: un controllo di navigazione dichiarato, non una freccia appiccicata
   al bordo. La guida resta ancorata all'area che scorre e non usa più `left`. */
.app-to-top,
.guide-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 46px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--pitch, #52E08D);
  border-radius: var(--app-square);
  background: rgba(6, 18, 12, .94);
  color: var(--pitch, #52E08D);
  font: 600 16px/1 "Titillium Web", Arial, sans-serif;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.app-to-top { right: 18px; bottom: 18px; }
.guide-to-top {
  position: sticky;
  left: auto;
  right: auto;
  bottom: 14px;
  width: max-content;
  margin: 24px 0 4px auto;
  z-index: 2;
}
.app-to-top .to-top-label,
.guide-to-top .to-top-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.app-to-top:hover,
.guide-to-top:hover { color: var(--campo, #06120C); background: var(--pitch, #52E08D); transform: none; filter: none; }

@media (max-width: 760px) {
  #shell .top { gap: 10px; }
  #shell nav.tabs button,
  #shell .tabbar button,
  #shell .tabs button { min-height: 44px; padding-inline: 12px; font-size: 12px; }
  #main.wrap { padding-inline: 14px; }
  .app-to-top { right: 12px; bottom: 12px; }
  .guide-to-top { bottom: 10px; margin-top: 18px; }
}

/* Correzione di priorità: il selettore CTA generico dell'app intercettava anche
   il to-top della guida. Qui il controllo resta secondario, a registro e sul
   bordo destro del documento, come nella landing. */
.guida-doc button.guide-to-top {
  position: sticky;
  left: auto;
  right: auto;
  bottom: 14px;
  display: flex;
  width: max-content;
  min-width: 46px;
  height: 42px;
  margin: 24px 0 4px auto !important;
  padding: 0 12px;
  gap: 8px;
  border: 1px solid var(--pitch, #52E08D) !important;
  border-radius: var(--app-square) !important;
  background: rgba(6, 18, 12, .94) !important;
  background-image: none !important;
  color: var(--pitch, #52E08D) !important;
  font: 600 16px/1 "Titillium Web", Arial, sans-serif !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;
  transform: none !important;
  filter: none !important;
}
.guida-doc button.guide-to-top:hover {
  background: var(--pitch, #52E08D) !important;
  color: var(--campo, #06120C) !important;
}
#shell button.app-to-top {
  border-radius: var(--app-square) !important;
  background: rgba(6, 18, 12, .94) !important;
  background-image: none !important;
  color: var(--pitch, #52E08D) !important;
  font: 600 16px/1 "Titillium Web", Arial, sans-serif !important;
}
#shell button.app-to-top:hover { background: var(--pitch, #52E08D) !important; color: var(--campo, #06120C) !important; }

/* ===========================================================================
   SQUARE LANDING SYSTEM — applicazione pedissequa alla UI autenticata
   Solo geometria, gerarchia e Titillium: fondali, gradienti e animazioni Aurora
   restano deliberatamente intatti.
   =========================================================================== */
:root { --fc-r-xs: 2px; --fc-r-sm: 2px; --fc-r-md: 2px; --fc-r-lg: 2px; --radius-sm: 2px; --radius-md: 2px; --radius-lg: 2px; }

/* La famiglia della UI, compresi pannelli di login e modal, è una sola. */
body, body :where(button, input, select, textarea, table, th, td, code, .mono, .tnum, .wm, .msg, .faint, .badge, .chip, .nav-tab) {
  font-family: "Titillium Web", Arial, sans-serif !important;
}

/* Superfici: linee e spigoli della landing. I giocatori e i palloni restano
   circolari perché sono elementi di campo, non contenitori di interfaccia. */
#root :where(.card, .rep, .h2h, .agentbox, .planrole, .credits, .bcol, .bslot, .seg, .modal, .stadium, .login-command-card, .login .card, .login .stadium, .auth-switch, .leaguesel, .chip, input, select, textarea, button.btn, .swapbtn, .modal .guida-warn),
#shell :where(.card, .rep, .h2h, .agentbox, .planrole, .credits, .bcol, .bslot, .seg, .leaguesel, .chip, input, select, textarea, button.btn, .swapbtn) {
  border-radius: 2px !important;
}
#root :where(.player-face, .plr .sh, .pitch .ln .c),
#shell :where(.player-face, .plr .sh, .pitch .ln .c) { border-radius: 50% !important; }

/* Login: due pannelli netti e controlli a registro, senza pillole o vetro morbido. */
.login.login-v3,
.login.login-v3 .stadium,
.login.login-v3 .login-command-card { border-radius: 2px !important; }
.login-v3 .auth-switch { padding: 0; border-radius: 2px !important; }
.login-v3 .auth-switch .auth-switch-btn,
.login-v3 .auth-switch .auth-switch-btn.is-active { border-radius: 0 !important; box-shadow: none !important; }
.login-command-card .eyebrow,
.login-v3 .login-wordmark .login-pitch p { font-family: "Titillium Web", Arial, sans-serif !important; }

/* Shell operativa: leggibile come un foglio d'asta, senza capsule decorative. */
#shell .top,
#shell nav.tabs,
#shell .tabbar,
#shell .modal > header { border-radius: 0 !important; }
#shell :where(nav.tabs button, .tabbar button, .tabs button, .nav-tab, .seg button, .chipsel, .bmove button) { border-radius: 0 !important; }
/* Stessa regola per i controlli delle preferenze d'asta: i chip dei club, i chip dei
   giocatori modello e le targhette che dicono perche' un giocatore e' in lista. Stanno
   qui e non nel loro stile inline perche' il raggio lo decide il sistema, non il pannello:
   se domani lo shell torna arrotondato, questi lo seguono invece di restare indietro. */
#shell :where(.clubchip, .modelchip, .motivo) { border-radius: 0 !important; }
#shell .card, #root .modal { box-shadow: none !important; }
#shell .card { border-color: var(--app-grid-line) !important; }

/* To-top: sempre raggiungibile. Nell'app è fisso in basso a destra; nella guida
   vive nella header del modal e quindi resta visibile in ogni punto del testo. */
#shell button.app-to-top {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 120 !important;
  border-radius: 2px !important;
  background: rgba(6, 18, 12, .94) !important;
  background-image: none !important;
  color: var(--pitch, #52E08D) !important;
}
.modal > header button.guide-to-top {
  position: static !important;
  display: inline-flex !important;
  width: auto !important;
  min-width: 46px;
  height: 38px;
  margin: 0 !important;
  padding: 0 11px;
  gap: 7px;
  border: 1px solid var(--pitch, #52E08D) !important;
  border-radius: 2px !important;
  background: rgba(6, 18, 12, .94) !important;
  background-image: none !important;
  color: var(--pitch, #52E08D) !important;
  font: 600 15px/1 "Titillium Web", Arial, sans-serif !important;
  box-shadow: none !important;
}
.modal > header button.guide-to-top:hover,
#shell button.app-to-top:hover { background: var(--pitch, #52E08D) !important; color: var(--campo, #06120C) !important; }

@media (max-width: 760px) {
  #shell button.app-to-top { right: 12px !important; bottom: 12px !important; }
  .modal > header button.guide-to-top { min-width: 42px; height: 36px; padding-inline: 9px; }
}

/* Il markup della SPA monta direttamente dentro #root (non esiste #shell): gli
   override operativi devono quindi agganciarsi al contenitore reale. */
#root .top,
#root nav.tabs,
#root .tabbar,
#root .modal > header { border-radius: 0 !important; }
#root .top {
  gap: 16px;
  border-bottom: 1px solid var(--app-grid-line-strong);
  box-shadow: none;
}
#root .top::after { height: 1px; background: var(--app-grid-line-strong); }
#root .leaguesel,
#root .chip { border-radius: 2px !important; background: rgba(6,18,12,.56); border-color: var(--app-grid-line-strong); }
#root nav.tabs,
#root .tabbar { gap:0; padding-block:0; border-bottom:1px solid var(--app-grid-line); background:rgba(6,18,12,.54); }
#root :where(nav.tabs button, .tabbar button, .tabs button, .nav-tab) {
  min-height:48px; padding:0 16px; border:0; border-right:1px solid var(--app-grid-line);
  border-radius:0 !important; background:transparent; color:var(--muted); font-size:13px;
  font-weight:600; letter-spacing:.035em; text-transform:uppercase; box-shadow:none;
}
#root :where(nav.tabs button, .tabbar button, .tabs button, .nav-tab).on {
  color:var(--pitch); background:rgba(52,215,126,.10); box-shadow:inset 0 -2px 0 var(--pitch);
}
#root button.app-to-top {
  opacity:1 !important; transform:none !important; pointer-events:auto !important;
  position:fixed !important; right:18px !important; bottom:18px !important; z-index:120 !important;
  border-radius:2px !important; background:rgba(6,18,12,.94) !important;
  background-image:none !important; color:var(--pitch,#52E08D) !important;
}
#root button.app-to-top:hover { background:var(--pitch,#52E08D) !important; color:var(--campo,#06120C) !important; }
@media (max-width:760px) { #root button.app-to-top { right:12px !important; bottom:12px !important; } }

/* ===========================================================================
   TOTAL SQUARE PASS — nessuna pillola nella UI operativa
   Volti, filtri e badge diventano rettangoli netti. Restano esclusi soltanto
   luci e decorazioni di sfondo, che non sono componenti di interfaccia.
   =========================================================================== */
#root :where(
  .player-face, .player-face.mini-face, .player-face img, .plr .sh, .plr .sh img,
  .chipsel, #appTabs button, .seg, .seg button, .chip, .leaguesel,
  .pill, .alts .a, .capbadge, .difc, .rb, .esito,
  .bar, .bar > i, .rep, .planrole, .tgt, .credits,
  .filter, .filters, .filter-chip, select, input, textarea, button.btn, .swapbtn
) {
  border-radius: 0 !important;
}
/* Le foto restano leggibili come tessere, non come avatar rotondi. */
#root .player-face,
#root .player-face.mini-face,
#root .plr .sh {
  border-radius: 0 !important;
  clip-path: inset(0) !important;
}
#root .player-face img,
#root .plr .sh img { border-radius: 0 !important; }

/* ---------------------------------------------------------------------------
   MIRINO — la cornice delle tessere giocatore.
   Quadrate sì, ma non ritagli anonimi: quattro squadre d'angolo come il mirino
   di una telecamera a bordo campo, più una riga di luce sotto. Tutto disegnato
   con gradienti su ::before e ::after, quindi zero markup nuovo e zero immagini:
   funziona ovunque compaia una faccia (proposta, rosa, formazione, lavagna).
   Il raggio resta 0: la cornice sta DENTRO il quadrato, non lo arrotonda.
   --------------------------------------------------------------------------- */
#root :where(.player-face, .plr .sh) {
  position: relative;
  isolation: isolate;                      /* la cornice non sbava sui gradienti sotto */
  box-shadow:
    inset 0 0 0 1px rgba(176, 220, 190, .22),
    inset 0 -2px 0 0 rgba(69, 217, 132, .55);
  transition: box-shadow .18s ease, transform .18s ease;
}
/* Le quattro squadre d'angolo. `--mir` è la lunghezza del braccio: sulle tessere
   piccole si accorcia, altrimenti i bracci si toccano e diventa un bordo pieno. */
#root :where(.player-face, .plr .sh)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  --mir: 9px;
  --sp: 2px;
  --col: rgba(69, 217, 132, .95);
  background:
    linear-gradient(var(--col), var(--col)) 0 0    / var(--mir) var(--sp) no-repeat,
    linear-gradient(var(--col), var(--col)) 0 0    / var(--sp) var(--mir) no-repeat,
    linear-gradient(var(--col), var(--col)) 100% 0 / var(--mir) var(--sp) no-repeat,
    linear-gradient(var(--col), var(--col)) 100% 0 / var(--sp) var(--mir) no-repeat,
    linear-gradient(var(--col), var(--col)) 0 100% / var(--mir) var(--sp) no-repeat,
    linear-gradient(var(--col), var(--col)) 0 100% / var(--sp) var(--mir) no-repeat,
    linear-gradient(var(--col), var(--col)) 100% 100% / var(--mir) var(--sp) no-repeat,
    linear-gradient(var(--col), var(--col)) 100% 100% / var(--sp) var(--mir) no-repeat;
}
#root .player-face.mini-face::after { --mir: 7px; --sp: 1px; }
@media (max-width: 430px) { #root :where(.player-face, .plr .sh)::after { --mir: 6px; --sp: 1px; } }

/* Sfumatura in basso: stacca la faccia dal nome che le sta accanto senza mettere
   un bordo, che in una colonna di venti tessere diventerebbe rumore. */
#root :where(.player-face, .plr .sh)::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(2, 8, 5, .72), transparent);
}
/* Al passaggio: il mirino si accende e la tessera sale di un pelo. Chi non vuole
   animazioni non le ha. */
@media (hover: hover) {
  #root :where(.tgt, .player-row, .plr, tr):hover :where(.player-face, .plr .sh) {
    box-shadow:
      inset 0 0 0 1px rgba(69, 217, 132, .45),
      inset 0 -2px 0 0 rgba(69, 217, 132, .95),
      0 0 0 1px rgba(69, 217, 132, .35),
      0 6px 18px rgba(31, 138, 84, .28);
    transform: translateY(-1px);
  }
}
@media (prefers-reduced-motion: reduce) {
  #root :where(.player-face, .plr .sh) { transition: none; }
  #root :where(.tgt, .player-row, .plr, tr):hover :where(.player-face, .plr .sh) { transform: none; }
}
/* I portieri hanno il loro colore anche nel mirino: all'asta il reparto si
   riconosce prima di leggere il nome. Anche al passaggio, altrimenti restavano
   con le squadre oro dentro un alone verde. */
#root .player-face.gk::after { --col: rgba(226, 179, 74, .95); }
#root .player-face.gk { box-shadow: inset 0 0 0 1px rgba(226, 179, 74, .25), inset 0 -2px 0 0 rgba(226, 179, 74, .6); }
@media (hover: hover) {
  #root :where(.tgt, .player-row, .plr, tr):hover .player-face.gk {
    box-shadow:
      inset 0 0 0 1px rgba(226, 179, 74, .45),
      inset 0 -2px 0 0 rgba(226, 179, 74, .95),
      0 0 0 1px rgba(226, 179, 74, .35),
      0 6px 18px rgba(150, 110, 30, .3);
  }
}
/* I filtri vengono da markup dinamico con raggio inline 999px: questo selettore
   ha priorità sufficiente per trasformarli in interruttori a registro. */
#root #appTabs button.chipsel,
#root .seg button,
#root .chipsel {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Footer mobile: contenuto a registro sul margine sinistro; il controllo ↑ SU
   resta fixed e non partecipa alla geometria del footer. */
@media (max-width: 620px) {
  #root .app-footer {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left;
  }
  #root .footer-legal { justify-content: flex-start; text-align: left; }
}

/* Marchio "fuori listone".
   Va letto in due secondi mentre si batte l'asta, quindi e' un'etichetta a registro
   e non un colore soltanto: chi non distingue bene i colori deve comunque vederla.
   Quadrata come tutto il resto del sistema — la regola generale sui raggi vive piu'
   in alto, qui si dichiara comunque perche' il markup e' dinamico. */
#root .fuorilistone,
#shell .fuorilistone {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid var(--crit, #ff765d);
  border-radius: 0 !important;
  color: var(--crit, #ff765d);
  background: transparent;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

/* ── Intestazioni di tabella: ancorate alla TABELLA, non al viewport ──────────
   I due fogli base dichiarano `th { position: sticky; top: 116px/126px }`, cioe'
   un'ancora al viewport pensata per stare sotto le due barre fisse. Ma la pagina
   scorre nel suo insieme e le tabelle stanno dentro le card: appena la card
   supera quell'altezza le celle dell'intestazione scendono per conto loro,
   lasciano vuota la riga in cui stavano e restano a mezz'aria sopra i giocatori.
   Con lo sfondo al 96% i nomi si vedono pure in trasparenza: la riga sotto
   sembra un fantasma.

   Il rimedio e' dare all'intestazione un contenitore che scorre davvero, e
   ancorarla al bordo di QUELLO. Cosi' resta visibile scorrendo un listone lungo
   — che era lo scopo — senza mai staccarsi dalla propria tabella. */
#root .table-scroll,
#root #playersTbl {
  overflow: auto;
  max-height: min(70vh, 720px);
  overscroll-behavior: contain;
}
#root .table-scroll th,
#root #playersTbl th {
  position: sticky;
  top: 0;
  /* Pieno, non traslucido: sotto ci passano le righe. */
  background: var(--panel2, #16271d);
  box-shadow: 0 1px 0 var(--line, #254333);
}

/* Fascia di capitano e vice.
   Erano due `<div>` con DUE attributi `style` ciascuno: il browser scarta il secondo, e
   la V usciva identica alla C. Le due fasce ora si distinguono da una classe, non da uno
   stile inline che non arrivava mai. */
#root .capbadge.cap-c { background: var(--gold, #f1c65b); color: #0A120E; }
#root .capbadge.cap-v { background: var(--muted, #adc4b4); color: #0A120E; }