/* ============================================================
   PORTAL.CSS — soltanto i pezzi nuovi del portale
 
   style.css resta quella della v1, invariata: qui non si sovrascrive
   niente di suo, si aggiunge. Usa le stesse variabili di tema
   (--bg, --panel, --line, --text, --text-dim, --accent, --radius),
   così quando l'interfaccia assume i colori della squadra feticcio
   anche questi componenti li seguono.
   ============================================================ */


/* ---------- intestazione: marchio con payoff ---------- */

.brand-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-name {
  font-family: var(--font-display, inherit);
  font-weight: 800;
  letter-spacing: .02em;
}

.brand-payoff {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .85;
}


/* ---------- selettore di lingua ---------- */
/* Due pulsanti piccoli e sempre visibili. Su un portale che parte in
   inglese devono essere la prima cosa che si nota. */

.langswitch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0, 0, 0, .18);
}

.langbtn {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.langbtn:hover { color: var(--text); }

.langbtn.active {
  background: var(--accent);
  color: var(--accent-ink, #14100a);
}


/* ---------- selettore di lega ---------- */
/* Vuoto finché non c'è un accesso: lo riempie lo step 6. */

.leagueswitch select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  max-width: 200px;
}


/* ---------- vetrina pubblica ---------- */

.landing-hero {
  position: relative;
  text-align: center;
  padding: 44px 22px 38px;
  overflow: hidden;
}

.landing-logo {
  width: 96px;
  height: auto;
  margin: 0 auto 18px;
  display: block;
  position: relative;
  z-index: 1;
}

.landing-tagline {
  position: relative;
  z-index: 1;
  margin: 0 0 6px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.landing-title {
  position: relative;
  z-index: 1;
  margin: 0 auto 14px;
  max-width: 16ch;
  font-family: var(--font-display, inherit);
  font-size: clamp(1.7rem, 5vw, 2.7rem);
  font-weight: 900;
  line-height: 1.08;
}

.landing-sub {
  position: relative;
  z-index: 1;
  margin: 0 auto 26px;
  max-width: 52ch;
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.55;
}

.landing-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}


/* ---------- "come funziona" ---------- */

.section-title {
  margin: 0 0 18px;
  font-family: var(--font-display, inherit);
  font-size: 1.3rem;
  font-weight: 800;
}

.howto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.howto-step {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius, 14px);
  background: rgba(255, 255, 255, .02);
}

.howto-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink, #14100a);
  font-weight: 900;
  font-size: .9rem;
}

.howto-step h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
}

.howto-step p {
  margin: 0;
  color: var(--text-dim);
  font-size: .9rem;
  line-height: 1.5;
}


/* ---------- elenco delle proprie leghe ---------- */

.league-list {
  display: grid;
  gap: 10px;
}

.league-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius, 14px);
  background: rgba(255, 255, 255, .02);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}

.league-card:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, .045);
}

.league-card:active { transform: scale(.995); }

.league-card-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.league-card-name {
  font-weight: 700;
  font-size: 1.02rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.league-card-meta {
  font-size: .82rem;
  color: var(--text-dim);
}

.pill-admin {
  flex: none;
  background: var(--accent);
  color: var(--accent-ink, #14100a);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}


/* ---------- modulo delle regole ---------- */

.rule-group {
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.rule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
}

.rule-row > span {
  font-size: .92rem;
  color: var(--text);
}

.rule-row input[type="number"],
.rule-row select {
  flex: none;
  width: 130px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: .9rem;
  padding: 7px 10px;
}

.rule-row select { width: auto; max-width: 260px; }

.rule-row input:disabled,
.rule-row select:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.rule-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: .92rem;
  cursor: pointer;
}

.rule-check input { flex: none; width: 17px; height: 17px; accent-color: var(--accent); }

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 18px;
}


/* ---------- inviti ---------- */

.code-input,
.code-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.code-input { text-align: center; font-size: 1.15rem; font-weight: 700; }

.invite-actions {
  display: flex;
  gap: 6px;
  flex: none;
}

.invite-card { text-align: center; }


/* ---------- suggerimento sotto il nome utente ---------- */
/* .hint c'è già in style.css: qui si aggiungono solo i due stati,
   verde quando il nome è libero e rosso quando è occupato. */

.hint.ok  { color: var(--ok); }
.hint.err { color: var(--danger); }


/* ---------- utilità ---------- */

.muted {
  color: var(--text-dim);
  font-size: .9rem;
}


/* ---------- schermi stretti ---------- */

@media (max-width: 560px) {

  .brand-payoff { display: none; }

  .topbar-right {
    gap: 6px;
  }

  .landing-actions .btn {
    width: 100%;
  }
}


/* =====================================================================
   SCHEDA PROFILO — la dashboard della squadra feticcio
   =====================================================================
   Nella v1 queste regole stavano in style.css. Qui vivono nel foglio
   del portale perché la scheda è nuova: style.css resta la copia
   invariata della v1, e non ci si mette mano.

   La card si colora da sola: --col e --col-ink arrivano dall'HTML,
   presi dai colori veri della squadra. */

.fet-dash {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--col) 40%, var(--line));
}

/* Il logo grande sullo sfondo. Sta dietro a tutto e non intercetta
   i clic, altrimenti coprirebbe mezza card. */
.fet-dash-wm {
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 150px;
  height: 150px;
  object-fit: contain;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}

.fet-dash > * { position: relative; z-index: 2; }

.fd-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.fd-name { margin: 0; font-size: 1.15rem; color: var(--col-ink); }
.fd-sub  { font-size: 0.78rem; color: var(--text-dim); }

.fd-record { text-align: right; line-height: 1.2; }
.fd-record b     { font-size: 1.5rem; color: var(--col-ink); }
.fd-record small { display: block; font-size: 0.72rem; color: var(--text-dim); }

.fd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.fd-stat {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
}

.fd-stat small { display: block; font-size: 0.68rem; color: var(--text-dim); }
.fd-stat b     { font-size: 1.2rem; }
.fd-stat b.ok  { color: var(--ok); }
.fd-stat b.bad { color: var(--danger); }

.fd-last {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}

.fd-week   { color: var(--text-dim); font-size: 0.75rem; }
.fd-result.ok  { color: var(--ok); }
.fd-result.bad { color: var(--danger); }

/* Su schermo stretto il record va sotto al nome, non a fianco */
@media (max-width: 480px) {
  .fd-record { text-align: left; }
  .fd-record b { font-size: 1.3rem; }
}


/* =====================================================================
   SCHEDA NFL — calendario della settimana
   =====================================================================
   Le classifiche per division riusano .nfl-grid e .nfl-table, che
   stanno gia' in style.css dalla v1. Qui c'e' solo l'elenco partite,
   che nella v1 non esisteva.

   La barra delle settimane con le frecce: .week-bar da sola spinge
   tutto a destra, qui serve il gruppo tenuto insieme. */

.week-bar.nfl-bar {
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

.nfl-games { display: grid; gap: 8px; }

.nfl-game {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}

.ng-teams {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
}

.ng-side { display: inline-flex; align-items: center; gap: 5px; color: var(--text-dim); }

/* La vincente e' l'informazione che si cerca per prima: sta in chiaro,
   le altre restano smorzate. */
.ng-side.ng-win { color: var(--text); }
.ng-side.ng-win b { color: var(--accent, var(--text)); }

.ng-score { font-weight: 700; margin-left: 2px; }
.ng-at    { color: var(--text-dim); font-size: 0.8rem; }

.ng-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.ng-slot {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
}

@media (max-width: 520px) {
  .nfl-game { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ============================================================
   STEP 13 — DONAZIONE VOLONTARIA
   Una scheda bianca che si stacca dal fondo notturno del sito,
   con le pastiglie nei colori di PayPal: oro #ffc439 e blu
   #003087. Il logotipo di PayPal non c'è ed è voluto — è un
   marchio registrato, arriva solo in inglese e in misure fisse.
   La parola scritta basta.

   I colori stanno tutti qui in cima: cambiarne uno li cambia
   in tutte e due le posizioni, piede di pagina e accesso.
   ============================================================ */
.donate {
  --pp-card: #ffffff;
  --pp-gold: #ffc439;
  --pp-gold-hi: #ffd25e;
  --pp-navy: #003087;
  --pp-blue: #0070ba;
  --pp-ink: #44536b;
  --pp-line: #dfe4ec;

  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 8px 10px;

  background: var(--pp-card);
  border-radius: var(--radius);
  padding: 16px 20px;
  max-width: 620px; margin: 0 auto 18px;
  box-shadow: 0 10px 28px -18px rgba(0, 0, 0, 0.9);

  font-size: 0.85rem; color: var(--pp-ink);
}

.donate-label { color: var(--pp-ink); }

/* Il marchio scritto: il blu del logotipo vero, così si riconosce
   al volo anche senza immagine. */
.donate-brand {
  font-weight: 800; letter-spacing: -0.02em;
  color: var(--pp-blue);
}

.donate-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }

.donate-chip {
  background: var(--pp-gold); color: var(--pp-navy);
  border: 1px solid transparent; border-radius: 999px;
  padding: 6px 16px; font: inherit; font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.donate-chip:hover { background: var(--pp-gold-hi); }
.donate-chip:active { transform: translateY(1px); }
.donate-chip:focus-visible { outline: 2px solid var(--pp-navy); outline-offset: 2px; }

/* "altro importo" resta un gradino sotto: apre una casella, non
   manda soldi. Sul bianco l'oro di contorno sparirebbe, quindi
   prende il blu. */
.donate-chip--free {
  background: transparent; color: var(--pp-navy);
  border-color: var(--pp-navy); font-weight: 600;
}
.donate-chip--free:hover { background: rgba(0, 48, 135, 0.07); }

.donate-custom { display: inline-flex; align-items: center; gap: 6px; }

.donate-input {
  width: 92px; padding: 6px 12px; text-align: right;
  background: #fff; color: #17233a;
  border: 1px solid var(--pp-line); border-radius: 999px;
  font: inherit; font-weight: 600;
}
.donate-input:focus { outline: none; border-color: var(--pp-navy); }

/* il pulsante di conferma segue le pastiglie, non l'oro del sito */
.donate .donate-go {
  background: var(--pp-gold); color: var(--pp-navy);
  font-weight: 700; box-shadow: none;
}
.donate .donate-go:hover { background: var(--pp-gold-hi); filter: none; }

.donate-msg {
  width: 100%; text-align: center;
  color: #b3261e; font-size: 0.78rem;
}

.donate-note {
  width: 100%; text-align: center; margin: 4px 0 0;
  font-size: 0.75rem; color: #7b879b;
}

/* --- dentro la scheda di accesso: stessa scheda bianca, solo
       staccata dal modulo che sta sopra --- */
.donate--auth { margin: 18px auto 0; }

/* --- telefono: l'invito va a capo da solo, le pastiglie restano
       affiancate e grandi abbastanza da colpirle col pollice --- */
@media (max-width: 480px) {
  .donate { gap: 6px 8px; padding: 14px 14px; font-size: 0.8rem; }
  .donate-label { width: 100%; text-align: center; }
  .donate-chip { padding: 7px 16px; }
}

/* --- chi ha chiesto meno animazioni non ne riceve --- */
@media (prefers-reduced-motion: reduce) {
  .donate-chip { transition: none; }
  .donate-chip:active { transform: none; }
}
/* ============================================================
   LOGHI DELLE SQUADRE — PANNELLO DEI COMANDI
   ============================================================
   Va in fondo a portal.css, che e' l'ultimo foglio caricato:
   da qui queste righe vincono su tutto quello che sta sopra, e
   sopravvivono a un eventuale style.css aggiornato.

   COME SI USA
   Si toccano SOLO i numeri del blocco :root qui sotto. Le regole
   che vengono dopo leggono quei numeri e non hanno bisogno di
   essere modificate.

   Ogni contesto ha i suoi comandi, quindi si puo' ingrandire il
   logo delle Pick senza gonfiare quello delle classifiche.

   I NOVE POSTI IN CUI COMPARE UN LOGO
     1. Pick — filigrana dietro le pastiglie di scelta
     2. Pick — logo nelle partite della settimana
     3. Classifiche NFL — tabella delle division
     4. Classifiche NFL — righe dei risultati
     5. Jolly Matrix — colonna delle squadre
     6. Jolly Matrix — segno del feticcio dentro la cella
     7. Feticcio — pastiglie per scegliere la squadra
     8. Feticcio — filigrana della dashboard
     9. Intestazione "Feed the Kraken" — filigrana
   ============================================================ */

:root {

  /* --- COLORI DEL BAGLIORE, per tutti -----------------------
     Il bagliore e' fatto di due aloni sovrapposti: uno stretto
     che fa da contorno e stacca il logo dal fondo, e uno largo
     che lo fa brillare. Cambiare qui li cambia ovunque.
     Per un contorno scuro invece che chiaro: rgba(0,0,0,.75). */
  --lg-contorno-colore: rgba(255, 255, 255, .90);
  --lg-bagliore-colore: rgba(255, 255, 255, .55);


  /* ========== 1. PICK — filigrana dietro le pastiglie ========== */
  /* E' il logo grande e sbiadito dentro il bottone che premi per
     scegliere la squadra. Sopra ci sta la scritta, quindi se lo
     alzi troppo di opacita' la sigla fatica a leggersi. */
  --lg-pick-dim:       130px;   /* era 104px */
  --lg-pick-opacita:   .50;
  --lg-pick-destra:    -30px;     /* piu' alto = si sposta a sinistra */
  --lg-pick-basso:    -40px;    /* negativo = sborda sotto */
  --lg-pick-contorno:  1px;     /* 0 = via il contorno */
  --lg-pick-bagliore:  5px;     /* 0 = via il bagliore */

  /* ========== 2. PICK — le partite della settimana ========== */
  /* I loghetti in linea nell'elenco delle partite, sotto le
     pastiglie. Stanno accanto al testo: oltre i 30px la riga
     comincia a crescere in altezza. */
  --lg-partite-dim:      24px;   /* era 20px */
  --lg-partite-opacita:  1;
  --lg-partite-alza:    -4px;    /* negativo = scende, positivo = sale */
  --lg-partite-spazio:   1px;    /* distanza dal testo */
  --lg-partite-bagliore: 0px;

  /* ========== 3. CLASSIFICHE NFL — tabella division ========== */
  --lg-nfltab-dim:      24px;   /* era 20px */
  --lg-nfltab-opacita:  1;
  --lg-nfltab-alza:    -6px;
  --lg-nfltab-spazio:   7px;
  --lg-nfltab-bagliore: 0px;

  /* ========== 4. CLASSIFICHE NFL — righe dei risultati ========== */
  /* Le partite giocate, con il punteggio accanto. */
  --lg-risultati-dim:      24px;
  --lg-risultati-opacita:  1;
  --lg-risultati-alza:    -5px;
  --lg-risultati-spazio:   6px;
  --lg-risultati-bagliore: 0px;

  /* ========== 5. JOLLY MATRIX — colonna squadre ========== */
  /* La prima colonna della matrice. Attenzione: quella colonna e'
     larga 220px fissi, e la tabella ha 32 righe. Ingrandire qui
     allunga la pagina piu' che altrove. */
  --lg-matrix-dim:      22px;
  --lg-matrix-opacita:  1;
  --lg-matrix-alza:    -5px;
  --lg-matrix-spazio:   6px;
  --lg-matrix-bagliore: 0px;

  /* ========== 6. JOLLY MATRIX — segno del feticcio ========== */
  /* Il logo piccolo dentro la casella, che dice "questa e' la sua
     squadra del cuore". Sta in uno spazio stretto. */
  --lg-matfet-dim:      20px;
  --lg-matfet-opacita:  1;
  --lg-matfet-bagliore: 0px;

  /* ========== 7. FETICCIO — pastiglie di scelta ========== */
  /* I 32 bottoni della scheda Feticcio, e la pastiglia della
     squadra confermata. */
  --lg-scelta-dim:      22px;
  --lg-scelta-opacita:  1;
  --lg-scelta-alza:    -4px;
  --lg-scelta-spazio:   5px;
  --lg-scelta-bagliore: 0px;

  /* ========== 8. FETICCIO — filigrana della dashboard ========== */
  /* Il logo enorme e trasparente dietro la scheda della tua
     squadra. Qui si puo' esagerare: sotto non c'e' quasi testo. */
  --lg-dash-dim:       300px;   /* era 150px */
  --lg-dash-opacita:   .32;
  --lg-dash-destra:   -18px;
  --lg-dash-basso:     -90px;
  --lg-dash-contorno:  0px;
  --lg-dash-bagliore:  0px;

  /* ========== 9. "FEED THE KRAKEN" — filigrana ========== */
  /* Nell'intestazione della scheda Pick, dietro la scheda del
     feticcio. */
  --lg-hero-dim:       230px;
  --lg-hero-opacita:   .34;
  --lg-hero-destra:   -26px;
  --lg-hero-basso:    -38px;
  --lg-hero-contorno:  0px;
  --lg-hero-bagliore:  0px;
}
/* ============================================================
   SCHEDA "FETICCIO ATTIVO" — la card nell'intestazione delle Pick
   Usa --accent, cioè il colore della squadra schiarito. L'alone
   tondo in alto a destra è un elemento a parte: si spegne da solo
   mettendo --fa-alone-opacita a 0.
   ============================================================ */
:root {
  --fa-tinta:  36%;     /* colore squadra nell'angolo alto */
  --fa-angolo: 150deg;  /* direzione della sfumatura */
  --fa-bordo:  70%;     /* colore squadra nel bordo */
  --fa-fondo:  var(--panel);

  --fa-alone-dim:      180px;  /* diametro dell'alone tondo */
  --fa-alone-tinta:    40%;    /* quanto colore squadra dentro l'alone */
  --fa-alone-opacita:  .5;     /* 0 = alone via del tutto */
  --fa-alone-sfoca:    6px;
  --fa-alone-destra:  -40px;   /* più negativo = più fuori dal bordo */
  --fa-alone-alto:    -60px;
}

.fet-active {
  background: linear-gradient(var(--fa-angolo),
    color-mix(in srgb, var(--accent) var(--fa-tinta), var(--fa-fondo)),
    var(--fa-fondo));
  border-color: color-mix(in srgb, var(--accent) var(--fa-bordo), var(--line));
}

.fet-active::after {
  width:  var(--fa-alone-dim);
  height: var(--fa-alone-dim);
  right:  var(--fa-alone-destra);
  top:    var(--fa-alone-alto);
  opacity: var(--fa-alone-opacita);
  filter: blur(var(--fa-alone-sfoca));
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) var(--fa-alone-tinta), transparent),
    transparent 62%);
}

/* ============================================================
   SCHEDA DEL FETICCIO — tonalità
   Il fondo è una sfumatura fra il colore della squadra e quello
   delle schede. Qui si decide quanto colore lasciar passare.
   ============================================================ */
:root {
  --fd-tinta:  46%;    /* colore squadra nell'angolo. 0% = niente, 60% = squillante */
  --fd-spegni: 82%;    /* dove la sfumatura torna neutra. Più alto = colore più esteso */
  --fd-angolo: 150deg; /* direzione. 90deg = dall'alto, 180deg = da sinistra */
  --fd-bordo:  70%;    /* colore squadra nel bordo */
  --fd-fondo:  var(--panel);  /* la base. Prova var(--panel-2) o un colore tuo */
}

.fet-dash {
  background: linear-gradient(var(--fd-angolo),
    color-mix(in srgb, var(--col) var(--fd-tinta), var(--fd-fondo)),
    var(--fd-fondo) var(--fd-spegni));
  border-color: color-mix(in srgb, var(--col) var(--fd-bordo), var(--line));
}
 
/* ============================================================
   DA QUI IN GIU' NON SERVE TOCCARE NIENTE
   Sono solo le regole che leggono i numeri di sopra.
   ============================================================ */
 
/* --- 1. Pick: filigrana dietro le pastiglie --- */
.team-chip .chip-bg {
  /* Ridichiarate qui e non ereditate: una filigrana deve stare FUORI
     dal flusso, altrimenti occupa spazio vero e spinge il testo. */
  position: absolute;
  z-index: 0;
  pointer-events: none;
  object-fit: contain;
  width:  var(--lg-pick-dim);
  height: var(--lg-pick-dim);
  opacity: var(--lg-pick-opacita);
  right:  var(--lg-pick-destra);
  bottom: var(--lg-pick-basso);
  top: auto;
  transform: none;
  filter: drop-shadow(0 0 var(--lg-pick-contorno) var(--lg-contorno-colore))
          drop-shadow(0 0 var(--lg-pick-bagliore) var(--lg-bagliore-colore));
}
 
/* --- 2. Pick: le partite della settimana --- */
.game-teams .chip-logo {
  width:  var(--lg-partite-dim);
  height: var(--lg-partite-dim);
  opacity: var(--lg-partite-opacita);
  vertical-align: var(--lg-partite-alza);
  margin-right: var(--lg-partite-spazio);
  filter: drop-shadow(0 0 var(--lg-partite-bagliore) var(--lg-bagliore-colore));
}
 
/* --- 3. Classifiche NFL: tabella division --- */
.nfl-team .chip-logo {
  width:  var(--lg-nfltab-dim);
  height: var(--lg-nfltab-dim);
  opacity: var(--lg-nfltab-opacita);
  vertical-align: var(--lg-nfltab-alza);
  margin-right: var(--lg-nfltab-spazio);
  filter: drop-shadow(0 0 var(--lg-nfltab-bagliore) var(--lg-bagliore-colore));
}
 
/* --- 4. Classifiche NFL: righe dei risultati --- */
.ng-side .chip-logo {
  width:  var(--lg-risultati-dim);
  height: var(--lg-risultati-dim);
  opacity: var(--lg-risultati-opacita);
  vertical-align: var(--lg-risultati-alza);
  margin-right: var(--lg-risultati-spazio);
  filter: drop-shadow(0 0 var(--lg-risultati-bagliore) var(--lg-bagliore-colore));
}
 
/* --- 5. Jolly Matrix: colonna squadre --- */
.matrix-team .chip-logo {
  width:  var(--lg-matrix-dim);
  height: var(--lg-matrix-dim);
  opacity: var(--lg-matrix-opacita);
  vertical-align: var(--lg-matrix-alza);
  margin-right: var(--lg-matrix-spazio);
  filter: drop-shadow(0 0 var(--lg-matrix-bagliore) var(--lg-bagliore-colore));
}
 
/* --- 6. Jolly Matrix: segno del feticcio --- */
.matrix-fet-logo {
  width:  var(--lg-matfet-dim);
  height: var(--lg-matfet-dim);
  opacity: var(--lg-matfet-opacita);
  filter: drop-shadow(0 0 var(--lg-matfet-bagliore) var(--lg-bagliore-colore));
}
 
/* --- 7. Feticcio: pastiglie di scelta --- */
.team-chip .team-abbr .chip-logo {
  width:  var(--lg-scelta-dim);
  height: var(--lg-scelta-dim);
  opacity: var(--lg-scelta-opacita);
  vertical-align: var(--lg-scelta-alza);
  margin-right: var(--lg-scelta-spazio);
  filter: drop-shadow(0 0 var(--lg-scelta-bagliore) var(--lg-bagliore-colore));
}
 
/* --- 8. Feticcio: filigrana della dashboard --- */
.fet-dash-wm {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  object-fit: contain;
  width:  var(--lg-dash-dim);
  height: var(--lg-dash-dim);
  opacity: var(--lg-dash-opacita);
  right:  var(--lg-dash-destra);
  bottom: var(--lg-dash-basso);
  top: auto;
  transform: none;
  filter: drop-shadow(0 0 var(--lg-dash-contorno) var(--lg-contorno-colore))
          drop-shadow(0 0 var(--lg-dash-bagliore) var(--lg-bagliore-colore));
}
 
/* --- 9. "Feed the Kraken": filigrana --- */
.fet-wm {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  object-fit: contain;
  width:  var(--lg-hero-dim);
  height: var(--lg-hero-dim);
  opacity: var(--lg-hero-opacita);
  right:  var(--lg-hero-destra);
  bottom: var(--lg-hero-basso);
  filter: drop-shadow(0 0 var(--lg-hero-contorno) var(--lg-contorno-colore))
          drop-shadow(0 0 var(--lg-hero-bagliore) var(--lg-bagliore-colore));
}
 
 
/* ============================================================
   RICETTE PRONTE
   ------------------------------------------------------------
   Contorno scuro invece che chiaro (utile su loghi molto chiari):
     --lg-contorno-colore: rgba(0, 0, 0, .75);
 
   Filigrana delle Pick centrata invece che in basso a destra:
     --lg-pick-destra: 50%;  --lg-pick-basso: 50%;
   e poi togli la riga transform: none dalla regola 1, mettendo
     transform: translate(50%, 50%);
 
   Loghi in linea perfettamente allineati al testo: se dopo aver
   ingrandito ti sembrano alti o bassi, e' il comando "alza" che
   va ritoccato. Sono pochi pixel: -4px, -6px, -8px.
 
   Il logo della dashboard spinge il testo? Non puo' piu' succedere:
   la regola 8 dichiara position: absolute per conto suo. Se un giorno
   ricapitasse in un altro punto, il colpevole e' sempre lo stesso —
   una regola ".contenitore > *" scritta DOPO quella del logo, che lo
   rimette nel flusso.
 
   Tutto com'era prima di questo blocco:
     pick 104px/.32 · partite e classifiche 20px · matrix 20px
     dashboard 150px/.10 · hero 230px/.14
   ============================================================ */