/* ═══════════════════════════════════════════════════════════════════
   FANTABAR — Tema "Serata d'Asta" (parte strutturale)
   Caricato DOPO style.css. La palette vive in style.css (:root);
   qui c'e' solo cio' che cambia la composizione, non il colore.
   Perche' tanti !important: il foglio storico difende la zona puja
   con !important a ogni breakpoint. Ripulirlo e' un lavoro a parte,
   volutamente non fatto insieme al cambio di identita'.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   FANTABAR — tema "Serata d'Asta"
   Foglio di sola sovrascrittura: nessun file dell'app modificato.
   Iniettato a runtime sopra style.css per vedere l'identità
   applicata alle schermate REALI.
   ═══════════════════════════════════════════════════════════ */




/* ═══════════════════════════════════════════════════════════════════
   I COLORI DEL TEMA, IN DUE VERSIONI

   Il foglio nasceva con i colori scritti a mano dentro ogni regola: ottimo
   per una sola stanza, impossibile da accendere. Qui gli stessi colori
   diventano ruoli, e i ruoli hanno due valori — sera e mattina. Le regole
   sotto restano una sola serie: cambia la luce, non la composizione.

   SERA (default) — una lampada ambra in una sala scura.
   MATTINA (html[data-tema="cuoio"]) — "Cuoio": banco di cuoio e pergamena, come
   un registro d'asta d'altri tempi. L'accento e' il cuoio del banco, il
   verde e' riservato alle cifre di credito (il denaro sul tavolo).
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --sc-carta:242,234,222;    /* il chiaro: testo e filetti sul fondo scuro */
  --sc-ambra:255,176,74;     /* la lampada */
  --sc-brace:226,58,46;      /* lo stato d'allarme */
  --sc-testo:#F2EADE;
  --sc-medio:#A79B8B;
  /* Era #6E645A, cioe' 3.2-3.4:1 sui tre fondi su cui compare davvero: sotto la
     soglia AA di 4.5:1, e questo grigio veste testi da 9-10px (etichette, meta,
     "ancora in gioco"), non titoloni. #8A8076 e' il primo passo che passa ovunque —
     misurato 4.89 sul fondo, 5.00 sui pannelli, 4.72 sulla carta della puja, che e'
     il caso peggiore. Restare piu' scuri sarebbe stato "quasi": non conta. */
  --sc-tenue:#8A8076;
  --sc-ambra-piena:#FFB04A;
  --sc-ambra-alta:#FFC578;
  --sc-brace-piena:#E23A2E;
  --sc-fondo:#14100E;
}
/* ══ IL BAR ══
   Ricalcato sul disegno dell'utente con i colori CAMPIONATI dal file, non stimati.

   La struttura vera e' a tre livelli, e nelle prime passate l'avevo indovinata al
   contrario:
       suolo / cornice   #180E08   legno molto scuro
       PANNELLO          #422C1E   bruno medio      ← lo "scaffale"
       riquadri dentro   #222222   grigio scuro     ← gli "oggetti" sopra
   Il pannello e' PIU' CHIARO del suolo, e i riquadri dentro sono piu' scuri del
   pannello: il salto e' doppio e nelle due direzioni. E' questo, piu' di qualunque
   tinta, che fa leggere dodici squadre in tre colonne — ognuna e' un oggetto
   appoggiato su un ripiano, non una riga in un elenco. */
html[data-tema="bar"]{
  --sc-carta:255,247,228;
  --sc-ambra:228,150,30;
  --sc-brace:214,74,58;
  --sc-testo:#FFF7E4;
  --sc-medio:#D8C3A4;
  --sc-tenue:#A89078;
  --sc-ambra-piena:#E4961E;
  --sc-ambra-alta:#FCE4A8;
  --sc-brace-piena:#D64A3A;
  --sc-fondo:#422C1E;          /* il fondo DEI PANNELLI: bruno, non nero */
  --bar-legno:#180E08;
  --bar-riquadro:#222222;
  --bar-carta:#2C2C2C;
  --bar-ottone:#A6927C;
  --bar-panno:#124E2A;         /* il verde pieno campionato */
  --bar-panno-vivo:#2A9C5A;    /* il verde dei badge */
}

/* ── IL LEGNO, fatto come legno ────────────────────────────────
   Due gradienti ripetuti da soli davano righe: leggibili ma sintetiche, e l'utente
   l'ha detto ("che la madera parezca madera"). Il legno vero ha una venatura
   IRREGOLARE, e l'irregolarita' non si ottiene ripetendo un motivo.
   Si usa `feTurbulence` dentro un SVG in data-URI: rumore frattale STIRATO — alta
   frequenza in orizzontale, bassissima in verticale — che e' esattamente la forma
   di una venatura lungo la doga. Un secondo strato piu' rado e piu' grosso fa i
   nodi. Restano gradienti CSS per le fughe fra le doghe, che invece sono regolari.
   Nessuna immagine da versionare, nessun `?v=` da alzare: e' tutto nel foglio. */
html[data-tema="bar"] body,
html[data-tema="bar"] .pitch-bg{
  background-color:#140B05 !important;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27v%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.75%200.010%27%20numOctaves%3D%275%27%20seed%3D%2711%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%270.95%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23v%29%27%2F%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27460%27%20height%3D%27460%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.016%200.045%27%20numOctaves%3D%273%27%20seed%3D%275%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%270.6%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27460%27%20height%3D%27460%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E"),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.72) 0 2px, rgba(110,75,40,.12) 2px 6px,
      rgba(0,0,0,0) 6px 184px, rgba(150,105,55,.09) 184px 187px, rgba(0,0,0,.75) 187px 191px),
    linear-gradient(180deg,#1C1007 0%, #120904 40%, #090402 100%) !important;
  /* Piastrelle GRANDI apposta: a 300px la ripetizione del rumore si vedeva come
     un riquadro piu' chiaro sul legno. Il rumore e' l'unica cosa che non deve
     mostrare un periodo, altrimenti torna a sembrare una texture applicata. */
  background-size:620px 620px, 980px 980px, auto, auto !important;
  background-blend-mode:overlay, soft-light, normal, normal !important;
  filter:none !important;
}
/* La lampada. Fin qui il legno era illuminato UGUALE dappertutto, ed e' il motivo
   per cui sembrava una texture invece di una stanza: nessuna superficie vera ha la
   stessa luce agli angoli e al centro. Due strati sopra al legno, non dentro —
   cosi' restano indipendenti dalla venatura e si regolano da soli:
   una pozza calda in alto a sinistra (la lampada sopra al banco) e una
   vignettatura che chiude i bordi. `pointer-events:none` perche' e' luce, non
   materia: non deve intercettare niente. */
html[data-tema="bar"] .pitch-bg::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 46% at 16% -4%, rgba(255,206,132,.20), transparent 62%),
    radial-gradient(130% 115% at 50% 42%, transparent 38%, rgba(0,0,0,.30) 74%, rgba(0,0,0,.60) 100%);
}

/* ── LE CORNICI: ottone vero, non un filetto piatto ────────────
   Un `border:1px solid` e' una linea, e a schermo si legge come un disegno. Un
   metallo si riconosce da UNA cosa: la luce non lo colpisce uguale su tutti i lati.
   Quindi la cornice non e' un colore ma un gradiente — chiaro dove la luce batte
   (alto-sinistra), scuro dove no — messo su `border-box` mentre il fondo del
   pannello sta su `padding-box`. E' il modo di avere un bordo sfumato senza
   immagini: due strati di background, non un `border-color`.

   Le SQUADRETTE agli angoli sono il resto del mestiere: un mobile e' rinforzato
   dove si rompe, cioe' negli spigoli. Otto barrette (due per angolo) disegnate come
   background dell'::after, che non intercetta i click. */
html[data-tema="bar"] body .card,
html[data-tema="bar"] body .tabs-panel,
html[data-tema="bar"] body .admin-panel,
html[data-tema="bar"] body #mio-panel,
html[data-tema="bar"] body .panel-budget,
html[data-tema="bar"] body #budget-bar,
html[data-tema="bar"] body .tab-content{
  position:relative;
  border:3px solid transparent !important;
  border-radius:10px !important;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27140%27%20height%3D%27140%27%3E%3Cfilter%20id%3D%27g%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%273%27%20seed%3D%272%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%270.5%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27140%27%20height%3D%27140%27%20filter%3D%27url%28%23g%29%27%2F%3E%3C%2Fsvg%3E") padding-box,
    linear-gradient(#422C1E,#422C1E) padding-box,
    linear-gradient(152deg,
      #F0DCB4 0%, #C9AE84 12%, #8A755A 30%,
      #5A4A38 48%, #8A755A 66%, #E4CFA6 84%, #6E5C46 100%) border-box !important;
  background-size:140px 140px, auto, auto !important;
  background-blend-mode:soft-light, normal, normal !important;
  /* Incassato, non appoggiato: un filo di luce sul bordo alto interno e un'ombra
     che scende da sotto la cornice. E' quello che da' spessore al telaio. */
  box-shadow:0 8px 20px rgba(6,3,1,.66),
             inset 0 2px 5px rgba(0,0,0,.45),
             inset 0 1px 0 rgba(255,236,200,.14) !important;
}
html[data-tema="bar"] body #puja-panel-slot,
html[data-tema="bar"] body.layout-admin .asta-row-puja{
  position:relative;
  border:4px solid transparent !important;
  border-radius:12px !important;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27140%27%20height%3D%27140%27%3E%3Cfilter%20id%3D%27g%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%273%27%20seed%3D%272%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%270.5%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27140%27%20height%3D%27140%27%20filter%3D%27url%28%23g%29%27%2F%3E%3C%2Fsvg%3E") padding-box,
    linear-gradient(#2C2C2C,#2C2C2C) padding-box,
    linear-gradient(152deg,
      #FFE9C4 0%, #D6BA8E 11%, #97815F 28%,
      #60503C 47%, #97815F 65%, #F0D9AC 83%, #77644C 100%) border-box !important;
  background-size:140px 140px, auto, auto !important;
  background-blend-mode:soft-light, normal, normal !important;
  box-shadow:0 12px 30px rgba(6,3,1,.7),
             inset 0 3px 7px rgba(0,0,0,.5),
             inset 0 1px 0 rgba(255,236,200,.16) !important;
}

/* Le squadrette d'angolo. `--sq` e' la lunghezza del braccio, `--sp` lo spessore:
   cambiarle qui le cambia su tutti i pannelli. */
html[data-tema="bar"] body .card::after,
html[data-tema="bar"] body .tabs-panel::after,
html[data-tema="bar"] body .admin-panel::after,
html[data-tema="bar"] body #mio-panel::after,
html[data-tema="bar"] body .panel-budget::after,
html[data-tema="bar"] body #puja-panel-slot::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  --sq:22px; --sp:3px; --met:linear-gradient(#F0DCB4,#A88F68);
  /* La VITE: un pomello con la luce in alto e l'ombra sotto, e il taglio del
     cacciavite. E' il dettaglio che fa leggere la squadretta come un pezzo di
     ferramenta invece che come due barrette: un rinforzo si avvita, e l'occhio lo
     sa. Tre cerchi concentrici in un radial-gradient, nessun elemento in piu'. */
  --vite:radial-gradient(circle at 50% 38%,
      #FFF0D2 0 1.1px, #C9AE84 1.1px 2.4px, #4A3B28 2.4px 3.4px, transparent 3.4px);
  background:
    var(--met) top left    / var(--sq) var(--sp) no-repeat,
    var(--met) top left    / var(--sp) var(--sq) no-repeat,
    var(--met) top right   / var(--sq) var(--sp) no-repeat,
    var(--met) top right   / var(--sp) var(--sq) no-repeat,
    var(--met) bottom left / var(--sq) var(--sp) no-repeat,
    var(--met) bottom left / var(--sp) var(--sq) no-repeat,
    var(--met) bottom right/ var(--sq) var(--sp) no-repeat,
    var(--met) bottom right/ var(--sp) var(--sq) no-repeat,
    var(--vite) top 8px left 8px      / 8px 8px no-repeat,
    var(--vite) top 8px right 8px     / 8px 8px no-repeat,
    var(--vite) bottom 8px left 8px   / 8px 8px no-repeat,
    var(--vite) bottom 8px right 8px  / 8px 8px no-repeat;
  opacity:.9;
}
/* Sulla carta di puja le squadrette sono piu' lunghe: e' il pezzo grosso. */
html[data-tema="bar"] body #puja-panel-slot::after{--sq:34px;--sp:4px;opacity:.95}

/* ── I RIQUADRI DENTRO: gli oggetti sul ripiano ────────────────
   Piu' SCURI del pannello che li contiene, ognuno col suo filetto. */
html[data-tema="bar"] body .sq-item,
html[data-tema="bar"] body .liberi-list .l-row,
html[data-tema="bar"] body #liberi-list > div,
html[data-tema="bar"] body .rose-col,
html[data-tema="bar"] body .storico-list li,
html[data-tema="bar"] body .rose-player{
  background:#222222 !important;
  border:1px solid rgba(166,146,124,.30) !important;
  border-radius:6px !important;
}
html[data-tema="bar"] body .sq-item.attiva,
html[data-tema="bar"] body .rose-col.attiva{
  border-color:var(--bar-ottone) !important;
}

/* ── IL VERDE DEL PANNO ────────────────────────────────────────
   Il pieno #124E2A per i bottoni e la tab attiva, il vivo #2A9C5A per i badge:
   sono due tinte diverse nel disegno, non una sola schiarita. */
html[data-tema="bar"] body .btn-success,
html[data-tema="bar"] body #btn-conferma-assegnazione{
  background:linear-gradient(180deg,#1B6B3A,#124E2A) !important;
  color:#F2FBF4 !important;
  border:1px solid #2A9C5A !important;
  border-radius:8px !important;
}
html[data-tema="bar"] .tab-btn.active{
  background:linear-gradient(180deg,#1B6B3A,#124E2A) !important;
  color:#F2FBF4 !important;
  border:1px solid #2A9C5A !important;
  border-radius:8px 8px 0 0 !important;
}
html[data-tema="bar"] .tab-btn{border-radius:8px 8px 0 0 !important;color:var(--sc-medio) !important}

/* ── I GETTONI: scuri col filetto d'ottone, non pieni ───────── */
html[data-tema="bar"] body .filtro-btn,
html[data-tema="bar"] body .storico-filtro-btn,
html[data-tema="bar"] body .btn-secondary,
html[data-tema="bar"] body .rose-inp,
html[data-tema="bar"] body input[type=text],
html[data-tema="bar"] body select{
  background:#222222 !important;
  border:1px solid rgba(166,146,124,.34) !important;
  color:var(--sc-testo) !important;
  border-radius:6px !important;
}
html[data-tema="bar"] body .filtro-btn.active,
html[data-tema="bar"] body .storico-filtro-btn.active{
  background:rgba(228,150,30,.18) !important;
  border-color:var(--sc-ambra-piena) !important;
  color:var(--sc-ambra-alta) !important;
}

/* ── I BADGE DI RUOLO, nelle tinte del disegno ─────────────────
   La regola generale dei ruoli (piu' su nel foglio) usa un set di tinte di mezzo
   tono, scelto per reggere sia sul nero sia sulla panna degli altri temi. Qui il
   disegno ha le sue, campionate: verde #239B5A e azzurro #4164BE. Si tengono i
   CINQUE GRUPPI dell'app (_roseRowRoleClass) — non li si riduce a due come sembra
   fare il disegno, che e' generato e non e' coerente su questo — ma si ritinge
   ciascuno nella famiglia giusta. */
html[data-tema="bar"] body #puja-panel-slot .badge-ruolo.r-Por,
html[data-tema="bar"] body #puja-panel-slot .badge-ruolo.r-P,
html[data-tema="bar"] body .badge-ruolo.r-Por,
html[data-tema="bar"] body .badge-ruolo.r-P{--r-fondo:#E4961E;--r-testo:#1A1008;background:#E4961E !important;color:#1A1008 !important}
html[data-tema="bar"] body #puja-panel-slot .badge-ruolo.r-Dc,
html[data-tema="bar"] body #puja-panel-slot .badge-ruolo.r-Ds,
html[data-tema="bar"] body #puja-panel-slot .badge-ruolo.r-Dd,
html[data-tema="bar"] body #puja-panel-slot .badge-ruolo.r-D,
html[data-tema="bar"] body #puja-panel-slot .badge-ruolo.r-B,
html[data-tema="bar"] body .badge-ruolo.r-Dc,
html[data-tema="bar"] body .badge-ruolo.r-Ds,
html[data-tema="bar"] body .badge-ruolo.r-Dd,
html[data-tema="bar"] body .badge-ruolo.r-D,
html[data-tema="bar"] body .badge-ruolo.r-B{--r-fondo:#239B5A;--r-testo:#F2FBF4;background:#239B5A !important;color:#F2FBF4 !important}
html[data-tema="bar"] body #puja-panel-slot .badge-ruolo.r-M,
html[data-tema="bar"] body #puja-panel-slot .badge-ruolo.r-C,
html[data-tema="bar"] body #puja-panel-slot .badge-ruolo.r-E,
html[data-tema="bar"] body .badge-ruolo.r-M,
html[data-tema="bar"] body .badge-ruolo.r-C,
html[data-tema="bar"] body .badge-ruolo.r-E{--r-fondo:#4164BE;--r-testo:#F0F4FF;background:#4164BE !important;color:#F0F4FF !important}
html[data-tema="bar"] body #puja-panel-slot .badge-ruolo.r-T,
html[data-tema="bar"] body #puja-panel-slot .badge-ruolo.r-W,
html[data-tema="bar"] body .badge-ruolo.r-T,
html[data-tema="bar"] body .badge-ruolo.r-W{--r-fondo:#7A5BC4;--r-testo:#F5F0FF;background:#7A5BC4 !important;color:#F5F0FF !important}
html[data-tema="bar"] body #puja-panel-slot .badge-ruolo.r-A,
html[data-tema="bar"] body #puja-panel-slot .badge-ruolo.r-Pc,
html[data-tema="bar"] body .badge-ruolo.r-A,
html[data-tema="bar"] body .badge-ruolo.r-Pc{--r-fondo:#C4523E;--r-testo:#FFF0EC;background:#C4523E !important;color:#FFF0EC !important}

/* ══ IL BAR — l'atmosfera sta nel MOBILE, non sopra ai dati ══
   Regola che tiene insieme tutto quello che segue, ed e' la risposta alla lamentela
   di partenza ("costa capire le cose"): la materia va nel telaio — legno, ottone,
   lampada, panno — e i DATI restano su superfici quiete, ad alto contrasto. Appena
   una texture finisce sotto a un numero da 10px, si torna al problema di Serata.
   Ogni cosa qui sotto sta o sul fondo, o su una cornice, o su un bordo: mai dietro
   a un testo che si deve leggere in fretta sotto timer. */

/* ── I SOTTOBICCHIERI ──────────────────────────────────────────
   Aloni di bicchiere sul legno: due cerchi appena accennati, in un punto dove i
   pannelli non arrivano quasi mai. Costano niente in leggibilita' — stanno sul
   fondo, dietro a tutto — e sono il dettaglio che fa dire "e' un bar" prima di
   qualunque altra cosa. */
html[data-tema="bar"] .pitch-bg::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 88% 84%, transparent 0 46px,
      rgba(255,222,170,.045) 46px 49px, transparent 49px 52px,
      rgba(255,222,170,.03) 52px 54px, transparent 54px),
    radial-gradient(circle at 79% 91%, transparent 0 30px,
      rgba(255,222,170,.038) 30px 32.5px, transparent 32.5px);
}

/* ── LA TRAVE D'OTTONE SOTTO LA TESTATA ────────────────────────
   Il bordo del bancone. Un solo filo orizzontale, con la luce che scorre da
   sinistra a destra come su un tubo tornito: e' quello che chiude la testata e la
   fa sembrare un mobile invece che una barra di navigazione. Stesso mestiere che
   Cuoio applica al suo filo di cuoio e Lavagna alla sua cornice d'ottone. */
html[data-tema="bar"] body .asta-header{
  border-bottom:none !important;
  box-shadow:0 3px 0 0 #6B5334, 0 4px 0 0 #2A1D0E, 0 10px 24px rgba(0,0,0,.5) !important;
}
html[data-tema="bar"] body .asta-header::after{
  background:linear-gradient(90deg,
    rgba(122,96,58,0) 0%, #C9A257 10%, #F3DEB0 26%, #A88547 44%,
    #F3DEB0 62%, #C9A257 80%, rgba(122,96,58,0) 100%) !important;
  box-shadow:0 0 10px rgba(228,180,90,.34) !important;
}

/* ── IL PANNO DEL TAVOLO ───────────────────────────────────────
   Il pannello delle tab e' il piano su cui si gioca: verde panno, con la grana
   fitta e corta del feltro (non la venatura lunga del legno — sono due materiali
   diversi e vanno due rumori diversi). Il verde resta SCURO apposta: e' un fondo,
   e sopra ci vanno righe di elenco che devono leggersi. */
html[data-tema="bar"] body .tabs-panel{
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27p%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%271.4%27%20numOctaves%3D%272%27%20seed%3D%279%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%270.75%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23p%29%27%2F%3E%3C%2Fsvg%3E") padding-box,
    linear-gradient(180deg,#1E4A31,#163825) padding-box,
    linear-gradient(152deg,
      #F0DCB4 0%, #C9AE84 12%, #8A755A 30%,
      #5A4A38 48%, #8A755A 66%, #E4CFA6 84%, #6E5C46 100%) border-box !important;
  background-size:300px 300px, auto, auto !important;
  background-blend-mode:soft-light, normal, normal !important;
}
/* Le righe restano sul loro riquadro scuro: il panno si vede INTORNO, non sotto. */
html[data-tema="bar"] body .tabs-panel .tab-content{
  background:rgba(10,20,14,.55) !important;
  border-color:rgba(166,146,124,.30) !important;
}

/* ── LA LAMPADA SUL GIOCATORE IN ASTA ──────────────────────────
   La carta di puja e' l'oggetto sotto la luce, ed e' l'unico punto in cui un
   effetto atmosferico AIUTA a leggere invece di disturbare: dice dove guardare.
   Un alone caldo attorno alla cornice, non sopra al contenuto. */
html[data-tema="bar"] body #puja-panel-slot{
  box-shadow:0 12px 30px rgba(6,3,1,.7),
             0 0 46px rgba(232,163,61,.18),
             inset 0 3px 7px rgba(0,0,0,.5),
             inset 0 1px 0 rgba(255,236,200,.16) !important;
}
/* Negli ultimi secondi la lampada vira al rosso, come il resto della scena. */
html[data-tema="bar"] body.puja-urgente #puja-panel-slot{
  box-shadow:0 12px 30px rgba(6,3,1,.7),
             0 0 52px rgba(214,74,58,.26),
             inset 0 3px 7px rgba(0,0,0,.5),
             inset 0 1px 0 rgba(255,236,200,.16) !important;
}

/* ── I BOTTONI HANNO SPESSORE ──────────────────────────────────
   Un bottone di un mobile si preme: ha un bordo inferiore piu' scuro (lo spessore
   del pezzo) e quando lo premi scende. Costa due righe e cambia la sensazione di
   tutta l'interfaccia — e non tocca la leggibilita' di niente. */
html[data-tema="bar"] body .btn-success,
html[data-tema="bar"] body .btn-secondary,
html[data-tema="bar"] body .btn-primary,
html[data-tema="bar"] body .tab-btn{
  box-shadow:0 3px 0 rgba(0,0,0,.45), 0 4px 8px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(255,240,210,.14) !important;
  transition:transform .06s ease, box-shadow .06s ease !important;
}
html[data-tema="bar"] body .btn-success:active,
html[data-tema="bar"] body .btn-secondary:active,
html[data-tema="bar"] body .btn-primary:active{
  transform:translateY(2px) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.45), inset 0 2px 4px rgba(0,0,0,.4) !important;
}

/* -- LA CLESSIDRA IN OTTONE SPAZZOLATO --------------------------
   L'ottone ora arriva da clessidra.js/MATERIALI come per gli altri temi (prima
   qui c'era un hue-rotate: una tinta stesa sopra un metallo sbagliato non fa un
   metallo giusto). Resta solo l'ombra, che non e' un trucco di colore ma una
   conseguenza: sopra la carta di puja c'e' una lampada, e cio' che sta sotto
   una lampada proietta. */
html[data-tema="bar"] body #puja-panel-slot .clessidra{
  filter:drop-shadow(0 7px 16px rgba(0,0,0,.55)) !important;
}

/* -- IL BOCCALE: LE BOLLE E GLI ULTIMI SECONDI ------------------
   In questo tema il tempo non e' una clessidra ma una birra che finisce
   (clessidra.js, disegnaBoccale). Livello, schiuma e merletti li muove il JS
   dall'anello; qui restano le due cose che sono animazione pura, non stato.

   Le bolle salgono in continuo: partono sotto e vengono ritagliate al pelo
   della birra (clip aggiornato dal JS), quindi spariscono da sole in
   superficie senza che nessuno le debba spegnere. */
html[data-tema="bar"] .clessidra--boccale .boc-bolla{
  animation:boc-bolle 5.4s linear infinite;
}

/* Il Boccale e' piu' largo della clessidra originale per occupare meglio lo spazio */
html[data-tema="bar"] body #puja-panel-slot .clessidra--boccale,
html[data-tema="bar"] body.layout-admin .asta-row-puja .clessidra--boccale{
  width:104px !important;
}
@media (max-width:1200px){
  html[data-tema="bar"] body #puja-panel-slot .clessidra--boccale,
  html[data-tema="bar"] body.layout-admin .asta-row-puja .clessidra--boccale{
    width:84px !important;
  }
}
@media (max-width:900px){
  html[data-tema="bar"] body #puja-panel-slot .clessidra--boccale,
  html[data-tema="bar"] body.layout-admin .asta-row-puja .clessidra--boccale{
    width:68px !important;
  }
}

@keyframes boc-bolle{
  0%   {transform:translateY(138px);opacity:0}
  12%  {opacity:.55}
  88%  {opacity:.45}
  100% {transform:translateY(26px);opacity:0}
}

/* Ultimi secondi: la birra NON diventa rossa (una birra rossa e' solo una birra
   sbagliata, non un allarme). Si arrossano il vetro e l'alone - il bicchiere
   sotto la luce che vira, non il liquido - e le bolle si agitano.
   Serve l'id nel selettore perche' la drop-shadow del tema, poco sopra, ne ha
   uno: senza, l'ombra normale vincerebbe su quella d'allarme. */
html[data-tema="bar"] body #puja-panel-slot .timer-ring-container.urgent .clessidra,
html[data-tema="bar"] body.layout-admin .asta-row-puja .timer-ring-container.urgent .clessidra{
  filter:drop-shadow(0 7px 16px rgba(0,0,0,.55))
         drop-shadow(0 0 10px rgba(var(--sc-brace),.62)) !important;
}
html[data-tema="bar"] .timer-ring-container.urgent .clessidra--boccale .boc-profilo{
  stroke:rgba(var(--sc-brace),.95) !important;
}
html[data-tema="bar"] .timer-ring-container.urgent .clessidra--boccale .boc-bolla{
  animation-duration:2.1s !important;
}

/* -- IL RITRATTO: UNA POLAROID APPUNTATA ------------------------
   La foto sul muro di un bar non e' incorniciata: e' appuntata, storta, con la
   striscia di carta sotto rimasta vuota. Tre dettagli la reggono - la carta
   piu' alta in basso che in alto, la rotazione minima (1.6 gradi: oltre i 3
   sembra un errore di layout, non una mano) e la puntina che getta la propria
   ombra. Serve overflow visible perche' la puntina sporge sopra la carta; la
   foto non sborda comunque, e' 100% della sua area con object-fit:cover.
   La rotazione allarga di ~7px il rettangolo letto da getBoundingClientRect()
   nell'animazione di assegnazione (app.js): scarto voluto e impercettibile. */
html[data-tema="bar"] body #puja-panel-slot .cc-avatar,
html[data-tema="bar"] body.layout-admin .asta-row-puja .cc-avatar{
  --pol:9px; --pol-giu:24px;
  overflow:visible !important;
  padding:0 !important;
  border-style:solid !important;
  border-width:var(--pol) var(--pol) var(--pol-giu) var(--pol) !important;
  border-color:#EFE6D2 !important;
  border-radius:3px !important;
  background:#EFE6D2 !important;
  transform:translateY(-50%) rotate(-1.6deg) !important;
  box-shadow:0 14px 26px rgba(0,0,0,.55), 0 3px 7px rgba(0,0,0,.45),
             inset 0 0 0 1px rgba(120,100,72,.22) !important;
}

/* Fix positioning for Admin view */
html[data-tema="bar"] body.layout-admin .asta-row-puja .cc-avatar{
  transform:rotate(-1.6deg) !important;
}

/* la stampa: sbiadita e calda, non il bianco e nero degli altri temi */
html[data-tema="bar"] body #puja-panel-slot .cc-avatar-img,
html[data-tema="bar"] body.layout-admin .asta-row-puja .cc-avatar-img{
  filter:grayscale(.18) sepia(.26) saturate(.92) contrast(1.02) brightness(1.03) !important;
  border-radius:0 !important;
}
html[data-tema="bar"] body #puja-panel-slot .cc-avatar::after,
html[data-tema="bar"] body.layout-admin .asta-row-puja .cc-avatar::after{
  background:linear-gradient(200deg, rgba(232,163,61,.20) 0%, rgba(168,58,42,.06) 50%, rgba(28,19,12,.26) 100%) !important;
}
/* ::before regge due cose che non stanno nello stesso rettangolo: la luce sulla
   stampa (dentro la foto) e la puntina (sulla carta, fuori). Lo pseudo-elemento
   si allarga fino al bordo esterno per la puntina, e la luce passa in box-shadow
   inset, che resta agganciato a quel bordo con le stesse due misure. */
html[data-tema="bar"] body #puja-panel-slot .cc-avatar::before,
html[data-tema="bar"] body.layout-admin .asta-row-puja .cc-avatar::before{
  inset:calc(var(--pol) * -1) calc(var(--pol) * -1) calc(var(--pol-giu) * -1) !important;
  z-index:6 !important;
  background:
    radial-gradient(circle at 50% 9.5px, rgba(0,0,0,.30) 0 5.6px, rgba(0,0,0,0) 8.5px),
    radial-gradient(circle at 50% 7px, #7E241A 0 5.2px, rgba(0,0,0,0) 6px),
    radial-gradient(circle at 50% 7px, #C4483A 0 3.9px, rgba(0,0,0,0) 4.7px),
    radial-gradient(circle at 46% 5.4px, rgba(255,255,255,.80) 0 1.4px, rgba(0,0,0,0) 2px) !important;
  background-repeat:no-repeat !important;
  box-shadow:inset 0 var(--pol) 22px -14px rgba(255,255,255,.34),
             inset 0 calc(var(--pol-giu) * -1) 30px -16px rgba(14,9,6,.60) !important;
}

html[data-tema="cuoio"]{
  --sc-carta:58,36,20;       /* sulla pergamena il "chiaro" diventa inchiostro di cuoio */
  --sc-ambra:107,68,35;      /* il cuoio del banco, non piu' l'ottone */
  --sc-brace:168,58,42;
  --sc-testo:#2B1B10;
  --sc-medio:#5C4A3A;
  --sc-tenue:#6B5A48;      /* misurato ~4.7:1 sulla pergamena piu' chiara */
  --sc-ambra-piena:#6E431F;   /* cuoio scuro, leggibile come testo/bordo */
  --sc-ambra-alta:#8F5A2C;
  --sc-brace-piena:#A83A2A;
  --sc-fondo:#F3E7D0;
}
html[data-tema="sala-giochi"]{
  --sc-carta:20,16,36;       /* sulla carta stampata il "chiaro" diventa inchiostro */
  --sc-ambra:36,64,216;      /* il cobalto del cabinato: l'accento strutturale */
  --sc-brace:212,36,28;      /* rosso arcade, scurito quanto basta per leggersi su bianco */
  --sc-testo:var(--text-primary);
  --sg-carta: #E0E4EB !important;
  --sg-fondo: #D5DADD !important;
  --sg-carta2: #DBDFE6 !important;

  --sc-medio:#4A465E;
  --sc-tenue:#66627C;        /* misurato 5.4:1 sulla carta */
  --sc-ambra-piena:var(--primary);
  --sc-ambra-alta:#1B2FA8;   /* l'"alta" qui scurisce invece di schiarire: fondo chiaro */
  --sc-brace-piena:var(--fire);
  --sc-fondo:#F4F3EA;
}
html[data-tema="lavagna"]{
  --sc-carta:240,244,248;    /* il gesso: testo e filetti sulla lavagna nera */
  --sc-ambra:34,211,238;     /* il tubo al neon ciano, l'accento strutturale */
  --sc-brace:255,45,45;      /* rosso neon, solo allarme — mai il magenta del denaro */
  --sc-testo:#F0F4F8;
  --sc-medio:#E2E8F0;
  --sc-tenue:#CBD5E1;
  --sc-ambra-piena:#22D3EE;
  --sc-ambra-alta:#7DE8F7;
  --sc-brace-piena:#FF2D2D;
  --sc-fondo:#0B0B0F;
}


/* ── L'AMBIENTE ─────────────────────────────────────────────
   La foto del bar resta, ma smette di essere una foto: diventa
   luce. Desaturata, scurita, con la lampada ambra in alto a
   sinistra e il banco verde nell'angolo opposto. */
.pitch-bg{
  background-color:#0B0908 !important;
  background-image:
    radial-gradient(52% 44% at 22% -6%, rgba(var(--sc-ambra),.26), transparent 64%),
    radial-gradient(66% 60% at 104% 106%, rgba(28,91,69,.42), transparent 62%),
    linear-gradient(180deg, rgba(11,9,8,.86) 0%, rgba(11,9,8,.80) 40%, rgba(11,9,8,.93) 100%),
    url('/img/backgrounds/fantabar-bg.jpg') !important;
  filter:saturate(.42) contrast(1.04) brightness(.72);
}
body{background:#0B0908 !important;font-family:var(--font-main)}
::selection{background:rgba(var(--sc-ambra),.28);color:var(--sc-testo)}

/* ── TESTATA ────────────────────────────────────────────────
   L'insegna del locale, non un logo di app. */
.asta-header{
  height:54px;padding:0 20px;background:rgba(8,7,6,.94);
  border-bottom:1px solid var(--border);box-shadow:none;backdrop-filter:blur(14px);
}
.asta-header-logo{display:none}
.asta-header-title{
  font-family:'Instrument Serif',Georgia,serif !important;font-style:italic;font-weight:400;
  font-size:1.42rem;letter-spacing:-.01em;text-transform:none;
  background:none !important;-webkit-text-fill-color:var(--sc-testo) !important;color:var(--sc-testo);
}
.asta-header-email{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;color:var(--text-muted)}

/* ═══════════════════════════════════════════════════════════
   LA PUJA — il tavolo grande
   Il foglio originale difende questa zona con !important a ogni
   breakpoint: qui si sale di specificità (html body + #id) per
   poterla ricomporre senza toccare un solo file dell'app.
   ═══════════════════════════════════════════════════════════ */
html body.layout-partecipante .asta-row-panels{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 296px !important;
  grid-template-areas:"tavolo conto" "squadre squadre" !important;
  column-gap:0 !important;row-gap:12px !important;
  padding:12px !important;max-height:none !important;align-items:stretch !important;
}
html body.layout-partecipante .asta-row-panels>#puja-panel-slot{grid-area:tavolo !important}
html body.layout-partecipante .asta-row-panels>#mio-panel{grid-area:conto !important}
html body.layout-partecipante .asta-row-panels>.panel-budget{grid-area:squadre !important}

/* riga intera, in cima: la puja non è più una striscia schiacciata */
html body.layout-partecipante .asta-row-panels>#puja-panel-slot,
html body .asta-row-panels>#puja-panel-slot{
  max-width:none !important;align-self:stretch !important;height:auto !important;
}
/* ATTENZIONE: scoped SOLO a serata e default — bar/cuoio/lavagna/sala-giochi
   hanno il proprio background del #puja-panel-slot scoped con [data-tema="..."] */
html:not([data-tema]) body.layout-partecipante #puja-panel-slot,
html[data-tema="serata"] body.layout-partecipante #puja-panel-slot,
html:not([data-tema]) body #puja-panel-slot,
html[data-tema="serata"] body #puja-panel-slot{
  position:relative !important;overflow:hidden !important;
  min-height:220px !important;padding:22px 28px 20px 28px !important;
  align-items:center !important;gap:34px !important;
  border:1px solid rgba(var(--sc-carta),.10) !important;border-radius:2px !important;
  background:
    radial-gradient(42% 130% at 17% -16%, rgba(var(--sc-ambra),.22), transparent 62%),
    radial-gradient(52% 120% at 101% 118%, rgba(28,91,69,.34), transparent 60%),
    linear-gradient(180deg, rgba(26,21,18,.96), rgba(12,10,9,.97)) !important;
  box-shadow:0 28px 64px rgba(0,0,0,.5), inset 0 1px 0 rgba(var(--sc-carta),.05) !important;
}
/* la miccia: il timer attraversa tutta la sala (scoped a serata/default) */
html:not([data-tema]) body #puja-panel-slot::before,
html[data-tema="serata"] body #puja-panel-slot::before{
  content:'' !important;position:absolute !important;left:0;right:0;top:0;height:2px;
  background:rgba(var(--sc-carta),.08);z-index:5;
}
html:not([data-tema]) body #puja-panel-slot::after,
html[data-tema="serata"] body #puja-panel-slot::after{
  content:'' !important;position:absolute !important;left:0;top:0;height:2px;width:64%;
  background:var(--sc-ambra-piena);box-shadow:0 0 18px var(--sc-ambra-piena), 0 0 4px var(--sc-ambra-piena);z-index:6;
}
html:not([data-tema]) body.puja-urgente #puja-panel-slot,
html[data-tema="serata"] body.puja-urgente #puja-panel-slot{
  background:
    radial-gradient(46% 130% at 17% -16%, rgba(var(--sc-brace),.26), transparent 62%),
    radial-gradient(52% 120% at 101% 118%, rgba(28,91,69,.20), transparent 60%),
    linear-gradient(180deg, rgba(30,19,17,.96), rgba(13,10,10,.97)) !important;
}
html:not([data-tema]) body.puja-urgente #puja-panel-slot::after,
html[data-tema="serata"] body.puja-urgente #puja-panel-slot::after{width:12% !important;background:var(--sc-brace-piena);box-shadow:0 0 20px var(--sc-brace-piena)}

/* la scena */
html body #puja-panel-slot .card-timer-group{
  gap:34px !important;align-items:center !important;flex:1 1 auto !important;min-width:0 !important;
  border-right:1px solid rgba(var(--sc-carta),.10) !important;padding-right:30px !important;height:auto !important;
}
html body #puja-panel-slot .chiamata-card{
  background:none !important;border:none !important;box-shadow:none !important;
  border-radius:0 !important;overflow:visible !important;
  flex:1 1 auto !important;max-width:none !important;min-width:0 !important;
  padding:0 0 0 206px !important;position:relative !important;
  display:flex !important;flex-direction:column !important;align-items:flex-start !important;
  justify-content:center !important;gap:14px !important;min-height:222px !important;
}
html body #puja-panel-slot .chiamata-card::before,
html body #puja-panel-slot .cc-offerta-box::after{display:none !important}

/* il giocatore: un ritratto sul muro, non un bollino */
html body #puja-panel-slot .cc-avatar{
  width:150px !important;height:190px !important;
  left:0 !important;top:50% !important;transform:translateY(-50%) !important;
  position:absolute !important;border-radius:2px !important;
  background:linear-gradient(180deg,#1E1814,#100D0B) !important;
  border:1px solid rgba(var(--sc-carta),.10) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.6) !important;
  animation:none !important;overflow:hidden !important;padding:0 !important;
  align-items:flex-end !important;
}
html body #puja-panel-slot .cc-avatar-img{
  filter:grayscale(1) contrast(1.14) brightness(.9) !important;
  object-position:center top !important;
}
html body #puja-panel-slot .cc-avatar::after{
  content:'' !important;position:absolute !important;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(202deg, rgba(var(--sc-ambra),.55) 0%, rgba(var(--sc-brace),.12) 46%, rgba(15,59,46,.62) 100%);
  mix-blend-mode:color;
}
html body #puja-panel-slot .cc-avatar::before{
  content:'' !important;position:absolute !important;inset:0;pointer-events:none;z-index:4;
  background:linear-gradient(180deg, rgba(var(--sc-ambra),.10) 0%, transparent 34%, rgba(12,10,9,.80) 100%);
}
html body #puja-panel-slot .cc-avatar-svg{width:88% !important;height:88% !important;opacity:.5}

/* il nome: occupa fisicamente la scena */
html body #puja-panel-slot .cc-header{
  margin:0 !important;gap:0 !important;align-items:flex-start !important;
  flex:1 1 300px !important;min-width:0 !important;flex-shrink:1 !important;
}
/* La colonna del nome e' un CONTAINER: e' lei che il nome deve misurare, non la
   sala (vedi "IL NOME MISURA LA SUA COLONNA" piu' sotto). Solo in vista
   Partecipante: in Admin .cc-header si dimensiona sul contenuto, e contenendo
   .cc-info la sua larghezza intrinseca diventa 0 — la colonna collassava e il
   nome finiva al minimo del clamp (misurato: .cc-info larga 0px). */
html body #puja-panel-slot .cc-info{
  min-width:0 !important;flex:1 1 auto !important;
  container-type:inline-size !important;container-name:nomecol !important;
}
html body #puja-panel-slot .cc-nome{
  font-family:'Archivo',sans-serif !important;font-weight:900 !important;
  font-variation-settings:'wdth' 62 !important;
  /* cqw (larghezza del container #asta-main-col, non della finestra): con
     Anteprima aperta la finestra non cambia ma la colonna si dimezza, un vw
     qui lascerebbe il nome enorme in uno spazio ridotto. */
  font-size:clamp(1.2rem,3.2cqw,2.35rem) !important;line-height:.86 !important;letter-spacing:.004em !important;
  text-transform:uppercase !important;color:var(--sc-testo) !important;
  white-space:normal !important;overflow:visible !important;text-overflow:clip !important;
  max-width:none !important;text-shadow:0 4px 26px rgba(0,0,0,.65) !important;
}
html body #puja-panel-slot .cc-nome-row{gap:14px !important;align-items:center !important;flex-wrap:wrap !important}
html body #puja-panel-slot .cc-meta{
  margin-top:12px !important;gap:9px !important;
  font-family:'Space Mono',monospace !important;font-size:.64rem !important;
  letter-spacing:.16em !important;text-transform:uppercase !important;color:var(--sc-medio) !important;
}

/* il prezzo: il fatto più grande della stanza */
html body #puja-panel-slot .cc-body{ flex-shrink:1 !important;
  flex:0 0 auto !important;width:auto !important;max-width:none !important;
  display:flex !important;flex-direction:column !important;align-items:flex-start !important;
  gap:0 !important;margin:0 !important;overflow:visible !important;
}
html body #puja-panel-slot .cc-offerta-box{
  border:none !important;background:none !important;box-shadow:none !important;
  padding:0 !important;margin:0 !important;border-radius:0 !important;
  align-items:flex-start !important;max-width:none !important;
}
html body #puja-panel-slot .cc-offerta{
  font-family:'Archivo',sans-serif !important;font-weight:900 !important;
  font-variation-settings:'wdth' 112 !important;font-variant-numeric:tabular-nums !important;
  font-size:5.6rem !important;line-height:.76 !important;letter-spacing:-.032em !important;
  color:var(--sc-testo) !important;text-shadow:0 8px 34px rgba(0,0,0,.6) !important;
  white-space:nowrap !important;
}
html body #puja-panel-slot .cc-offerta-label{
  font-family:'Space Mono',monospace !important;font-size:.6rem !important;
  letter-spacing:.24em !important;text-transform:uppercase !important;
  color:var(--sc-ambra-piena) !important;font-weight:400 !important;margin-top:12px !important;
}
html body.puja-urgente #puja-panel-slot .cc-offerta-label{color:var(--sc-brace-piena) !important}
html body #puja-panel-slot .cc-offerente{
  font-size:.95rem !important;color:var(--sc-tenue) !important;margin-top:10px !important;
  letter-spacing:.04em !important;white-space:nowrap !important;
}
html body #puja-panel-slot .cc-strategia-info{
  font-family:'Space Mono',monospace !important;font-size:.85rem !important;
  letter-spacing:.1em !important;color:var(--sc-tenue) !important;
  background:none !important;border:none !important;padding:8px 0 0 !important;
}

/* il cronometro: evento live, non un bollino d'angolo */
html body #puja-panel-slot .timer-ring-container{
  background:none !important;border:none !important;box-shadow:none !important;
  padding:0 !important;border-radius:0 !important;flex:0 0 auto !important;width:auto !important;
}
html body #puja-panel-slot .timer-ring{width:132px !important;height:132px !important}
html body .timer-ball{display:none !important}
html body #puja-panel-slot .timer-number{
  font-family:'Archivo',sans-serif !important;font-weight:900 !important;
  font-variation-settings:'wdth' 106 !important;font-variant-numeric:tabular-nums !important;
  font-size:3.1rem !important;letter-spacing:-.03em !important;
  color:var(--sc-ambra-piena) !important;text-shadow:0 0 30px rgba(var(--sc-ambra),.4) !important;
}
html body.puja-urgente #puja-panel-slot .timer-number{color:var(--sc-brace-piena) !important;text-shadow:0 0 32px rgba(var(--sc-brace),.5) !important}
html body #puja-panel-slot .timer-label-text{
  font-family:'Space Mono',monospace !important;font-size:.75rem !important;
  letter-spacing:.22em !important;text-transform:uppercase !important;
  color:var(--sc-tenue) !important;margin-top:6px !important;
}

/* ── L'AZIONE: un solo strumento, non tre bottoni ───────────
   Prima erano tre linguaggi impilati (due cerchi, una lastra,
   una coppia di riquadri). Ora sono tre fasce della stessa
   larghezza, stesso filetto, stessa lingua: una pulsantiera. */
html body #puja-panel-slot .rilancio-box{
  background:none !important;border:none !important;box-shadow:none !important;
  padding:0 !important;flex:0 0 270px !important;width:270px !important;
  gap:9px !important;justify-content:center !important;border-radius:0 !important;
}

/* fascia 1 — gli scatti, uniti in una barra segmentata */
html body #puja-panel-slot .quick-bids-row{
  display:flex !important;gap:0 !important;margin:0 !important;width:100% !important;
  border:1px solid rgba(var(--sc-carta),.20) !important;border-radius:2px !important;
  overflow:hidden !important;background:rgba(20,16,14,.6) !important;
}
html body #puja-panel-slot .btn-quick{
  flex:1 1 0 !important;width:auto !important;height:46px !important;
  border-radius:0 !important;border:none !important;padding:0 !important;
  background:none !important;color:var(--sc-medio) !important;box-shadow:none !important;
  font-family:'Archivo',sans-serif !important;font-weight:700 !important; text-shadow:none !important;
  font-variation-settings:'wdth' 90 !important;font-size:.92rem !important;
  letter-spacing:.02em !important;transform:none !important;
}
html body #puja-panel-slot .btn-quick + .btn-quick{
  border-left:1px solid rgba(var(--sc-carta),.16) !important;
}

/* fascia 2 — la lastra: dice l'azione e il suo prezzo */
html body #puja-panel-slot .btn-rilancia{
  display:flex !important;align-items:center !important;justify-content:space-between !important;
  background:var(--sc-testo) !important;color:var(--sc-fondo) !important;width:100% !important;
  font-family:'Archivo',sans-serif !important;font-weight:900 !important;
  font-variation-settings:'wdth' 76 !important;
  font-size:1.42rem !important;letter-spacing:.03em !important;text-transform:uppercase !important;
  border-radius:2px !important;padding:0 20px !important;height:72px !important;border:none !important;
  box-shadow:0 18px 38px rgba(0,0,0,.55) !important;text-shadow:none !important;
}
/* il totale che pagheresti, dentro il tasto: nessun dubbio su cosa succede */
html body #puja-panel-slot .btn-rilancia::after{
  content:attr(data-tot) !important;display:block !important;
  font-family:'Archivo',sans-serif !important;font-weight:900 !important;
  font-variation-settings:'wdth' 108 !important;font-variant-numeric:tabular-nums !important;
  font-size:1.7rem !important;letter-spacing:-.02em !important;
  padding-left:18px !important;margin-left:18px !important;
  border-left:1px solid rgba(20,16,14,.22) !important;
  position:static !important;background:none !important;transform:none !important;
  width:auto !important;height:auto !important;opacity:1 !important;animation:none !important;
}
html body #puja-panel-slot .btn-rilancia::before{display:none !important}
html body.puja-urgente #puja-panel-slot .btn-rilancia{
  background:var(--sc-brace-piena) !important;color:#F7EFE6 !important;
  box-shadow:0 18px 42px rgba(var(--sc-brace),.36) !important;
}
html body.puja-urgente #puja-panel-slot .btn-rilancia::after{border-left-color:rgba(247,239,230,.34) !important}

/* fascia 3 — l'offerta libera, stessa barra, voce più bassa */
html body #puja-panel-slot .manual-bid-row{
  display:flex !important;gap:0 !important;margin:0 !important;width:100% !important;
  border:1px solid rgba(var(--sc-carta),.14) !important;border-radius:2px !important;
  overflow:hidden !important;
}
html body #puja-panel-slot .inp-rilancio{
  flex:1 1 0 !important;width:auto !important;min-width:0 !important;
  background:rgba(20,16,14,.6) !important;border:none !important;border-radius:0 !important;
  color:var(--sc-testo) !important;height:42px !important;padding:0 14px !important;
  font-family:'Space Mono',monospace !important;font-weight:700 !important; text-shadow:none !important;
  font-size:.82rem !important;text-align:left !important;
}
html body #puja-panel-slot .btn-manuale{
  flex:0 0 auto !important;border-radius:0 !important;background:none !important;
  border:none !important;border-left:1px solid rgba(var(--sc-carta),.14) !important;
  color:var(--sc-medio) !important;height:42px !important;padding:0 18px !important;
  font-family:'Space Mono',monospace !important;font-size:.64rem !important;
  letter-spacing:.16em !important;text-transform:uppercase !important;font-weight:400 !important;
  width:auto !important;transform:none !important;box-shadow:none !important;
  transform: none !important;
}

/* ── GLI AMICI AL TAVOLO ────────────────────────────────────
   Righe, non pillole. Chi è avanti nell'offerta è l'unico
   illuminato: la stessa regola di luce di tutto il sistema. */
.panel-budget,.mio-panel,.admin-panel,.tabs-panel{
  border-radius:2px !important;
  background:linear-gradient(180deg, rgba(11,9,8,.62), rgba(8,7,6,.72)) !important;
  border:1px solid var(--border) !important;
  box-shadow:0 14px 30px rgba(0,0,0,.36) !important;
}
.panel-budget{flex:1 1 300px}
.panel-budget-hdr,.mio-panel-header .mio-nome,.admin-badge{
  font-family:var(--font-mono) !important;font-size:.6rem !important;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted) !important;
  font-weight:400 !important;background:none !important;
}
.sidebar-squadra{
  background:transparent !important;border-radius:0 !important;
  border-left:2px solid transparent !important;
  border-bottom:1px solid rgba(var(--sc-carta),.06) !important;
  box-shadow:none !important;margin-bottom:0 !important;padding:6px 8px !important;
  transform:none !important;
}
.sidebar-squadra.mia-squadra{border-left-color:var(--sc-testo) !important;background:rgba(var(--sc-carta),.035) !important}
.sidebar-squadra.offerente-attuale{
  border-left-color:var(--sc-ambra-piena) !important;background:rgba(var(--sc-ambra),.09) !important;
}
.sidebar-squadra.critica{border-left-color:var(--sc-brace-piena) !important}
.sq-nome{
  font-family:'Archivo',sans-serif !important;font-weight:600;
  font-variation-settings:'wdth' 80;letter-spacing:.05em;
  text-transform:uppercase;font-size:.80rem !important;color:var(--text-secondary) !important;
}
.sidebar-squadra.mia-squadra .sq-nome{color:var(--sc-testo) !important}
.sq-crediti{
  font-family:'Archivo',sans-serif !important;font-weight:800;
  font-variation-settings:'wdth' 104;font-variant-numeric:tabular-nums;
  color:var(--sc-testo) !important;text-shadow:none !important;font-size:1.05rem !important;
}
.sidebar-squadra.offerente-attuale .sq-crediti{color:var(--sc-ambra-piena) !important}
.sq-svincoli,.slot-chip,.sq-slot{
  font-family:var(--font-mono) !important;font-size:.64rem !important;
  letter-spacing:.08em;color:var(--text-muted) !important;background:none !important;
  border:none !important;
}
.budget-progress{background:rgba(var(--sc-carta),.07) !important;border-radius:0 !important;height:2px !important}
.budget-progress-fill{border-radius:0 !important}
.budget-progress-fill.ok{background:var(--text-secondary) !important}
.budget-progress-fill.warn{background:var(--sc-ambra-piena) !important}
.budget-progress-fill.crit{background:var(--sc-brace-piena) !important}

.crediti-badge{
  background:none !important;border:1px solid rgba(var(--sc-ambra),.42) !important;
  border-radius:0 !important;color:var(--sc-ambra-piena) !important;
  font-family:'Archivo',sans-serif !important;font-weight:800;
  font-variation-settings:'wdth' 100;font-variant-numeric:tabular-nums;
}
.mio-nome{color:var(--text-muted) !important}

/* ── I BOTTONI ──────────────────────────────────────────────
   Nessun gradiente. Il pieno crema è riservato all'azione
   principale; tutto il resto è contorno. */
.btn{border-radius:2px !important;font-family:'Archivo',sans-serif !important;
  font-variation-settings:'wdth' 84;letter-spacing:.04em;text-transform:uppercase;
  font-weight:700 !important; text-shadow:none !important;box-shadow:none !important}
.btn-primary{background:var(--sc-testo) !important;color:var(--sc-fondo) !important;border:none !important}
.btn-secondary{background:none !important;border:1px solid var(--border-light) !important;color:var(--text-secondary) !important}
.btn-success{background:none !important;border:1px solid rgba(79,191,143,.5) !important;color:#4FBF8F !important}
.btn-danger{background:none !important;border:1px solid rgba(var(--sc-brace),.5) !important;color:var(--sc-brace-piena) !important}
.btn-accent{background:var(--sc-ambra-piena) !important;color:var(--sc-fondo) !important;border:none !important}
.btn-sound,.btn-esci{border-radius:2px !important;border:1px solid var(--border) !important;background:none !important}

/* ── LE SEZIONI ─────────────────────────────────────────────
   Le schede diventano voci di lavagna: testo e una riga sotto
   quella attiva. Niente pillole colorate. */
.tabs-nav{
  background:transparent !important;padding:0 8px !important;gap:0 !important;
  border-bottom:1px solid var(--border) !important;backdrop-filter:none !important;
}
.tab-btn{
  background:none !important;border:none !important;border-radius:0 !important;
  box-shadow:none !important;transform:none !important;
  font-family:var(--font-mono) !important;font-size:.66rem !important;
  letter-spacing:.18em;text-transform:uppercase;font-weight:400 !important;
  color:var(--text-muted) !important;padding:15px 22px !important;position:relative;
}
.tab-btn.active{color:var(--sc-testo) !important;background:none !important}
.tab-btn.active::after{
  content:'';position:absolute;left:22px;right:22px;bottom:-1px;height:2px;background:var(--sc-ambra-piena);
}
.tab-content{background:none}

/* liste e righe: solo filetti */
.storico-list li,.rose-row,.libero-row,.storico-export-item{
  background:transparent !important;border-radius:0 !important;
  border-bottom:1px solid rgba(var(--sc-carta),.06) !important;
}
.storico-list li strong,.rose-row strong{color:var(--sc-testo) !important}
.text-accent{color:var(--sc-ambra-piena) !important}
.storico-filtro-btn,.filtro-btn{
  border-radius:2px !important;background:none !important;
  border:1px solid var(--border) !important;color:var(--text-muted) !important;
  font-family:var(--font-mono) !important;font-size:.62rem !important;
  letter-spacing:.1em;text-transform:uppercase;
}
.storico-filtro-btn.active,.filtro-btn.active{
  border-color:rgba(var(--sc-ambra),.5) !important;color:var(--sc-ambra-piena) !important;background:none !important;
}
.rose-inp,input[type=text],input[type=number],select{
  border-radius:2px !important;background:var(--sc-fondo) !important;
  border:1px solid var(--border) !important;color:var(--sc-testo) !important;
}

/* ── SOBRIETÀ: via i luccichii del tema precedente ────────── */
.chiamata-card.attiva::before,.cc-offerta-box::before{display:none !important}
[class*="glow"],.admin-panel{box-shadow:0 14px 30px rgba(0,0,0,.36) !important}

/* ── MOBILE ─────────────────────────────────────────────────
   Stessa stanza, in verticale. Il prezzo resta l'elemento più
   grande dello schermo; l'azione vive dove arriva il pollice.
   Stessa specificità del blocco desktop, altrimenti perderebbe
   contro se stesso. */
@media(max-width:900px){
  html body.layout-partecipante #puja-panel-slot,
  html body #puja-panel-slot{
    flex-direction:column !important;align-items:stretch !important;
    padding:20px 16px 18px !important;gap:18px !important;min-height:0 !important;
  }
  html body #puja-panel-slot::after{width:64% !important}

  html body #puja-panel-slot .card-timer-group{
    flex-direction:row !important;align-items:center !important;gap:14px !important;
    border-right:none !important;padding-right:0 !important;width:100% !important;
  }
  html body #puja-panel-slot .chiamata-card{
    flex-direction:column !important;align-items:flex-start !important;
    padding:0 !important;gap:16px !important;min-height:0 !important;flex:1 1 auto !important;
  }
  html body #puja-panel-slot .cc-header{
    flex-direction:row !important;align-items:center !important;
    gap:14px !important;width:100% !important;
  }
  html body #puja-panel-slot .cc-avatar{
    position:relative !important;left:auto !important;top:auto !important;
    transform:none !important;width:76px !important;height:96px !important;flex:0 0 auto !important;
  }
  html body #puja-panel-slot .cc-nome{font-size:1.9rem !important;line-height:.9 !important}
  html body #puja-panel-slot .cc-meta{margin-top:8px !important;font-size:.56rem !important;gap:6px !important}
  html body #puja-panel-slot .cc-nome-row{gap:9px !important}
  html body #puja-panel-slot .badge-ruolo{padding:3px 7px !important;font-size:.55rem !important}

  html body #puja-panel-slot .cc-body{width:100% !important}
  html body #puja-panel-slot .cc-offerta{font-size:3.9rem !important}
  html body #puja-panel-slot .cc-offerta-label{margin-top:8px !important;font-size:.54rem !important}
  html body #puja-panel-slot .cc-offerente{font-size:.85rem !important;white-space:normal !important}
  /* Era `display:none`: l'unico punto del tema in cui si nascondeva un DATO (la fascia
     di Strategia, la titolarita', il commento) invece di una decorazione — proprio su
     mobile, dove serve di piu' perche' non c'e' la colonna Strategie accanto. Ora si
     compatta: una riga sola per voce, con i puntini se non ci sta, e il commento resta
     un bottone che apre il testo intero. Si stringe, non sparisce. */
  html body #puja-panel-slot .cc-strategia-info{
    display:block !important;padding:6px 0 0 !important;margin:0 !important;
    font-size:.65rem !important;letter-spacing:.06em !important;line-height:1.35 !important;
    max-width:100% !important;
    overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;
  }
  html body #puja-panel-slot .cc-commento-preview{
    display:flex !important;align-items:center !important;gap:5px !important;
    width:100% !important;text-align:left !important;
  }
  html body #puja-panel-slot .cc-commento-preview span{
    flex:1 1 auto !important;min-width:0 !important;
    overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;
  }
  html body #puja-panel-slot .cc-commento-preview small{flex:0 0 auto !important}

  html body #puja-panel-slot .timer-ring-container{flex:0 0 auto !important}
  html body #puja-panel-slot .timer-ring{width:92px !important;height:92px !important}
  html body #puja-panel-slot .timer-number{font-size:2.1rem !important}
  html body #puja-panel-slot .timer-label-text{font-size:.5rem !important}

  html body #puja-panel-slot .rilancio-box{
    flex:0 0 auto !important;width:100% !important;gap:12px !important;
    flex-direction:column !important;align-items:stretch !important;
    border-top:none !important;padding-top:0 !important;margin-top:0 !important;
  }
  html body #puja-panel-slot .card-timer-group{
    border-bottom:1px solid rgba(var(--sc-carta),.10) !important;padding-bottom:16px !important;
  }
  /* l'ordine sul telefono: prima le fiches, poi la lastra, poi l'offerta libera */
  html body #puja-panel-slot .quick-bids-row{order:1 !important}
  html body #puja-panel-slot .btn-rilancia{order:2 !important}
  html body #puja-panel-slot .manual-bid-row{order:3 !important}
  html body #puja-panel-slot .card-timer-group{flex:0 0 auto !important;align-self:stretch !important}
  html body #puja-panel-slot .quick-bids-row{gap:10px !important}
  html body #puja-panel-slot .btn-quick{height:44px !important;font-size:.88rem !important}
  html body #puja-panel-slot .btn-rilancia{font-size:1.3rem !important;height:64px !important;padding:0 18px !important}
  html body #puja-panel-slot .btn-rilancia::after{font-size:1.5rem !important}
  html body #puja-panel-slot .inp-rilancio{height:40px !important}
  html body #puja-panel-slot .btn-manuale{height:40px !important}

  html body .tab-btn{padding:13px 12px !important;font-size:.58rem !important;letter-spacing:.12em !important}
  html body .tab-btn.active::after{left:12px;right:12px}
  html body.layout-partecipante .asta-row-panels{
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-areas:"tavolo" "conto" "squadre" !important;
    row-gap:12px !important;
  }
  html body.layout-partecipante .asta-row-panels>#mio-panel{
    margin-left:0 !important;min-height:0 !important;
    border-left:1px solid rgba(var(--sc-carta),.10) !important;border-radius:2px !important;
    padding:18px 18px 16px !important;gap:16px !important;
  }
  html body #mio-panel .crediti-badge{font-size:2.1rem !important}
  html body #budget-bar{grid-template-columns:1fr !important}
}

/* ── CORREZIONI FINALI ──────────────────────────────────── */

/* Il cronometro è disegnato in SVG e i suoi colori sono impostati da JS
   (verde→azzurro, poi rosso sotto i 5s). Qui li riportiamo alla lampada. */
html body #timer-grad-start{stop-color:var(--sc-ambra-piena) !important}
html body #timer-grad-end{stop-color:#C4802B !important}
html body.puja-urgente #timer-grad-start{stop-color:var(--sc-brace-piena) !important}
html body.puja-urgente #timer-grad-end{stop-color:#8E2019 !important}
/* spessore del tubo: definito piu' sotto, nel blocco neon */
html body #puja-panel-slot .timer-ring circle:nth-of-type(2){stroke:rgba(var(--sc-carta),.07) !important;stroke-width:4 !important}
html body #puja-panel-slot .timer-ring circle:first-of-type{stroke:rgba(var(--sc-carta),.14) !important}

/* Badge ruolo nella carta di puja.
   Prima erano tutti uguali — contorno chiaro, nessun colore — perche' si era voluto
   tenere il rosso come stato d'allarme e non sprecarlo su un'etichetta. Ma il colore
   del ruolo non e' decorazione: e' l'unica cosa che distingue un portiere da un
   attaccante prima ancora di leggere le lettere, e in vista Admin i colori c'erano
   gia' (quella riga non e' mai passata di qui). Segnalato dall'utente: "il ruolo
   deve uscire coi colori in tutti i temi, POR giallo e cosi' via".
   Si tiene la FORMA che i temi hanno stabilito — gettone piatto, mono, spaziato — e
   si rimette il COLORE, in cinque gruppi: gli stessi di _roseRowRoleClass in app.js
   (Por, difesa, centrocampo, esterni, attacco), cosi' la codifica e' la stessa che
   si vede nelle righe di Rose e sull'accento delle carte 3D.
   Le tinte sono di mezzo tono apposta: devono reggere sia sul nero della Serata sia
   sulla panna del Cuoio, quindi un set solo invece di quattro. "sala-giochi" ha le
   sue piu' avanti (piu' specifiche) e continua a vincere. */
html body #puja-panel-slot .badge-ruolo,
html body #puja-panel-slot .badge-ruolo[class*="r-"]{
  background:var(--r-fondo, none) !important;
  border:1px solid var(--r-fondo, rgba(var(--sc-carta),.28)) !important;
  color:var(--r-testo, var(--sc-testo)) !important;border-radius:0 !important;
  font-family:'Space Mono',monospace !important;font-size:.62rem !important;
  letter-spacing:.1em !important;padding:5px 10px !important;font-weight:700 !important; text-shadow:none !important;
}
html body #puja-panel-slot .badge-ruolo.r-Por,
html body #puja-panel-slot .badge-ruolo.r-P{--r-fondo:#F0B429;--r-testo:#14100E}
html body #puja-panel-slot .badge-ruolo.r-Dc,
html body #puja-panel-slot .badge-ruolo.r-Ds,
html body #puja-panel-slot .badge-ruolo.r-Dd,
html body #puja-panel-slot .badge-ruolo.r-D,
html body #puja-panel-slot .badge-ruolo.r-B{--r-fondo:#3FBF6F;--r-testo:#14100E}
html body #puja-panel-slot .badge-ruolo.r-M,
html body #puja-panel-slot .badge-ruolo.r-C,
html body #puja-panel-slot .badge-ruolo.r-E{--r-fondo:#55A8E0;--r-testo:#14100E}
html body #puja-panel-slot .badge-ruolo.r-T,
html body #puja-panel-slot .badge-ruolo.r-W{--r-fondo:#9B84E8;--r-testo:#14100E}
html body #puja-panel-slot .badge-ruolo.r-A,
html body #puja-panel-slot .badge-ruolo.r-Pc{--r-fondo:#E8695A;--r-testo:#14100E}

/* ── IL TAVOLO: gli amici, uno accanto all'altro ────────────
   La lista verticale lasciava mezza riga vuota accanto al
   pannello "la mia squadra". Le squadre diventano una griglia
   orizzontale: occupano la larghezza che hanno, e le due
   colonne finiscono alla stessa altezza. */
html body.layout-partecipante .asta-row-panels>.panel-budget{
  max-height:none !important;
  max-width:none !important;overflow:visible !important;
  padding:8px 16px 10px !important;
}
/* Colonne piu' strette = piu' colonne = meno righe: con 12 squadre si
   passa da quattro righe a tre (o due sui monitor larghi). Il riepilogo
   e' un promemoria, non la schermata: lo spazio che libera va alle tab. */
html body.layout-partecipante #budget-bar,
html body:not(.layout-admin) #budget-bar{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows:repeat(3, auto) !important;
  gap:0 14px !important;align-content:start !important;
}
html body.layout-admin #budget-bar{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)) !important;
  gap:6px 10px !important;align-content:start !important;
}
html body #budget-bar .sidebar-squadra{
  padding:3px 0 4px 8px !important;
  border-bottom:1px solid rgba(var(--sc-carta),.07) !important;
}
html body .panel-budget-hdr{padding-bottom:5px !important;margin-bottom:5px !important}

/* "Il tuo conto" non è un pannello a parte: è il conto appoggiato
   sul tavolo, accanto alla puja. Stessa superficie, stessa miccia. */
html body.layout-partecipante .asta-row-panels>#mio-panel{
  align-self:stretch !important;margin-left:0 !important;min-height:220px !important;max-height:none !important;
  padding:22px 24px 20px !important;border-radius:0 2px 2px 0 !important;
  border:1px solid rgba(var(--sc-carta),.10) !important;border-left:none !important;
  background:
    radial-gradient(86% 110% at 104% 116%, rgba(28,91,69,.32), transparent 62%),
    linear-gradient(180deg, rgba(26,21,18,.96), rgba(12,10,9,.97)) !important;
  box-shadow:0 28px 64px rgba(0,0,0,.5) !important;
  display:flex !important;flex-direction:column !important;
  justify-content:space-between !important;overflow:visible !important;position:relative !important;
}
html body #mio-panel::before{
  content:'' !important;position:absolute !important;left:0;right:-1px;top:-1px;height:2px;
  background:rgba(var(--sc-carta),.08);z-index:5;
}
html body #mio-panel .mio-panel-header{
  flex-direction:column !important;align-items:flex-start !important;gap:10px !important;
  padding-bottom:16px !important;margin-bottom:0 !important;
  border-bottom:1px solid rgba(var(--sc-carta),.09) !important;
}
html body #mio-panel .mio-nome{
  font-family:'Space Mono',monospace !important;font-size:.78rem !important;
  letter-spacing:.22em !important;text-transform:uppercase !important;color:var(--sc-tenue) !important;
}
html body #mio-panel .crediti-badge{
  display:block !important;
  font-family:'Archivo',sans-serif !important;font-weight:900 !important;
  font-variation-settings:'wdth' 106 !important;font-variant-numeric:tabular-nums !important;
  font-size:2.7rem !important;line-height:.88 !important;letter-spacing:-.028em !important;
  color:var(--sc-testo) !important;background:none !important;border:none !important;padding:0 !important;
}
html body #mio-panel .slot-chip { font-size: .85rem !important; }
html body #mio-panel .slot-chip span { font-size: .95rem !important; }

html body #mio-panel .slot-counter{
  display:grid !important;grid-template-columns:1fr 1fr !important;gap:12px !important;
  margin:0 !important;
}
html body #mio-panel .mio-panel-actions{margin:0 !important;padding-top:0 !important}
html body #mio-panel .mio-panel-actions .btn{
  padding:12px 10px !important;font-size:.66rem !important;letter-spacing:.12em !important;
}

/* Barre di budget: filetti, non sottolineature accese */
html body .budget-progress{height:2px !important;background:rgba(var(--sc-carta),.06) !important;margin-top:5px !important}
html body .budget-progress-fill{opacity:.5 !important}
html body .sidebar-squadra.offerente-attuale .budget-progress-fill{opacity:1 !important}

/* La sala si intravede appena: la foto è luce, non soggetto.
   ATTENZIONE: solo tema serata/default. Bar, Cuoio, Lavagna, Sala-giochi
   hanno i propri filter scoped nel loro blocco. */
html:not([data-tema]) body .pitch-bg,
html[data-tema="serata"] body .pitch-bg {
  filter:saturate(.38) contrast(1.02) brightness(.82) !important;
}

/* Storico: cifre in tabellone */
html body .storico-list li{padding:11px 10px !important;font-size:.8rem !important}
html body .storico-list li .text-accent{
  font-family:'Archivo',sans-serif !important;font-weight:800 !important;
  font-variation-settings:'wdth' 100 !important;font-variant-numeric:tabular-nums !important;
}

/* ═══════════════════════════════════════════════════════════
   I COMPORTAMENTI — la parte che non è pelle
   Queste regole non colorano: cambiano cosa vedi, e quando.
   ═══════════════════════════════════════════════════════════ */

/* ── "ancora in gioco" in testata ── */
html body .vivi-chip{
  display:flex !important;flex-direction:column !important;align-items:flex-end !important;
  line-height:1 !important;margin-right:14px !important;padding-right:14px !important;
  border-right:1px solid rgba(var(--sc-carta),.12) !important;
}
html body .vivi-chip b{
  font-family:'Archivo',sans-serif !important;font-weight:900 !important;
  font-variation-settings:'wdth' 104 !important;font-variant-numeric:tabular-nums !important;
  font-size:1.05rem !important;color:var(--sc-ambra-piena) !important;
}
html body .vivi-chip span{
  font-family:'Space Mono',monospace !important;font-size:.5rem !important;
  letter-spacing:.16em !important;text-transform:uppercase !important;color:var(--sc-tenue) !important;margin-top:2px !important;
}
html body[data-fase="finale"] .vivi-chip b{color:var(--sc-brace-piena) !important}

/* ── chi non può più coprire l'offerta esce dal tavolo ── */
html body #budget-bar .sidebar-squadra{
  transition:opacity .45s ease, transform .45s ease, filter .45s ease !important;
}
html body #budget-bar .sidebar-squadra.fuori{
  opacity:.24 !important;transform:translateX(-5px) !important;
}
html body #budget-bar .sidebar-squadra.fuori .sq-crediti{
  text-decoration:line-through !important;color:var(--sc-tenue) !important;
}

/* ── ULTIMI SECONDI: cambia la luce, non cosa si vede ──
   Qui c'era "la stanza si stringe": sotto i 5 secondi squadre, tab,
   conto e meta' dei dati del giocatore sfocavano e si spegnevano, per lasciare a
   fuoco solo prezzo/tempo/azione. Tolto: durante un'asta ognuno deve
   poter guardare quello che vuole quando vuole — i crediti dei rivali
   servono PROPRIO negli ultimi secondi, ed erano la cosa piu' sfocata.
   Restano le luci e il rosso: fondo, miccia, sabbia della clessidra,
   cifra del tempo e lastra RILANCIA. Nessun pannello viene toccato.
   Il `transition` resta perche' se lo passano i cambi di colore. */
html body .panel-budget,
html body #mio-panel,
html body .tabs-panel,
html body #puja-panel-slot .cc-meta,
html body #puja-panel-slot .cc-offerente,
html body #puja-panel-slot .cc-strategia-info,
html body #puja-panel-slot .cc-nome{
  transition:opacity .5s ease, filter .5s ease, font-size .5s cubic-bezier(.2,.8,.2,1) !important;
}

/* ── la leva: il riempimento mentre tieni premuto ── */
/* Qui c'era il riempimento progressivo del tasto, che si caricava mentre si teneva
   premuto: guidato da --carica, che lo alzava comportamenti-asta.js. Tolta la leva
   (vedi l'intestazione di quel file) la variabile resta a zero per sempre, quindi il
   gradiente non disegnerebbe mai niente: si cancella invece di lasciarlo morto. */
html body #puja-panel-slot .btn-rilancia{
  background-color:var(--sc-testo) !important;
  transition:background-color .3s ease, box-shadow .3s ease !important;
  cursor:pointer;
}
html body[data-fase="finale"] #puja-panel-slot .btn-rilancia{background-color:var(--sc-brace-piena) !important}
html body #puja-panel-slot .btn-rilancia:active{transform:translateY(2px)}
html body #puja-panel-slot .btn-rilancia[disabled]{opacity:.3 !important;box-shadow:none !important}

/* ── il colpo sul tavolo quando qualcuno rilancia ── */
@keyframes colpo-tavolo{
  0%{transform:translateY(0)}
  22%{transform:translateY(3px)}
  100%{transform:translateY(0)}
}
@keyframes lampo-sala{
  0%{opacity:.55}
  100%{opacity:0}
}
html body #puja-panel-slot.colpo{animation:colpo-tavolo .26s ease-out}
html body #puja-panel-slot.colpo::before{
  animation:lampo-sala .6s ease-out;
  background:radial-gradient(60% 140% at 22% -20%, rgba(var(--sc-ambra),.9), transparent 62%) !important;
  height:100% !important;top:0 !important;pointer-events:none;
}

/* ── assegnato: il timbro cade sulla scena ── */
html body[data-fase="assegnato"] #puja-panel-slot{
  background:
    radial-gradient(52% 120% at 30% -14%, rgba(20,110,80,.40), transparent 64%),
    linear-gradient(180deg, rgba(16,32,26,.96), rgba(10,15,13,.97)) !important;
}
html body .timbro-preso{
  position:absolute !important;inset:0 !important;z-index:20 !important;
  display:flex !important;flex-direction:column !important;
  align-items:center !important;justify-content:center !important;gap:12px !important;
  pointer-events:none !important;
}
html body .timbro-preso span{
  font-family:'Archivo',sans-serif !important;font-weight:900 !important;
  font-variation-settings:'wdth' 70 !important;font-size:3.4rem !important;
  text-transform:uppercase !important;letter-spacing:.05em !important;
  color:#5FCFA6 !important;border:4px solid #5FCFA6 !important;padding:10px 34px !important;
  transform:rotate(-6deg) !important;animation:timbro-cade .34s cubic-bezier(.2,1.6,.4,1) !important;
}
@keyframes timbro-cade{
  0%{transform:rotate(-6deg) scale(2.6);opacity:0}
  60%{opacity:1}
  100%{transform:rotate(-6deg) scale(1);opacity:1}
}
html body .timbro-preso em{
  font-family:'Space Mono',monospace !important;font-style:normal !important;
  font-size:.72rem !important;letter-spacing:.2em !important;text-transform:uppercase !important;
  color:var(--sc-testo) !important;
}

@media(prefers-reduced-motion:reduce){
  html body *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
/* ═══════════════════════════════════════════════════════════
   VISTA ADMIN — la stessa scena, sull'altro ramo di layout
   Il foglio originale governa la puja dell'admin con
   `body.layout-admin .asta-row-puja`, un ramo separato da
   `#puja-panel-slot`. Qui gli si applica la stessa identita',
   altrimenti l'admin resterebbe col tema vecchio.
   ═══════════════════════════════════════════════════════════ */
/* ATTENZIONE: scoped SOLO a serata e default — bar/cuoio/lavagna/sala-giochi
   hanno il proprio background dell'asta-row-puja scoped con [data-tema="..."] */
html:not([data-tema]) body.layout-admin .asta-row-puja,
html[data-tema="serata"] body.layout-admin .asta-row-puja{
  position:relative !important;overflow:hidden !important;
  padding:22px 26px 20px !important;gap:26px !important;align-items:center !important;
  border:1px solid rgba(var(--sc-carta),.10) !important;border-radius:2px !important;
  background:
    radial-gradient(42% 130% at 18% -16%, rgba(var(--sc-ambra),.20), transparent 62%),
    radial-gradient(52% 120% at 102% 118%, rgba(28,91,69,.32), transparent 60%),
    linear-gradient(180deg, rgba(26,21,18,.96), rgba(12,10,9,.97)) !important;
  box-shadow:0 24px 56px rgba(0,0,0,.5) !important;
}
html:not([data-tema]) body.layout-admin .asta-row-puja::before,
html[data-tema="serata"] body.layout-admin .asta-row-puja::before{
  content:'' !important;position:absolute !important;left:0;right:0;top:0;height:2px;
  background:rgba(var(--sc-carta),.08);z-index:3;
}
html body.layout-admin .asta-row-puja .chiamata-card{
  background:none !important;border:none !important;box-shadow:none !important;border-radius:0 !important;
}
html body.layout-admin .asta-row-puja .cc-nome{
  font-family:Archivo,sans-serif !important;font-weight:900 !important;
  font-variation-settings:'wdth' 62 !important;
  font-size:2.2rem !important;line-height:.88 !important;text-transform:uppercase !important;
  color:var(--sc-testo) !important;white-space:normal !important;
}
html body.layout-admin .asta-row-puja .cc-offerta{
  font-family:Archivo,sans-serif !important;font-weight:900 !important;
  font-variation-settings:'wdth' 112 !important;font-variant-numeric:tabular-nums !important;
  font-size:3.6rem !important;line-height:.8 !important;letter-spacing:-.03em !important;
  color:var(--sc-testo) !important;text-shadow:none !important;
}
html body.layout-admin .asta-row-puja .cc-offerta-box{
  border:none !important;background:none !important;box-shadow:none !important;padding:0 !important;
}
html body.layout-admin .asta-row-puja .cc-offerta-label{
  font-family:'Space Mono',monospace !important;font-size:.6rem !important;
  letter-spacing:.22em !important;text-transform:uppercase !important;color:var(--sc-ambra-piena) !important;
}
html body.layout-admin .asta-row-puja .cc-avatar{
  width:96px !important;height:122px !important;border-radius:2px !important;
  background:linear-gradient(180deg,#1E1814,#100D0B) !important;
  border:1px solid rgba(var(--sc-carta),.10) !important;animation:none !important;
}
html body.layout-admin .asta-row-puja .timer-ring{width:104px !important;height:104px !important}
html body.layout-admin .asta-row-puja .timer-number{
  font-family:Archivo,sans-serif !important;font-weight:900 !important;
  font-variation-settings:'wdth' 106 !important;font-size:2.4rem !important;
  color:var(--sc-ambra-piena) !important;text-shadow:none !important;
}
html body.layout-admin .asta-row-puja .rilancio-box{
  background:none !important;border:none !important;box-shadow:none !important;
  transform: none !important;
  display: flex !important; flex-direction: column !important; gap: 8px !important;
  justify-content: center !important; align-items: stretch !important;
  flex: 0 0 270px !important; width: 270px !important; max-width: 270px !important;
  padding: 0 !important;
}

/* pannello Admin: comandi sobri, niente pastiglie colorate */
html body .admin-panel{
  background:linear-gradient(180deg, rgba(11,9,8,.62), rgba(8,7,6,.72)) !important;
  border:1px solid rgba(var(--sc-carta),.10) !important;border-radius:2px !important;
}
html body .admin-badge{
  background:none !important;border:1px solid rgba(var(--sc-ambra),.42) !important;
  border-radius:0 !important;color:var(--sc-ambra-piena) !important;
  font-family:'Space Mono',monospace !important;font-size:.78rem !important;
  letter-spacing:.18em !important;text-transform:uppercase !important;
}
html body .admin-btn-grid .btn{border-radius:2px !important;font-size:.72rem !important}
html body .admin-conferma-box{
  background:rgba(20,16,14,.7) !important;border:1px solid rgba(var(--sc-ambra),.3) !important;
  border-radius:2px !important;
}
html body .conferma-titolo{font-family:'Space Mono',monospace !important;letter-spacing:.14em !important;
  text-transform:uppercase !important;font-size:.66rem !important;color:var(--sc-ambra-piena) !important}

/* ═══════════════════════════════════════════════════════════
   PORTA D'INGRESSO — home, login, lobby, fine asta
   Qui basta poco: il grosso lo fanno gia' le variabili in
   style.css. Si sostituisce solo il gradiente viola->oro del
   titolo, che ora sarebbe piatto (i due colori coincidono).
   ═══════════════════════════════════════════════════════════ */
/* Titolo home base (sovrascritto specificamente per ogni tema) */
html body .home-title{
  letter-spacing:-.015em !important;
}
html body .home-logo{filter:grayscale(1) opacity(.5)}
html body .card{
  background:linear-gradient(180deg, rgba(25,20,17,.9), rgba(13,11,10,.94)) !important;
  border:1px solid rgba(var(--sc-carta),.10) !important;border-radius:2px !important;
}
html body .card-title{
  font-family:'Space Mono',monospace !important;font-size:.7rem !important;
  letter-spacing:.2em !important;text-transform:uppercase !important;
  font-weight:400 !important;color:var(--sc-tenue) !important;
}
html body .link-share{background:rgba(20,16,14,.7) !important;border-radius:2px !important}
html body .link-text{color:var(--sc-ambra-piena) !important}
html body .squadre-list li{background:transparent !important;border-radius:0 !important;
  border-bottom:1px solid rgba(var(--sc-carta),.07) !important}
html body .file-drop{border-radius:2px !important;border-color:rgba(var(--sc-carta),.2) !important}
html body .riepilogo-grid .card{border-radius:2px !important}

/* ── Vista Admin: le squadre su due colonne ──────────────────
   In Admin la riga alta ospita anche il pannello comandi, quindi
   la griglia del partecipante non si applica. Basta spezzare la
   lista in due colonne perche' non diventi una colonna infinita. */
html body.layout-admin #budget-bar{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)) !important;
  gap:6px 10px !important;align-content:start !important;
}
html body.layout-admin .asta-row-panels>.panel-budget{
  flex:2 1 480px !important;max-height:clamp(200px,32vh,300px) !important;
  overflow-x:hidden !important;
}
html body.layout-admin .asta-row-panels>#admin-panel,
html body.layout-admin .asta-row-panels>#mio-panel{
  max-height:clamp(200px,32vh,300px) !important;
}
/* Riepilogo squadre e Mio team, collassabili anche su desktop in Admin — stesso
   meccanismo dell'accordion mobile (stessi handler di click, gia' agganciati da
   setupAstaMobileAccordion() indipendentemente dalla larghezza), qui esteso oltre
   i 640px. **Default SEMPRE espanso** (correzione dell'utente al tentativo precedente,
   che partiva chiuso): l'Admin deve vedere questi dati appena entra, l'accordion serve
   solo per lasciargli la scelta di stringerli lui — stesso significato invertito di
   ".acc-open" usato per l'Utente qui sotto (vuol dire "l'ho chiuso io", non "e' aperto").
   Non tocca #admin-panel (ha i controlli Backup/Termina, quelli restano sempre visibili). */
@media (min-width:641px){
  html body.layout-admin .panel-budget-hdr{
    cursor:pointer !important;display:flex !important;align-items:center !important;
    justify-content:space-between !important;
  }
  html body.layout-admin .panel-budget-hdr::after{content:'▾' !important;font-size:.9em !important;transition:transform .25s !important;opacity:.7 !important}
  html body.layout-admin .panel-budget:not(.acc-open) .panel-budget-hdr::after{transform:rotate(180deg) !important}
  html body.layout-admin .asta-row-panels>.panel-budget.acc-open{max-height:44px !important;overflow:hidden !important}

  html body.layout-admin .mio-panel-header{cursor:pointer !important;position:relative !important}
  html body.layout-admin .mio-panel-header::after{content:'▾' !important;font-size:.9em !important;transition:transform .25s !important;opacity:.7 !important;margin-left:8px !important}
  html body.layout-admin #mio-panel:not(.acc-open) .mio-panel-header::after{transform:rotate(180deg) !important}
  html body.layout-admin .asta-row-panels>#mio-panel.acc-open{max-height:44px !important;overflow:hidden !important}
}
/* Stessa cosa in vista Utente: default SEMPRE espanso (l'allenatore vuole vederli),
   l'accordion serve solo per lasciargli la scelta di stringerli lui stesso se vuole.
   ".acc-open" (stesso identico meccanismo/handler di click di sopra, non e' un secondo
   sistema) significa qui "l'utente lo ha chiuso lui" — stesso significato di Admin sopra,
   diverso solo dall'accordion MOBILE (righe piu' sotto, dentro @media max-width:640px),
   dove invece ".acc-open" vuol dire "aperto" (default li' e' chiuso, storico, non toccato). */
@media (min-width:641px){
  html body.layout-partecipante .panel-budget-hdr{cursor:pointer !important;display:flex !important;align-items:center !important;justify-content:space-between !important}
  html body.layout-partecipante .panel-budget-hdr::after{content:'▾' !important;font-size:.9em !important;transition:transform .25s !important;opacity:.7 !important}
  html body.layout-partecipante .panel-budget:not(.acc-open) .panel-budget-hdr::after{transform:rotate(180deg) !important}
  html body.layout-partecipante .asta-row-panels>.panel-budget.acc-open{max-height:44px !important;overflow:hidden !important}

  html body.layout-partecipante .mio-panel-header{cursor:pointer !important;position:relative !important}
  html body.layout-partecipante .mio-panel-header::after{content:'▾' !important;font-size:.9em !important;transition:transform .25s !important;opacity:.7 !important;margin-left:8px !important}
  html body.layout-partecipante #mio-panel:not(.acc-open) .mio-panel-header::after{transform:rotate(180deg) !important}
  /* min-height:0 necessario: un'altra regola qui sotto forza #mio-panel a min-height:220px
     !important sempre (la "vetrina" della carta), e min-height vince sempre su max-height
     quando confliggono — senza azzerarlo qui il pannello non si chiudeva mai sotto 220px. */
  html body.layout-partecipante .asta-row-panels>#mio-panel.acc-open{max-height:44px !important;min-height:0 !important;overflow:hidden !important}
}
html body.layout-admin #mio-panel{
  display:flex !important;flex-direction:column !important;
}
html body.layout-admin #mio-panel .crediti-badge{
  font-family:Archivo,sans-serif !important;font-weight:900 !important;
  font-variation-settings:'wdth' 104 !important;font-size:2rem !important;
  background:none !important;border:none !important;padding:0 !important;color:var(--sc-testo) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   L'INSEGNA AL NEON
   In un bar il nome non è un logo stampato: è un tubo di vetro acceso
   alla parete. Si costruisce con strati di text-shadow — nucleo bianco
   caldo, alone ambra stretto, alone largo — e una accensione a scatti
   all'apertura, come un neon che prende. Poi resta acceso, con un
   respiro appena percepibile.
   ═══════════════════════════════════════════════════════════════════ */
/* ─── TEMA IL BAR: L'INSEGNA AL NEON CALDO DA PUB ───────────────────────── */
html[data-tema="bar"] body .asta-header-title,
html[data-tema="bar"] body .home-title{
  font-family:'Instrument Serif',Georgia,serif !important;
  font-style:italic !important;font-weight:400 !important;
  background:none !important;-webkit-text-fill-color:#FFE9C9 !important;
  color:#FFE9C9 !important;letter-spacing:.005em !important;
  text-shadow:
     0 0 2px  #FFF6E8,
     0 0 6px  rgba(255,201,122,.95),
     0 0 14px rgba(255,176,74,.75),
     0 0 30px rgba(255,150,40,.45),
     0 0 62px rgba(255,140,30,.22) !important;
  animation:neon-accende 2.4s ease-out both !important;
  filter:none !important;
}
html[data-tema="bar"] body .asta-header-title{font-size:1.5rem !important;padding-right:4px}
html[data-tema="bar"] body .home-title{font-size:clamp(2.6rem,7vw,4.6rem) !important;margin-bottom:8px !important}

/* l'accensione a scatti del neon, esclusiva del Bar */
@keyframes neon-accende{
  0%   {opacity:.15; text-shadow:none}
  6%   {opacity:1}
  9%   {opacity:.2;  text-shadow:none}
  14%  {opacity:1}
  17%  {opacity:.25; text-shadow:none}
  22%  {opacity:1}
  100% {opacity:1}
}
/* il respiro del tubo, quasi impercettibile */
html body .asta-header-title::after,
html body .home-title::after{
  content:'';position:absolute;inset:0;pointer-events:none;
}
html body .asta-header-left,
html body .home-header{position:relative}

/* ═══════════════════════════════════════════════════════════════════
   IL CRONOMETRO — un tubo al neon che si consuma
   Non un anello di progresso qualunque: la stessa materia dell'insegna.
   L'arco è un tubo acceso che si accorcia; la ghiera a tacche resta
   spenta dietro, come il vetro non illuminato. Sotto i cinque secondi
   il tubo va in crisi e sfarfalla in rosso — la stessa animazione di
   un neon che sta per saltare.
   ═══════════════════════════════════════════════════════════════════ */
html body .timer-ring{overflow:visible}
html body #puja-panel-slot .timer-progress,
html body.layout-admin .asta-row-puja .timer-progress{
  stroke-width:5 !important;stroke-linecap:round !important;
  filter:drop-shadow(0 0 3px rgba(255,201,122,.95))
         drop-shadow(0 0 9px rgba(var(--sc-ambra),.75))
         drop-shadow(0 0 22px rgba(255,150,40,.4)) !important;
  transition:stroke-dashoffset .9s linear !important;
}
/* la ghiera a tacche: il vetro spento dietro al tubo */
html body #puja-panel-slot .timer-ring circle:first-of-type,
html body.layout-admin .asta-row-puja .timer-ring circle:first-of-type{
  stroke:rgba(var(--sc-ambra),.34) !important;stroke-width:2 !important;
}
html body #puja-panel-slot .timer-ring circle:nth-of-type(2),
html body.layout-admin .asta-row-puja .timer-ring circle:nth-of-type(2){
  stroke:rgba(var(--sc-carta),.05) !important;stroke-width:5 !important;
}
html body #puja-panel-slot .timer-number,
html body.layout-admin .asta-row-puja .timer-number{
  font-family:Archivo,sans-serif !important;font-weight:900 !important;
  font-variation-settings:'wdth' 106 !important;font-variant-numeric:tabular-nums !important;
  color:#FFE9C9 !important;
  text-shadow:0 0 2px #FFF6E8, 0 0 10px rgba(var(--sc-ambra),.8), 0 0 26px rgba(255,150,40,.45) !important;
}
html body .timer-label-text{
  font-family:'Space Mono',monospace !important;letter-spacing:.22em !important;
  text-transform:uppercase !important;color:var(--sc-tenue) !important;
}

/* ultimi secondi: il tubo sta per saltare */
html body .timer-ring-container.urgent{animation:none !important}
html body #puja-panel-slot .timer-ring-container.urgent .timer-progress,
html body.layout-admin .asta-row-puja .timer-ring-container.urgent .timer-progress{
  filter:drop-shadow(0 0 3px rgba(255,150,140,.95))
         drop-shadow(0 0 10px rgba(var(--sc-brace),.85))
         drop-shadow(0 0 26px rgba(var(--sc-brace),.5)) !important;
  animation:neon-crisi 1.1s steps(1,end) infinite !important;
}
html body #puja-panel-slot .timer-ring-container.urgent .timer-number,
html body.layout-admin .asta-row-puja .timer-ring-container.urgent .timer-number{
  color:#FFD9D4 !important;
  text-shadow:0 0 2px #FFF, 0 0 10px rgba(var(--sc-brace),.9), 0 0 28px rgba(var(--sc-brace),.55) !important;
  animation:neon-crisi 1.1s steps(1,end) infinite !important;
}
@keyframes neon-crisi{
  0%,100%{opacity:1}
  62%{opacity:1}
  66%{opacity:.42}
  70%{opacity:1}
  86%{opacity:.55}
  90%{opacity:1}
}

/* ═══════════════════════════════════════════════════════════════════
   MOVIMENTO
   Nessuna animazione nuova richiede JavaScript: si agganciano ai
   punti che l'app già tocca da sola —  renderChiamata() ricostruisce
   la carta (quindi le animazioni ripartono a ogni rilancio) e
   updateTimer() mette e toglie la classe .urgent.
   ═══════════════════════════════════════════════════════════════════ */

/* il prezzo sale da sotto a ogni rilancio, con un lampo di luce */
html body #puja-panel-slot .cc-offerta,
html body.layout-admin .asta-row-puja .cc-offerta{
  animation:prezzo-sale .46s cubic-bezier(.16,.9,.24,1) both !important;
}
@keyframes prezzo-sale{
  0%  {transform:translateY(38%);opacity:0;filter:blur(5px)}
  55% {opacity:1;filter:blur(0)}
  100%{transform:translateY(0);opacity:1;text-shadow:0 8px 34px rgba(0,0,0,.6)}
}

/* la carta chiamata entra: niente rimbalzo elastico, una scivolata
   secca. Sostituisce l'animazione precedente, che a ogni rilancio
   faceva "saltare" tutta la scena. */
html body .card-enter{
  animation:carta-entra .34s cubic-bezier(.2,.85,.25,1) both !important;
}
@keyframes carta-entra{
  0%  {opacity:.35;transform:translateY(6px)}
  100%{opacity:1;transform:translateY(0)}
}

/* il ritratto del giocatore prende luce quando arriva */
html body #puja-panel-slot .cc-avatar{animation:ritratto-luce .7s ease-out both !important}
@keyframes ritratto-luce{
  0%  {opacity:0;transform:translateY(-50%) scale(.97);filter:brightness(.3)}
  100%{opacity:1;transform:translateY(-50%) scale(1);filter:brightness(1)}
}
html body.layout-admin .asta-row-puja .cc-avatar{animation:ritratto-luce-admin .7s ease-out both !important}
@keyframes ritratto-luce-admin{
  0%  {opacity:0;filter:brightness(.3)}
  100%{opacity:1;filter:brightness(1)}
}

/* assegnato: la scena si spegne sul verde del banco */
html body .chiamata-card.assegnata{animation:chiuso-verde .5s ease-out both !important}
@keyframes chiuso-verde{
  0%  {transform:scale(1.012)}
  100%{transform:scale(1)}
}
html body .chiamata-card.assegnata .cc-esito{
  font-family:Archivo,sans-serif !important;font-weight:900 !important;
  font-variation-settings:'wdth' 70 !important;text-transform:uppercase !important;
  letter-spacing:.06em !important;color:#5FCFA6 !important;
  animation:esito-cade .34s cubic-bezier(.2,1.6,.4,1) both !important;
}
@keyframes esito-cade{
  0%  {transform:scale(2.2) rotate(-6deg);opacity:0}
  60% {opacity:1}
  100%{transform:scale(1) rotate(-3deg);opacity:1}
}

/* la miccia pulsa piano finché l'asta è aperta */
html body #puja-panel-slot::after{animation:miccia-viva 2.6s ease-in-out infinite}
@keyframes miccia-viva{
  0%,100%{opacity:1}
  50%{opacity:.72}
}

/* ── chi ha fretta, o chi non vuole movimento ── */
@media(prefers-reduced-motion:reduce){
  html body .asta-header-title,
  html body .home-title,
  html body .timer-progress,
  html body .timer-ring-container.urgent .timer-progress,
  html body .timer-ring-container.urgent .timer-number,
  html body #puja-panel-slot .cc-offerta,
  html body.layout-admin .asta-row-puja .cc-offerta,
  html body .card-enter,
  html body #puja-panel-slot .cc-avatar,
  html body.layout-admin .asta-row-puja .cc-avatar,
  html body .chiamata-card.assegnata,
  html body .chiamata-card.assegnata .cc-esito,
  html body #puja-panel-slot::after{
    animation:none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   LE MATERIE DEL LOCALE
   Finora la sala era fatta solo di luce. Qui arrivano le superfici:
   il legno del bancone (venatura appena accennata, mai un motivo
   riconoscibile), il riflesso del vetro sul piano lucidato, e l'ottone
   del corrimano sotto l'insegna. Tutto a bassissimo contrasto: si
   devono sentire, non vedere.
   ═══════════════════════════════════════════════════════════════════ */

/* il legno: venatura verticale irregolare, quasi invisibile (scoped serata/default) */
html:not([data-tema]) body .panel-budget,
html[data-tema="serata"] body .panel-budget,
html:not([data-tema]) body #mio-panel,
html[data-tema="serata"] body #mio-panel,
html:not([data-tema]) body .admin-panel,
html[data-tema="serata"] body .admin-panel,
html:not([data-tema]) body .tabs-panel,
html[data-tema="serata"] body .tabs-panel{
  background-image:
    repeating-linear-gradient(93deg,
      rgba(255,232,200,.016) 0 2px, transparent 2px 6px,
      rgba(0,0,0,.028) 6px 9px,  transparent 9px 17px,
      rgba(255,232,200,.010) 17px 18px, transparent 18px 26px),
    linear-gradient(180deg, rgba(11,9,8,.62), rgba(8,7,6,.72)) !important;
}

/* il piano del tavolo: legno + un riflesso di vetro che lo attraversa (scoped serata/default) */
html:not([data-tema]) body #puja-panel-slot,
html[data-tema="serata"] body #puja-panel-slot,
html[data-tema="serata"] body.layout-partecipante #puja-panel-slot,
html:not([data-tema]) body.layout-partecipante #puja-panel-slot,
html:not([data-tema]) body.layout-admin .asta-row-puja,
html[data-tema="serata"] body.layout-admin .asta-row-puja{
  background-image:
    linear-gradient(104deg,
      transparent 34%, rgba(255,246,232,.030) 45%, rgba(255,246,232,.055) 50%,
      rgba(255,246,232,.022) 55%, transparent 66%),
    repeating-linear-gradient(93deg,
      rgba(255,232,200,.014) 0 2px, transparent 2px 7px,
      rgba(0,0,0,.030) 7px 10px, transparent 10px 19px),
    radial-gradient(42% 130% at 20% -14%, rgba(var(--sc-ambra),.20), transparent 62%),
    radial-gradient(52% 120% at 102% 118%, rgba(28,91,69,.34), transparent 60%),
    linear-gradient(180deg, rgba(26,21,18,.96), rgba(12,10,9,.97)) !important;
}
html:not([data-tema]) body[data-fase="finale"] #puja-panel-slot,
html[data-tema="serata"] body[data-fase="finale"] #puja-panel-slot{
  background-image:
    linear-gradient(104deg,
      transparent 34%, rgba(255,236,232,.028) 45%, rgba(255,236,232,.05) 50%,
      rgba(255,236,232,.02) 55%, transparent 66%),
    repeating-linear-gradient(93deg,
      rgba(255,232,200,.014) 0 2px, transparent 2px 7px,
      rgba(0,0,0,.030) 7px 10px, transparent 10px 19px),
    radial-gradient(46% 130% at 20% -14%, rgba(var(--sc-brace),.26), transparent 62%),
    radial-gradient(52% 120% at 102% 118%, rgba(28,91,69,.20), transparent 60%),
    linear-gradient(180deg, rgba(30,19,17,.96), rgba(13,10,10,.97)) !important;
}

/* l'ottone: il corrimano sotto l'insegna, come il poggiapiedi del bancone
   (scoped a serata/default — bar ha il suo in html[data-tema="bar"] body .asta-header) */
html:not([data-tema]) body .asta-header,
html[data-tema="serata"] body .asta-header{position:relative}
html:not([data-tema]) body .asta-header::after,
html[data-tema="serata"] body .asta-header::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(140,106,52,0) 0%, rgba(201,151,75,.55) 12%, rgba(232,190,118,.85) 30%,
    rgba(201,151,75,.5) 52%, rgba(232,190,118,.8) 74%, rgba(201,151,75,.5) 90%,
    rgba(140,106,52,0) 100%);
  box-shadow:0 1px 5px rgba(201,151,75,.28);
}

/* ═══════════════════════════════════════════════════════════════════
   RIEPILOGO SQUADRE — una riga per squadra, non tre
   Prima ogni squadra occupava tre righe impilate (nome+crediti,
   barra, conteggi). Su dodici squadre diventava un muro. Ora la
   riga e' una sola, come una comanda: pallino, nome, conteggi in
   piccolo, crediti in fondo. La barra del budget scende sotto,
   spessa un pixel, come un sottolineato.
   ═══════════════════════════════════════════════════════════════════ */
html body #budget-bar .sidebar-squadra{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  grid-template-areas:
    "pallino nome crediti"
    ". conteggi conteggi" !important;
  align-items:center !important;
  column-gap:6px !important;row-gap:0px !important;
  padding:4px 8px 5px !important;position:relative !important;
  border-bottom:1px solid rgba(var(--sc-carta),.07) !important;
}
/* i figli di .sq-top entrano nella riga del padre, cosi' si possono ordinare */
html body #budget-bar .sq-top{display:contents !important}
html body #budget-bar .sq-dot-online{order:1;flex:0 0 auto;font-size:.65rem !important;opacity:.75}
html body #budget-bar .sq-nome{
  order:2;flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.85rem !important;
}
html body #budget-bar .sq-bottom{
  order:3;flex:0 0 auto;margin:0 !important;
  font-family:'Space Mono',monospace !important;font-size:.78rem !important;
  letter-spacing:.02em !important;color:var(--sc-tenue) !important;white-space:nowrap;
}
html body #budget-bar .sq-crediti{
  order:4;flex:0 0 auto;min-width:40px;text-align:right;
  font-size:1.15rem !important;
}
html body #budget-bar .budget-progress{
  order:5;position:absolute !important;left:10px;right:10px;bottom:2px;
  height:1px !important;margin:0 !important;background:rgba(var(--sc-carta),.06) !important;
}
html body #budget-bar .sq-portieri,
html body #budget-bar .sq-svincoli{font-size:.78rem !important}

/* ═══════════════════════════════════════════════════════════════════
   Il nome del giocatore continuava ad andare a capo: il badge del
   ruolo gli rubava la riga. Ora il badge sta SOPRA, come un occhiello,
   e il nome ha tutta la colonna per se'.
   ═══════════════════════════════════════════════════════════════════ */
html body #puja-panel-slot .cc-nome-row{
  flex-direction:column !important;align-items:flex-start !important;
  gap:7px !important;flex-wrap:nowrap !important;
}
html body #puja-panel-slot .cc-nome{
  white-space:nowrap !important;width:100% !important;
  overflow:hidden !important;text-overflow:ellipsis !important;
}

@media(prefers-reduced-motion:reduce){
  html body .asta-header::after{box-shadow:none}
}

/* ═══════════════════════════════════════════════════════════════════
   LA CLESSIDRA
   Via l'anello di progresso: al suo posto una clessidra da tavolo, in
   vetro con le ghiere in ottone, la sabbia illuminata dalla lampada.
   La forma e' un solo pseudo-elemento ritagliato con clip-path; il
   livello della sabbia arriva dalla variabile --sabbia (1 piena, 0
   vuota) che clessidra.js copia dall'avanzamento gia' calcolato
   dall'app. Sotto i cinque secondi la sabbia si arrossa e il getto
   accelera.
   ═══════════════════════════════════════════════════════════════════ */

/* l'anello SVG sparisce: resta solo come sorgente del dato */
html body #puja-panel-slot .timer-ring,
html body.layout-admin .asta-row-puja .timer-ring{display:none !important}

html body #puja-panel-slot .timer-ring-container,
html body.layout-admin .asta-row-puja .timer-ring-container{
  --sabbia:1;
  --vetro:rgba(var(--sc-carta),.055);
  --ottone:linear-gradient(180deg,#E8BE76,#C9974B 55%,#8C6A34);
  --granello:var(--sc-ambra-alta);
  display:flex !important;flex-direction:row !important;align-items:center !important;
  justify-content:flex-start !important;gap:16px !important;
  position:relative !important;padding:0 !important;
  background:none !important;border:none !important;box-shadow:none !important;
  transform: none !important;
}

/* la clessidra vera e' un SVG (clessidra.js): qui solo misura e getto */
html body #puja-panel-slot .clessidra,
html body.layout-admin .asta-row-puja .clessidra{
  flex:0 0 auto !important;width:72px !important;height:auto !important;
  display:block !important;overflow:visible !important;
}
html body #puja-panel-slot .cls-getto,
html body.layout-admin .asta-row-puja .cls-getto{
  animation:sabbia-scorre .7s linear infinite;transform-origin:50% 0;
}
@keyframes sabbia-scorre{
  0%  {opacity:.35;transform:scaleY(.7)}
  45% {opacity:1;  transform:scaleY(1)}
  100%{opacity:.35;transform:scaleY(.7)}
}

/* la cifra accanto alla clessidra, non dentro */
html body #puja-panel-slot .timer-inner,
html body.layout-admin .asta-row-puja .timer-inner{
  position:static !important;transform:none !important;
  display:flex !important;flex-direction:column !important;align-items:flex-start !important;
  width:auto !important;height:auto !important;
}

/* ultimi secondi: la sabbia si arrossa e il getto accelera */
html body #puja-panel-slot .timer-ring-container.urgent,
html body.layout-admin .asta-row-puja .timer-ring-container.urgent{
  --granello:#FF8A7A;
}
html body .timer-ring-container.urgent .clessidra .cls-sabbia-alta,
html body .timer-ring-container.urgent .clessidra .cls-sabbia-bassa,
html body .timer-ring-container.urgent .clessidra .cls-getto{
  fill:#E2503E !important;
}
html body .timer-ring-container.urgent .clessidra{
  filter:drop-shadow(0 0 7px rgba(var(--sc-brace),.45)) !important;
}
html body .timer-ring-container.urgent .cls-getto{animation-duration:.34s !important}

@media(max-width:900px){
  html body #puja-panel-slot .timer-ring-container::before{width:50px;height:72px}
  html body #puja-panel-slot .timer-ring-container::after{left:24px;top:38px;height:22px}
}

@media(prefers-reduced-motion:reduce){
  html body #puja-panel-slot .timer-ring-container::after,
  html body.layout-admin .asta-row-puja .timer-ring-container::after{animation:none !important}
}

/* ═══════════════════════════════════════════════════════════════════
   FIX: in vista Admin, tra ~900px e ~1240px, .rilancio-box finiva
   interamente FUORI dal viewport (misurato: x=931 su schermo di 950px,
   bordo destro a 1809px). Bug preesistente, non introdotto dal tema —
   ma l'Admin e' chi conduce l'asta: senza quei bottoni non puo'
   rilanciare, quindi si chiude qui.
   Causa: i due figli della riga restano sulla stessa linea (il
   flex-wrap non ha effetto a quella larghezza) ed entrambi rivendicano
   la larghezza piena, sforando. Invece di insistere sul ritorno a capo
   si danno misure che stanno dentro: la carta prende lo spazio che
   avanza, il box dei bottoni una larghezza fissa.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width:901px) and (max-width:1240px){
  html body.layout-admin .asta-row-puja .card-timer-group{
    flex:1 1 0% !important;min-width:0 !important;overflow:hidden !important;
  }
  html body.layout-admin .asta-row-puja .rilancio-box{
    position:static !important;
    flex:0 0 244px !important;width:244px !important;max-width:244px !important;
    left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;
  }
  html body.layout-admin .asta-row-puja .btn-rilancia{width:100% !important}
  html body.layout-admin .asta-row-puja .inp-rilancio{min-width:0 !important}
}

/* ═══════════════════════════════════════════════════════════════════
   Ritratto e nome piu' grandi (richiesta esplicita).
   Con il prezzo che scende sotto il nome, la colonna del nome passa da
   ~129px a tutta la larghezza utile della carta: solo cosi' un nome
   lungo (Kvaratskhelia) ci sta senza essere tagliato.
   ═══════════════════════════════════════════════════════════════════ */
html body #puja-panel-slot .cc-avatar{
  width:178px !important;height:226px !important;
}
html body #puja-panel-slot .cc-header{
  flex:0 0 auto !important;width:100% !important;min-width:0 !important;
}
html body #puja-panel-slot .cc-nome-row{width:100% !important;align-self:stretch !important}
html body #puja-panel-slot .cc-nome{
  /* 15cqw = 15% della COLONNA DEL NOME (.cc-info), non della sala: vedi
     "IL NOME MISURA LA SUA COLONNA" piu' sotto per il perche' del 15. */
  font-size:clamp(1.05rem,15cqw,3.4rem) !important;
  white-space:normal !important;overflow:visible !important;text-overflow:clip !important;
}
/* Chi sta offrendo e' un dato, non decorazione: se non ci sta su una riga si va
   a capo, non si taglia coi puntini (misurato a 1280px: la casella dava 160px a
   un testo che ne chiede 180, e "Real Cazzuola" diventava "Real Caz…"). */
html body #puja-panel-slot .cc-offerente{
  white-space:normal !important;overflow:visible !important;text-overflow:clip !important;
}
html body #puja-panel-slot .cc-body{width:100% !important;flex:0 0 auto !important}

/* vista Admin: la carta e' piu' stretta, quindi crescita piu' contenuta */
html body.layout-admin .asta-row-puja .cc-avatar{
  width:124px !important;height:158px !important;
}
/* il ritratto e' posizionato in assoluto: allargandolo va allargato
   anche l'incavo della carta, altrimenti copre il nome (misurato:
   bordo destro del ritratto a 159px, nome che partiva da 153px) */
html body.layout-admin .asta-row-puja .chiamata-card{
  padding-left:154px !important;min-height:170px !important;
}
html body.layout-admin .asta-row-puja .cc-nome{
  /* Era clamp(...,2.5vw,...): il vw misura la finestra, non la colonna — con
     Anteprima aperta la finestra non cambia ma la colonna si dimezza, quindi il
     nome restava enorme in uno spazio ridotto e (con white-space:normal, niente
     limite di riga) andava a capo lettera per lettera invece di restare leggibile.
     cqw misura invece #asta-main-col (container "sala", dichiarato piu' sotto),
     la larghezza vera. white-space:nowrap+ellipsis come tutte le altre regole
     di .cc-nome in Admin (mai state a rischio di questo bug) invece di
     white-space:normal, che qui non aveva una vera gestione multi-riga sotto. */
  font-size:clamp(1.15rem,4.2cqw,2.7rem) !important;
  white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BUG: in vista Admin il nome della squadra nel riepilogo collassava a
   larghezza 0 (misurato: w=0 su "Inter Nazionale" a 1440px) — le colonne
   sono strette e i conteggi, non comprimibili, si prendevano tutto.
   Il nome e' l'informazione principale: ora e' lui a resistere, e sono
   i conteggi a cedere per primi.
   ═══════════════════════════════════════════════════════════════════ */
/* Il nome e' l'informazione principale, ma non puo' spaccare la griglia. 
   Torna a una riga con puntini sospensivi se non ci sta. I conteggi stanno sotto. */
html body #budget-bar .sidebar-squadra{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  grid-template-areas:
    "pallino nome crediti"
    ". conteggi conteggi" !important;
  align-items:center !important;
  column-gap:6px !important;row-gap:2px !important;
  padding:4px 8px 5px !important;position:relative !important;
  border-bottom:1px solid rgba(var(--sc-carta),.07) !important;
}
html body #budget-bar .sq-dot-online{grid-area:pallino !important}
html body #budget-bar .sq-nome{
  grid-area:nome !important;min-width:0 !important;max-width:100% !important;
  overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;
  font-size:.82rem !important; line-height:1 !important;
}
html body #budget-bar .sq-crediti{grid-area:crediti !important;justify-self:end !important; line-height:1 !important;}
html body #budget-bar .sq-bottom{
  grid-area:conteggi !important;min-width:0 !important;margin:0 !important;
  justify-self:start !important;font-size:.76rem !important;letter-spacing:.01em !important;
  overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;
  line-height:1 !important;
}
html body #budget-bar .sq-portieri,
html body #budget-bar .sq-svincoli{font-size:.76rem !important}
/* la barra del budget resta un filetto in fondo alla riga */
html body #budget-bar .budget-progress{bottom:1px !important;left:8px !important;right:0 !important}

/* ═══════════════════════════════════════════════════════════════════
   LA SALA SI STRINGE — reflow reale quando Anteprima e' aperta

   Anteprima non e' un pannello sopra la pagina: e' una colonna sorella
   di .asta-main-col dentro .asta-live-layout (vedi DECISIONS.md).
   Quando si apre, quindi, la FINESTRA non cambia di un pixel — cambia
   solo la colonna dell'asta. Tutto il responsive del progetto e' fatto
   di @media sulla viewport, percio' non scattava mai. Misurato prima:
     finestra 1400 -> colonna 924 -> .chiamata-card larga 206px con
     206px di padding sinistro = testo largo ZERO ("SOMMARIVA" spezzato
     su 13 righe da una lettera), .asta-row-panels alta 1473px e le tab
     a y=1527 su una finestra alta 900 — irraggiungibili, perche'
     #screen-asta e' height:100vh + overflow:hidden.

   Il pezzo decisivo del fix e' in app.js: forzaVisibilitaRilancioMobile()
   scriveva stili inline !important (che nessun CSS puo' battere) in base
   a window.innerWidth. Ora guarda la larghezza vera della colonna, quindi
   con il drawer aperto la puja passa davvero alla composizione impilata.
   Qui sotto ci sono le PROPORZIONI di quella composizione, decise sulla
   larghezza reale del contenitore invece che su quella della finestra.

   Il contenitore parte da 769px in su perche' sotto i 768px .rilancio-box
   diventa position:fixed (barra d'azione mobile) e `container-type` la
   ancorerebbe alla colonna invece che alla finestra. Sotto quella soglia
   vale il layout mobile esistente, Anteprima compresa (che a 760px
   diventa una tab normale — decisione gia' presa, non toccata).
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width:769px){
  html body #asta-main-col{container-type:inline-size;container-name:sala}
}

/* ── COMPATTA — colonna < 1200px ────────────────────────────────────
   Primo cambio strutturale: "il tuo conto" smette di essere una colonna
   fissa da 296px accanto al tavolo e diventa una fascia sotto. Solo
   questo restituisce alla puja circa 300px di larghezza. La scena resta
   orizzontale — ritratto e nome a sinistra, prezzo a destra, clessidra
   accanto — ma con misure proporzionate alla colonna. */
@container sala (max-width:1200px){

  html body.layout-partecipante .asta-row-panels{
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-areas:"tavolo" "conto" "squadre" !important;
    row-gap:10px !important;padding:10px !important;
  }
  /* i tetti da @media(min-width:1500px) di style.css ragionano sulla
     finestra: con il drawer aperto la colonna e' molto piu' stretta di
     cosi', e quei 320px lasciavano mezza riga vuota */
  html body.layout-partecipante .asta-row-panels>#mio-panel,
  html body.layout-partecipante .asta-row-panels>.panel-budget,
  html body.layout-partecipante .asta-row-panels>.puja-panel-slot{
    max-width:none !important;flex:1 1 auto !important;
  }

  /* il conto: una fascia orizzontale, non piu' una colonna alta */
  html body.layout-partecipante .asta-row-panels>#mio-panel{
    min-height:0 !important;padding:14px 20px !important;
    border-radius:2px !important;border-left:1px solid rgba(var(--sc-carta),.10) !important;
    flex-direction:row !important;flex-wrap:wrap !important;
    align-items:center !important;justify-content:space-between !important;
    gap:14px 24px !important;
  }
  html body #mio-panel .mio-panel-header{
    flex:0 0 auto !important;flex-direction:row !important;align-items:baseline !important;
    gap:12px !important;padding-bottom:0 !important;border-bottom:none !important;
  }
  html body #mio-panel .crediti-badge{font-size:1.9rem !important}
html body #mio-panel .slot-chip { font-size: .85rem !important; }
html body #mio-panel .slot-chip span { font-size: .95rem !important; }

  html body #mio-panel .slot-counter{
    flex:1 1 auto !important;display:flex !important;flex-wrap:wrap !important;
    gap:6px 20px !important;justify-content:flex-start !important;
  }
  html body #mio-panel .mio-panel-actions{flex:0 0 auto !important;display:flex !important;gap:8px !important}

  /* il tavolo */
  html body #puja-panel-slot{
    min-height:0 !important;padding:20px !important;gap:20px !important;
    flex-direction:row !important;align-items:center !important;
  }
  /* style.css impila card e clessidra sotto i 1200px di FINESTRA: qui la
     finestra e' larga, e' la colonna a essere stretta, e a queste misure
     stanno ancora benissimo affiancate */
  html body #puja-panel-slot .card-timer-group{
    flex-direction:row !important;flex-wrap:nowrap !important;align-items:center !important;
    flex:1 1 auto !important;min-width:0 !important;width:auto !important;
    gap:20px !important;padding-right:20px !important;padding-bottom:0 !important;
    border-right:1px solid rgba(var(--sc-carta),.10) !important;border-bottom:none !important;
    margin-bottom:0 !important;
  }
  /* la carta usa la larghezza che ha: nome a sinistra, prezzo a destra */
  html body #puja-panel-slot .chiamata-card{
    flex-direction:row !important;align-items:center !important;
    justify-content:space-between !important;flex-wrap:wrap !important;
    padding:0 0 0 132px !important;min-height:150px !important;gap:10px 22px !important;
  }
  html body #puja-panel-slot .cc-header{flex:1 1 200px !important}
  html body #puja-panel-slot .cc-body{
    flex:0 0 auto !important;align-items:flex-end !important;text-align:right !important;
  }
  html body #puja-panel-slot .cc-offerta-box{align-items:flex-end !important}
  html body #puja-panel-slot .cc-avatar{width:112px !important;height:146px !important}
  html body #puja-panel-slot .cc-nome{font-size:clamp(1.05rem,15cqw,1.9rem) !important}
  html body #puja-panel-slot .cc-meta{margin-top:8px !important}
  html body #puja-panel-slot .cc-offerta{
    font-size:clamp(2.4rem,6.4cqw,4rem) !important;white-space:nowrap !important;
  }
  html body #puja-panel-slot .cc-offerta-label{margin-top:6px !important}
  html body #puja-panel-slot .cc-offerente{margin-top:6px !important}
  html body #puja-panel-slot .clessidra{width:56px !important}
  html body #puja-panel-slot .timer-number{font-size:2.2rem !important}
  html body #puja-panel-slot .timer-ring-container{gap:10px !important}
  html body #puja-panel-slot .rilancio-box{flex:0 0 226px !important;width:226px !important}
  html body #puja-panel-slot .btn-rilancia{height:62px !important;font-size:1.16rem !important;padding:0 16px !important}
  html body #puja-panel-slot .btn-rilancia::after{font-size:1.34rem !important;padding-left:12px !important;margin-left:12px !important}
  html body #puja-panel-slot .btn-quick{height:44px !important}

  /* gli amici al tavolo: due colonne invece di quattro */
  html body #budget-bar{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)) !important;gap:0 14px !important}
  /* colonne strette: il layout a 2 righe è già il default, non serve sovrascriverlo */
  html body.layout-partecipante .asta-row-panels>.panel-budget{padding:12px 16px 14px !important}
}

/* ── IMPILATA — colonna < 900px ─────────────────────────────────────
   Sotto questa soglia la scena non ci sta piu' in orizzontale: ritratto
   e dati sopra, clessidra al centro, pulsantiera a tutta larghezza. E'
   la stessa composizione del telefono, ed e' la stessa soglia che usa
   forzaVisibilitaRilancioMobile() in app.js — CSS e JS dicono la stessa
   cosa nello stesso punto, invece di contraddirsi. */
@container sala (max-width:900px){
  html body #puja-panel-slot{
    flex-direction:column !important;align-items:stretch !important;
    padding:18px !important;gap:14px !important;
  }
  html body #puja-panel-slot .card-timer-group{
    flex-direction:column !important;align-items:stretch !important;width:100% !important;
    flex:0 0 auto !important;gap:14px !important;
    border-right:none !important;padding-right:0 !important;
    padding-bottom:14px !important;border-bottom:1px solid rgba(var(--sc-carta),.10) !important;
  }
  /* la carta resta in riga (nome a sinistra, prezzo a destra) fin quando
     ci sta davvero: impilarla qui lasciava mezza carta vuota e la faceva
     crescere in altezza per niente */
  html body #puja-panel-slot .chiamata-card{
    padding-left:116px !important;min-height:0 !important;gap:10px 18px !important;
  }
  html body #puja-panel-slot .cc-avatar{width:100px !important;height:130px !important}
  html body #puja-panel-slot .cc-nome{font-size:clamp(1.05rem,15cqw,1.7rem) !important}
  html body #puja-panel-slot .cc-offerta{font-size:clamp(2.4rem,10cqw,3.8rem) !important}
  /* la clessidra sotto la scena: al centro, non appesa a sinistra */
  html body #puja-panel-slot .timer-ring-container{
    flex-direction:row !important;align-items:center !important;
    justify-content:center !important;gap:14px !important;width:100% !important;
  }
  html body #puja-panel-slot .timer-inner{align-items:flex-start !important}
  html body #budget-bar{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)) !important;gap:0 10px !important}
}

/* ── STRETTISSIMA — colonna < 620px ─────────────────────────────────
   Ultimo scalino prima del layout mobile vero e proprio. Il ritratto si
   rimpicciolisce e le squadre tornano in colonna unica: nessun dato
   sparisce, cambia solo quanto spazio occupa. */
@container sala (max-width:620px){
  /* qui la riga non regge piu': nome sopra, prezzo sotto */
  html body #puja-panel-slot .chiamata-card{
    flex-direction:column !important;align-items:flex-start !important;
    justify-content:center !important;padding-left:98px !important;
  }
  html body #puja-panel-slot .cc-body{
    align-items:flex-start !important;text-align:left !important;width:100% !important;
  }
  html body #puja-panel-slot .cc-offerta-box{align-items:flex-start !important}
  html body #puja-panel-slot .cc-avatar{width:84px !important;height:110px !important}
  html body #puja-panel-slot .cc-nome{font-size:clamp(1rem,15cqw,1.5rem) !important}
  html body #puja-panel-slot .cc-offerta{font-size:clamp(2.1rem,12cqw,3.2rem) !important}
  html body #puja-panel-slot .clessidra{width:46px !important}
  html body #puja-panel-slot .timer-number{font-size:2rem !important}
  html body #budget-bar{grid-template-columns:minmax(0,1fr) !important}
  html body.layout-partecipante .asta-row-panels>#mio-panel{padding:12px 14px !important;gap:10px 16px !important}
  html body #mio-panel .crediti-badge{font-size:1.6rem !important}
}

/* ── LO SCROLL ──────────────────────────────────────────────────────
   Misurato: .asta-row-panels e' flex-shrink:0 dentro #screen-asta, che
   e' height:100vh + overflow:hidden. Appena la parte alta cresce — e in
   colonna stretta cresce sempre, le squadre passano da 3 righe a 6+ —
   .asta-row-tabs viene spinta fuori dalla finestra e non esiste nessuno
   scroll capace di raggiungerla: le tab non erano "piccole", erano
   irraggiungibili.

   La colonna principale diventa quindi lei stessa l'area che scorre —
   lo stesso schema che il layout mobile usa gia' (`#screen-asta.active
   {height:auto;overflow-y:auto}` in style.css). Le tab restano un blocco
   alto abbastanza da essere usabile, e dentro di esse continua a scorrere
   solo .tab-content, come sempre. Due aree di scorrimento in tutto — la
   pagina e la tab aperta — non una catena annidata. */

/* ═══════════════════════════════════════════════════════════════════
   IL NOME MISURA LA SUA COLONNA, E IL RITRATTO SEGUE LA CARTA

   Bug segnalato: in vista Partecipante a 1280px il nome del giocatore
   andava a capo in mezzo alla parola. Misurato: "KVARATSKHELIA" su 3
   righe nei temi scuri e su 5 in "lavagna". Non era un difetto di un
   tema: era di tutti e quattro.

   La causa e' uno SCALINO. Appena la sala supera i 1200px, .asta-row-panels
   passa da una colonna a due (la lista squadre si affianca alla puja) e la
   carta CROLLA da 596px a 285. Nello stesso istante la carta entra nella
   fascia larga, che le mette il ritratto grande: padding-left 206px su una
   carta di 285 lascia 79px al nome, con la font tarata su 4.4cqw della
   SALA, cioe' 54px. Un nome da 336px in 79px di colonna: da qui le 5 righe.
   La soglia c'era, ma misurava la sala mentre il problema era la carta.

   Due correzioni, nessuna delle quali inventa numeri nuovi:

   1) La font del nome ora si misura su .cc-info (il container "nomecol"
      dichiarato piu' su), non sulla sala. 15cqw non e' un numero a caso:
      "KVARATSKHELIA" occupa circa 6.2 volte la sua font-size in Archivo
      condensato e 6.5 in Caveat, quindi 15% della colonna x 6.5 = 97.5%
      della colonna — il nome piu' lungo che l'app mostra ci sta sempre su
      UNA riga, a qualunque larghezza e in tutti e quattro i temi, senza
      una tabella di valori da tenere allineata. I tetti massimi per fascia
      restano quelli di prima: cambia da cosa si parte, non dove si arriva.

   2) Il ritratto scende con la carta invece che con la sala, riusando le
      misure che le fasce strette gia' avevano (100/112px). Le due fasce qui
      sotto sembrano fuori scala rispetto a quella sopra i 1200 — ed e'
      voluto: e' proprio li' che la carta e' piu' STRETTA, per lo scalino
      della griglia descritto sopra.

   Misurato dopo (finestra 1280, con il riquadro di rilancio aperto): una
   riga sola in tutti e quattro i temi, con margine, e la cifra dell'offerta
   che non sborda piu' dalla carta. A 390, 1000 e 1920px non cambia un pixel
   rispetto a prima. */
@container sala (min-width:1201px) and (max-width:1260px){
  html body #puja-panel-slot .cc-avatar{width:100px !important;height:130px !important}
  html body #puja-panel-slot .chiamata-card{padding-left:116px !important;min-height:150px !important}
  html body #puja-panel-slot .cc-offerta{font-size:clamp(2rem,4.6cqw,5.6rem) !important}
}
@container sala (min-width:1261px) and (max-width:1400px){
  html body #puja-panel-slot .cc-avatar{width:112px !important;height:146px !important}
  html body #puja-panel-slot .chiamata-card{padding-left:132px !important;min-height:170px !important}
  html body #puja-panel-slot .cc-offerta{font-size:clamp(2.2rem,5.2cqw,5.6rem) !important}
}
@container sala (min-width:1401px) and (max-width:1530px){
  html body #puja-panel-slot .cc-avatar{width:140px !important;height:178px !important}
  html body #puja-panel-slot .chiamata-card{padding-left:166px !important;min-height:200px !important}
}

@container sala (max-width:1200px){
  html body.layout-partecipante #asta-main-col{
    overflow-y:auto !important;overflow-x:hidden !important;
  }
  html body.layout-partecipante .asta-row-tabs{
    flex:0 0 auto !important;min-height:clamp(320px,54vh,600px) !important;
  }
  /* la lista squadre non deve mangiarsi tutta la pagina quando sono 12:
     si ferma e scorre al suo interno, come fa gia' fuori dal tema */
  html body.layout-partecipante .asta-row-panels>.panel-budget{
    max-height:min(28vh,240px) !important;overflow-y:auto !important;
  }
}

/* Il drawer di Anteprima si fermava all'altezza del suo contenuto
   (.asta-live-layout e' align-items:flex-start): con la panchina piena la
   coda finiva sotto il bordo della finestra, senza modo di arrivarci. Ora
   si allunga quanto la sala e scorre al suo interno — `overflow-y:auto`
   ce l'aveva gia', gli mancava un'altezza. */
@media (min-width:761px){
  html body #tab-anteprima.ant-drawer.drawer-open{align-self:stretch !important;max-height:100% !important}
}

/* ═══════════════════════════════════════════════════════════════════
   MATTINA AL BANCO — "Cuoio", la versione chiara

   Non e' il tema scuro schiarito: e' il banco visto di giorno. Pergamena
   per i piani, cuoio per la testata e le cornici, verde bosco riservato
   SOLO alle cifre di credito (il denaro sul tavolo) — mai a superfici
   larghe ne' a testo generico. Il rosso resta uno stato.

   Le regole di composizione (griglie, misure, container query) sono
   una sola serie per tutti e due i temi: qui cambiano solo le materie,
   cioe' i fondi a gradiente che il tema scuro scrive a mano e che
   nessuna variabile puo' capovolgere da sola.
   ═══════════════════════════════════════════════════════════════════ */

/* ── L'ambiente: pergamena, luce da vetrina ── */
html[data-tema="cuoio"] body{background:#F3E7D0 !important}
html[data-tema="cuoio"] .pitch-bg{
  /* Foto vera di pergamena con impronte di pallone (fornita dall'utente), non piu' la
     foto del bar sfumata via filtri per sembrare carta. */
  background-color:#F3E7D0 !important;
  background-image:
    radial-gradient(52% 44% at 22% -6%, rgba(107,68,35,.10), transparent 64%),
    radial-gradient(66% 60% at 104% 106%, rgba(47,107,63,.08), transparent 62%),
    url('/img/backgrounds/fondo-cuoio.jpeg?v=1') !important;
  background-size:100% 100%, 100% 100%, cover !important;
  background-position:center, center, center !important;
  background-repeat:no-repeat, no-repeat, no-repeat !important;
  filter:none !important;
}
html[data-tema="cuoio"] ::selection{background:rgba(107,68,35,.24);color:#2B1B10}

/* ── La testata: cuoio scuro, anche di giorno — e' il banco, non la sala ── */
html[data-tema="cuoio"] .asta-header{
  background:linear-gradient(180deg,#6B4423 0%,#4A2E17 100%) !important;
  border-bottom:1px solid rgba(0,0,0,.35) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 6px 18px rgba(58,36,20,.30) !important;
}
/* Il logo di giorno resta cuoio inciso su pergamena: crema, niente alone. */
html[data-tema="cuoio"] body .asta-header-title,
html[data-tema="cuoio"] body .home-title{
  color:#F2E4C9 !important;-webkit-text-fill-color:#F2E4C9 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.4) !important;
  animation:none !important;
}
html[data-tema="cuoio"] .asta-header-email{color:rgba(242,228,201,.72) !important}
html[data-tema="cuoio"] .btn-sound,
html[data-tema="cuoio"] .asta-header-right .btn-secondary{
  background:#F2E4C9 !important;color:#4A2E17 !important;
  border:1px solid rgba(0,0,0,.22) !important;border-radius:10px !important;
}
html[data-tema="cuoio"] .btn-sound:hover,
html[data-tema="cuoio"] .asta-header-right .btn-secondary:hover{color:#6B4423 !important;border-color:#6B4423 !important}
html[data-tema="cuoio"] .home-header{
  background:linear-gradient(180deg,#6B4423 0%,#4A2E17 100%) !important;
  border-radius:0 0 18px 18px;
  box-shadow:0 6px 18px rgba(58,36,20,.28);
}
html[data-tema="cuoio"] .home-header .btn-logout-link{color:rgba(242,228,201,.85) !important}
html[data-tema="cuoio"] .home-header .btn-logout-link:hover{color:#F2E4C9 !important}
/* "Porta d'ingresso" (home/login/lobby/fine asta): .card e' scuro fisso
   per il tema serale (html body .card, riga ~854) — di giorno diventa
   pergamena, altrimenti resta buio sotto la testata di cuoio chiara. */
html[data-tema="cuoio"] body .card{
  background:linear-gradient(180deg, #FAF2E3, #F0E3C8) !important;
  border:1px solid rgba(58,36,20,.14) !important;
}
html[data-tema="cuoio"] body .home-logo{filter:none !important}

/* ── I piani: pergamena chiara ── */
html[data-tema="cuoio"] .panel-budget,
html[data-tema="cuoio"] .mio-panel,
html[data-tema="cuoio"] .admin-panel,
html[data-tema="cuoio"] .tabs-panel{
  background:linear-gradient(180deg, rgba(250,242,227,.97), rgba(243,231,208,.97)) !important;
  border:1px solid rgba(58,36,20,.14) !important;
  box-shadow:0 1px 2px rgba(58,36,20,.06), 0 10px 24px rgba(58,36,20,.08) !important;
}

/* ── Il tavolo della puja: pergamena con cornice di cuoio ──
   Il fondo/bordo "normale" vive SOLO nella sezione materie piu' sotto (un'unica fonte di
   verita'): questa regola c'era anche qui, ma essendo identica su bordo/ombra e piu' povera
   sul fondo, in vista Partecipante batteva quella giusta per specificita' (il branch
   `body.layout-partecipante #puja-panel-slot` ha una classe in piu' di `body #puja-panel-slot`
   nella sezione materie) — bug reale trovato dall'utente ("la lavagna non si vede"), non solo
   estetico. Resta solo lo stato urgente, che non ha equivalente piu' sotto. */
html[data-tema="cuoio"] body.puja-urgente #puja-panel-slot{
  background:
    radial-gradient(46% 130% at 17% -16%, rgba(168,58,42,.14), transparent 62%),
    radial-gradient(52% 120% at 101% 118%, rgba(47,107,63,.06), transparent 60%),
    linear-gradient(180deg, #FAF2E3, #F2DAD3) !important;
  border-color:#A83A2A !important;
}
/* la miccia in alto */
html[data-tema="cuoio"] body #puja-panel-slot::before{background:rgba(58,36,20,.12) !important}
html[data-tema="cuoio"] body #puja-panel-slot::after{
  background:#6B4423 !important;box-shadow:none !important;
  transform: none !important;
}
html[data-tema="cuoio"] body.puja-urgente #puja-panel-slot::after{background:#A83A2A !important;box-shadow:none !important}

/* il conto sul tavolo */
html[data-tema="cuoio"] body.layout-partecipante .asta-row-panels>#mio-panel{
  background:
    radial-gradient(86% 110% at 104% 116%, rgba(47,107,63,.10), transparent 62%),
    linear-gradient(180deg, #FAF2E3, #F0E3C8) !important;
  border:1px solid rgba(58,36,20,.14) !important;
  box-shadow:0 1px 2px rgba(58,36,20,.06), 0 16px 36px rgba(58,36,20,.14) !important;
}
html[data-tema="cuoio"] body #mio-panel::before{background:rgba(58,36,20,.12) !important}

/* ── Il ritratto: cornice di cuoio CUCITA, come nel mockup ─────────────
   La prima versione aveva solo due anelli pieni (box-shadow): l'utente ha
   fatto notare che nel mockup la cornice ha una cucitura a vista, non un
   bordo liscio. Aggiunta con `outline` (proprieta' a parte da border, non
   consuma i due pseudo-elementi ::before/::after gia' usati sotto per il
   riflesso) tratteggiato, incassato dentro la fascia di cuoio allargata
   apposta per fargli spazio (prima 2px, ora 7px). */
html[data-tema="cuoio"] body #puja-panel-slot .cc-avatar{
  background:linear-gradient(180deg,#FAF2E3,#EDDCBC) !important;
  border:2px solid #4A2E17 !important;border-radius:14px !important;
  outline:2px dashed rgba(246,236,217,.6) !important;outline-offset:4px !important;
  box-shadow:0 0 0 3px #F6ECD9, 0 0 0 10px #8F5A2C, 0 8px 20px rgba(58,36,20,.28) !important;
}
html[data-tema="cuoio"] body #puja-panel-slot .cc-avatar-img{
  filter:contrast(1.04) brightness(1.02) sepia(.08) !important;
}
html[data-tema="cuoio"] body #puja-panel-slot .cc-avatar::after{
  background:linear-gradient(202deg, rgba(107,68,35,.30) 0%, rgba(168,58,42,.08) 46%, rgba(47,107,63,.22) 100%) !important;
}
html[data-tema="cuoio"] body #puja-panel-slot .cc-avatar::before{
  background:linear-gradient(180deg, rgba(255,255,255,.28) 0%, transparent 38%, rgba(58,36,20,.22) 100%) !important;
}

/* ── Le ombre di testo del tema scuro, su pergamena, sporcano ── */
html[data-tema="cuoio"] body #puja-panel-slot .cc-nome,
html[data-tema="cuoio"] body #puja-panel-slot .cc-offerta,
html[data-tema="cuoio"] body #puja-panel-slot .timer-number,
html[data-tema="cuoio"] body.puja-urgente #puja-panel-slot .timer-number{text-shadow:none !important}

/* ── Il denaro sul tavolo: l'unico verde del tema, e solo qui ── */
html[data-tema="cuoio"] body #puja-panel-slot .cc-offerta,
html[data-tema="cuoio"] body.layout-admin .asta-row-puja .cc-offerta{
  color:#2F6B3F !important;
}
html[data-tema="cuoio"] body #puja-panel-slot .cc-offerta-box,
html[data-tema="cuoio"] body.layout-admin .asta-row-puja .cc-offerta-box{
  border-color:#2F6B3F !important;
  background:linear-gradient(160deg, rgba(47,107,63,.14) 0%, rgba(47,107,63,.04) 100%) !important;
  box-shadow:0 0 24px rgba(47,107,63,.14), inset 0 1px 0 rgba(255,255,255,.5) !important;
}
html[data-tema="cuoio"] .sq-crediti{color:#2F6B3F !important;text-shadow:none !important}

/* ── La lastra dell'azione: inchiostro su pergamena ── */
html[data-tema="cuoio"] body #puja-panel-slot .btn-rilancia{
  box-shadow:0 10px 22px rgba(58,36,20,.22) !important;
}
html[data-tema="cuoio"] body.puja-urgente #puja-panel-slot .btn-rilancia{
  box-shadow:0 10px 24px rgba(168,58,42,.30) !important;
}
html[data-tema="cuoio"] body #puja-panel-slot .quick-bids-row,
html[data-tema="cuoio"] body #puja-panel-slot .inp-rilancio{
  background:#FAF2E3 !important;
}
html[data-tema="cuoio"] body #puja-panel-slot .btn-quick,
html[data-tema="cuoio"] body #puja-panel-slot .btn-manuale{color:#5C4A3A !important}

/* ── La clessidra: il vetro va disegnato al contrario ──
   L'SVG di clessidra.js costruisce riflessi e profilo con bianco a bassa
   opacita': su fondo chiaro sparirebbero. Qui gli stessi tratti passano
   a inchiostro di cuoio. La sabbia resta cuoio: e' l'accento del tema. */
html[data-tema="cuoio"] .clessidra use[stroke]{stroke:rgba(58,36,20,.36) !important}
html[data-tema="cuoio"] .clessidra use[fill^="url(#cls-vetro"]{fill:rgba(58,36,20,.05) !important}
html[data-tema="cuoio"] .clessidra path[stroke="#fff"]{stroke:rgba(58,36,20,.16) !important}
html[data-tema="cuoio"] .clessidra{filter:none !important}

/* ── Le tab: la striscia verde del banco ── */
html[data-tema="cuoio"] .tabs-nav{
  background:linear-gradient(180deg, #34774B 0%, #2A5D34 100%) !important;
  border-bottom:1px solid rgba(0,0,0,.22) !important;
}
html[data-tema="cuoio"] .tab-btn{color:rgba(255,255,255,.72) !important}
html[data-tema="cuoio"] .tab-btn.active{color:#FFFFFF !important;background:rgba(255,255,255,.14) !important}
html[data-tema="cuoio"] .storico-list li{border-bottom:1px solid rgba(58,36,20,.10) !important;color:#2B1B10 !important}
html[data-tema="cuoio"] .tab-content{color:#2B1B10}

/* ── Le squadre al tavolo ── */
html[data-tema="cuoio"] .sidebar-squadra.mia-squadra{background:rgba(58,36,20,.05) !important;border-left-color:#2B1B10 !important}
html[data-tema="cuoio"] .sidebar-squadra.offerente-attuale{background:rgba(107,68,35,.12) !important;border-left-color:#6B4423 !important}
html[data-tema="cuoio"] .sidebar-squadra:hover{background:rgba(58,36,20,.04) !important}

/* ── Il drawer di Anteprima ── */
html[data-tema="cuoio"] #tab-anteprima.ant-drawer{
  background:linear-gradient(180deg, rgba(250,242,227,.98), rgba(243,231,208,.98)) !important;
  border:1px solid rgba(58,36,20,.14) !important;
}
html[data-tema="cuoio"] .ant-drawer-close{background:#F0E3C8 !important;border-color:rgba(58,36,20,.20) !important;color:#5C4A3A !important}

/* ── Bottoni ── */
html[data-tema="cuoio"] .btn-primary{background:#2B1B10 !important;color:#F6ECD9 !important}
html[data-tema="cuoio"] .btn-secondary{
  background:#FAF2E3 !important;color:#3A2A1D !important;border:1px solid rgba(58,36,20,.20) !important;
}
html[data-tema="cuoio"] .btn-secondary:hover{border-color:#6B4423 !important;color:#6B4423 !important}

/* ── La luce di fondo della pagina: di giorno non c'e' faro ── */
html[data-tema="cuoio"] body::before{opacity:.35}

/* ── Le cifre del cronometro e i timbri: nati per brillare al buio ──
   Misurato: #FFE9C9 (il crema dell'insegna) su pergamena chiara fa un
   contrasto insufficiente. Di giorno la cifra e' inchiostro di cuoio e
   il tubo non e' acceso. */
html[data-tema="cuoio"] body #puja-panel-slot .timer-number,
html[data-tema="cuoio"] body.layout-admin .asta-row-puja .timer-number{
  color:#2B1B10 !important;text-shadow:none !important;
}
html[data-tema="cuoio"] body.puja-urgente #puja-panel-slot .timer-number,
html[data-tema="cuoio"] body #puja-panel-slot .timer-ring-container.urgent .timer-number{
  color:#A83A2A !important;text-shadow:none !important;
}
html[data-tema="cuoio"] body .timbro-preso span,
html[data-tema="cuoio"] body .chiamata-card.assegnata .cc-esito{
  color:#2F6B3F !important;
}
html[data-tema="cuoio"] body .timbro-preso span{border-color:#2F6B3F !important}
/* l'ottone della clessidra, di giorno, e' piu' scuro del vetro che lo tiene */
html[data-tema="cuoio"] body #puja-panel-slot .timer-ring-container,
html[data-tema="cuoio"] body.layout-admin .asta-row-puja .timer-ring-container{
  --ottone:linear-gradient(180deg,#B98038,#8F5A2C 55%,#5C3719);
}

/* ── Le materie del bancone, di giorno ───────────────────────────────
   Il legno e il riflesso di vetro sono scritti come `background-image`
   su selettori con id (`html body #mio-panel`, `html body
   #puja-panel-slot`): battono qualunque regola piu' generica anche a
   parita' di !important. Qui gli stessi selettori, con lo stesso peso,
   dicono la versione chiara — venatura di cuoio appena accennata sulla
   pergamena, e il riflesso che diventa un velo invece di una luce. */
html[data-tema="cuoio"] body .panel-budget,
html[data-tema="cuoio"] body #mio-panel,
html[data-tema="cuoio"] body .admin-panel,
html[data-tema="cuoio"] body .tabs-panel{
  background-color:#FAF2E3 !important;
  background-image:
    repeating-linear-gradient(93deg,
      rgba(58,36,20,.010) 0 2px, transparent 2px 6px,
      rgba(58,36,20,.016) 6px 9px,  transparent 9px 17px,
      rgba(58,36,20,.007) 17px 18px, transparent 18px 26px),
    linear-gradient(180deg, rgba(250,242,227,.97), rgba(243,231,208,.97)) !important;
}
html[data-tema="cuoio"] body #puja-panel-slot,
html[data-tema="cuoio"] body.layout-admin .asta-row-puja{
  background-color:#FAF2E3 !important;
  background-image:
    linear-gradient(104deg,
      transparent 34%, rgba(58,36,20,.020) 45%, rgba(58,36,20,.034) 50%,
      rgba(58,36,20,.015) 55%, transparent 66%),
    repeating-linear-gradient(93deg,
      rgba(58,36,20,.008) 0 2px, transparent 2px 7px,
      rgba(58,36,20,.016) 7px 10px, transparent 10px 19px),
    radial-gradient(42% 130% at 20% -14%, rgba(107,68,35,.14), transparent 62%),
    radial-gradient(52% 120% at 102% 118%, rgba(47,107,63,.08), transparent 60%),
    linear-gradient(180deg, #FAF2E3, #F0E3C8) !important;
  border:2px solid #6B4423 !important;
  box-shadow:0 0 0 4px #F6ECD9, 0 1px 2px rgba(58,36,20,.06), 0 16px 36px rgba(58,36,20,.14) !important;
}
html[data-tema="cuoio"] body[data-fase="finale"] #puja-panel-slot{
  background-color:#FAF2E3 !important;
  background-image:
    linear-gradient(104deg,
      transparent 34%, rgba(58,36,20,.020) 45%, rgba(58,36,20,.034) 50%,
      rgba(58,36,20,.015) 55%, transparent 66%),
    repeating-linear-gradient(93deg,
      rgba(58,36,20,.008) 0 2px, transparent 2px 7px,
      rgba(58,36,20,.016) 7px 10px, transparent 10px 19px),
    radial-gradient(46% 130% at 20% -14%, rgba(168,58,42,.16), transparent 62%),
    radial-gradient(52% 120% at 102% 118%, rgba(47,107,63,.06), transparent 60%),
    linear-gradient(180deg, #FAF2E3, #F2DAD3) !important;
  border-color:#A83A2A !important;
}
/* il filo di ottone/cuoio sotto la testata: la cucitura del banco */
html[data-tema="cuoio"] body .asta-header::after{
  background:linear-gradient(90deg,
    rgba(143,90,44,0) 0%, rgba(143,90,44,.55) 12%, rgba(143,90,44,.85) 30%,
    rgba(143,90,44,.5) 52%, rgba(143,90,44,.8) 74%, rgba(143,90,44,.5) 90%,
    rgba(143,90,44,0) 100%) !important;
  box-shadow:0 0 8px rgba(143,90,44,.4) !important;
}

/* La cassa delle decisioni dell'Admin: `html body .admin-conferma-box` porta un
   fondo scuro fisso senza scoping per tema, quindi sulla pergamena restava un
   rettangolo grigio con sopra l'inchiostro di cuoio. Bug preesistente, trovato
   mentre si sistemava lo stesso punto in Sala Giochi. */
html[data-tema="cuoio"] body .admin-conferma-box{
  background:rgba(250,242,227,.92) !important;
  border:1px solid rgba(107,68,35,.38) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAVAGNA AL NEON — terzo tema, scuro

   Non e' "Serata d'Asta" ritinta: e' un locale diverso. Lavagna nera e
   gesso al posto del legno, cornice in ottone attorno alla testata (la
   struttura fisica, non un accento diffuso), due tubi al neon per gli
   accenti — ciano per la struttura (bordi, cornici, stato attivo, il
   ruolo che altrove ha l'ambra/il cuoio), magenta riservato al brand e
   al denaro (nome del locale, cifra di offerta/credito). Il rosso resta
   solo allarme, mai confuso col magenta. Le regole di composizione sono
   le stesse di sempre: qui cambiano solo le materie.
   ═══════════════════════════════════════════════════════════════════ */

/* ── L'ambiente: la lavagna nera, polvere di gesso ── */
html[data-tema="lavagna"] body{background:#0B0B0F !important}
/* Non e' la foto del bar scurita come negli altri due temi: qui il locale e' un altro —
   una lavagna vera, gesso e feltrini, mai una fotografia. Grana ottenuta con piccoli
   radial-gradient ripetuti (polvere di gesso) + un pattern diagonale a bassissimo
   contrasto (i segni del cancellino), stessa tecnica gia' usata per la pergamena di
   Cuoio, qui bianco su nero invece di bruno su crema. */
html[data-tema="lavagna"] .pitch-bg{
  background-color:#0B0B0F !important;
  /* Non piu' un disegno CSS: la foto vera di una lavagna fornita dall'utente, con solo due
     bagliori colorati sovrapposti (ciano/magenta, i due ruoli neon del tema) e una vignetta
     scura ai margini per far risaltare il centro. */
  background-image:
    radial-gradient(52% 44% at 22% -6%, rgba(34,211,238,.10), transparent 64%),
    radial-gradient(66% 60% at 104% 106%, rgba(255,60,172,.08), transparent 62%),
    radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.35) 100%),
    url("../img/backgrounds/pizarra-lavagna.jpeg?v=2") !important;
  background-size:100% 100%, 100% 100%, 100% 100%, cover !important;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-position:center, center, center, center !important;
  filter:none !important;
}
/* I fregi del mockup — cancellino, bicchiere da cocktail, scintilla — sono stati TOLTI su
   richiesta dell'utente: alle misure a cui comparivano davvero (16-44px) non si capiva cosa
   fossero, e una sagoma illeggibile e' rumore, non atmosfera. Erano sei disegni in cinque
   regole: due qui sullo sfondo di pagina, uno sulla testata (piu' sotto) e tre dentro la carta
   di chiamata (style.css, cercare "lavagna" + .chiamata-card). Se un giorno si volessero
   rimettere, vanno ridisegnati piu' grandi o non rimessi affatto. La lavagna resta caratterizzata
   dalla foto, dai due neon e dal gesso scritto a mano — non le servivano i soprammobili. */
html[data-tema="lavagna"] ::selection{background:rgba(34,211,238,.28);color:#F0F4F8}

/* ── La testata: lavagna incorniciata d'ottone, insegna al neon magenta ── */
html[data-tema="lavagna"] .asta-header{
  background:linear-gradient(180deg,#111318 0%,#050508 100%) !important;
  border-bottom:2px solid #C9A227 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 6px 22px rgba(0,0,0,.6) !important;
}
html[data-tema="lavagna"] body .asta-header-title,
html[data-tema="lavagna"] body .home-title{
  font-family:'Pacifico',var(--font-display) !important;font-style:normal !important;font-weight:400 !important;
  background:none !important;-webkit-text-fill-color:#FF6FC4 !important;color:#FF6FC4 !important;
  text-shadow:0 0 8px rgba(255,60,172,.7), 0 0 22px rgba(255,60,172,.4) !important;
  animation:none !important;letter-spacing:0 !important;
}
html[data-tema="lavagna"] .asta-header-email{color:rgba(240,244,248,.72) !important}
html[data-tema="lavagna"] .btn-sound,
html[data-tema="lavagna"] .asta-header-right .btn-secondary{
  background:#111318 !important;color:#7DE8F7 !important;
  border:1px solid rgba(34,211,238,.4) !important;border-radius:10px !important;
}
html[data-tema="lavagna"] .btn-sound:hover,
html[data-tema="lavagna"] .asta-header-right .btn-secondary:hover{color:#FF6FC4 !important;border-color:#FF6FC4 !important}
html[data-tema="lavagna"] .home-header{
  background:linear-gradient(180deg,#111318 0%,#050508 100%) !important;
  border-radius:0 0 18px 18px;
  border-bottom:2px solid #C9A227;
  box-shadow:0 6px 22px rgba(0,0,0,.55);
}
html[data-tema="lavagna"] .home-header .btn-logout-link{color:rgba(240,244,248,.8) !important}
html[data-tema="lavagna"] .home-header .btn-logout-link:hover{color:#FF6FC4 !important}
html[data-tema="lavagna"] body .card{
  background:linear-gradient(180deg, #111318, #0B0B0F) !important;
  border:1px solid rgba(34,211,238,.22) !important;
}
html[data-tema="lavagna"] body .home-logo{filter:none !important}

/* ── I piani: lavagna scura, filo ciano ── */
html[data-tema="lavagna"] .panel-budget,
html[data-tema="lavagna"] .mio-panel,
html[data-tema="lavagna"] .admin-panel,
html[data-tema="lavagna"] .tabs-panel{
  background:linear-gradient(180deg, rgba(17,19,24,.97), rgba(11,11,15,.97)) !important;
  border:1px solid rgba(34,211,238,.18) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.5) !important;
}

/* ── Il tavolo della puja: lavagna con cornice al neon ciano ──
   Stesso bug/fix della nota gemella in Cuoio qui sopra: il fondo "normale" vive solo nella
   sezione materie piu' sotto, questa regola duplicata batteva quella giusta in vista
   Partecipante per specificita' (una classe in piu' nel branch layout-partecipante). Resta
   solo lo stato urgente. */
html[data-tema="lavagna"] body.puja-urgente #puja-panel-slot{
  background:
    radial-gradient(46% 130% at 17% -16%, rgba(255,45,45,.18), transparent 62%),
    radial-gradient(52% 120% at 101% 118%, rgba(255,60,172,.08), transparent 60%),
    linear-gradient(180deg, #181114, #0B0B0F) !important;
  border-color:#FF2D2D !important;
  box-shadow:0 0 0 4px #050508, 0 0 30px rgba(255,45,45,.30), 0 16px 36px rgba(0,0,0,.5) !important;
}
/* la miccia in alto */
html[data-tema="lavagna"] body #puja-panel-slot::before{background:rgba(34,211,238,.20) !important}
html[data-tema="lavagna"] body #puja-panel-slot::after{
  background:#22D3EE !important;box-shadow:0 0 12px #22D3EE !important;
}
html[data-tema="lavagna"] body.puja-urgente #puja-panel-slot::after{background:#FF2D2D !important;box-shadow:0 0 14px #FF2D2D !important}

/* il conto sul tavolo */
html[data-tema="lavagna"] body.layout-partecipante .asta-row-panels>#mio-panel{
  background:
    radial-gradient(86% 110% at 104% 116%, rgba(255,60,172,.10), transparent 62%),
    linear-gradient(180deg, #111318, #0B0B0F) !important;
  border:1px solid rgba(34,211,238,.18) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 36px rgba(0,0,0,.5) !important;
}
html[data-tema="lavagna"] body #mio-panel::before{background:rgba(34,211,238,.20) !important}

/* ── Il ritratto: cornice al neon ciano, come una foto sotto vetro ── */
html[data-tema="lavagna"] body #puja-panel-slot .cc-avatar{
  background:linear-gradient(180deg,#191C22,#0B0B0F) !important;
  border:2px solid #22D3EE !important;border-radius:14px !important;
  box-shadow:0 0 0 4px #050508, 0 0 0 6px rgba(34,211,238,.35), 0 0 22px rgba(34,211,238,.25) !important;
}
html[data-tema="lavagna"] body #puja-panel-slot .cc-avatar-img{
  filter:contrast(1.08) brightness(.98) saturate(1.05) !important;
}
html[data-tema="lavagna"] body #puja-panel-slot .cc-avatar::after{
  background:linear-gradient(202deg, rgba(34,211,238,.28) 0%, rgba(255,45,45,.06) 46%, rgba(255,60,172,.24) 100%) !important;
}
html[data-tema="lavagna"] body #puja-panel-slot .cc-avatar::before{
  background:linear-gradient(180deg, rgba(255,255,255,.14) 0%, transparent 38%, rgba(0,0,0,.30) 100%) !important;
}

/* ── Il nome del giocatore: gesso col riflesso del tubo ── */
html[data-tema="lavagna"] body #puja-panel-slot .cc-nome{
  color:#F0F4F8 !important;text-shadow:0 0 10px rgba(34,211,238,.35) !important;
}

/* ── Il denaro sul tavolo: l'unico magenta del tema, insieme al brand ── */
html[data-tema="lavagna"] body #puja-panel-slot .cc-offerta,
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .cc-offerta{
  color:#FF6FC4 !important;text-shadow:0 0 12px rgba(255,60,172,.5) !important;
}
html[data-tema="lavagna"] body #puja-panel-slot .cc-offerta-box,
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .cc-offerta-box{
  border-color:#FF3CAC !important;
  background:linear-gradient(160deg, rgba(255,60,172,.14) 0%, rgba(255,60,172,.04) 100%) !important;
  box-shadow:0 0 26px rgba(255,60,172,.18), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
html[data-tema="lavagna"] .sq-crediti{color:#FF6FC4 !important;text-shadow:0 0 8px rgba(255,60,172,.35) !important}

/* ── La lastra dell'azione ── */
html[data-tema="lavagna"] body #puja-panel-slot .btn-rilancia{
  box-shadow:0 0 22px rgba(34,211,238,.30), 0 10px 22px rgba(0,0,0,.4) !important;
}
html[data-tema="lavagna"] body.puja-urgente #puja-panel-slot .btn-rilancia{
  box-shadow:0 0 24px rgba(255,45,45,.35), 0 10px 24px rgba(0,0,0,.4) !important;
}
html[data-tema="lavagna"] body #puja-panel-slot .quick-bids-row,
html[data-tema="lavagna"] body #puja-panel-slot .inp-rilancio{
  background:#111318 !important;
}
html[data-tema="lavagna"] body #puja-panel-slot .btn-quick,
html[data-tema="lavagna"] body #puja-panel-slot .btn-manuale{color:#B8C4D0 !important}

/* ── L'orologio qui non e' una clessidra: e' un anello al neon ──────────
   Gli altri due temi condividono la clessidra (solo i materiali cambiano,
   vedi clessidra.js/MATERIALI) perche' resta coerente con "un oggetto
   fisico sul banco". La lavagna e' un locale diverso: qui torna visibile
   il vecchio anello SVG originale (gia' nel DOM, nascosto altrove da
   `html body ... .timer-ring{display:none}`) ritinto ciano→magenta, e la
   clessidra si nasconde al suo posto. */
html[data-tema="lavagna"] body #puja-panel-slot .timer-ring,
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .timer-ring{
  display:block !important;
}
html[data-tema="lavagna"] body #puja-panel-slot .clessidra,
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .clessidra{
  display:none !important;
}
html[data-tema="lavagna"] #timer-grad-start{stop-color:#22D3EE !important}
html[data-tema="lavagna"] #timer-grad-end{stop-color:#FF3CAC !important}
html[data-tema="lavagna"] body.puja-urgente #timer-grad-start{stop-color:#FF6B6B !important}
html[data-tema="lavagna"] body.puja-urgente #timer-grad-end{stop-color:#FF2D2D !important}
html[data-tema="lavagna"] body #puja-panel-slot .timer-ring-container,
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .timer-ring-container{
  filter:drop-shadow(0 0 10px rgba(34,211,238,.55));
}
html[data-tema="lavagna"] body.puja-urgente #puja-panel-slot .timer-ring-container{
  filter:drop-shadow(0 0 12px rgba(255,45,45,.55));
}
html[data-tema="lavagna"] body #puja-panel-slot .timer-ring circle:first-of-type{
  stroke:rgba(34,211,238,.18) !important;
}
html[data-tema="lavagna"] body #puja-panel-slot .timer-ring circle:nth-of-type(2){
  stroke:rgba(0,0,0,.5) !important;stroke-width:5 !important;
}

/* ── Le tab: bordo magenta, testo ciano ── */
html[data-tema="lavagna"] .tabs-nav{
  background:linear-gradient(180deg, #111318 0%, #0B0B0F 100%) !important;
  border-bottom:2px solid rgba(255,60,172,.5) !important;
}
html[data-tema="lavagna"] .tab-btn{color:#8A96A3 !important}
html[data-tema="lavagna"] .tab-btn.active{color:#7DE8F7 !important;background:rgba(34,211,238,.10) !important}
html[data-tema="lavagna"] .storico-list li{border-bottom:1px solid rgba(240,244,248,.08) !important;color:#F0F4F8 !important}
html[data-tema="lavagna"] .tab-content{color:#F0F4F8}

/* ── Le squadre al tavolo ── */
html[data-tema="lavagna"] .sidebar-squadra.mia-squadra{background:rgba(34,211,238,.06) !important;border-left-color:#7DE8F7 !important}
html[data-tema="lavagna"] .sidebar-squadra.offerente-attuale{background:rgba(34,211,238,.12) !important;border-left-color:#22D3EE !important}
html[data-tema="lavagna"] .sidebar-squadra:hover{background:rgba(240,244,248,.04) !important}

/* ── Il drawer di Anteprima ── */
html[data-tema="lavagna"] #tab-anteprima.ant-drawer{
  background:linear-gradient(180deg, rgba(17,19,24,.98), rgba(11,11,15,.98)) !important;
  border:1px solid rgba(34,211,238,.18) !important;
}
html[data-tema="lavagna"] .ant-drawer-close{background:#191C22 !important;border-color:rgba(34,211,238,.22) !important;color:#B8C4D0 !important}

/* ── Bottoni ── */
html[data-tema="lavagna"] .btn-primary{background:#22D3EE !important;color:#050508 !important}
html[data-tema="lavagna"] .btn-secondary{
  background:#111318 !important;color:#B8C4D0 !important;border:1px solid rgba(34,211,238,.28) !important;
}
html[data-tema="lavagna"] .btn-secondary:hover{border-color:#FF6FC4 !important;color:#FF6FC4 !important}

/* ── Le cifre del cronometro e i timbri: ritinte, non rifatte — restano al buio ── */
html[data-tema="lavagna"] body #puja-panel-slot .timer-number,
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .timer-number{
  color:#7DE8F7 !important;text-shadow:0 0 16px rgba(34,211,238,.4) !important;
}
html[data-tema="lavagna"] body.puja-urgente #puja-panel-slot .timer-number,
html[data-tema="lavagna"] body #puja-panel-slot .timer-ring-container.urgent .timer-number{
  color:#FF2D2D !important;text-shadow:0 0 18px rgba(255,45,45,.5) !important;
}
html[data-tema="lavagna"] body .timbro-preso span,
html[data-tema="lavagna"] body .chiamata-card.assegnata .cc-esito{
  color:#39FF88 !important;text-shadow:0 0 10px rgba(57,255,136,.4) !important;
}
html[data-tema="lavagna"] body .timbro-preso span{border-color:#39FF88 !important}

/* ── Le materie della lavagna: gesso vero, non un accenno ──────────────
   Prima qui c'era la stessa grana leggerissima di Cuoio (opacita' .007-.03):
   sulla pergamena chiara si vedeva, sul nero quasi no — la lavagna sembrava
   plastica scura invece che ardesia. Stessa tecnica (radial-gradient a
   tile multipli per la polvere, riusata da .pitch-bg) ma con opacita' 3-4
   volte piu' alte, apposta per il fondo scuro. */
html[data-tema="lavagna"] body .panel-budget,
html[data-tema="lavagna"] body #mio-panel,
html[data-tema="lavagna"] body .admin-panel,
html[data-tema="lavagna"] body .tabs-panel{
  background-color:#111318 !important;
  background-image:
    linear-gradient(112deg, transparent 5%, rgba(240,244,248,.045) 14%, transparent 26%),
    linear-gradient(120deg, transparent 60%, rgba(240,244,248,.04) 70%, transparent 82%),
    radial-gradient(40% 32% at 22% 26%, rgba(240,244,248,.045), transparent 72%),
    radial-gradient(34% 28% at 76% 66%, rgba(0,0,0,.16), transparent 70%),
    radial-gradient(1px 1px at 15% 25%, rgba(240,244,248,.17), transparent 60%),
    radial-gradient(1px 1px at 55% 65%, rgba(240,244,248,.14), transparent 60%),
    radial-gradient(1px 1px at 80% 20%, rgba(240,244,248,.12), transparent 60%),
    linear-gradient(180deg, rgba(20,22,27,.97), rgba(11,11,15,.97)) !important;
  background-size:100% 100%, 100% 100%, 100% 100%, 100% 100%, 80px 80px, 100px 100px, 120px 120px, cover !important;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, no-repeat !important;
}
html[data-tema="lavagna"] body #puja-panel-slot,
html[data-tema="lavagna"] body.layout-admin .asta-row-puja{
  /* Fondo un filo piu' chiaro (#181B21 non #111318): sul nero pieno anche le sbavature
     luminose restano poco leggibili, serve un grigio ardesia vero perche' ci si veda
     sopra — segnalato dall'utente ("non vedo ancora la lavagna qui"). */
  background-color:#181B21 !important;
  /* Stessa foto vera di .pitch-bg (vedi commento li'), qui con bagliori un filo piu' intensi
     perche' e' il pannello sotto i riflettori della puja. */
  background-image:
    radial-gradient(42% 130% at 20% -14%, rgba(34,211,238,.18), transparent 62%),
    radial-gradient(52% 120% at 102% 118%, rgba(255,60,172,.12), transparent 60%),
    radial-gradient(115% 115% at 50% 50%, transparent 50%, rgba(0,0,0,.3) 100%),
    url("../img/backgrounds/pizarra-lavagna.jpeg?v=2") !important;
  background-size:100% 100%, 100% 100%, 100% 100%, cover !important;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-position:center, center, center, center !important;
  border:2px solid #22D3EE !important;
  box-shadow:0 0 0 4px #050508, 0 0 26px rgba(34,211,238,.22), 0 16px 36px rgba(0,0,0,.5) !important;
}
html[data-tema="lavagna"] body[data-fase="finale"] #puja-panel-slot{
  background-color:#181114 !important;
  background-image:
    radial-gradient(46% 130% at 20% -14%, rgba(255,45,45,.22), transparent 62%),
    radial-gradient(52% 120% at 102% 118%, rgba(255,60,172,.10), transparent 60%),
    radial-gradient(115% 115% at 50% 50%, transparent 50%, rgba(20,0,0,.4) 100%),
    url("../img/backgrounds/pizarra-lavagna.jpeg?v=2") !important;
  background-size:100% 100%, 100% 100%, 100% 100%, cover !important;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-position:center, center, center, center !important;
  border-color:#FF2D2D !important;
}
/* la trave in ottone sotto la testata: la cornice fisica della lavagna */
html[data-tema="lavagna"] body .asta-header::after{
  background:linear-gradient(90deg,
    rgba(201,162,39,0) 0%, rgba(201,162,39,.55) 12%, rgba(201,162,39,.85) 30%,
    rgba(201,162,39,.5) 52%, rgba(201,162,39,.8) 74%, rgba(201,162,39,.5) 90%,
    rgba(201,162,39,0) 100%) !important;
  box-shadow:0 0 8px rgba(201,162,39,.4) !important;
}

/* ── IL GESSO: la mano che scrive sulla lavagna ─────────────────────────
   Ultimo pezzo che tradiva il tema: i caratteri erano quelli degli altri tre
   locali (Archivo/Space Mono, cioe' STAMPA). Su una lavagna si SCRIVE.
   Due mani, con ruoli distinti come i due neon:

   - 'Kalam'  → la scrittura di tutti i giorni: e' il font dell'interfaccia,
                sostituisce Archivo/Space Mono ovunque.
   - 'Caveat' → la mano larga del gesso, riservata alle poche cose grandi e
                corte: nome del giocatore, cifra dell'offerta, cronometro,
                RILANCIA, l'esito. Stesso schema di "Sala Giochi", dove
                'Press Start 2P' fa l'insegna e 'Silkscreen' il resto.

   Perche' Kalam e non una corsiva piu' bella: e' l'unica delle due che regge
   le misure minime dell'app. MISURATO col canvas a 100px, x-height e
   larghezza della stessa stringa:
     Archivo     x 52.6   riga 990px   cifre alte 69.8   "0" largo 56.3
     Space Mono  x 49.6   riga 1285px  cifre alte 71.4   "0" largo 61.2
     Kalam       x 51.1   riga  891px  cifre alte 72.9   "0" largo 51.6
     Caveat      x 35.7   riga  724px  cifre alte 56.3   "0" largo 45.0
   Kalam ha lo stesso occhio di Archivo (51.1 contro 52.6) ed e' piu' STRETTO
   di entrambi: si legge uguale a 8-10px e le viste diffe non si allargano —
   il contrario di quello che era successo con Silkscreen nelle Rose, dove tre
   colonne erano cresciute del 36% (vedi DECISIONS.md). Caveat ha invece
   l'occhio del 32% piu' piccolo: va bene solo dove il testo e' MAIUSCOLO o
   enorme, ed e' il motivo per cui non e' il font di base.

   Restano volutamente NON scritti a mano:
   - l'insegna ('Pacifico'): e' il tubo al neon, non il gesso — unico punto col
     font del brand, vedi DECISIONS.md;
   - il monospazio dove non e' estetica ma allineamento e trascrizione: il link
     da copiare (.link-text), le colonne numeriche della Griglia P/A (.gk-*,
     hanno min-width + text-align) e i <code>. Per questo si ridefiniscono solo
     --font-main e --font-display, MAI --font-mono.

   Perche' servono anche le due liste esplicite e non bastano le variabili: il
   foglio di tema riscrive 'Archivo'/'Space Mono' a mano dentro ~43 regole con
   !important, che una variabile non raggiunge. Le variabili coprono style.css
   (Rose, Storico, Strategie, modali, campi); le liste coprono il tema. */
html[data-tema="lavagna"]{
  --font-main:'Kalam',Archivo,Inter,sans-serif;
  --font-display:'Kalam',Archivo,Outfit,sans-serif;
}

/* la mano larga: solo maiuscole e cifre grandi */
html[data-tema="lavagna"] body #puja-panel-slot .cc-nome,
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .cc-nome,
html[data-tema="lavagna"] body #puja-panel-slot .cc-offerta,
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .cc-offerta,
html[data-tema="lavagna"] body #puja-panel-slot .timer-number,
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .timer-number,
html[data-tema="lavagna"] body #puja-panel-slot .btn-rilancia,
html[data-tema="lavagna"] body #puja-panel-slot .btn-rilancia::after,
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .btn-rilancia,
html[data-tema="lavagna"] body .chiamata-card.assegnata .cc-esito,
html[data-tema="lavagna"] body .timbro-preso span,
html[data-tema="lavagna"] body .card-title,
html[data-tema="lavagna"] body .conferma-titolo{
  font-family:'Caveat','Kalam',Archivo,sans-serif !important;
  /* l'asse 'wdth' e' di Archivo: qui non esiste piu', si azzera per non
     lasciare una dichiarazione che non vuol dire niente */
  font-variation-settings:normal !important;
}

/* la mano di tutti i giorni */
html[data-tema="lavagna"] body #puja-panel-slot .cc-meta,
html[data-tema="lavagna"] body #puja-panel-slot .cc-offerta-label,
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .cc-offerta-label,
html[data-tema="lavagna"] body #puja-panel-slot .cc-strategia-info,
html[data-tema="lavagna"] body #puja-panel-slot .timer-label-text,
html[data-tema="lavagna"] body .timer-label-text,
html[data-tema="lavagna"] body #puja-panel-slot .btn-quick,
html[data-tema="lavagna"] body #puja-panel-slot .btn-manuale,
html[data-tema="lavagna"] body #puja-panel-slot .inp-rilancio,
html[data-tema="lavagna"] body #puja-panel-slot .badge-ruolo,
html[data-tema="lavagna"] body #puja-panel-slot .badge-ruolo[class*="r-"],
html[data-tema="lavagna"] body #mio-panel .mio-nome,
html[data-tema="lavagna"] body #mio-panel .crediti-badge,
html[data-tema="lavagna"] body.layout-admin #mio-panel .crediti-badge,
html[data-tema="lavagna"] body .admin-badge,
html[data-tema="lavagna"] body .timbro-preso em,
html[data-tema="lavagna"] body .vivi-chip b,
html[data-tema="lavagna"] body .vivi-chip span,
html[data-tema="lavagna"] body .storico-list li .text-accent,
html[data-tema="lavagna"] body #budget-bar .sq-bottom,
html[data-tema="lavagna"] .panel-budget-hdr,
html[data-tema="lavagna"] .mio-panel-header .mio-nome,
html[data-tema="lavagna"] .admin-badge,
html[data-tema="lavagna"] .sq-nome,
html[data-tema="lavagna"] .sq-crediti,
html[data-tema="lavagna"] .crediti-badge,
html[data-tema="lavagna"] .sq-svincoli,
html[data-tema="lavagna"] .slot-chip,
html[data-tema="lavagna"] .sq-slot,
html[data-tema="lavagna"] .btn,
html[data-tema="lavagna"] .tab-btn,
html[data-tema="lavagna"] .storico-filtro-btn,
html[data-tema="lavagna"] .filtro-btn,
html[data-tema="lavagna"] .asta-header-email{
  font-family:'Kalam',Archivo,sans-serif !important;
  font-variation-settings:normal !important;
}

/* Le cifre che si guardano da lontano — offerta, cronometro, il totale dentro
   RILANCIA — in Caveat nascevano il 19% piu' basse di prima: sono il dato piu'
   importante a schermo, non potevano rimpicciolirsi. `font-size-adjust`
   ridimensiona la font sulla larghezza del suo "0" SENZA toccare nessuna delle
   font-size esistenti, che qui sono responsive (clamp/cqw) e riscriverle a mano
   avrebbe voluto dire rifarle a ogni breakpoint.

   Il valore non e' pero' quello che pareggia Archivo (.563 dell'em): a quel
   punto le cifre SBORDANO dalla riga e .cc-offerta-box, che ha overflow:hidden,
   le taglia a meta' — visto e fotografato in vista Admin. Il motivo e'
   l'interlinea: il foglio base la stringe sotto 1 (.76 nella carta grande, .8
   in Admin) per recuperare spazio, e Caveat ha il corpo molto piu' alto della
   sua parte scritta (1.26em contro cifre alte .575em), quindi la linea di base
   scende. In formula, con k = di quanto si ingrandisce la font, le cifre
   restano dentro la riga finche' `line-height >= 0.76 · k`.
   Da qui la coppia scelta: k = 1.10 (ch-width .495 — cifre il 10% piu' basse
   di Archivo invece del 19%) con interlinea .92, che tiene il limite con circa
   4px di margine e costa 14px di altezza alla carta grande, 7 a quella
   dell'Admin. Tarare piu' su (k 1.156 con interlinea .90) lasciava meno di 1px
   di margine: verificato a schermo che le cifre tornavano a toccare il bordo.
   Dove `font-size-adjust` non e' supportato (Safari < 17) la dichiarazione
   viene semplicemente ignorata: cifre naturali di Caveat, piu' piccole, mai
   tagliate.

   Il tracking negativo invece va a zero: su una grottesca chiude un buco, su
   una scrittura a mano fa collidere lettere gia' inclinate. */
html[data-tema="lavagna"] body #puja-panel-slot .cc-offerta,
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .cc-offerta,
html[data-tema="lavagna"] body #puja-panel-slot .timer-number,
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .timer-number,
html[data-tema="lavagna"] body #puja-panel-slot .btn-rilancia::after{
  font-size-adjust:ch-width 0.495 !important;
  letter-spacing:0 !important;
}
/* e la coda del 7: in Caveat l'inchiostro sborda di .088em oltre la larghezza
   nominale della cifra, e .cc-offerta-box (overflow:hidden) la tagliava di
   netto perche' si dimensiona esattamente su quella larghezza. */
html[data-tema="lavagna"] body #puja-panel-slot .cc-offerta,
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .cc-offerta{
  line-height:.92 !important;padding-right:.1em !important;
}
/* Il nome sta in maiuscolo, e li' Caveat e' alto quanto Archivo (maiuscole .70em
   contro .69em). In LARGHEZZA invece e' un filo piu' ingombrante: misurato sul
   testo davvero impaginato, "KVARATSKHELIA" occupa 6.5 volte la sua font-size
   contro le 6.2 di Archivo a `wdth 62` (che e' condensato, non normale — il
   confronto con Archivo a larghezza piena non vale qui). Un 5% in piu', di cui
   tiene gia' conto il 15cqw con cui il nome misura la sua colonna. Serve solo un
   filo d'interlinea in piu' del .86 di base, perche' la mano larga sale e scende
   piu' della grottesca: sotto .74 le maiuscole uscirebbero sopra la riga. */
html[data-tema="lavagna"] body #puja-panel-slot .cc-nome,
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .cc-nome{
  line-height:.88 !important;letter-spacing:.01em !important;
}


/* ── Vista Admin: il nome finiva sotto la clessidra ──────────────────
   Misurato (1600px, tema scuro, cioe' bug preesistente e non del tema
   chiaro): .cc-info largo 331px dentro una carta che ne lasciava 266,
   quindi "KVARATSKHELIA" sconfinava fino a x=512 mentre la clessidra
   comincia a x=457. Il motivo e' la spartizione dello spazio nel gruppo
   carta+clessidra: la carta prendeva 420px e la clessidra 652 per
   mostrare 150px di contenuto. Ora la clessidra occupa quello che le
   serve e il resto e' della carta: il nome ci sta senza tagli. */
html body.layout-admin .asta-row-puja .timer-ring-container{
  flex:0 0 auto !important;
}
html body.layout-admin .asta-row-puja .chiamata-card{
  flex:1 1 auto !important;min-width:0 !important;max-width:none !important;
}
html body.layout-admin .asta-row-puja .cc-header,
html body.layout-admin .asta-row-puja .cc-info{
  min-width:0 !important;max-width:100% !important;
}
/* Bug trovato con Anteprima aperta + nome lungo: .cc-header e' l'unico figlio
   di .chiamata-card (colonna flex) con flex-shrink concesso (style.css lo mette
   a flex:1 1 auto) — quando badge+prezzo+"In attesa 1a offerta..." non ci stanno
   piu' negli spazio della carta, e' lui a farsi schiacciare, fino quasi a 0px di
   altezza: il nome (dentro) spariva del tutto, ritagliato a una sottile riga.
   flex-shrink:0 + un'altezza minima leggibile spostano il problema sulla carta
   (che puo' crescere, non e' height-capped) invece che sul nome del giocatore. */
html body.layout-admin .asta-row-puja .cc-header{
  flex-shrink:0 !important;min-height:32px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LE TAB HANNO BISOGNO DI ALTEZZA

   Misurato prima: a 1440x900 la riga delle tab riceveva 214px, di cui
   66 di barra — 142px per Rose, Storico, Svincolati e Griglia P/A. A
   1280x800 scendeva a 54px totali: la tab aperta era una fessura da
   28px. Il motivo e' che .asta-row-panels e' flex-shrink:0 e si prende
   quello che le serve, e le tab vivono di resti.

   Ora la riga delle tab ha un'altezza minima garantita, e se la finestra
   non basta e' la colonna a scorrere (lo stesso meccanismo gia' usato
   con Anteprima aperta). Le tab non sono piu' un avanzo.
   ═══════════════════════════════════════════════════════════════════ */
html body.layout-partecipante .asta-row-tabs{
  flex:1 1 auto !important;
  min-height:clamp(420px,46vh,720px) !important;
}
html body.layout-partecipante #asta-main-col{
  overflow-y:auto !important;overflow-x:hidden !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SALA GIOCHI — quarto tema, chiaro

   Non e' Cuoio raffreddato: e' un altro locale. Cuoio e' il banco di
   giorno (pergamena, cuoio, ombre morbide); questo e' il cabinato in
   fondo alla sala — carta stampata a retino, inchiostro spesso, colore
   piatto, cifre a pixel. Le ombre non sono luce: sono un blocco
   d'inchiostro spostato di 6px, come un rilievo di stampa.

   I ruoli sono quelli di sempre: cobalto = accento strutturale (bordi,
   testate, tab attiva, cronometro), oro gettone = SOLO il denaro
   (crediti e offerte), ciliegia = allarme e il tasto RILANCIA, cioe'
   l'unica azione che toglie crediti. Le regole di composizione (griglie,
   misure, container query) restano una serie sola per tutti e quattro i
   temi: qui cambiano solo le materie.

   Due font a pixel, con ruoli distinti: 'Press Start 2P' per le cose
   corte e grandi (insegna, cifre, testate), 'Silkscreen' per tutto il
   resto dell'interfaccia. Il NOME del giocatore resta in Archivo
   apposta: a pixel un "KVARATSKHELIA" non ci starebbe nella carta (c'e'
   gia' un bug storico di sconfinamento del nome, vedi piu' su).
   ═══════════════════════════════════════════════════════════════════ */

/* ── L'ambiente: carta stampata, i raggi della marquee ── */
html[data-tema="sala-giochi"] body{background:var(--sg-fondo) !important}
/* Nessuna fotografia qui, e nessuna immagine nuova da versionare: il retino di
   stampa e i raggi sono due gradienti CSS. E' anche il motivo per cui questo tema
   non ha un `?v=` da alzare sulle immagini (vedi PROJECT.md). */
html[data-tema="sala-giochi"] .pitch-bg{
  background-color:var(--sg-fondo) !important;
  background-image:
    repeating-conic-gradient(from 0deg at 50% 26%, rgba(66,95,196,.05) 0deg 6deg, transparent 6deg 12deg),
    radial-gradient(circle at 1px 1px, rgba(20,16,36,.13) 1px, transparent 1.7px) !important;
  background-size:auto, 12px 12px !important;
  background-repeat:no-repeat, repeat !important;
  background-position:center, 0 0 !important;
  filter:none !important;
}
html[data-tema="sala-giochi"] ::selection{background:rgba(66,95,196,.24);color:var(--text-primary)}

/* ── La testata: l'insegna del cabinato ── */
html[data-tema="sala-giochi"] .asta-header{
  background:var(--sg-carta) !important;
  border-bottom:2px solid var(--text-primary) !important;
  box-shadow:none !important;backdrop-filter:none !important;
}
/* La fascia dipinta sotto la testata — stesso punto d'aggancio della trave in
   ottone di Lavagna, qui i tre colori del cabinato uno accanto all'altro. */
html[data-tema="sala-giochi"] body .asta-header::after{
  background:repeating-linear-gradient(90deg,
    var(--primary) 0 18px, var(--fire) 18px 36px, #E8B038 36px 54px) !important;
  box-shadow:none !important;
  transform: none !important;
}
html[data-tema="sala-giochi"] body .asta-header-title,
html[data-tema="sala-giochi"] body .home-title{
  font-family:'Press Start 2P',var(--font-display) !important;font-style:normal !important;font-weight:400 !important;
  font-size:clamp(.7rem,1.7vw,1.02rem) !important;letter-spacing:.02em !important;line-height:1.4 !important;
  background:none !important;-webkit-text-fill-color:var(--primary) !important;color:var(--primary) !important;
  /* l'ombra a pixel: tre strati pieni, nessuna sfocatura */
  text-shadow:2px 0 0 #E8B038, 2px 2px 0 var(--fire), 4px 4px 0 var(--text-primary) !important;
  animation:none !important;text-transform:uppercase !important;
}
html[data-tema="sala-giochi"] .asta-header-email{
  font-family:Archivo,var(--font-sans) !important;color:#66627C !important;
}
html[data-tema="sala-giochi"] .btn-sound,
html[data-tema="sala-giochi"] .asta-header-right .btn-secondary{
  background:var(--sg-carta2) !important;color:var(--text-primary) !important;
  border:2px solid var(--text-primary) !important;border-radius:0 !important;box-shadow:none !important;
  transform: none !important;
}
html[data-tema="sala-giochi"] .btn-sound:hover,
html[data-tema="sala-giochi"] .asta-header-right .btn-secondary:hover{
  background:#E8B038 !important;color:var(--text-primary) !important;border-color:var(--text-primary) !important;
}
html[data-tema="sala-giochi"] .home-header{
  background:var(--sg-carta) !important;border-radius:0 !important;
  border-bottom:2px solid var(--text-primary) !important;box-shadow:none !important;
  transform: none !important;
}
html[data-tema="sala-giochi"] .home-header .btn-logout-link{color:#4A465E !important}
html[data-tema="sala-giochi"] .home-header .btn-logout-link:hover{color:var(--primary) !important}
html[data-tema="sala-giochi"] body .card{
  background:var(--sg-carta) !important;
  border:2px solid var(--text-primary) !important;border-radius:0 !important;
  box-shadow:3px 3px 0 var(--text-primary) !important;
}
html[data-tema="sala-giochi"] body .home-logo{filter:none !important}

/* ── I piani: piastre bianche con la cornice d'inchiostro ── */
html[data-tema="sala-giochi"] .panel-budget,
html[data-tema="sala-giochi"] .mio-panel,
html[data-tema="sala-giochi"] .admin-panel,
html[data-tema="sala-giochi"] .tabs-panel{
  background:var(--sg-carta) !important;
  border:2px solid var(--text-primary) !important;border-radius:0 !important;
  box-shadow:3px 3px 0 var(--text-primary) !important;
}
/* la testata di ogni piastra e' una targhetta cobalto, come sopra i pulsanti
   di un cabinato */
html[data-tema="sala-giochi"] .panel-budget-hdr{
  font-family:Archivo,var(--font-sans) !important;font-size:.50rem !important;
  letter-spacing:.06em !important;color:#FFFFFF !important;
  background:var(--primary) !important;padding:5px 9px !important;
}
html[data-tema="sala-giochi"] .mio-panel-header .mio-nome,
html[data-tema="sala-giochi"] .admin-badge{
  font-family:Archivo,var(--font-sans) !important;font-size:.46rem !important;
  letter-spacing:.05em !important;color:var(--primary) !important;
}

/* ── Il tavolo della puja: la piastra grande del cabinato ── */
html[data-tema="sala-giochi"] body #puja-panel-slot,
html[data-tema="sala-giochi"] body.layout-admin .asta-row-puja{
  background-color:var(--sg-carta) !important;
  background-image:
    repeating-conic-gradient(rgba(66,95,196,.05) 0% 25%, transparent 0% 50%),
    radial-gradient(circle at 1px 1px, rgba(20,16,36,.10) 1px, transparent 1.7px) !important;
  background-size:8px 8px, 12px 12px !important;
  background-repeat:repeat, repeat !important;
  border:2px solid var(--text-primary) !important;border-radius:0 !important;
  box-shadow:4px 4px 0 var(--text-primary) !important;
}
html[data-tema="sala-giochi"] body.puja-urgente #puja-panel-slot{
  background-color:#FFF3F2 !important;
  border-color:var(--fire) !important;
  box-shadow:4px 4px 0 var(--fire) !important;
}
/* La miccia diventa due nastri: sopra la fascia dipinta (ferma), sotto il tempo
   che si consuma (la stessa larghezza percentuale di sempre, solo ridipinta). */
html[data-tema="sala-giochi"] body #puja-panel-slot::before{
  height:10px !important;
  background:repeating-linear-gradient(115deg,
    var(--primary) 0 12px, var(--sg-carta) 12px 19px, var(--fire) 19px 31px,
    var(--sg-carta) 31px 38px, #E8B038 38px 50px, var(--sg-carta) 50px 57px) !important;
}
html[data-tema="sala-giochi"] body #puja-panel-slot::after{
  top:10px !important;height:5px !important;
  background:var(--primary) !important;box-shadow:none !important;
  transform: none !important;
}
html[data-tema="sala-giochi"] body.puja-urgente #puja-panel-slot::before{
  background:repeating-linear-gradient(115deg,var(--fire) 0 12px,var(--sg-carta) 12px 19px) !important;
}
html[data-tema="sala-giochi"] body.puja-urgente #puja-panel-slot::after{
  background:var(--fire) !important;box-shadow:none !important;
  transform: none !important;
}
html[data-tema="sala-giochi"] body #puja-panel-slot .card-timer-group{
  border-right:3px solid rgba(20,16,36,.14) !important;
}
/* Il conto sul tavolo. Selettore con l'id (non `.mio-panel`) apposta: la regola
   delle materie del tema base (`html body #mio-panel`, la venatura del legno + un
   fondo scuro semitrasparente) ha un id e batteva la versione a sola classe — in
   vista Admin il pannello restava una macchia grigia con sopra il testo scuro
   (segnalato dall'utente). Una regola sola per tutte e due le viste.
   Verificato leggendo getComputedStyle nel browser, non il CSS a occhio. */
/* Due rami, stesse dichiarazioni, una regola sola: il primo serve a battere la
   regola del tema base per la vista Partecipante (`body.layout-partecipante
   .asta-row-panels>#mio-panel`, piu' specifica di due classi), il secondo copre
   la vista Admin, dove quella non matcha. Misurato in browser: con il solo ramo
   corto il pannello tornava scuro in Partecipante. */
html[data-tema="sala-giochi"] body.layout-partecipante .asta-row-panels>#mio-panel,
html[data-tema="sala-giochi"] body #mio-panel{
  background-color:var(--sg-carta) !important;
  background-image:repeating-conic-gradient(rgba(66,95,196,.05) 0% 25%, transparent 0% 50%) !important;
  background-size:8px 8px !important;
  border:2px solid var(--text-primary) !important;border-radius:0 !important;
  box-shadow:3px 3px 0 var(--text-primary) !important;
}
html[data-tema="sala-giochi"] body #mio-panel::before{background:var(--primary) !important}

/* ── Vista Admin: la cassa delle decisioni ──
   `html body .admin-conferma-box` (piu' su in questo file) ha un fondo scuro fisso
   senza scoping per tema: qui restava un rettangolo grigio con sopra testo scuro.
   Stesso difetto in Cuoio, corretto anche li' (sezione MATTINA AL BANCO). */
html[data-tema="sala-giochi"] body .admin-conferma-box{
  background:#FFF6E0 !important;
  border:2px solid var(--text-primary) !important;border-radius:0 !important;
  box-shadow:3px 3px 0 var(--text-primary) !important;
}
html[data-tema="sala-giochi"] body .conferma-info-text{color:#4A465E !important}
html[data-tema="sala-giochi"] body .slot-chip,
html[data-tema="sala-giochi"] body .slot-sub{color:#4A465E !important}

/* ── Il ritratto: una card sotto vetro, angoli vivi ── */
html[data-tema="sala-giochi"] body #puja-panel-slot .cc-avatar{
  background:var(--primary) !important;
  border:2px solid var(--text-primary) !important;border-radius:0 !important;
  box-shadow:3px 3px 0 var(--text-primary) !important;
}
html[data-tema="sala-giochi"] body #puja-panel-slot .cc-avatar-img{
  filter:contrast(1.14) saturate(1.06) !important;
}
html[data-tema="sala-giochi"] body #puja-panel-slot .cc-avatar::after{
  background:linear-gradient(202deg, rgba(66,95,196,.50) 0%, rgba(245,176,26,.10) 55%, rgba(238,43,34,.28) 100%) !important;
}
html[data-tema="sala-giochi"] body #puja-panel-slot .cc-avatar::before{
  background:linear-gradient(180deg, rgba(255,255,255,.22) 0%, transparent 40%, rgba(20,16,36,.32) 100%) !important;
}
html[data-tema="sala-giochi"] body #puja-panel-slot .cc-avatar-svg{opacity:.7 !important}

/* ── Il nome: inchiostro con l'ombra dura cobalto ── */
html[data-tema="sala-giochi"] body #puja-panel-slot .cc-nome{
  color:var(--text-primary) !important;text-shadow:3px 3px 0 rgba(66,95,196,.26) !important;
}
html[data-tema="sala-giochi"] body #puja-panel-slot .cc-meta{
  font-family:Archivo,var(--font-sans) !important;letter-spacing:.08em !important;
  font-size:.68rem !important;color:#4A465E !important;
}
html[data-tema="sala-giochi"] body #puja-panel-slot .cc-offerente,
html[data-tema="sala-giochi"] body #puja-panel-slot .cc-strategia-info{
  font-family:Archivo,var(--font-sans) !important;color:#66627C !important;
}

/* ── Il denaro: l'unico oro del tema ── */
html[data-tema="sala-giochi"] body #puja-panel-slot .cc-offerta,
html[data-tema="sala-giochi"] body.layout-admin .asta-row-puja .cc-offerta{
  font-family:'Press Start 2P',var(--font-display) !important;font-weight:400 !important;
  font-variation-settings:normal !important;
  font-size:2.4rem !important;line-height:1.06 !important;letter-spacing:0 !important;
  color:var(--text-primary) !important;
  text-shadow:3px 3px 0 #E8B038, 5px 5px 0 rgba(20,16,36,.14) !important;
}
html[data-tema="sala-giochi"] body.puja-urgente #puja-panel-slot .cc-offerta{
  text-shadow:3px 3px 0 var(--fire), 5px 5px 0 rgba(20,16,36,.14) !important;
}
html[data-tema="sala-giochi"] body #puja-panel-slot .cc-offerta-label{
  font-family:Archivo,var(--font-sans) !important;font-size:.44rem !important;
  letter-spacing:.1em !important;color:#8A5A05 !important;
}
html[data-tema="sala-giochi"] body.puja-urgente #puja-panel-slot .cc-offerta-label{color:var(--fire) !important}
/* i crediti nella lista squadre: un gettone, non un numero qualsiasi */
html[data-tema="sala-giochi"] body #budget-bar .sq-crediti, html[data-tema="sala-giochi"] .sq-crediti{
  font-family:'Press Start 2P',var(--font-display) !important;font-weight:400 !important;
  font-variation-settings:normal !important;font-size:.45rem !important; padding:4px 4px 3px !important;
  color:var(--text-primary) !important;background:#E8B038 !important;
  border:2px solid var(--text-primary) !important;
  display:inline-block !important;line-height:1 !important;
}
/* "chi sta vincendo ora" resta uno stato della riga, non un colore diverso del
   gettone: stessa distinzione semantica gia' scelta in Cuoio. */
html[data-tema="sala-giochi"] .sidebar-squadra.offerente-attuale .sq-crediti{
  color:var(--text-primary) !important;background:#E8B038 !important;
}
html[data-tema="sala-giochi"] body #mio-panel .crediti-badge{
  font-family:'Press Start 2P',var(--font-display) !important;font-weight:400 !important;
  font-variation-settings:normal !important;
  font-size:1.05rem !important;line-height:1 !important;letter-spacing:0 !important;
  display:inline-block !important;
  color:var(--text-primary) !important;background:#E8B038 !important;
  border:2px solid var(--text-primary) !important;border-radius:0 !important;
  padding:5px 8px 4px !important;
}
html[data-tema="sala-giochi"] .crediti-badge{
  background:#E8B038 !important;border:2px solid var(--text-primary) !important;border-radius:0 !important;
  color:var(--text-primary) !important;font-family:Archivo,var(--font-sans) !important;
  font-weight:400 !important;font-variation-settings:normal !important;font-size:.62rem !important;
}

/* ── Le squadre al tavolo: il tabellone dei record ── */
html[data-tema="sala-giochi"] .sidebar-squadra{
  border-left:4px solid transparent !important;
  border-bottom:2px solid rgba(20,16,36,.10) !important;
}
html[data-tema="sala-giochi"] .sidebar-squadra.mia-squadra{
  background:rgba(66,95,196,.09) !important;border-left-color:var(--primary) !important;
}
html[data-tema="sala-giochi"] .sidebar-squadra.offerente-attuale{
  background:rgba(245,176,26,.20) !important;border-left-color:#E8B038 !important;
}
html[data-tema="sala-giochi"] .sidebar-squadra.critica{border-left-color:var(--fire) !important}
html[data-tema="sala-giochi"] .sidebar-squadra:hover{background:rgba(20,16,36,.04) !important}
html[data-tema="sala-giochi"] .sq-nome{
  font-family:Archivo,var(--font-sans) !important;font-weight:700 !important; text-shadow:none !important;
  font-variation-settings:normal !important;letter-spacing:.02em !important;color:#4A465E !important;
  font-size:.72rem !important;
}
html[data-tema="sala-giochi"] .sidebar-squadra.mia-squadra .sq-nome{color:var(--text-primary) !important}
html[data-tema="sala-giochi"] .sq-svincoli,
html[data-tema="sala-giochi"] .slot-chip,
html[data-tema="sala-giochi"] .sq-slot{
  font-family:Archivo,var(--font-sans) !important;color:#66627C !important;
  font-size:.58rem !important;
}
/* La barra dei crediti diventa una barra energia: stesso dato, stessi stati
   ok/warn/crit, solo tagliata a tacche invece che continua. */
html[data-tema="sala-giochi"] .budget-progress{
  height:9px !important;border-radius:0 !important;
  background:rgba(20,16,36,.10) !important;border:2px solid var(--text-primary) !important;
}
html[data-tema="sala-giochi"] .budget-progress-fill{background-color:transparent !important}
html[data-tema="sala-giochi"] .budget-progress-fill.ok{
  background-image:repeating-linear-gradient(90deg,var(--primary) 0 6px,transparent 6px 8px) !important;
}
html[data-tema="sala-giochi"] .budget-progress-fill.warn{
  background-image:repeating-linear-gradient(90deg,#E8B038 0 6px,transparent 6px 8px) !important;
}
html[data-tema="sala-giochi"] .budget-progress-fill.crit{
  background-image:repeating-linear-gradient(90deg,var(--fire) 0 6px,transparent 6px 8px) !important;
}

/* ── La pulsantiera ── */
html[data-tema="sala-giochi"] body #puja-panel-slot .quick-bids-row,
html[data-tema="sala-giochi"] body #puja-panel-slot .manual-bid-row{
  background:var(--sg-carta) !important;border:2px solid var(--text-primary) !important;border-radius:0 !important;
}
html[data-tema="sala-giochi"] body #puja-panel-slot .btn-quick,
html[data-tema="sala-giochi"] body #puja-panel-slot .btn-manuale{
  font-family:Archivo,var(--font-sans) !important;font-weight:700 !important; text-shadow:none !important;
  font-variation-settings:normal !important;color:var(--text-primary) !important;
}
html[data-tema="sala-giochi"] body #puja-panel-slot .btn-quick:hover{background:#E8B038 !important}
html[data-tema="sala-giochi"] body #puja-panel-slot .btn-quick + .btn-quick,
html[data-tema="sala-giochi"] body #puja-panel-slot .btn-manuale{
  border-left:2px solid var(--text-primary) !important;
}
html[data-tema="sala-giochi"] body #puja-panel-slot .inp-rilancio{
  background:var(--sg-carta2) !important;color:var(--text-primary) !important;
  font-family:Archivo,var(--font-sans) !important;
}
/* Il tasto rosso del cabinato. Il rosso qui non e' solo allarme ma anche
   l'azione — e' l'unico bottone che toglie crediti; il resto del rosso resta
   riservato agli ultimi secondi, che si distinguono perche' cambia TUTTA la
   piastra (cornice, ombra, nastri, cronometro) e il tasto pulsa. */
html[data-tema="sala-giochi"] body #puja-panel-slot .btn-rilancia{
  background:var(--fire) !important;color:#FFFFFF !important;
  font-family:'Press Start 2P',var(--font-display) !important;font-weight:400 !important;
  font-variation-settings:normal !important;
  font-size:.48rem !important;letter-spacing:.02em !important;
  padding:0 12px !important;
  border:2px solid var(--text-primary) !important;border-radius:0 !important;
  box-shadow:3px 3px 0 var(--text-primary) !important;
  text-shadow:2px 2px 0 rgba(20,16,36,.45) !important;
}
html[data-tema="sala-giochi"] body #puja-panel-slot .btn-rilancia::after{
  font-family:'Press Start 2P',var(--font-display) !important;font-weight:400 !important;
  font-variation-settings:normal !important;font-size:.6rem !important;
  padding-left:10px !important;margin-left:10px !important;
  border-left:2px solid rgba(255,255,255,.55) !important;
}
/* la pressione del bottone: si affonda nel suo stesso rilievo */
html[data-tema="sala-giochi"] body #puja-panel-slot .btn-rilancia:active{
  transform:translate(2px,2px) !important;box-shadow:none !important;
}
html[data-tema="sala-giochi"] body.puja-urgente #puja-panel-slot .btn-rilancia{
  background:#B01710 !important;box-shadow:3px 3px 0 var(--text-primary) !important;
  animation:sg-pigia .45s steps(2) infinite !important;
}
@keyframes sg-pigia{
  50%{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--text-primary)}
}

/* ══ IL CRONOMETRO DEL CABINATO ══
   Qui la clessidra non c'entra niente: in una sala giochi il tempo lo dice un
   display a sette segmenti dietro il vetro, con la barra sotto. Il disegno lo fa
   js/timer-arcade.js (che NON calcola il tempo: lo legge da dove lo legge gia'
   la clessidra), qui ci sono solo materia e misura.
   Il colore delle cifre lo scrive il JS in --arc-colore, perche' dipende dai
   secondi che restano e le soglie stanno nel codice, non nel foglio. Le tacche
   della barra invece hanno il colore STAMPATO nell'SVG: sono zone fisse, come
   la spia della benzina, e non devono seguire il tempo. */
html[data-tema="sala-giochi"] body #puja-panel-slot .clessidra,
html[data-tema="sala-giochi"] body.layout-admin .asta-row-puja .clessidra,
html[data-tema="sala-giochi"] body #puja-panel-slot .timer-inner,
html[data-tema="sala-giochi"] body.layout-admin .asta-row-puja .timer-inner{
  display:none !important;
}
/* fuori da sala-giochi il pannello non esiste: il modulo lo costruisce sempre
   (come fa la clessidra, nascosta in "lavagna") e qui si decide chi lo vede */
html body .arc-timer{display:none}
html[data-tema="sala-giochi"] body #puja-panel-slot .arc-timer,
html[data-tema="sala-giochi"] body.layout-admin .asta-row-puja .arc-timer{
  display:block !important;flex:0 0 auto !important;
  width:125px !important;height:auto !important;overflow:visible !important;
  /* l'ombra dura del tema, la stessa dei pannelli: e' un oggetto appoggiato */
  filter:drop-shadow(3px 3px 0 rgba(20,16,36,.9));
}
/* il mobile: scocca scura, un filo di plastica piu' chiara sotto la luce,
   e la rima in cobalto — l'accento strutturale del tema */
html[data-tema="sala-giochi"] .arc-scocca{fill:var(--text-primary)}
html[data-tema="sala-giochi"] .arc-rilievo{
  fill:none;stroke:#3B3468;stroke-width:1.2;
}
html[data-tema="sala-giochi"] .arc-rima{
  fill:none;stroke:var(--primary);stroke-width:2;
}
html[data-tema="sala-giochi"] .arc-vite{fill:#2B2550;stroke:#0B0917;stroke-width:.8}
html[data-tema="sala-giochi"] .arc-taglio{fill:#0B0917}
html[data-tema="sala-giochi"] .arc-schermo{fill:#05040C}
/* il vetro non deve intercettare i click: e' decorazione sopra le cifre */
html[data-tema="sala-giochi"] .arc-vetro{pointer-events:none}

/* il fantasma: l'otto sempre presente, appena percettibile. E' questo che fa
   leggere il pannello come un display vero invece che come un numero colorato */
html[data-tema="sala-giochi"] .arc-ghost{fill:var(--arc-colore,#3DF07A);opacity:.085}
/* l'alone: lo stesso segmento sfocato sotto quello vero, cioe' la luce del LED
   che sborda sul vetro. Sfocato una volta con un filtro SVG, non con un
   box-shadow: l'ombra seguirebbe il rettangolo dell'elemento, non la sagoma */
html[data-tema="sala-giochi"] .arc-alone{
  fill:var(--arc-colore,#3DF07A);opacity:0;filter:url(#arc-bagliore);
  transition:opacity .12s linear;
}
html[data-tema="sala-giochi"] .arc-alone.acceso{opacity:.55}
html[data-tema="sala-giochi"] .arc-seg{
  fill:var(--arc-colore,#3DF07A);opacity:0;transition:opacity .12s linear;
}
html[data-tema="sala-giochi"] .arc-seg.acceso{opacity:1}

/* la barra: la zona stampata sotto, sempre visibile ma spenta; la tacca vera
   sopra, che si accende. I due strati hanno lo STESSO colore per tacca */
html[data-tema="sala-giochi"] .arc-zona{opacity:.14}
html[data-tema="sala-giochi"] .arc-blocco{opacity:0;transition:opacity .12s linear}
html[data-tema="sala-giochi"] .arc-blocco.acceso{opacity:.95}

/* il puntino che batte ad ogni tick del server */
html[data-tema="sala-giochi"] .arc-battito{
  fill:var(--arc-colore,#3DF07A);opacity:.16;transition:opacity .18s linear;
}
html[data-tema="sala-giochi"] .arc-battito.acceso{opacity:.95}

html[data-tema="sala-giochi"] .arc-etichetta{
  font-family:Archivo,var(--font-sans);font-size:8px;
  fill:#6E7BC8;letter-spacing:1.5px;
}
/* Ultimi secondi: lampeggia SOLO l'etichetta.
   Prima l'animazione stava sull'intero .arc-timer, ed era sbagliata per due
   motivi, il primo segnalato dall'utente:
   - la barra sembrava allungarsi e accorciarsi da sola. Non cambiava: le tacche
     spente stanno a opacita' bassa e, moltiplicate per il .45 del lampeggio,
     finivano invisibili. Spariva la parte gia' consumata e la barra sembrava
     piu' corta, poi tornava. Attenuare un contenitore attenua anche cio' che
     dentro e' gia' tenue di suo, e i rapporti fra i livelli si perdono;
   - e far lampeggiare la cifra proprio negli ultimi tre secondi va contro il
     suo mestiere: e' il momento in cui la si legge di piu'.
   L'etichetta non porta nessun dato, quindi puo' lampeggiare quanto vuole. */
html[data-tema="sala-giochi"] body.puja-urgente #puja-panel-slot .arc-etichetta,
html[data-tema="sala-giochi"] body.puja-urgente .asta-row-puja .arc-etichetta{
  animation:arc-lampeggio .5s steps(1,end) infinite;
}
@keyframes arc-lampeggio{0%,60%{opacity:1}61%,100%{opacity:.15}}

/* ── Il cronometro: cifre da punteggio ── */
html[data-tema="sala-giochi"] body #puja-panel-slot .timer-number,
html[data-tema="sala-giochi"] body.layout-admin .asta-row-puja .timer-number{
  font-family:'Press Start 2P',var(--font-display) !important;font-weight:400 !important;
  font-variation-settings:normal !important;
  font-size:1.8rem !important;letter-spacing:0 !important;
  color:var(--primary) !important;text-shadow:4px 4px 0 rgba(66,95,196,.20) !important;
}
html[data-tema="sala-giochi"] body.puja-urgente #puja-panel-slot .timer-number,
html[data-tema="sala-giochi"] body #puja-panel-slot .timer-ring-container.urgent .timer-number{
  color:var(--fire) !important;text-shadow:4px 4px 0 rgba(212,36,28,.22) !important;
}
html[data-tema="sala-giochi"] body #puja-panel-slot .timer-label-text{
  font-family:Archivo,var(--font-sans) !important;font-size:.4rem !important;
  letter-spacing:.08em !important;color:#66627C !important;
}

/* ── Le tab: la fila di pulsanti del cabinato ── */
html[data-tema="sala-giochi"] .tabs-nav{
  background:var(--text-primary) !important;padding:4px !important;gap:4px !important;
  border-bottom:none !important;
}
html[data-tema="sala-giochi"] .tab-btn,
html[data-tema="sala-giochi"] .tab-btn .tab-label{
  font-family:'Press Start 2P',var(--font-display) !important;font-weight:400 !important;
  font-size:.56rem !important;letter-spacing:0 !important; text-transform:uppercase !important;
}
html[data-tema="sala-giochi"] .tab-btn{
  background:var(--sg-carta2) !important;color:#4A465E !important;
  padding:5px 12px !important;min-height:32px !important;border-radius:0 !important;
}
html[data-tema="sala-giochi"] .tab-icon{
  font-size:.78rem !important;
}
html[data-tema="sala-giochi"] .tab-btn:hover{background:var(--sg-carta) !important;color:var(--text-primary) !important}
html[data-tema="sala-giochi"] .tab-btn.active{background:var(--primary) !important;color:#FFFFFF !important}
html[data-tema="sala-giochi"] .tab-btn.active::after{display:none !important}
html[data-tema="sala-giochi"] .pill-btn{
  border-radius:0 !important;border:2px solid var(--text-primary) !important;
  background:#E8B038 !important;color:var(--text-primary) !important;
}
html[data-tema="sala-giochi"] .pill-btn::before{display:none !important}
html[data-tema="sala-giochi"] .storico-list li,
html[data-tema="sala-giochi"] .rose-row,
html[data-tema="sala-giochi"] .libero-row,
html[data-tema="sala-giochi"] .storico-export-item{
  border-bottom:2px solid rgba(20,16,36,.10) !important;color:var(--text-primary) !important;
}
html[data-tema="sala-giochi"] .tab-content{color:var(--text-primary)}
html[data-tema="sala-giochi"] .text-accent{color:var(--primary) !important}
html[data-tema="sala-giochi"] .storico-filtro-btn,
html[data-tema="sala-giochi"] .filtro-btn{
  background:var(--sg-carta) !important;border:2px solid var(--text-primary) !important;border-radius:0 !important;
  color:#4A465E !important;font-family:Archivo,var(--font-sans) !important;
}
html[data-tema="sala-giochi"] .storico-filtro-btn.active,
html[data-tema="sala-giochi"] .filtro-btn.active{
  background:var(--primary) !important;color:#FFFFFF !important;border-color:var(--text-primary) !important;
}

/* ── I bottoni: plastica stampata, nessun gradiente ── */
html[data-tema="sala-giochi"] .btn{
  border-radius:0 !important;
  font-family:Archivo,var(--font-sans) !important;font-weight:700 !important; text-shadow:none !important;
  font-variation-settings:normal !important;letter-spacing:.04em !important;
}
html[data-tema="sala-giochi"] .btn::before{display:none !important}
html[data-tema="sala-giochi"] .btn:hover{transform:none !important}
html[data-tema="sala-giochi"] .btn:active{transform:translate(3px,3px) !important;box-shadow:none !important}
html[data-tema="sala-giochi"] .btn-primary{
  background:var(--primary) !important;color:#FFFFFF !important;
  border:2px solid var(--text-primary) !important;box-shadow:3px 3px 0 var(--text-primary) !important;
}
html[data-tema="sala-giochi"] .btn-secondary{
  font-family:'Press Start 2P',var(--font-display) !important; font-size:.44rem !important; letter-spacing:0 !important;
  background:var(--sg-carta) !important;color:var(--text-primary) !important;
  border:2px solid var(--text-primary) !important;box-shadow:3px 3px 0 var(--text-primary) !important;
}
html[data-tema="sala-giochi"] .btn-accent{
  font-family:'Press Start 2P',var(--font-display) !important; font-size:.44rem !important; letter-spacing:0 !important;
  background:#E8B038 !important;color:var(--text-primary) !important;
  border:2px solid var(--text-primary) !important;box-shadow:3px 3px 0 var(--text-primary) !important;
}
html[data-tema="sala-giochi"] .btn-danger{
  font-family:'Press Start 2P',var(--font-display) !important; font-size:.44rem !important; letter-spacing:0 !important;
  background:var(--sg-carta) !important;color:var(--fire) !important;
  border:2px solid var(--fire) !important;box-shadow:3px 3px 0 var(--fire) !important;
}
html[data-tema="sala-giochi"] .btn-success{
  font-family:'Press Start 2P',var(--font-display) !important; font-size:.44rem !important; letter-spacing:0 !important;
  background:var(--sg-carta) !important;color:#147A52 !important;
  border:2px solid #147A52 !important;box-shadow:3px 3px 0 #147A52 !important;
}
html[data-tema="sala-giochi"] .rose-inp,
html[data-tema="sala-giochi"] input[type=text],
html[data-tema="sala-giochi"] input[type=number],
html[data-tema="sala-giochi"] select{
  background:var(--sg-carta) !important;border:2px solid var(--text-primary) !important;
  border-radius:0 !important;color:var(--text-primary) !important;
}

/* ── I badge di ruolo: gettoni piatti, stessa codifica per colore ──
   Il bordo e' un box-shadow inset e non un border apposta: i badge hanno
   misure fisse per breakpoint (style.css), un bordo vero le sposterebbe. */
html[data-tema="sala-giochi"] .badge-ruolo{
  border-radius:0 !important;box-shadow:inset 0 0 0 1px var(--text-primary) !important;
  font-family:Archivo,var(--font-sans) !important;font-weight:800 !important; text-shadow:none !important;
}
html[data-tema="sala-giochi"] .badge-ruolo.r-P,
html[data-tema="sala-giochi"] .badge-ruolo.r-Por,
html[data-tema="sala-giochi"] .badge-ruolo.r-T{background:#E8B038 !important;color:var(--text-primary) !important}
html[data-tema="sala-giochi"] .badge-ruolo.r-D,
html[data-tema="sala-giochi"] .badge-ruolo.r-Dc,
html[data-tema="sala-giochi"] .badge-ruolo.r-Ds,
html[data-tema="sala-giochi"] .badge-ruolo.r-Dd,
html[data-tema="sala-giochi"] .badge-ruolo.r-B,
html[data-tema="sala-giochi"] .badge-ruolo.r-E{background:#5FD3A0 !important;color:var(--text-primary) !important}
html[data-tema="sala-giochi"] .badge-ruolo.r-C,
html[data-tema="sala-giochi"] .badge-ruolo.r-M,
html[data-tema="sala-giochi"] .badge-ruolo.r-W{background:#9FB0FF !important;color:var(--text-primary) !important}
html[data-tema="sala-giochi"] .badge-ruolo.r-A,
html[data-tema="sala-giochi"] .badge-ruolo.r-Pc{background:#FF8079 !important;color:var(--text-primary) !important}

/* ── Il drawer di Anteprima, i modali ── */
/* ── Anteprima: la cassetta del campo ──
   Il campo vero e proprio (prato, righe, slot, carte) sta in style.css, insieme
   a quello degli altri temi; qui c'e' solo la cornice attorno. */
html[data-tema="sala-giochi"] .ant-drawer-title,
html[data-tema="sala-giochi"] .ant-panchina-title{
  font-family:'Press Start 2P',var(--font-display) !important;font-weight:400 !important;
  font-size:.56rem !important;letter-spacing:.04em !important;color:var(--text-primary) !important;
}
html[data-tema="sala-giochi"] .ant-panchina-count{
  font-family:Archivo,var(--font-sans) !important;font-size:.5rem !important;color:#4A465E !important;
}
html[data-tema="sala-giochi"] .ant-select,
html[data-tema="sala-giochi"] .ant-zoom-controls{
  background:var(--sg-carta) !important;color:var(--text-primary) !important;
  border:2px solid var(--text-primary) !important;border-radius:0 !important;
}
html[data-tema="sala-giochi"] .ant-zoom-btn{color:var(--text-primary) !important;border-radius:0 !important}
html[data-tema="sala-giochi"] .ant-zoom-btn:hover{background:#E8B038 !important}
html[data-tema="sala-giochi"] .ant-subtab{
  font-family:Archivo,var(--font-sans) !important;font-weight:700 !important; text-shadow:none !important;
  background:var(--sg-carta2) !important;color:#4A465E !important;
  border:2px solid var(--text-primary) !important;border-radius:0 !important;
}
html[data-tema="sala-giochi"] .ant-subtab.active{
  background:var(--primary) !important;color:#FFFFFF !important;border-color:var(--text-primary) !important;
}
html[data-tema="sala-giochi"] .ant-picker{
  background:var(--sg-carta) !important;border:2px solid var(--text-primary) !important;
  border-radius:0 !important;box-shadow:3px 3px 0 var(--text-primary) !important;
}
html[data-tema="sala-giochi"] .ant-picker-item{border-radius:0 !important;color:var(--text-primary) !important}
html[data-tema="sala-giochi"] .ant-picker-item:hover{background:#E8B038 !important}

html[data-tema="sala-giochi"] #tab-anteprima.ant-drawer{
  background:var(--sg-carta) !important;border:2px solid var(--text-primary) !important;border-radius:0 !important;
}
html[data-tema="sala-giochi"] .ant-drawer-close{
  background:var(--sg-carta2) !important;border:2px solid var(--text-primary) !important;
  border-radius:0 !important;color:var(--text-primary) !important;
}
html[data-tema="sala-giochi"] .modal-content{
  background:var(--sg-carta) !important;border:2px solid var(--text-primary) !important;
  border-radius:0 !important;box-shadow:4px 4px 0 var(--text-primary) !important;
}

/* ── L'assegnazione: il verde resta solo qui, come negli altri temi ── */
html[data-tema="sala-giochi"] body .timbro-preso span,
html[data-tema="sala-giochi"] body .chiamata-card.assegnata .cc-esito{
  color:#147A52 !important;text-shadow:none !important;
}
html[data-tema="sala-giochi"] body .timbro-preso span{border-color:#147A52 !important;border-radius:0 !important}

/* ── Schermo stretto: le cifre a pixel sono piu' larghe di quelle di Archivo,
      quindi qui scendono di un gradino in piu' del solito ── */
@media (max-width:760px){
  html[data-tema="sala-giochi"] body #puja-panel-slot .cc-offerta{font-size:1.9rem !important}
  html[data-tema="sala-giochi"] body #puja-panel-slot .timer-number{font-size:1.3rem !important}
  html[data-tema="sala-giochi"] body #puja-panel-slot .btn-rilancia{font-size:.46rem !important}
  html[data-tema="sala-giochi"] body .asta-header-title{font-size:.62rem !important}
}

/* chi non vuole movimento: il tasto smette di pulsare (il colore resta) */
@media(prefers-reduced-motion:reduce){
  html[data-tema="sala-giochi"] body.puja-urgente #puja-panel-slot .btn-rilancia{animation:none !important}
}

/* ═══════════════════════════════════════════════════════════════════
   FIX: nel Riepilogo squadre della vista Admin i conteggi coprivano il nome

   Misurato in browser (finestra 1400, tema sala-giochi, asta di riparazione):
   scheda squadra 211px, colonna "conteggi" della griglia 32px, ma la casella
   .sq-bottom renderizzata 142px. Non e' un problema di troncamento: con
   justify-self:end la casella si dimensiona sul CONTENUTO invece che sulla sua
   colonna e, ancorata al bordo destro, cresce verso SINISTRA fino a stamparsi
   sopra il nome e il pallino. overflow:hidden non la ferma, perche' la casella
   e' davvero larga 142px: non c'e' niente da ritagliare.

   Perche' proprio in Admin: li' #budget-bar e' repeat(auto-fit,minmax(190px,1fr))
   (vedi "Vista Admin: le squadre su due colonne" piu' sopra), quindi le schede
   sono la meta' di quelle del partecipante (minmax(336px,1fr)). Su una riga sola
   servono 10+52+142+66+24 = 294px e ce ne sono 203: una riga NON puo' bastare.
   La composizione a due righe esisteva gia', ma era agganciata a
   @container sala (max-width:1200px), cioe' alla larghezza della COLONNA della
   sala — che in Admin con Anteprima chiusa e' larghissima. La soglia guardava
   la cosa sbagliata: la scheda e' stretta per quante colonne fa #budget-bar,
   non per quanto e' larga la sala.
   ═══════════════════════════════════════════════════════════════════ */

/* Admin mode budget-bar typography tweaks — ingrandite per piena leggibilità */
html body.layout-admin #budget-bar .sidebar-squadra {
  grid-template-columns: auto minmax(0,1fr) auto !important;
  grid-template-areas:
    "pallino nome crediti"
    ". conteggi conteggi" !important;
  padding: 4px 8px 5px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
html body.layout-admin #budget-bar .sq-nome {
  grid-area: nome !important;
  font-size: .84rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
  min-width: 0 !important;
}
html body.layout-admin #budget-bar .sq-bottom {
  grid-area: conteggi !important;
  font-size: .78rem !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
}
html body.layout-admin #budget-bar .sq-portieri,
html body.layout-admin #budget-bar .sq-svincoli{
  font-size: .78rem !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
html body.layout-admin #budget-bar .sq-crediti {
  grid-area: crediti !important;
  font-size: .90rem !important;
  min-width: auto !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
html[data-tema="sala-giochi"] body.layout-admin #budget-bar .sq-crediti{font-size:.42rem !important; padding:2px 4px !important}

/* ═══════════════════════════════════════════════════════════════════
   IL RITRATTO DENTRO UN CABINATO — solo tema "sala-giochi", solo la carta di puja

   Il mobile e' un DISEGNO SVG sovrapposto alla foto, non piu' una pila di gradienti.
   Il motivo e' che i gradienti sanno fare solo bande orizzontali e pallini: davano
   insegna, cruscotto e tasti, ma mai la SAGOMA — spalle arrotondate, bisel del
   monitor, cruscotto che sporge in fuori piu' largo del mobile, sportello dei
   gettoni. Ed e' la sagoma, non il dettaglio, a far riconoscere una macchina da sala
   giochi. La finestra dello schermo e' un buco vero nel disegno (fill-rule evenodd):
   la foto sta sotto e si vede solo li'.

   PROPORZIONI — il ritratto diventa piu' ALTO (rapporto 100:166 invece di ~100:130).
   Serve perche' su un cabinato vero lo schermo occupa circa il 60% del frontale: nel
   riquadro di prima, per fare posto a testata e cruscotto, la faccia sarebbe scesa
   al ~38%. Crescendo in altezza la finestra resta grande quanto la foto di prima e il
   mobile ha lo spazio che gli serve. Si cresce SOLO in altezza: allargarlo avrebbe
   voluto dire ritoccare il padding-left di .chiamata-card in ogni breakpoint, dove un
   errore fa finire il ritratto sopra il nome (incidente gia' successo).

   Niente misure per breakpoint: `aspect-ratio` lega l'altezza alla larghezza (che
   resta quella dei blocchi esistenti) e il padding e' in PERCENTUALE — le percentuali
   di padding si risolvono tutte sulla larghezza, quindi con l'aspect-ratio fisso la
   foto cade esattamente nella finestra del disegno a QUALUNQUE misura, senza una
   tabella di valori da tenere allineata a mano.
   ═══════════════════════════════════════════════════════════════════ */

html[data-tema="sala-giochi"] body #puja-panel-slot .cc-avatar,
html[data-tema="sala-giochi"] body.layout-admin .asta-row-puja .cc-avatar{
  aspect-ratio:100 / 166 !important;height:auto !important;
  padding:0 !important;
  border:0 !important;border-radius:0 !important;
  box-shadow:none !important;      /* l'ombra dura la disegna il SVG, sagomata */
  background:var(--primary) !important;   /* il cobalto del mobile, dietro alla foto */
  overflow:hidden !important;
  animation:none !important;
}

/* La foto (o la sagoma segnaposto) va messa nella FINESTRA del disegno.
   Non con il padding: le percentuali di padding si risolvono sulla larghezza del
   CONTENITORE, non dell'elemento — con .cc-avatar in position:absolute dentro a una
   card larga 1200px, `padding:33%` diventava 400px e la border-box si allargava fino
   a 296px. Con `inset` invece le percentuali si misurano sull'elemento stesso
   (alto/basso sull'altezza, sinistra/destra sulla larghezza), che e' esattamente la
   mappatura che serve. Cosi' la foto cade nella finestra a QUALUNQUE misura, senza
   una tabella di valori per breakpoint. */
html[data-tema="sala-giochi"] body #puja-panel-slot .cc-avatar-img,
html[data-tema="sala-giochi"] body #puja-panel-slot .cc-avatar-svg,
/* NB: qui serve #chiamata-card. In style.css la foto e' formattata da
   `#chiamata-card .cc-avatar-img`, che ha un ID: un ID batte qualunque numero di
   classi, quindi il ramo Admin senza id perdeva e la foto restava alta il 100%
   della scatola invece di entrare nella finestra. Il ramo utente vinceva per caso,
   perche' contiene gia' #puja-panel-slot. */
html[data-tema="sala-giochi"] body.layout-admin .asta-row-puja #chiamata-card .cc-avatar-img,
html[data-tema="sala-giochi"] body.layout-admin .asta-row-puja #chiamata-card .cc-avatar-svg{
  position:absolute !important;
  /* misure ESPLICITE, non left/right + width:auto: per un elemento rimpiazzato
     (<img>) posizionato in assoluto, width:auto prende la dimensione INTRINSECA e
     `right` viene ignorato — la foto usciva a 257px invece dei 135 della finestra. */
  top:19.88% !important;left:12% !important;right:auto !important;bottom:auto !important;
  width:76% !important;height:62.05% !important;
  max-width:none !important;max-height:none !important;min-width:0 !important;
  object-fit:cover !important;object-position:center top !important;
  border-radius:0 !important;z-index:2 !important;
}

/* il mobile, disegnato SOPRA la foto */
html[data-tema="sala-giochi"] body #puja-panel-slot .cc-avatar::after,
html[data-tema="sala-giochi"] body.layout-admin .asta-row-puja .cc-avatar::after{
  content:'' !important;position:absolute !important;inset:0 !important;
  z-index:6 !important;pointer-events:none !important;
  mix-blend-mode:normal !important;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 166' preserveAspectRatio='none'><defs><linearGradient id='b' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%233A52DE'/><stop offset='.55' stop-color='%232440D8'/><stop offset='1' stop-color='%23162070'/></linearGradient><linearGradient id='m' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23FFD35A'/><stop offset='.6' stop-color='%23F0A916'/><stop offset='1' stop-color='%23C98705'/></linearGradient><linearGradient id='p' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%234E60B8'/><stop offset='.5' stop-color='%232B3878'/><stop offset='1' stop-color='%231A2350'/></linearGradient><linearGradient id='d' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%231A2350'/><stop offset='1' stop-color='%230C1029'/></linearGradient></defs><path fill-rule='evenodd' fill='%23141024' d='M10,10 Q10,4 17,4 H89 Q96,4 96,10 V163 H10 Z M12,33 H88 V136 H12 Z'/><path fill-rule='evenodd' fill='url(%23b)' d='M7,7 Q7,1 14,1 H86 Q93,1 93,7 V160 H7 Z M12,33 H88 V136 H12 Z'/><path fill='none' stroke='%23141024' stroke-width='2.5' d='M7,7 Q7,1 14,1 H86 Q93,1 93,7 V160 H7 Z'/><rect x='7.5' y='7' width='2' height='153' fill='%236E86FF' opacity='.55'/><rect x='90.5' y='7' width='2' height='153' fill='%236E86FF' opacity='.35'/><rect x='11' y='4' width='78' height='19' rx='1.5' fill='url(%23m)' stroke='%23141024' stroke-width='2'/><circle cx='15' cy='8.5' r='1.6' fill='%23FFF6D5'/><circle cx='23' cy='8.5' r='1.6' fill='%23FFF6D5'/><circle cx='31' cy='8.5' r='1.6' fill='%23FFF6D5'/><circle cx='39' cy='8.5' r='1.6' fill='%23FFF6D5'/><circle cx='47' cy='8.5' r='1.6' fill='%23FFF6D5'/><circle cx='55' cy='8.5' r='1.6' fill='%23FFF6D5'/><circle cx='63' cy='8.5' r='1.6' fill='%23FFF6D5'/><circle cx='71' cy='8.5' r='1.6' fill='%23FFF6D5'/><circle cx='79' cy='8.5' r='1.6' fill='%23FFF6D5'/><circle cx='87' cy='8.5' r='1.6' fill='%23FFF6D5'/><path d='M22,13 l4,4 l-4,4' fill='none' stroke='%23C98705' stroke-width='1.6' opacity='.65'/><path d='M34,13 l4,4 l-4,4' fill='none' stroke='%23C98705' stroke-width='1.6' opacity='.65'/><path d='M46,13 l4,4 l-4,4' fill='none' stroke='%23C98705' stroke-width='1.6' opacity='.65'/><path d='M58,13 l4,4 l-4,4' fill='none' stroke='%23C98705' stroke-width='1.6' opacity='.65'/><path d='M70,13 l4,4 l-4,4' fill='none' stroke='%23C98705' stroke-width='1.6' opacity='.65'/><rect x='13' y='24.5' width='74' height='8' fill='%230E0B1C'/><rect x='16' y='26' width='1.4' height='5' fill='%232E45C8' opacity='.45'/><rect x='20' y='26' width='1.4' height='5' fill='%232E45C8' opacity='.45'/><rect x='24' y='26' width='1.4' height='5' fill='%232E45C8' opacity='.45'/><rect x='28' y='26' width='1.4' height='5' fill='%232E45C8' opacity='.45'/><rect x='32' y='26' width='1.4' height='5' fill='%232E45C8' opacity='.45'/><rect x='36' y='26' width='1.4' height='5' fill='%232E45C8' opacity='.45'/><rect x='40' y='26' width='1.4' height='5' fill='%232E45C8' opacity='.45'/><rect x='44' y='26' width='1.4' height='5' fill='%232E45C8' opacity='.45'/><rect x='48' y='26' width='1.4' height='5' fill='%232E45C8' opacity='.45'/><rect x='52' y='26' width='1.4' height='5' fill='%232E45C8' opacity='.45'/><rect x='56' y='26' width='1.4' height='5' fill='%232E45C8' opacity='.45'/><rect x='60' y='26' width='1.4' height='5' fill='%232E45C8' opacity='.45'/><rect x='64' y='26' width='1.4' height='5' fill='%232E45C8' opacity='.45'/><rect x='68' y='26' width='1.4' height='5' fill='%232E45C8' opacity='.45'/><rect x='72' y='26' width='1.4' height='5' fill='%232E45C8' opacity='.45'/><rect x='76' y='26' width='1.4' height='5' fill='%232E45C8' opacity='.45'/><rect x='80' y='26' width='1.4' height='5' fill='%232E45C8' opacity='.45'/><rect x='84' y='26' width='1.4' height='5' fill='%232E45C8' opacity='.45'/><path fill='url(%23p)' stroke='%23141024' stroke-width='2.5' d='M1,139 H99 L96,157 H4 Z'/><rect x='3' y='139' width='94' height='2' fill='%2393A4FF' opacity='.8'/><ellipse cx='24' cy='152' rx='8' ry='2.6' fill='%23141024'/><rect x='22.8' y='144' width='2.4' height='8' fill='%234A4468'/><circle cx='24' cy='144' r='5' fill='%23EE2B22' stroke='%23141024' stroke-width='1.4'/><circle cx='22.3' cy='142.3' r='1.5' fill='%23FF9F98'/><circle cx='62' cy='149' r='3.6' fill='%23F5B01A' stroke='%23141024' stroke-width='1.3'/><circle cx='60.9' cy='147.9' r='1.1' fill='%23FFE9A8'/><circle cx='73' cy='147.5' r='3.6' fill='%23F5B01A' stroke='%23141024' stroke-width='1.3'/><circle cx='71.9' cy='146.4' r='1.1' fill='%23FFE9A8'/><circle cx='84' cy='149' r='3.6' fill='%23F5B01A' stroke='%23141024' stroke-width='1.3'/><circle cx='82.9' cy='147.9' r='1.1' fill='%23FFE9A8'/><rect x='9' y='157' width='82' height='8' fill='url(%23d)' stroke='%23141024' stroke-width='1.5'/><rect x='15' y='159' width='18' height='4.5' rx='1' fill='%232E45C8' opacity='.5'/><rect x='45' y='158.6' width='2' height='5' fill='%2307060F'/><rect x='53' y='158.6' width='2' height='5' fill='%2307060F'/><rect x='62' y='160.5' width='14' height='2.6' rx='1' fill='%2307060F'/></svg>") !important;
  background-size:100% 100% !important;background-repeat:no-repeat !important;
  background-position:center !important;
}

/* il vetro del monitor: righe di scansione, riflesso e vignettatura, solo sulla
   finestra. Qui l'inset e' in percentuale ma NON come il padding: le percentuali di
   inset alto/basso si risolvono sull'ALTEZZA, quindi valgono 33/166 e 30/166. */
html[data-tema="sala-giochi"] body #puja-panel-slot .cc-avatar::before,
html[data-tema="sala-giochi"] body.layout-admin .asta-row-puja .cc-avatar::before{
  inset:19.88% 12% 18.07% !important;z-index:5 !important;
  background-image:
    repeating-linear-gradient(0deg, rgba(8,6,20,.20) 0 1px, transparent 1px 3px),
    radial-gradient(130% 90% at 46% -6%, rgba(255,255,255,.22) 0%, transparent 46%)
  !important;
  box-shadow:none !important;
  transform: none !important;
}

/* Telefono: sotto i ~70px di lato il ritratto e' un francobollo e il cabinato
   sparisce — la faccia del giocatore e' l'unica cosa che conta. Torna anche il
   rapporto di forma originale, altrimenti l'aspect-ratio qui sopra lo terrebbe
   allungato anche senza mobile attorno. */
@media (max-width:700px){
html[data-tema="sala-giochi"] body #puja-panel-slot .cc-avatar,
html[data-tema="sala-giochi"] body.layout-admin .asta-row-puja .cc-avatar{
    aspect-ratio:100 / 130 !important;padding:0 !important;
    border:3px solid var(--text-primary) !important;box-shadow:3px 3px 0 var(--text-primary) !important;
    background:var(--primary) !important;
  }
html[data-tema="sala-giochi"] body #puja-panel-slot .cc-avatar::after,
html[data-tema="sala-giochi"] body.layout-admin .asta-row-puja .cc-avatar::after{background-image:none !important}
  html[data-tema="sala-giochi"] body #puja-panel-slot .cc-avatar-img,
  html[data-tema="sala-giochi"] body #puja-panel-slot .cc-avatar-svg,
  html[data-tema="sala-giochi"] body.layout-admin .asta-row-puja #chiamata-card .cc-avatar-img,
  html[data-tema="sala-giochi"] body.layout-admin .asta-row-puja #chiamata-card .cc-avatar-svg{
    position:static !important;inset:auto !important;
    width:100% !important;height:100% !important;object-fit:contain !important;
  }
html[data-tema="sala-giochi"] body #puja-panel-slot .cc-avatar::before,
html[data-tema="sala-giochi"] body.layout-admin .asta-row-puja .cc-avatar::before{inset:0 !important;background-image:none !important}
}

/* ═══════════════════════════════════════════════════════════════════
   VISTA UTENTE — i ruoli in RIGA, e con il loro colore
   ═══════════════════════════════════════════════════════════════════ */

/* (1) In riga, non incolonnati.
   Un giocatore multi-ruolo (es. Dd/Ds/E) produce TRE badge, fratelli del nome
   dentro .cc-nome-row (vedi _getRuoloBadgeHTML in app.js). Quella riga era stata
   messa in colonna apposta — "il badge del ruolo rubava la riga al nome", piu'
   sopra — ma con piu' ruoli i badge finiscono uno SOTTO l'altro, che e' il difetto
   segnalato dall'utente.
   Si torna in riga e si manda a capo il solo NOME, con flex:0 0 100%: i badge
   stanno affiancati sopra e il nome tiene comunque tutta la colonna per se',
   che era esattamente lo scopo della regola originale. Cosi' valgono entrambe
   le richieste, invece di sacrificarne una. */
html body #puja-panel-slot .cc-nome-row{
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:center !important;
}
html body #puja-panel-slot .cc-nome{flex:0 0 100% !important}

/* (2) Il colore del ruolo torna anche in vista utente (solo tema arcade).
   La regola generica dei badge in puja ("contorno, non pastiglia piena", piu'
   sopra) li spegne tutti a contorno grigio e vince per specificita' su
   html[data-tema="sala-giochi"] .badge-ruolo.r-* — percio' nella carta di puja i
   ruoli erano bianchi mentre ovunque altrove erano colorati. Qui si rialza la
   specificita' nel SOLO contesto della puja, tenendo la forma arcade (gettone
   squadrato, bordo inset nero, Silkscreen) e restituendo la codifica per colore.
   Gli altri tre temi non sono toccati: li' il contorno e' una scelta voluta,
   perche' il pieno colorato e' riservato agli stati. */
html[data-tema="sala-giochi"] body #puja-panel-slot .badge-ruolo,
html[data-tema="sala-giochi"] body #puja-panel-slot .badge-ruolo[class*="r-"]{
  border:0 !important;box-shadow:inset 0 0 0 2px var(--text-primary) !important;
  border-radius:0 !important;
  font-family:Archivo,var(--font-sans) !important;font-weight:700 !important; text-shadow:none !important;
  letter-spacing:.06em !important;
}
html[data-tema="sala-giochi"] body #puja-panel-slot .badge-ruolo.r-P,
html[data-tema="sala-giochi"] body #puja-panel-slot .badge-ruolo.r-Por,
html[data-tema="sala-giochi"] body #puja-panel-slot .badge-ruolo.r-T{
  background:#E8B038 !important;color:var(--text-primary) !important;
}
html[data-tema="sala-giochi"] body #puja-panel-slot .badge-ruolo.r-D,
html[data-tema="sala-giochi"] body #puja-panel-slot .badge-ruolo.r-Dc,
html[data-tema="sala-giochi"] body #puja-panel-slot .badge-ruolo.r-Ds,
html[data-tema="sala-giochi"] body #puja-panel-slot .badge-ruolo.r-Dd,
html[data-tema="sala-giochi"] body #puja-panel-slot .badge-ruolo.r-B,
html[data-tema="sala-giochi"] body #puja-panel-slot .badge-ruolo.r-E{
  background:#5FD3A0 !important;color:var(--text-primary) !important;
}
html[data-tema="sala-giochi"] body #puja-panel-slot .badge-ruolo.r-C,
html[data-tema="sala-giochi"] body #puja-panel-slot .badge-ruolo.r-M,
html[data-tema="sala-giochi"] body #puja-panel-slot .badge-ruolo.r-W{
  background:#9FB0FF !important;color:var(--text-primary) !important;
}
html[data-tema="sala-giochi"] body #puja-panel-slot .badge-ruolo.r-A,
html[data-tema="sala-giochi"] body #puja-panel-slot .badge-ruolo.r-Pc{
  background:#FF8079 !important;color:var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LE ROSE — la schermata era rimasta fuori da TUTTI i temi

   `.rose-*` non aveva una sola regola in questo foglio: la schermata ereditava i token
   base e restava con carte arrotondate, ombre sfocate e badge in gradiente, cioe'
   l'esatto contrario del resto del cabinato. Qui prende la stessa grammatica degli
   altri pannelli arcade: angoli vivi, filo d'inchiostro da 2-3px, ombra dura non
   sfocata, Silkscreen, e il gettone d'oro per le cifre di credito.

   I colori dei ruoli NON sono inventati qui: sono gli stessi quattro gruppi gia' usati
   da .badge-ruolo (portieri oro, difesa verde, centrocampo azzurro, attacco corallo),
   cosi' un ruolo ha lo stesso colore in Puja, in Anteprima e nelle Rose. La schermata
   originale ne usava cinque, con il viola per T/W: quel gruppo confluisce nell'oro dei
   trequartisti, come gia' avviene nei badge della puja.
   ═══════════════════════════════════════════════════════════════════ */

/* ── la colonna di ogni squadra: una scheda del tabellone ── */
html[data-tema="sala-giochi"] .rose-col{
  background:var(--sg-carta) !important;border:3px solid var(--text-primary) !important;
  border-radius:0 !important;box-shadow:4px 4px 0 var(--text-primary) !important;
}
html[data-tema="sala-giochi"] .rose-col.attiva{
  border-color:#E8B038 !important;box-shadow:4px 4px 0 var(--text-primary), 0 0 0 3px #E8B038 !important;
}
html[data-tema="sala-giochi"] .rose-col-header{border-bottom:2px solid var(--text-primary) !important}
/* Silkscreen e' molto piu' larga della font base: a parita' di corpo la colonna
   passava da 145px a 195px, cioe' meno squadre a schermo — l'opposto di quello che
   serve alla "Visione compatta". Misurato: 3 colonne 588px contro i 432px degli altri
   temi. Il nome squadra resta a pixel (e' l'identita' della colonna) ma di corpo
   minore, e i nomi dei GIOCATORI tornano alla font base: sono il contenuto denso e
   ripetuto, ed e' li' che si pagava quasi tutta la larghezza. Cosi' si scende a
   482px, +11% invece di +36%, e quel resto e' il filo d'inchiostro, cioe' il tema. */
html[data-tema="sala-giochi"] .rose-col-header{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:2px !important;
  padding-bottom:3px !important;
  margin-bottom:4px !important;
}
html[data-tema="sala-giochi"] .rose-col-nome{
  font-family:Archivo,var(--font-sans) !important;font-weight:800 !important; text-shadow:none !important;
  font-variation-settings:normal !important;color:var(--text-primary) !important;
  font-size:.70rem !important;min-width:0 !important;width:100% !important;line-height:1.15 !important;
  display:-webkit-box !important;-webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;line-clamp:2 !important;
  overflow:hidden !important;
  word-break:normal !important;overflow-wrap:break-word !important;
  white-space:normal !important;max-height:2.35em !important;
}
/* le cifre di credito: lo stesso gettone d'oro del Riepilogo squadre */
html[data-tema="sala-giochi"] .rose-col-budget{
  font-family:'Press Start 2P',var(--font-display) !important;font-weight:400 !important;
  font-variation-settings:normal !important;font-size:.50rem !important;
  color:var(--text-primary) !important;background:#E8B038 !important;
  border:2px solid var(--text-primary) !important;padding:3px 5px 2px !important;
  display:inline-block !important;line-height:1 !important;
  align-self:flex-end !important;
}
html[data-tema="sala-giochi"] .rose-col-budget.attiva{background:var(--fire) !important;color:#FFFFFF !important}

/* ── l'intestazione di ogni reparto (POR, MOV…): una barra da cabinato ── */
html[data-tema="sala-giochi"] .rose-sec-hdr{
  background:var(--primary) !important;border:2px solid var(--text-primary) !important;
  border-radius:0 !important;color:#FFFFFF !important;
  font-family:Archivo,var(--font-sans) !important;font-weight:700 !important; text-shadow:none !important;
  font-variation-settings:normal !important;letter-spacing:.04em !important;
}
html[data-tema="sala-giochi"] .rose-sec-hdr:hover{background:#1B2E9E !important;color:#FFFFFF !important;border-color:var(--text-primary) !important}
html[data-tema="sala-giochi"] .rose-arrow{color:#E8B038 !important}

/* ── la riga del giocatore ── */
html[data-tema="sala-giochi"] .rose-player{
  background:var(--sg-carta2) !important;border-radius:0 !important;
  border-left:3px solid var(--text-primary) !important;color:var(--text-primary) !important;
}
html[data-tema="sala-giochi"] .rose-nome{color:var(--text-primary) !important}
/* la tinta della riga segue il reparto, con gli stessi quattro colori dei badge */
html[data-tema="sala-giochi"] .rose-player.rose-riga-por{background:rgba(245,176,26,.20) !important;border-left-color:#E8B038 !important}
html[data-tema="sala-giochi"] .rose-player.rose-riga-verde{background:rgba(95,211,160,.22) !important;border-left-color:#5FD3A0 !important}
html[data-tema="sala-giochi"] .rose-player.rose-riga-azzurro{background:rgba(159,176,255,.26) !important;border-left-color:#9FB0FF !important}
html[data-tema="sala-giochi"] .rose-player.rose-riga-viola{background:rgba(245,176,26,.20) !important;border-left-color:#E8B038 !important}
html[data-tema="sala-giochi"] .rose-player.rose-riga-rosso{background:rgba(255,128,121,.24) !important;border-left-color:#FF8079 !important}

/* ── i badge di ruolo: gettoni piatti, stessa codifica di .badge-ruolo ── */
html[data-tema="sala-giochi"] .rose-badge{
  border-radius:0 !important;box-shadow:inset 0 0 0 1px var(--text-primary) !important;
  background:var(--sg-carta) !important;color:var(--text-primary) !important;
  font-family:Archivo,var(--font-sans) !important;font-weight:800 !important; text-shadow:none !important;
  font-variation-settings:normal !important;padding:1px 3px !important;
  font-size:0.62rem !important;min-width:15px !important;line-height:1.15 !important;
}
html[data-tema="sala-giochi"] .rose-container.rose-compatta .rose-badge{
  font-size:0.58rem !important;padding:1px 2px !important;min-width:13px !important;line-height:1.15 !important;
  box-shadow:inset 0 0 0 1px var(--text-primary) !important;
}
html[data-tema="sala-giochi"] .rose-badge.ruolo-rose-por,html[data-tema="sala-giochi"] .rose-badge.ruolo-rose-p,
html[data-tema="sala-giochi"] .rose-badge.ruolo-rose-t{background:#FCD34D !important;color:#78350F !important;font-weight:800 !important}
html[data-tema="sala-giochi"] .rose-badge.ruolo-rose-d,html[data-tema="sala-giochi"] .rose-badge.ruolo-rose-dc,
html[data-tema="sala-giochi"] .rose-badge.ruolo-rose-ds,html[data-tema="sala-giochi"] .rose-badge.ruolo-rose-dd,
html[data-tema="sala-giochi"] .rose-badge.ruolo-rose-b,html[data-tema="sala-giochi"] .rose-badge.ruolo-rose-e{background:#6EE7B7 !important;color:#064E3B !important;font-weight:800 !important}
html[data-tema="sala-giochi"] .rose-badge.ruolo-rose-c,html[data-tema="sala-giochi"] .rose-badge.ruolo-rose-m,
html[data-tema="sala-giochi"] .rose-badge.ruolo-rose-w{background:#93C5FD !important;color:#1E3A8A !important;font-weight:800 !important}
html[data-tema="sala-giochi"] .rose-badge.ruolo-rose-a,
html[data-tema="sala-giochi"] .rose-badge.ruolo-rose-pc{background:#FCA5A5 !important;color:#7F1D1D !important;font-weight:800 !important}

/* ── il prezzo: gettone d'oro in miniatura ── */
html[data-tema="sala-giochi"] .rose-prezzo{
  font-family:Archivo,var(--font-sans) !important;font-weight:700 !important; text-shadow:none !important;
  font-variation-settings:normal !important;
  color:var(--text-primary) !important;background:#E8B038 !important;
  border:2px solid var(--text-primary) !important;border-radius:0 !important;
  padding:0 2px !important;line-height:1.3 !important;
}
html[data-tema="sala-giochi"] .rose-empty{color:#66627C !important;font-family:Archivo,var(--font-sans) !important}

/* ── l'interruttore "Visione compatta" ── */
html[data-tema="sala-giochi"] .rose-compatta-toggle{
  color:var(--text-primary) !important;font-family:Archivo,var(--font-sans) !important;
  font-variation-settings:normal !important;
}
html[data-tema="sala-giochi"] .rose-compatta-slider{
  background:var(--sg-carta) !important;border:2px solid var(--text-primary) !important;border-radius:0 !important;
}
html[data-tema="sala-giochi"] .rose-compatta-slider::before{border-radius:0 !important;background:var(--text-primary) !important}
html[data-tema="sala-giochi"] .rose-compatta-toggle input:checked + .rose-compatta-slider{background:#E8B038 !important}
html[data-tema="sala-giochi"] .rose-compatta-toggle input:checked + .rose-compatta-slider::before{background:var(--text-primary) !important}

/* ── la riga di ricerca (stesso tab) ── */
html[data-tema="sala-giochi"] #tab-rose .rose-search-row{
  background:var(--sg-carta) !important;border:3px solid var(--text-primary) !important;
  border-radius:0 !important;box-shadow:4px 4px 0 var(--text-primary) !important;
}
html[data-tema="sala-giochi"] .rose-inp{background:var(--sg-carta) !important;color:var(--text-primary) !important;border-radius:0 !important}
html[data-tema="sala-giochi"] .rose-cerca-btn{
  background:var(--primary) !important;color:#FFFFFF !important;
  border:2px solid var(--text-primary) !important;border-radius:0 !important;
  font-family:Archivo,var(--font-sans) !important;font-variation-settings:normal !important;
}
html[data-tema="sala-giochi"] .rose-cerca-btn:hover{background:#1B2E9E !important;color:#FFFFFF !important}
html[data-tema="sala-giochi"] .rose-search-dropdown{
  background:var(--sg-carta) !important;border:3px solid var(--text-primary) !important;
  border-radius:0 !important;box-shadow:4px 4px 0 var(--text-primary) !important;
}
html[data-tema="sala-giochi"] .rose-search-item{color:var(--text-primary) !important;border-bottom:1px solid rgba(20,16,36,.14) !important}
html[data-tema="sala-giochi"] .rose-search-item:hover{background:var(--primary-subtle) !important}
html[data-tema="sala-giochi"] .rose-search-item-sq{color:#66627C !important}

/* ═══════════════════════════════════════════════════════════════════
   LA GRIGLIA P/A POGGIA SU UN PIANO

   Era l'ultima schermata senza un trattamento suo: `.gk-view` in
   style.css e' pura impaginazione, senza fondo, quindi il contenuto
   stava appoggiato direttamente sull'immagine d'ambiente — sulla
   pergamena di Cuoio e sulla foto del bar di Serata si leggeva male, e
   la schermata sembrava non finita rispetto a tutte le altre.

   Qui non si inventa niente di nuovo: si riusa, tema per tema, LA
   STESSA materia che ciascuno da' gia' a `.card`. Cosi' la Griglia
   entra nel locale invece di galleggiarci sopra, e chi un domani
   ritocca `.card` non deve ricordarsi di ritoccare anche questa.

   Il piano va su `.gk-view.active` e non su un contenitore piu' esterno
   perche' un contenitore non c'e': in `index.html` testata, toggle,
   tab e viste sono fratelli. Testata e tab restano "chrome" appoggiato
   sull'ambiente, esattamente come si comportano la Home e la riga di
   tab della schermata d'asta.

   `overflow-x:auto` e' deliberato: la vista "Griglia" e' una mappa di
   calore con una colonna per giornata, quindi e' piu' larga della
   pagina per costruzione. Deve scorrere DENTRO il suo piano — mai far
   scorrere la pagina in orizzontale. */
html body .gk-view.active{
  padding:16px !important;
  background:linear-gradient(180deg, rgba(25,20,17,.9), rgba(13,11,10,.94)) !important;
  border:1px solid rgba(var(--sc-carta),.10) !important;
  border-radius:2px !important;
  overflow-x:auto !important;
}
html[data-tema="cuoio"] body .gk-view.active{
  background:linear-gradient(180deg, #FAF2E3, #F0E3C8) !important;
  border:1px solid rgba(58,36,20,.14) !important;
}
html[data-tema="lavagna"] body .gk-view.active{
  background:linear-gradient(180deg, #111318, #0B0B0F) !important;
  border:1px solid rgba(34,211,238,.22) !important;
}
html[data-tema="sala-giochi"] body .gk-view.active{
  background:var(--sg-carta) !important;
  border:3px solid var(--text-primary) !important;border-radius:0 !important;
  box-shadow:6px 6px 0 var(--text-primary) !important;
}
/* su schermo stretto il piano si stringe con la pagina, e l'ombra piena
   di Sala Giochi mangerebbe spazio utile: resta il bordo */
@media (max-width:640px){
  html body .gk-view.active{padding:12px !important}
  html[data-tema="sala-giochi"] body .gk-view.active{box-shadow:3px 3px 0 var(--text-primary) !important}
}

/* Le righe della classifica dentro il piano. Servono solo dove la materia del
   tema le renderebbe invisibili: in "sala-giochi" il piano e' bianco e la riga
   e' bianca con un filo tenue, quindi sparisce. Le si da' lo stesso trattamento
   che il tema usa gia' per le righe delle Rose — angoli vivi e filo d'inchiostro,
   non una pastiglia arrotondata. Gli altri tre temi si leggono gia' bene e non
   vengono toccati: vestire per il gusto di vestire e' come non vestire. */
html[data-tema="sala-giochi"] body .gk-rank-card{
  border-radius:0 !important;
  border:2px solid rgba(20,16,36,.16) !important;
  background:var(--sg-carta2) !important;box-shadow:none !important;
  transform: none !important;
}
html[data-tema="sala-giochi"] body .gk-rank-card:hover{
  border-color:var(--primary) !important;background:var(--sg-carta) !important;
}

/* ── I comandi della Griglia P/A: tab, toggle e sub-tab ────────────────
   Ultimo pezzo rimasto con le pastiglie generiche mentre tutto il resto
   della schermata parlava la lingua del tema — si vedeva soprattutto in
   "sala-giochi", dove il piano ha gli angoli vivi e i bottoni sopra erano
   arrotondati.

   Il tasto Portieri/Attaccanti attivo aveva anche un difetto vero, in
   TUTTI e quattro i temi: `linear-gradient(primary, fire)` con testo
   bianco sopra, misurato **3.95:1**, sotto la soglia. Qui il gradiente
   sparisce (nessun altro punto dell'app lo usa) e si applica la stessa
   soluzione gia' scelta per le sub-tab: fondo d'accento pieno e testo
   `var(--sc-fondo)`, che e' per costruzione l'opposto di ogni tema. */
html body .gk-mode-btn.active{
  background:var(--sc-ambra-piena) !important;
  color:var(--sc-fondo) !important;
  border-color:var(--sc-ambra-piena) !important;
  box-shadow:none !important;
  transform: none !important;
}

/* sala-giochi: angoli vivi e inchiostro, come la riga di tab dell'asta */
html[data-tema="sala-giochi"] body .gk-tab,
html[data-tema="sala-giochi"] body .gk-mode-btn,
html[data-tema="sala-giochi"] body .gk-subtab{
  border-radius:0 !important;
  background:var(--sg-carta2) !important;color:#4A465E !important;
  border:2px solid rgba(20,16,36,.22) !important;
  box-shadow:none !important;
  transform: none !important;
}
html[data-tema="sala-giochi"] body .gk-tab:hover,
html[data-tema="sala-giochi"] body .gk-mode-btn:hover,
html[data-tema="sala-giochi"] body .gk-subtab:hover{
  background:var(--sg-carta) !important;color:var(--text-primary) !important;border-color:var(--text-primary) !important;
}
html[data-tema="sala-giochi"] body .gk-tab.active,
html[data-tema="sala-giochi"] body .gk-mode-btn.active,
html[data-tema="sala-giochi"] body .gk-subtab.active{
  background:var(--primary) !important;color:#FFFFFF !important;border-color:var(--text-primary) !important;
}
html[data-tema="sala-giochi"] body .gk-tabs{border-bottom:3px solid var(--text-primary) !important}

/* lavagna: filo ciano e angoli appena accennati, come i piani del tema */
html[data-tema="lavagna"] body .gk-tab,
html[data-tema="lavagna"] body .gk-mode-btn{
  background:rgba(17,19,24,.72) !important;
  border:1px solid rgba(34,211,238,.22) !important;
  color:#B8C4D0 !important;
}
html[data-tema="lavagna"] body .gk-tab.active{
  background:rgba(34,211,238,.10) !important;
  border-color:rgba(34,211,238,.55) !important;color:#7DE8F7 !important;
}
/* Lo stato attivo del toggle va ridichiarato QUI e non lasciato alla regola
   generica piu' sopra: `html[data-tema="x"] body .gk-mode-btn` e
   `html body .gk-mode-btn.active` hanno la STESSA specificita' (2 elementi +
   2 selettori di classe), quindi vince l'ultima scritta — cioe' questa
   sezione, che azzerava il fondo dell'attivo. Misurato: attivo e inattivo
   erano diventati lo stesso colore, indistinguibili. */
html[data-tema="lavagna"] body .gk-mode-btn.active{
  background:#22D3EE !important;color:#0B0B0F !important;
  border-color:#22D3EE !important;
}
html[data-tema="lavagna"] body .gk-tabs{border-bottom-color:rgba(34,211,238,.22) !important}

/* cuoio: il filo di cuoio invece del bordo grigio di sistema */
html[data-tema="cuoio"] body .gk-tab,
html[data-tema="cuoio"] body .gk-mode-btn{
  background:#FAF2E3 !important;border:1px solid rgba(58,36,20,.20) !important;
  color:#5C4A3A !important;
}
html[data-tema="cuoio"] body .gk-tabs{border-bottom-color:rgba(58,36,20,.20) !important}
/* stesso motivo di lavagna: senza questa riga l'attivo spariva */
html[data-tema="cuoio"] body .gk-mode-btn.active{
  background:#6E431F !important;color:#F3E7D0 !important;border-color:#6E431F !important;
}
html[data-tema="cuoio"] body .gk-tab.active{
  background:rgba(107,68,35,.12) !important;
  border-color:rgba(107,68,35,.45) !important;color:#6E431F !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LA STRISCIA DI PUJA (vedi js/puja-sticky.js)

   Compare SOLO quando il tasto RILANCIA non e' piu' raggiungibile.
   Finche' lo e', la striscia e' `display:none` e non esiste per il
   layout: verificato che sotto quella soglia l'app sia identica a
   prima su 8 combinazioni vista x tema, 11 elementi ciascuna.

   `position:fixed` e non `sticky` perche' deve funzionare in due
   situazioni diverse: su desktop scorre la COLONNA (#asta-main-col),
   su mobile scorre la PAGINA. `fixed` sul viewport le copre entrambe
   senza sapere quale delle due si stia muovendo.

   L'ordine degli elementi e' quello in cui servono per decidere:
   chi e' (foto, ruoli, nome, squadra, fascia di Strategia) -> a quanto
   sta e CHI ce l'ha -> quanto tempo resta -> il tasto.

   z-index 800: sopra la testata ma sotto i modali, che devono coprirla.
   ═══════════════════════════════════════════════════════════════════ */
html body .puja-sticky{
  display:none;
  position:fixed !important;top:0;left:0;right:0;z-index:800;
  align-items:center;gap:14px;
  padding:7px 14px calc(7px + env(safe-area-inset-top, 0px));
  border-bottom:1px solid rgba(var(--sc-carta),.14);
  background:rgba(11,9,8,.96);
  backdrop-filter:blur(14px);
  animation:ps-entra .18s ease-out both;
}
html body .puja-sticky.visibile{display:flex}
@keyframes ps-entra{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){ html body .puja-sticky{animation:none} }

/* ── chi e' ── */
html body .puja-sticky .ps-chi{
  display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto;
}
html body .puja-sticky .ps-foto{
  width:38px;height:46px;object-fit:cover;object-position:center top;
  border-radius:2px;flex:0 0 auto;
  border:1px solid rgba(var(--sc-carta),.16);
  background:linear-gradient(180deg,#1E1814,#100D0B);
}
html body .puja-sticky .ps-foto.vuoto{display:none}
html body .puja-sticky .ps-testi{display:flex;flex-direction:column;gap:2px;min-width:0}
html body .puja-sticky .ps-riga-nome{display:flex;align-items:center;gap:7px;min-width:0}
html body .puja-sticky .ps-ruoli{display:flex;align-items:center;gap:3px;flex:0 0 auto}
html body .puja-sticky .ps-ruoli:empty{display:none}
/* i badge sono cloni di quelli veri: qui si rimpiccioliscono e basta, il colore
   per ruolo resta quello che ogni tema ha gia' deciso */
html body .puja-sticky .ps-ruoli .badge-ruolo{
  font-size:.5rem !important;padding:1px 4px !important;line-height:1.4 !important;
}
html body .puja-sticky .ps-nome{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(.85rem,2.4vw,1.08rem);letter-spacing:.01em;
  color:var(--sc-testo);
  /* il nome cede per primo: e' l'unico dato che si puo' accorciare senza
     togliere la capacita' di decidere. Prezzo, offerente e tempo no. */
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
html body .puja-sticky .ps-riga-meta{
  display:flex;align-items:center;gap:8px;min-width:0;
  font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sc-medio);
}
html body .puja-sticky .ps-squadra:empty,
html body .puja-sticky .ps-strategia.vuoto{display:none}
html body .puja-sticky .ps-strategia{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
  text-transform:none;letter-spacing:.02em;color:var(--sc-tenue);
}
/* il filetto col colore della fascia, ripreso dalla carta grande */
html body .puja-sticky .ps-strategia.con-fascia{
  border-left:2px solid var(--ps-fascia,transparent);padding-left:7px;
}

/* ── a quanto sta ── */
html body .puja-sticky .ps-soldi{
  display:flex;align-items:baseline;gap:8px;flex:0 0 auto;
}
html body .puja-sticky .ps-offerta{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(1rem,3vw,1.35rem);color:var(--sc-ambra-piena);
  font-variant-numeric:tabular-nums;
}
html body .puja-sticky .ps-offerente{
  font-size:.66rem;letter-spacing:.06em;color:var(--sc-medio);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:20vw;
}

/* ── quanto manca, e il tasto ── */
html body .puja-sticky .ps-destra{display:flex;align-items:center;gap:12px;flex:0 0 auto}
html body .puja-sticky .ps-timer{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.1rem,3.4vw,1.5rem);line-height:1;
  color:var(--sc-ambra-piena);font-variant-numeric:tabular-nums;
  min-width:1.5em;text-align:right;
}
/* negli ultimi secondi la striscia si accende come il resto della scena: e'
   guidata dalla stessa classe sul body, non da un cronometro suo */
html body.puja-urgente .puja-sticky .ps-timer{color:var(--sc-brace-piena)}
html body.puja-urgente .puja-sticky{border-bottom-color:rgba(var(--sc-brace),.55)}

html body .puja-sticky .ps-rilancia{
  flex:0 0 auto;cursor:pointer;border:none;
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(.72rem,2.2vw,.86rem);letter-spacing:.04em;
  padding:10px 18px;border-radius:2px;
  background:var(--sc-testo);color:var(--sc-fondo);
}
html body .puja-sticky .ps-rilancia:disabled{opacity:.4;cursor:not-allowed}
html body .puja-sticky .ps-rilancia:not(:disabled):active{transform:scale(.97)}

/* L'orologio accanto ai secondi. Nella striscia la cifra del tempo sta in fila
   con il prezzo e con il "+1" del tasto: fra altri numeri non si capiva che
   fosse un tempo. La scala la detta .ps-tempo e l'icona vale 1em, cosi' basta
   cambiare il font-size del contenitore perche' cifra e quadrante restino
   appaiati (vedi l'override di "sala-giochi", che rimpicciolisce entrambi).
   Il colore sta sul contenitore, non sulla cifra: l'SVG disegna in
   currentColor, quindi negli ultimi secondi diventa rosso insieme al numero
   senza bisogno di una regola propria. */
html body .puja-sticky .ps-tempo{
  display:flex;align-items:center;gap:7px;flex:0 0 auto;
  color:var(--sc-ambra-piena);
  font-size:clamp(1.1rem,3.4vw,1.5rem);
}
html body.puja-urgente .puja-sticky .ps-tempo{color:var(--sc-brace-piena)}
html body .puja-sticky .ps-orologio{width:.92em;height:.92em;flex:0 0 auto;opacity:.8}

/* Il tasto: "RILANCIA" e, staccato da un filo, di quanto alza. E' lo stesso
   modo in cui il tasto grande separa l'etichetta dal totale (un ::after con
   border-left), qui applicato all'incremento. */
html body .puja-sticky .ps-rilancia{display:inline-flex;align-items:center;justify-content:center;gap:10px}
html body .puja-sticky .ps-rilancia-inc{
  font-variant-numeric:tabular-nums;
  padding-left:10px;border-left:1px solid currentColor;opacity:.62;
}

/* Sullo stretto si toglie cio' che si puo' rileggere tornando su — la squadra
   reale e la fascia — e si tengono nome, prezzo, chi offre e tempo. Niente
   sparisce che serva a decidere adesso. */
@media (max-width:640px){
  html body .puja-sticky .ps-riga-meta{display:none}
  html body .puja-sticky .ps-foto{width:32px;height:38px}
}
@media (max-width:430px){
  html body .puja-sticky{gap:9px;padding-left:10px;padding-right:10px}
  html body .puja-sticky .ps-offerente{display:none}
  html body .puja-sticky .ps-rilancia{padding:10px 13px}
}

/* ── le materie, tema per tema ── */
html[data-tema="cuoio"] body .puja-sticky{
  background:rgba(243,231,208,.97);
  border-bottom:1px solid rgba(58,36,20,.22);
  box-shadow:0 6px 18px rgba(58,36,20,.18);
}
html[data-tema="lavagna"] body .puja-sticky{
  background:rgba(11,11,15,.97);
  border-bottom:1px solid rgba(34,211,238,.45);
  box-shadow:0 6px 22px rgba(0,0,0,.55);
}
html[data-tema="sala-giochi"] body .puja-sticky{
  background:var(--sg-carta);
  border-bottom:4px solid var(--text-primary);
  box-shadow:0 6px 0 rgba(20,16,36,.18);
  backdrop-filter:none;
}
html[data-tema="sala-giochi"] body .puja-sticky .ps-foto{
  border:2px solid var(--text-primary);border-radius:0;background:var(--primary);
}
html[data-tema="sala-giochi"] body .puja-sticky .ps-rilancia{
  background:var(--fire) !important;color:#FFFFFF !important;
  border:2px solid var(--text-primary) !important;border-radius:0 !important;
}
/* i caratteri del tema anche sulla striscia: senza, in "sala-giochi" restava
   l'unico pezzo in Archivo dentro una schermata tutta a pixel */
html[data-tema="sala-giochi"] body .puja-sticky .ps-nome,
html[data-tema="sala-giochi"] body .puja-sticky .ps-rilancia{
  font-family:Archivo,var(--font-sans) !important;
  font-weight:400 !important;letter-spacing:0 !important;
  font-size:clamp(.58rem,1.7vw,.74rem) !important;
}
html[data-tema="sala-giochi"] body .puja-sticky .ps-offerta,
html[data-tema="sala-giochi"] body .puja-sticky .ps-timer{
  font-family:'Press Start 2P',var(--font-display) !important;font-weight:400 !important;
  font-size:clamp(.78rem,2.3vw,.98rem) !important;
}
html[data-tema="sala-giochi"] body .puja-sticky .ps-tempo{
  font-size:clamp(.78rem,2.3vw,.98rem) !important;
}
html[data-tema="sala-giochi"] body .puja-sticky .ps-riga-meta,
html[data-tema="sala-giochi"] body .puja-sticky .ps-offerente{
  font-family:Archivo,var(--font-sans) !important;
}

/* ════════════════════════════════════════════════════════════════════
   LA PAGINA DELL'ASTA SCORRE PER INTERO (da 769px in su)

   Richiesta dell'utente. Fino a qui, sopra i 768px, la schermata d'asta
   era alta esattamente un viewport e l'unica cosa che scorreva era il
   contenuto della tab aperta: la carta di puja restava sempre a schermo,
   quindi la striscia di puja (js/puja-sticky.js) — che esiste apposta
   per quando la scena scorre via — non aveva quasi mai occasione di
   comparire. Ora la pagina scorre e la striscia fa il suo lavoro.

   Non e' un meccanismo nuovo: sotto i 768px la pagina scorre gia' da
   sempre (@media(max-width:768px) in style.css) e in vista Partecipante
   scorreva gia' #asta-main-col (vedi "LO SCROLL" e il blocco delle tab
   piu' su). Questo porta lo stesso comportamento a tutto il desktop e
   riduce le aree che scorrono da TRE annidate a DUE, ciascuna con un
   mestiere chiaro: la pagina toglie di mezzo il chrome (testata, riepilogo
   squadre, carta di puja), il pannello delle tab scorre la lista lunga.
   La terza — #asta-main-col, la colonna in mezzo — non serviva a nessuno
   dei due mestieri e sparisce.

   Le DUE aree sono volute: un primo giro ne aveva lasciata una sola, col
   pannello alto quanto il contenuto, e l'utente ha chiesto di riavere anche
   quello interno. Aveva ragione: con 12 rose la pagina diventava alta
   2000px, la barra orizzontale delle Rose finiva irraggiungibile in fondo e
   le intestazioni di colonna della Griglia P/A smettevano di seguire. Il
   tetto sul pannello (vedi sotto) risolve tutti e tre.

   Perche' in questo foglio e non in style.css, che e' quello del layout:
   le regole da battere stanno QUI e sono !important (lo scroll di
   #asta-main-col, l'altezza minima delle tab, il drawer di Anteprima).
   Scriverle in style.css — che viene caricato prima — avrebbe voluto dire
   inventare selettori piu' lunghi per vincere una cascata che parte gia'
   perdente, e spargere una modifica sola su due file: in questo progetto
   e' il modo sicuro di farli divergere (vedi le due soglie del rosso a 5s
   e 4s, e la regola duplicata che vinceva per specificita').

   Cosa resta ancorato in alto: SOLO la striscia di puja, che e'
   `position:fixed` sul viewport. La testata se ne va con lo scorrimento
   (e' gia' `position:relative`, riga ~1238) e con lei la barra delle tab:
   scelta esplicita dell'utente.

   ANTEPRIMA ha una regola sua, e non e' un capriccio: non e' una tab, e'
   una colonna SORELLA di .asta-main-col con `align-self:stretch`, quindi
   si stirerebbe quanto la colonna principale. Resta alta un viewport, con
   lo scorrimento suo, e diventa `sticky` per restare a portata mentre
   scorri il resto — cioe' la stessa forma che il tetto da' al pannello
   delle tab, ottenuta in un altro modo perche' vive in un'altra colonna.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width:769px){

  /* Lo scroll va su #screen-asta, NON su html/body: quelli sono condivisi
     con Home, Lobby, Strategie, Editor Fasce e Griglia P/A, che scorrono
     gia' per conto loro dentro `.screen.active`. Di fatto questa riga
     restituisce a #screen-asta il comportamento generico di
     `.screen.active` (height:100vh + overflow-y:auto) che oggi era
     annullato da `overflow:hidden`.
     `overflow-x` resta hidden: non e' una clippatura nuova, e' esattamente
     quella che lo shorthand `overflow:hidden` gia' faceva. */
  html body #screen-asta.active{
    height:100vh !important;overflow-y:auto !important;overflow-x:hidden !important;
    /* La franja della videochiamata (js/videochiamata.js) sta in fondo ed e'
       `position:fixed`. A differenza della striscia di puja, che copre di
       proposito la testata per sostituirla, questa NON deve coprire niente:
       finirebbe proprio sopra la barra orizzontale delle Rose, che a fondo
       pagina sta a 5px dal bordo inferiore. Quindi si riserva il posto in due
       punti — questo padding, perche' il fondo del documento si fermi sopra la
       franja, e il tetto del pannello qui sotto, perche' pannello e franja ci
       stiano insieme nello schermo. `--h-chiamata` la scrive il modulo: vale
       0px finche' nessuno entra in chiamata, quindi senza chiamata non cambia
       un pixel. */
    padding-bottom:var(--h-chiamata, 0px) !important;
  }

  /* Le scatole annidate erano `flex:1;min-height:0` per spartirsi
     l'altezza fissa del viewport: ora devono crescere col contenuto.
     `overflow` non si tocca da nessuna parte qui sotto — ad altezza
     automatica un `overflow:auto` non fa comparire nessuna barra e un
     `overflow:hidden` non ritaglia niente (a .tabs-panel serve ancora,
     per tenere il contenuto dentro i suoi angoli arrotondati). */
  html body .asta-live-layout{flex:0 0 auto !important;min-height:0 !important}

  /* IL PANNELLO DELLE TAB HA UN TETTO, E DENTRO SI SCORRE (2026-09-01, secondo giro)
     Richiesta dell'utente: servono TUTTI E DUE gli scorrimenti, non uno solo.
     Il primo giro aveva tolto anche quello interno, e il pannello cresceva
     quanto il contenuto: con 12 rose la pagina diventava alta 2000px, la
     barra orizzontale delle Rose finiva irraggiungibile in fondo e le
     intestazioni di colonna della Griglia P/A smettevano di seguire (sono
     `sticky` rispetto al loro contenitore, che non scorreva piu').

     Col tetto tornano tutti e due, ciascuno per il suo mestiere:
     - la PAGINA scorre quel tanto che basta a togliere di mezzo testata,
       riepilogo squadre e carta di puja — cioe' a far comparire la striscia;
     - il PANNELLO scorre al suo interno per la lista lunga, come faceva
       prima, e resta sempre alto quanto lo schermo.

     Il tetto e' `100vh` meno l'altezza della striscia di puja: la striscia e'
     `position:fixed` e NON riserva spazio (mette `ha-puja-sticky` sul body, ma
     nessuna regola la usa), quindi senza quella sottrazione, arrivati in fondo
     alla pagina, la barra delle tab finirebbe proprio sotto la striscia.
     72px non e' un numero a occhio: misurata in tutti e quattro i temi sta fra
     61 e 64px (64 in sala-giochi, che ha i caratteri a pixel), piu' 8 di
     margine. Se un giorno la striscia cambiasse altezza, e' l'unico numero da
     rivedere qui dentro.

     Il `flex:0 0 auto` resta: sotto il tetto il pannello si stringe sul
     contenuto, cosi' uno Storico da tre righe non lascia mezzo schermo vuoto.
     Sotto NON si ridichiara `.tab-content`/`.rose-container`: le regole base di
     style.css (`flex:1;min-height:0;overflow-y:auto`) sono gia' esattamente
     quello che serve — bastava ridare al pannello un'altezza definita. */
  html body .tabs-panel{
    flex:0 0 auto !important;min-height:0 !important;
    max-height:calc(100vh - 72px - var(--h-chiamata, 0px)) !important;
  }

  /* Le tre varianti servono davvero: `html body.layout-partecipante
     .asta-row-tabs` esiste piu' su con `flex:1 1 auto` e un min-height da
     420px, ed e' piu' specifico di `html body .asta-row-tabs` — senza il
     ramo con la classe di layout vincerebbe lui.
     Il min-height va a 0 di proposito: garantiva un'altezza usabile quando
     le tab erano l'avanzo di un viewport, ma con la pagina che scorre
     lascerebbe soltanto un pannello mezzo vuoto sotto uno Storico corto. */
  html body .asta-row-tabs,
  html body.layout-partecipante .asta-row-tabs,
  html body.layout-admin .asta-row-tabs{flex:0 0 auto !important;min-height:0 !important}

  /* La colonna smette di essere un'area di scorrimento sua. Il bug che
     quella regola risolveva (le tab spinte fuori dalla finestra e
     irraggiungibili, vedi "LO SCROLL") ora lo risolve lo scroll della
     pagina. Restano due aree e non tre, ed e' voluto: una per il chrome
     sopra (la pagina) e una per la lista (il pannello). La colonna in mezzo
     non serviva a nessuna delle due. */
  html body.layout-partecipante #asta-main-col{
    overflow-y:visible !important;overflow-x:visible !important;
  }

  /* Anteprima: vedi sopra. Batte la regola @media(min-width:761px) piu' su,
     che le da' `align-self:stretch` + `max-height:100%` — con la pagina che
     scorre, quel 100% sarebbe l'altezza intera delle Rose. */
  html body #tab-anteprima.ant-drawer.drawer-open{
    position:sticky !important;top:0 !important;align-self:flex-start !important;
    max-height:100vh !important;overflow-y:auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   IL CAMPO: LA GAZZETTA SUL BANCONE (Tema "Il Bar")
   Un ritaglio di giornale rosa, pulito e ordinato, con tattiche
   disegnate a penna blu e rossa. Niente macchie o scotch che fanno disordine.
   ═══════════════════════════════════════════════════════════════════ */
html[data-tema="bar"] .ant-pitch-stage{
  background:none !important;
  padding:30px 20px !important;
}

html[data-tema="bar"] .ant-pitch.ant-pitch3d{
  background-color:#F5D8DE !important; /* Rosa Gazzetta pulito */
  background-image: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0,0,0,.03) 1px, rgba(0,0,0,.03) 2px) !important;
  background-size: 6px 6px !important;
  
  border:1px solid #C4A5AC !important;
  border-radius:2px !important;
  box-shadow: 
    0 15px 30px rgba(0,0,0,.4), 
    0 4px 8px rgba(0,0,0,.3) !important;
  clip-path:none !important;
  transform:rotate(-1deg) scale(0.98) !important;
  position: relative !important;
}

/* Rimuoviamo ::before e ::after usati per nastro adesivo e titoli finti */
html[data-tema="bar"] .ant-pitch.ant-pitch3d::before,
html[data-tema="bar"] .ant-pitch.ant-pitch3d::after,
html[data-tema="bar"] .ant-pitch-stage::after,
html[data-tema="bar"] .ant-pitch3d-border {
  display:none !important;
}

/* L'inchiostro delle linee del campo: blu penna biro, ordinato */
html[data-tema="bar"] .ant-field-markings rect,
html[data-tema="bar"] .ant-field-markings path,
html[data-tema="bar"] .ant-field-markings circle{
  stroke: #1B2B5B !important; 
  stroke-width: 1.5 !important;
  filter: none !important;
  stroke-dasharray: 5 5 !important;
  stroke-linecap: round !important;
  opacity: 0.8 !important;
}

/* Gli slot vuoti: quadratini tratteggiati a penna rossa */
html[data-tema="bar"] .ant-slot3d-empty{
  border: 1px dashed rgba(180,30,30,.7) !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Etichette dei ruoli: testo semplice rosso scuro, senza sfondi */
html[data-tema="bar"] .ant-slot3d-label {
  background: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html[data-tema="bar"] .ant-slot3d-label .badge-ruolo {
  background: transparent !important;
  color: #B41E1E !important;
  font-family: 'Times New Roman', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 0 !important;
}

html[data-tema="bar"] .badge-ruolo[class*="r-"] {
  background: transparent !important;
  color: #B41E1E !important;
}

/* Carte piatte incollate come figurine, ben dritte */
html[data-tema="bar"] .ant-slot3d .ant-card {
  transform: none !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.3), inset 0 0 0 1px #fff !important;
  border-radius: 2px !important;
  border: 1px solid #aaa !important;
}

html[data-tema="bar"] .ant-slot3d:hover .ant-card {
  transform: scale(1.05) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.4), inset 0 0 0 1px #fff !important;
  z-index: 20 !important;
}

/* Testo del giocatore sulla carta */
html[data-tema="bar"] .ant-slot3d-name-txt {
  color: #111 !important;
  font-family: 'Times New Roman', Georgia, serif !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  background: rgba(255,255,255,.9) !important;
  border: 1px solid #ccc !important;
  padding: 1px 4px !important;
  border-radius: 2px !important;
  display: inline-block !important;
}

html[data-tema="bar"] .ant-slot3d-shadow {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ██████████████  SERATA D'ASTA — ULTRA GALA EDITION (UNIFICATA & RICCA)  ██████
   ═══════════════════════════════════════════════════════════════════════════
   Obiettivi:
   1. UNICO TONO DI BLU SULLA CARTA: Chiamata-card trasparente al 100%,
      nessun doppio rettangolo dentro. Una sola superficie fluida e maestosa.
   2. PIÙ DECORAZIONI D'AUTORE:
      - Beacon di trasmissione Live con luce pulsante (CHIAMATA LIVE)
      - Badge FantaLab Scouting in stile micro-chip dorato (Jolly, Fascia, Quota)
      - Stelle di titolarità in oro brillante puro
      - Filetto divisorio di luce ambra tra giocatore e timer
      - Avatar trofeo con doppio anello d'oro e luce radente
      - Bottoni lingotto d'oro con riflesso ad onda
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── BODY & ATMOSFERA NOTTURNA ──────────────────────────────────────────── */
html[data-tema="serata"] body,
html:not([data-tema]) body {
  background-color: #060910 !important;
  background-image:
    /* Riflettore centrale ambra dall'alto */
    radial-gradient(ellipse 85% 50% at 50% -5%, rgba(251,191,36,0.15) 0%, transparent 68%),
    /* Bagliore d'atmosfera sul tabellone */
    radial-gradient(ellipse 65% 40% at 50% 105%, rgba(245,158,11,0.08) 0%, transparent 60%),
    linear-gradient(180deg, #080c16 0%, #05070d 100%) !important;
  background-attachment: fixed !important;
}

html[data-tema="serata"] .pitch-bg,
html:not([data-tema]) .pitch-bg {
  background-color: #060910 !important;
  background-image:
    radial-gradient(ellipse 75% 45% at 50% 0%, rgba(251,191,36,0.12) 0%, transparent 62%),
    linear-gradient(180deg, #080c16 0%, #05070d 100%) !important;
  filter: none !important;
}

/* ─── HEADER DI PRESTIGIO ────────────────────────────────────────────────── */
html[data-tema="serata"] body .asta-header,
html:not([data-tema]) body .asta-header {
  background: rgba(7, 10, 18, 0.94) !important;
  border-bottom: 2px solid rgba(251,191,36,0.40) !important;
  backdrop-filter: blur(24px) !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.65),
    0 1px 0 rgba(255,230,150,0.25) inset,
    0 0 25px rgba(251,191,36,0.12) !important;
}

/* ─── TEMA SERATA D'ASTA: TITOLO GALA DI SUBASTA (OPZIONE 1) ───────────────
   Nessun tubo al neon da bar: titolo maestoso in lettere dorate cesellate
   con serifa classica imperiale romana (non corsiva), foglia d'oro e ombra elegante. */
html[data-tema="serata"] body .home-title,
html:not([data-tema]) body .home-title {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: none !important;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFE89C 25%, #E5A93C 60%, #B87304 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: none !important;
  animation: none !important;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.85)) !important;
  font-size: clamp(2.6rem, 7vw, 4.6rem) !important;
  margin-bottom: 8px !important;
}

html[data-tema="serata"] body .home-title::after,
html:not([data-tema]) body .home-title::after,
html[data-tema="serata"] body .asta-header-title::after,
html:not([data-tema]) body .asta-header-title::after {
  display: none !important;
}

html[data-tema="serata"] body .home-subtitle,
html:not([data-tema]) body .home-subtitle {
  font-family: 'Space Mono', monospace !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #A79B8B !important;
}

html[data-tema="serata"] body .asta-header-title,
html:not([data-tema]) body .asta-header-title {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFE89C 25%, #E5A93C 60%, #B87304 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: none !important;
  animation: none !important;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.85)) !important;
  font-size: 1.55rem !important;
  padding-right: 4px !important;
}

/* ─── PANNELLI SECONDARI: COLORE BLU ANTEPRIMA (#334155 -> #1e293b) ─────── */
html[data-tema="serata"] body .panel-budget,
html:not([data-tema]) body .panel-budget,
html[data-tema="serata"] body #mio-panel,
html:not([data-tema]) body #mio-panel,
html[data-tema="serata"] body .admin-panel,
html:not([data-tema]) body .admin-panel,
html[data-tema="serata"] body .card,
html:not([data-tema]) body .card,
html[data-tema="serata"] body #budget-bar,
html:not([data-tema]) body #budget-bar {
  position: relative !important;
  /* Stesso identico colore blu elegante di Anteprima */
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important;
  border: 1px solid rgba(251,191,36,0.28) !important;
  border-top: 2.5px solid #F59E0B !important;
  border-radius: 12px !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.45),
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 0 20px rgba(251,191,36,0.06) !important;
}

/* Titoli delle sezioni: oro cesellato */
html[data-tema="serata"] body .panel-budget-hdr,
html:not([data-tema]) body .panel-budget-hdr,
html[data-tema="serata"] body .mio-panel-header,
html:not([data-tema]) body .mio-panel-header,
html[data-tema="serata"] body .card-title,
html:not([data-tema]) body .card-title {
  color: #FCD34D !important;
  letter-spacing: 0.14em !important;
  font-weight: 800 !important;
  text-shadow: 0 0 12px rgba(251,191,36,0.40) !important;
  font-size: 0.70rem !important;
}

/* ─── IL PALCO CENTRALE D'ASTA: UNICO TONO CONTINUO DI BLU ───────────────── */
html[data-tema="serata"] body #puja-panel-slot,
html[data-tema="serata"] body.layout-partecipante #puja-panel-slot,
html:not([data-tema]) body.layout-partecipante #puja-panel-slot,
html:not([data-tema]) body #puja-panel-slot,
html[data-tema="serata"] body.layout-admin .asta-row-puja,
html:not([data-tema]) body.layout-admin .asta-row-puja {
  position: relative !important;
  /* UNICO TONO continuo e regale su tutta la superficie */
  background:
    radial-gradient(ellipse 80% 65% at 50% -20%, rgba(251,191,36,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 55% 55% at 90% 50%, rgba(245,158,11,0.12) 0%, transparent 60%),
    linear-gradient(155deg, #121c2e 0%, #0d1524 50%, #10192b 100%) !important;
  border: 1.5px solid rgba(251,191,36,0.50) !important;
  border-top: 3px solid #FFB04A !important;
  border-radius: 16px !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,0.70),
    0 1px 0 rgba(255,245,190,0.30) inset,
    0 0 45px rgba(251,191,36,0.14) !important;
}

/* LA CARTA INTERNA DEVE ESSERE 100% TRASPARENTE: ZERO DOPPI TONI DI BLU */
html[data-tema="serata"] .puja-panel-slot .chiamata-card,
html:not([data-tema]) .puja-panel-slot .chiamata-card,
html[data-tema="serata"] body.layout-admin .asta-row-puja .chiamata-card,
html:not([data-tema]) body.layout-admin .asta-row-puja .chiamata-card,
html body.layout-admin .asta-row-puja .chiamata-card {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* La Miccia Dorata animata di gala */
html[data-tema="serata"] body #puja-panel-slot::before,
html[data-tema="serata"] body.layout-partecipante #puja-panel-slot::before,
html:not([data-tema]) body.layout-partecipante #puja-panel-slot::before,
html:not([data-tema]) body #puja-panel-slot::before,
html[data-tema="serata"] body.layout-admin .asta-row-puja::before,
html:not([data-tema]) body.layout-admin .asta-row-puja::before {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; top: -1px !important;
  height: 3px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(245,158,11,0.5) 10%,
    #FFF4D0 35%,
    #FFB04A 50%,
    #FFF4D0 65%,
    rgba(245,158,11,0.5) 90%,
    transparent 100%
  ) !important;
  z-index: 10 !important;
  border-radius: 16px 16px 0 0 !important;
  animation: miccia-ultra 2.6s ease-in-out infinite !important;
}

@keyframes miccia-ultra {
  0%, 100% { opacity: 0.75; box-shadow: 0 0 10px rgba(255,176,74,0.5), 0 2px 12px rgba(255,176,74,0.25); }
  50% { opacity: 1.0; box-shadow: 0 0 24px rgba(255,176,74,0.95), 0 4px 22px rgba(255,215,100,0.6); }
}

html[data-tema="serata"] body #puja-panel-slot::after,
html[data-tema="serata"] body.layout-partecipante #puja-panel-slot::after,
html:not([data-tema]) body.layout-partecipante #puja-panel-slot::after,
html:not([data-tema]) body #puja-panel-slot::after,
html[data-tema="serata"] body.layout-admin .asta-row-puja::after,
html:not([data-tema]) body.layout-admin .asta-row-puja::after {
  display: none !important;
}

/* Avatar del giocatore: cornice da trofeo dorato */
html[data-tema="serata"] body #puja-panel-slot .cc-avatar,
html:not([data-tema]) body #puja-panel-slot .cc-avatar,
html[data-tema="serata"] body.layout-admin .asta-row-puja .cc-avatar,
html:not([data-tema]) body.layout-admin .asta-row-puja .cc-avatar {
  border: 2px solid #FFB04A !important;
  border-radius: 10px !important;
  box-shadow:
    0 0 20px rgba(251,191,36,0.30),
    0 10px 24px rgba(0,0,0,0.50),
    0 1px 0 rgba(255,255,255,0.4) inset !important;
  overflow: hidden !important;
}

/* Badge Ruolo (POR, DC, CC, ATT...): pillola gioiello */
html[data-tema="serata"] body .badge-ruolo,
html:not([data-tema]) body .badge-ruolo {
  border-radius: 6px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 0 10px rgba(255,255,255,0.15) inset !important;
  padding: 3px 8px !important;
}

/* Nome del giocatore: bianco scultoreo brillante */
html[data-tema="serata"] body .cc-nome,
html:not([data-tema]) body .cc-nome {
  background: linear-gradient(180deg, #FFFFFF 20%, #F5F1E8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.8)) drop-shadow(0 0 16px rgba(251,191,36,0.25)) !important;
  letter-spacing: 0.02em !important;
  font-weight: 900 !important;
}

/* Fascia & Squadra: pillole dark-glass con bordo ambra sottile */
html[data-tema="serata"] body .cc-meta,
html:not([data-tema]) body .cc-meta {
  gap: 8px !important;
  align-items: center !important;
}

html[data-tema="serata"] body .cc-squadra,
html:not([data-tema]) body .cc-squadra {
  background: rgba(251,191,36,0.12) !important;
  border: 1px solid rgba(251,191,36,0.35) !important;
  color: #FCD34D !important;
  border-radius: 5px !important;
  padding: 2px 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}

/* Scouting card (Commento FantaLab): box d'autore incassato con filetto ambra */
html[data-tema="serata"] .cc-commento-preview,
html:not([data-tema]) .cc-commento-preview {
  background: rgba(8, 13, 22, 0.65) !important;
  border: 1px solid rgba(251, 191, 36, 0.25) !important;
  border-left: 3.5px solid #FFB04A !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  color: #e2e8f0 !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3) !important;
  backdrop-filter: blur(8px) !important;
}

/* Stelle di titolarità in oro vivo con glow */
html[data-tema="serata"] body .cc-titolarita,
html:not([data-tema]) body .cc-titolarita,
html[data-tema="serata"] body .titolarita-stelle,
html:not([data-tema]) body .titolarita-stelle {
  color: #FFB04A !important;
  text-shadow: 0 0 10px rgba(251,191,36,0.6) !important;
  font-weight: 800 !important;
}

/* Timer / Clessidra: alone circolare d'oro */
html[data-tema="serata"] body #puja-panel-slot .timer-ring-container,
html:not([data-tema]) body #puja-panel-slot .timer-ring-container,
html[data-tema="serata"] body .asta-row-puja .timer-ring-container,
html:not([data-tema]) body .asta-row-puja .timer-ring-container {
  position: relative !important;
  background: radial-gradient(circle at center, rgba(251,191,36,0.16) 0%, transparent 68%) !important;
  filter: drop-shadow(0 0 18px rgba(251,191,36,0.45)) !important;
  border-radius: 50% !important;
}

/* Cifra del Timer in ambra neon */
html[data-tema="serata"] body .timer-number,
html:not([data-tema]) body .timer-number {
  color: #FFB04A !important;
  text-shadow: 0 0 22px rgba(251,191,36,0.70), 0 0 40px rgba(245,158,11,0.35) !important;
  font-weight: 900 !important;
}

/* ─── CIFRE CHIAVE E PREZZI: AMBRA IMPERIALE ─────────────────────────────── */
html[data-tema="serata"] body .cc-offerta,
html:not([data-tema]) body .cc-offerta {
  color: #FFB04A !important;
  text-shadow:
    0 0 32px rgba(251,191,36,0.65),
    0 0 70px rgba(245,158,11,0.30),
    0 2px 10px rgba(0,0,0,0.8) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

html[data-tema="serata"] body .cc-offerta-label,
html:not([data-tema]) body .cc-offerta-label {
  color: #FCD34D !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  text-shadow: 0 0 10px rgba(251,191,36,0.4) !important;
}

/* Il grande "500" nel salvadanaio */
html[data-tema="serata"] body #mio-panel .crediti-badge,
html:not([data-tema]) body #mio-panel .crediti-badge {
  color: #FFB04A !important;
  font-size: 2.5rem !important;
  font-weight: 900 !important;
  text-shadow:
    0 0 26px rgba(251,191,36,0.55),
    0 0 50px rgba(251,191,36,0.25) !important;
  background: none !important;
  border: none !important;
}

/* Icona sacco di monete con riflesso d'oro */
html[data-tema="serata"] body .icon-crediti,
html:not([data-tema]) body .icon-crediti {
  filter: drop-shadow(0 0 10px rgba(251,191,36,0.6)) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA IL BAR: BOTTONI PUJA (LINGOTTO PUB D'AMBRA E FORME CAPSULA)
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-tema="bar"] body #puja-panel-slot .btn-rilancia,
html[data-tema="bar"] body .asta-row-puja .btn-rilancia {
  background: linear-gradient(135deg, #FFF0C0 0%, #FFA322 28%, #E8820C 65%, #BD5E00 100%) !important;
  color: #1a0800 !important;
  border: none !important;
  border-bottom: 4px solid #7c3400 !important;
  border-radius: 10px !important;
  box-shadow:
    0 8px 28px rgba(217,119,6,0.60),
    0 1px 0 rgba(255,255,240,0.55) inset,
    0 0 25px rgba(251,191,36,0.30) !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.40) !important;
  transition: all 0.2s cubic-bezier(0.32,0.72,0,1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 18px !important;
  height: 56px !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: 1.25rem !important;
}

html[data-tema="bar"] body #puja-panel-slot .btn-rilancia::after,
html[data-tema="bar"] body .asta-row-puja .btn-rilancia::after {
  content: attr(data-tot) !important;
  display: block !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 900 !important;
  font-variation-settings: 'wdth' 108 !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 1.6rem !important;
  letter-spacing: -0.02em !important;
  padding-left: 16px !important;
  margin-left: 16px !important;
  border-left: 1.5px solid rgba(124,52,0,0.35) !important;
  position: static !important;
  background: none !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  animation: none !important;
  color: #1a0800 !important;
}

html[data-tema="bar"] body #puja-panel-slot .btn-rilancia::before,
html[data-tema="bar"] body .asta-row-puja .btn-rilancia::before {
  display: none !important;
}

html[data-tema="bar"] body #puja-panel-slot .btn-rilancia:hover,
html[data-tema="bar"] body .asta-row-puja .btn-rilancia:hover {
  box-shadow:
    0 12px 38px rgba(217,119,6,0.75),
    0 1px 0 rgba(255,255,240,0.65) inset,
    0 0 35px rgba(251,191,36,0.50) !important;
  transform: translateY(-2px) !important;
}

html[data-tema="bar"] body #puja-panel-slot .btn-rilancia:active,
html[data-tema="bar"] body .asta-row-puja .btn-rilancia:active {
  transform: translateY(1px) !important;
  border-bottom-width: 2px !important;
}

html[data-tema="bar"] body #puja-panel-slot .quick-bids-row,
html[data-tema="bar"] body .asta-row-puja .quick-bids-row {
  background: rgba(10,16,28,0.90) !important;
  border: 1px solid rgba(251,191,36,0.30) !important;
  border-radius: 10px !important;
  gap: 5px !important;
  padding: 5px !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.5) !important;
  display: flex !important;
  width: 100% !important;
  margin: 0 !important;
}

html[data-tema="bar"] body #puja-panel-slot .btn-quick,
html[data-tema="bar"] body .asta-row-puja .btn-quick {
  flex: 1 1 0% !important;
  width: auto !important;
  height: 38px !important;
  border-radius: 7px !important;
  background: rgba(255,255,255,0.05) !important;
  color: #FCD34D !important;
  border: 1px solid rgba(251,191,36,0.22) !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s !important;
  box-shadow: none !important;
}

html[data-tema="bar"] body #puja-panel-slot .btn-quick:hover,
html[data-tema="bar"] body .asta-row-puja .btn-quick:hover {
  background: rgba(251,191,36,0.25) !important;
  color: #FFFFFF !important;
  border-color: #FFB04A !important;
  box-shadow: 0 0 14px rgba(251,191,36,0.45) !important;
  transform: scale(1.02) !important;
}

html[data-tema="bar"] body #puja-panel-slot .manual-bid-row,
html[data-tema="bar"] body .asta-row-puja .manual-bid-row {
  background: rgba(10,16,28,0.90) !important;
  border: 1px solid rgba(251,191,36,0.30) !important;
  border-radius: 10px !important;
  padding: 5px !important;
  gap: 5px !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.5) !important;
}

html[data-tema="bar"] body #puja-panel-slot .inp-rilancio,
html[data-tema="bar"] body .asta-row-puja .inp-rilancio {
  flex: 1 1 auto !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 38px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #FCD34D !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  text-align: left !important;
  padding: 0 12px !important;
}

html[data-tema="bar"] body #puja-panel-slot .inp-rilancio::placeholder,
html[data-tema="bar"] body .asta-row-puja .inp-rilancio::placeholder {
  color: rgba(242,234,222,0.35) !important;
  font-family: 'Space Mono', monospace !important;
}

html[data-tema="bar"] body #puja-panel-slot .btn-manuale,
html[data-tema="bar"] body .asta-row-puja .btn-manuale {
  flex: 0 0 auto !important;
  height: 38px !important;
  padding: 0 18px !important;
  border-radius: 7px !important;
  background: rgba(255,255,255,0.05) !important;
  color: #FCD34D !important;
  border: 1px solid rgba(251,191,36,0.22) !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s !important;
  box-shadow: none !important;
}

html[data-tema="bar"] body #puja-panel-slot .btn-manuale:hover,
html[data-tema="bar"] body .asta-row-puja .btn-manuale:hover {
  background: rgba(251,191,36,0.25) !important;
  color: #FFFFFF !important;
  border-color: #FFB04A !important;
  box-shadow: 0 0 14px rgba(251,191,36,0.45) !important;
  transform: scale(1.02) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA SERATA D'ASTA: GALA CLASICA / SUBASTA ITALIANA (OPZIONE 1)
   Placca architettonica a bordi netti (4px), orologeria di lusso,
   cifra in Instrument Serif corsivo come nei cataloghi d'asta d'arte italiani.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-tema="serata"] body #puja-panel-slot .btn-rilancia,
html:not([data-tema]) body #puja-panel-slot .btn-rilancia,
html[data-tema="serata"] body .asta-row-puja .btn-rilancia,
html:not([data-tema]) body .asta-row-puja .btn-rilancia {
  background: linear-gradient(135deg, #FFF9EB 0%, #F5CF6B 25%, #E2A726 62%, #B87B05 100%) !important;
  color: #140A02 !important;
  border: 1px solid rgba(255, 235, 180, 0.70) !important;
  border-bottom: 2.5px solid #78350f !important;
  border-radius: 2px !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.50),
    0 1px 0 rgba(255,255,255,0.85) inset,
    0 0 20px rgba(251,191,36,0.25) !important;
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em !important;
  text-transform: capitalize !important;
  text-shadow: 0 1px 1px rgba(255,255,255,0.50) !important;
  transition: all 0.2s cubic-bezier(0.32,0.72,0,1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 18px !important;
  height: 56px !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: 1.85rem !important;
}

html[data-tema="serata"] body #puja-panel-slot .btn-rilancia::after,
html:not([data-tema]) body #puja-panel-slot .btn-rilancia::after,
html[data-tema="serata"] body .asta-row-puja .btn-rilancia::after,
html:not([data-tema]) body .asta-row-puja .btn-rilancia::after {
  content: attr(data-tot) !important;
  display: block !important;
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 2.3rem !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  padding-left: 16px !important;
  margin-left: 16px !important;
  border-left: 1.5px solid rgba(120,53,15,0.38) !important;
  position: static !important;
  background: none !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  animation: none !important;
  color: #140A02 !important;
  text-shadow: none !important;
}

html[data-tema="serata"] body #puja-panel-slot .btn-rilancia::before,
html:not([data-tema]) body #puja-panel-slot .btn-rilancia::before,
html[data-tema="serata"] body .asta-row-puja .btn-rilancia::before,
html:not([data-tema]) body .asta-row-puja .btn-rilancia::before {
  display: none !important;
}

html[data-tema="serata"] body #puja-panel-slot .btn-rilancia:hover,
html:not([data-tema]) body #puja-panel-slot .btn-rilancia:hover,
html[data-tema="serata"] body .asta-row-puja .btn-rilancia:hover,
html:not([data-tema]) body .asta-row-puja .btn-rilancia:hover {
  box-shadow:
    0 12px 34px rgba(217,119,6,0.65),
    0 1px 0 rgba(255,255,255,0.90) inset,
    0 0 28px rgba(251,191,36,0.40) !important;
  transform: translateY(-1.5px) !important;
}

html[data-tema="serata"] body #puja-panel-slot .btn-rilancia:active,
html:not([data-tema]) body #puja-panel-slot .btn-rilancia:active,
html[data-tema="serata"] body .asta-row-puja .btn-rilancia:active,
html:not([data-tema]) body .asta-row-puja .btn-rilancia:active {
  transform: translateY(1px) !important;
  border-bottom-width: 1.5px !important;
}

/* ─── QUICK BIDS SERATA (+5, +10): BARRA A BORDI SOTTILI IN ORO E ZAFFIRO ── */
html[data-tema="serata"] body #puja-panel-slot .quick-bids-row,
html:not([data-tema]) body #puja-panel-slot .quick-bids-row,
html[data-tema="serata"] body .asta-row-puja .quick-bids-row,
html:not([data-tema]) body .asta-row-puja .quick-bids-row {
  background: rgba(14,22,36,0.90) !important;
  border: 1px solid rgba(251,191,36,0.35) !important;
  border-radius: 4px !important;
  gap: 4px !important;
  padding: 4px !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3) !important;
  display: flex !important;
  width: 100% !important;
  margin: 0 !important;
}

html[data-tema="serata"] body #puja-panel-slot .btn-quick,
html:not([data-tema]) body #puja-panel-slot .btn-quick,
html[data-tema="serata"] body .asta-row-puja .btn-quick,
html:not([data-tema]) body .asta-row-puja .btn-quick {
  flex: 1 1 0% !important;
  width: auto !important;
  height: 38px !important;
  border-radius: 3px !important;
  background: rgba(255,255,255,0.04) !important;
  color: #FCD34D !important;
  border: 1px solid rgba(251,191,36,0.18) !important;
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: italic !important;
  font-size: 1.32rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s !important;
  box-shadow: none !important;
}

html[data-tema="serata"] body #puja-panel-slot .btn-quick:hover,
html:not([data-tema]) body #puja-panel-slot .btn-quick:hover,
html[data-tema="serata"] body .asta-row-puja .btn-quick:hover,
html:not([data-tema]) body .asta-row-puja .btn-quick:hover {
  background: rgba(251,191,36,0.22) !important;
  color: #FFFFFF !important;
  border-color: #FCD34D !important;
  box-shadow: 0 0 14px rgba(251,191,36,0.40) !important;
  transform: translateY(-0.5px) !important;
}

/* ─── OFFERTA MANUALE SERATA (INPUT + TASTO OFFRI) ────────────────────────── */
html[data-tema="serata"] body #puja-panel-slot .manual-bid-row,
html:not([data-tema]) body #puja-panel-slot .manual-bid-row,
html[data-tema="serata"] body .asta-row-puja .manual-bid-row,
html:not([data-tema]) body .asta-row-puja .manual-bid-row {
  background: rgba(14,22,36,0.90) !important;
  border: 1px solid rgba(251,191,36,0.35) !important;
  border-radius: 4px !important;
  padding: 4px !important;
  gap: 4px !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3) !important;
}

html[data-tema="serata"] body #puja-panel-slot .inp-rilancio,
html:not([data-tema]) body #puja-panel-slot .inp-rilancio,
html[data-tema="serata"] body .asta-row-puja .inp-rilancio,
html:not([data-tema]) body .asta-row-puja .inp-rilancio {
  flex: 1 1 auto !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 38px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #FCD34D !important;
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: italic !important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  text-align: left !important;
  padding: 0 12px !important;
}

html[data-tema="serata"] body #puja-panel-slot .inp-rilancio::placeholder,
html:not([data-tema]) body #puja-panel-slot .inp-rilancio::placeholder,
html[data-tema="serata"] body .asta-row-puja .inp-rilancio::placeholder,
html:not([data-tema]) body .asta-row-puja .inp-rilancio::placeholder {
  color: rgba(242,234,222,0.32) !important;
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: italic !important;
}

html[data-tema="serata"] body #puja-panel-slot .btn-manuale,
html:not([data-tema]) body #puja-panel-slot .btn-manuale,
html[data-tema="serata"] body .asta-row-puja .btn-manuale,
html:not([data-tema]) body .asta-row-puja .btn-manuale {
  flex: 0 0 auto !important;
  height: 38px !important;
  padding: 0 18px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,0.04) !important;
  color: #FCD34D !important;
  border: 1px solid rgba(251,191,36,0.20) !important;
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.04em !important;
  text-transform: capitalize !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s !important;
  box-shadow: none !important;
}

html[data-tema="serata"] body #puja-panel-slot .btn-manuale:hover,
html:not([data-tema]) body #puja-panel-slot .btn-manuale:hover,
html[data-tema="serata"] body .asta-row-puja .btn-manuale:hover,
html:not([data-tema]) body .asta-row-puja .btn-manuale:hover {
  background: rgba(251,191,36,0.22) !important;
  color: #FFFFFF !important;
  border-color: #FCD34D !important;
  box-shadow: 0 0 14px rgba(251,191,36,0.40) !important;
  transform: translateY(-0.5px) !important;
}

/* ─── TABS PANEL: COLORE BLU ANTEPRIMA ANCHE PER IL TABELLONE ───────────── */
html[data-tema="serata"] body .tabs-panel,
html:not([data-tema]) body .tabs-panel {
  /* Stesso identico colore blu elegante di Anteprima */
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important;
  border: 1px solid rgba(251,191,36,0.28) !important;
  border-top: 3px solid #FFB04A !important;
  border-radius: 12px !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.45),
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 0 25px rgba(251,191,36,0.06) !important;
}

html[data-tema="serata"] body .tabs-nav,
html:not([data-tema]) body .tabs-nav {
  background: transparent !important;
  border-bottom: 1px solid rgba(251,191,36,0.18) !important;
  padding: 0 10px !important;
  gap: 6px !important;
}

html[data-tema="serata"] body .tab-btn,
html:not([data-tema]) body .tab-btn {
  background: none !important;
  border: none !important;
  border-bottom: 2.5px solid transparent !important;
  border-radius: 0 !important;
  color: #94a3b8 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 13px 20px !important;
  transition: all 0.2s cubic-bezier(0.32,0.72,0,1) !important;
  font-weight: 700 !important;
}

html[data-tema="serata"] body .tab-btn:hover,
html:not([data-tema]) body .tab-btn:hover {
  color: #FFB04A !important;
  background: rgba(251,191,36,0.07) !important;
}

/* Tab Attiva: Oro puro con glow caldo */
html[data-tema="serata"] body .tab-btn.active,
html:not([data-tema]) body .tab-btn.active {
  background: rgba(251,191,36,0.12) !important;
  color: #FFB04A !important;
  border-bottom: 3px solid #FFB04A !important;
  border-radius: 0 !important;
  text-shadow: 0 0 16px rgba(251,191,36,0.60) !important;
  font-weight: 800 !important;
}

/* ─── BADGE ADMIN & CONFERMA ─────────────────────────────────────────────── */
html[data-tema="serata"] body .admin-badge,
html:not([data-tema]) body .admin-badge {
  background: rgba(251,191,36,0.15) !important;
  border: 1.5px solid #FFB04A !important;
  color: #FFB04A !important;
  border-radius: 6px !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  box-shadow: 0 0 12px rgba(251,191,36,0.25) !important;
}

html[data-tema="serata"] body .admin-conferma-box,
html:not([data-tema]) body .admin-conferma-box {
  background: rgba(13,20,33,0.95) !important;
  border: 1.5px solid rgba(251,191,36,0.45) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 40px rgba(251,191,36,0.15) !important;
}

html[data-tema="serata"] body .conferma-titolo,
html:not([data-tema]) body .conferma-titolo {
  color: #FFB04A !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
}

/* Bottone Conferma: Verde smeraldo nobile */
html[data-tema="serata"] body #btn-conferma-assegnazione,
html:not([data-tema]) body #btn-conferma-assegnazione {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%) !important;
  color: #f0fdf4 !important;
  border: 1px solid rgba(255,245,190,0.35) !important;
  border-bottom: 4px solid #14532d !important;
  border-radius: 10px !important;
  box-shadow:
    0 6px 24px rgba(22,163,74,0.50),
    0 1px 0 rgba(134,239,172,0.30) inset !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ─── SQUADRE: ORO PER LA MIA SQUADRA E VERDE PER L'OFFERENTE ────────────── */
html[data-tema="serata"] body .sidebar-squadra,
html:not([data-tema]) body .sidebar-squadra {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 !important;
  padding: 7px 10px !important;
  transition: all 0.2s cubic-bezier(0.32,0.72,0,1) !important;
}

html[data-tema="serata"] body .sidebar-squadra:hover,
html:not([data-tema]) body .sidebar-squadra:hover {
  background: rgba(251,191,36,0.05) !important;
  border-left-color: rgba(251,191,36,0.4) !important;
}

html[data-tema="serata"] body .sidebar-squadra.mia-squadra,
html:not([data-tema]) body .sidebar-squadra.mia-squadra {
  border-left: 3.5px solid #FFB04A !important;
  background: rgba(251,191,36,0.08) !important;
}

html[data-tema="serata"] body .sidebar-squadra.mia-squadra .sq-nome,
html:not([data-tema]) body .sidebar-squadra.mia-squadra .sq-nome {
  color: #FFB04A !important;
  font-weight: 800 !important;
  text-shadow: 0 0 12px rgba(251,191,36,0.35) !important;
}

html[data-tema="serata"] body .sidebar-squadra.offerente-attuale,
html:not([data-tema]) body .sidebar-squadra.offerente-attuale {
  border-left: 3.5px solid #22C55E !important;
  background: rgba(34,197,94,0.09) !important;
}

html[data-tema="serata"] body .sidebar-squadra.offerente-attuale .sq-crediti,
html:not([data-tema]) body .sidebar-squadra.offerente-attuale .sq-crediti {
  color: #22C55E !important;
  text-shadow: 0 0 16px rgba(34,197,94,0.45) !important;
  font-weight: 800 !important;
}

html[data-tema="serata"] body .sidebar-squadra.offerente-attuale .sq-nome,
html:not([data-tema]) body .sidebar-squadra.offerente-attuale .sq-nome {
  color: #dcfce7 !important;
  font-weight: 700 !important;
}

html[data-tema="serata"] body .sq-nome,
html:not([data-tema]) body .sq-nome {
  color: #cbd5e1 !important;
  font-weight: 600 !important;
}

html[data-tema="serata"] body .sq-crediti,
html:not([data-tema]) body .sq-crediti {
  color: #f8fafc !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 700 !important;
}

/* ─── FILTRI: PILLOLE D'ORO E ARDESIA ────────────────────────────────────── */
html[data-tema="serata"] body .storico-filtro-btn,
html[data-tema="serata"] body .filtro-btn,
html:not([data-tema]) body .storico-filtro-btn,
html:not([data-tema]) body .filtro-btn {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(251,191,36,0.22) !important;
  color: #cbd5e1 !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  transition: all 0.15s !important;
}

html[data-tema="serata"] body .storico-filtro-btn.active,
html[data-tema="serata"] body .filtro-btn.active,
html:not([data-tema]) body .storico-filtro-btn.active,
html:not([data-tema]) body .filtro-btn.active {
  background: rgba(251,191,36,0.20) !important;
  border-color: #FFB04A !important;
  color: #FFB04A !important;
  box-shadow: 0 0 12px rgba(251,191,36,0.30) !important;
}

/* ─── URGENZA: ROSSO FUOCO CON ORO ───────────────────────────────────────── */
html[data-tema="serata"] body.puja-urgente #puja-panel-slot,
html:not([data-tema]) body.puja-urgente #puja-panel-slot {
  border-color: rgba(239,68,68,0.60) !important;
  border-top-color: #ef4444 !important;
  box-shadow: 0 0 0 1px rgba(239,68,68,0.15) inset, 0 28px 70px rgba(0,0,0,0.7), 0 0 70px rgba(239,68,68,0.25) !important;
}

html[data-tema="serata"] body.puja-urgente #puja-panel-slot::before,
html:not([data-tema]) body.puja-urgente #puja-panel-slot::before {
  background: linear-gradient(90deg, transparent 0%, rgba(239,68,68,0.7) 20%, #ef4444 50%, rgba(239,68,68,0.7) 80%, transparent 100%) !important;
}

html[data-tema="serata"] body.puja-urgente #puja-panel-slot .btn-rilancia,
html:not([data-tema]) body.puja-urgente #puja-panel-slot .btn-rilancia {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #991b1b 100%) !important;
  color: #ffffff !important;
  border-bottom-color: #7f1d1d !important;
  box-shadow: 0 8px 32px rgba(220,38,38,0.70) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
   ████████████████  IL BAR — AUTENTICO LEGNO VISIBILE E CALDO  ███████████████
   ═══════════════════════════════════════════════════════════════════════════
   Obiettivo: LA MADERA DEVE VEDERSI SENZA ESSERE ECCESSIVA!
   - Bancone d'asta centrale in caldo legno rovere/noce cerato (#4d2b15 -> #351c0c)
     con riflesso satinato e cornice d'ottone
   - Trave superiore del bar in legno massello (#563119 -> #3c200e)
   - Pannelli in legno nobile bruno caldo (#3a1f0f -> #261308) bordati d'oro
   - Panno verde inglese per il tabellone
   - Boiserie di fondo con doghe verticali vive e calde
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── BODY & PITCH-BG: BOISERIE CALDA CON DOGHE DI LEGNO ─────────────────── */
html[data-tema="bar"] body,
html[data-tema="bar"] .pitch-bg {
  background-color: #381e0e !important;
  background-image:
    /* Luce ambrata morbida della lampada da taverna */
    radial-gradient(ellipse 90% 65% at 50% 12%, rgba(255,200,120,0.22) 0%, transparent 68%),
    /* Fuga scura tra i listoni di legno ogni 160px con bisello illuminato */
    repeating-linear-gradient(90deg,
      rgba(15,7,3,0.85) 0px 3px,
      rgba(215,155,95,0.28) 3px 5px,
      rgba(60,30,15,0) 5px 157px,
      rgba(15,7,3,0.65) 157px 160px),
    /* Gradiente ricco del legno */
    linear-gradient(180deg, #4a2813 0%, #361c0c 50%, #241106 100%) !important;
  background-attachment: fixed !important;
  filter: none !important;
}

html[data-tema="bar"] .pitch-bg::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse 70% 50% at 50% 5%, rgba(255,215,140,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(15,7,3,0.45) 100%) !important;
}

/* ─── TRAVE SUPERIORE DEL BAR (VIGA DE MADERA OSCURA NOBLE CON LATÓN) ─────── */
html[data-tema="bar"] body .asta-header {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,215,140,0.12) 0%, transparent 65%),
    linear-gradient(180deg, #1C1008 0%, #120A05 100%) !important;
  border-bottom: 3.5px solid #C9A257 !important;
  box-shadow:
    0 6px 20px rgba(0,0,0,0.75),
    0 1px 0 rgba(255,230,160,0.22) inset !important;
  position: relative !important;
}

html[data-tema="bar"] body .asta-header::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: -3px !important; height: 3px !important;
  pointer-events: none !important;
  background: linear-gradient(90deg,
    rgba(122,96,58,0) 0%, #C9A257 10%, #F3DEB0 26%, #A88547 44%,
    #F3DEB0 62%, #C9A257 80%, rgba(122,96,58,0) 100%) !important;
  box-shadow: 0 0 10px rgba(228,180,90,0.45) !important;
}

/* ─── TAVOLO D'ASTA CENTRALE: MOSTRADOR DE CAOBA / COÑAC PULIDO CON LUSTRE ── */
html[data-tema="bar"] body #puja-panel-slot,
html[data-tema="bar"] body.layout-admin .asta-row-puja {
  position: relative !important;
  border: 4px solid transparent !important;
  border-radius: 12px !important;
  background:
    /* Riflesso dorato ambrato caldo sul piano lucido del bancone */
    radial-gradient(ellipse 85% 55% at 50% -10%, rgba(255,210,130,0.26) 0%, transparent 65%) padding-box,
    /* VENA NATURALE DEL LEGNO (Frattale organico, zero righe artificiali!) */
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27260%27%20height%3D%27260%27%3E%3Cfilter%20id%3D%27w%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.012%200.25%27%20numOctaves%3D%274%27%20seed%3D%275%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270.35%200%200%200%200.25%200%200.22%200%200%200.15%200%200%200.1%200%200.08%200%200%200%200.35%200%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27260%27%20height%3D%27260%27%20filter%3D%27url%28%23w%29%27%2F%3E%3C%2Fsvg%3E") padding-box,
    /* Caldo legno noce/ciliegio da pub con toni cognac caldi */
    linear-gradient(180deg, #4E2713 0%, #351A0A 50%, #200E04 100%) padding-box,
    /* Cornice in massello d'ottone dorato con riflessi */
    linear-gradient(152deg,
      #FFE9C4 0%, #D6BA8E 12%, #97815F 28%,
      #60503C 48%, #97815F 65%, #F0D9AC 84%, #77644C 100%) border-box !important;
  background-size: auto, 260px 260px, auto, auto !important;
  box-shadow:
    0 16px 40px rgba(0,0,0,0.75),
    inset 0 2px 8px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,230,170,0.26) !important;
}

/* Listello di noce massello intagliato sul bordo superiore */
html[data-tema="bar"] body #puja-panel-slot::before,
html[data-tema="bar"] body.layout-admin .asta-row-puja::before {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; top: 0 !important;
  height: 6px !important;
  background: linear-gradient(180deg, #8A4E26 0%, #5C3217 100%) !important;
  border-bottom: 1px solid rgba(255,225,160,0.40) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.50) !important;
  z-index: 5 !important;
  border-radius: 8px 8px 0 0 !important;
}

/* Polaroid del giocatore con basetta in legno */
html[data-tema="bar"] body #puja-panel-slot .cc-avatar,
html[data-tema="bar"] body.layout-admin .asta-row-puja .cc-avatar {
  border: 3px solid #FDFBF7 !important;
  border-bottom: 12px solid #FDFBF7 !important;
  border-radius: 4px !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.65),
    0 0 0 1.5px #4a2813 !important;
  background: #111 !important;
}

/* ─── IL CONTO / PORTAFOGLIO (#mio-panel): LAVAGNA IN ARDESIA DA PUB ─────────
   In un vero pub il conto non è un'altra tavola identica: è la lavagna di
   ardesia scura incorniciata in legno e ottone. Spezza il marrone monocromo! */
html[data-tema="bar"] body #mio-panel,
html[data-tema="bar"] body .admin-panel {
  position: relative !important;
  border: 3px solid transparent !important;
  border-radius: 10px !important;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,255,255,0.06) 0%, transparent 60%) padding-box,
    linear-gradient(180deg, #1A1C20 0%, #121315 100%) padding-box,
    linear-gradient(152deg,
      #FFE9C4 0%, #D6BA8E 12%, #97815F 28%,
      #60503C 48%, #97815F 65%, #F0D9AC 84%, #77644C 100%) border-box !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,0.70),
    inset 0 2px 5px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* Header del conto pulito senza placca: il saldo poggia direttamente sul fondo */
html[data-tema="bar"] body .mio-panel-header {
  background: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding: 0 0 12px 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}
html[data-tema="bar"] body #mio-panel .mio-nome {
  color: var(--sc-tenue) !important;
}
html[data-tema="bar"] body #mio-panel .crediti-badge {
  color: var(--sc-testo) !important;
  background: none !important;
}

/* Bottoni dentro a Mio Panel in stile ardesia con filetto d'ottone */
html[data-tema="bar"] body #mio-panel .btn-secondary {
  background: linear-gradient(180deg, #26292E 0%, #18191C 100%) !important;
  border: 1px solid rgba(212,175,55,0.45) !important;
  color: #FFE6BA !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
}
html[data-tema="bar"] body #mio-panel .btn-secondary:hover {
  background: linear-gradient(180deg, #32363D 0%, #202226 100%) !important;
  border-color: #D4AF37 !important;
  color: #FFF !important;
}

/* ─── CORRIMANO E RIEPILOGO SQUADRE: LEGNO WENGÉ / NOCE SCURO CON BORDATURA ── */
html[data-tema="bar"] body .panel-budget,
html[data-tema="bar"] body #budget-bar,
html[data-tema="bar"] body .card {
  position: relative !important;
  border: 3px solid transparent !important;
  border-radius: 10px !important;
  background:
    radial-gradient(ellipse 75% 50% at 50% 0%, rgba(255,210,130,0.08) 0%, transparent 60%) padding-box,
    linear-gradient(180deg, #20130B 0%, #130A05 100%) padding-box,
    linear-gradient(152deg,
      #F0DCB4 0%, #C9AE84 12%, #8A755A 30%,
      #5A4A38 48%, #8A755A 66%, #E4CFA6 84%, #6E5C46 100%) border-box !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.65),
    inset 0 2px 5px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,236,200,0.14) !important;
}

/* Targhette dei titoli in noce scuro massello con filetto d'ottone */
html[data-tema="bar"] body .panel-budget-hdr {
  background: linear-gradient(180deg, #3A1E0D 0%, #241106 100%) !important;
  border: 1px solid #C9A257 !important;
  border-radius: 5px !important;
  padding: 5px 12px !important;
  margin-bottom: 8px !important;
  color: #FFE6BA !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7) !important;
  box-shadow: inset 0 1px 0 rgba(255,230,160,0.20), 0 2px 6px rgba(0,0,0,0.4) !important;
}

/* ─── TABS PANEL: PANNO VERDE INGLESE CON CORNICE D'OTTONE ──────────────── */
html[data-tema="bar"] body .tabs-panel {
  position: relative !important;
  border: 3px solid transparent !important;
  border-radius: 10px !important;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cfilter%20id%3D%27p%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%271.2%27%20numOctaves%3D%272%27%20seed%3D%279%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%270.6%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27200%27%20height%3D%27200%27%20filter%3D%27url%28%23p%29%27%2F%3E%3C%2Fsvg%3E") padding-box,
    linear-gradient(180deg, #184227 0%, #11311d 100%) padding-box,
    linear-gradient(152deg,
      #F0DCB4 0%, #C9AE84 12%, #8A755A 30%,
      #5A4A38 48%, #8A755A 66%, #E4CFA6 84%, #6E5C46 100%) border-box !important;
  background-size: 200px 200px, auto, auto !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.55),
    inset 0 2px 6px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,236,200,0.15) !important;
}

/* Carta del giocatore dentro l'asta: trasparente */
html[data-tema="bar"] .puja-panel-slot .chiamata-card,
html[data-tema="bar"] body.layout-admin .asta-row-puja .chiamata-card {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UNIFORMAZIONE LISTE (ZERO EFFETTO ZEBRA IN ENTRAMBI I TEMI)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── TEMA IL BAR: sfondo uniforme pulito sul panno verde ────────────────── */
html[data-tema="bar"] body .liberi-list li,
html[data-tema="bar"] body #liberi-list > div,
html[data-tema="bar"] body .storico-list li,
html[data-tema="bar"] body .liberi-list li:nth-child(even),
html[data-tema="bar"] body .liberi-list li:nth-child(odd),
html[data-tema="bar"] body .storico-list li:nth-child(even),
html[data-tema="bar"] body .storico-list li:nth-child(odd) {
  background: rgba(10, 26, 16, 0.70) !important;
  border: 1px solid rgba(166, 146, 124, 0.20) !important;
  border-radius: 6px !important;
}

html[data-tema="bar"] body .liberi-list li:hover,
html[data-tema="bar"] body .storico-list li:hover {
  background: rgba(20, 48, 28, 0.85) !important;
  border-color: rgba(201, 162, 87, 0.50) !important;
}

/* ─── TEMA SERATA D'ASTA: sfondo uniforme ardesia su tutte le righe ─────── */
html[data-tema="serata"] body .liberi-list li,
html[data-tema="serata"] body #liberi-list > div,
html[data-tema="serata"] body .storico-list li,
html:not([data-tema]) body .liberi-list li,
html:not([data-tema]) body #liberi-list > div,
html:not([data-tema]) body .storico-list li,
html[data-tema="serata"] body .liberi-list li:nth-child(even),
html[data-tema="serata"] body .liberi-list li:nth-child(odd),
html:not([data-tema]) body .liberi-list li:nth-child(even),
html:not([data-tema]) body .liberi-list li:nth-child(odd) {
  background: rgba(24, 34, 52, 0.70) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 6px !important;
}

html[data-tema="serata"] body .liberi-list li:hover,
html[data-tema="serata"] body .storico-list li:hover,
html:not([data-tema]) body .liberi-list li:hover,
html:not([data-tema]) body .storico-list li:hover {
  background: rgba(35, 50, 75, 0.88) !important;
  border-color: rgba(251, 191, 36, 0.40) !important;
}


/* Overrides for offerente strong to match offerta colors */
html[data-tema="cuoio"] body #puja-panel-slot .cc-offerente strong, html[data-tema="cuoio"] body.layout-admin .asta-row-puja .cc-offerente strong { color: #2F6B3F !important; }
html[data-tema="lavagna"] body #puja-panel-slot .cc-offerente strong, html[data-tema="lavagna"] body.layout-admin .asta-row-puja .cc-offerente strong { color: #FF6FC4 !important; text-shadow: 0 0 12px rgba(255,60,172,.5) !important; }
html[data-tema="sala-giochi"] body #puja-panel-slot .cc-offerente strong, html[data-tema="sala-giochi"] body.layout-admin .asta-row-puja .cc-offerente strong { color: var(--text-primary) !important; text-shadow: 5px 5px 0 #E8B038, 9px 9px 0 rgba(20,16,36,.14) !important; font-family: 'Press Start 2P', var(--font-display) !important; font-size: clamp(1.1rem, 2.5vw, 1.6rem) !important; }

html[data-tema="serata"] body .cc-offerente strong, html:not([data-tema]) body .cc-offerente strong { color: #FFB04A !important; text-shadow: 0 0 32px rgba(251,191,36,0.65), 0 0 70px rgba(245,158,11,0.30), 0 2px 10px rgba(0,0,0,0.8) !important; }
html[data-tema="cuoio"] { --text-on-gold: #ffffff; }
html[data-tema="lavagna"] { --text-on-gold: #ffffff; }

/* ══ Fix globali quando Anteprima è aperta (spazio ridotto) ══ */
.asta-live-layout:has(#tab-anteprima.drawer-open) .panel-budget {
  min-width: 0 !important;
  scrollbar-width: thin !important;
}
.asta-live-layout:has(#tab-anteprima.drawer-open) .panel-budget::-webkit-scrollbar {
  width: 4px !important;
}
.asta-live-layout:has(#tab-anteprima.drawer-open) .panel-budget::-webkit-scrollbar-thumb {
  background: rgba(var(--sc-carta, 0,0,0), 0.25) !important;
  border-radius: 4px !important;
}
.asta-live-layout:has(#tab-anteprima.drawer-open) #budget-bar {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr)) !important;
  gap: 4px 8px !important;
  min-width: 0 !important;
  width: 100% !important;
}
.asta-live-layout:has(#tab-anteprima.drawer-open) #budget-bar .sidebar-squadra {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 3px 6px 4px 6px !important;
  column-gap: 4px !important;
}
.asta-live-layout:has(#tab-anteprima.drawer-open) #budget-bar .sq-nome {
  font-size: 0.78rem !important;
  min-width: 0 !important;
}
.asta-live-layout:has(#tab-anteprima.drawer-open) #budget-bar .sq-crediti {
  font-size: 0.88rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  justify-self: end !important;
  padding-left: 4px !important;
  padding-right: 2px !important;
}
.asta-live-layout:has(#tab-anteprima.drawer-open) #budget-bar .sq-bottom {
  font-size: 0.72rem !important;
  min-width: 0 !important;
}
.asta-live-layout:has(#tab-anteprima.drawer-open) #budget-bar .sq-portieri,
.asta-live-layout:has(#tab-anteprima.drawer-open) #budget-bar .sq-svincoli {
  font-size: 0.72rem !important;
}

body.layout-admin .asta-live-layout:has(#tab-anteprima.drawer-open) .asta-row-panels {
  gap: 8px !important;
}
body.layout-admin .asta-live-layout:has(#tab-anteprima.drawer-open) .asta-row-panels > .panel-budget {
  flex: 1.5 1 240px !important;
  min-width: 200px !important;
}
body.layout-admin .asta-live-layout:has(#tab-anteprima.drawer-open) .asta-row-panels > #admin-panel {
  flex: 1 1 200px !important;
  min-width: 170px !important;
}
body.layout-admin .asta-live-layout:has(#tab-anteprima.drawer-open) .asta-row-panels > #mio-panel {
  flex: 0.9 1 180px !important;
  min-width: 140px !important;
}

html[data-tema="sala-giochi"] .asta-live-layout:has(#tab-anteprima.drawer-open) #budget-bar .sq-crediti {
  font-size: 0.40rem !important;
  padding: 2px 3px !important;
}
.asta-live-layout:has(#tab-anteprima.drawer-open) #puja-panel-slot .cc-body {
    flex-direction: column !important;
    align-items: flex-start !important; text-align: left !important;
}
.asta-live-layout:has(#tab-anteprima.drawer-open) #puja-panel-slot .cc-strategia-info,
.asta-live-layout:has(#tab-anteprima.drawer-open) .asta-row-puja .cc-strategia-info {
    text-align: left !important;
    margin-left: 0 !important; 
}

.asta-live-layout:has(#tab-anteprima.drawer-open) #puja-panel-slot .cc-offerta-box,
.asta-live-layout:has(#tab-anteprima.drawer-open) .asta-row-puja .cc-offerta-box {
    position: static !important;
    margin-bottom: 8px !important;
    align-self: flex-start !important;
}
.asta-live-layout:has(#tab-anteprima.drawer-open) #puja-panel-slot .cc-offerente strong,
.asta-live-layout:has(#tab-anteprima.drawer-open) .asta-row-puja .cc-offerente strong {
    font-size: clamp(1.2rem, 3vw, 1.5rem) !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.15 !important;
}


html[data-tema="sala-giochi"] .asta-live-layout:has(#tab-anteprima.drawer-open) #puja-panel-slot .cc-offerente strong,
html[data-tema="sala-giochi"] .asta-live-layout:has(#tab-anteprima.drawer-open) .asta-row-puja .cc-offerente strong {
    font-size: clamp(0.9rem, 2vw, 1.1rem) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   FIX LAVAGNA: OTTIMIZZAZIONE VISTA ADMIN & LEGGIBILITÀ NOME/META/FASCIA
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Nome giocatore: mai tagliato alla fine (es. punto o lettere inclinate) */
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .cc-nome,
html[data-tema="lavagna"] body #puja-panel-slot .cc-nome {
  overflow: visible !important;
  text-overflow: clip !important;
  padding-right: 18px !important;
  line-height: 1.05 !important;
}
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .cc-header,
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .cc-info,
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .cc-nome-row {
  overflow: visible !important;
}

/* 2. Squadra ed età (meta): ben visibili, non microscopici, contrasto neon */
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .cc-meta,
html[data-tema="lavagna"] body #puja-panel-slot .cc-meta {
  font-size: 0.88rem !important;
  line-height: 1.25 !important;
  gap: 8px !important;
  margin-top: 4px !important;
  color: #CBD5E1 !important;
  overflow: visible !important;
}
html[data-tema="lavagna"] .cc-meta .cc-squadra {
  color: #7DE8F7 !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}
html[data-tema="lavagna"] .cc-meta .cc-eta {
  color: #CBD5E1 !important;
}

/* 3. Fascia & Strategia: equilibrio perfetto tra leggibilità e compattezza */
/* Vista Utente: grande e chiara da lontano */
html[data-tema="lavagna"] body #puja-panel-slot .cc-strategia-info {
  font-size: 1.05rem !important;
}
html[data-tema="lavagna"] body #puja-panel-slot .cc-offerta-label {
  font-size: 0.95rem !important;
}

/* Vista Admin: dimensione intermedia (0.86rem), leggibile ma non gonfia la carta */
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .cc-strategia-info {
  font-size: 0.86rem !important;
  line-height: 1.3 !important;
  margin-top: 3px !important;
  padding: 2px 0 2px 6px !important;
}
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .cc-strategia-info strong {
  font-size: 0.90rem !important;
}
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .cc-commento-preview {
  font-size: 0.78rem !important;
  line-height: 1.3 !important;
  padding: 4px 8px !important;
  margin-top: 3px !important;
}
html[data-tema="lavagna"] body.layout-admin .asta-row-puja .cc-offerta-label {
  font-size: 0.78rem !important;
}

/* ══ LAVAGNA: PAUSA ASTA E BANNER ══ */
html[data-tema="lavagna"] .asta-pausa-banner {
  font-family: 'Kalam', Archivo, sans-serif !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.04em !important;
  border-bottom: 2px solid rgba(255, 45, 45, 0.4) !important;
}
html[data-tema="lavagna"] .chiamata-card.in-pausa {
  background: rgba(255, 45, 45, 0.08) !important;
  border: 2px dashed rgba(255, 45, 45, 0.7) !important;
  box-shadow: 0 0 25px rgba(255, 45, 45, 0.3) !important;
}
html[data-tema="lavagna"] .cc-pausa-badge {
  font-family: 'Kalam', Archivo, sans-serif !important;
  font-size: 0.82rem !important;
}
html[data-tema="lavagna"] .cc-pausa-squadra {
  font-family: 'Kalam', Archivo, sans-serif !important;
  font-size: 1.4rem !important;
}
html[data-tema="lavagna"] .cc-pausa-squadra strong {
  color: #FF5E82 !important;
  text-shadow: 0 0 14px rgba(255, 45, 45, 0.6) !important;
}
html[data-tema="lavagna"] .cc-pausa-desc,
html[data-tema="lavagna"] .cc-pausa-attesa {
  font-family: 'Kalam', Archivo, sans-serif !important;
  font-size: 0.98rem !important;
  color: #CBD5E1 !important;
}

/* ══ SALA GIOCHI: PAUSA ASTA E SQUADRA IN ATTESA ══ */
html[data-tema="sala-giochi"] .cc-pausa-squadra {
  color: #141024 !important;
}
html[data-tema="sala-giochi"] .cc-pausa-squadra strong {
  color: var(--primary) !important;
  text-shadow: none !important;
}
html[data-tema="sala-giochi"] .cc-pausa-desc {
  color: #332E48 !important;
}
html[data-tema="sala-giochi"] .cc-pausa-desc strong {
  color: #141024 !important;
}
html[data-tema="sala-giochi"] .cc-pausa-attesa {
  color: #555068 !important;
}



/* ═══════════════════════════════════════════════════════════════════
   MIGLIORAMENTO GLOBALE LEGGIBILITÀ: ELIMINAZIONE TESTI TROPPO PICCOLI
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Riepilogo squadre (#budget-bar): Tot: X/Y, Portieri, Svincoli */
html body #budget-bar .sq-nome,
html body.layout-admin #budget-bar .sq-nome {
  font-size: 0.86rem !important;
  font-weight: 700 !important;
}
html body:not(.layout-admin) #budget-bar .sq-bottom,
html body:not(.layout-admin) #budget-bar .sq-portieri,
html body:not(.layout-admin) #budget-bar .sq-svincoli {
  font-size: 0.82rem !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}
html body #budget-bar .sq-crediti,
html body.layout-admin #budget-bar .sq-crediti {
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  justify-self: end !important;
}
html[data-tema="lavagna"] body #budget-bar .sq-bottom,
html[data-tema="lavagna"] body.layout-admin #budget-bar .sq-bottom {
  color: #CBD5E1 !important;
}
.panel-budget-hdr {
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}

/* 2. Svincolati & Giocatori Liberi */
#liberi-counter {
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #CBD5E1 !important;
  margin: 6px 0 10px !important;
}
.liberi-list li {
  font-size: 0.90rem !important;
  padding: 6px 10px !important;
}
.liberi-list .l-nome {
  font-size: 0.96rem !important;
  font-weight: 700 !important;
}
.l-valore-label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}
.l-costo {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
}
.l-orig {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
}
.l-tipo-badge {
  font-size: 0.76rem !important;
  font-weight: 800 !important;
}
.l-strategia-badge {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
}
.filtro-ruolo .filtro-btn {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
}

/* 3. Pannello Mio Team (#mio-panel) */
#mio-panel .mio-nome {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
}
#mio-panel .slot-chip {
  font-size: 0.88rem !important;
}
#mio-panel .slot-chip .slot-sub,
#mio-slot-counter .slot-sub {
  font-size: 0.80rem !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  color: #CBD5E1 !important;
}
#mio-panel .slot-chip span,
#mio-panel .slot-chip strong {
  font-size: 1.02rem !important;
  font-weight: 800 !important;
}
#mio-panel .mio-panel-actions .btn {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
}

/* 4. Bottoni Admin (.admin-btn-grid) */
.admin-btn-grid .btn {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  padding: 7px 5px !important;
}
.admin-badge {
  font-size: 0.84rem !important;
  font-weight: 800 !important;
}

/* 5. Header: "Ancora in gioco" ed email */
html body .vivi-chip b {
  font-size: 1.15rem !important;
  font-weight: 900 !important;
}
html body .vivi-chip span {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}
.asta-header-email {
  font-size: 0.80rem !important;
  color: #CBD5E1 !important;
}

/* 6. Tabs (Storico, Rose, Svincolati, Griglia, Anteprima) */
.tab-btn,
.tab-btn .tab-label {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

/* 7. Storico & Rose */
.storico-list li {
  font-size: 0.88rem !important;
}
.storico-tipo {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
}
.storico-sq {
  font-size: 0.84rem !important;
}
.rose-player {
  font-size: 0.70rem !important;
}
.rose-container.rose-compatta .rose-player {
  font-size: 0.65rem !important;
  gap: 3px !important;
}
.rose-badge {
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  padding: 1px 3px !important;
  min-width: 15px !important;
}
.rose-container.rose-compatta .rose-badge {
  font-size: 0.58rem !important;
  padding: 1px 2px !important;
  min-width: 13px !important;
}
.rose-nome {
  font-size: 0.70rem !important;
  line-height: 1.15 !important;
}
.rose-container.rose-compatta .rose-nome {
  font-size: 0.64rem !important;
  line-height: 1.1 !important;
}
.rose-prezzo {
  font-size: 0.66rem !important;
  padding: 1px 4px !important;
  flex-shrink: 0 !important;
}
.rose-container.rose-compatta .rose-prezzo {
  font-size: 0.60rem !important;
  padding: 0 3px !important;
  flex-shrink: 0 !important;
}
.rose-col-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 2px !important;
  padding-bottom: 3px !important;
  margin-bottom: 4px !important;
}
.rose-container.rose-compatta .rose-col-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 1px !important;
  padding-bottom: 2px !important;
  margin-bottom: 3px !important;
}
.rose-col-budget {
  align-self: flex-end !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}
.rose-container.rose-compatta .rose-col-budget {
  align-self: flex-end !important;
  font-size: 0.68rem !important;
  line-height: 1.1 !important;
}
.rose-col-nome {
  width: 100% !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  max-height: 2.35em !important;
}
.rose-container.rose-compatta .rose-col-nome {
  width: 100% !important;
  font-size: 0.70rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  max-height: 2.35em !important;
}
.rose-container.rose-compatta .rose-col {
  flex: 0 0 142px !important;
  width: 142px !important;
}

/* ── Vista Utente: Riepilogo squadre rigorosamente in 4 colonne di 3 righe (12 squadre) ── */
@media (min-width: 769px) {
  html body.layout-partecipante #budget-bar,
  html body:not(.layout-admin) #budget-bar {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, auto) !important;
    gap: 0 14px !important;
    align-content: start !important;
  }
}