/* ===== Miranda Sans (self-hosted, variable 400–700) ===== */
@font-face{font-family:"Miranda Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/miranda-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Miranda Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/miranda-sans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  /* altezza dell'intestazione fissa: le barre di ricerca si incollano
     sotto di lei, non sotto il bordo dello schermo */
  /* quanto scendono le barre di ricerca per incollarsi sotto
     l'intestazione: cresce con la tacca, altrimenti su iPhone finirebbero
     sotto la barra invece che sotto il suo bordo */
  --top-h:calc(73px + env(safe-area-inset-top));
  --bg:#07090e; --bg2:#0a0d14;
  --surface:#0f1218; --surface2:#161a23; --surface3:#1e232f;
  --glass:rgba(20,24,34,.62);
  --border:rgba(255,255,255,.075); --border2:rgba(255,255,255,.14);
  --text:#eef1f6; --muted:#98a0b2; --faint:#616a7c;

  /* ---- LA TAVOLOZZA: sei tinte, scritte una volta sola ----
     Ogni colore dell'app viene da qui. Prima le stesse sei tinte erano
     riscritte in sette punti diversi, ognuno con la sua opacita' a mano, e
     infatti non coincidevano: il fondo di un badge veniva da una tavolozza
     (#f59e0b) e il suo testo da un'altra (#f5b544). Due ambre diverse
     nello stesso oggetto.
     Le classi di colore (.blue, .amber, ...) ora non contengono colori:
     dicono solo QUALE tinta, e ogni componente si ricava fondo, bordo e
     testo da quella con color-mix. Come fanno le schede della strategia. */
  --t-blu:#4f8ef7; --t-viola:#8b5cf6; --t-verde:#22e39a;
  --t-ambra:#f5b544; --t-ciano:#38bdf8; --t-rosa:#f472b6; --t-rossa:#fb6f6f;

  /* i nomi per significato puntano alla tavolozza, non a un colore proprio */
  --accent:var(--t-blu); --accent2:var(--t-viola); --accent-cyan:var(--t-ciano);
  --accent-soft:#16233d;
  --pos:var(--t-verde); --warn:var(--t-ambra); --neg:var(--t-rossa);
  /* i quattro reparti: una tinta della tavolozza ciascuno */
  --P:var(--t-ambra); --D:var(--t-verde); --C:var(--t-blu); --A:var(--t-rosa);
  --grad:linear-gradient(115deg,var(--accent),var(--accent2));
  --grad-cool:linear-gradient(120deg,var(--accent-cyan),var(--accent2));

  /* ---- il viola del marchio: la fascia della home e il box "crea" ----
     Erano sette viola scuri scritti a mano (#170e2b, #1d1238, #130c22,
     #1c1136, #191030, #140c26, #1a1030) piu' un ottavo viola acceso
     (rgba(150,100,255)) che non era nemmeno --t-viola. Ora sono un fondo
     solo e due schiarite ricavate da quello. */
  --viola-fondo:#1a1030;
  --viola-alto:color-mix(in srgb,var(--viola-fondo) 84%,var(--t-viola));
  --viola-basso:color-mix(in srgb,var(--viola-fondo) 92%,#000);
  /* i testi sopra il viola: gli stessi tre livelli del resto del sito, solo
     intonati. Erano nove viola chiari diversi. */
  /* l'inchiostro scuro che si legge sopra il verde pieno (pulsanti "live") */
  --su-verde:color-mix(in srgb,var(--t-verde) 16%,#04150d);
  --viola-testo:color-mix(in srgb,var(--text) 90%,var(--t-viola));
  --viola-muted:color-mix(in srgb,var(--muted) 72%,var(--t-viola));
  --viola-faint:color-mix(in srgb,var(--faint) 66%,var(--t-viola));
  /* ---- la scala dei raggi ----
     Cinque gradini. C'erano tredici valori diversi (5,6,7,8,9,10,11,12,14,
     15,16,18,20) e i token esistevano ma erano usati undici volte contro
     novanta numeri scritti a mano: una scala che nessuno seguiva non e' una
     scala. Regola: piccolo per i controlli, medio per i riquadri interni,
     grande per i contenitori. */
  --r8:8px; --r10:10px; --r12:12px; --r16:16px; --r20:20px;
  /* forma a capsula: raggio = meta' altezza. Vale per pulsanti e chip.
     Prima si scriveva 999px in quindici punti e 99px in altri quattro. */
  --r-capsula:999px;
  /* La larghezza della colonna di lettura. C'erano 960px, 1000px, 1140px e
     720px sparsi fra il foglio di stile e cinque file di pagina: titolo e
     contenuto della stessa pagina finivano su due colonne diverse, sfalsati
     di venti pixel. Una misura sola, e tutto si incolonna. */
  --pagina:1000px;
  --shadow:0 18px 44px -20px rgba(0,0,0,.75);

  /* ---- luce e profondita' ----
     Due ombre invece di una: quella di contatto e' stretta e scura e dice
     che l'elemento poggia, quella ambientale e' larga e morbida e dice
     quanto e' sollevato. Con una sola ombra tutto galleggia allo stesso
     modo, ed e' il motivo per cui card e pulsanti sembravano lo stesso
     oggetto. */
  --ombra-poggia:0 1px 2px rgba(0,0,0,.5);
  --ombra-alza:0 10px 28px -14px rgba(0,0,0,.7);
  --ombra-sollevato:0 2px 4px rgba(0,0,0,.5),0 22px 50px -22px rgba(0,0,0,.8);
  /* bordo speculare: chiaro dove batte la luce, scuro sotto. Sostituisce il
     bordo piatto uguale su tutti i lati. */
  --luce-alto:inset 0 1px 0 rgba(255,255,255,.09);
  --luce-basso:inset 0 -1px 0 rgba(0,0,0,.32);
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg); color:var(--text);
  font-family:"Miranda Sans",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100vh;
  text-rendering:optimizeLegibility;
  }
/* la fascia della home e' larga 100vw: dove la barra di scorrimento occupa
   spazio, 100vw supera la finestra e comparirebbe uno scorrimento
   orizzontale. clip taglia senza creare un contenitore che scorre, e va
   messo anche sulla radice perche' e' lei a gestire lo scorrimento. */
html,body{overflow-x:clip}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58vw 52vh at 10% -10%,color-mix(in srgb,var(--t-blu) 20%,transparent),transparent 60%),
    radial-gradient(54vw 50vh at 94% -6%,color-mix(in srgb,var(--t-viola) 17%,transparent),transparent 60%),
    radial-gradient(60vw 55vh at 50% 112%,color-mix(in srgb,var(--t-verde) 7%,transparent),transparent 62%),
    var(--bg);}
.grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
/* gradient hairline border utility */
.num{font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer} input,select,textarea{font-family:inherit;font-size:15px}
a{color:var(--accent);text-decoration:none}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:var(--r8)}

.app{max-width:1460px;margin:0 auto}
/* full-bleed pages (listone, workspace strategia) */
body.wide .app{max-width:none}
body.wide .view{padding-left:clamp(16px,2.5vw,40px);padding-right:clamp(16px,2.5vw,40px)}
/* L'header non e' un box: finche' la pagina e' in cima e' trasparente e non
   si vede - logo, menu e ricerca stanno direttamente sul fondo. Il fondo
   scuro e la riga sotto arrivano solo scorrendo (classe .solida, messa da
   core.js), perche' senza il testo le passerebbe sotto e non si leggerebbe.
   Vale per tutte le pagine allo stesso modo: prima era cosi' solo in home. */
.topbar{position:sticky;top:0;z-index:60;background:transparent;
  border-bottom:1px solid transparent;
  /* A tutto schermo su OGNI pagina. La barra sta dentro .app, che sulle
     pagine normali e' capato a 1460px: senza questo sgancio l'header
     cambiava larghezza da una pagina all'altra. Margini negativi su
     entrambi i lati e non width:100vw: cosi' lo sforo della barra di
     scorrimento si divide in parti uguali invece di stare tutto a destra. */
  margin-inline:calc(50% - 50vw);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;min-height:62px;
  /* Aggiunto alla spaziatura in alto: su iPhone, quando il sito e' salvato
     nella schermata home, la pagina parte SOTTO la tacca - lo dicono i due
     meta in ogni HTML (viewport-fit=cover e status-bar-style
     black-translucent). Senza questa riga il marchio finiva mezzo coperto
     dal bollo nero della fotocamera. Su tutto il resto env() vale zero e
     non cambia niente. */
  padding:calc(10px + env(safe-area-inset-top)) 18px 10px;
  transition:background .28s ease,border-color .28s ease,backdrop-filter .28s ease}
.topbar.solida{background:linear-gradient(180deg,rgba(9,11,17,.94),rgba(9,11,17,.78));
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--border)}
.logo{display:flex;align-items:center;gap:3px;flex:none;cursor:pointer;order:1;line-height:0}
/* un quinto piu' grande di prima (51 e 44). Cresce anche la barra, che si
   misura sul marchio: se cambi queste due misure ricordati --top-h, che e'
   quanto scende la barra di ricerca per incollarsi sotto l'intestazione. */
.logo-img{height:61px;width:auto;display:block;
  filter:drop-shadow(0 3px 12px color-mix(in srgb,var(--t-viola) 45%,transparent))}
@media(max-width:560px){.logo-img{height:53px}}
/* la targhetta "beta": attaccata al nome come un apice, piccola quanto
   basta per leggersi e non un grammo di piu' */
.beta{align-self:flex-start;margin-top:11px;margin-left:-7px;font-size:8px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);line-height:1;
  border:1px solid var(--border2);border-radius:var(--r-capsula);padding:2px 4px;
  background:rgba(255,255,255,.05)}
/* ---- il colore della sezione ----
   Ogni voce del menu ha la sua tinta fin dalla home (le tessere). Da qui
   in poi quella tinta segue la pagina: un filo sotto l'intestazione, il
   punto davanti al titolo, l'icona dei pannelli, il bordo del campo in cui
   stai scrivendo. Quattro posti, sempre gli stessi, in tutte le sezioni:
   e' quello che rende le pagine riconoscibili senza farle diverse. */
body{--sez:var(--t-blu)}
body.sez-leghe{--sez:var(--t-ambra)}
body.sez-aste{--sez:var(--t-viola)}
body.sez-listone{--sez:var(--t-blu)}
body.sez-guida{--sez:var(--t-ciano)}
body.sez-astalive{--sez:var(--t-verde)}
body.sez-admin{--sez:var(--t-rossa)}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--sez),color-mix(in srgb,var(--sez) 30%,transparent) 38%,transparent 70%);
  opacity:0;transition:opacity .3s}
.topbar.solida::after{opacity:.85}

/* ---- il menu principale ----
   Libero: niente scatola, le voci stanno direttamente sul fondo della
   pagina, su ogni pagina allo stesso modo. La voce attiva prende il colore
   della sua tessera in home e una riga sottile dello stesso colore: e'
   l'unico segno, e basta. */
.topnav{order:4;display:flex;gap:3px;width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:1px}
.topnav::-webkit-scrollbar{display:none}
.topnav-item{position:relative;display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--muted);font-size:13.5px;font-weight:600;
  padding:8px 13px;border-radius:var(--r10);white-space:nowrap;flex:none;transition:color .18s}
.topnav-item svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.topnav-item:hover{color:var(--text)}
.topnav-item.on{color:var(--tinta,var(--text))}
.topnav-item.on::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;
  border-radius:2px;background:var(--tinta,var(--accent))}
.search{position:relative;order:3;width:100%;max-width:none;min-width:0;flex:none}
.search input{width:100%;background:rgba(255,255,255,.045);border:1px solid var(--border2);color:var(--text);
  border-radius:var(--r-capsula);padding:9px 16px 9px 40px;min-height:42px;transition:border-color .18s,background .18s}
.search input::placeholder{color:var(--faint)}
/* il campo attivo prende il colore della sezione: e' lo stesso segnale
   della voce di menu accesa, ripetuto dove stai scrivendo */
.search input:focus{background:rgba(255,255,255,.07);border-color:color-mix(in srgb,var(--sez) 55%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sez) 14%,transparent)}
.search .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:var(--muted);fill:none;stroke-width:2}
/* ---- la ricerca dove servono i giocatori: grande e sempre in alto ----
   Non sta piu' nell'intestazione, dove era piccola e quasi mai quella
   giusta: sta dentro listone, strategia e asta, larga tutta la colonna e
   incollata in cima mentre la lista scorre. */
.cerca-forte{position:sticky;top:var(--top-h);z-index:12;background:var(--bg);
  padding:6px 0 10px;margin:0 0 4px}
.cerca-forte .search{order:0;width:100%}
.cerca-forte input{min-height:50px;font-size:15.5px;padding-left:44px;
  background:rgba(255,255,255,.06)}
.cerca-forte input:focus{background:rgba(255,255,255,.09)}
.tb-right{display:flex;align-items:center;gap:10px;flex:none;order:2;margin-left:auto}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--grad);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13.5px;color:#fff;flex:none;
  box-shadow:0 3px 12px color-mix(in srgb,var(--t-blu) 40%,transparent),inset 0 0 0 1px rgba(255,255,255,.14)}
.backbtn{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.05);border:1px solid var(--border2);
  color:var(--muted);border-radius:var(--r10);padding:6px 11px 6px 8px;font-size:13px;font-weight:600;flex:none}
.backbtn:hover{color:var(--text);background:rgba(255,255,255,.09)} .backbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2}
/* nel workspace la pagina non scorre sotto l'intestazione: scorrono le
   colonne, quindi le barre si incollano al bordo della loro colonna */
@media(min-width:960px){
  body.workspace .cerca-forte,body.workspace .live-cima{top:0}
}
/* Marchio a sinistra, menu accanto, e il bollo dell'utente all'estremita'
   destra: e' l'ordine che si trova ovunque, e cercare il proprio account
   dalla parte sbagliata e' il tipo di attrito che non si nota ma resta. */
@media(min-width:1000px){
  .topnav{order:2;width:auto;margin:0 4px}
  .search{order:3;flex:0 1 320px;width:auto;margin-left:auto}
  .tb-right{order:4;margin-left:auto}
}
/* ---- il menu a tre righe, sul telefono ----
   Le voci erano una striscia da scorrere di lato e le ultime non le
   trovava nessuno. Ora stanno tutte in un pannello che si apre dal
   pulsante, si chiude scegliendo una voce o toccando fuori. */
.hamb{display:none}
@media(max-width:999px){
  .hamb{display:flex;flex-direction:column;justify-content:center;gap:4px;flex:none;
    width:40px;height:40px;padding:0 9px;cursor:pointer;
    background:rgba(255,255,255,.05);border:1px solid var(--border2);border-radius:var(--r10)}
  .hamb span{display:block;height:2px;border-radius:1px;background:var(--text);
    transition:transform .2s,opacity .2s}
  body.menu-aperto .hamb span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.menu-aperto .hamb span:nth-child(2){opacity:0}
  body.menu-aperto .hamb span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .topnav{position:absolute;top:calc(100% - 4px);left:12px;right:12px;width:auto;margin:0;
    flex-direction:column;gap:2px;padding:8px;overflow:visible;z-index:70;
    background:rgba(15,18,24,.98);backdrop-filter:blur(16px);
    border:1px solid var(--border2);border-radius:var(--r16);
    box-shadow:0 26px 60px -22px rgba(0,0,0,.92);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .18s,transform .18s,visibility .18s}
  body.menu-aperto .topnav{opacity:1;visibility:visible;transform:none}
  .topnav-item{padding:13px 14px;font-size:15px;border-radius:var(--r10);width:100%}
  .topnav-item.on{background:rgba(255,255,255,.06);color:var(--text)}
  .topnav-item.on::after{display:none}
}
.view{padding:18px}
@media(min-width:880px){.view{padding:28px 32px}}
/* in-auction secondary tabs */
/* nome della strategia, sopra le schede del workspace */
.strat-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 18px 18px;border-bottom:1px solid var(--border)}
.strat-bar:empty{display:none;border-bottom:none;padding:0}
/* prende lo spazio che avanza invece di stare stretta in mezzo: cosi' il
   nome della strategia si legge intero finche' c'e' posto */
.sb-sx{display:flex;align-items:center;gap:13px;min-width:0;flex:1 1 auto}
/* incolonnati: sopra la squadra in piccolo, sotto il nome della strategia
   in grande. E' la gerarchia vera - la squadra dice dove sei, il nome
   dice cosa stai facendo - e in orizzontale non ci stavano comunque. */
.sb-nome{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  background:none;border:0;padding:0;color:var(--text);text-align:left;
  min-width:0;max-width:100%;font-family:inherit}
.sb-nome.modificabile{cursor:pointer;border-radius:var(--r12);padding:5px 10px;margin:-5px -10px;
  transition:background .15s}
.sb-nome.modificabile:hover{background:rgba(255,255,255,.05)}
.sb-squadra{display:flex;align-items:center;gap:7px;min-width:0;max-width:100%}
.sb-squadra .sq-logo{flex:none}
.sb-sqn{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-titolo{display:flex;align-items:center;gap:10px;font-size:38px;font-weight:800;
  letter-spacing:-.03em;min-width:0;max-width:100%;line-height:1.12}
.sb-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-matita{color:var(--muted);flex:none;opacity:0;transition:opacity .15s}
.sb-nome.modificabile:hover .sb-matita,.sb-nome.modificabile:focus-visible .sb-matita{opacity:1}
.sb-matita svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;display:block}
.sb-input{font-size:26px;font-weight:750;padding:8px 14px;min-width:0;width:min(460px,60vw)}
@media(hover:none){.sb-matita{opacity:1}}
/* come sta venendo la rosa, sempre sotto gli occhi */
.sb-coda{display:flex;align-items:center;gap:20px;flex:none;min-width:0}
.rosa-ind{display:flex;gap:20px;flex:none}
.ri{text-align:right;line-height:1.2}
.ri b{display:block;font-size:19px;font-weight:750;font-variant-numeric:tabular-nums;color:var(--text)}
.ri b i{font-style:normal;font-size:12px;font-weight:600;color:var(--muted)}
.ri span{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:650}
.ri.su b{color:var(--pos)}.ri.giu b{color:var(--neg)}.ri.pari b{color:var(--warn)}
/* Sul telefono l'impaginazione e' la stessa - squadra sopra, nome sotto -
   e cambiano solo le misure: nascondere la squadra come si faceva prima
   toglieva l'unico posto in cui si legge con quale rosa stai lavorando. */
@media(max-width:900px){
  .strat-bar{padding:15px 14px 14px;flex-wrap:wrap}
  .sb-sx{flex:1 1 auto;min-width:0}
  .sb-coda{flex:none}
  .sb-sqn{font-size:11px;letter-spacing:.07em}
  .sq-logo.xs{width:21px;height:21px}
  .sb-titolo{font-size:28px;gap:8px}
  .sb-input{font-size:18px}
  .rosa-ind{gap:13px}
  .sb-coda{gap:12px}
  .ri b{font-size:15px}
  .ri span{font-size:9px}
}
/* sui telefoni stretti resta solo la titolarita': il rendimento e' il primo
   che si puo' sacrificare (prima era il terzo di tre, ora il secondo di due) */
@media(max-width:620px){.rosa-ind .ri:nth-child(2){display:none}}
.nav{display:flex;gap:4px;padding:10px 18px;overflow-x:auto;border-bottom:1px solid var(--border)}
.nav:empty{display:none;border-bottom:none;padding:0}
.nav button{background:none;border:none;color:var(--muted);display:flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:var(--r10);white-space:nowrap;flex:none;transition:color .15s,background .15s}
.nav button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;flex:none}
.nav button.on{color:var(--text);background:rgba(255,255,255,.06)} .nav button.on svg{stroke:var(--accent)}

.card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,0)),var(--surface);
  border:1px solid var(--border);border-radius:var(--r20);padding:16px;
  box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-poggia)}
.card+.card{margin-top:14px}
/* Le etichette di sezione devono orientare, non farsi leggere: piu' piccole
   e piu' spaziate. Il colore resta --muted e non --faint: a 11px il faint
   scende a 3,6:1 di contrasto, sotto la soglia leggibile. */
/* I titoletti di sezione erano un occhiello: undici pixel e mezzo, tutto
   maiuscolo, del colore dei testi secondari. Sembravano etichette di
   servizio, non titoli, e "Riprendi da dove eri" - che apre una sezione
   intera - si leggeva meno delle schede che introduce. Ora sono titoli
   veri: piu' grandi, in tondo, del colore del testo. Il punto colorato
   davanti resta a dire di che sezione sono. */
.sec-title{font-size:17px;letter-spacing:-.015em;color:var(--text);margin:0 0 12px;font-weight:750}
.sec-title .muted{font-size:13.5px;font-weight:650}
.row{display:flex;align-items:center;gap:10px}.between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.muted{color:var(--muted)}.faint{color:var(--faint)}.small{font-size:13px}
.grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.grid4{grid-template-columns:repeat(4,1fr)}}

/* i pulsanti sono capsule: e' la forma che regge da sola la concentricita'
   dentro qualunque contenitore, e distingue subito il comando dal contenuto */
.btn{background:var(--surface2);color:var(--text);border:1px solid var(--border2);border-radius:var(--r-capsula);
  padding:10px 18px;font-size:14px;font-weight:600;min-height:42px;
  transition:background .18s,border-color .18s,box-shadow .18s;
  box-shadow:var(--luce-alto),var(--ombra-poggia);
  display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;flex:none}
.btn:hover{background:var(--surface3);border-color:rgba(255,255,255,.2)}
.btn.primary{background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.2),
    0 1px 2px rgba(0,0,0,.4),0 12px 26px -14px color-mix(in srgb,var(--t-blu) 75%,transparent)}
.btn.primary:hover{filter:brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36),inset 0 -1px 0 rgba(0,0,0,.2),
    0 1px 2px rgba(0,0,0,.4),0 14px 30px -14px color-mix(in srgb,var(--t-blu) 90%,transparent)}
.btn.lg{padding:14px 26px;font-size:15px;min-height:50px}
.btn.ghost{background:transparent;box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.04)}
.btn.sm{padding:7px 14px;min-height:34px;font-size:13px}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* tondo: e' una capsula quadrata, e i comandi secondari smettono di
   sembrare piccoli riquadri di contenuto */
.iconbtn{background:var(--surface2);border:1px solid var(--border2);border-radius:50%;width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--muted);flex:none;
  box-shadow:var(--luce-alto);transition:background .18s,color .18s,border-color .18s}
.iconbtn:hover{color:var(--text);background:var(--surface3);border-color:rgba(255,255,255,.2)}
.iconbtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9}
/* acceso: il tasto dice che quella cosa e' gia' attiva (l'amministratore) */
.iconbtn.acceso{color:var(--t-oro,#e0b44c);border-color:color-mix(in srgb,#e0b44c 45%,transparent);
  background:color-mix(in srgb,#e0b44c 12%,var(--surface2))}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13px;color:var(--muted);font-weight:550}
.input,select.input{background:var(--surface2);border:1px solid var(--border2);color:var(--text);
  border-radius:var(--r12);padding:11px 13px;width:100%;min-height:44px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
textarea.input{min-height:70px;resize:vertical;line-height:1.5}

/* ---- una tinta per elemento ----
   La classe dice solo quale tinta; fondo, bordo e testo se li ricava il
   componente. Cosi' la stessa parola ("verde") vuol dire lo stesso colore
   nel badge, nella fascia di prezzo e nella tessera della home. */
.blue,.media{--tinta:var(--t-blu)}
.violet,.semi{--tinta:var(--t-viola)}
.green{--tinta:var(--t-verde)}
.amber,.gold,.top{--tinta:var(--t-ambra)}
.cyan,.low{--tinta:var(--t-ciano)}
.pink,.scommessa{--tinta:var(--t-rosa)}
.red{--tinta:var(--t-rossa)}
.bought{--tinta:var(--t-verde)}

.chip{display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13.5px;width:30px;height:30px;border-radius:var(--r8);flex:none;
  background:color-mix(in srgb,var(--tinta,var(--t-blu)) 22%,transparent);color:var(--tinta,var(--t-blu))}
.chip.P{--tinta:var(--P)}.chip.D{--tinta:var(--D)}
.chip.C{--tinta:var(--C)}.chip.A{--tinta:var(--A)}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:var(--r-capsula);background:var(--surface2);color:var(--muted);border:1px solid var(--border);flex:none;white-space:nowrap}
.tag b{font-weight:800;margin-left:2px}
.tag svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;vertical-align:-2px;opacity:1}
/* in tinta: un velo del colore sotto, il bordo dello stesso colore piu'
   presente, il testo il colore pieno. Un solo colore per badge, non due. */
.tag.gold,.tag.green,.tag.red,.tag.blue,.tag.ball{color:var(--tinta);
  background:color-mix(in srgb,var(--tinta) 11%,transparent);
  border-color:color-mix(in srgb,var(--tinta) 26%,transparent)}
/* il ballottaggio: ambra come tutto cio' che e' "attenzione, non e' detto".
   In versione mini resta la sola icona, per le caselle strette. */
.tag.ball{--tinta:var(--t-ambra);padding:1px 6px;font-size:10.5px;gap:3px}
.tag.ball.mini{padding:1px 4px;margin-left:5px}
.tag.ball svg{width:12px;height:12px;stroke-width:2.2}
/* stemmi squadre */
.tlogo{width:17px;height:17px;flex:none;vertical-align:-4px;margin-right:5px;border-radius:50%}
/* La sigla nel bollino compare solo dalle misure medie in su: a 17 pixel
   tre lettere sarebbero tre macchie. Li' parlano i colori, che è quello
   che fa anche uno stemma vero grande come un chicco di riso. */
.bl-sig{display:none;font-size:15px;font-weight:800;letter-spacing:.02em;
  font-family:inherit;paint-order:stroke}
.tlogo.lg .bl-sig,.tlogo.xl .bl-sig{display:block}
.tlogo.lg{width:30px;height:30px;margin-right:0}
.tlogo.xl{width:36px;height:36px;margin-right:0}
.tier{display:inline-flex;width:18px;height:18px;border-radius:var(--r8);align-items:center;justify-content:center;font-size:10px;font-weight:750}
.tierA{background:color-mix(in srgb,var(--t-verde) 18%,transparent);color:var(--pos)}.tierB{background:color-mix(in srgb,var(--t-blu) 18%,transparent);color:var(--C)}
.tierC{background:color-mix(in srgb,var(--t-ambra) 16%,transparent);color:var(--warn)}.tierD{background:color-mix(in srgb,var(--muted) 16%,transparent);color:var(--muted)}
.bar{height:7px;border-radius:var(--r-capsula);background:var(--surface3);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:var(--r-capsula);background:var(--accent);transition:width .3s}
.bar.over>i{background:var(--neg)}.bar.ok>i{background:var(--pos)}
.stats{width:100%;border-collapse:collapse;font-size:13px}
.stats th,.stats td{padding:8px 6px;text-align:center;border-bottom:1px solid var(--border)}
.stats th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.stats td:first-child,.stats th:first-child{text-align:left}

/* HERO + TILES */
.hero{position:relative;border-radius:var(--r20);padding:34px 30px;margin-bottom:20px;overflow:hidden;min-height:368px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  background:
    radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--t-viola) 28%,transparent),transparent 55%),
    radial-gradient(120% 160% at 0% 100%,color-mix(in srgb,var(--t-blu) 24%,transparent),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0)),var(--surface2);
  border:1px solid var(--border);box-shadow:var(--shadow)}
.hero::after{content:"";position:absolute;top:-40%;right:-10%;width:46%;height:180%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--t-viola) 35%,transparent),transparent);filter:blur(24px);opacity:.8}
.hero>*{position:relative;z-index:2}
/* Gufo con la corona, a destra nell'hero. Nudo: niente ombra sotto e
   niente sfumatura sul lato sinistro. Le aveva tutte e due e servivano a
   coprire uno scontorno che sbavava; adesso che il ritaglio e' pulito
   facevano solo da velo, e la foto si vede per quella che e'. */
.hero-gufo{position:absolute;z-index:1;right:10px;top:14px;bottom:0;
  height:calc(100% - 14px);width:auto;
  object-fit:contain;object-position:bottom right;pointer-events:none;user-select:none}
@media(max-width:900px){.hero-gufo{opacity:.3;right:-40px}}
@media(max-width:560px){.hero-gufo{display:none}}

/* ---- apertura a tutta larghezza ----
   Non una card ma una fascia viola scura che esce dalla colonna e tocca i
   due bordi. Il testo dentro torna sulla stessa colonna dei riquadri, cosi'
   il bordo sinistro resta allineato scorrendo. */
.hero.fascia{
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  /* risale del padding di .view per attaccarsi alla barra in alto: il
     valore cambia col respiro della pagina (18px, 28px sopra 880) */
  margin-top:-18px;margin-bottom:26px;
  border:0;border-radius:0;box-shadow:none;
  padding:56px 24px 60px;min-height:430px;
  align-items:stretch;
  background:
    radial-gradient(78% 110% at 76% 8%,color-mix(in srgb,var(--t-viola) 44%,transparent),transparent 62%),
    radial-gradient(65% 100% at 4% 100%,color-mix(in srgb,var(--t-blu) 20%,transparent),transparent 60%),
    linear-gradient(180deg,var(--viola-alto) 0%,var(--viola-fondo) 52%,var(--viola-basso) 100%)}
/* si stacca dal resto senza una riga netta */
.hero.fascia::before{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;
  background:linear-gradient(180deg,transparent,rgba(8,10,14,.55));pointer-events:none;z-index:1}
.hero.fascia::after{display:none}
.hero-dentro{position:relative;z-index:2;max-width:var(--pagina);margin:0 auto;width:100%;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
/* il gufo resta agganciato al bordo destro della fascia */
/* appoggiato in basso e non a tutta altezza: cosi' non si mangia la fascia */
.hero.fascia .hero-gufo{right:max(0px,calc((100vw - 1300px)/2));
  top:auto;bottom:0;height:79%}
@media(min-width:880px){.hero.fascia{margin-top:-28px}}
@media(max-width:1100px){.hero.fascia .hero-gufo{right:0}}

/* ---- in home la fascia viola risale dietro la barra trasparente ----
   (la trasparenza della barra ora e' di tutte le pagine, vedi .topbar)
   --barra e --vpad li misura home.js: dipendono da quanto la barra va a
   capo e dal respiro della pagina, che in CSS non si sanno. */
/* la fascia risale anche dietro la barra, e il testo scende per non finirci sotto */
body.home .hero.fascia{
  margin-top:calc(-1 * (var(--barra,74px) + var(--vpad,28px)));
  padding-top:calc(52px + var(--barra,74px));
  min-height:calc(516px + var(--barra,74px))}
@media(max-width:760px){
  body.home .hero.fascia{padding-top:calc(30px + var(--barra,74px));
    min-height:calc(400px + var(--barra,74px))}
}
@media(max-width:760px){
  .hero.fascia{padding:38px 18px 44px;min-height:340px}
}
.hero .eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.09em;margin-bottom:14px;padding:5px 11px;border-radius:var(--r-capsula);
  background:rgba(255,255,255,.05);border:1px solid var(--border2)}
.hero .eyebrow .pulse{width:7px;height:7px;border-radius:50%;background:var(--pos);box-shadow:0 0 0 0 color-mix(in srgb,var(--t-verde) 60%,transparent);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--t-verde) 50%,transparent)}70%{box-shadow:0 0 0 7px color-mix(in srgb,var(--t-verde) 0%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--t-verde) 0%,transparent)}}
.hero h1{font-size:clamp(24px,3.6vw,34px);line-height:1.08;margin-bottom:10px;letter-spacing:-.02em;max-width:16ch}
.hero h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{color:var(--muted);margin:0 0 20px;max-width:52ch;font-size:15.5px}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:10px}
/* Quattro tessere, due per riga a ogni larghezza: a tre per riga la quarta
   restava sola in fondo e la griglia sembrava monca. Due e due si chiude,
   e le tessere diventano larghe abbastanza da mettere il simbolo di fianco
   al testo invece che sopra - che a mezza pagina di larghezza e' l'unico
   modo di non lasciare un buco in mezzo. */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:24px}
@media(min-width:720px){
  .tiles{gap:18px}
  .tile{display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:20px;align-items:center;padding:26px 28px}
  .tile .ti{margin-bottom:0;grid-row:1/3;width:56px;height:56px}
  .tile .ti svg{width:26px;height:26px}
  .tile .tt{align-self:end;font-size:19px}
  .tile .td{align-self:start;margin-top:4px}
}
/* Al passaggio del mouse cambia la luce, non la posizione: il salto di 3px
   faceva ballare l'intera griglia e non aggiungeva niente. */
/* Ogni tessera veste la sua tinta: bordo nel colore e velo che parte
   dall'angolo in alto a destra e si spegne - la stessa ricetta delle schede
   della strategia, cosi' home e strategie parlano la stessa lingua. Prima
   la tessera era grigia e il colore stava solo nell'icona. */
.tile{position:relative;overflow:hidden;
  background:
    radial-gradient(110% 130% at 100% 0%,color-mix(in srgb,var(--tinta,var(--t-blu)) 22%,transparent),transparent 62%),
    linear-gradient(165deg,color-mix(in srgb,var(--tinta,var(--t-blu)) 10%,transparent),transparent 55%),
    var(--surface);
  border:1px solid color-mix(in srgb,var(--tinta,var(--t-blu)) 30%,transparent);
  border-radius:var(--r20);padding:24px;cursor:pointer;text-align:left;color:var(--text);
  box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-poggia);
  transition:border-color .22s,box-shadow .22s,background .22s}
.tile:hover{border-color:color-mix(in srgb,var(--tinta,var(--t-blu)) 55%,transparent);
  box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-sollevato)}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .28s;pointer-events:none;
  background:radial-gradient(120% 120% at 0% 0%,
    color-mix(in srgb,var(--tinta,var(--t-blu)) 15%,transparent),transparent 55%)}
.tile:hover::after{opacity:1}
/* L'icona non e' piu' un quadrotto pieno con l'alone colorato sotto: e' una
   lastrina smerigliata con il simbolo in tinta. Raggio concentrico rispetto
   alla card: 20 del contenitore meno i 20 di padding non basterebbero, quindi
   si tiene il minimo di 14 che mantiene le forme annidate coerenti. */
.tile .ti{width:48px;height:48px;border-radius:var(--r16);display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.25),
    0 2px 6px -2px rgba(0,0,0,.5)}
/* il colore resta, ma come velo dietro il vetro invece che come tinta piena.
   Il primo background e' il ripiego per chi non conosce color-mix. */
.tile .ti::before{content:"";position:absolute;inset:0;
  background:var(--tinta,var(--t-blu));
  background:linear-gradient(158deg,
    color-mix(in srgb,var(--tinta,var(--t-blu)) 82%,transparent),
    color-mix(in srgb,var(--tinta,var(--t-blu)) 44%,transparent))}
.tile .ti svg{position:relative;z-index:1;width:23px;height:23px;stroke:#fff;fill:none;stroke-width:1.75}
.tile .tt{font-weight:700;font-size:16.5px;display:flex;align-items:center;gap:6px}
.tile .tt .go{margin-left:auto;color:var(--muted);transition:transform .2s,color .2s}
.tile:hover .tt .go{transform:translateX(3px);color:var(--text)}
.tile .td{color:var(--muted);font-size:13px;margin-top:4px;line-height:1.5}
/* niente elenchi di tinte qui: la classe di colore sta sia su .tile sia su
   .ti, e --tinta viene da quella (vedi la tavolozza in cima). Prima lo stesso
   colore era scritto due volte, come esadecimale per l'icona e come rgba per
   l'alone, e le due opacita' non erano nemmeno le stesse. */
/* home */
.home-wrap{max-width:var(--pagina);margin:0 auto}
/* Solo in home la colonna si allarga: le tessere sono sei riquadri, non
   testo, e a 960px restavano strette in mezzo al buio. Guida e consigli
   riusano .home-wrap ma restano a 960: la' dentro ci sono paragrafi, e una
   riga lunga 1140px non si legge. La fascia viola si allarga in pari. */
body.home .home-wrap,body.home .hero-dentro{max-width:1140px} /* la home respira di piu': e' una vetrina, non una lista */
.recent-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.recent-grid{grid-template-columns:repeat(3,1fr)}}
/* Al passaggio del mouse cambia la luce, non la posizione - come le tessere
   e le schede della strategia. Era l'unico elemento del sito che si alzava
   di 2px, e in una griglia di card faceva ballare la riga. */
.card.recent{cursor:pointer;text-align:left;width:100%;color:var(--text);display:block;
  transition:border-color .2s,box-shadow .2s}
.card.recent:hover{border-color:var(--border2);
  box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-sollevato)}
.recent .rname{font-weight:650;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent .go2{color:var(--muted);flex:none}
.recent .go2 svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
/* card con azioni: il link steso rende cliccabile tutta la card, i pulsanti
   ci stanno sopra */
/* generic page header */
.page-head{max-width:var(--pagina);margin:0 auto 20px}
.pagina{max-width:var(--pagina);margin:0 auto}
.page-head h1{font-size:clamp(21px,2.6vw,27px);letter-spacing:-.02em}
.page-head p{color:var(--muted);margin:6px 0 0;max-width:60ch}
.cons-grid .card+.card,.recent-grid .card+.card{margin-top:0}

/* stepper
   Niente fascia che scorre di lato: i quattro reparti stanno sempre tutti in
   vista. Due per riga, e quattro in fila solo dove ci stanno per intero.
   La fascia che scorreva era il motivo per cui a mezze larghezze si vedevano
   tre reparti e mezzo con le etichette spezzate a capo. */
.stepper{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;margin-bottom:12px}
.step{min-width:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r16);padding:12px 14px;text-align:left;cursor:pointer;
  box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-poggia);
  transition:border-color .18s,background .18s,box-shadow .18s}
.step.on{border-color:var(--accent);background:var(--accent-soft)}
.step .sc{font-weight:700;font-size:13px;display:flex;align-items:center;gap:6px}
/* ---- la riga sopra i quattro reparti: resta solo il totale ---- */
.budget-head{display:flex;align-items:flex-end;justify-content:flex-end;gap:18px;
  margin-bottom:8px;flex-wrap:wrap}
.budget-tot{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
.budget-tot b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--pos)}
.budget-tot span{font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);font-weight:650}
.budget-tot.neg b{color:var(--neg)}
.budget-tot.warn b{color:var(--warn)}
.budget-tot .linkbtn{margin:0;font-size:11.5px}
.step .sc{gap:7px}
/* "Centrocampisti" e' la parola piu' lunga e decide la larghezza minima del
   riquadro. Se un giorno non ci sta - schermo strettissimo, testo ingrandito
   dal sistema - va accorciata con i puntini invece di scavalcare il bordo. */
.step .sc b{font-size:13px;font-weight:700;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Il campo e' un campo: etichetta per esteso e riquadro visibile. Di base
   l'etichetta sta sopra e il campo prende tutta la larghezza del riquadro -
   una riga sola, che non si spezza mai, e un bersaglio grosso per il dito.
   Affiancati (piu' sotto) solo dove c'e' spazio davvero. */
.step .s-campo{display:block;margin-top:9px;cursor:text}
.step .s-lab{display:block;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);font-weight:700;text-align:left;margin-bottom:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* il tetto e' quello che tiene il campo un campo: senza, su schermi larghi
   si stirava per mezzo riquadro e non sembrava piu' una cosa da scrivere */
.step .s-inp{display:flex;align-items:center;justify-content:space-between;gap:3px;
  max-width:190px;
  background:rgba(0,0,0,.34);border:1px solid var(--border2);border-radius:var(--r10);
  padding:6px 10px;transition:border-color .15s,background .15s}
.step .s-inp:hover{border-color:var(--accent)}
.step .s-inp:focus-within{border-color:var(--accent);background:rgba(0,0,0,.5)}
.step .s-inp i{font-style:normal;font-size:12px;font-weight:700;color:var(--muted)}
/* 16px non e' un vezzo: sotto quella misura il telefono ingrandisce la
   pagina appena tocchi il campo e non la rimette piu' come stava */
.step-tg{width:100%;background:none;border:0;color:var(--text);padding:0;
  font-size:16px;font-weight:800;text-align:left;font-family:inherit;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.step-tg::-webkit-outer-spin-button,.step-tg::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.step-tg:focus{outline:none}
.memo-tot{font-size:12.5px;color:var(--muted);margin:-6px 0 12px}
.memo-tot b{color:var(--text)}
.memo-tot.neg{color:var(--neg)}
/* Due per riga: il riquadro si stringe, quindi il nome del reparto va di un
   filo piu' piccolo. Sono i 4px che fanno stare "Centrocampisti" per intero
   su un telefono da 360px, che e' mezzo mondo Android. */
@media(max-width:759px){
  .step{padding:11px 12px}
  .step .sc{gap:6px}
  .step .sc b{font-size:12.5px}
}
/* Sui telefoni piu' stretti di cosi' due riquadri per riga diventano due
   colonnine dove "Centrocampisti" non ci sta comunque: meglio uno per riga. */
@media(max-width:359px){
  .stepper{grid-template-columns:minmax(0,1fr)}
}
/* Appena i quattro riquadri ci stanno in fila, ci stanno: sono i quattro
   reparti, e una riga sola e' la forma che gli somiglia. Il campo resta
   sotto l'etichetta. */
@media(min-width:760px){
  .stepper{grid-template-columns:repeat(4,minmax(0,1fr))}
  .step{padding:11px 12px}
  .step .s-inp{max-width:150px}
}
/* Da qui c'e' spazio anche per mettere l'etichetta accanto al campo, e il
   riquadro torna basso: nel workspace l'altezza in cima e' spazio che
   togli alla lista dei giocatori. */
@media(min-width:1000px){
  .step .s-campo{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .step .s-lab{margin-bottom:0}
  .step .s-inp{flex:none;justify-content:flex-start;padding:4px 9px}
  .step-tg{width:46px;text-align:right}
}

.filters{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.filters .input{flex:1;min-width:120px}.filters select.input{flex:none;width:auto;min-width:104px}
/* sul telefono le tendine si dividono la riga a due a due */
@media(max-width:700px){
  .filters select.input{flex:1 1 calc(50% - 4px);min-width:0;width:auto}
}

/* ---- listone: una riga per giocatore, dati grandi ---- */
.plist-rows{display:flex;flex-direction:column;gap:8px}
.prow{display:flex;align-items:center;gap:16px;border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,0)),var(--surface);
  border-radius:var(--r12);padding:14px 20px;cursor:pointer;
  box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-poggia);
  transition:border-color .18s,background .18s}
/* Ogni riga cliccabile risponde allo stesso modo, in tutte le pagine: si
   schiarisce e prende un filo del colore della sezione sul bordo sinistro.
   E' un'ombra interna e non un bordo vero, cosi' il testo non si sposta di
   un pixel al passaggio del mouse. */
.prow:hover{border-color:var(--border2);background:var(--surface2);
  box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-poggia),inset 3px 0 0 var(--sez)}
.prow .chip{width:34px;height:34px;font-size:15px}
.prow-id{flex:1 1 220px;min-width:180px}
.prow-id .pname{font-size:17.5px}
.prow-id .pmeta{font-size:13.5px;margin-top:2px}
.prow-tags{margin-top:5px;display:flex;gap:5px;flex-wrap:wrap}
.prow-stats{display:flex;gap:4px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.pstat{width:84px;flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 4px;border-radius:var(--r10);background:var(--surface2);border:1px solid var(--border)}
.pstat span{font-size:10px;font-weight:650;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pstat b{font-size:17px;font-weight:750;color:var(--text);line-height:1.1}
.pstat.sand{width:104px}
.pstat.sand b{color:var(--warn)}
/* indice di titolarita' */
/* La scala della titolarita': cinque gradini da verde a rosso, ricavati per
   mescolanza dai tre colori che il sito usa gia' per "bene/attenzione/male".
   Prima i due gradini intermedi erano un verde-lime (#a3e635) e un arancione
   (#fb923c) che non compaiono da nessun'altra parte: due colori in piu' nel
   sito per dire una cosa che sta in mezzo a due che c'erano gia'. */
.pstat.t-alta b{color:var(--pos)}
.pstat.t-buona b{color:color-mix(in srgb,var(--pos) 62%,var(--warn))}
.pstat.t-media b{color:var(--warn)}
.pstat.t-bassa b{color:color-mix(in srgb,var(--warn) 45%,var(--neg))}
.pstat.t-nulla b{color:var(--neg)}
.prow-right{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none;width:74px}
.prow-val{flex:none;text-align:right;min-width:86px;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.prow-val b{font-size:23px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.prow-val span{font-size:11px;color:var(--muted)}
.prow-val.su b{color:var(--pos)}
.prow-val.giu b{color:var(--neg)}
.prow-val.pari b{color:var(--muted)}
.prow-val.vuoto b{color:var(--faint);font-size:21px}
@media(max-width:1500px){.prow .prow-stats{flex-basis:100%;order:5;justify-content:flex-start;border-top:1px solid var(--border);padding-top:10px;margin-top:2px}
  .prow{flex-wrap:wrap;row-gap:8px}}
@media(max-width:640px){.prow .pstat{width:calc(25% - 3px)}.prow .pstat.sand{width:calc(50% - 2px)}}

/* ---- workspace assistente: due colonne che scorrono in autonomia ---- */
/* ================= ASTA LIVE ================= */
/* Il verde e' l'identita' dell'asta live in tutto il sito: il pulsante, la
   pastiglia nella barra, la tessera in home. Il secondo verde (#12b981) che
   scuriva il gradiente ora si ricava da --pos, e il testo scuro sopra pure:
   erano tre colori scritti a mano per dire "verde". */
.btn.live{background:linear-gradient(115deg,var(--pos),color-mix(in srgb,var(--pos) 72%,#0b3a26));
  border-color:transparent;color:var(--su-verde);
  box-shadow:0 6px 18px -8px color-mix(in srgb,var(--pos) 80%,transparent),inset 0 0 0 1px rgba(255,255,255,.18)}
.btn.live:hover{filter:brightness(1.08)}
.live-bar{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:linear-gradient(120deg,color-mix(in srgb,var(--t-blu) 12%,transparent),color-mix(in srgb,var(--t-viola) 10%,transparent)),var(--surface);
  border:1px solid var(--border2);border-radius:var(--r16);padding:14px 18px;margin-bottom:14px}
.live-budget{flex:none;padding-right:22px;border-right:1px solid var(--border2)}
.lb-big{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--pos)}
.lb-big.neg{color:var(--neg)}
.lb-lab{font-size:11.5px;color:var(--muted);margin-top:3px;text-transform:uppercase;letter-spacing:.05em}
.live-kpis{display:flex;gap:22px;flex-wrap:wrap;flex:1}
.live-kpis>div{display:flex;flex-direction:column}
.live-kpis b{font-size:19px;font-weight:750}
.live-kpis b i{font-style:normal;font-size:12px;color:var(--faint)}
.live-kpis span{font-size:11px;color:var(--muted)}
.live-slots{display:flex;gap:6px;flex:none}
.live-slot{display:flex;align-items:center;gap:5px;background:var(--surface2);
  border:1px solid var(--border);border-radius:var(--r10);padding:6px 9px;font-size:13px}
.live-slot.pieno{border-color:color-mix(in srgb,var(--t-verde) 45%,transparent);background:color-mix(in srgb,var(--t-verde) 8%,transparent)}
.live-slot.pieno b{color:var(--pos)}

/* ---- creazione lega ---- */
.avviso{display:flex;gap:11px;align-items:flex-start;background:color-mix(in srgb,var(--t-ambra) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--t-ambra) 30%,transparent);border-radius:var(--r12);padding:12px 14px;margin-bottom:16px;
  font-size:13px;line-height:1.5;color:var(--muted)}
.avviso b{color:var(--text)}
.avviso svg{width:19px;height:19px;stroke:var(--warn);fill:none;stroke-width:1.8;flex:none;margin-top:1px}
.avviso.errore{background:color-mix(in srgb,var(--t-rossa) 8%,transparent);border-color:color-mix(in srgb,var(--t-rossa) 35%,transparent);color:var(--text)}
.avviso.errore svg{stroke:var(--neg)}
.avviso.ok{background:color-mix(in srgb,var(--t-verde) 8%,transparent);border-color:color-mix(in srgb,var(--t-verde) 30%,transparent)}
.avviso.ok svg{stroke:var(--pos)}
/* ---- accesso e account ---- */
/* ---- la scelta del modo: tre porte, non un menu a tendina ---- */
.modi-griglia{display:grid;gap:12px;max-width:920px;margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.modo-card{text-align:left;padding:20px;border-radius:var(--r20);cursor:pointer;
  border:1px solid color-mix(in srgb,var(--tinta) 34%,transparent);color:var(--text);
  background:
    radial-gradient(120% 150% at 100% 0%,color-mix(in srgb,var(--tinta) 22%,transparent),transparent 62%),
    var(--surface);
  box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-poggia);
  transition:border-color .2s,box-shadow .2s}
.modo-card:hover:not(.spento){border-color:color-mix(in srgb,var(--tinta) 60%,transparent);
  box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-sollevato)}
.modo-card.spento{opacity:.5;cursor:default}
.modo-card .ti{width:42px;height:42px;border-radius:var(--r16);display:flex;align-items:center;
  justify-content:center;margin-bottom:14px;position:relative;overflow:hidden;
  background:linear-gradient(158deg,color-mix(in srgb,var(--tinta) 80%,transparent),
    color-mix(in srgb,var(--tinta) 42%,transparent))}
.modo-card .ti svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.9}
.modo-t{font-weight:700;font-size:15.5px;margin-bottom:6px}
.modo-d{color:var(--muted);font-size:12.5px;line-height:1.5}

/* ---- le impostazioni dell'asta condivisa (solo per chi amministra) ---- */
.imp-asta{margin:20px 0}
.imp-riga{display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--r16);
  padding:14px 16px}
.imp-riga:hover{border-color:var(--border2)}
.imp-riga input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--accent)}
.imp-riga b{display:block;font-size:14.5px;margin-bottom:2px}
.imp-riga .small{display:block;line-height:1.45}
.imp-avvio{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-top:12px;padding:14px 16px;border-radius:var(--r16);
  border:1px dashed var(--border2)}
.imp-avvio b{font-size:14.5px}
.imp-avvio .btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;margin-right:6px;vertical-align:-3px}

/* la voce chiusa col lucchetto: si vede che c'e', si capisce perche' non si puo' */
.modo-card .tag svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;vertical-align:-2px;margin-right:3px}
.modo-chiusa{margin-top:10px;font-size:12px;line-height:1.5;color:var(--muted);
  border-top:1px solid var(--border);padding-top:10px}
.modo-chiusa a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.strat-q.sceglibile.spenta{opacity:.55;cursor:not-allowed}
.strat-q.sceglibile.spenta:hover{border-color:color-mix(in srgb,var(--tinta) 34%,transparent);
  box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-poggia)}
.strat-q.spenta .sq-logo svg{width:22px;height:22px;stroke:var(--muted);fill:none;stroke-width:1.9}

/* ---- gli avversari all'asta ---- */
.av-nome.modificabile{cursor:pointer}
.av-matita{color:var(--faint);opacity:0;transition:opacity .15s;flex:none}
.av-nome.modificabile:hover .av-matita{opacity:1}
.av-matita svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;display:block}
.av-resta.neg{color:var(--neg)}
.av-sotto .linkbtn{margin:0 0 0 auto;font-size:11.5px}
/* ================= SCHERMATA D'ASTA: IL NUOVO IMPIANTO =================
   In alto la fascia con TUTTE le squadre, che scorre di lato e resta
   sempre sott'occhio. Sotto, affiancate, le due liste che servono
   insieme: i tuoi obiettivi e il listone intero. */
.asta-testa{margin-bottom:14px}
.fs-nav{display:inline-flex;gap:5px;margin-left:4px}
.fs-nav .iconbtn{width:26px;height:26px}
.fs-nav .iconbtn svg{width:13px;height:13px}
/* ================= IL TABELLONE: LE ROSE COMPLETE =================
   Una griglia sola: una colonna per squadra, una riga per reparto. Le
   celle si scrivono per righe e ci pensa la griglia a incolonnarle, cosi'
   i portieri di tutti restano sulla stessa altezza e si confrontano con
   lo sguardo. Scorre di lato quanto serve: le rose si vedono intere,
   niente elenchi tagliati con il "+3" da aprire. */
.tb-griglia{--tb-col:246px;display:grid;gap:10px;padding-bottom:10px;align-items:start}
.tb-cella{min-width:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r16);padding:10px 12px;
  box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-poggia)}
/* La mia colonna resta riconoscibile dal colore, non dalla posizione:
   era incollata a sinistra mentre le altre scorrevano, e per un attimo -
   proprio mentre scorri - si vedeva una rosa sopra l'altra. Il bordo e la
   luce dell'accento bastano a dire "questa e' la tua". */
.tb-cella.io{
  border-color:color-mix(in srgb,var(--accent) 50%,transparent);
  background:radial-gradient(130% 150% at 100% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 62%),var(--surface)}
.tb-vuota{border:0;background:none;padding:0}

/* la testa: nome, crediti, quanto puo' ancora offrire, quanti ne ha */
.tb-testa{padding:12px 14px;box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-poggia)}
/* lo stemma in testa alla colonna: la squadra si riconosce dal segno
   prima che dal nome, ed e' l'unica cosa che cambia davvero da una
   colonna all'altra */
.tb-stemma{margin-bottom:8px;line-height:0}
.tb-stemma .sq-logo.sm{width:30px;height:30px;font-size:11px}
.tb-testa.io .tb-stemma .sq-logo.sm{width:38px;height:38px;font-size:13px;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent)}
.rosa-box .pn-tit .sq-logo.sm{width:22px;height:22px;font-size:9px}
.tb-nome{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:6px;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:none;border:0;color:var(--text);padding:0;margin-bottom:4px}
.tb-testa-r{display:flex;align-items:center;gap:6px;min-width:0}
.tb-testa-r .tb-nome{flex:1;min-width:0}
.tb-via{width:22px;height:22px;flex:none;opacity:0;transition:opacity .15s}
.tb-via svg{width:12px;height:12px}
.tb-testa:hover .tb-via,.tb-testa:focus-within .tb-via{opacity:1}
@media(hover:none){.tb-via{opacity:.6}}
.tb-nome.modificabile{cursor:pointer}
.tb-nome.modificabile:hover .av-matita{opacity:1}
.tb-cr{font-size:30px;font-weight:800;color:var(--pos);line-height:1.05;margin-bottom:7px}
.tb-testa.io .tb-cr{font-size:36px}
.tb-cr.neg{color:var(--neg)}
.tb-cr i{font-style:normal;font-size:12px;color:var(--muted);margin-left:4px;font-weight:600}
/* Quando chi amministra la lega spegne i crediti degli altri, al loro
   posto non va uno zero ne' un trattino - sembrerebbero un numero - ma la
   parola, piccola e spenta: dice che il dato non manca, e' coperto.
   La barra resta, vuota: senza, le colonne degli altri diventerebbero piu'
   corte della tua e il tabellone si sfilaccerebbe. */
.cr-coperti{font-style:normal;font-size:12px;font-weight:600;color:var(--faint);letter-spacing:.02em}
.tb-cr:has(.cr-coperti){font-size:14px;color:var(--faint);padding:9px 0 10px}
.bar.coperta{background:var(--surface3);opacity:.45}
.tb-testa .bar{height:5px}
.tb-sotto{display:flex;justify-content:space-between;gap:10px;margin-top:7px;
  font-size:12px;color:var(--muted)}
.tb-sotto b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.tb-conta{display:flex;gap:6px;margin-top:9px;border-top:1px solid var(--border);padding-top:8px}
.tb-n{flex:1;text-align:center;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;
  border-radius:var(--r8);padding:3px 0;background:var(--surface2)}
.tb-n.P{color:var(--t-ambra)} .tb-n.D{color:var(--t-verde)}
.tb-n.C{color:var(--t-blu)} .tb-n.A{color:var(--t-rossa)}
.tb-n.ok{box-shadow:inset 0 0 0 1px currentColor}

/* il reparto: barra colorata con la quota di budget spesa, poi i nomi.
   Gli angoli restano quelli del sito: la barra e' dentro il pannello e la
   segue, non e' un rettangolo appoggiato sopra. */
.tb-rep{padding:0;overflow:hidden}
.tb-rep-t{display:flex;align-items:center;gap:8px;padding:6px 9px 6px 11px;
  font-size:12px;font-weight:700;color:#0d0a14;
  border-radius:calc(var(--r16) - 1px) calc(var(--r16) - 1px) 0 0}
.tb-rep-t.P{background:linear-gradient(90deg,var(--t-ambra),color-mix(in srgb,var(--t-ambra) 55%,transparent))}
.tb-rep-t.D{background:linear-gradient(90deg,var(--t-verde),color-mix(in srgb,var(--t-verde) 55%,transparent))}
.tb-rep-t.C{background:linear-gradient(90deg,var(--t-blu),color-mix(in srgb,var(--t-blu) 55%,transparent))}
.tb-rep-t.A{background:linear-gradient(90deg,var(--t-rossa),color-mix(in srgb,var(--t-rossa) 55%,transparent))}
.tb-rep-r{font-size:13px;font-weight:800}
.tb-rep-pct{margin-left:auto;opacity:.85}
.tb-rep-n{font-variant-numeric:tabular-nums;opacity:.85}
.tb-rep-n.ok{opacity:1;text-decoration:underline}
.tb-frecc{background:none;border:0;padding:0 0 0 2px;cursor:pointer;color:inherit;display:flex}
.tb-frecc svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4}
.tb-lista{display:flex;flex-direction:column}
.tb-g{display:flex;align-items:center;gap:7px;padding:6px 10px;min-width:0;
  border-top:1px solid color-mix(in srgb,var(--border) 60%,transparent);cursor:pointer}
.tb-g:hover{background:var(--surface2);box-shadow:inset 3px 0 0 var(--sez)}
.tb-g .tlogo{width:18px;height:18px;margin:0;flex:none}
.tb-g-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13.5px;font-weight:600}
.tb-g b{font-variant-numeric:tabular-nums;font-size:13.5px;font-weight:800;flex:none}
.tb-g.P b{color:var(--t-ambra)} .tb-g.D b{color:var(--t-verde)}
.tb-g.C b{color:var(--t-blu)} .tb-g.A b{color:var(--t-rossa)}
/* le caselle ancora da riempire ci sono anche qui: si legge a colpo
   d'occhio a chi manca il portiere, che e' meta' della strategia */
.tb-g.vuoto{cursor:default;background:transparent}
.tb-g.vuoto:hover{background:transparent}
.tb-g.vuoto .tb-g-n{color:var(--faint);font-weight:500}
.tb-x{width:20px;height:20px;flex:none;opacity:0;transition:opacity .15s}
.tb-x svg{width:11px;height:11px}
.tb-g:hover .tb-x{opacity:1}
.tb-piu{border-style:dashed;background:transparent}

/* ---- sotto la testa: una lista sola, scelta con l'interruttore ----
   Obiettivi, la mia rosa e il listone sono la stessa lista guardata da
   tre lati e all'asta ne serve una per volta: alternarle lascia tutta la
   larghezza alle righe, dove stanno prezzo, titolarita' e la tendina per
   assegnare - che e' il gesto piu' ripetuto della serata. */
.asta-corpo{min-width:0;display:flex;flex-direction:column;min-height:0}
.asta-lista{min-width:0}

/* ---- dove si gioca: tre colonne affiancate ----
   Listone, obiettivi, la mia squadra. Sono pannelli come tutti gli altri
   del sito: stessa superficie, stesso bordo, stessi angoli tondi.
   Sullo stretto si impilano in quest'ordine, che e' anche l'ordine in cui
   servono. */
.asta-tre{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.pannello{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r20);padding:14px 16px 16px;min-width:0;
  box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-poggia)}
/* il titolo di un pannello e' un titoletto di sezione: stessa misura,
   stesso peso. L'unica eccezione e' la striscia stretta della mia squadra,
   dove diciassette pixel andrebbero a capo su tre righe. */
.pn-tit{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:750;
  letter-spacing:-.015em;margin-bottom:12px;flex-wrap:wrap}
.rosa-box .pn-tit{font-size:13.5px;gap:6px}
.pn-tit svg{width:17px;height:17px;stroke:var(--sez);fill:none;stroke-width:2;flex:none}
/* il titolo di un pannello e quello di una sezione parlano la stessa
   lingua: stesso peso, stessa distanza, e il colore della sezione
   sull'icona o sul punto davanti */
.sec-title{display:flex;align-items:center;gap:9px}
.sec-title::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--sez);flex:none;box-shadow:0 0 10px var(--sez)}
.pn-n{color:var(--muted);font-weight:600;font-size:12.5px}
.pn-cr{margin-left:auto;font-size:20px;font-weight:800;color:var(--pos)}
.pn-cr.neg{color:var(--neg)}
.pn-cr i{font-style:normal;font-size:11px;color:var(--muted);margin-left:4px;font-weight:600}
.pn-tit .filters{margin:0 0 0 auto;flex:none}
.pn-tit .filters .input{min-width:132px;min-height:34px;font-size:12.5px}
/* Le due liste si dividono lo spazio, la mia squadra prende una striscia
   stretta e basta: e' fatta di nomi corti e di un prezzo, non ha bisogno
   di un terzo di schermo, e quello che risparmia va alle righe del
   listone, che di dati ne portano parecchi. */
@media(min-width:1000px){
  .asta-tre{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 148px;gap:14px}
}
@media(min-width:1440px){
  .asta-tre{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 164px;gap:16px}
}
/* nella striscia stretta i quattro numeri vanno a due a due, e il
   riquadro si stringe: restano nome e prezzo, che sono l'essenziale */
.rosa-box .ar-riga{grid-template-columns:repeat(2,minmax(0,1fr))}
.rosa-box .ar-d b{font-size:16px}
.rosa-box{padding:12px 12px 14px}
.rosa-box .tb-cella{padding:0}
.rosa-box .tb-g{padding:5px 8px;gap:5px}
.rosa-box .tb-g-n{font-size:12.5px}
.rosa-box .tb-g b{font-size:12.5px}
.rosa-box .tb-g .tlogo{width:15px;height:15px}
.rosa-box .pn-cr{font-size:17px}

/* ---- come sta venendo la rosa: i quattro numeri ---- */
.ar-riga{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
.ar-d{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r12);
  padding:8px 10px;min-width:0;text-align:center}
.ar-d b{display:block;font-size:19px;font-weight:800;line-height:1.1;
  font-variant-numeric:tabular-nums}
.ar-d span{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:block}
.ar-d.su b{color:var(--pos)} .ar-d.giu b{color:var(--neg)}

/* ---- la mia squadra: gli stessi riquadri delle rose complete ----
   Cambia solo la disposizione: li' sono una colonna per squadra, qui i
   quattro reparti si dispongono nello spazio che c'e'. */
.rc-griglia{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:start}
/* la vista delle rose scorre anche di lato: e' una griglia larga quanto
   le squadre, non una lista */
.asta-lista.larga{overflow-x:auto}

/* ---- la cima: la ricerca e i miei tre numeri, sempre li' ----
   Il gesto della serata e' cercare il nome appena chiamato: la ricerca
   non sta dentro una vista, sta sopra tutte, e appena scrivi apre
   l'anteprima da cui si assegna al volo. */
.live-cima{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  position:sticky;top:var(--top-h);z-index:13;background:var(--bg);padding-top:8px;margin-bottom:12px}
.mio-stato{display:flex;align-items:baseline;gap:6px;flex:none;
  background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-capsula);
  padding:8px 16px;font-size:11.5px;color:var(--muted);white-space:nowrap}
.mio-stato b{font-size:19px;font-weight:800;color:var(--pos);font-variant-numeric:tabular-nums}
.mio-stato b.neg{color:var(--neg)}
.mio-stato b i{font-style:normal;font-size:12px;color:var(--muted)}
.mio-stato b:not(:first-child){margin-left:8px;color:var(--text)}
/* l'anteprima esce sotto la ricerca e copre quello che c'e' sotto: dura
   il tempo di una chiamata, non e' una vista in cui si resta */
.ant{position:absolute;top:100%;left:0;right:0;z-index:20;margin-top:6px;
  background:var(--surface);border:1px solid var(--border2);border-radius:var(--r16);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.9);overflow:hidden;max-height:62vh;overflow-y:auto}
.ant-cima{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:12px;
  color:var(--muted);border-bottom:1px solid var(--border);background:var(--surface2);
  flex-wrap:nowrap;white-space:nowrap}
.ant-cima b{color:var(--text)}
.ant-cima .fchip{margin-left:auto;padding:3px 10px;font-size:11.5px}
.ant-r{display:flex;align-items:center;gap:11px;padding:10px 14px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent)}
.ant-r:hover{background:var(--surface2);box-shadow:inset 3px 0 0 var(--sez)}
.ant-r.via{opacity:.6}
.ant-r.via .ant-n{text-decoration:line-through}
.ant-r.mio{background:color-mix(in srgb,var(--t-verde) 7%,transparent)}
.ant-r .tlogo{width:22px;height:22px;margin:0}
.ant-id{flex:1;min-width:0}
.ant-n{font-weight:650;font-size:15px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ant-m{color:var(--muted);font-size:12px;margin-top:1px}
.ant-piu,.ant-vuoto{padding:11px 14px;color:var(--muted);font-size:12.5px}
.ant-vuoto svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;vertical-align:-2px;margin-right:4px}

/* la barra del menu resta attaccata in alto mentre la lista scorre */
.live-barra{position:sticky;top:0;z-index:3;background:var(--bg);
  padding:2px 0 10px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:none}
.live-barra .vista-switch{margin-bottom:0;flex:none}
.live-filtri{margin:0;flex:1;justify-content:flex-end}
.live-filtri .input{flex:none;min-width:150px}
/* la ricerca prima dei filtri: il gesto della serata è cercare un nome,
   ruolo e squadra sono il contorno. (.search altrove ha un order suo,
   qui va azzerato o finirebbe in coda.) */
.live-search{flex:1;min-width:220px;max-width:none;margin-bottom:0;position:relative;order:0}
.live-search input{min-height:44px;font-size:15px;padding-right:40px}
.live-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px}
.live-x svg{width:14px;height:14px}
@media(min-width:1100px){
  body.workspace .view.asst-page .asta-corpo{flex:1;min-height:0}
  /* scorre solo la lista: ricerca e menu restano fermi */
  .asta-lista{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none}
  .asta-lista::-webkit-scrollbar{width:0}
  .live-barra{position:static}
  .live-cima .live-search{flex:1;min-width:320px}
}
@media(min-width:1000px){
  /* ogni colonna scorre per conto suo: cercare nel listone non deve far
     sparire gli obiettivi, ed e' il motivo per cui stanno affiancati */
  body.workspace .view.asst-page .asta-lista{overflow:hidden;display:flex}
  body.workspace .view.asst-page .asta-lista.larga{overflow:auto;display:block}
  body.workspace .view.asst-page .asta-tre{flex:1;min-height:0}
  body.workspace .view.asst-page .asta-tre>.pannello{height:100%;min-height:0;overflow-y:auto;
    scrollbar-width:none;overscroll-behavior:contain;display:flex;flex-direction:column}
  body.workspace .view.asst-page .asta-tre>.pannello::-webkit-scrollbar{width:0}
  /* Stessa cosa per la ricerca della strategia: e' incollata in cima a una
     colonna che scorre, quindi la sua fascia deve essere fatta della
     materia della colonna (--surface) e arrivare fino ai bordi. Con lo
     sfondo della pagina e i margini della colonna restava un rettangolo
     piu' scuro e due fessure ai lati, da cui si vedevano passare le righe
     sotto: sembrava un buco, ed era proprio un buco. */
  body.workspace .asst-add .cerca-forte{top:-16px;background:var(--surface);
    margin:0 -18px 4px;padding:10px 18px 10px}
  /* il titolo resta attaccato in cima alla sua colonna: con tre liste che
     scorrono, senza l'etichetta non si sa piu' cosa si sta guardando */
  body.workspace .view.asst-page .pn-tit{position:sticky;top:-14px;z-index:2;
    background:var(--surface);margin:-14px -16px 10px;padding:14px 16px 10px}
}

/* ---- assegnare: un'icona sulla riga, il resto in un pannello ----
   Sulla riga sta solo il gesto ("chi se l'è preso?"), cosi' la riga resta
   leggibile e apribile come scheda. Il pannello ha il prezzo gia' scritto
   e le squadre come bottoni grandi: si sbaglia mira molto meno che con una
   tendina alta venti pixel, ed e' l'unica cosa che si ripete cento volte
   in una serata. */
.iconbtn.soldi{width:38px;height:38px;color:var(--warn);
  border-color:color-mix(in srgb,var(--t-ambra) 40%,transparent);
  background:color-mix(in srgb,var(--t-ambra) 10%,transparent)}
.iconbtn.soldi svg{width:19px;height:19px}
.iconbtn.soldi:hover{background:var(--warn);border-color:var(--warn);color:#1a1200}
.ass-prezzo{display:flex;align-items:center;gap:8px}
.ass-prezzo .input{width:120px;font-size:20px;font-weight:800;text-align:center}
.ass-prezzo .iconbtn{width:38px;height:38px;font-size:20px;font-weight:700;line-height:1}
.ass-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin-top:16px}
.ass-sq{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--r12);
  padding:12px 14px;color:var(--text);cursor:pointer;text-align:left;min-height:52px}
.ass-sq:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.ass-sq.io{border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);grid-column:1/-1}
.ass-sq.ignoto{grid-column:1/-1;border-style:dashed;background:transparent}
.ass-n{font-weight:700;font-size:14.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ass-cr{font-size:15px;font-weight:800;color:var(--pos);flex:none}
.ass-cr.neg{color:var(--neg)}
.ass-cr i{font-style:normal;font-size:10px;color:var(--muted);margin-left:2px}
/* la riga si apre: che sia cliccabile deve vedersi */
.live-row{cursor:pointer}
.live-row:hover{border-color:var(--border2);background:var(--surface2);box-shadow:inset 3px 0 0 var(--sez)}
@media(max-width:560px){
  .tb-griglia{--tb-col:212px}
  .tb-testa.io .tb-cr{font-size:30px}
  /* Sul telefono nella riga non ci stanno nome, prezzo, campo crediti e
     tendina: invece di schiacciarli uno sull'altro, il prezzo e i comandi
     vanno a capo su una riga loro. L'asta si gioca anche dal telefono, e
     la tendina deve restare grande abbastanza da centrarla al primo colpo. */
  .live-row{flex-wrap:wrap;row-gap:9px;padding:10px 11px}
  .live-row .lr-id{flex:1 1 130px}
  .live-row .lr-prezzo{order:3;text-align:left;min-width:0;flex:none;
    display:flex;align-items:baseline;gap:6px}
  .live-row .lr-prezzo b{display:inline}
  .live-row .lr-act{order:4;margin-left:auto}
  /* sullo stretto l'interruttore perde le etichette lunghe, non i numeri */
  .vista-switch .vs{padding:9px 6px;gap:5px}
  .vista-switch .vs span{font-size:12.5px;white-space:nowrap}
}

/* la squadra pronta, nel modulo di invito dell'amministrazione */
.ad-squadra{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.ad-sq-riga{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ad-sq-riga .input{flex:1 1 180px;min-width:0}
.ad-sq-riga select.input{flex:0 1 200px}
@media(max-width:700px){.ad-sq-riga .input,.ad-sq-riga select.input{flex:1 1 100%}}

/* ---- l'ultimo passo del percorso: il nome dell'asta ----
   E' l'unica cosa da fare in quella schermata, quindi e' grande: il campo
   ha la misura di un titolo, non di un modulo. */
.nome-box{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r20);
  padding:22px 24px;box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-poggia)}
.nome-box label{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:700;margin-bottom:10px}
/* nell'asta condivisa chi non amministra guarda e basta: la riga lo dice,
   se no la mancanza del tasto per segnare sembra un guasto */
.ab-sola-lettura{display:flex;align-items:center;gap:6px;margin-top:4px;
  font-size:12px;color:var(--muted)}
.ab-sola-lettura svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;flex:none}

/* la testa della lega: stemma grande a sinistra, nome e spiegazione a destra */
.lega-testa{display:flex;gap:16px;align-items:flex-start;min-width:0}
.lega-testa h1{margin:0 0 6px}
/* stemma e nome sulla stessa riga: il campo si prende quel che resta */
.nome-riga{display:flex;align-items:center;gap:12px}
.nome-riga .input{flex:1 1 auto;min-width:0}
.nome-campo{width:100%;font-size:24px;font-weight:750;letter-spacing:-.02em;
  min-height:60px;padding:12px 16px}
.nome-campo:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.nome-box.bloccato .nome-campo{opacity:.75}
.nome-nota{display:flex;gap:8px;align-items:flex-start;margin-top:12px;
  font-size:12.5px;color:var(--muted);line-height:1.5}
.nome-nota svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;flex:none;margin-top:1px}

/* ---- due strade affiancate ----
   La scelta cambia tutto quello che viene dopo, quindi i due riquadri sono
   grossi e quello scelto si accende davvero: bordo nel colore, fondo
   intonato, alone e la spunta nell'angolo. Con la sola differenza di
   bordo, a colpo d'occhio, non si capiva quale fosse attivo. */
.due-scelte{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:12px}
.due-scelte .scelta{position:relative;text-align:left;padding:18px 18px 16px;border-radius:var(--r16);
  cursor:pointer;background:var(--surface2);border:1px solid var(--border);color:var(--text);
  box-shadow:var(--luce-alto),var(--luce-basso);
  transition:border-color .18s,background .18s,box-shadow .2s}
.due-scelte .scelta:hover{border-color:var(--border2);background:var(--surface3)}
.due-scelte .scelta.on{border-color:var(--accent);
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 20%,transparent),
    color-mix(in srgb,var(--accent) 7%,transparent)),var(--surface2);
  box-shadow:var(--luce-alto),0 0 0 1px var(--accent),
    0 10px 30px -12px color-mix(in srgb,var(--accent) 75%,transparent)}
/* la spunta compare solo su quello scelto, nell'angolo che l'occhio
   controlla per ultimo prima di andare avanti */
.due-scelte .scelta::after{content:"";position:absolute;top:12px;right:12px;width:22px;height:22px;
  border-radius:50%;border:1px solid var(--border2);transition:background .18s,border-color .18s}
.due-scelte .scelta.on::after{border-color:transparent;background:var(--accent) no-repeat center/12px 12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}
.due-scelte .scelta b{display:block;font-size:16px;margin-bottom:5px;padding-right:28px}
.due-scelte .scelta.on b{color:#fff}
.due-scelte .scelta span{display:block;font-size:12.5px;color:var(--muted);line-height:1.5}
.due-scelte .scelta.on span{color:color-mix(in srgb,var(--text) 78%,var(--accent))}

/* ---- il passo "come la giochi": le domande della modalità libera ---- */
/* stessa larghezza del titolo qui sopra: allineati, sembrano una cosa
   sola invece che due blocchi centrati per conto loro */
.wiz-setup{max-width:var(--pagina);margin:0 auto;display:flex;flex-direction:column;gap:22px}
/* .field altrove mette label e campo in riga: qui la domanda sta sopra e
   la risposta sotto, larga quanto la pagina */
.wiz-setup .field{margin:0;display:block}
.wiz-setup .field>label{display:block;margin-bottom:10px;font-size:14.5px;font-weight:700;color:var(--text)}
.modi-griglia.due{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));max-width:none}
.modi-griglia.due .modo-card{padding:16px}
.modi-griglia.due .modo-card .ti{width:34px;height:34px;margin-bottom:10px}
.modo-card.scelta{border-color:var(--accent);
  box-shadow:var(--luce-alto),0 0 0 1px var(--accent) inset,var(--ombra-sollevato)}
.wiz-num{width:110px;min-height:38px}

/* ---- la lavagna: una colonna per reparto dentro ogni squadra ----
   Cosi' si legge a colpo d'occhio a chi manca il portiere, che e' la
   domanda vera fra una chiamata e l'altra. */
.sq-rep-t .chip{width:20px;height:20px;font-size:9.5px;border-radius:var(--r8)}
.sq-rep-t b.ok{color:var(--pos)}
.sq-g .iconbtn{width:20px;height:20px;flex:none;opacity:0;transition:opacity .15s}
.sq-g .iconbtn svg{width:11px;height:11px}
.sq-g:hover .iconbtn{opacity:1}
@media(hover:none){.sq-g .iconbtn{opacity:1}}
/* chi se l'e' aggiudicato, accanto al nome: si legge cercandolo nel listone */
.tag.preso-da{background:color-mix(in srgb,var(--t-ambra) 16%,transparent);
  color:var(--t-ambra);border-color:color-mix(in srgb,var(--t-ambra) 30%,transparent);
  font-size:10.5px;padding:2px 7px}

.av-giocatore .chip{width:22px;height:22px;font-size:10px;border-radius:var(--r8)}
.av-giocatore .iconbtn{width:26px;height:26px;opacity:0;transition:opacity .15s}
.av-giocatore:hover .iconbtn{opacity:1}
.av-aggiungi .input{flex:1;min-width:0}
/* la scelta di chi ha comprato, dentro la finestra */
.av-opt.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent)}
.av-opt-cr.neg{color:var(--neg)}
@media(hover:none){.av-matita,.av-giocatore .iconbtn{opacity:1}}

/* ---- amministrazione ---- */
/* senza misura l'SVG prende la sua dimensione naturale e riempie mezza
   pagina: vale per ogni titolo di questa sezione, non solo per il primo */
.ad-sec{display:flex;align-items:center;gap:8px}
.ad-sec svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.ad-form{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.4fr) auto;gap:8px}
@media(max-width:700px){.ad-form{grid-template-columns:1fr}}
/* la password provvisoria: si vede una volta, quindi deve saltare all'occhio */
.ad-nato{margin-top:16px;padding:14px;border-radius:var(--r12);
  border:1px solid color-mix(in srgb,var(--pos) 35%,transparent);
  background:color-mix(in srgb,var(--pos) 8%,transparent)}
.ad-nato-t{font-size:13.5px;margin-bottom:10px}
.ad-pw{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.ad-pw code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;font-weight:700;
  letter-spacing:.06em;background:rgba(0,0,0,.35);border:1px solid var(--border2);
  border-radius:var(--r8);padding:8px 12px;user-select:all;word-break:break-all}
.ad-lista{display:flex;flex-direction:column;gap:8px}
/* la riga ha imparato a stare su piu' capi: indirizzo a sinistra che si
   allarga, poi stato, password, date e tasti che vanno a capo insieme
   quando lo schermo non basta */
.ad-riga{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,0)),var(--surface);
  border:1px solid var(--border);border-radius:var(--r12);padding:12px 16px;
  box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-poggia)}
.ad-chi{flex:1 1 240px;min-width:0}
.ad-mail{font-weight:650;font-size:14px;display:flex;align-items:center;gap:8px;
  min-width:0;overflow:hidden;text-overflow:ellipsis}
.ad-stato{flex:none}
.ad-date{display:flex;gap:20px;flex:none}
.ad-date b{display:block;font-size:13px;font-variant-numeric:tabular-nums}
.ad-date span{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:650}
/* la password dell'invito, leggibile finche' non se n'e' scelta una sua */
.ad-pwbox{display:flex;align-items:center;gap:4px;flex:none}
.ad-pwmini{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:650;
  letter-spacing:.04em;background:rgba(0,0,0,.3);border:1px solid var(--border2);
  border-radius:var(--r8);padding:5px 8px;user-select:all;white-space:nowrap}
.ad-pwmini.nuova{border-color:color-mix(in srgb,var(--t-verde) 45%,transparent);color:var(--t-verde)}
.ad-azioni{display:flex;gap:4px;flex:none}
/* dove gioca: le squadre di questa persona nelle mie leghe */
.ad-leghe{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.ad-leghe .tag{font-size:10.5px}
/* il modulo per consegnargli una squadra si apre dentro la sua riga */
.ad-riga.aperta{border-color:var(--border2)}
.ad-dai{flex:1 1 100%;margin-top:4px;padding-top:12px;border-top:1px solid var(--border)}
@media(max-width:640px){
  .ad-chi{flex:1 1 100%}
  .ad-date{gap:16px}
}

.accedi-box{max-width:440px;margin:0 auto}

/* nella pagina d'ingresso la barra in alto tiene solo il marchio */
body.accesso .topnav,body.accesso .hamb,body.accesso #tb-account{display:none}
body.accesso .topbar{border-bottom:none}

/* ================= L'INGRESSO =================
   La prima cosa che si vede dell'app, e spesso l'unica se uno non entra.
   Non e' una pagina di servizio: e' una fascia sola, larga quanto lo
   schermo, divisa in due. A sinistra il perche', a destra il come.
   Il modulo e' l'unica superficie chiara sul fondo scuro: dove si guarda
   per primo e' dove si deve scrivere. */
.login{position:relative;overflow:hidden;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  margin-top:calc(var(--vpad,18px)*-1);margin-bottom:0;
  min-height:calc(100vh - var(--barra,62px));
  display:flex;align-items:center;
  padding:36px 18px calc(36px + env(safe-area-inset-bottom));
  background:
    radial-gradient(90% 120% at 82% 0%,color-mix(in srgb,var(--t-viola) 38%,transparent),transparent 58%),
    radial-gradient(90% 130% at 0% 100%,color-mix(in srgb,var(--t-blu) 22%,transparent),transparent 58%),
    linear-gradient(165deg,var(--viola-alto) 0%,var(--viola-fondo) 55%,var(--viola-basso) 100%)}
/* il velo diagonale, come sul box "crea": e' la stessa lastra di vetro */
.login::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,transparent 40%,rgba(255,255,255,.05) 50%,transparent 60%)}
.login-gufo{position:absolute;z-index:1;right:-4%;bottom:0;height:92%;width:auto;
  object-fit:contain;object-position:bottom right;pointer-events:none;user-select:none;
  opacity:.3;filter:drop-shadow(0 26px 50px rgba(0,0,0,.6));
  -webkit-mask-image:linear-gradient(to left,#000 40%,transparent 92%);
  mask-image:linear-gradient(to left,#000 40%,transparent 92%)}
.login-dentro{position:relative;z-index:2;width:100%;max-width:1140px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
@media(min-width:940px){
  .login-dentro{grid-template-columns:minmax(0,1.05fr) minmax(0,420px);gap:56px}
}
.login-sx h1{font-size:clamp(30px,4.4vw,50px);letter-spacing:-.035em;line-height:1.04;margin:14px 0 14px}
.login-sx p{color:var(--viola-testo);opacity:.9;font-size:15.5px;line-height:1.6;margin:0;max-width:46ch}
/* le tre prove: numeri veri di quello che c'e' dentro, non promesse */
.login-prove{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.login-prove li{display:flex;align-items:flex-start;gap:13px;padding:12px 15px;border-radius:var(--r16);
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(0,0,0,.18)}
.login-prove svg{width:20px;height:20px;stroke:color-mix(in srgb,var(--t-viola) 30%,#fff);
  fill:none;stroke-width:1.8;flex:none;margin-top:1px}
.login-prove b{display:block;color:var(--viola-testo);font-size:14.5px;font-weight:700}
.login-prove span{display:block;color:var(--viola-muted);font-size:12.5px;line-height:1.45;margin-top:2px}

/* il modulo: l'unica cosa chiara, quindi la prima che si guarda */
.login-card{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r20);
  padding:26px 24px 22px;box-shadow:var(--luce-alto),0 30px 70px -24px rgba(0,0,0,.85)}
.login-tit{font-size:23px;font-weight:800;letter-spacing:-.02em}
.login-sot{color:var(--muted);font-size:13.5px;margin:4px 0 18px}
.login-card .field{margin-bottom:14px}
.login-card .linkbtn{margin:12px auto 0;display:block}
.login-invito{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);
  text-align:center;font-size:13px;color:var(--muted)}
.login-nota{display:flex;gap:10px;align-items:flex-start;margin-top:16px;
  color:var(--viola-muted);font-size:12px;line-height:1.5}
.login-nota svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none;margin-top:1px}
@media(max-width:939px){
  .login{min-height:0;padding:26px 16px calc(30px + env(safe-area-inset-bottom))}
  .login-gufo{opacity:.22;height:52%;right:-6%}
  .login-sx h1{margin-top:10px}
  .login-prove{display:none}
  .login-nota{margin-top:14px}
}

/* ---- chiusura della registrazione: i tre passi ----
   Si vede dove sei e quanto manca. Il passo fatto prende la spunta, quello
   in corso il colore pieno: senza, tre schermate di fila sembrano un
   labirinto invece di una procedura che finisce. */
.bv-wrap{max-width:440px;margin:0 auto}
.bv-passi{display:flex;align-items:center;gap:6px;list-style:none;margin:0 0 22px;padding:0}
.bv-passi li{display:flex;align-items:center;gap:7px;flex:1;min-width:0;
  font-size:11.5px;font-weight:650;color:var(--faint);white-space:nowrap;overflow:hidden}
.bv-passi li span:last-child{overflow:hidden;text-overflow:ellipsis}
.bv-passi li.ora{color:var(--text)}
.bv-passi li.fatto{color:var(--muted)}
.bv-n{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;background:var(--surface2);border:1px solid var(--border2);color:var(--faint)}
.bv-passi li.ora .bv-n{background:var(--grad);border-color:transparent;color:#fff}
.bv-passi li.fatto .bv-n{background:color-mix(in srgb,var(--pos) 20%,transparent);
  border-color:color-mix(in srgb,var(--pos) 45%,transparent);color:var(--pos)}
.bv-n svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.6}
@media(max-width:520px){
  /* sul telefono restano i numeri: i titoli farebbero tre righe */
  .bv-passi li span:last-child{display:none}
  .bv-passi li{flex:none}
  .bv-passi{gap:10px;justify-content:center}
}
.ac-switch .vs{flex:1;background:transparent;border:0;color:var(--muted);cursor:pointer;
  border-radius:var(--r10);padding:9px;font-size:14px;font-weight:650;font-family:inherit}
.ac-switch .vs:hover{color:var(--text)}
.ac-switch .vs.on{background:var(--grad);color:#fff}
.linkbtn{display:block;margin:12px auto 0;background:none;border:0;color:var(--muted);
  font-size:13px;font-family:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--text)}
.accedi-btn{white-space:nowrap}
/* ---- squadra dell'utente e stemma ----
   Il file resta quadrato, e' qui che diventa tondo. */
.sq-logo{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--surface3);border:1px solid var(--border2);display:block}
.sq-logo.vuoto{display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.02em}
.sq-logo.lg{width:52px;height:52px}
/* lo stemma in grande: si usa in una schermata sola, quella del benvenuto,
   dove e' la cosa che riconosci prima di leggere */
.sq-logo.xl{width:112px;height:112px;font-size:34px;border-width:2px}
.sq-logo.sm{width:24px;height:24px;font-size:9px}
.sq-logo.xs{width:24px;height:24px;font-size:9px}

/* ================= LE TUE STRATEGIE ================= */
.strat-pagina{max-width:var(--pagina);margin:0 auto}
/* Il box viola: qui si crea, ed e' la cosa piu' grossa della pagina.
   Due colonne, perche' su una sola il testo restava tutto a sinistra e
   mezza larghezza rimaneva vuota. */
/* Il box "crea": la cosa piu' grossa della pagina, perche' e' la cosa che
   si viene a fare. Non e' piu' legato al viola: riceve una tinta e ci
   ricava fondo, testi e bordo, cosi' la stessa scatola vale per le
   strategie (viola) e per l'asta (verde) restando riconoscibile come
   la stessa scatola. */
.crea-box{--cb:var(--t-viola);
  --cb-fondo:color-mix(in srgb,var(--cb) 22%,#120c20);
  --cb-alto:color-mix(in srgb,var(--cb-fondo) 84%,var(--cb));
  --cb-basso:color-mix(in srgb,var(--cb-fondo) 92%,#000);
  --cb-testo:color-mix(in srgb,var(--text) 90%,var(--cb));
  --cb-muted:color-mix(in srgb,var(--muted) 72%,var(--cb));
  --cb-faint:color-mix(in srgb,var(--faint) 66%,var(--cb));
  position:relative;overflow:hidden;border-radius:var(--r20);
  padding:38px 36px;
  display:grid;grid-template-columns:1.02fr .98fr;gap:38px;align-items:center;
  border:1px solid color-mix(in srgb,var(--cb) 30%,transparent);
  box-shadow:var(--luce-alto),var(--ombra-alza);
  background:
    radial-gradient(80% 120% at 92% 6%,color-mix(in srgb,var(--cb) 42%,transparent),transparent 60%),
    radial-gradient(70% 110% at 0% 100%,color-mix(in srgb,var(--t-blu) 18%,transparent),transparent 58%),
    linear-gradient(160deg,var(--cb-alto) 0%,var(--cb-fondo) 60%,var(--cb-basso) 100%)}
.crea-box.verde{--cb:var(--t-verde)}
.crea-box.ambra{--cb:var(--t-ambra)}
/* due strade invece di una: la squadra e la lega. Stanno sulla stessa
   riga finche' ci stanno, poi vanno a capo intere. */
.crea-azioni{display:flex;gap:10px;flex-wrap:wrap}
.crea-azioni .btn{flex:0 1 auto}
.crea-box .btn.ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.crea-box .btn.ghost:hover{background:rgba(255,255,255,.14)}
/* velo luminoso che taglia in diagonale, come il riflesso su una lastra */
.crea-box::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,transparent 42%,rgba(255,255,255,.055) 50%,transparent 58%)}
.crea-sx{position:relative;z-index:1;min-width:0}
.crea-eyebrow{display:inline-block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:750;color:var(--cb-muted);margin-bottom:12px;
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-capsula);padding:4px 11px;
  background:rgba(255,255,255,.05)}
.crea-box h1{font-size:clamp(26px,3.1vw,34px);letter-spacing:-.03em;margin:0 0 12px;line-height:1.08}
.crea-box p{color:var(--cb-testo);margin:0 0 22px;font-size:15px;line-height:1.58;max-width:46ch;opacity:.86}
.crea-nota{margin-top:14px;font-size:12.5px;color:var(--cb-faint);line-height:1.5;max-width:44ch}
.crea-nota a{color:var(--cb-muted);text-decoration:underline;text-underline-offset:3px}

/* i tre passi: righe di vetro, non un elenco puntato */
.crea-passi{position:relative;z-index:1;margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:10px}
.crea-passi li{display:flex;align-items:flex-start;gap:13px;
  padding:14px 16px;border-radius:var(--r16);
  background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.028));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.18)}
/* .crea-passi li span vince su .cp-n perche' piu' specifica: il numero
   ereditava il grigio della descrizione e spariva sul fondo chiaro */
.crea-passi li .cp-n{flex:none;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:var(--cb-fondo);line-height:1;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--cb) 18%,#fff),
    color-mix(in srgb,var(--cb) 52%,#fff));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 6px -2px rgba(0,0,0,.5)}
.crea-passi li>div{min-width:0}
.crea-passi li b{display:block;color:var(--cb-testo);font-weight:700;font-size:14px;margin-bottom:2px}
.crea-passi li span{display:block;color:var(--cb-muted);font-size:12.5px;line-height:1.5}
@media(max-width:820px){
  .crea-box{grid-template-columns:1fr;gap:26px;align-items:stretch}
  .crea-box p{max-width:none}
}

/* le schede: una per strategia, tinta diversa per riconoscerle a colpo d'occhio.
   Quante per riga non lo decide un numero fisso: si dice quanto e' larga una
   scheda leggibile (340px) e ci stanno quelle che ci stanno. Con tre fisse, su
   uno schermo largo diventavano tre riquadri enormi mezzi vuoti. */
.strat-griglia{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
/* La scheda e' larga e bassa. Le colonne: stemma, nome, obiettivi. I comandi
   in fondo a destra, sotto il numero - cosi' non ci si sovrappongono. */
.strat-q{position:relative;overflow:hidden;cursor:pointer;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;column-gap:14px;row-gap:10px;
  border-radius:var(--r20);padding:16px 18px;
  border:1px solid color-mix(in srgb,var(--tinta) 34%,transparent);
  box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-poggia);
  background:
    radial-gradient(110% 160% at 100% 0%,color-mix(in srgb,var(--tinta) 30%,transparent),transparent 62%),
    linear-gradient(120deg,color-mix(in srgb,var(--tinta) 14%,transparent),transparent 55%),
    var(--surface);
  transition:border-color .2s,box-shadow .2s}
.strat-q>.sq-logo{grid-area:1/1}
.strat-q>.sq-corpo{grid-area:1/2}
.strat-q>.sq-numeri{grid-area:1/3}
.strat-q.sceglibile{grid-template-columns:auto minmax(0,1fr) auto auto}
.strat-q>.sq-azioni{grid-area:2/3;justify-self:end}
.strat-q:hover{border-color:color-mix(in srgb,var(--tinta) 60%,transparent);
  box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-sollevato)}
/* I comandi stanno in fondo a destra, in chiaro ma smorzati: prima erano
   invisibili finche' non ci passavi sopra, e nessuno puo' indovinare un
   pulsante che non si vede. Smorzati bastano - la scheda si legge comunque e
   l'angolo non resta vuoto. */
.sq-azioni{display:flex;gap:5px;opacity:.45;transition:opacity .18s}
.strat-q:hover .sq-azioni,.strat-q:focus-within .sq-azioni{opacity:1}
.sq-azioni .iconbtn{width:28px;height:28px}
.sq-azioni .iconbtn svg{width:14px;height:14px}
.sq-corpo{min-width:0}
.sq-nome-strat{font-size:17px;font-weight:750;letter-spacing:-.015em;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sq-squadra{font-size:12.5px;color:var(--muted);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* il numero degli obiettivi a destra: valore grande, etichetta accanto */
/* la stessa scheda, usata come pulsante di scelta: al posto dei comandi
   c'e' la freccia, e tutta la scheda risponde al passaggio del mouse */
.strat-q.sceglibile{cursor:pointer;text-align:left;font-family:inherit;color:var(--text);
  align-items:center}
.strat-q.sceglibile>.sq-scegli{grid-area:1/4;color:var(--muted);display:flex;align-items:center}
.strat-q.sceglibile>.sq-scegli svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.strat-q.sceglibile:hover>.sq-scegli{color:var(--tinta)}
.sq-numeri{display:grid;grid-template-columns:auto auto;gap:2px 8px;
  align-items:baseline;justify-items:end}
.sq-numeri b{font-size:17px;font-weight:750;font-variant-numeric:tabular-nums;line-height:1.1}
.sq-numeri b i{font-style:normal;font-size:11.5px;color:var(--muted);font-weight:600}
.sq-numeri span{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:650;justify-self:start}
.sq-live{display:inline-block;margin-top:6px}
/* Sul telefono tre colonne non ci stanno: lo stemma e il nome tengono la
   prima riga, i numeri scendono sotto col nome, e i comandi si mettono al
   loro fianco invece di prendersi una riga tutta per loro. Nessuna scheda
   quadrata, nessun buco. */
@media(max-width:520px){
  /* piu' stretta la cornice, piu' piccolo lo stemma: quello che si
     guadagna va al nome e alla riga sotto, che prima finivano nei
     puntini dopo tre parole */
  .strat-q{grid-template-columns:auto minmax(0,1fr);padding:13px 14px;column-gap:11px}
  /* i numeri prendono tutta la riga: se restavano nella prima colonna
     era la colonna a doversi allargare quanto loro, e lo stemma si
     ritrovava in mezzo a un campo di calcio vuoto */
  .strat-q>.sq-numeri{grid-area:2/1/auto/-1;justify-items:start;padding-right:50px}
  .strat-q>.sq-azioni{position:absolute;right:11px;bottom:10px;opacity:1}
  .sq-logo.lg{width:40px;height:40px;font-size:14px}
  .sq-nome-strat{font-size:16px;-webkit-line-clamp:1}
  .sq-squadra{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
  /* i numeri su una riga sola invece che in colonnina: due valori con la
     loro etichetta accanto, come si leggono a voce */
  .sq-numeri{grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:max-content;justify-content:start;
    justify-items:start;column-gap:5px;align-items:baseline}
  .sq-numeri b:not(:first-child){margin-left:10px}
  .sq-numeri span{font-size:10.5px}
}
@media(max-width:640px){
  .crea-box{padding:26px 20px}
  .crea-box p{font-size:14.5px}
  /* i tre passi spariscono: su un telefono allungavano la pagina prima
     ancora di far vedere le strategie, e il testo accanto li riassume */
  .crea-passi{display:none}
}
.sq-nuova{display:flex;align-items:center;gap:12px}
.sq-carica{width:62px;height:62px;border-radius:50%;flex:none;cursor:pointer;position:relative;
  border:2px dashed var(--border2);background:var(--surface2);overflow:hidden;
  display:flex;align-items:center;justify-content:center;transition:border-color .15s}
.sq-carica:hover{border-color:var(--accent)}
.sq-carica img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.sq-carica-ph{font-size:19px;font-weight:800;color:var(--muted);letter-spacing:.02em;line-height:1}
.sq-carica-ph svg{width:20px;height:20px;stroke:var(--muted);fill:none;stroke-width:2;display:block}
.sq-lista-scelta{display:flex;flex-wrap:wrap;gap:8px}
.sq-scelta{display:flex;align-items:center;gap:9px;background:var(--surface2);
  border:1px solid var(--border);color:var(--text);border-radius:var(--r-capsula);padding:5px 14px 5px 5px;
  font-family:inherit;font-size:13.5px;font-weight:650;cursor:pointer;transition:.15s}
.sq-scelta:hover{border-color:var(--border2)}
.sq-scelta.on{border-color:var(--accent);background:var(--accent-soft)}
.sq-scelta.aggiungi{padding:9px 15px;color:var(--muted)}
.sq-scelta.aggiungi:hover{color:var(--text);border-color:var(--accent)}
.sq-scelta.aggiungi svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}
/* ---- l'area: le tue squadre ---- */
.ms-lista{display:flex;flex-direction:column;gap:10px}
/* stessa materia delle righe del listone: velo di luce in alto e ombra di
   contatto, non un rettangolo piatto in mezzo a card che hanno profondita' */
.mia-squadra{display:flex;align-items:center;gap:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,0)),var(--surface);
  border:1px solid var(--border);border-radius:var(--r16);padding:14px 16px;
  box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-poggia)}
.ms-testo{flex:1;min-width:0}
.ms-nome{font-weight:700;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-lega{text-align:right;flex:none}
.ms-lega-n{display:flex;align-items:center;gap:6px;justify-content:flex-end;margin-top:3px}
/* la lega trovata col codice: stemma a sinistra, il resto accanto */
.avviso.ok.trovata{align-items:center;gap:14px}
.ms-lega .tag{margin-bottom:3px}
/* La scheda di una lega che amministri: ambra come la corona dell'admin e
   la tessera "squadre" in home - stessa ricetta delle schede della
   strategia, cosi' tutta l'area parla la stessa lingua. */
.lega-admin{--tinta:var(--t-ambra);padding:18px 20px;
  border-color:color-mix(in srgb,var(--tinta) 30%,transparent);
  background:
    radial-gradient(110% 130% at 100% 0%,color-mix(in srgb,var(--tinta) 18%,transparent),transparent 62%),
    linear-gradient(165deg,color-mix(in srgb,var(--tinta) 8%,transparent),transparent 55%),
    var(--surface)}
.lega-admin:hover{border-color:color-mix(in srgb,var(--tinta) 55%,transparent)}
/* La scheda della lega e' grande come quella di una squadra, e lo stemma
   e' lo stesso stemma: sono le due facce della stessa cosa - con chi
   giochi e come ti chiami - e nella stessa pagina non potevano avere due
   misure diverse. */
/* una sotto l'altra e larghe tutta la pagina, come le squadre: in tre
   colonne il nome della lega finiva addosso alla freccia */
.leghe-lista{display:flex;flex-direction:column;gap:12px}
.lega-riga{display:flex;gap:14px;align-items:center}
.lega-admin .rname{font-size:17px;font-weight:700}
.lega-admin .go2{align-self:center}
/* ---- codice della lega ---- */
.codice-box{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r16);padding:14px 18px;
  box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-poggia)}
.cod-lab{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700}
.cod-val{font-size:26px;font-weight:800;letter-spacing:.14em;font-variant-numeric:tabular-nums;margin-top:3px}
.input.cod{font-size:20px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;text-align:center}
/* ---- richieste e squadre iscritte ---- */
.isc-lista{display:flex;flex-direction:column;gap:8px}
.isc-riga{display:flex;align-items:center;gap:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,0)),var(--surface);
  border:1px solid var(--border);border-radius:var(--r12);padding:10px 13px;
  box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-poggia)}
.isc-riga .btn.sm{flex:none}
@media(max-width:640px){
  .mia-squadra{flex-wrap:wrap}
  .ms-testo{flex:1 1 100%;order:-1}
  .cod-val{font-size:21px}
}
/* Stato del salvataggio. Deve restare in disparte quando va tutto bene -
   un puntino e una scritta tenue - e farsi vedere solo se qualcosa non e'
   arrivato sul database, perche' li' non c'e' nessuna copia di riserva. */
.salvastato{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
  white-space:nowrap;background:none;border:0;padding:0;font-family:inherit;color:var(--faint)}
.salvastato::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.salvastato.lavoro{color:var(--muted)}
.salvastato.lavoro::before{animation:respiro 1.1s ease-in-out infinite}
@keyframes respiro{0%,100%{opacity:.25}50%{opacity:1}}
.salvastato.errore{color:var(--neg);font-weight:700;cursor:pointer;
  border-radius:var(--r-capsula);padding:3px 9px;background:color-mix(in srgb,var(--t-rossa) 12%,transparent)}
.salvastato.errore:hover{background:var(--neg);color:#fff}
@media(max-width:820px){.salvastato.ok{display:none}}
.avatar.on{border:1px solid var(--border2)}
.acct-menu{position:fixed;z-index:60;min-width:230px;background:var(--surface);
  border:1px solid var(--border2);border-radius:var(--r16);padding:6px;
  box-shadow:0 18px 50px rgba(0,0,0,.55)}
.am-testa{padding:11px 12px 12px;border-bottom:1px solid var(--border);margin-bottom:6px;
  word-break:break-word}
.am-voce{display:block;width:100%;text-align:left;background:none;border:0;color:var(--text);
  font-family:inherit;font-size:13.5px;padding:10px 12px;border-radius:var(--r10);cursor:pointer}
.am-voce:hover{background:var(--surface2)}
.am-voce.esci{color:var(--neg)}
.sq-lista{display:flex;flex-direction:column;gap:8px}
.sq-riga.vista{grid-template-columns:28px 1fr 1fr auto;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r12);padding:10px 12px}
.sq-n{width:26px;height:26px;border-radius:var(--r8);background:var(--surface3);color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.sq-nome{font-weight:650;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.input.err{border-color:var(--neg)}
.reg-rosa{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:620px){.reg-rosa{grid-template-columns:repeat(4,1fr)}}
.reg-ruolo{display:flex;flex-direction:column;gap:6px}
.reg-ruolo label{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);font-weight:600}
.reg-check{display:flex;gap:11px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r12);padding:14px;cursor:pointer}
.reg-check input{width:18px;height:18px;margin-top:2px;accent-color:var(--accent);flex:none}
.btn.danger{color:var(--neg);border-color:color-mix(in srgb,var(--t-rossa) 40%,transparent);background:transparent}
.btn.danger:hover{background:var(--neg);border-color:var(--neg);color:#fff}
.btn.ghost.danger{color:var(--muted);border-color:var(--border)}
.btn.ghost.danger:hover{background:transparent;color:var(--neg);border-color:color-mix(in srgb,var(--t-rossa) 40%,transparent)}
.btn.danger svg{stroke:currentColor}
@media(max-width:600px){
  .sq-riga.vista{grid-template-columns:24px 1fr auto}
}

/* crediti accanto ai numeri */
.cr{font-style:normal;font-size:.52em;font-weight:700;color:var(--muted);margin-left:3px;letter-spacing:.02em}
.lb-big .cr{font-size:.4em}
/* passi del wizard */
.passi{display:flex;gap:8px;margin-bottom:14px}
.passo{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--faint);background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--r-capsula);padding:5px 13px}
.passo.on{color:#fff;background:var(--grad);border-color:transparent}
.passo.fatto{color:var(--pos);border-color:color-mix(in srgb,var(--t-verde) 35%,transparent);background:color-mix(in srgb,var(--t-verde) 8%,transparent)}
/* la barra di navigazione dell'asta non ha piu' pulsanti sciolti: dentro
   ci sta solo la barra dell'asta, che si porta i suoi margini */
.nav{padding:0;border-bottom:none}
/* ---- la barra dell'asta: dove sei, e le poche cose che si fanno ----
   Stessa materia dei pannelli del sito - superficie, bordo, angoli tondi,
   ombra di contatto - perche' e' un pezzo dell'interfaccia, non una riga
   di testo appoggiata sopra la pagina. */
.asta-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;width:100%;margin:10px 18px 4px;max-width:calc(100% - 36px);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r16);
  padding:10px 14px;box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-poggia)}
.ab-sx{display:flex;align-items:center;gap:11px;min-width:0}
.ab-id{min-width:0}
.ab-nome{font-weight:750;font-size:15px;display:flex;align-items:center;gap:8px;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-meta{font-size:12.5px;color:var(--muted);margin-top:1px}
.ab-dx{display:flex;align-items:center;gap:8px;flex:none;flex-wrap:wrap}
.tag.live{color:var(--pos);border-color:color-mix(in srgb,var(--t-verde) 45%,transparent);
  background:color-mix(in srgb,var(--t-verde) 12%,transparent)}
.tag.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pos);
  display:inline-block;margin-right:5px;vertical-align:1px;
  box-shadow:0 0 8px var(--pos);animation:pulsa 2.4s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.35}}
@media(max-width:700px){
  .asta-bar{margin:8px 14px 4px;max-width:calc(100% - 28px);gap:10px}
  .ab-dx{width:100%}
  .ab-dx .fchip{flex:1}
}

/* interruttore obiettivi / listone */
.vista-switch{display:flex;gap:6px;background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--r12);padding:4px;margin-bottom:12px}
.vista-switch .vs{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  background:none;border:none;color:var(--muted);font-size:13.5px;font-weight:650;
  padding:9px 12px;border-radius:var(--r10);transition:background .15s,color .15s}
.vista-switch .vs svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.vista-switch .vs span{white-space:nowrap}
.vista-switch .vs b{background:rgba(255,255,255,.1);border-radius:var(--r-capsula);padding:1px 7px;font-size:12px}
.vista-switch .vs:hover{color:var(--text)}
.vista-switch .vs.on{background:var(--grad);color:#fff}
.vista-switch .vs.on b{background:rgba(0,0,0,.25)}
.live-search{width:100%;max-width:none;margin-bottom:14px}
.live-search input{min-height:46px;font-size:15px}

/* blocchi obiettivi per reparto */
.ob-blocco{margin-bottom:18px}
.ob-tit{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;margin-bottom:9px}
.ob-n{color:var(--muted);font-weight:650;font-size:12.5px}
.ob-n.ok{color:var(--pos)}
.ob-tit .rosa-sp{margin-left:auto}

.live-list{display:flex;flex-direction:column;gap:6px}
.live-row{display:flex;align-items:center;gap:11px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r12);padding:9px 12px;transition:opacity .15s,border-color .15s}
.live-row .tlogo{width:22px;height:22px;margin:0}
.live-row.obiettivo{border-color:color-mix(in srgb,var(--t-blu) 45%,transparent);background:color-mix(in srgb,var(--t-blu) 6%,transparent)}
.live-row.mio{border-color:color-mix(in srgb,var(--t-verde) 50%,transparent);background:color-mix(in srgb,var(--t-verde) 8%,transparent)}
/* Sbiadito si', ma non troppo: se cerchi un giocatore gia' venduto devi
   comunque riuscire a leggere chi l'ha preso e a quanto. Prima l'opacita'
   a .38 spegneva anche quell'informazione, che e' il motivo per cui lo
   stavi cercando. */
.live-row.via{opacity:.55}
/* Il taglio va SOLO sul nome, non sul contenitore: una decorazione messa
   sul padre attraversa tutti i figli e non si puo' togliere da dentro,
   quindi barrava anche l'etichetta di chi l'aveva comprato. */
.live-row.via .lr-n{text-decoration:line-through}
.live-row.via .tag.preso-da{opacity:1;font-weight:700}
.lr-id{flex:1;min-width:0}
.lr-nome{font-weight:650;font-size:15px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lr-meta{color:var(--muted);font-size:12px;margin-top:1px}
.lr-prezzo{flex:none;text-align:right;min-width:66px}
.lr-prezzo b{font-size:17px;font-weight:800;display:block}
.lr-prezzo span{font-size:10px;color:var(--muted)}
.lr-act{display:flex;gap:5px;flex:none}
.iconbtn.ok{color:var(--pos);border-color:color-mix(in srgb,var(--t-verde) 40%,transparent)}
.iconbtn.ok:hover{background:var(--pos);border-color:var(--pos);color:var(--su-verde)}
.iconbtn.danger{color:var(--neg);border-color:color-mix(in srgb,var(--t-rossa) 40%,transparent)}
.iconbtn.danger:hover{background:var(--neg);border-color:var(--neg);color:#fff}

.rosa-n.ok{color:var(--pos)}
.rosa-sp{font-size:11.5px;color:var(--muted);font-weight:600}
.rosa-sp i{font-style:normal;color:var(--faint)}
.rosa-riga .tlogo{width:20px;height:20px;margin:0}
.rosa-riga.vuota{background:transparent;border-style:dashed;opacity:.45}
@media(max-width:700px){
  .live-budget{border-right:none;padding-right:0}
  .lb-big{font-size:32px}
  .live-slots{width:100%}
}

/* ---- il piu': grande, pieno, sempre all'estrema destra della riga ----
   E' l'unica cosa che si fa mentre si scorre il listone, e non puo'
   somigliare agli altri pulsantini. Quando il giocatore e' gia' negli
   obiettivi diventa una spunta verde. */
.add-btn{flex:none;margin-left:auto;align-self:center;width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  border:none;border-radius:50%;background:var(--grad);color:#fff;
  box-shadow:0 6px 16px -8px color-mix(in srgb,var(--accent) 90%,transparent),
    inset 0 0 0 1px rgba(255,255,255,.18);
  transition:transform .12s,filter .15s}
.add-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.6}
.add-btn:hover{filter:brightness(1.1)}
.add-btn:active{transform:scale(.92)}
.add-btn.dentro{background:color-mix(in srgb,var(--t-verde) 20%,transparent);
  color:var(--pos);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t-verde) 55%,transparent)}
@media(max-width:560px){.add-btn{width:38px;height:38px}}

.asst-grid{display:flex;flex-direction:column;gap:24px}
/* su desktop linguetta, velo e tasto chiudi non servono */

/* ---- telefono e tablet: un pannello per volta, si sceglie in fondo ----
   Come nell'asta: niente tendina che entra da destra (bisognava sapere
   che c'era), ma la stessa barra in basso, nello stesso posto, con lo
   stesso gesto. Si vede quello che serve e basta. */
@media(max-width:959px){
  .asst-add,.asst-obj{width:100%;margin:0}
  .asst-grid.m-add .asst-obj,.asst-grid.m-obj .asst-add{display:none}
  .obj-head{margin-bottom:10px}
}
@media(min-width:960px){.asst-add{order:1}.asst-obj{order:2}}
@media(min-width:960px){
  /* la chrome (topbar + tab) resta fissa, il contenuto occupa il resto della finestra */
  body.workspace .app{display:flex;flex-direction:column;height:100vh;height:100dvh}
  body.workspace .topbar,body.workspace .nav,body.workspace .strat-bar{flex:none}
  body.workspace .view{flex:1;min-height:0;overflow-y:auto}
  body.workspace .view.asst-page{display:flex;flex-direction:column;overflow:hidden;padding-top:14px;padding-bottom:14px}
  .asst-page .asst-head{flex:none}
  .asst-page .asst-head .stepper{margin-bottom:8px}
  .asst-page .asst-head .step{padding:7px 8px}
  .asst-page .asst-grid{flex:1;min-height:0;padding-top:14px}

  /* gli obiettivi piu' larghi: e' li' che si lavora davvero. Erano 35 su
     cento e il nome del giocatore col suo prezzo stavano stretti; ora sono
     42. Piu' in la' non si va: a sinistra c'e' il listone, e le sue righe
     hanno bisogno di spazio per le statistiche - sotto una certa misura
     vanno a capo e ogni riga cresce in altezza, quindi si vedono meno
     giocatori per schermata proprio mentre li stai scegliendo. */
  .asst-grid{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);align-items:stretch;gap:20px}
  .asst-add{order:1}.asst-obj{order:2}
  /* Le due colonne sono lo stesso oggetto delle colonne dell'asta: stessa
     superficie, stesso bordo, stessi angoli, stessa ombra. Prima quella di
     sinistra non aveva niente e quella di destra era un rettangolo nero
     semitrasparente: due materiali diversi appaiati nella stessa schermata. */
  .asst-add,.asst-obj{background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r20);padding:16px 18px;
    box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-poggia)}
  .asst-add,.asst-obj{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  /* niente barre di scorrimento visibili: lo scorrimento si capisce
     dallo sfondo dell'area e dal contenuto che sfuma sotto il bordo */
  .asst-add,.asst-obj{scrollbar-width:none;-ms-overflow-style:none}
  .asst-add::-webkit-scrollbar,.asst-obj::-webkit-scrollbar{width:0;height:0;display:none}
  .asst-add .plist{grid-template-columns:1fr}
  /* nella colonna dell'assistente la riga e' sempre piu' stretta del listone a
     tutta pagina: le statistiche vanno sempre a capo e si distribuiscono a
     griglia, cosi' si vedono tutte senza tagli e la riga cresce in altezza */
  .asst-add .prow{flex-wrap:wrap;row-gap:8px}
  .asst-add .prow .prow-stats{flex-basis:100%;order:5;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:4px;
    border-top:1px solid var(--border);padding-top:10px;margin-top:2px}
  .asst-add .prow .pstat{width:auto}
  .asst-add .prow .pstat.sand{grid-column:span 2}
  /* area dei selezionati: fondo appena piu' scuro, cosi' si legge come pannello a se' */
}
/* fascia groups inside the picker column */
.fchips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.fchip{background:var(--surface2);border:1px solid var(--border2);color:var(--muted);border-radius:var(--r-capsula);
  padding:6px 13px;font-size:12.5px;font-weight:650;transition:color .15s,background .15s,border-color .15s}
/* l'icona dentro la pastiglia va misurata: senza, un svg senza attributi
   width/height si prende tutto lo spazio che trova */
.fchip svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
  vertical-align:-2px;flex:none}
.fchip:hover{color:var(--text)}
.fchip.on{color:#fff;background:var(--grad);border-color:transparent}
.fchip.azzera{color:var(--neg);border-color:color-mix(in srgb,var(--t-rossa) 40%,transparent)}
.fchip.azzera:hover{color:#fff;background:var(--neg);border-color:var(--neg)}
.fchip.azzera svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;vertical-align:-2px}
.fchips .fsel{width:auto;min-height:34px;padding:5px 12px;font-size:12.5px;font-weight:650;border-radius:var(--r-capsula);flex:none}
.fgroup{margin-bottom:18px}
.fhead{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  padding:9px 12px;margin-bottom:8px;border-radius:var(--r10);border:1px solid var(--border2);
  background:rgba(15,18,24,.92);backdrop-filter:blur(10px)}
.fhead .fdot{width:8px;height:8px;border-radius:50%;flex:none}
.fhead .fcount{margin-left:auto;color:var(--muted);font-weight:650;letter-spacing:0;text-transform:none}
/* la tinta arriva dalla classe della fascia (top/semi/media/low/scommessa,
   vedi la tavolozza). Il pallino e la scritta sono lo stesso colore: prima
   in "semi" la scritta era #c4b5fd e il pallino --accent2, due viola. */
.fhead{color:var(--tinta,var(--muted))}
.fhead .fdot{background:var(--tinta,var(--muted))}

.obj-board{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.obj-outer{flex:1;min-width:0;border-radius:var(--r20);padding:10px;border:1px solid var(--border);
  background:var(--surface);box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-poggia)}
.obj-outer.empty{border:2px dashed var(--border2);background:transparent}
/* il nome della fascia e' un titolo, non un'etichettina: e' il modo in cui
   ti orienti fra le colonne mentre sposti i giocatori */
.obj-outer-label{font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--text);
  padding:2px 2px 10px;display:flex;align-items:center;gap:8px}
/* ---- il nome della fascia si cambia cliccandolo ----
   La matita sta DENTRO il bottone, non accanto: cosi' si vede che il nome
   si puo' cambiare, ma resta un bersaglio solo da centrare invece di due
   in una riga stretta. Sbiadita finche' non ci passi sopra, per non
   competere col nome che e' l'informazione. */
.f-nome{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-transform:inherit;letter-spacing:inherit;text-align:left;
  display:inline-flex;align-items:center;gap:7px}
.f-nome svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.4;transition:opacity .15s}
.f-nome:hover{color:var(--text)}
.f-nome:hover svg{opacity:1}
.f-via{background:none;border:0;padding:0;margin-left:auto;cursor:pointer;color:var(--faint);
  display:flex;opacity:.7}
.f-via:hover{opacity:1;color:var(--neg)}
.f-via svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2}
/* il riquadro del + : sta sotto l'ultima fascia, dov'e' naturale cercarlo.
   La lavagna impila le fasce una sull'altra, quindi qui e' una striscia
   bassa e larga e non una colonna. */
.obj-outer.aggiungi{border:2px dashed var(--border2);background:transparent;padding:0;
  box-shadow:none;display:flex;align-items:center;justify-content:center}
.f-piu{background:none;border:0;cursor:pointer;color:var(--muted);display:flex;
  align-items:center;gap:10px;padding:13px 14px;width:100%;justify-content:center}
.f-piu span{font-size:20px;font-weight:300;line-height:1;
  width:26px;height:26px;border-radius:50%;border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center}
.f-piu i{font-style:normal;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.f-piu:hover{color:var(--text)}
.f-piu:hover span{border-color:var(--accent);color:var(--accent)}
/* la casella vuota di una fascia tua: non filtra niente, dice solo dove trascinare */
.obj-tile.empty.muta{cursor:default}
.ot-vuota{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.obj-count{background:rgba(255,255,255,.08);border-radius:var(--r-capsula);padding:1px 7px;font-size:9.5px;color:var(--text)}
.obj-outer .obj-tile+.obj-tile{margin-top:8px}
.obj-outer.empty .obj-outer-label{opacity:.7}
/* Un box per fascia, tinto come le schede della strategia: bordo nella tinta
   e un velo dello stesso colore che si spegne scendendo, invece di un
   riempimento piatto uguale su tutta l'altezza. Cinque righe al posto di
   cinque blocchi di rgba scritti a mano. */
.obj-outer[class*="violet"],.obj-outer[class*="blue"],.obj-outer[class*="amber"],
.obj-outer[class*="cyan"],.obj-outer[class*="pink"]{
  border-color:color-mix(in srgb,var(--tinta) 34%,transparent);
  background:
    radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--tinta) 11%,transparent),transparent 64%),
    var(--surface)}
.obj-outer .obj-outer-label{color:var(--tinta,var(--muted))}
/* drag & drop */
.prow[draggable="true"]{cursor:grab}
.prow[draggable="true"]:active{cursor:grabbing}
.prow.dragging{opacity:.35}
.obj-outer{transition:border-color .15s,background .15s,box-shadow .15s}
body.dragging-obj .obj-outer{border-style:dashed}
.obj-outer.dragover{border-color:var(--accent)!important;border-style:solid!important;
  background:color-mix(in srgb,var(--t-blu) 14%,transparent)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--t-blu) 35%,transparent)}
/* linea di inserimento durante il trascinamento */
.obj-tile.drop-before::after,.obj-tile.drop-after::after{content:"";position:absolute;left:-4px;right:-4px;height:4px;
  border-radius:var(--r-capsula);background:var(--accent);box-shadow:0 0 12px 2px color-mix(in srgb,var(--t-blu) 75%,transparent);z-index:4;pointer-events:none}
.obj-tile.drop-before::after{top:-7px}
.obj-tile.drop-after::after{bottom:-7px}
.obj-tile.filled{transition:opacity .15s,transform .15s,border-color .15s}
/* raggio concentrico: 20 del contenitore meno i 10 di padding */
.obj-tile{position:relative;width:100%;min-height:82px;flex:none;border-radius:var(--r12);padding:10px 12px;box-sizing:border-box}
.obj-tile.empty{border:2px dashed var(--border2);display:flex;flex-direction:column;align-items:center;justify-content:center}
.obj-tile .ot-plus{font-size:24px;line-height:1;color:var(--faint);opacity:.6}
.obj-tile.filled{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:9px;
  border:1px solid var(--border2);background:var(--surface2);cursor:grab;
  /* bordo di luce come le altre superfici, invece di un contorno uniforme */
  box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-poggia);
  transition:border-color .15s,box-shadow .15s}
.obj-tile.filled.dragging{opacity:.35}
/* La tinta della fascia come velo che si spegne scendendo, sopra la
   superficie normale: la stessa ricetta delle schede della strategia.
   Erano sei blocchi di rgba al 30%, uno per fascia - un riempimento pieno
   che copriva la superficie e faceva sembrare la card un adesivo colorato.
   Adesso il colore dice a quale fascia appartiene senza urlare, e la tinta
   e' scritta in un posto solo. */
.obj-tile.filled{
  border-color:color-mix(in srgb,var(--tinta,var(--border2)) 40%,transparent);
  background:
    linear-gradient(158deg,
      color-mix(in srgb,var(--tinta,transparent) 16%,transparent),
      color-mix(in srgb,var(--tinta,transparent) 4%,transparent) 78%),
    var(--surface2)}
.ot-actions{display:grid;grid-template-columns:repeat(2,26px);gap:4px;flex:none;align-content:center}
.ot-actions button{background:rgba(255,255,255,.07);border:1px solid var(--border2);color:var(--muted);
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,border-color .15s}
.ot-actions button svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2}
.ot-actions button:hover:not(:disabled){color:#fff;background:var(--accent);border-color:var(--accent)}
.ot-actions button.danger:hover:not(:disabled){background:var(--neg);border-color:var(--neg)}
.ot-actions button:disabled{opacity:.25;cursor:default}
.ot-grip{display:flex;align-items:center;justify-content:center;flex:none;width:16px;color:var(--faint);cursor:grab}
.obj-tile.filled:hover .ot-grip{color:var(--muted)}
.ot-grip svg{width:16px;height:16px}
.ot-sub{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* il nome per esteso sta nel titolo della colonna; qui dentro, se non ci
   sta, si taglia con i puntini invece di sfondare la casella */
.ot-fascia{max-width:100%;min-width:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
  font-size:10.5px;font-weight:750;text-transform:uppercase;letter-spacing:.03em;
  border-radius:var(--r-capsula);padding:3px 22px 3px 9px;border:1px solid var(--border2);
  background:rgba(255,255,255,.06) no-repeat right 7px center/9px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2398a0b2' stroke-width='1.6'/%3E%3C/svg%3E");
  color:var(--text);-webkit-appearance:none;appearance:none;cursor:pointer;transition:border-color .15s,background-color .15s}
.ot-fascia:hover{border-color:var(--accent)}
.ot-fascia option{background:var(--surface);color:var(--text);text-transform:none;font-weight:600}
.ot-fascia{color:var(--tinta,var(--text))}
.ot-edit{display:inline-flex;align-items:center;gap:2px}
.ot-edit input{width:62px;background:rgba(0,0,0,.28);border:1px solid var(--border2);color:var(--text);
  border-radius:var(--r10);padding:3px 7px;font-size:17px;font-weight:800;text-align:right;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.ot-edit input::-webkit-outer-spin-button,.ot-edit input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ot-edit input:focus{outline:none;border-color:var(--accent);background:rgba(0,0,0,.4)}
.ot-edit i{font-style:normal;font-size:13px;font-weight:800;color:var(--muted)}
/* La card va su due righe quando e' stretto IL PANNELLO, non la finestra:
   a 1280px la colonna degli obiettivi e' larga come un telefono, e prima
   il nome si riduceva a due lettere perche' la regola guardava lo schermo. */
.asst-obj{container-type:inline-size}
@container (max-width:470px){
  .obj-tile.filled{flex-wrap:wrap;row-gap:10px;padding:12px}
  .obj-tile.filled .ot-left{flex:1 1 100%;min-width:0}
  .obj-tile.filled .ot-prices{flex:1 1 auto;justify-content:flex-start;gap:20px}
  .obj-tile.filled .ot-actions{flex:none;margin-left:auto}
  .obj-tile.filled .ot-grip{position:absolute;top:14px;right:12px;width:auto}
  .obj-tile.filled .ot-name{font-size:14px}
}
.ot-left{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;flex:1}
/* max-width serve: .ot-left e' un flex a colonna, quindi qui la larghezza e'
   l'asse trasversale e i figli non si restringono da soli - senza questo il
   nome lungo sbordava sopra l'etichetta del prezzo invece di troncarsi */
.ot-head{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.ot-sub{max-width:100%}
.obj-tile .chip{width:19px;height:19px;font-size:9px;border-radius:var(--r8);flex:none}
.ot-name{font-size:12px;font-weight:750;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ot-tag{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;border-radius:var(--r-capsula);padding:2px 6px;white-space:nowrap}
.ot-tag{color:var(--tinta,var(--muted));
  background:color-mix(in srgb,var(--tinta,var(--muted)) 17%,transparent)}
.ot-prices{display:flex;flex-direction:row;align-items:flex-end;justify-content:flex-end;gap:16px;flex:none}
.ot-price{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left}
.ot-price.mine{padding-left:16px;border-left:1px solid var(--border2)}
.ot-price span{font-size:10.5px;color:var(--muted);white-space:nowrap}
.ot-price b{font-size:18px;font-weight:800;color:var(--text)}
/* il tuo prezzo prende la tinta della fascia in cui hai messo il giocatore */
.obj-tile.filled .ot-price.mine b{color:var(--tinta,var(--text))}
.pricebox .maxbox .row{gap:3px}
.pname{font-weight:650;font-size:16.5px;line-height:1.2;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pmeta{color:var(--muted);font-size:13px;display:flex;align-items:center;gap:5px}
.sp{font-size:12px;font-weight:600;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r8);padding:4px 8px;color:var(--muted);flex:none;white-space:nowrap}
.sp b{color:var(--text);font-weight:700;margin-left:3px}
.sp svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;vertical-align:-2px;margin-right:3px;opacity:1}
.qt{font-weight:700;font-size:15px}.spark{display:block}
.arrow{font-weight:700}.arrow.up{color:var(--pos)}.arrow.dn{color:var(--neg)}.arrow.fl{color:var(--muted)}.arrow.wv{color:var(--warn)}
.overlay{position:fixed;inset:0;z-index:80;background:rgba(5,6,8,.6);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center}
@media(min-width:640px){.overlay{align-items:center;padding:20px}}
/* Piu' larga di prima: dentro ci sta il grafico delle 38 giornate, e 38
   barre in 560px sarebbero pettinini illeggibili. */
.sheet{background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,0)),var(--surface);
  border:1px solid var(--border);width:100%;max-width:820px;border-radius:var(--r20) var(--r20) 0 0;
  max-height:92vh;overflow:auto;padding:18px 18px 26px;
  box-shadow:var(--luce-alto),var(--ombra-sollevato)}

/* ---- il blocco del grafico: due viste, due linguette ---- */
.grafico-box{padding:14px 14px 10px;margin-bottom:14px}
.gr-testa{margin-bottom:10px;flex-wrap:wrap;gap:8px}
.gr-tabs{display:flex;gap:3px;background:rgba(0,0,0,.28);border:1px solid var(--border);
  border-radius:var(--r-capsula);padding:3px}
.gr-tab{background:none;border:0;color:var(--muted);font-size:12px;font-weight:650;
  padding:5px 12px;border-radius:var(--r-capsula);white-space:nowrap;transition:color .15s,background .15s}
.gr-tab:hover{color:var(--text)}
.gr-tab.on{color:var(--text);background:color-mix(in srgb,var(--accent) 26%,transparent)}
.gr-legenda{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);margin:8px 0 4px}
/* i numeri sopra il grafico: il riassunto che il disegno non dice a voce */
.gr-riassunto{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}
.gr-dato{background:rgba(0,0,0,.22);border:1px solid var(--border);border-radius:var(--r10);
  padding:8px 10px;min-width:0}
.gr-dato b{display:block;font-size:19px;font-weight:750;line-height:1.15;color:var(--text)}
.gr-dato b.su{color:var(--pos)}.gr-dato b.giu{color:var(--neg)}
.gr-dato span{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  font-weight:650;display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr-scroll{overflow-x:auto;overscroll-behavior-x:contain}
.gr-scroll::-webkit-scrollbar{height:6px}
@media(max-width:640px){
  .gr-riassunto{grid-template-columns:repeat(3,1fr)}
  .gr-dato b{font-size:16px}
  /* sotto questa misura le 38 barre schiacciate diventano un pettine:
     meglio tenerle larghe e far scorrere il grafico con il dito */
  .gr-scroll svg{min-width:560px}
}
@media(min-width:640px){.sheet{border-radius:var(--r20)}}
.sheet .grip{width:38px;height:4px;border-radius:var(--r-capsula);background:var(--border2);margin:0 auto 14px}
@media(min-width:640px){.sheet .grip{display:none}}
.empty{text-align:center;color:var(--muted);padding:40px 20px}
.empty svg{width:42px;height:42px;stroke:var(--faint);fill:none;stroke-width:1.5;margin-bottom:12px}
/* Stessa materia degli altri riquadri: il velo di luce in alto e l'ombra di
   contatto. Senza, i KPI sembravano ritagli piatti incollati sopra la card
   che li contiene, invece di oggetti dello stesso mondo. */
.kpi{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),var(--surface2);
  border:1px solid var(--border);border-radius:var(--r16);padding:12px;
  box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-poggia)}
.kpi .v{font-size:22px;font-weight:750;letter-spacing:-.02em}.kpi .l{font-size:12px;color:var(--muted);margin-top:2px}
hr.sep{border:none;border-top:1px solid var(--border);margin:14px 0}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* ================= IL TELEFONO =================
   Le regole che seguono valgono sotto i 1000px e sono tutte figlie di
   una sola idea: sullo schermo piccolo si fa una cosa per volta, e la si
   raggiunge col pollice senza cambiare presa. */

/* ---- i campi non devono far zoomare la pagina ----
   Sotto i 16px iOS ingrandisce da solo appena tocchi un campo, e non
   torna piu' indietro: si finisce a scrivere un nome dentro un sito
   zoomato del 130%. Sedici e' il minimo, non una preferenza. */
@media(max-width:999px){
  input,select,textarea,.input,.search input,.cerca-forte input{font-size:16px}
  .filters select.input,.live-filtri select.input,
  .pn-tit .filters .input{font-size:16px;min-height:44px}
  .fsel,#ltit,#atit{font-size:16px;min-height:44px}
}

/* ---- quello che si tocca deve essere grande abbastanza ----
   Quarantaquattro pixel e' la misura di un polpastrello. I pulsanti
   piccoli restano piccoli da vedere - non si stravolge il disegno - ma
   l'area che risponde al dito arriva a quarantaquattro. */
@media(max-width:999px){
  .iconbtn,.fchip,.tb-x,.tb-frecc,.linkbtn,.backbtn{position:relative}
  .iconbtn::after,.fchip::after,.tb-x::after,.tb-frecc::after,.backbtn::after{
    content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:max(100%,44px);height:max(100%,44px)}
  .iconbtn{min-width:38px;min-height:38px}
  .fchip{min-height:36px}
  /* i comandi della scheda obiettivo e il piu' del listone: sono i due
     gesti che si ripetono cento volte, e vanno presi al primo colpo */
  .ot-actions{grid-template-columns:repeat(2,38px);gap:6px}
  .ot-actions button{width:38px;height:38px;position:relative}
  .ot-actions button::after{content:"";position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);width:44px;height:44px}
  .ot-edit input{min-height:40px;font-size:16px}
  .add-btn{width:44px;height:44px}
  .step-tg{min-height:38px}
  .ot-fascia{min-height:34px}
  .vs{min-height:44px}
  .gr-tab{min-height:36px}
}

/* ---- niente scritte che non si leggono ---- */
@media(max-width:999px){
  .tag,.ot-tag,.ant-m,.lr-meta,.muted.small,.small{font-size:12px}
  .ot-tag{font-size:11px}
}

/* ---- griglie a due colonne che a 375px non ci stanno ---- */
@media(max-width:430px){
  .tiles{grid-template-columns:minmax(0,1fr);gap:10px}
}

/* ---- la riga del giocatore, sul telefono ----
   A schermo intero la riga porta nove statistiche: e' giusto, c'e' spazio.
   Su un telefono le stesse nove diventano una torre da 440px, e trenta
   giocatori sono trenta schermate: si scorre per un minuto senza arrivare
   a nessuna decisione. Restano i tre numeri su cui si decide davvero -
   quanto rende, quanto gioca, quanto costa - e tutto il resto e' a un
   tocco di distanza, nella scheda che la riga apre gia' oggi. */
@media(max-width:700px){
  .prow{flex-wrap:wrap;row-gap:9px;gap:11px;padding:11px 13px}
  .prow .chip{width:30px;height:30px;font-size:13.5px}
  .prow-id{flex:1 1 140px;min-width:0}
  .prow-id .pname{font-size:16px}
  .prow-id .pmeta{font-size:12.5px}
  .prow .prow-right,.prow .prow-val{display:none}
  .prow .prow-stats{flex:1 1 100%;order:5;flex-wrap:nowrap;gap:6px;justify-content:stretch;
    border-top:1px solid var(--border);padding-top:9px}
  .prow .pstat{display:none}
  .prow .pstat:nth-child(3),.prow .pstat:nth-child(7),.prow .pstat:nth-child(8){
    display:flex;flex:1 1 0;width:auto;min-width:0}
  .prow .pstat b{font-size:16px}
}

/* la riga con lega, crediti e comandi va a capo invece di uscire dallo
   schermo: uno spiovente che si scopre solo trascinando non lo trova nessuno */
@media(max-width:999px){
  .nav{flex-wrap:wrap;overflow-x:visible}
}

/* il pulsante che allunga la lista: largo quanto la colonna, si trova */
.mostra-altri{width:100%;margin-top:10px;min-height:46px}

/* il listone: stessa larghezza della testata, cosi' titolo e pannello
   stanno sulla stessa colonna invece di sfalsarsi */
.listone-head{max-width:none}
.listone-pan{max-width:none}
.listone-pan .cerca-forte{top:calc(var(--top-h) + 6px)}

/* ---- l'arrivo: la schermata di benvenuto ----
   Centrata e larga, senza campi da riempire: stemma, nome, una frase.
   E' l'unico momento in cui il sito parla e basta. */
.arrivo{max-width:440px;margin:0 auto;text-align:center;padding:10px 0 6px}
.arrivo .sq-logo{margin:0 auto 20px;
  box-shadow:0 14px 40px color-mix(in srgb,var(--accent) 30%,transparent)}
.arrivo h1{font-size:30px;letter-spacing:-.02em;margin:0 0 10px;text-transform:uppercase}
.arrivo p{color:var(--muted);font-size:15px;line-height:1.6;margin:0 0 8px}
.arrivo p b{color:var(--text);font-weight:700}
.arrivo-poi{font-size:13.5px;margin-top:14px;
  border-top:1px solid var(--border);padding-top:14px}
.arrivo .btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.4}

/* ---- la linguetta: cambiare vista dentro la pagina ----
   Due pastiglie affiancate, quella accesa con la tinta della sezione.
   Sta nel contenuto e scorre con lui: non e' un menu, e' un interruttore
   fra due elenchi. Sul computer non serve - stanno gia' affiancati. */
.linguetta{display:none}
.backbtn.solo-mob{display:none}
@media(max-width:959px){
  .linguetta{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;
    background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r-capsula);
    padding:4px;margin:12px 0 2px}
  .lg-v{display:flex;align-items:center;justify-content:center;gap:7px;
    min-height:42px;padding:6px 10px;background:none;border:0;cursor:pointer;
    color:var(--muted);font-size:13.5px;font-weight:650;border-radius:var(--r-capsula);
    transition:background .18s,color .18s}
  .lg-v svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
  .lg-v span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lg-v.on{color:#fff;background:var(--grad);
    box-shadow:0 2px 10px color-mix(in srgb,var(--t-blu) 32%,transparent)}
  .lg-v b{font-size:11px;font-weight:800;padding:1px 6px;border-radius:var(--r-capsula);
    background:rgba(255,255,255,.16)}
  /* quattro voci in 375px: icona sopra, scritta piccola sotto - come le
     linguette delle app, e ci stanno tutte senza sparire */
  .linguetta.quattro{gap:3px;padding:3px}
  .linguetta.quattro .lg-v{flex-direction:column;gap:2px;padding:5px 2px;
    font-size:11px;min-height:46px;letter-spacing:-.01em}
  .linguetta.quattro .lg-v svg{width:17px;height:17px}
  .linguetta.quattro .lg-v b{position:absolute;transform:translate(16px,-12px);
    font-size:9.5px;padding:0 5px}
  .linguetta.quattro .lg-v{position:relative}
  /* nella schermata d'asta il menu del computer non serve: sceglie la
     linguetta, e due menu uno sopra l'altro sono un menu di troppo */
  .live-barra{display:none}
  /* l'indietro torna in alto, dov'e' la navigazione */
  .backbtn.solo-mob{display:inline-flex;margin-bottom:10px}
}

/* ---- torna in cima ----
   Un tondo in un angolo, che si fa vedere dopo due schermate e sparisce
   appena risali. Non attraversa lo schermo e non litiga con i comandi del
   browser: e' un centimetro quadrato, e solo quando serve. */
.su-tondo{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));
  width:44px;height:44px;border-radius:50%;z-index:40;cursor:pointer;
  background:var(--surface2);border:1px solid var(--border2);color:var(--text);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(0,0,0,.55);
  opacity:0;transform:translateY(10px) scale(.9);pointer-events:none;
  transition:opacity .18s,transform .18s}
.su-tondo svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.2}
.su-tondo.si{opacity:1;transform:none;pointer-events:auto}
@media(min-width:960px){.su-tondo{right:24px;bottom:24px}}

/* ---- meno cornici sul telefono ----
   Prima del bordo dello schermo se ne contavano tre: il margine della
   pagina, il bordo del pannello che tiene la lista, e quello della riga.
   Tre linee parallele a due millimetri l'una dall'altra non dicono niente
   di piu' di una, e intanto si mangiano quaranta pixel di larghezza - su
   375 e' un decimo dello schermo, ed e' esattamente lo spazio in cui non
   ci sta il nome lungo di un giocatore.
   Quindi sul telefono il pannello che contiene una lista sparisce come
   superficie e resta come titolo: le righe si appoggiano direttamente
   sulla pagina, larghe quasi quanto lo schermo. Il pannello resta dov'e'
   sul computer, dove lo spazio non manca e quel riquadro serve a separare
   le colonne. */
@media(max-width:700px){
  /* body.wide alza il margine laterale a 16: sul telefono lo riporto a
     10, che e' quanto basta perche' le righe non tocchino il vetro */
  body.wide .view,.view{padding-left:10px;padding-right:10px}
  .listone-pan,.asta-tre>.pannello{background:none;border:0;box-shadow:none;
    padding:0;border-radius:0}
  .listone-pan>.pn-tit,.asta-tre>.pannello>.pn-tit{padding-left:2px}
  .prow{padding:11px 12px}
}

/* ---- le barre che si tolgono di mezzo ----
   Scorrendo in giu' scivolano fuori dallo schermo, scorrendo in su
   rientrano. Si muovono con transform e non cambiando l'altezza: la
   pagina sotto non si rimpagina, quindi la riga che stavi leggendo resta
   dov'e'. Solo da telefono: sul computer non c'e' niente da guadagnare. */
@media(max-width:959px){
  .topbar{transition:transform .22s ease}
  body.barre-via .topbar{transform:translateY(-100%)}
  /* la ricerca era incollata SOTTO la testata: sparita quella, sale lei */
  body.barre-via .cerca-forte,body.barre-via .live-cima{top:0}
}
@media(prefers-reduced-motion:reduce){.topbar{transition:none}}

/* ---- sto caricando ----
   Il gufo del sito che gira su se stesso: e' lo stesso che accoglie in
   home, quindi anche l'attesa ha la faccia della casa invece di un
   girello anonimo. Niente scritte che saltano, niente barra finta che
   finge di sapere quanto manca. */
.caricando{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:70px 20px;color:var(--muted);font-size:13.5px;min-height:40vh}
.caricando .gufo{width:78px;height:78px;animation:gira 1.8s linear infinite;
  transform-origin:50% 50%;
  filter:drop-shadow(0 4px 16px color-mix(in srgb,var(--sez,var(--accent)) 45%,transparent))}
.caricando .gufo path,.caricando .gufo circle{fill:none;stroke:var(--sez,var(--accent));
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.caricando .gufo-corpo{stroke-width:2.2}
.caricando .gufo-pupilla{fill:var(--sez,var(--accent));stroke:none}
.caricando .gufo-becco{fill:color-mix(in srgb,var(--sez,var(--accent)) 30%,transparent)}
.caricando .gufo-ali{opacity:.65}
@keyframes gira{to{transform:rotate(360deg)}}
/* chi ha chiesto meno animazioni vede il gufo fermo: dice comunque
   "sto aspettando", senza girare */
@media(prefers-reduced-motion:reduce){.caricando .gufo{animation:none}}

/* mentre si carica il piede non c'e': una nota legale sotto una pagina
   ancora vuota e' l'unica cosa che si legge, e non e' quella che uno sta
   aspettando */
.app:has(.caricando) .piede{display:none}
.app:has(.scheletro) .piede{display:none}

/* ---- lo scheletro della pagina ----
   Sta scritto dentro l'HTML, non lo mette il codice: compare al primo
   disegno del browser, prima che parta un solo script. Al posto del gufo
   che gira - che dice "aspetta" senza dire altro - si vede la forma della
   pagina che sta arrivando: un titolo e le sue righe, nelle stesse misure
   di quelle vere, cosi' quando i dati arrivano niente sobbalza.
   E' finto e va detto: aria-hidden lo nasconde a chi legge con la voce,
   che sente la riga di stato qui sotto. */
.scheletro{display:flex;flex-direction:column;gap:12px;padding:4px 0 40px}
.sk-titolo{height:26px;width:min(240px,55%);border-radius:8px;margin-bottom:6px}
.sk-riga{height:64px;border-radius:var(--r12);border:1px solid var(--border)}
.sk-riga.alta{height:96px}
.sk-titolo,.sk-riga{background:linear-gradient(90deg,
    rgba(255,255,255,.028) 0%,rgba(255,255,255,.062) 50%,rgba(255,255,255,.028) 100%);
  background-size:300% 100%;animation:sk-onda 1.4s ease-in-out infinite}
/* le righe piu' in basso sfumano: la pagina non promette quante ne sono,
   dice solo che ne stanno arrivando */
.sk-riga:nth-child(4){opacity:.72}
.sk-riga:nth-child(5){opacity:.5}
.sk-riga:nth-child(6){opacity:.3}
.sk-riga:nth-child(7){opacity:.16}
@keyframes sk-onda{0%{background-position:100% 0}100%{background-position:-100% 0}}
/* chi ha chiesto meno animazioni vede lo scheletro fermo: la forma della
   pagina si legge lo stesso */
@media(prefers-reduced-motion:reduce){.sk-titolo,.sk-riga{animation:none}}
/* la riga che sentono solo i lettori di schermo */
.sk-voce{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- il piede della pagina ----
   Deve esserci senza pesare: testo piccolo, tenue, staccato da sopra con
   una riga sottile. Non e' una sezione del sito, e' una nota. */
.piede{margin-top:44px;padding:20px 18px 10px;border-top:1px solid var(--border)}
@media(min-width:880px){.piede{padding:20px 32px 12px}}
.piede-dentro{max-width:var(--pagina);margin:0 auto;display:flex;gap:14px;
  align-items:baseline;justify-content:space-between;flex-wrap:wrap;
  font-size:12px;color:var(--faint);line-height:1.6}
.piede-dentro a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap;flex:none}
.piede-dentro a:hover{color:var(--text)}
@media(max-width:640px){.piede{margin-top:30px}}
/* col menu fisso in fondo, l'ultima riga della pagina finisce sotto la
   barra: lo spazio che se ne teneva la vista passa al piede, che ora e'
   l'ultima cosa del documento */
@media(max-width:999px){
  .app:has(.piede) .view{padding-bottom:14px}
  .piede{padding-bottom:18px}
  .piede-dentro{flex-direction:column;gap:8px}
}

/* ---- la pagina delle note legali ---- */
.note-pagina{max-width:820px;margin:0 auto}
.note-box{background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,0)),var(--surface);
  border:1px solid var(--border);border-radius:var(--r16);padding:20px 22px;margin-bottom:12px;
  box-shadow:var(--luce-alto),var(--luce-basso),var(--ombra-poggia)}
.note-t{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.note-t svg{width:19px;height:19px;stroke:var(--sez,var(--accent));fill:none;stroke-width:1.8;flex:none}
.note-t h2{margin:0;font-size:17px;font-weight:750;letter-spacing:-.01em}
.note-box p{margin:0 0 10px;font-size:14px;line-height:1.65;color:var(--muted)}
.note-box p:last-child{margin-bottom:0}
.note-box b{color:var(--text);font-weight:650}
.note-fine{margin:18px 0 6px;font-size:12px;color:var(--faint);text-align:center}

/* ---- il gagliardetto dei preferiti ----
   Spento e' un contorno tenue che non compete con i numeri della riga;
   acceso e' pieno e ambra, cosi' scorrendo la lista si vede al volo quali
   ti eri segnato. */
.pref{background:none;border:0;padding:4px;cursor:pointer;color:var(--faint);
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  border-radius:var(--r8);transition:color .15s,background .15s}
.pref svg{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linejoin:round}
.pref:hover{color:var(--t-ambra);background:rgba(255,255,255,.06)}
.pref.on{color:var(--t-ambra)}
.pref.on svg{fill:color-mix(in srgb,var(--t-ambra) 30%,transparent)}
.fchip.pref-chip svg{stroke-linejoin:round}
.fchip.pref-chip.on{background:var(--t-ambra);border-color:transparent;color:#161009}
.fchip.pref-chip.on svg{fill:rgba(0,0,0,.25)}
.live-filtri .pref-chip{white-space:nowrap}

/* ================= LA REGIA =================
   Pensata per uno schermo lontano: niente sta sotto i 12px, i numeri sono
   grossi e la pagina non scorre - dieci colonne devono starci tutte, ed e'
   la misura del carattere ad adattarsi allo spazio, non l'occhio di chi
   guarda dal divano. Sta sopra la pagina (z-index 50) ma sotto il pannello
   di assegnazione (60), che deve restare leggibile da vicino. */
.regia{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;
  background:radial-gradient(120% 80% at 50% 0%,#141a26,#0a0d13 60%),var(--bg);
  padding:14px 16px 16px;gap:12px;overflow:hidden}
.rg-alto{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none}
.rg-tit{display:flex;align-items:center;gap:10px;font-size:17px;min-width:0}
.rg-tit b{font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-tit .muted{font-size:12.5px;white-space:nowrap}
.rg-cmd{display:flex;gap:8px;flex:none}
/* dieci colonne affiancate, alte quanto lo schermo: se ne servono di piu'
   si stringono, e a un certo punto si va a capo invece di diventare
   illeggibili */
.rg-griglia{flex:1;display:grid;gap:8px;min-height:0;overflow:auto;
  grid-template-columns:repeat(var(--colonne,10),minmax(0,1fr))}
/* sotto una certa larghezza dieci colonne diventerebbero illeggibili:
   si va a capo, e a scorrere e' la griglia - mai la pagina, che qui non
   deve muoversi */
@media(max-width:1100px){.rg-griglia{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  grid-auto-rows:minmax(180px,auto)}}
.rg-sq{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),var(--surface);
  border:1px solid var(--border);border-radius:var(--r12);padding:8px}
.rg-sq.io{border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent),var(--surface)}
.rg-testa{display:flex;align-items:center;gap:7px;min-width:0}
.rg-id{min-width:0;flex:1}
.rg-nome{font-weight:750;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-sotto{font-size:11px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.rg-sotto b{font-size:12.5px;color:var(--text)}
.rg-sotto b.neg{color:var(--neg)}
.rg-rose{flex:1;display:flex;flex-direction:column;gap:5px;min-height:0;overflow:auto}
.rg-rep-t{display:flex;justify-content:space-between;align-items:center;
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:0 2px 2px}
.rg-rep.P .rg-rep-t{color:var(--P)}.rg-rep.D .rg-rep-t{color:var(--D)}
.rg-rep.C .rg-rep-t{color:var(--C)}.rg-rep.A .rg-rep-t{color:var(--A)}
.rg-g{display:flex;align-items:center;justify-content:space-between;gap:6px;
  font-size:12px;padding:2px 5px;border-radius:6px;background:rgba(255,255,255,.035);
  margin-bottom:2px;cursor:pointer}
.rg-g:hover{background:rgba(255,255,255,.08)}
.rg-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.rg-g b{font-variant-numeric:tabular-nums;font-size:12px}
.rg-g.vuoto{color:var(--faint);background:transparent;justify-content:center;
  padding:1px 5px;cursor:default}
/* l'angolo della ricerca: chiuso e' una barra sola, aperto sale sopra le
   rose senza spostarle di un pixel */
.rg-cerca{position:absolute;left:16px;bottom:16px;width:min(420px,46vw);z-index:2;
  display:flex;flex-direction:column-reverse;gap:8px}
.rg-campo{display:flex;align-items:center;gap:8px;padding:8px 12px;
  background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r-capsula);
  box-shadow:0 10px 30px rgba(0,0,0,.5)}
.rg-campo .ic{color:var(--muted);display:flex}
.rg-campo .ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.rg-campo input{flex:1;min-width:0;background:none;border:0;color:var(--text);
  font:inherit;font-size:16px;outline:none}
.rg-risultati{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r16);
  padding:6px;box-shadow:0 20px 60px rgba(0,0,0,.6);max-height:52vh;overflow:auto}
.rg-ris{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:0;color:var(--text);font:inherit;padding:8px 10px;
  border-radius:var(--r8);cursor:pointer}
.rg-ris:hover:not(:disabled){background:var(--surface3)}
.rg-ris:disabled{opacity:.55;cursor:default}
.rg-ris-n{flex:1;min-width:0;font-weight:650;font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-ris-n i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);font-weight:500}
.rg-vuoto{padding:12px;color:var(--muted);font-size:13px}

/* ---- il riepilogo della strategia ----
   A schermo sta dentro un modale come tutto il resto e usa i colori del
   sito. Su carta diventa un'altra cosa: fondo bianco, testo nero, niente
   ombre ne' sfumature - vedi @media print qui sotto. */
/* Il riepilogo prende tutto lo schermo: e' un elenco lungo - venticinque
   giocatori divisi in quattro reparti - e in un pannello alto due terzi
   dello schermo si vedeva un reparto per volta, scorrendo. Lo si apre
   proprio per guardarlo tutto insieme, quindi tanto vale dargli tutto.
   Si riconosce da quello che ha dentro (:has), senza dover cambiare la
   funzione dei modali che usano tutte le altre schermate. */
.overlay:has(.riepilogo){align-items:stretch;padding:0}
.sheet:has(.riepilogo){max-width:none;max-height:none;height:100%;
  border-radius:0;border:0;
  padding:calc(16px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column}
/* l'intestazione con il tasto Stampa resta ferma mentre scorri l'elenco */
.sheet:has(.riepilogo) .rp-comandi:first-child{position:sticky;top:-16px;z-index:2;
  background:var(--surface);padding-top:16px;margin-top:-16px}
.riepilogo{flex:1;min-height:0;overflow:auto}
/* su schermo grande l'elenco non si spalma per un metro: resta una colonna
   leggibile, centrata, come su un foglio */
@media(min-width:900px){.sheet:has(.riepilogo)>*{max-width:880px;width:100%;
  margin-left:auto;margin-right:auto}}
.rp-testa h2{font-size:19px;margin:0 0 3px}
.rp-sotto{color:var(--muted);font-size:12.5px;margin-bottom:12px}
.rp-tab{width:100%;border-collapse:collapse;font-size:13.5px}
.rp-tab th,.rp-tab td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--border)}
.rp-tab thead th{color:var(--muted);font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;font-weight:700;position:sticky;top:0;background:var(--surface)}
.rp-reparto th{padding-top:16px;font-size:13px;font-weight:800;color:var(--text);
  border-bottom:1px solid var(--border2)}
.rp-nota{font-weight:500;color:var(--muted);font-size:11.5px;margin-left:8px}
.rp-box{width:22px;color:var(--muted)}
.rp-fascia{color:var(--muted);white-space:nowrap}
.rp-nome{font-weight:700}
.rp-sq{color:var(--muted)}
.rp-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rp-preso{font-weight:700}
/* Sul telefono sei stretto e le colonne sono sei: la fascia e' la prima a
   cedere, perche' e' un'etichetta che ti sei dato tu e la ricordi. Restano
   le cinque che servono davvero mentre l'asta va: la casella da segnare,
   chi e', di che squadra, il tuo massimo e quanto l'hai pagato. Sul foglio
   stampato invece c'e' spazio e la fascia torna. */
@media(max-width:560px){
  .rp-fascia,.rp-tab thead th:nth-child(2){display:none}
  .rp-tab th,.rp-tab td{padding:6px 5px}
  .rp-nome{font-size:13px}
}

/* ---- come esce sulla carta ----
   Un foglio A4 con sopra solo il riepilogo: sparisce il sito intorno,
   spariscono i comandi, e restano i nomi. Nero su bianco perche' e' fatto
   per essere letto in una stanza affollata, e perche' stampare il fondo
   scuro dell'app vorrebbe dire finire una cartuccia per un elenco.
   Le righe non si spezzano fra due pagine e l'intestazione della tabella
   si ripete in cima a ognuna: se la lista e' lunga, la seconda pagina si
   legge come la prima. */
@media print{
  @page{size:A4;margin:14mm}
  /* si stampa solo il modale, e dentro il modale solo il riepilogo */
  body>*{display:none!important}
  body>#modalRoot{display:block!important}
  .overlay{position:static!important;background:none!important;padding:0!important;
    backdrop-filter:none!important;display:block!important}
  .sheet{position:static!important;max-width:none!important;width:auto!important;
    max-height:none!important;border:0!important;border-radius:0!important;
    box-shadow:none!important;padding:0!important;background:#fff!important;
    transform:none!important;animation:none!important}
  .grip,.rp-comandi{display:none!important}
  .riepilogo{max-height:none!important;overflow:visible!important}
  /* tutto nero su bianco: qui non si eredita niente dal tema scuro */
  html,body,.sheet,.riepilogo,.riepilogo *{background:#fff!important;color:#000!important;
    box-shadow:none!important;text-shadow:none!important}
  .rp-testa h2{font-size:17pt;margin-bottom:2mm}
  .rp-sotto{font-size:9pt;margin-bottom:5mm}
  .rp-tab{font-size:10pt}
  .rp-tab thead{display:table-header-group}          /* si ripete a ogni pagina */
  .rp-tab tr{break-inside:avoid;page-break-inside:avoid}
  .rp-tab th,.rp-tab td{padding:1.6mm 2mm;border-bottom:.3pt solid #999!important}
  .rp-tab thead th{font-size:8pt;letter-spacing:.04em;border-bottom:.8pt solid #000!important}
  .rp-reparto th{padding-top:6mm;font-size:11pt;border-bottom:.8pt solid #000!important;
    break-after:avoid;page-break-after:avoid}
  .rp-nota{font-size:8.5pt}
  /* la casella da segnare a penna deve essere una casella, non un carattere sbiadito */
  .rp-box{font-size:12pt}
}

/* ---- l'obiettivo da non mancare ----
   Un solo segno, e deve reggere due letture diverse: a colpo d'occhio fra
   venti schede sullo schermo, e in bianco e nero sul foglio stampato. */
.ot-tag.must{background:color-mix(in srgb,var(--t-ambra) 22%,transparent);
  color:var(--t-ambra);border:1px solid color-mix(in srgb,var(--t-ambra) 45%,transparent);
  font-weight:800;letter-spacing:.02em}
/* la scheda segnata si stacca dalle altre senza urlare: un filo giallo a
   sinistra, come il bordo che le righe prendono al passaggio del mouse */
.obj-tile.fondamentale{box-shadow:inset 3px 0 0 var(--t-ambra)}
.ot-actions button.must{color:var(--muted)}
.ot-actions button.must svg{fill:none}
.ot-actions button.must.on{color:var(--t-ambra)}
.ot-actions button.must.on svg{fill:currentColor}
/* nel riepilogo la stella sta prima del nome, piccola */
.rp-must{color:var(--t-ambra);font-size:12px;vertical-align:1px}
@media print{
  /* sul foglio il giallo non esiste: resta la stella, che in nero si vede
     benissimo, e il nome in neretto piu' marcato */
  .rp-must{color:#000!important}
  .rp-tab tr:has(.rp-must) .rp-nome{font-weight:800}
}

/* ================= GUIDA ALL'ASTA ================= */
/* la fila delle venti squadre: si sceglie da qui */
.gz-scelta{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;margin-bottom:6px;
  scrollbar-width:thin}
.gz-sq{flex:none;display:flex;flex-direction:column;align-items:center;gap:5px;width:78px;
  background:none;border:1px solid transparent;border-radius:var(--r12);padding:8px 4px;
  color:var(--muted);font-size:10.5px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:background .15s,border-color .15s,color .15s}
.gz-sq span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.gz-sq:hover{background:var(--surface2);color:var(--text)}
.gz-sq.on{background:var(--surface2);border-color:var(--border2);color:var(--text)}
.gz-sq.on .tlogo{transform:scale(1.08)}

.gz-testa{display:flex;align-items:center;gap:14px;margin:6px 0 16px}
.gz-testa h2{font-size:26px;margin:0 0 2px}

.gz-griglia{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:16px}
@media(min-width:900px){.gz-griglia{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.gz-campo-box{padding:14px}
.gz-lato{display:flex;flex-direction:column;gap:14px}

/* ---- il campo ----
   Le misure sono quelle vere, in proporzione: un campo di Serie A e' 68 x
   105 metri, quindi il riquadro sta a 68/105 e non si allarga oltre. Prima
   riempiva tutta la colonna e su schermo largo diventava un rettangolo
   basso e schiacciato, con le righe lontanissime fra loro: una cosa che non
   somigliava a un campo, e quindi non si leggeva come un campo. Anche
   l'area di rigore e il cerchio di centrocampo seguono le misure vere
   (40,3 x 16,5 metri l'area, 9,15 di raggio il cerchio), cosi' i rapporti
   restano giusti a qualsiasi larghezza.
   Le linee sono disegnate col CSS e non con un'immagine: e' un campo
   stilizzato, non una foto. */
.campo{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  gap:6px;aspect-ratio:68/105;max-width:380px;margin:0 auto;
  padding:14px 8px;border-radius:var(--r16);
  /* Viola e non verde: il verde era l'unico posto del sito dove comparisse
     un colore che non sta nella tavolozza, e in mezzo a schermate blu-viola
     sembrava un ritaglio di un'altra applicazione. I tre toni vengono dal
     viola del marchio, gli stessi della fascia della home. */
  background:linear-gradient(180deg,var(--viola-alto),var(--viola-fondo) 62%,var(--viola-basso));
  border:1px solid color-mix(in srgb,var(--t-viola) 26%,transparent);overflow:hidden}
.cp-linee{position:absolute;inset:8px;border:2px solid rgba(255,255,255,.18);border-radius:8px;pointer-events:none}
.cp-mid{position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(255,255,255,.18)}
.cp-cerchio{position:absolute;left:50%;top:50%;width:27%;aspect-ratio:1;transform:translate(-50%,-50%);
  border:2px solid rgba(255,255,255,.18);border-radius:50%}
.cp-area{position:absolute;left:50%;width:59%;height:15.7%;margin-left:-29.5%;
  border:2px solid rgba(255,255,255,.18)}
.cp-area.alto{top:-2px;border-top:0;border-radius:0 0 6px 6px}
.cp-area.basso{bottom:-2px;border-bottom:0;border-radius:6px 6px 0 0}
.cp-riga{position:relative;z-index:1;display:flex;justify-content:space-evenly;align-items:center;gap:2px}
/* i tondi si dividono la larghezza della riga invece di averne una fissa:
   in un 3-5-2 la riga da cinque deve entrare nella stessa misura di quella
   da tre, e il campo ora una misura ce l'ha */
.cp-g{display:flex;flex-direction:column;align-items:center;gap:3px;
  flex:1 1 0;min-width:0;max-width:76px;
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
/* ---- il riquadro del giocatore ----
   Quadrato con gli angoli arrotondati e non cerchio, come i pallini di
   ruolo del resto del sito. Nel cerchio ogni minimo scarto della lettera
   si legge subito, perche' il tondo e' simmetrico in ogni direzione e fa
   da riga di riscontro; il rettangolo perdona, e per giunta rende la
   pagina coerente col listone e con l'asta.

   L'OMBRA DELLA LETTERA ERA IL VERO PROBLEMA
   Era spostata di 1px in basso. L'occhio somma segno e ombra e legge il
   tutto come alzato: da li' "la lettera non e' centrata", e cambiava da
   lettera a lettera perche' cambia quanta ombra si vede intorno a ognuna.
   Un pixel intero di ombra si vede; lo scostamento del carattere, che e'
   un quarto di pixel, no. Adesso l'ombra e' simmetrica e non tira da
   nessuna parte. Anche quella del riquadro e' quasi dritta.

   Pieno profondo e luce nel bordo, non il contrario: schiarendo il
   riempimento la lettera bianca perde contrasto proprio sull'ambra del
   portiere, che e' il colore piu' chiaro. */
.cp-r{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:#fff;line-height:1;position:relative;
  background:linear-gradient(165deg,color-mix(in srgb,var(--ic) 78%,#000 22%),
                                    color-mix(in srgb,var(--ic) 55%,#000 45%));
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--ic) 35%,#fff 65%),
             0 1px 6px rgba(0,0,0,.5),
             0 0 16px color-mix(in srgb,var(--ic) 55%,transparent),
             inset 0 1px 0 rgba(255,255,255,.28);
  text-shadow:0 0 3px rgba(0,0,0,.55)}
/* la lettera in un elemento suo: lo scostamento sta qui e non sul pallino,
   se no si scontrerebbe con l'ingrandimento al passaggio del mouse.
   Vale per tutti i pallini del ruolo, non solo per quelli del campo:
   la misura la fa scostamento() in core.js. */
.ott{display:block;font-weight:inherit;font-style:normal;
  transform:translate(var(--cx,0),var(--cy,0))}
/* chi si gioca il posto porta il segno anche in campo */
/* ---- il segno del ballottaggio ----
   Sta FUORI dal riquadro, appeso all'angolo in alto a destra.

   Ed e' un elemento VERO, non uno pseudo-elemento, dopo averle provate
   tutte: come ::after dentro il riquadro faceva nascere delle colonne nella
   griglia (misurate: 8,34px 60px 0px al posto di una sola da 30px) e la
   lettera finiva schiacciata contro il bordo sinistro, fuori centro di
   UNDICI pixel. Spostato come ::after sul bottone continuava a muovere le
   caselle vicine, pur essendo posizionato in modo assoluto. Da elemento
   vero non succede: esce dal flusso come deve.

   Ecco perche' "il ruolo non e' mai centrato": capitava su tutti e soli i
   giocatori in ballottaggio - centoventicinque - quindi quasi ovunque si
   guardasse. Non era il carattere, era questo segno. */
.cp-bal{position:absolute;top:-7px;right:-7px;
  width:14px;height:14px;border-radius:50%;background:var(--t-ambra,#d99a2b);color:#160f04;
  font-size:9px;font-style:normal;font-weight:800;line-height:12px;text-align:center;
  border:1px solid rgba(0,0,0,.55);box-shadow:0 1px 3px rgba(0,0,0,.5)}
/* il portiere e' piu' profondo degli altri: l'ambra e' il colore piu' chiaro
   e il bianco sopra ci perdeva contrasto (3,55:1 contro il 4,8-6,7 degli altri) */
.cp-r.P{--ic:#d18d1e}
.cp-r.D{--ic:#1fa864}
.cp-r.C{--ic:#3d7ae0}.cp-r.A{--ic:#d43c72}
.cp-n{font-size:10px;font-weight:700;color:#fff;text-align:center;line-height:1.2;
  text-shadow:0 1px 3px rgba(0,0,0,.8);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-n i{display:block;font-style:normal;font-size:9.5px;font-weight:600;opacity:.75}
.cp-g:hover .cp-r{transform:scale(1.1)}
.cp-g:hover .cp-n{text-decoration:underline}

/* ---- calci piazzati ---- */
.gz-piazzati{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:560px){.gz-piazzati{grid-template-columns:minmax(0,1fr)}}
.gz-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r12);padding:11px 12px}
.gz-t{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.gz-t svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.gz-ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.gz-ol li{font-size:13px}
.gz-n{background:none;border:0;padding:0;color:var(--text);font:inherit;font-size:13px;
  font-weight:600;cursor:pointer;text-align:left}
.gz-n:hover{text-decoration:underline}

/* ---- ballottaggi ---- */
.bal{display:grid;grid-template-columns:1fr 88px 1fr auto;align-items:center;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--border);font-size:13px}
.bal:last-child{border-bottom:0}
.bal-a{text-align:right;font-weight:700}
.bal-b{color:var(--muted)}
.bal-barra{height:6px;border-radius:var(--r-capsula);background:var(--surface3);overflow:hidden}
.bal-barra i{display:block;height:100%;background:var(--t-ambra)}
.bal-p{font-size:11.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:560px){.bal{grid-template-columns:1fr 60px 1fr;font-size:12px}.bal-p{display:none}}
/* lo stesso ballottaggio dentro la scheda del giocatore, dove il rivale
   e' un tasto: un colpo e sei sulla sua scheda con la sua quotazione */
.bal-scheda{padding:10px 12px;margin-bottom:12px}
.bal-scheda .bal{border-bottom:0;padding:4px 0 8px}
.bal-alt{background:none;border:0;padding:0;font:inherit;font-weight:700;
  color:var(--text);cursor:pointer;display:inline-flex;align-items:center;text-align:left}
.bal-alt:hover{text-decoration:underline}

/* ================= IL CONSIGLIO PRO =================
   Sta sotto il nome chiamato, dentro l'anteprima della ricerca. Il colore
   del bordo dice il verdetto da lontano - verde prendilo, ambra dipende,
   rosso lascia stare - ma il verdetto per esteso c'e' scritto lo stesso:
   di sera, su un telefono, un bordo colorato da solo non e' una risposta.
   Ogni riga porta il segno di cosa sta dicendo: + a favore, − contro,
   · da tenere presente. */
.pro{margin:0 0 8px;padding:9px 11px;border-radius:var(--r12);
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--muted)}
.pro.si{border-left-color:var(--t-verde)}
.pro.forse{border-left-color:var(--t-ambra)}
.pro.no{border-left-color:var(--t-rossa)}
.pro-cima{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pro-bollo{font-size:9.5px;font-weight:800;letter-spacing:.08em;padding:1px 5px;
  border-radius:var(--r-capsula);background:var(--surface3);color:var(--muted)}
.pro-verdetto{font-size:14px}
.pro.si .pro-verdetto{color:var(--t-verde)}
.pro.forse .pro-verdetto{color:var(--t-ambra)}
.pro.no .pro-verdetto{color:var(--t-rossa)}
.pro-tetto{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.pro-tetto b{color:var(--text);font-variant-numeric:tabular-nums}
.pro-mio{margin-top:6px;font-size:13px;font-weight:600;color:var(--text)}
.pro-lista{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.pro-lista li{font-size:12.5px;color:var(--muted);padding-left:15px;position:relative;line-height:1.35}
.pro-lista li::before{position:absolute;left:0;font-weight:800}
.pro-lista li.si::before{content:"+";color:var(--t-verde)}
.pro-lista li.no::before{content:"−";color:var(--t-rossa)}
.pro-lista li.forse::before{content:"·";color:var(--muted)}

/* ---- la rosa ---- */
.gz-tab-wrap{overflow-x:auto}
.gz-tab{width:100%;border-collapse:collapse;font-size:13.5px}
.gz-tab th,.gz-tab td{padding:7px 8px;border-bottom:1px solid var(--border);text-align:left}
.gz-tab thead th{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:700}
.gz-tab .num{text-align:right;font-variant-numeric:tabular-nums}
.gz-nome{font-weight:700}
.gz-qt{font-weight:800}
.gz-tab tr.apribile{cursor:pointer}
.gz-tab tr.apribile:hover{background:var(--surface2)}
.gz-tit{min-width:120px}
.tit-n{font-size:11.5px;font-weight:800;margin-right:6px}
.tit-n.su{color:var(--pos)}.tit-n.meta{color:var(--t-ambra)}.tit-n.giu{color:var(--neg)}
.tit-barra{display:inline-block;width:60px;height:5px;border-radius:var(--r-capsula);
  background:var(--surface3);overflow:hidden;vertical-align:middle}
.tit-barra i{display:block;height:100%}
.tit-barra i.su{background:var(--pos)}.tit-barra i.meta{background:var(--t-ambra)}
.tit-barra i.giu{background:var(--neg)}


/* ================= LA SCHEDA DEL GIOCATORE =================
   Stessi dati di prima, impaginati per essere guardati invece che letti.
   Tutte le classi hanno il prefisso sd-: la scheda vive dentro il foglio di
   stile di tutto il sito, e nomi corti come .bar o .num qui dentro
   esistono gia' e vogliono dire altro - una .bar del sito e' alta 7px e
   taglia quello che esce, e si e' mangiata i numeri sopra le barre finche'
   non le ho dato un nome suo. */

/* ---- la testata ---- */
.sd-hero{position:relative;overflow:hidden;padding:16px;margin-bottom:12px;border-radius:var(--r16);
  background:radial-gradient(120% 130% at 100% 0%,color-mix(in srgb,var(--accent2) 26%,transparent),transparent 60%),
             var(--surface2);
  border:1px solid color-mix(in srgb,var(--accent2) 20%,var(--border))}
.sd-hero-r{display:flex;align-items:flex-start;gap:12px}
.sd-hero h2{margin:0;font-size:23px;letter-spacing:-.02em}
.sd-hero .sd-meta{color:var(--muted);font-size:12.5px;margin-top:2px}
.sd-val{margin-left:auto;text-align:right;flex:none}
.sd-val b{display:block;font-size:31px;line-height:1;letter-spacing:-.03em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 20px color-mix(in srgb,var(--accent) 40%,transparent))}
.sd-val span{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sd-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
@media(min-width:640px){.sd-hero h2{font-size:27px}.sd-val b{font-size:36px}}

/* ---- i numeri in evidenza ---- */
.sd-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;margin-bottom:12px}
.sd-k{background:var(--surface);border:1px solid var(--border);border-radius:var(--r12);padding:11px 12px}
.sd-k .sd-l{font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.sd-k .sd-v{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:3px 0 1px}
.sd-k .sd-d{font-size:11px;font-weight:700;color:var(--muted)}
.sd-k .sd-d.su{color:var(--pos)}.sd-k .sd-d.giu{color:var(--neg)}
.sd-k svg{display:block;margin-top:7px}

/* ---- le 38 giornate a barre ----
   Su schermo stretto non si schiacciano: il grafico scorre di lato e le
   barre restano larghe abbastanza da leggerci sopra il numero. Su schermo
   largo ci stanno tutte e lo scorrimento sparisce da solo. */
.sd-scroll{overflow-x:auto;overflow-y:hidden;margin:0 -14px;padding:0 14px}
.sd-gv{position:relative;min-width:1180px;height:232px;padding-top:26px}
.sd-y{position:absolute;left:0;right:0;top:26px;bottom:56px;pointer-events:none}
.sd-y i{position:absolute;left:24px;right:0;height:1px;background:var(--border);margin-bottom:-1px}
.sd-y i.sei{background:none;border-top:1px dashed color-mix(in srgb,var(--muted) 55%,transparent)}
.sd-y b{position:absolute;left:0;transform:translateY(-50%);font:600 10px system-ui;color:var(--faint)}
.sd-barre{position:absolute;left:24px;right:0;bottom:56px;top:26px;display:flex;gap:4px;align-items:flex-end}
.sd-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.sd-bar{width:100%;border-radius:5px 5px 3px 3px;position:relative;min-height:3px}
.sd-num{position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  font:800 11px system-ui;color:#fff;border-radius:5px;padding:1px 5px;white-space:nowrap;background:var(--surface3)}
.sd-bar.giu {background:linear-gradient(180deg,var(--t-rossa),color-mix(in srgb,var(--t-rossa) 45%,#000))}
.sd-bar.pari{background:linear-gradient(180deg,var(--t-ambra),color-mix(in srgb,var(--t-ambra) 45%,#000))}
.sd-bar.su  {background:linear-gradient(180deg,var(--t-verde),color-mix(in srgb,var(--t-verde) 45%,#000))}
.sd-bar.alto{background:linear-gradient(180deg,var(--accent),var(--accent2));
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 45%,transparent)}
.sd-bar.nulla{background:var(--surface3)}
.sd-bar.giu  .sd-num{background:color-mix(in srgb,var(--t-rossa) 70%,#000)}
.sd-bar.pari .sd-num{background:color-mix(in srgb,var(--t-ambra) 62%,#000);color:#1a1206}
.sd-bar.su   .sd-num{background:color-mix(in srgb,var(--t-verde) 62%,#000)}
.sd-bar.alto .sd-num{background:var(--accent)}
.sd-x{position:absolute;left:24px;right:0;bottom:0;height:56px;display:flex;gap:4px}
.sd-gx{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding-top:5px;min-width:0}
.sd-bo{display:flex;gap:2px;height:15px;align-items:center}
.sd-bo span{font:800 8.5px system-ui;padding:1px 3px;border-radius:4px;white-space:nowrap}
.sd-bo .gol{background:var(--accent);color:#04122b}
.sd-bo .ass{background:var(--accent2);color:#0e0620}
.sd-bo .buo{background:var(--t-verde);color:#04150d}
.sd-bo .mal{background:var(--t-rossa);color:#2a0a0a}
.sd-gx .sd-n{font:600 10px system-ui;color:var(--faint)}

/* ---- le quattro stagioni: una linea, perche' qui c'e' una direzione ---- */
.sd-leg{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--muted)}
.sd-leg div{display:flex;align-items:center;gap:6px}
.sd-leg em{width:16px;height:3px;border-radius:2px;font-style:normal}
.sd-leg .sd-nota{margin-left:auto;color:var(--faint);font-size:11.5px}

/* ---- presenze ---- */
.sd-pz{display:grid;grid-template-columns:repeat(13,1fr);gap:6px;margin:2px 0 10px}
@media(min-width:640px){.sd-pz{grid-template-columns:repeat(19,1fr)}}
.sd-pz i{aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:800 10px system-ui;font-style:normal}
.sd-pz i.si{background:linear-gradient(180deg,var(--accent),var(--accent2));color:#fff}
.sd-pz i.no{background:var(--surface3);color:var(--faint)}
.sd-spiega{color:var(--faint);font-size:11.5px;margin-top:6px;line-height:1.45}
.sd-spiega b{color:var(--muted)}

/* ---- a schermo largo la scheda si apre ----
   Il grafico delle 38 giornate ci sta tutto senza scorrere, che e' il modo
   in cui va guardato; sotto i 1100px resta la colonna, che sul telefono e'
   l'unica forma che funziona. */
@media(min-width:1100px){
  .sheet:has(.sd-hero){max-width:1320px}
  .sheet:has(.sd-hero) .sd-gv{min-width:0}
  .sd-due{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
}


/* ================= IL CAMPO DELLA VERSIONE PRO =================
   La rosa che stai comprando, disposta su un modulo. Riusa il campo della
   guida all'asta - stesse misure vere (68 x 105), stessi riquadri di ruolo -
   perche' e' lo stesso oggetto e non deve sembrarne un altro. */
.pro-chip{border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.mod-scelta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.mod{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-capsula);
  padding:5px 11px;font:700 12px inherit;color:var(--muted);cursor:pointer;font-variant-numeric:tabular-nums}
.mod:hover{border-color:var(--border2);color:var(--text)}
.mod.on{background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 30%,transparent)}
.campo-pro{margin-bottom:14px}
/* la casella di chi non hai ancora preso: si vede che e' un posto vuoto e
   non un giocatore spento */
.cp-g.vuoto{cursor:default}
.cp-r.vuoto{background:transparent;border:1.5px dashed color-mix(in srgb,#fff 30%,transparent);
  box-shadow:none;color:color-mix(in srgb,#fff 55%,transparent)}
.cp-g.vuoto .cp-n{color:color-mix(in srgb,#fff 55%,transparent);font-weight:600}
.pro-cons{background:var(--surface);border:1px solid var(--border);border-radius:var(--r12);padding:12px 13px}
.pro-cons .pro-lista{margin-top:2px}