/*
 * Nations Manager — Design System v2
 * Tema: campo verde vivace + oro
 * Font: Nunito (Google Fonts)
 *
 * Uso: <link rel="stylesheet" href="_style.css">
 * Poi importa Google Fonts nell'<head>:
 * <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
 */

/* Animazioni disattivate solo per chi lo richiede a livello di sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

html {
  overflow-y: auto;
  scrollbar-width: none;
  /* stesso verde notte in cui finisce lo sfondo: evita il lampo
     bianco prima che il CSS dipinga, e riempie l'area di
     overscroll su mobile. */
  background-color: #05170b;
}

html::-webkit-scrollbar {
  display: none !important;
}

body {
  scrollbar-width: none;
  overflow-anchor: none;
}

body::-webkit-scrollbar {
  display: none !important;
}

:root {
  /* ── Colori principali — FONTE UNICA per tutte le pagine ──
     Un solo file definisce i verdi: prima ogni pagina (e la sidebar)
     aveva la sua variante e il campo cambiava tinta da schermata a
     schermata. `--campo*` sono gli alias usati dalla skin "stadio in
     notturna"; puntano agli stessi identici colori di `--verde*`. */
  --verde:       #258d40;
  --verde-scuro: #175a2b;
  --verde-mid:   #237839;
  /* alias skin notturna (stessi colori, nomi usati da sidebar/index) */
  --campo:       #258d40;
  --campo-scuro: #237839;
  --campo-notte: #175a2b;
  --neon:        #2ee06b;
  --glass:       rgba(6, 32, 15, .30);
  --glass-hi:    rgba(6, 32, 15, .42);
  --line:        rgba(255,255,255,.18);
  --font-disp:   'Kanit', 'Nunito', sans-serif;
  --oro:         #f0c040;
  --oro-hover:   #f8d460;
  --oro-text:    #c89020;

  /* ── Testo ── */
  --white:       #ffffff;
  --off-white:   rgba(255,255,255,.92);
  --dim:         rgba(255,255,255,.72);

  /* ── Card / input ── */
  --border-card: rgba(255,255,255,.22);
  --card-bg:     rgba(255,255,255,.13);
  --input-bg:    rgba(255,255,255,.18);

  /* ── Feedback ── */
  --err:         #fca5a5;
  --ok:          #bbf7d0;

  /* ── Misc ── */
  --radius:      12px;
  --radius-lg:   20px;
  --shadow-card: 0 12px 48px rgba(0,0,0,.25), 0 2px 0 rgba(255,255,255,.12) inset;

  /* ── Larghezze di pagina — SOLO DUE ──
     Prima ogni schermata ne aveva una sua (1100, 1180, 1520, 1600, 1720) e
     passando da una voce di menu all'altra il contenuto saltava di lato.
     `--w-app`  → schermate operative: tabelle, griglie, campo, listoni.
     `--w-read` → pagine da leggere: testo, form, schede singole.
     Il vincolo sta SEMPRE sul contenitore di pagina, mai su `.section-card`:
     un pannello riutilizzabile non deve decidere quanto è larga la pagina. */
  --w-app:       1440px;
  --w-read:       900px;
  --pad-page:    1.5rem;
}

/* Contenitori di pagina. Usare uno dei due, non larghezze ad hoc. */
.page-app,
.page-read {
  width: 100%;
  margin-inline: auto;
  /* Spazio per il pulsante flottante in basso a destra, che prima si
     sovrapponeva all'ultima card di ogni pagina. */
  padding: 1.5rem var(--pad-page) 6rem;
}
.page-app  { max-width: var(--w-app); }
.page-read { max-width: var(--w-read); }

/* ═══════════════════════════════════════
   RESET + BASE
═══════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: #0b1f12; }
/* Sigle con tooltip (title): il browser le sottolinea a puntini, qui no; il suggerimento resta al passaggio del mouse. */
abbr[title] { text-decoration: none; }
/* Telefono in orizzontale: con viewport-fit=cover la pagina riempie anche l'area della tacca;
   il margine tiene il contenuto fuori dalla tacca (env vale 0 dove non c'è). */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

body {
  font-family: 'Nunito', sans-serif;
  min-height: 100vh;
  color: var(--white);

  /* Lo sfondo non sta più qui: lo dipinge `body::before`, ancorato al
     viewport. Il body resta trasparente perché quel layer si veda. Le
     pagine che vogliono uno sfondo proprio (login.php con il video)
     lo coprono riassegnando
     `background` al body: uno pseudo-elemento a z-index negativo sta
     dietro allo sfondo del genitore, quindi basta un colore opaco. */
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════
   SFONDO CANONICO "STADIO IN NOTTURNA" v3 — identico su OGNI pagina

   Prima il gradiente stava sul body con `background-attachment: fixed`.
   Due difetti: su iOS Safari quell'attachment viene ignorato e lo
   scroll fa jank; e il gradiente si stirava sull'altezza del
   documento, così formazione.php (3200 righe) arrivava al verde notte
   mentre indisponibili.php (330 righe) restava sul verde acceso — il
   campo cambiava tinta da schermata a schermata.
   Qui è uno pseudo-elemento `position: fixed`: misura sempre il
   viewport, quindi la tinta è la stessa dappertutto.

   Layer, dal davanti al fondo:
     1. grana fine — spezza il banding del gradiente sui pannelli a 8bit
     2. vignettatura — spegne gli angoli e porta l'occhio al centro
     3. alone oro a destra — richiamo del colore accento
     4. due coni dei fari — la luce dello stadio in notturna
     5. righe di taglio dell'erba, appena percettibili: sostituiscono la
        vecchia trama esagonale (riferimento sci-fi, non calcio)
     6. bagliore verde campo dall'alto — tiene viva l'identità verde
        senza schiarire tutta la pagina come faceva la v2
     7. il campo che scende nel verde notte
═══════════════════════════════════════════════════════════════════ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E") repeat,
    radial-gradient(ellipse 105% 88% at 50% 38%, transparent 42%, rgba(2,9,4,.62) 100%),
    radial-gradient(ellipse 52% 38% at 94% -8%,  rgba(240,192,64,.10) 0%, transparent 62%),
    radial-gradient(ellipse 34% 62% at 17% -14%, rgba(255,255,255,.11) 0%, transparent 64%),
    radial-gradient(ellipse 34% 62% at 79% -14%, rgba(255,255,255,.075) 0%, transparent 64%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 72px, transparent 72px 144px),
    radial-gradient(ellipse 130% 52% at 50% -18%, rgba(46,224,107,.20) 0%, transparent 70%),
    linear-gradient(180deg, #123f21 0%, #0b2a15 46%, #05170b 100%);
}

/* ═══════════════════════════════════════
   NAVBAR
═══════════════════════════════════════ */
nav {
  display: flex; align-items: center; gap: 1.6rem;
  padding: .85rem 2.5rem;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.1);
  position: sticky; top: 0; z-index: 100;
}

.nav-logo {
  font-size: 1.5rem; font-weight: 900; letter-spacing: .02em;
  color: var(--oro); text-decoration: none;
  display: flex; align-items: center; gap: .4rem;
  margin-right: .4rem;
}

.nav-sep { width: 1px; height: 18px; background: rgba(255,255,255,.15); }

.nav-link {
  color: var(--off-white); text-decoration: none;
  font-size: .88rem; font-weight: 700; letter-spacing: .02em;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-link:hover  { color: var(--oro); }
.nav-link.active { color: var(--oro); border-bottom-color: var(--oro); }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: .9rem; }

.nav-accedi {
  color: var(--off-white); text-decoration: none;
  font-size: .88rem; font-weight: 700; letter-spacing: .02em;
  transition: color .2s;
}
.nav-accedi:hover { color: var(--oro); }

.nav-cta {
  background: var(--oro); color: #1a1a1a;
  font-size: .88rem; font-weight: 900; letter-spacing: .03em;
  padding: .42rem 1.1rem; border-radius: 8px; text-decoration: none;
  transition: background .18s, transform .18s;
}
.nav-cta:hover { background: var(--oro-hover); transform: translateY(-1px); }

.ps-badge {
  background: rgba(240,192,64,.15);
  border: 1px solid rgba(240,192,64,.35);
  border-radius: 20px; padding: .28rem .9rem;
  font-size: .9rem; font-weight: 900; letter-spacing: .04em;
  color: var(--oro);
}
.ps-badge span {
  color: var(--dim); font-size: .7rem; font-weight: 700;
  margin-right: .3rem; text-transform: uppercase;
}

/* ═══════════════════════════════════════
   WORLD SWITCHER
═══════════════════════════════════════ */

/* ── Trigger: voce di menu nello stile nav-link ── */
.nav-world {
  background: none; border: none; padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  color: var(--off-white); cursor: pointer;
  font-family: 'Nunito', sans-serif; font-size: .88rem; font-weight: 700;
  letter-spacing: .02em; line-height: 1;
  display: flex; align-items: center; gap: .25rem;
  transition: color .2s, border-color .2s;
}
.nav-world:hover,
.nav-world.ws-active { color: var(--oro); border-bottom-color: var(--oro); }
.nav-world-arrow {
  font-size: .65rem; opacity: .7; transition: transform .2s;
}
.nav-world.ws-active .nav-world-arrow { transform: rotate(180deg); }

/* ── Overlay ── */
.ws-overlay {
  display: none; position: fixed; inset: 0; z-index: 998;
  background: transparent;
}
.ws-overlay.open { display: block; }

/* ── Dropdown ── */
.ws-dropdown {
  display: none;
  position: fixed;
  z-index: 999;
  min-width: 260px;
  background: #0d2412;
  border: 1px solid rgba(200,168,75,.25);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.4);
  opacity: 0;
  transform: translateY(-8px) scale(.97);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.ws-dropdown.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ── Titolo ── */
.wsd-title {
  font-size: .65rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(200,168,75,.7);
  padding: .9rem 1rem .5rem;
  border-bottom: 1px solid rgba(200,168,75,.15);
}

/* ── Riga ── */
.wsd-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .15s;
  cursor: pointer;
}
.wsd-row:last-child { border-bottom: none; }
.wsd-row:hover { background: rgba(255,255,255,.05); }

/* ── Dot indicatore ── */
.wsd-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.35);
}
.wsd-current .wsd-dot  { background: var(--oro); box-shadow: 0 0 6px rgba(240,192,64,.6); }
.wsd-join .wsd-dot     { background: #4ade80;    box-shadow: 0 0 6px rgba(74,222,128,.5); }

/* ── Info ── */
.wsd-info { flex: 1; min-width: 0; }
.wsd-nome { display: block; font-size: .9rem; font-weight: 800; color: var(--white); }
.wsd-sub  { display: block; font-size: .72rem; color: rgba(255,255,255,.5); margin-top: 1px; }
.wsd-current .wsd-nome { color: var(--oro); }
.wsd-join    .wsd-nome { color: #4ade80; }

/* ── Badge "Corrente" ── */
.wsd-badge {
  font-size: .62rem; font-weight: 800; letter-spacing: .05em;
  background: rgba(240,192,64,.18); color: var(--oro);
  border: 1px solid rgba(240,192,64,.35);
  border-radius: 6px; padding: .15rem .45rem;
  white-space: nowrap; flex-shrink: 0;
}

/* ── Bottoni azione ── */
.wsd-btn {
  font-size: .75rem; font-weight: 800;
  border-radius: 8px; padding: .28rem .75rem;
  cursor: pointer; border: 1px solid; white-space: nowrap;
  flex-shrink: 0; transition: background .15s;
  font-family: 'Nunito', sans-serif;
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.3);
  color: var(--white);
}
.wsd-btn:hover { background: rgba(255,255,255,.22); }
.wsd-btn-join {
  background: rgba(74,222,128,.12);
  border-color: rgba(74,222,128,.4);
  color: #4ade80;
}
.wsd-btn-join:hover { background: rgba(74,222,128,.24); }

/* ── Empty ── */
.wsd-empty {
  padding: 1rem; font-size: .82rem; color: rgba(255,255,255,.4);
  text-align: center;
}

/* ═══════════════════════════════════════
   LAYOUT WRAPPER
═══════════════════════════════════════ */
/* Wrapper storico. Le pagine nuove usano `.page-app` / `.page-read`.
   Il fondo a 6.5rem lascia libera l'area del pulsante flottante (60px di
   diametro a 36px dal bordo), che prima si sovrapponeva all'ultima card. */
.wrapper {
  max-width: var(--w-app);
  margin: 0 auto;
  padding: 2.5rem var(--pad-page) 6.5rem;
}
/* Le pagine da leggere (scheda arbitro, indisponibili) usano la misura
   stretta: righe di testo da ~90 caratteri non si leggono. */
.wrapper.is-read { max-width: var(--w-read); }

/* ═══════════════════════════════════════
   TITOLI SEZIONE
═══════════════════════════════════════ */
.section-title {
  font-size: 1rem; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--oro);
  margin: 2.5rem 0 1rem;
  display: flex; align-items: center; gap: .8rem;
}
.section-title::before {
  content: ''; width: 4px; height: 1.05em; border-radius: 2px;
  background: var(--oro); box-shadow: 0 0 8px rgba(240,192,64,.4);
  flex-shrink: 0;
}
.section-title::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(255,255,255,.15);
}

/* ═══════════════════════════════════════
   CARD GENERICA
═══════════════════════════════════════ */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-card);
}

/* ═══════════════════════════════════════
   BOTTONI
═══════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .65rem 1.6rem; border-radius: var(--radius);
  font-family: 'Nunito', sans-serif; font-size: .95rem; font-weight: 900;
  cursor: pointer; border: none; text-decoration: none;
  transition: all .18s ease;
}

.btn-gold {
  background: var(--oro); color: #1a1a1a;
  box-shadow: 0 4px 18px rgba(240,192,64,.3);
}
.btn-gold:hover { background: var(--oro-hover); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(240,192,64,.4); }

.btn-outline {
  background: transparent; color: var(--white);
  border: 1.5px solid rgba(255,255,255,.3);
}
.btn-outline:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.07); }

/* submit full-width */
.btn-sub {
  width: 100%; padding: .78rem;
  background: var(--oro); color: #1a1a1a;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem; font-weight: 900; letter-spacing: .04em;
  border: none; border-radius: var(--radius); cursor: pointer;
  box-shadow: 0 4px 18px rgba(240,192,64,.35);
  transition: background .18s, transform .18s, box-shadow .18s;
}
.btn-sub:hover { background: var(--oro-hover); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(240,192,64,.45); }
.btn-sub:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ═══════════════════════════════════════
   FEEDBACK / ALERT
═══════════════════════════════════════ */
.feedback, .alert {
  padding: .7rem 1rem; border-radius: 10px;
  font-size: .83rem; font-weight: 700;
  margin-bottom: 1.2rem;
  display: flex; align-items: center; gap: .45rem;
  border: 1px solid;
}
.feedback.ok,  .alert-ok  { background: rgba(34,197,94,.15);  border-color: rgba(34,197,94,.35);  color: var(--ok); }
.feedback.err, .alert-err { background: rgba(239,68,68,.15);  border-color: rgba(239,68,68,.35);  color: var(--err); }
.feedback.warn             { background: rgba(240,192,64,.12); border-color: rgba(240,192,64,.35); color: var(--oro); }

/* ═══════════════════════════════════════
   CAMPI FORM
═══════════════════════════════════════ */
.field { margin-bottom: .95rem; }

.field label {
  display: block; font-size: .72rem; font-weight: 800;
  color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: .3rem;
}
.field label .req { color: var(--oro); margin-left: 2px; }

.input-wrap { position: relative; }
.input-icon {
  position: absolute; left: .85rem; top: 50%;
  transform: translateY(-50%); font-size: .88rem;
  pointer-events: none; opacity: .7;
}

.field input[type=text],
.field input[type=email],
.field input[type=password],
.field input[type=number],
.field input[type=date] {
  width: 100%;
  background: var(--input-bg);
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 10px;
  color: var(--white);
  font-family: 'Nunito', sans-serif; font-size: .92rem; font-weight: 600;
  padding: .65rem .9rem .65rem 2.4rem;
  outline: none;
  transition: border-color .2s, background .2s;
}
.field input::placeholder { color: rgba(255,255,255,.4); }
.field input:focus {
  border-color: var(--oro);
  background: rgba(255,255,255,.22);
}
.field input.err { border-color: rgba(252,165,165,.6); }


/* input[type=date]: il box del browser era rimasto bianco (selettore sopra
   non lo includeva) — ora ha lo stesso sfondo scuro degli altri campi, ma la
   piccola icona calendario nativa resta nera e sparirebbe: la rendiamo
   chiara e un po' dorata all'hover, coerente con lo stile degli altri campi. */
.field input[type=date]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.3);
  opacity: .75;
  cursor: pointer;
  transition: opacity .2s;
}
.field input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.field input[type=date]::-webkit-datetime-edit-fields-wrapper,
.field input[type=date]::-webkit-datetime-edit-text,
.field input[type=date]::-webkit-datetime-edit-day-field,
.field input[type=date]::-webkit-datetime-edit-month-field,
.field input[type=date]::-webkit-datetime-edit-year-field {
  color: var(--white);
}
.field input[type=date]:not(:valid)::-webkit-datetime-edit-day-field,
.field input[type=date]:not(:valid)::-webkit-datetime-edit-month-field,
.field input[type=date]:not(:valid)::-webkit-datetime-edit-year-field {
  color: rgba(255,255,255,.4); /* "gg/mm/aaaa" vuoto, come i placeholder degli altri campi */
}
/* Firefox non supporta gli pseudo-elementi sopra: resta il suo widget
   nativo, ma almeno sfondo/bordo/colore del testo sono già coerenti dalla
   regola comune qui sopra. */
.field input[type=date] { color-scheme: dark; }

/* input senza icona (es. dentro form-offerta) */
.field input.no-icon { padding-left: .9rem; }

.err-msg { font-size: .74rem; color: var(--err); font-weight: 700; margin-top: .25rem; display: none; }
.err-msg.show { display: block; }

/* password toggle */
.pw-wrap { position: relative; }
.pw-toggle {
  position: absolute; right: .8rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: .88rem;
  opacity: .5; transition: opacity .2s;
}
.pw-toggle:hover { opacity: 1; }

/* password strength */
.pw-strength { display: flex; align-items: center; gap: .3rem; margin-top: .4rem; }
.pw-strength .bar { height: 3px; flex: 1; border-radius: 2px; background: rgba(255,255,255,.15); transition: background .3s; }
.pw-strength .label { font-size: .7rem; font-weight: 700; color: var(--dim); min-width: 3rem; }
.pw-strength.s1 .bar:nth-child(1) { background: #f87171; }
.pw-strength.s2 .bar:nth-child(1),
.pw-strength.s2 .bar:nth-child(2) { background: var(--oro); }
.pw-strength.s3 .bar             { background: #4ade80; }
.pw-strength.s1 .label { color: #f87171; }
.pw-strength.s2 .label { color: var(--oro); }
.pw-strength.s3 .label { color: #4ade80; }

/* ═══════════════════════════════════════
   TITOLI DI PAGINA
═══════════════════════════════════════ */
h1 {
  font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 900;
  color: var(--oro); line-height: 1; margin-bottom: 1.6rem;
  display: flex; align-items: center; gap: .55rem;
}
h2 {
  font-size: 1rem; font-weight: 900; color: var(--oro);
  margin-bottom: 1rem; letter-spacing: .04em;
}

/* ═══════════════════════════════════════
   SECTION CARD (glass panel condiviso)
═══════════════════════════════════════ */
/* Niente `max-width` qui: è una proprietà della PAGINA, non del pannello.
   Stava a 760px e ogni schermata che aveva bisogno di respiro doveva
   annullarla (formazione lo faceva in tre punti, allenamenti se la teneva e
   finiva a metà schermo con la tabella tagliata). La larghezza la decide il
   contenitore: `.page-app` o `.page-read`.

   Niente `backdrop-filter` nemmeno: sotto c'è `body::before`, un layer
   `position: fixed` con sette gradienti. Sfocare l'intera area di un pannello
   a piena larghezza a ogni scroll, sopra un layer che non scorre, è la
   combinazione più costosa per il compositore — e il gradiente sottostante è
   così uniforme che un fondo piatto è indistinguibile a occhio. Il blur resta
   dove serve davvero: topbar, sidebar, modali, menu. */
.section-card {
  background: var(--card-bg); border: 1px solid var(--border-card);
  border-radius: var(--radius-lg); padding: 1.3rem 1.5rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--shadow-card);
}

/* ═══════════════════════════════════════
   SELECT / FORM CONTROLS
═══════════════════════════════════════ */
.select-wrap { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.select-wrap label {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--dim); white-space: nowrap;
}
select {
  background: var(--input-bg); color: var(--white);
  border: 1.5px solid rgba(255,255,255,.2); border-radius: 10px;
  font-family: 'Nunito', sans-serif; font-size: .9rem; font-weight: 700;
  padding: .55rem .8rem; cursor: pointer; flex: 1; min-width: 220px;
  outline: none; transition: border-color .2s, background .2s;
}
select:focus { border-color: var(--oro); background: rgba(255,255,255,.22); }
select option { background: #0d2412; color: var(--white); }

/* ── Dropdown custom (sostituisce il popup nativo del <select>) ──
   Applicato automaticamente a tutti i <select> del sito dallo script
   condiviso in _topbar.php: il <select> nativo resta come "sorgente
   dati" nascosta (accessibilità/compatibilità con il JS esistente),
   la UI visibile è questo markup generato via JS. */
.cs-native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.cs-wrap { position: relative; display: inline-flex; }
.cs-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  background: var(--input-bg); color: var(--white);
  border: 1.5px solid rgba(255,255,255,.2); border-radius: 10px;
  font-family: 'Nunito', sans-serif; font-size: .9rem; font-weight: 700;
  padding: .55rem .8rem; cursor: pointer; user-select: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  outline: none; transition: border-color .2s, background .2s, box-shadow .2s;
}
.cs-trigger:hover { background: rgba(255,255,255,.22); }
.cs-trigger.open, .cs-trigger:focus-visible {
  border-color: var(--oro); background: rgba(255,255,255,.22);
  box-shadow: 0 0 0 3px rgba(240,192,64,.18);
}
.cs-trigger[disabled] { opacity: .5; cursor: not-allowed; }
.cs-arrow { flex-shrink: 0; color: var(--oro); transition: transform .18s ease; }
.cs-trigger.open .cs-arrow { transform: rotate(180deg); }
.cs-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: max-content;
  background: #0d2412; border: 1px solid rgba(240,192,64,.3); border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0,0,0,.5); padding: .35rem; z-index: 400;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  max-height: 280px; overflow-y: auto;
}
.cs-list.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Telefono: con min-width:max-content le tendine con nomi lunghi (arbitri,
   nazionali) uscivano dallo schermo e la pagina scorreva di lato anche chiuse.
   Qui restano larghe quanto il campo e le voci vanno a capo. */
@media (max-width: 600px) {
  .cs-list { min-width: 0; }
  .cs-list .cs-option { white-space: normal; overflow-wrap: anywhere; }
}
.cs-option {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .55rem .7rem; border-radius: 7px; font-size: .86rem; font-weight: 700;
  color: rgba(255,255,255,.82); cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s;
}
.cs-option:hover, .cs-option.active { background: rgba(240,192,64,.14); color: var(--oro); }
.cs-option.selected { color: var(--oro); }
.cs-option.selected::after { content: '✓'; font-size: .8rem; }
.cs-option.disabled { opacity: .4; cursor: not-allowed; }
.cs-option.disabled:hover { background: none; color: inherit; }
/* Spegne l'eventuale freccia disegnata dalla pagina sul contenitore
   originale del <select> (es. .select-shell::after), rimpiazzata da .cs-arrow */
.cs-shell-enhanced::after { display: none !important; }

/* ═══════════════════════════════════════
   STELLE
═══════════════════════════════════════ */
.stelle-row { display: flex; gap: 1px; }
.stella     { color: rgba(255,255,255,.18); font-size: .95rem; }
.stella.on  { color: var(--oro); text-shadow: 0 0 6px rgba(240,192,64,.5); }

/* ═══════════════════════════════════════
   TOOLTIP
   Markup: <span class="tooltip-trigger">…<div class="tooltip-content">testo</div></span>
═══════════════════════════════════════ */
.tooltip-trigger { position: relative; }

.tooltip-content {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 250px;
  padding: .6rem .85rem;
  background: rgba(7, 22, 11, .97);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  color: var(--off-white);
  font-size: .74rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1.55;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  white-space: normal;
  z-index: 600;
  pointer-events: none;
}

/* freccia */
.tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(7, 22, 11, .97);
}

.tooltip-trigger:hover .tooltip-content,
.tooltip-trigger:focus-visible .tooltip-content {
  display: block;
  animation: tooltipFadeIn .18s ease both;
}

@keyframes tooltipFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ═══════════════════════════════════════
   ONBOARDING HINT
═══════════════════════════════════════ */
.onboarding-hint {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.5rem;
  padding: .9rem 1.15rem;
  background: linear-gradient(120deg, rgba(240,192,64,.18), rgba(240,192,64,.08));
  border: 1px solid rgba(240,192,64,.4);
  border-radius: var(--radius);
  color: var(--off-white);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.5;
}
.onboarding-hint::before { content: '💡'; font-size: 1.2rem; flex-shrink: 0; }
.onboarding-hint strong  { color: var(--oro); }
.onboarding-hint .close-hint {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--dim);
  font-size: 1rem;
  cursor: pointer;
  padding: .2rem .4rem;
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.onboarding-hint .close-hint:hover { background: rgba(255,255,255,.1); color: var(--white); }

/* ═══════════════════════════════════════
   BADGE GENERICO
═══════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: .18rem .55rem; border-radius: 6px; border: 1px solid;
}
.badge-gold  { background: rgba(240,192,64,.15); color: var(--oro);  border-color: rgba(240,192,64,.35); }
.badge-ok    { background: rgba(34,197,94,.15);  color: #4ade80;     border-color: rgba(34,197,94,.3); }
.badge-err   { background: rgba(239,68,68,.12);  color: #fca5a5;     border-color: rgba(239,68,68,.3); }
.badge-dim   { background: rgba(255,255,255,.08); color: var(--dim); border-color: rgba(255,255,255,.12); }

/* ═══════════════════════════════════════
   DIVIDER TESTO
═══════════════════════════════════════ */
.divider {
  display: flex; align-items: center; gap: .6rem;
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); margin: 1rem 0 .8rem;
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.15); }

/* ═══════════════════════════════════════
   CHECKBOX / TERMS
═══════════════════════════════════════ */
.terms-row {
  display: flex; align-items: flex-start; gap: .5rem;
  margin-bottom: .7rem; font-size: .8rem; font-weight: 600;
  color: rgba(255,255,255,.7);
}
.terms-row input[type=checkbox] { margin-top: .2rem; accent-color: var(--oro); flex-shrink: 0; }
.terms-row a { color: var(--oro); text-decoration: none; }
.terms-row a:hover { text-decoration: underline; }
.terms-row.err-terms label { color: var(--err); }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
footer {
  background: rgba(0,0,0,.2);
  border-top: 1px solid rgba(255,255,255,.08);
  text-align: center; padding: .9rem;
  font-size: .74rem; color: var(--dim);
  letter-spacing: .02em; font-weight: 600;
}
footer a { color: var(--oro); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════
   RESPONSIVE BASE
═══════════════════════════════════════ */
/* ═══════════════════════════════════════
   HAMBURGER + MOBILE DRAWER
═══════════════════════════════════════ */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: .4rem; margin-left: auto;
}
.nav-hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--off-white);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, width .2s ease;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* drawer container */
.nav-drawer {
  display: none;
  position: fixed; inset: 0;
  z-index: 500;
  pointer-events: none;
}
.nav-drawer.open { pointer-events: auto; }

/* overlay scuro */
.nav-drawer-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  transition: opacity .28s ease;
}
.nav-drawer.open .nav-drawer-overlay { opacity: 1; }

/* pannello laterale */
.nav-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(280px, 80vw);
  background: #0b1e10;
  border-left: 1px solid rgba(255,255,255,.1);
  padding: 1.2rem 1rem;
  display: flex; flex-direction: column; gap: .2rem;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.nav-drawer.open .nav-drawer-panel { transform: translateX(0); }

/* header del drawer */
.nav-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; padding-bottom: .8rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.nav-drawer-title {
  font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.nav-drawer-close {
  background: none; border: none; cursor: pointer;
  color: var(--dim); font-size: 1.1rem; line-height: 1;
  padding: .3rem; border-radius: 6px;
  transition: background .15s, color .15s;
}
.nav-drawer-close:hover { background: rgba(255,255,255,.1); color: var(--white); }

/* link del drawer */
.nav-drawer-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .72rem .85rem;
  color: var(--off-white); text-decoration: none;
  font-size: .92rem; font-weight: 700;
  border-radius: 10px;
  transition: background .15s, color .15s;
}
.nav-drawer-link:hover { background: rgba(255,255,255,.07); }
.nav-drawer-link.active { background: rgba(240,192,64,.12); color: var(--oro); }
.nav-drawer-link .dl-icon { font-size: 1rem; width: 1.4rem; text-align: center; flex-shrink: 0; }

/* separatore nel drawer */
.nav-drawer-divider { height: 1px; background: rgba(255,255,255,.1); margin: .5rem 0; }

/* PS nel drawer */
.nav-drawer-ps {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .85rem;
  background: rgba(240,192,64,.08);
  border: 1px solid rgba(240,192,64,.2);
  border-radius: 10px; margin-bottom: .4rem;
  font-size: .82rem; font-weight: 800; color: var(--oro);
}
.nav-drawer-ps span { font-size: .68rem; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .07em; }

/* ─── Mobile media query ─────────────────── */
@media (max-width: 700px) {
  .nav-hamburger { display: flex; }
  .nav-drawer    { display: block; }
  nav > .nav-sep,
  nav > .nav-link { display: none; }
  nav > button.nav-world { display: none; }
  .nav-right > .nav-link { display: none; }
}

/* ═══════════════════════════════════════
   RESPONSIVE BASE
═══════════════════════════════════════ */
@media (max-width: 680px) {
  nav { padding: .75rem 1.2rem; gap: 1rem; }
  .wrapper { padding: 1.5rem 1rem 3.5rem; }
}

/* ═══════════════════════════════════════
   UX / UI POLISH — globale, valido per tutte le pagine
   (additivo: non sovrascrive i layout esistenti)
═══════════════════════════════════════ */

/* Selezione testo coerente col brand */
::selection { background: rgba(240,192,64,.32); color: #fff; }

/* Focus da tastiera ben visibile su ogni elemento interattivo (accessibilità).
   Non influisce sul click col mouse, solo sulla navigazione da tastiera. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Scrollbar a tema (Firefox + WebKit) */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
  border: 2px solid transparent;
  border-radius: 10px;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(240,192,64,.5);
  background-clip: padding-box;
}

/* Feedback "premuto" coerente sui bottoni */
.btn:active,
.btn-sub:active,
.nav-cta:active,
.wsd-btn:active { transform: translateY(0) scale(.97); }

/* Indicatore voce di menu attiva un filo più leggibile */
.nav-link.active { text-shadow: 0 0 16px rgba(240,192,64,.3); }

/* Rispetta chi ha richiesto meno animazioni nel sistema operativo */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ═══════════════════════════════════════
   NOMI DELLE NAZIONALI — SEMPRE MAIUSCOLI
   Prima convivevano "INGHILTERRA" (podio, home) e "Inghilterra"
   (tabella, calendario, tabelloni): ora ovunque maiuscolo.
   Nel testo scorrevole (telecronaca, notifiche) il nome resta com'è.
═══════════════════════════════════════ */
.team-nome,
.rk-link[href*="naz="] b,
.cls-ko-nome,
.cls-nome-full,
.pf-naz,
.trofeo-naz,
.sette-box label,
.naz-nome {
  text-transform: uppercase;
  letter-spacing: .02em;
}


/* ═══════════════════════════════════════
   FRECCIA DEI PULSANTI E DEI LINK "VAI A…"
   Il carattere "→" nel font del gioco è sottile e a .7 di opacità
   quasi spariva: qui è una freccia disegnata, spessa, dello stesso
   colore del testo. Uso: <span class="nm-arrow" aria-hidden="true"></span>
═══════════════════════════════════════ */
.nm-arrow {
  display: inline-block;
  flex-shrink: 0;
  width: 1.05em;
  height: 1.05em;
  margin-left: .3em;
  vertical-align: -.16em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 5.5 19.5 12 13 18.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 5.5 19.5 12 13 18.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .15s ease;
}
a:hover > .nm-arrow, a:focus-visible > .nm-arrow,
button:hover > .nm-arrow, button:focus-visible > .nm-arrow,
a:hover .nm-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .nm-arrow { transition: none; } }

/* ── Spiegazioni a richiesta ──────────────────────────────────────────────
   Le spiegazioni non restano sempre aperte: tolgono spazio sul telefono.
   Si scrivono così e si aprono toccando la "i":
     <details class="intro"><summary><span class="i-ico" aria-hidden="true">i</span>Titolo breve</summary>
       <ul><li>…</li></ul>   (oppure un solo <p>)
     </details>
   Nato in talent_scout.php, ora comune a tutte le pagine del gioco. */
.intro { font-size: .8rem; color: var(--off-white); line-height: 1.45; align-self: flex-start; }
.intro > summary { list-style: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 32px; cursor: pointer; color: var(--oro); font-weight: 700; user-select: none; }
.intro > summary::-webkit-details-marker { display: none; }
.intro .i-ico { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: rgba(240,192,64,.18); border: 1px solid var(--oro); font-size: .7rem; font-weight: 900; font-style: italic; flex-shrink: 0; transition: background .15s; }
.intro > summary:hover .i-ico, .intro[open] .i-ico { background: var(--oro); color: #0b1c10; }
.intro ul { margin: .5rem 0 0; padding: .7rem 1rem .7rem 1.9rem; display: flex; flex-direction: column; gap: .25rem;
  background: rgba(0,0,0,.22); border: 1px solid var(--line); border-radius: 12px; }
.intro > p { margin: .5rem 0 0; padding: .7rem 1rem; background: rgba(0,0,0,.22); border: 1px solid var(--line); border-radius: 12px; }
.intro li b, .intro p b { color: var(--white); }

/* ── Telefono in orizzontale: leggibilità e tocco ──
   Soglie da linee guida mobile (Material 12sp, Apple 11pt, tocco 40-44px):
   sotto i 500px d'altezza nessun testo sotto 11px (le etichette secondarie
   a 11,5), nessun tasto sotto i 36px. Colpiscono solo gli schermi tattili,
   il desktop resta com'era. */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .rk-sigla, .rk-sub, .dos-pill, .team-elo, .pr-role, .player-badge, .pc-first, .pc-corto,
  .pc-chip, .esp-bonus, .stato-pill, .mtc-date, .mtc-comp-txt, .pcf-lorda, .pcn-t, .kpi-lbl,
  .stat-item-label, .wdl-lbl, .conv-ruolo-tag, .ach-rar, .vv-r, .cosa, .forma-num,
  .slot-capitano-toggle, .sec-caret, .tb-naz-nome, .sidebar-badge,
  .player-badge-stato, .status-badge, .cls-pill, .naz-pill, .tb-live, .mkt-stella,
  th, abbr { font-size: max(1em, 11.5px) !important; }
  .ruolo-badge { font-size: 11.5px !important; }
  small { font-size: max(1em, 11.5px); }
  /* rail laterale: solo icone (le 12 voci devono stare in ~375px), nome in title/aria-label */
  .sidebar-link-text { display: none !important; }
  .sidebar-link { min-height: 30px; }
  .sidebar-link svg { width: 21px !important; height: 21px !important; }
  button, .btn, select, input:not([type=checkbox]):not([type=radio]) { min-height: 36px; }
  main a, .wrapper a { padding-top: 2px; padding-bottom: 2px; }
}

/* Popup e riquadri a schermo intero: su 375px d'altezza non devono mai
   essere piu' alti dello schermo, scorrono dentro. */
@media (orientation: landscape) and (max-height: 500px) {
  [class*="overlay"] > *:not([class*="overlay"]):not(script):not(style),
  .pdv > *, .tc-choice > * {
    max-height: calc(100dvh - .75rem); overflow-y: auto; box-sizing: border-box;
    overscroll-behavior: contain;
  }
  .nmg-card { max-height: calc(100dvh - 1rem); overflow-y: auto; }
}

@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .cls-tab, .cls-chip, .rk-link, .st-back, .pg-card-link, .cls-naz-link,
  .cls-partita-riga, .arbitro-link, .filtro-ruolo { min-height: 36px; }
}


/* ── Pagine di accesso (login, password dimenticata, nuova password) in modalita' app e a telefono in orizzontale ── */
html.app body > nav, html.app body > footer { display: none !important; }
@media (max-height: 520px) {
  body > .page > .card:not(:has(#loginForm)) { display: grid; grid-template-columns: 1fr 1.25fr; gap: .3rem 1.6rem; align-items: center; max-width: min(860px, 94vw); padding: .9rem 1.4rem; }
  body > .page > .card:not(:has(#loginForm)) .card-head { margin: 0; }
  body > .page > .card:not(:has(#loginForm)) .big-icon { font-size: 1.8rem; margin-bottom: .2rem; }
  body > .page > .card:not(:has(#loginForm)) .alert, body > .page > .card:not(:has(#loginForm)) .back-link { grid-column: 1 / -1; margin-top: .3rem; }
  body > .page > .card:not(:has(#loginForm)) .captcha-box { margin: .2rem 0 0; height: 46px; transform: scale(.7); transform-origin: top center; }
  body > .page { padding: .5rem 1rem; }
  body > footer { display: none; }
}

/* ── Telefono: i cerchi con la ✕ restano cerchi, con la ✕ al centro ──
   La regola "button { min-height: 36px }" di sopra allungava in verticale i
   tasti da 28px (ovali). Qui larghezza = altezza = min-height = --d, niente
   padding, croce centrata. Vale su qualsiasi schermo tattile o stretto. */
@media (pointer: coarse), (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
  .naz-chiudi, .mtc-pop-x, .avviso-x, .nmi-x, .cm-notifica-chiudi,
  #cm-rispondendo-annulla, .slot-remove, .slot-capitano-toggle, .rp-kick {
    width: var(--d) !important; height: var(--d) !important;
    min-width: var(--d) !important; min-height: var(--d) !important;
    max-width: var(--d) !important; max-height: var(--d) !important;
    aspect-ratio: 1 / 1; box-sizing: border-box; padding: 0 !important;
    border-radius: 50% !important; flex: 0 0 auto;
    display: inline-flex !important; align-items: center; justify-content: center;
    line-height: 1 !important; text-align: center; font-family: Arial, sans-serif;
  }
  .naz-chiudi { --d: 38px; }
  .mtc-pop-x { --d: 34px; }
  .avviso-x { --d: 32px; border-radius: 50% !important; }
  .nmi-x, .cm-notifica-chiudi { --d: 28px; }
  #cm-rispondendo-annulla { --d: 28px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.3); color: inherit; cursor: pointer; }
  .slot-remove, .slot-capitano-toggle { --d: 20px; }
  .rp-kick { --d: 1.4em; }
  .slot-remove .ico, .slot-capitano-toggle .ico { width: 62%; height: 62%; margin: 0; display: block; }
}

/* ── Chip e tasti-pastiglia in 3D (2/11/2026) ──
   Una regola sola per tutti: barra in alto (nazionale, mondo, anno, profilo),
   scorciatoie di Rosa (.status-badge) e tasti della Formazione. Il bordo e il
   colore del testo restano quelli di ciascun chip; qui si aggiungono la base
   spessa sotto (nella tinta del chip), il riflesso in alto e lo "schiaccia" al
   tocco. Specificità alzata con html body :is(...) per battere le regole locali
   delle pagine senza !important (così le pulsazioni restano). */
html body :is(.status-badge, .builder-header .apri-impost, .builder-header .btn-ghost.btn-svuota) {
  --sh3d: rgba(0,0,0,.4);
  box-shadow: 0 3px 0 var(--sh3d);
}
html body :is(.tb-anno, .tb-id, .sp-world) {
  --sh3d: rgba(0,0,0,.55);
  background-image: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 60%);
  box-shadow: 0 3px 0 var(--sh3d), inset 0 1px 0 rgba(255,255,255,.16);
  transition: transform .1s, box-shadow .1s, border-color .2s, color .2s, background-color .2s;
}
html body :is(.status-badge, .builder-header .apri-impost, .builder-header .btn-ghost.btn-svuota,
              .tb-anno, .tb-id, .sp-world):is(:hover, :focus-visible) {
  box-shadow: 0 3px 0 var(--sh3d), 0 0 14px color-mix(in srgb, currentColor 22%, transparent);
}
html body :is(.status-badge, .builder-header .apri-impost, .builder-header .btn-ghost.btn-svuota,
              .tb-anno, .tb-id, .sp-world):active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--sh3d);
}
/* le strisce che scorrono di lato non tagliano più la base da 3px */
html body .filter-bar .status-badges { padding-bottom: 5px; }
@media (prefers-reduced-motion: reduce) {
  html body :is(.tb-anno, .tb-id, .sp-world, .status-badge) { transition: none; }
}

/* ── Uniformità dei chip (completa il blocco 3D qui sopra) ──
   Stessa altezza minima (36px) e stesso raggio (10px) per tutti; anche i
   contatori PS e Crediti della barra hanno la base 3D (non si premono: niente
   effetto al clic). L'avatar del profilo resta tondo. */
html body :is(.status-badge, .builder-header .apri-impost, .builder-header .btn-ghost.btn-svuota) { border-radius: 10px; }
html body :is(.tb-anno, .sp-world, .tb-res) { min-height: 36px; border-radius: 10px; box-sizing: border-box; }
html body .tb-res {
  --sh3d: rgba(0,0,0,.55);
  background-image: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 60%);
  box-shadow: 0 3px 0 var(--sh3d), inset 0 1px 0 rgba(255,255,255,.16);
}