:root{
  /* ══ Tema "Serata d'Asta" ══════════════════════════════════════════
     Una sala di sera con una sola lampada accesa. I NOMI delle variabili
     restano identici a prima (nulla nel resto del CSS va toccato):
     cambiano solo i valori. Ruoli:
       - ambra  = la lampada, unico accento luminoso
       - rosso  = solo stato (urgenza, superato), mai decorazione
       - verde  = solo superficie (il banco), mai testo
     ══════════════════════════════════════════════════════════════════ */
  --bg-abyss:#0b0f19;
  --bg-deep:#0f172a;
  --panel-glass-1:rgba(30, 41, 59, 0.85);
  --panel-glass-2:rgba(30, 41, 59, 0.95);
  --panel-glass-3:rgba(15, 23, 42, 0.7);
  --bg-main:#1e293b;
  --bg-card:#334155;
  --bg-elevated:#475569;
  --bg-glass:rgba(30, 41, 59, 0.9);
  --primary:#FFB04A;
  --primary-bright:#FFC578;
  --primary-dark:#C4802B;
  --primary-glow:rgba(255,176,74,.30);
  --primary-subtle:rgba(255,176,74,.09);
  --gold:#FFB04A;
  --gold-bright:#FFC578;
  --gold-deep:#C4802B;
  --gold-glow:rgba(255,176,74,.28);
  --gold-subtle:rgba(255,176,74,.07);
  --fire:#E23A2E;
  --fire-bright:#E23A2E;
  --fire-glow:rgba(226,58,46,.32);
  --success:#4FBF8F;
  --success-glow:rgba(79,191,143,.24);
  --danger:#E23A2E;
  --danger-glow:rgba(226,58,46,.28);
  --text-primary:#f8fafc;
  --text-secondary:#cbd5e1;
  /* Alzato da #6E645A: erano 3.4:1 sul fondo scuro, sotto la soglia AA, e questo
     grigio veste testi da 12px come .gk-header-sub. #8A8076 misura 4.9-5.0:1.
     Stesso identico passo fatto su --sc-tenue in tema-serata.css. */
  --text-muted:#94a3b8;
  --border:rgba(255, 255, 255, 0.12);
  --border-light:rgba(255, 255, 255, 0.25);
  --font-main:Archivo,Inter,-apple-system,BlinkMacSystemFont,sans-serif;
  --font-display:Archivo,Outfit,Inter,sans-serif;
  --font-mono:Space Mono,JetBrains Mono,Fira Code,monospace;
  --font-insegna:Instrument Serif,Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;height:100vh;overflow:hidden}
body{font-family:var(--font-main);font-size:.9rem;line-height:1.5;color:var(--text-primary);background:var(--bg-deep);height:100vh;overflow:hidden}
body::before{content:'';position:fixed;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at 30% 20%,rgba(255,176,74,.03) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(255,184,0,.02) 0%,transparent 50%);animation:spotlight-drift 20s ease-in-out infinite alternate;pointer-events:none;z-index:0}
@keyframes spotlight-drift{0%{transform:translate(0,0)}100%{transform:translate(-3%,-3%)}}
#app{position:relative;z-index:1}
.screen{display:none;min-height:100vh}.screen.active{display:block;height:100vh;overflow-y:auto}
#screen-home .home-header,
#screen-crea-asta .home-header{padding-top:72px}
/* Sfondo tematico calcio per le schermate Strategie (lista, form nuova, editor): campo da gioco
   molto scurito, solo un tocco decorativo che non deve disturbare la lettura del contenuto. */
#screen-strategie-lista.active,
#screen-strategia-form.active,
#screen-strategia-editor.active{
  position:relative;
  background:
    linear-gradient(rgba(8,4,20,.86), rgba(8,4,20,.9)),
    repeating-linear-gradient(125deg, rgba(0,150,75,.16) 0px 70px, rgba(0,100,50,.10) 70px 140px),
    var(--bg-deep);
  background-attachment:fixed;
}
/* Cerchio di centrocampo e linea mediana, molto tenui, fissi al centro dello schermo */
#screen-strategie-lista.active::before,
#screen-strategia-form.active::before,
#screen-strategia-editor.active::before{
  content:'';
  position:fixed;
  top:50%; left:50%;
  width:640px; height:640px;
  transform:translate(-50%,-50%);
  z-index:0;
  pointer-events:none;
  border:2px solid rgba(255,255,255,.05);
  border-radius:50%;
}
#screen-strategie-lista.active::after,
#screen-strategia-form.active::after,
#screen-strategia-editor.active::after{
  content:'';
  position:fixed;
  top:50%; left:0; right:0;
  height:0;
  border-top:2px solid rgba(255,255,255,.045);
  z-index:0;
  pointer-events:none;
}
#screen-strategie-lista.active > *,
#screen-strategia-form.active > *,
#screen-strategia-editor.active > *{position:relative;z-index:1}
.home-header{text-align:center;padding:48px 20px 32px}
.home-logo{font-size:3rem;margin-bottom:8px;filter:drop-shadow(0 0 20px rgba(255,176,74,.4))}
.home-title{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;background:linear-gradient(135deg,var(--primary-bright),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}
.home-subtitle{color:var(--text-secondary);font-size:1rem}
/* Home (menu principale): layout più compatto per far entrare tutte le voci di menu
   in una sola schermata, senza scroll, anche con più voci aggiunte nel tempo. */
#screen-menu-principale .home-header{padding:20px 20px 14px}
#screen-menu-principale .home-logo{font-size:2.1rem;margin-bottom:4px}
#screen-menu-principale .home-title{font-size:clamp(1.3rem,3.4vw,1.9rem);margin-bottom:2px}
#screen-menu-principale .home-subtitle{font-size:.86rem}
#screen-menu-principale .card{padding:10px;margin:0 auto 8px}
#screen-menu-principale .card .btn-lg{padding:11px 20px;font-size:.9rem}
#screen-menu-principale .mt-16{margin-top:8px}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:24px;max-width:700px;margin:0 auto 16px;position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--border-light),transparent)}
.card-title{font-family:var(--font-display);font-size:1.25rem;font-weight:800;margin-bottom:20px}
.card-title-sm{font-size:1rem;font-weight:700;margin-bottom:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:12px}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
label{font-size:.8rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}
input[type=text],input[type=number],select{background:var(--bg-main);border:1px solid var(--border);border-radius:10px;color:var(--text-primary);font-family:var(--font-main);font-size:16px;padding:10px 14px;transition:border-color .2s,box-shadow .2s;width:100%;-webkit-appearance:none}
input:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
.file-drop{background:var(--bg-main);border:2px dashed rgba(255,176,74,.3);border-radius:12px;padding:24px;text-align:center;cursor:pointer;transition:all .2s;color:var(--text-secondary)}
.file-drop:hover,.file-drop.dragover{border-color:var(--primary);background:var(--primary-subtle);color:var(--primary-bright)}
.json-preview{background:var(--bg-main);border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:.82rem;color:var(--success);margin-top:8px}
.json-preview.hidden{display:none}.hint-text{font-size:.78rem;color:var(--text-muted);margin-top:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:10px;cursor:pointer;font-family:var(--font-main);font-size:.9rem;font-weight:600;padding:10px 18px;transition:all .15s;white-space:nowrap;position:relative;overflow:hidden}.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 55%);pointer-events:none}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0) scale(.97)}
/* position:fixed invece di sticky: su mobile (soprattutto iOS) lo sticky dentro un
   contenitore con overflow-y:auto "saltava" durante lo scroll inerziale, rendendo il
   pulsante difficile da toccare con precisione. Fixed lo ancora al viewport, sempre stabile.
   Va DOPO la regola .btn nel file: stessa specificità (0-1-0), e .btn imposta anch'essa
   position (relative) — l'ultima dichiarazione nel foglio di stile vince, quindi questa
   regola deve stare più in basso di .btn o il fixed viene silenziosamente sovrascritto. */
/* top:44px per non finire sotto a .user-email-badge (fixed anch'esso, in alto a sinistra):
   senza questo margine i due elementi si sovrappongono, il badge (z-index piu' alto) copre
   meta' del testo del bottone. Il valore mobile e' piu' basso perche' li' il badge e' piu'
   piccolo (vedi media query di .user-email-badge). */
.btn-back-sticky{position:fixed;top:44px;left:14px;z-index:50;box-shadow:0 2px 10px rgba(0,0,0,.35)}
@media (max-width:520px){
  .btn-back-sticky{top:34px}
}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0) scale(.98)}
/* Il "lift" al passaggio del mouse (.btn:hover sopra) va bene per i CTA normali, ma su
   un pulsante fisso in un angolo, sempre visibile, il micro-spostamento di 1px sotto al
   cursore si percepisce come se "scappasse" mentre lo si punta. Lo disattiviamo qui. */
.btn-back-sticky:hover,.btn-back-sticky:active{transform:none}
/* I bottoni #btn-back-home-menu/#btn-back-home vivono ora fuori da #app (vedi index.html),
   fratelli di tutte le .screen, quindi sempre nel DOM: la visibilità va gestita qui in base
   a quale schermata è attiva, invece che con display/JS nella sezione stessa. */
#btn-back-home-menu,#btn-back-home{display:none}
body:has(#screen-home.active) #btn-back-home-menu{display:inline-flex}
body:has(#screen-crea-asta.active) #btn-back-home{display:inline-flex}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 4px 15px var(--primary-glow)}
.btn-primary:hover{box-shadow:0 6px 20px rgba(255,176,74,.5)}
.btn-secondary{background:var(--bg-elevated);border:1px solid var(--border-light);color:var(--text-primary)}
.btn-secondary:hover{background:var(--bg-glass);border-color:var(--primary)}
.btn-success{background:linear-gradient(135deg,#00c853,var(--success));color:#000;font-weight:700}
.btn-danger{background:linear-gradient(135deg,var(--danger),#c90032);color:#fff;box-shadow:0 4px 12px var(--danger-glow)}
.btn-accent{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#000;font-weight:800}
.btn-lg{padding:14px 28px;font-size:1rem;font-weight:700;border-radius:12px;width:100%}
.import-choice-buttons{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.btn-small{padding:6px 12px;font-size:.8rem;border-radius:8px}.btn-block{width:100%}.btn-esci{color:#ff6b6b!important}
.link-share{display:flex;align-items:center;gap:10px;background:var(--bg-main);border-radius:10px;padding:12px 16px;flex-wrap:wrap}
.link-label{font-size:.8rem;color:var(--text-muted);white-space:nowrap}
.link-text{flex:1;font-family:var(--font-mono);font-size:.8rem;color:var(--primary-bright);word-break:break-all}
.squadre-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.squadre-list li{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-main);border-radius:8px}
.sq-dot.online{color:var(--success)}.sq-dot.offline{color:var(--text-muted)}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}
.text-muted{color:var(--text-muted)}.text-center{text-align:center}
.text-accent{color:var(--gold);font-weight:700}.text-danger{color:var(--danger)}.hidden{display:none!important}
#screen-asta{background:transparent}#screen-asta.active{display:flex!important;flex-direction:column;height:100vh;overflow:hidden}
.asta-header{position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;height:32px;padding:0 10px;background:rgba(6,12,24,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);box-shadow:0 1px 0 rgba(255,176,74,.18),0 6px 24px rgba(0,0,0,.35)}
.asta-header-left{display:flex;align-items:center;gap:10px}
.asta-header-logo{font-size:.88rem;filter:drop-shadow(0 0 6px var(--primary-glow))}
.asta-header-title{font-family:var(--font-display);font-size:.72rem;font-weight:800;background:linear-gradient(90deg,var(--primary-bright),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.asta-header-right{display:flex;align-items:center;gap:6px}.asta-header-right .btn-small{padding:3px 8px;font-size:.68rem;border-radius:6px}
.btn-sound{background:none;border:1px solid var(--border);border-radius:6px;color:var(--text-secondary);font-size:.72rem;padding:2px 6px;cursor:pointer;transition:all .2s}
.btn-sound:hover{border-color:var(--primary);color:var(--primary-bright)}.btn-sound.muted{opacity:.4}
.asta-row-panels{display:flex;gap:10px;padding:0 12px;flex-shrink:0;align-items:stretch}
.asta-row-panels>#admin-panel{flex:1.9;max-height:clamp(160px,26vh,230px);overflow-y:auto}
.asta-row-panels>#mio-panel{flex:1;max-height:clamp(160px,26vh,230px);overflow-y:auto}
.panel-budget{background:linear-gradient(180deg,var(--panel-glass-3) 0%,var(--panel-glass-2) 100%);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:14px;padding:6px 8px;flex:0.75;min-width:0;overflow-y:auto;max-height:clamp(180px,30vh,260px);box-shadow:0 10px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.03)}
.panel-budget-hdr{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);padding:0 0 2px;border-bottom:1px solid var(--border);margin-bottom:2px}
.sidebar-squadre-list{display:flex;flex-direction:column;gap:1px}
.sidebar-squadra{padding:3px 7px;border-radius:7px;border-left:3px solid transparent;transition:all .2s;background:var(--bg-card);margin-bottom:2px;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.sidebar-squadra:hover{background:var(--bg-elevated);transform:translateX(2px);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.sidebar-squadra.mia-squadra{border-left-color:var(--primary);background:var(--primary-subtle)}
.sidebar-squadra.offerente-attuale{border-left-color:var(--gold);background:var(--gold-subtle)}
.sidebar-squadra.critica{border-left-color:var(--danger)}
.sq-top{display:flex;align-items:center;gap:5px;margin-bottom:1px}
.sq-dot-online{font-size:.6rem;flex-shrink:0}
.sq-nome{flex:1;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-secondary);line-height:1}
.sidebar-squadra.mia-squadra .sq-nome{color:var(--primary-bright)}
.sidebar-squadra.offerente-attuale .sq-nome{color:var(--gold-bright)}
.sq-crediti{font-family:var(--font-display);font-size:1.05rem;font-weight:800;color:var(--gold);flex-shrink:0;line-height:1;text-shadow:0 0 10px var(--gold-glow)}
.budget-progress{height:3px;border-radius:2px;background:rgba(255,255,255,.08);margin-top:1px;overflow:hidden}
.budget-progress-fill{height:100%;border-radius:4px;transition:width .5s}.budget-progress-fill.ok{background:linear-gradient(90deg,#00e0a0,#00b386)}.budget-progress-fill.warn{background:linear-gradient(90deg,var(--gold),var(--gold-deep))}.budget-progress-fill.crit{background:linear-gradient(90deg,var(--danger),#c4002e)}
.sq-bottom{display:block;font-size:.90rem;color:var(--text-secondary);margin-top:2px;font-weight:700;line-height:1.3}
.sq-portieri{margin-left:6px;opacity:1;font-size:.90rem}
.asta-row-puja{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;padding:0 12px;flex-shrink:0}
.asta-row-puja .card-timer-group{flex:1;min-width:0}
.asta-row-puja .rilancio-box{flex:1 1 200px;min-width:180px;max-width:260px}
.asta-row-tabs{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 12px 4px;overflow:hidden}
.card-timer-group{display:flex;flex-direction:column;align-items:center}
.chiamata-card{width:100%;
  background:linear-gradient(170deg,#1A1512 0%,#0D0B0A 100%);
  border:2px solid rgba(255,176,74,.5);border-radius:20px 20px 0 0;padding:24px 28px 20px;text-align:center;
  box-shadow:0 0 60px rgba(255,176,74,.18),0 24px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
  position:relative;overflow:hidden;transition:border-color .3s,box-shadow .3s}
html[data-tema="cuoio"] .chiamata-card{
  background:linear-gradient(170deg,#FAF2E3 0%,#F0E3C8 100%);
  border-color:#6B4423;
}
html[data-tema="lavagna"] .chiamata-card{
  /* La carta e' opaca e sta sopra #puja-panel-slot: se qui c'e' solo un gradiente
     pieno, la foto della lavagna vera messa sul pannello (tema-serata.css) resta
     coperta esattamente dove sta la foto/nome del giocatore — segnalato dall'utente.
     Stessa foto anche qui, con un velo scuro sopra per far leggere bene il testo. */
  background-image:
    linear-gradient(170deg, rgba(17,19,24,.72) 0%, rgba(11,11,15,.8) 100%),
    url("../img/backgrounds/pizarra-lavagna.jpeg?v=2");
  background-size:100% 100%, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
  border-color:#22D3EE;
}
.chiamata-card::before{content:'';position:absolute;top:0;left:10%;right:10%;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent);border-radius:2px;box-shadow:0 0 14px 1px var(--primary-glow);animation:cc-topbar-pulse 3s ease-in-out infinite}
.chiamata-card .chiamata-stato{color:var(--text-muted);font-size:1rem;padding:20px 0}
.cc-header{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;text-align:left}
/* Solo vista UTENTE (classe usata unicamente da renderChiamata quando !S.isAdmin):
   avatar + badge Manuale Admin impilati in colonna, cosi il badge non occupa
   larghezza extra accanto al nome del giocatore. Non tocca .cc-avatar di base
   né alcuna regola usata dalla vista admin. */
.cc-avatar-utente-col{display:flex;flex-direction:column;align-items:center;flex-shrink:0;gap:3px}
.cc-info{flex:1}.cc-meta{display:flex;align-items:center;gap:6px;margin-top:4px;flex-wrap:wrap}
.cc-nome{font-family:var(--font-display);font-size:clamp(1.3rem,3vw,2rem);font-weight:800;color:var(--text-primary);text-transform:uppercase;letter-spacing:-.01em;line-height:1.1;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.cc-offerta{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,3.8rem);font-weight:900;color:var(--gold);letter-spacing:-.03em;text-shadow:0 0 30px var(--gold-glow),0 0 60px rgba(255,184,0,.15);line-height:1.18}
.cc-offerta-label{font-size:.75rem;font-weight:600;text-transform:uppercase;color:var(--text-muted);letter-spacing:.08em;margin-top:2px}
.cc-body{margin-bottom:8px}.cc-offerente{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);display:flex;flex-direction:column;align-items:flex-start;margin-top:8px;flex:1 1 auto;min-width:0}.cc-offerta-box{display:inline-flex;flex-direction:column;align-items:center;border:2px solid var(--gold);border-radius:16px;padding:6px 20px 10px;background:linear-gradient(160deg,rgba(255,202,77,.16) 0%,rgba(255,179,0,.05) 100%);box-shadow:0 0 32px rgba(255,179,0,.16),inset 0 1px 0 rgba(255,255,255,.15),inset 0 -8px 18px rgba(255,179,0,.06);margin-bottom:6px;position:relative;overflow-x:hidden;overflow-y:visible}.cc-offerta-box::after{content:'';position:absolute;top:0;left:-60%;width:35%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-15deg);animation:cc-offerta-shimmer 3.6s ease-in-out infinite}.puja-panel-slot .cc-offerta-box,body.layout-admin .asta-row-puja .cc-offerta-box{border-width:1.5px;padding:3px 12px 6px;border-radius:12px;margin-bottom:0}
.cc-offerente strong{font-family:var(--font-display) !important;font-size:clamp(1.5rem, 4vw, 2.1rem) !important;font-weight:800 !important;color:var(--gold) !important;text-shadow:0 0 12px var(--gold-glow), 0 0 24px var(--gold-glow) !important;line-height:1.15 !important;letter-spacing:0 !important;max-width:100% !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;display:block !important;margin-top:2px !important;animation:offerente-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important;transform-origin:left center}
.chiamata-card.assegnata{border-color:rgba(0,230,118,.4);box-shadow:0 0 40px var(--success-glow),0 20px 40px rgba(0,0,0,.4)}
.chiamata-card.assegnata::before{background:linear-gradient(90deg,transparent,var(--success),transparent)}
.chiamata-card.scartata{border-color:rgba(74,99,128,.3)}
.cc-esito{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--success)}
@keyframes rilancio-flash{0%{border-color:rgba(255,184,0,.8);box-shadow:0 0 60px var(--gold-glow),0 0 100px rgba(255,184,0,.2)}100%{border-color:rgba(255,176,74,.2);box-shadow:0 0 80px rgba(255,176,74,.05),0 20px 40px rgba(0,0,0,.4)}}
.chiamata-card.flash{animation:rilancio-flash .6s ease-out}
@keyframes card-enter{0%{opacity:0;transform:scale(.85) translateY(15px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.card-enter{animation:card-enter .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes price-up{0%{transform:scale(1.4);color:var(--gold-bright);filter:brightness(1.8);text-shadow:0 0 20px rgba(255,176,74,0.9),0 0 40px rgba(255,176,74,0.5)}100%{transform:scale(1);color:var(--gold);filter:brightness(1);text-shadow:0 0 0px rgba(255,176,74,0)}}
.price-bump{animation:price-up .35s ease-out}
.badge-ruolo{color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.4) !important; display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 6px;border-radius:6px;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;flex-shrink:0}
.badge-ruolo.r-Por{background:linear-gradient(135deg,#f5a623,#e09000);color:#000}
.badge-ruolo.r-P{background:linear-gradient(135deg,#f5a623,#e09000);color:#000}
.badge-ruolo.r-Dc{background:linear-gradient(135deg,#2ecc71,#229954);color:#fff}
.badge-ruolo.r-Ds{background:linear-gradient(135deg,#27ae60,#1e8449);color:#fff}
.badge-ruolo.r-Dd{background:linear-gradient(135deg,#58d68d,#2ecc71);color:#000}
.badge-ruolo.r-D{background:linear-gradient(135deg,#2ecc71,#229954);color:#fff}
.badge-ruolo.r-B{background:linear-gradient(135deg,#1abc9c,#16a085);color:#fff}
.badge-ruolo.r-E{background:linear-gradient(135deg,#00b894,#00a381);color:#fff}
.badge-ruolo.r-M{background:linear-gradient(135deg,#4b7bec,#3867d6);color:#fff}
.badge-ruolo.r-C{background:linear-gradient(135deg,#54a0ff,#2e86de);color:#fff}
.badge-ruolo.r-W{background:linear-gradient(135deg,#a55eea,#8854d0);color:#fff}
.badge-ruolo.r-T{background:linear-gradient(135deg,#ffa502,#e68900);color:#000}
.badge-ruolo.r-A{background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff}
.badge-ruolo.r-Pc{background:linear-gradient(135deg,#eb3b5a,#d63031);color:#fff}
.badge-ruolo.r-XX{background:var(--bg-elevated);color:var(--text-muted)}
.cc-tipo-badge{font-size:.65rem;font-weight:800;text-transform:uppercase;padding:2px 7px;border-radius:5px}
.tipo-RIC{background:rgba(255,176,74,.15);color:var(--primary-bright);border:1px solid rgba(255,176,74,.3)}
.tipo-PLUS{background:rgba(255,184,0,.15);color:var(--gold);border:1px solid rgba(255,184,0,.3)}
.tipo-U21{background:rgba(0,224,160,.15);color:var(--success);border:1px solid rgba(0,224,160,.3)}
.timer-ring-container{position:relative;width:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(170deg,var(--bg-main) 0%,var(--bg-card) 100%);border:1px solid rgba(255,176,74,.15);border-top:none;border-radius:0 0 20px 20px;padding:14px 0 18px;box-shadow:0 20px 40px rgba(0,0,0,.3);overflow:visible}
.timer-ring{width:90px;height:90px;filter:drop-shadow(0 0 10px rgba(255,176,74,.2));position:relative;z-index:1}
.timer-progress{transition:stroke-dashoffset .9s linear}
/* Pallone che percorre l'anello seguendo il conto alla rovescia, con una leggera rotazione mentre si muove */
.timer-ball{position:absolute;left:50%;top:6%;width:15%;height:15%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.7));transition:left .9s linear,top .9s linear;z-index:2;pointer-events:none}
.timer-ball-svg{width:100%;height:100%;animation:ball-spin 1.6s linear infinite}
@keyframes ball-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.timer-inner{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1}
/* Numero in stile tabellone/scoreboard da stadio (font mono, glow tipo LED) */
.timer-number{font-family:var(--font-mono);font-size:1.7rem;font-weight:700;color:var(--success);line-height:1;letter-spacing:-.02em;text-shadow:0 0 12px var(--success-glow),0 0 2px rgba(255,255,255,.4)}
.timer-label-text{font-size:.6rem;font-weight:600;text-transform:uppercase;color:var(--text-muted);letter-spacing:.08em;margin-top:2px;text-align:center;width:100%}
.timer-label-text::before{content:'⏱ ';opacity:.7}
.timer-ring-container.urgent{animation:timer-pulse .8s ease-in-out infinite}
.timer-ring-container.urgent .timer-number{color:var(--fire-bright);text-shadow:0 0 20px var(--fire-glow)}
.timer-ring-container.urgent .timer-ring{filter:drop-shadow(0 0 12px rgba(255,77,42,.5))}
@keyframes timer-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-4px)}20%,40%,60%,80%{transform:translateX(4px)}}
.shake{animation:shake .5s ease}
.rilancio-box{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px}
.rilancio-top-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btn-rilancio-adj{background:var(--bg-elevated);border:1px solid var(--border-light);color:var(--text-primary);border-radius:8px;font-size:1.1rem;font-weight:700;width:36px;height:36px;cursor:pointer;transition:all .15s;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.btn-rilancio-adj:hover{background:var(--primary-subtle);border-color:var(--primary)}
.btn-rilancio-adj:active{transform:scale(.92)}
.inp-rilancio{width:70px!important;text-align:center;font-family:var(--font-display);font-size:1.2rem;font-weight:800;background:var(--bg-main);border:1px solid var(--border-light);border-radius:10px;color:var(--text-primary);padding:6px!important}
.quick-bids{display:flex;gap:6px}.quick-bids-row{display:flex;gap:8px;justify-content:center;margin-bottom:8px}
.manual-bid-row{display:flex;gap:8px;justify-content:center;align-items:center}
.btn-manuale{flex:0 0 auto;padding:8px 16px}
.btn-quick{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);font-family:var(--font-main);font-weight:700;font-size:.88rem;padding:8px 14px;border-radius:9px;cursor:pointer;transition:all .15s}
.btn-quick:hover{background:var(--primary-subtle);border-color:var(--primary);transform:scale(1.06);color:var(--primary-bright)}
.btn-quick:active{transform:scale(.94)}.btn-quick:disabled{opacity:.3;cursor:not-allowed;transform:none}
.btn-rilancia{width:100%;background:linear-gradient(135deg,var(--fire-bright) 0%,#ff2200 100%);color:#fff;font-family:var(--font-display);font-weight:800;font-size:clamp(.85rem,3vw,1.1rem);letter-spacing:.02em;padding:15px 10px;border-radius:13px;border:none;cursor:pointer;position:relative;overflow:hidden;transition:transform .15s,box-shadow .2s;box-shadow:0 4px 20px rgba(255,77,42,.35);text-transform:uppercase;white-space:nowrap}
.btn-rilancia:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 30px rgba(255,77,42,.55)}
.btn-rilancia:active{transform:translateY(0) scale(.98)}
.btn-rilancia::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.35) 50%,transparent 100%);transform:skewX(-20deg);animation:shimmer-slide 2.2s infinite}
@keyframes shimmer-slide{0%,100%{left:-120%}60%{left:140%}}
.btn-rilancia:active{transform:translateY(0) scale(.98)}
.btn-rilancia:disabled{opacity:.3;cursor:not-allowed;transform:none;box-shadow:none}
.btn-rilancia::after{content:'';position:absolute;top:-50%;left:-60%;width:40%;height:200%;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.18) 50%,transparent 100%);transform:skewX(-15deg);transition:left .6s}
.btn-rilancia:hover::after{left:120%}
.admin-btn-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;margin-top:3px}
.admin-btn-grid .btn{font-size:.68rem;padding:5px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Estrai è il bottone più premuto durante la puja — deve risaltare su tutti gli altri */
#btn-estrai{grid-column:1/-1;font-size:.82rem;font-weight:800;padding:9px 3px;letter-spacing:.02em;animation:pulse-estrai 2.2s ease-in-out infinite}
@keyframes pulse-estrai{0%,100%{box-shadow:0 4px 15px var(--primary-glow)}50%{box-shadow:0 4px 22px rgba(255,176,74,.75),0 0 0 3px rgba(255,176,74,.18)}}
.cc-attesa-badge{background:rgba(255,176,74,.1);border:1px solid rgba(255,176,74,.25);border-radius:8px;padding:6px 12px;font-size:.82rem;color:var(--primary-bright);margin-top:6px;text-align:center}
.cc-manuale-badge{position:absolute;top:-4px;left:14px;z-index:10;display:inline-flex;margin:0 !important;align-items:center;gap:4px;background:linear-gradient(135deg,rgba(30,15,0,.9),rgba(20,10,0,.85));border:1px solid rgba(255,184,0,.4);color:var(--gold);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:3px 9px;border-radius:8px;margin-bottom:6px;white-space:nowrap;line-height:1.3}
.mio-panel{background:var(--panel-glass-1);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,176,74,.15);border-radius:14px;padding:8px 10px}
.mio-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.mio-nome{font-family:var(--font-display);font-size:.8rem;font-weight:800;text-transform:uppercase;color:var(--primary-bright);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;padding-right:8px;}
.crediti-badge{font-family:var(--font-display);font-size:.8rem;font-weight:800;color:var(--gold);background:var(--gold-subtle);border:1px solid rgba(255,184,0,.25);border-radius:8px;padding:2px 8px;flex-shrink:0;}
.slot-counter{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}#mio-slot-counter{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:6px!important}
.slot-chip{display:flex;align-items:center;justify-content:space-between;font-size:.78rem;padding:5px 10px;background:var(--bg-main);border-radius:7px;border:1px solid var(--border);min-width:0}#mio-slot-counter .slot-chip{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:2px 6px;font-size:.68rem}#mio-slot-counter .slot-chip>.slot-main{display:flex;align-items:center;justify-content:space-between;width:100%;gap:4px}#mio-slot-counter .slot-sub{align-self:flex-start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* Asta INIZIALE: 4 chip in due colonne strette e "Recompra 0/1" e' la piu' lunga — su pannelli
   stretti il testo usciva dalla sua cella e finiva SOPRA la chip "Max" accanto (si leggeva
   "Recompra 0Max 493cr"). flex-wrap manda il valore a capo invece di traboccare, min-width:0
   lascia davvero restringere i flex item e overflow:hidden e' la rete di sicurezza: nel caso
   peggiore il testo si taglia dentro la propria chip, non invade quella di fianco.
   L'asta di RIPARAZIONE non e' toccata: le sue chip non hanno .slot-main. */
#mio-slot-counter .slot-chip{overflow:hidden;overflow-wrap:anywhere}
#mio-slot-counter .slot-chip>.slot-main{flex-wrap:wrap;min-width:0;row-gap:0;overflow-wrap:anywhere}
.slot-chip span{font-weight:700;color:var(--primary)}.slot-chip.esaurito span{color:var(--danger)}
.slot-sub{font-size:.68rem;color:var(--text-muted)}#mio-slot-counter .slot-sub{font-size:.56rem;line-height:1.1}.mio-panel-actions{display:flex;flex-direction:row;gap:6px;margin-top:0}.mio-panel-actions .btn{flex:1;min-width:0;padding:5px 8px;font-size:.72rem}
.admin-panel{background:var(--bg-glass);backdrop-filter:blur(12px);border:1px solid rgba(255,184,0,.25);border-radius:14px;padding:10px 12px;box-shadow:0 12px 28px rgba(0,0,0,.35),0 0 40px rgba(255,184,0,.05),inset 0 1px 0 rgba(255,255,255,.05)}
.admin-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px}
.admin-header-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.admin-badge{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,rgba(255,184,0,.15),rgba(255,184,0,.05));border:1px solid rgba(255,184,0,.3);border-radius:7px;padding:3px 8px;font-size:.7rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.05em}
.admin-actions{display:flex;flex-direction:column;gap:6px}
.admin-conferma-box{background:rgba(255,184,0,.05);border:1px solid rgba(255,184,0,.2);border-radius:10px;padding:10px;margin-top:6px}
.conferma-titolo{font-family:var(--font-display);font-size:.9rem;font-weight:800;color:var(--gold);margin-bottom:4px}
.conferma-info-text{font-size:.76rem;color:var(--text-secondary);margin-bottom:8px}
.conferma-actions{display:flex;flex-direction:column;gap:6px}
.riapri-row{display:flex;gap:5px;flex-wrap:wrap}.riapri-row .btn{flex:1;min-width:100px;font-size:.72rem;padding:6px 8px;white-space:normal;line-height:1.2;text-align:center}
.backup-menu{background:var(--bg-main);border:1px solid var(--border);border-radius:10px;padding:10px;margin-bottom:8px;display:flex;flex-direction:column;gap:4px}
.bk-btn{background:none;border:1px solid var(--border);border-radius:7px;color:var(--text-primary);font-size:.82rem;padding:7px 12px;cursor:pointer;text-align:left;transition:all .15s}
.bk-btn:hover{background:var(--bg-elevated);border-color:var(--primary)}.bk-btn-muted{color:var(--text-muted)}
.fine-asta-export-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.fine-asta-export-row .bk-btn{flex:1 1 140px;text-align:center;padding:10px 12px}
.storico-esportazioni-modal{max-width:560px;width:calc(100vw - 32px)}
#storico-esportazioni-lista{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow-y:auto}
.storico-export-item{background:var(--bg-main);border:1px solid var(--border);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.storico-export-info{display:flex;flex-direction:column;gap:2px}
.storico-export-data{font-weight:700;font-size:.86rem;color:var(--text-primary)}
.storico-export-meta{font-size:.76rem;color:var(--text-muted);text-transform:capitalize}
.storico-export-actions{display:flex;flex-wrap:wrap;gap:6px}
.storico-export-actions .bk-btn{flex:1 1 auto;text-align:center;font-size:.74rem;padding:6px 8px}
.bk-btn-danger{color:#e74c3c;border-color:rgba(231,76,60,.35)}
.bk-btn-danger:hover{background:rgba(231,76,60,.14);border-color:#e74c3c}
.popup-override{background:rgba(255,77,42,.05);border:1px solid rgba(255,77,42,.2);border-radius:10px;padding:6px;margin-top:4px}
.popup-override p{font-size:.72rem;color:var(--text-secondary);margin-bottom:4px}
.popup-override .btn{margin:2px 3px 2px 0;font-size:.7rem;padding:4px 8px}
/* Badge fisso per lo svincolo nascosto (nascondiSvincolo) ma ancora pendente: permette di
   navigare altrove e tornare senza perdere la selezione (riprendiSvincolo). */
.svincolo-pendente-btn{position:fixed;bottom:16px;right:16px;z-index:500;background:var(--gold);color:#1a1a1a;border:none;border-radius:24px;padding:10px 16px;font-weight:700;font-size:.82rem;box-shadow:0 4px 14px rgba(0,0,0,.4);cursor:pointer}
/* Quando c'è una decisione admin in attesa (popup RIC/PLUS o timer scaduto), la priorità è vedere
   SUBITO i bottoni di conferma senza scroll: nascondiamo temporaneamente la grid di bottoni admin
   (Estrai/Manuale/Assegna/Annulla/Reintr./Timer/Termina) finché la decisione non è risolta */
.admin-panel:has(#popup-override-box:not(.hidden)) .admin-btn-grid,
.admin-panel:has(#admin-conferma-box:not(.hidden)) .admin-btn-grid{display:none}
/* Il pannello non deve più tagliare/scrollare quando c'è una decisione in attesa: si espande per intero */
.admin-panel:has(#popup-override-box:not(.hidden)),
.admin-panel:has(#admin-conferma-box:not(.hidden)),
.admin-panel.force-show-btns{max-height:none!important;overflow-y:visible!important}
/* Ripristino manuale: l'admin può comunque far tornare visibili i bottoni azione con un click
   (il JS toglie anche .hidden da #admin-actions-box, che altrimenti resterebbe display:none) */
.admin-panel.force-show-btns .admin-btn-grid{display:grid!important}
.toggle-admin-btns{display:none}
.admin-panel:has(#popup-override-box:not(.hidden)) .toggle-admin-btns,
.admin-panel:has(#admin-conferma-box:not(.hidden)) .toggle-admin-btns{display:inline-flex}
.tabs-panel{background:linear-gradient(180deg,var(--panel-glass-1) 0%,var(--panel-glass-2) 100%);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;flex:1;min-height:0;box-shadow:0 12px 30px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04)}
.tabs-nav{display:flex;gap:3px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--panel-glass-2) 0%,var(--panel-glass-3) 100%);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:3px}
.tab-btn{position:relative;flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;background:rgba(255,255,255,.02);border:1px solid transparent;border-bottom:2px solid transparent;color:var(--text-muted);font-family:var(--font-main);font-size:.76rem;font-weight:600;padding:5px 10px;margin:1px;border-radius:9px;cursor:pointer;transition:all .22s cubic-bezier(.4,0,.2,1);white-space:nowrap;overflow:hidden}.tab-icon{font-size:1rem;line-height:1}.tab-label{position:relative;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em}
.tab-btn:hover{color:var(--text-primary);background:var(--bg-elevated);border-color:var(--border-light);transform:translateY(-1px)}
.tab-btn.active{color:#fff;border-bottom-color:transparent;background:linear-gradient(135deg,var(--primary) 0%,var(--fire) 100%);box-shadow:0 4px 18px var(--primary-glow),inset 0 1px 0 rgba(255,255,255,.25);border-radius:10px;text-shadow:0 1px 4px rgba(0,0,0,.3);transform:translateY(-1px)}.tab-btn.active::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 55%);pointer-events:none}.tab-btn.active:hover{transform:translateY(-1px)}
.tab-content{display:none;padding:14px;overflow-y:auto}.tab-content.active{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto}.tab-content.active.tab-rose-content{padding:0;overflow:hidden;display:flex;flex-direction:column}
.storico-list{list-style:none;display:flex;flex-direction:column;gap:3px}
.storico-list li{display:flex;align-items:center;gap:5px;padding:5px 8px;background:var(--bg-main);border-radius:7px;font-size:.78rem;flex-wrap:wrap}
.storico-nome{flex:1;font-weight:600;color:var(--text-primary)}.storico-sq{color:var(--text-secondary);font-size:.75rem}
.storico-prezzo{color:var(--gold);font-weight:700;font-family:var(--font-display)}
.storico-tipo{padding:1px 6px;border-radius:4px;font-size:.68rem;font-weight:700;text-transform:uppercase}
.storico-manuale-tag{margin-right:2px;opacity:.85;font-size:.85em}
.tipo-tag-asta{background:rgba(255,176,74,.12);color:var(--primary-bright)}
.tipo-tag-riconferma{background:rgba(0,230,118,.12);color:var(--success)}
.tipo-tag-recompra{background:rgba(255,184,0,.12);color:var(--gold)}
.tipo-tag-plusvalenza{background:rgba(165,94,234,.15);color:#c49bff}
.tipo-tag-con_svincolo{background:rgba(255,77,42,.12);color:var(--fire-bright)}
.tipo-tag-scartato{background:rgba(74,99,128,.2);color:var(--text-muted)}
.tipo-tag-tradeoff{background:rgba(255,176,74,.12);color:var(--primary-bright)}
.filtro-ruolo{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.filtro-btn{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-secondary);border-radius:7px;padding:4px 8px;font-size:.7rem;font-weight:600;cursor:pointer;transition:all .15s}
.filtro-btn.active{background:var(--primary-subtle);border-color:var(--primary);color:var(--primary-bright)}
.liberi-list{list-style:none;display:flex;flex-direction:column;gap:3px;flex:1;min-height:0;overflow-y:auto}
.liberi-list li{display:flex;align-items:center;gap:6px;padding:5px 8px;background:var(--bg-main);border-radius:7px;font-size:.78rem}
.liberi-list li.scartato{opacity:.5;filter:grayscale(.7);cursor:default}
.liberi-list li.scartato .l-nome{text-decoration:line-through}
.l-scartato-tag{font-size:.6rem;font-weight:800;letter-spacing:.04em;color:var(--text-muted);background:rgba(255,255,255,.08);padding:1px 6px;border-radius:5px;text-transform:uppercase}
.libero-nome{flex:1;font-weight:500}.libero-sq{font-size:.72rem;color:var(--text-muted)}
.libero-costo{font-family:var(--font-display);font-weight:700;color:var(--gold);font-size:.85rem}
.btn-chiama-libero{background:var(--primary-subtle);border:1px solid rgba(255,176,74,.3);color:var(--primary-bright);border-radius:7px;padding:4px 10px;font-size:.75rem;cursor:pointer;transition:all .15s}
.btn-chiama-libero:hover{background:var(--primary);color:#fff}
.tab-content.active.tab-rose-content{position:relative;padding:0;display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.rose-container{flex:1;min-height:0;overflow-x:auto;overflow-y:auto;display:flex;gap:4px;padding:8px;align-items:flex-start}
.rose-search-row{display:flex;gap:4px;margin:2px 8px;flex-wrap:nowrap;max-width:240px;align-items:center}
.rose-chevron{display:inline-flex;align-items:center;justify-content:center;margin-left:6px;font-size:1.3rem;line-height:1;padding:6px 8px;border-radius:6px;transition:transform .2s,background .15s;cursor:pointer}.rose-chevron:hover{background:rgba(255,255,255,.12)}
.rose-chevron.open{transform:scale(1.15);background:rgba(255,255,255,.18)}
#tab-rose .rose-search-row{position:relative;z-index:20;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:1px 3px;box-shadow:0 2px 8px rgba(0,0,0,.3);margin:2px 8px;max-width:240px;width:calc(100% - 16px);flex-shrink:0;align-items:center}
#tab-rose .rose-search-row .rose-search-close-btn{background:none;border:none;color:var(--text-muted);font-size:.75rem;cursor:pointer;padding:0 2px;flex-shrink:0;display:flex;align-items:center;height:20px}
#tab-rose .rose-search-row .rose-search-close-btn:hover{color:var(--text-primary)}
.rose-search-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.5);max-height:240px;overflow-y:auto;z-index:2}
.rose-search-dropdown.hidden{display:none}
.rose-search-item{padding:8px 10px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.8rem;color:var(--text-primary);border-bottom:1px solid var(--border-light)}
.rose-search-item:last-child{border-bottom:none}
.rose-search-item:hover{background:var(--primary-subtle)}
.rose-search-item-sq{font-size:.68rem;color:var(--text-muted);white-space:nowrap}
.rose-search-empty{padding:10px;font-size:.78rem;color:var(--text-muted);text-align:center}
.rose-player.highlight-flash{animation:rose-highlight-flash 1.8s ease-out}
@keyframes rose-highlight-flash{0%{background:var(--gold-glow);box-shadow:0 0 0 2px var(--gold)}70%{background:var(--gold-glow);box-shadow:0 0 0 2px var(--gold)}100%{background:transparent;box-shadow:none}}
#tab-rose .rose-search-row.hidden{display:none}
.rose-sel,.rose-inp{flex:1;min-width:0;padding:1px 6px;font-size:12px;line-height:1.1;height:20px}
.rose-cerca-btn{padding:1px 8px;border-radius:5px;background:var(--primary-subtle);border:1px solid rgba(255,176,74,.3);color:var(--primary-bright);cursor:pointer;font-size:.62rem;transition:all .15s;white-space:nowrap;height:20px}
.rose-cerca-btn:hover{background:var(--primary);color:#fff}
.rose-sec-hdr{background:var(--bg-main);border:1px solid var(--border);border-radius:8px;padding:8px 12px;margin-bottom:6px;font-size:.78rem;font-weight:700;text-transform:uppercase;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:all .2s}
.rose-sec-hdr:hover{border-color:var(--primary);color:var(--text-primary)}
.rose-sec-content{overflow:hidden}
.rose-sq-title{font-family:var(--font-display);font-size:.9rem;font-weight:800;color:var(--primary-bright);margin-bottom:8px;text-transform:uppercase}
.rose-giocatore{display:flex;align-items:center;gap:7px;padding:6px 10px;background:var(--bg-main);border-radius:7px;margin-bottom:4px;font-size:.8rem}
.rose-nome{flex:1}.rose-prezzo{font-family:var(--font-display);font-weight:700;color:var(--gold);font-size:.82rem}
.modal-overlay{position:fixed;inset:0;z-index:2000;background:rgba(3,6,10,.85);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px}
.modal-overlay.hidden{display:none!important}
.modal{background:var(--bg-card);border:1px solid var(--border-light);border-radius:20px;padding:28px;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 30px 60px rgba(0,0,0,.6)}
.modal::before{content:'';position:absolute;top:0;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,var(--border-light),transparent)}
.modal.modal-lg{max-width:600px}.modal.hidden{display:none}
.modal-title{font-family:var(--font-display);font-size:1.3rem;font-weight:800;margin-bottom:16px}
.modal-subtitle{font-size:.85rem;color:var(--text-secondary);margin-bottom:16px}
.modal-body{margin-bottom:16px}.modal-body p{margin-bottom:8px;color:var(--text-secondary)}
.modal-body strong{color:var(--text-primary)}.modal-detail{font-size:.85rem}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:16px}
.modal-actions .btn{flex:1;min-width:120px}
.ac-crediti-lista{max-height:260px;overflow-y:auto;margin-top:8px}
.tradeoff-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.tradeoff-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:16px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--font-main)}
.tradeoff-card:hover{background:var(--primary-subtle);border-color:var(--primary);transform:translateY(-2px)}
.to-cedi{font-size:.85rem;color:var(--text-secondary);font-weight:600}
.to-arrow{font-size:1rem;color:var(--text-muted)}.to-ricevi{font-size:1rem;font-weight:800;color:var(--success)}
.sv-lista{max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:5px;margin:12px 0}
.sv-item{display:flex;align-items:center;gap:10px;padding:9px 14px;background:var(--bg-main);border-radius:9px;border:1px solid var(--border);cursor:pointer;transition:all .15s}
.sv-item.selezionato{border-color:var(--danger);border-width:2px;background:rgba(255,23,68,.16)}
.sv-item-nome{flex:1;font-weight:600;font-size:.85rem}.sv-item-costo{font-family:var(--font-display);font-weight:700;color:var(--gold)}
.sv-item-avatar{width:26px;height:26px;min-width:26px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--bg-elevated)}
.sv-item-info{flex:1;min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sv-item-info .sv-item-nome{flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.sv-totale{font-size:.85rem;color:var(--text-secondary);padding:8px 0;border-top:1px solid var(--border);margin-top:4px}
.sv-totale strong{color:var(--text-primary)}
.annulla-storico-lista{max-height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.annulla-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-main);border-radius:9px;cursor:pointer;transition:all .15s;border:1px solid transparent}
.annulla-item:hover{background:rgba(255,23,68,.06);border-color:rgba(255,23,68,.3)}
.annulla-nome{flex:1;font-weight:600}.annulla-sq{color:var(--text-secondary);font-size:.8rem}
.annulla-prezzo{font-family:var(--font-display);font-weight:700;color:var(--gold)}.mr-lista{max-height:400px;overflow-y:auto}
.toast-container{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:340px}
.toast{background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:12px;padding:12px 16px;font-size:.85rem;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:toast-in .3s ease-out;pointer-events:auto}
.toast.success{border-left:3px solid var(--success)}.toast.error{border-left:3px solid var(--danger)}
.toast.info{border-left:3px solid var(--primary)}.toast.warning{border-left:3px solid var(--gold)}
@keyframes toast-in{from{opacity:0;transform:translateX(20px) scale(.95)}to{opacity:1;transform:translateX(0) scale(1)}}
.screen-emergenza{position:fixed;inset:0;z-index:5000;background:rgba(3,6,10,.95);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center}
.screen-emergenza.hidden{display:none}
.emerg-card{text-align:center;max-width:400px;padding:40px 24px}
.emerg-icon{font-size:3rem;margin-bottom:16px;animation:emerg-pulse 1.5s ease-in-out infinite}
@keyframes emerg-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.emerg-titolo{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--danger);margin-bottom:8px}
.emerg-msg{color:var(--text-secondary);margin-bottom:20px}
.emerg-spinner{width:36px;height:36px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--primary);animation:spin .9s linear infinite;margin:16px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.emerg-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}.emerg-btn{width:100%}
.emerg-sub{font-size:.75rem;color:var(--text-muted);margin-top:16px}
.riepilogo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;max-width:1000px;margin:0 auto 16px;padding:0 16px}
.riepilogo-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:18px}
.riepilogo-squadra-nome{font-family:var(--font-display);font-size:1rem;font-weight:800;color:var(--primary-bright);margin-bottom:10px;text-transform:uppercase}
.riepilogo-giocatore{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--border);font-size:.82rem}
.riepilogo-giocatore:last-child{border-bottom:none}
.riepilogo-crediti{font-family:var(--font-display);font-size:1.2rem;font-weight:800;color:var(--gold);text-align:right;margin-top:10px}
@keyframes screen-flash{0%{box-shadow:inset 0 0 100px rgba(255,184,0,.08)}100%{box-shadow:inset 0 0 0 transparent}}
.arena-center.flash-rilancio,.asta-row-puja.flash-rilancio{animation:screen-flash .4s ease-out}
@media(max-width:768px){
.asta-row-panels{flex-wrap:wrap;max-height:none!important}
.asta-row-panels>#admin-panel,.asta-row-panels>#mio-panel,.panel-budget{max-height:none!important;flex:1 1 200px}
.asta-row-puja .rilancio-box{flex:0 0 auto;width:100%}
.card-timer-group{top:104px}
.timer-ring{width:70px;height:70px}.timer-number{font-size:1.4rem}
.rilancio-box{position:fixed;bottom:0;left:0;right:0;z-index:700;border-radius:16px 16px 0 0;border:1px solid var(--border);border-bottom:none;padding:12px 12px calc(12px + env(safe-area-inset-bottom));background:rgba(15,31,56,.96);backdrop-filter:blur(16px)}
.rilancio-top-row{justify-content:center}
.asta-row-puja .rilancio-box{position:static!important;border-radius:12px;border:1px solid var(--border);padding:12px}
#screen-asta.active{height:auto;overflow-y:auto}
html,body{height:auto!important;min-height:100vh;overflow:auto!important}
.asta-row-tabs{min-height:300px}
.card{max-width:100%;margin:0 0 12px}.modal{padding:20px;border-radius:16px 16px 0 0}
.modal-overlay{align-items:flex-end;padding:0}.tradeoff-grid{grid-template-columns:1fr}
.toast-container{bottom:140px;right:12px;left:12px;max-width:100%}
}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}
/* Lobby escape row */
.lobby-escape-row{display:flex;justify-content:center;margin-top:24px;padding-bottom:16px}
.lobby-escape-row .btn-secondary{opacity:.7;font-size:.8rem}
.lobby-escape-row .btn-secondary:hover{opacity:1}
/* ── Rose columns (full-screen horizontal layout) ── */
.rose-col{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;min-width:140px;flex:0 0 auto;overflow:visible;transition:box-shadow .2s;padding:6px}
.rose-col.attiva{border-color:var(--gold);box-shadow:0 0 20px var(--gold-glow)}
.rose-col-header{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding-bottom:4px;border-bottom:1px solid var(--border);margin-bottom:4px}
.rose-col-slots{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-bottom:6px}.rose-col-slots .slot-chip{font-size:.62rem;padding:2px 5px}
.rose-col-nome{font-family:var(--font-display);font-size:.74rem;font-weight:800;color:var(--text-primary);width:100%}
.rose-col-budget{font-size:.74rem;font-weight:700;color:var(--gold);align-self:flex-end}
.rose-col-budget.attiva{color:var(--fire-bright)}
.rose-section{margin-bottom:5px}
.rose-sec-hdr{cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:3px 7px;background:var(--bg-main);border:1px solid var(--border);border-radius:7px;margin-bottom:3px;font-size:.7rem;font-weight:700;color:var(--text-secondary)}
.rose-sec-hdr:hover{border-color:var(--primary);color:var(--text-primary)}
.rose-sec-hdr.collapsed + .rose-sec-body{display:none}
.rose-sec-body{}
.rose-player{display:flex;align-items:center;gap:5px;padding:2px 4px;border-radius:5px;margin-bottom:1px;background:var(--bg-main);font-size:.68rem}
.rose-player.rose-riga-por{background:rgba(255,217,59,.12);border-left:3px solid #f2b400}
.rose-player.rose-riga-verde{background:rgba(46,204,113,.12);border-left:3px solid #229954}
.rose-player.rose-riga-azzurro{background:rgba(75,123,236,.12);border-left:3px solid #3867d6}
.rose-player.rose-riga-viola{background:rgba(165,94,234,.12);border-left:3px solid #8854d0}
.rose-player.rose-riga-rosso{background:rgba(231,76,60,.12);border-left:3px solid #c0392b}
.rose-badge{color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.4) !important; font-size:.54rem;font-weight:800;padding:1px 3px;border-radius:4px;background:var(--bg-elevated);color:var(--text-secondary);min-width:15px;text-align:center}
.rose-badge.ruolo-rose-por,.rose-badge.ruolo-rose-p{background:linear-gradient(135deg,#f5a623,#e09000);color:#000}
.rose-badge.ruolo-rose-dc{background:linear-gradient(135deg,#2ecc71,#229954);color:#fff}
.rose-badge.ruolo-rose-ds{background:linear-gradient(135deg,#27ae60,#1e8449);color:#fff}
.rose-badge.ruolo-rose-dd{background:linear-gradient(135deg,#58d68d,#2ecc71);color:#000}
.rose-badge.ruolo-rose-d{background:linear-gradient(135deg,#2ecc71,#229954);color:#fff}
.rose-badge.ruolo-rose-b{background:linear-gradient(135deg,#1abc9c,#16a085);color:#fff}
.rose-badge.ruolo-rose-e{background:linear-gradient(135deg,#00b894,#00a381);color:#fff}
.rose-badge.ruolo-rose-m{background:linear-gradient(135deg,#4b7bec,#3867d6);color:#fff}
.rose-badge.ruolo-rose-c{background:linear-gradient(135deg,#54a0ff,#2e86de);color:#fff}
.rose-badge.ruolo-rose-w{background:linear-gradient(135deg,#a55eea,#8854d0);color:#fff}
.rose-badge.ruolo-rose-t{background:linear-gradient(135deg,#ffa502,#e68900);color:#000}
.rose-badge.ruolo-rose-a{background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff}
.rose-badge.ruolo-rose-pc{background:linear-gradient(135deg,#eb3b5a,#d63031);color:#fff}
.rose-nome{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ══ Toggle Visione compatta (Rose) ══ */
.rose-compatta-row{display:flex;justify-content:flex-end;padding:4px 10px 0}
.rose-compatta-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:.76rem;color:var(--text-secondary);font-weight:600;user-select:none}
.rose-compatta-toggle input{display:none}
.rose-compatta-slider{width:32px;height:18px;border-radius:10px;background:var(--bg-elevated);border:1px solid var(--border);position:relative;transition:background .2s;flex-shrink:0}
.rose-compatta-slider::before{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:var(--text-muted);top:1px;left:1px;transition:transform .2s,background .2s}
.rose-compatta-toggle input:checked + .rose-compatta-slider{background:var(--gold)}
.rose-compatta-toggle input:checked + .rose-compatta-slider::before{transform:translateX(14px);background:#1a1200}
/* ══ Modalità Visione compatta: righe più basse, meno spazio orizzontale, più giocatori a schermo ══ */
.rose-container.rose-compatta{gap:1px;padding:2px}
.rose-container.rose-compatta .rose-col{flex: 0 0 142px; width:142px; padding:3px 4px; border-radius:6px}
.rose-container.rose-compatta .rose-col-header{padding-bottom:2px;margin-bottom:2px;border-bottom-width:1px;display:flex;flex-direction:column;align-items:stretch;gap:1px}
.rose-container.rose-compatta .rose-col-nome{font-size:.70rem;line-height:1.15;white-space:normal !important;word-wrap:break-word;width:100%}
.rose-container.rose-compatta .rose-col-budget{font-size:.68rem;line-height:1.1;flex-shrink:0;align-self:flex-end}
.rose-container.rose-compatta .rose-col-slots{gap:1px;margin-bottom:3px}
.rose-container.rose-compatta .rose-sec-hdr{padding:2px 4px;margin-bottom:1px;font-size:.64rem;line-height:1}
.rose-container.rose-compatta .rose-player{padding:1px 3px;margin-bottom:0;font-size:.66rem;gap:3px;line-height:1.15}
.rose-container.rose-compatta .rose-badge{font-size:.52rem;padding:1px 2px;min-width:13px;line-height:1.2;border-radius:3px}
.rose-container.rose-compatta .rose-prezzo{font-size:.64rem;padding:0 4px;line-height:1.2;border-radius:4px}
.rose-container.rose-compatta .slot-chip{font-size:.62rem;padding:0 3px;line-height:1.2;border-radius:4px}
.rose-prezzo{font-family:var(--font-display);font-weight:800;color:var(--text-on-gold, #1a1200);font-size:.68rem;background:linear-gradient(135deg,var(--gold-bright),var(--gold));padding:1px 7px;border-radius:8px;flex-shrink:0}
.rose-empty{color:var(--text-muted);font-size:.68rem;padding:3px 6px;font-style:italic}
/* ══════ RIGA 1 middle slot (puja per NON-admin) ══════ */
/* ══ Layout partecipante NON-admin: riga puja tutta orizzontale (card+timer+rilancio in fila),
   niente stacking verticale → niente scroll, sfrutta la larghezza extra lasciata da admin-panel nascosto ══ */
.puja-panel-slot{flex:4;min-width:0;overflow:visible;display:flex;flex-direction:row;align-items:stretch;gap:10px}
.puja-panel-slot .card-timer-group{width:auto;flex:1;min-width:0;flex-direction:row;align-items:stretch;gap:10px}
.puja-panel-slot .rilancio-box{width:auto;flex:0 0 220px;min-width:0;display:flex;flex-direction:column;justify-content:center}
/* La card diventa orizzontale (badge+nome+meta a sinistra, offerta a destra) come nel layout admin, per restare bassa */
.puja-panel-slot .chiamata-card{flex:1 1 0%;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-radius:14px;text-align:left;overflow:hidden}
.puja-panel-slot .chiamata-card .chiamata-stato{padding:0;font-size:1.05rem}
.puja-panel-slot .cc-header{margin-bottom:0;align-items:center;gap:8px;flex:0 0 auto;min-width:0;overflow:visible;flex-shrink:0;min-height:24px}
.puja-panel-slot .cc-avatar{width:56px;height:56px}.puja-panel-slot .cc-avatar-icon{font-size:1.15rem}.puja-panel-slot .cc-avatar-initial{font-size:1rem}.puja-panel-slot .cc-avatar-svg{width:78%;height:78%}
.puja-panel-slot .cc-nome{font-size:.94rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.puja-panel-slot .cc-meta{margin-top:0;font-size:.7rem;flex-wrap:wrap;overflow:visible}
.puja-panel-slot .cc-body{margin-bottom:0;display:flex;align-items:center;gap:8px;flex:0 0 auto;white-space:nowrap}
.puja-panel-slot .cc-offerta{font-size:1.7rem;color:var(--gold);text-shadow:0 0 20px var(--gold-glow)}
.puja-panel-slot .cc-offerta-label{font-size:.68rem;margin-top:0;font-weight:700}
.puja-panel-slot .cc-offerente{font-size:.95rem}
.puja-panel-slot .timer-ring-container{padding:0;flex:0 0 auto;width:auto;display:flex;flex-direction:column;align-items:center;justify-content:center}
.puja-panel-slot .timer-ring{width:56px;height:56px}
.puja-panel-slot .timer-number{font-size:1.2rem}
.puja-panel-slot .timer-label-text{font-size:.66rem}
.puja-panel-slot .rilancio-box{padding:8px 12px;gap:6px}
.puja-panel-slot .quick-bids-row{margin-bottom:0;gap:8px}
.puja-panel-slot .btn-quick{padding:6px 12px;font-size:.82rem}
.puja-panel-slot .btn-rilancia{padding:8px 18px;font-size:.88rem;width:100%}
.puja-panel-slot .manual-bid-row{margin:0}
.puja-panel-slot .inp-rilancio{padding:5px!important;font-size:16px!important;width:64px!important}
/* Budget squadre e Mio team più stretti quando è visibile la riga puja del partecipante */
body.layout-partecipante .asta-row-panels{align-items:stretch}
body.layout-partecipante .asta-row-panels>.panel-budget{max-height:28vh;align-self:stretch;overflow-y:auto;flex:0.6}
body.layout-partecipante .asta-row-panels>#mio-panel{max-height:28vh;align-self:stretch;overflow-y:auto;flex:0.7}
/* La card di chiamata (con fascia strategia) non deve mai essere tagliata dal
   limite di altezza dei pannelli laterali: si auto-dimensiona col contenuto
   e non viene 'stretch'-ata alla stessa altezza di budget/team (che restano
   compatti con scroll interno). Solo vista UTENTE (layout-partecipante). */
body.layout-partecipante .asta-row-puja{display:none!important}
body.layout-partecipante .asta-row-panels{max-width:1900px;margin-left:auto;margin-right:auto;width:100%}
@media (min-width:1500px){
body.layout-partecipante .asta-row-panels{justify-content:center}
body.layout-partecipante .asta-row-panels>.panel-budget{flex:0 1 320px!important;max-width:320px}
body.layout-partecipante .puja-panel-slot{flex:0 1 900px!important;max-width:900px}
body.layout-partecipante .asta-row-panels>#mio-panel{flex:0 1 320px!important;max-width:320px}
}
/* ══════ RIGA 2 compatta orizzontale (puja per ADMIN) ══════ */
body.layout-admin .asta-row-puja{align-items:stretch;padding:5px 10px;gap:8px;min-height:clamp(130px,18vh,175px);height:auto;overflow:visible}
body.layout-admin .asta-row-puja .card-timer-group{flex-direction:row;align-items:stretch;gap:10px;flex:1;min-width:0;min-height:0;overflow:visible;height:auto}
body.layout-admin .asta-row-puja .chiamata-card{border-radius:10px;padding:6px 14px;text-align:left;box-shadow:none;min-height:0;overflow:visible;height:auto;flex:1 1 0%;min-width:0}
body.layout-admin .asta-row-puja .cc-attesa-badge{display:block;font-size:.62rem;padding:3px 8px;margin-top:3px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
body.layout-admin .asta-row-puja .chiamata-card .chiamata-stato{padding:0;font-size:1rem;white-space:nowrap}
body.layout-admin .asta-row-puja .chiamata-card{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:nowrap;overflow:visible;height:auto}
body.layout-admin .asta-row-puja .cc-header{margin-bottom:0;align-items:center;gap:8px;flex:1 1 auto;min-width:0;overflow:hidden}
body.layout-admin .asta-row-puja .cc-avatar{width:56px;height:56px}body.layout-admin .asta-row-puja .cc-avatar-icon{font-size:1.15rem}body.layout-admin .asta-row-puja .cc-avatar-initial{font-size:1rem}body.layout-admin .asta-row-puja .cc-avatar-svg{width:78%;height:78%}
body.layout-admin .asta-row-puja .cc-info{min-width:0;overflow:hidden}
body.layout-admin .asta-row-puja .cc-nome{font-size:1.05rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.layout-admin .asta-row-puja .cc-meta{margin-top:0;flex-wrap:wrap;overflow:visible}
body.layout-admin .asta-row-puja .cc-offerta{font-size:2.6rem;color:var(--gold);text-shadow:0 0 20px var(--gold-glow),0 0 40px rgba(255,184,0,.2)}
body.layout-admin .asta-row-puja .cc-offerta-label{display:block;font-size:.72rem;font-weight:700}
body.layout-admin .asta-row-puja .cc-body{margin-bottom:0;display:flex;align-items:center;gap:8px;flex:0 0 auto;white-space:nowrap}
body.layout-admin .asta-row-puja .cc-offerente{font-size:.95rem;white-space:nowrap}
body.layout-admin .asta-row-puja .timer-ring-container{padding:0;border:none;border-radius:0;width:auto;height:100%;flex:0 0 auto;background:transparent;box-shadow:none;display:flex;align-items:center}
body.layout-admin .asta-row-puja .timer-ring{width:52px;height:52px}
body.layout-admin .asta-row-puja .timer-number{font-size:1.05rem}
body.layout-admin .asta-row-puja .timer-label-text{display:block;font-size:.52rem}
body.layout-admin .asta-row-puja .rilancio-box{display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:0;gap:8px;flex:0 0 270px;width:270px;max-width:270px;background:none;border:none;box-shadow:none}
body.layout-admin .asta-row-puja .quick-bids-row{margin:0;display:flex;gap:6px;width:100%}
body.layout-admin .asta-row-puja .quick-bids-row .btn-quick{flex:1 1 0%;width:auto}
body.layout-admin .asta-row-puja .btn-rilancia{width:100%;white-space:nowrap;display:flex;align-items:center;justify-content:space-between;margin:0}
body.layout-admin .asta-row-puja .manual-bid-row{margin:0;display:flex;gap:6px;width:100%;align-items:center}
body.layout-admin .asta-row-puja .inp-rilancio{flex:1 1 auto;width:0!important;min-width:0!important}
body.layout-admin .asta-row-puja .btn-manuale{flex:0 0 auto;white-space:nowrap}
/* ══════ Pillola compatta Assegna/Chiama — dentro tabs-nav, attaccata a destra, admin-only ══════ */
.quick-pill{display:none;margin-left:auto;align-items:center;gap:8px;padding:6px 10px}
body.layout-admin .quick-pill{display:flex}
.pill-btn{width:34px;height:34px;border-radius:11px;border:1px solid rgba(255,255,255,.14);font-size:1rem;line-height:1;cursor:pointer;color:var(--text-primary);display:flex;align-items:center;justify-content:center;transition:transform .18s,box-shadow .18s,filter .18s;flex-shrink:0;position:relative;overflow:hidden}
.pill-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 55%);pointer-events:none}
.pill-btn:hover{transform:translateY(-2px) scale(1.06);filter:brightness(1.1)}
.pill-btn:active{transform:translateY(0) scale(.95)}
#pill-assegna{background:linear-gradient(135deg,var(--success) 0%,#00c853 100%);color:#04220f;box-shadow:0 3px 10px rgba(0,200,83,.35),inset 0 1px 0 rgba(255,255,255,.25)}
#pill-assegna:hover{box-shadow:0 5px 16px rgba(0,200,83,.5),inset 0 1px 0 rgba(255,255,255,.3)}
#pill-chiama{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;box-shadow:0 3px 10px rgba(255,176,74,.4),inset 0 1px 0 rgba(255,255,255,.2)}
#pill-chiama:hover{box-shadow:0 5px 16px rgba(255,176,74,.55),inset 0 1px 0 rgba(255,255,255,.25)}
/* ══════ Liberi list — nuovo layout con Valore Algoritmico ══════ */
.liberi-list li{gap:6px}
.l-nome{flex:1;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l-tipo-badge{font-size:.76rem;font-weight:800;text-transform:uppercase;padding:2px 7px;border-radius:5px;flex-shrink:0}
.l-tipo-badge.tipo-NN{background:var(--bg-elevated);color:var(--text-muted)}
.l-orig{font-size:.82rem;color:var(--text-secondary);flex-shrink:0;white-space:nowrap}
.l-valore-wrap{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;min-width:48px}
.l-valore{font-family:var(--font-display);font-weight:900;color:var(--gold-bright);font-size:1.1rem;line-height:1;text-shadow:0 0 12px var(--gold-glow)}
.l-valore-label{font-size:.72rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.l-costo{font-size:.84rem;color:var(--text-secondary);flex-shrink:0;font-weight:700}
/* ══════ Modal Assegna manuale / Chiama live search ══════ */
.cm-filtri-ruolo{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0}
.cm-filtri-ruolo .filtro-btn{padding:4px 9px;font-size:.72rem}
.cm-lista{max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:5px;margin-top:8px}
.cm-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-main);border-radius:9px;border:1px solid var(--border);cursor:pointer;transition:all .15s}
.cm-item:hover{background:var(--primary-subtle);border-color:var(--primary)}
.cm-item.selected{border-color:var(--gold);background:var(--gold-subtle)}
.cm-item-nome{flex:1;font-weight:600;font-size:.85rem}
.cm-item-info{font-size:.72rem;color:var(--text-muted)}
.am-prezzo-row{display:flex;gap:10px;align-items:center;margin:12px 0}
/* ══════ Impostazioni Admin — card squadra (Crediti/Slot RIC/Slot PLUS/Recompra) ══════ */
.settings-team-card {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: rgba(255,255,255,.02);
}
.settings-team-nome {
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-size: .8rem;
  opacity: .85;
}
.settings-team-fields {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.settings-field label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 4px;
}
@media (max-width: 480px) {
  .settings-team-fields { grid-template-columns: repeat(2, 1fr); }
}
/* ══════ Club reale del giocatore (es. "Inter") — mostrato in card chiamata/Puja e conferme RIC ══════ */
.cc-club {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--primary-subtle);
  color: var(--primary-bright);
  letter-spacing: .02em;
}
/* ══════ VISTA PARTICIPANTE: superficie única integrada ══════ */
.puja-panel-slot{
  background:linear-gradient(170deg,var(--bg-card) 0%,var(--bg-main) 100%);
  border:1px solid var(--primary-glow);
  border-radius:18px;
  box-shadow:0 0 40px -12px var(--primary-glow);padding:14px 20px;
}
.puja-panel-slot .chiamata-card{
  background:none;border:none;box-shadow:none;border-radius:0;padding:0;
  flex:0 1 auto;justify-content:flex-start;
}
.puja-panel-slot .chiamata-card::before{display:none}
.puja-panel-slot .card-timer-group{border-right:1px solid var(--border-light);padding-right:18px}
.puja-panel-slot .timer-ring-container{
  flex:1;width:auto;background:none;border:none;box-shadow:none;
}
.puja-panel-slot .timer-ring{width:96px;height:96px}
.puja-panel-slot .timer-number{font-size:1.8rem}
.puja-panel-slot .timer-label-text{font-size:.72rem}
.puja-panel-slot .rilancio-box{
  background:none;border:none;box-shadow:none;padding:0;padding-left:18px;
}
.puja-panel-slot .inp-rilancio{width:85px!important}
.puja-panel-slot .rilancio-box{position:static!important;bottom:auto!important;left:auto!important;right:auto!important;top:auto!important;z-index:auto!important;border-radius:14px!important;border-bottom:none!important}
/* ══════ VISTA ADMIN: superficie única integrada ══════ */
body.layout-admin .asta-row-puja{
  background:linear-gradient(170deg,var(--bg-card) 0%,var(--bg-main) 100%);
  border:1px solid var(--primary-glow);
  border-radius:14px;
}
body.layout-admin .asta-row-puja .chiamata-card{
  background:none;border:none;box-shadow:none;border-radius:0;
  flex:0 1 auto;
}
.asta-row-puja .chiamata-card::before{display:none}
body.layout-admin .asta-row-puja .timer-ring-container{
  flex:1;background:none;border:none;box-shadow:none;
}
body.layout-admin .asta-row-puja .timer-ring{width:72px;height:72px}
body.layout-admin .asta-row-puja .timer-number{font-size:1.3rem}
body.layout-admin .asta-row-puja .timer-label-text{font-size:.6rem}
body.layout-admin .asta-row-puja .rilancio-box{
  background:none;border:none;box-shadow:none;
}
body.layout-admin .asta-row-puja .inp-rilancio{flex:1 1 auto;width:0!important;min-width:0!important}
/* ══════ Fix v2: timer davvero grande e centrato (card compatta a sinistra, timer domina il centro) ══════ */
body.layout-admin .asta-row-puja .chiamata-card{
  flex:0 1 190px!important;max-width:190px;min-width:120px;
  flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:3px;
}
body.layout-admin .asta-row-puja .cc-body{flex-direction:column!important;align-items:flex-start!important;gap:2px;flex-wrap:wrap;overflow:hidden;width:100%}
body.layout-admin .asta-row-puja .cc-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
body.layout-admin .asta-row-puja .cc-offerente{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
body.layout-admin .asta-row-puja .timer-ring-container{
  flex:1!important;display:flex;align-items:center;justify-content:center;
}
body.layout-admin .asta-row-puja .timer-ring{width:100px!important;height:100px!important}
body.layout-admin .asta-row-puja .timer-number{font-size:1.7rem!important}
body.layout-admin .asta-row-puja .timer-label-text{font-size:.66rem!important}
.puja-panel-slot .chiamata-card{
  flex:0 1 220px!important;max-width:260px;min-width:150px;
  flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:4px;
}
.puja-panel-slot .cc-body{flex-direction:column!important;align-items:flex-start!important;gap:2px;flex-wrap:wrap;overflow:visible;width:100%}
.puja-panel-slot .cc-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.puja-panel-slot .cc-offerente{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.puja-panel-slot .timer-ring-container{flex:1!important;display:flex;align-items:center;justify-content:center}
.puja-panel-slot .timer-ring{width:110px!important;height:110px!important}
.puja-panel-slot .timer-number{font-size:2rem!important}
.puja-panel-slot .timer-label-text{font-size:.78rem!important}
/* ══════ Fallback larghezze strette (admin) — evita che il timer scompaia o la riga vada in overflow ══════ */
body.layout-admin .asta-row-puja .timer-ring-container{flex:1 1 60px!important;min-width:60px}
/* ══ Avatar giocatore ampliato in chiamata-card (admin + partecipante) ══ */
body.layout-admin .asta-row-puja .chiamata-card{position:relative!important;padding:8px 14px 8px 112px!important;overflow:visible!important}
body.layout-admin .asta-row-puja .cc-avatar{width:96px!important;height:118px!important;position:absolute!important;left:8px!important;top:8px!important;bottom:auto!important;border-radius:14px!important;flex-shrink:0!important}
body.layout-admin .asta-row-puja .cc-avatar-icon{font-size:2.2rem!important}
body.layout-admin .asta-row-puja .cc-avatar-initial{font-size:2rem!important}
body.layout-admin .asta-row-puja .cc-avatar-svg{width:90%!important;height:90%!important}
body.layout-admin .asta-row-puja .cc-avatar-img{border-radius:14px!important}
.puja-panel-slot .chiamata-card{position:relative!important;padding:8px 14px 8px 96px!important;max-width:340px!important;flex:1.4 1 0%!important;min-width:200px!important;min-height:0!important;overflow:visible!important;align-items:flex-start!important;justify-content:flex-start!important}
.puja-panel-slot .cc-avatar{width:78px!important;height:78px!important;position:absolute!important;left:8px!important;top:8px!important;border-radius:12px!important}
.puja-panel-slot .cc-avatar-icon{font-size:1.5rem!important}
.puja-panel-slot .cc-avatar-initial{font-size:1.3rem!important}
.puja-panel-slot .cc-avatar-svg{width:88%!important;height:88%!important}
.puja-panel-slot .cc-avatar-img{border-radius:12px!important}
@media (max-width:700px){
  body.layout-admin .asta-row-puja .chiamata-card{flex:0 1 120px!important;max-width:120px!important;min-width:80px!important;padding:4px 8px 4px 54px!important}
  body.layout-admin .asta-row-puja .cc-nome{font-size:.82rem!important}
  body.layout-admin .asta-row-puja .cc-header{gap:5px!important}
  body.layout-admin .asta-row-puja .badge-ruolo{min-width:18px!important;height:16px!important;font-size:.55rem!important;padding:0 4px!important}
  body.layout-admin .asta-row-puja .cc-avatar{width:38px!important;height:38px!important}
  body.layout-admin .asta-row-puja .cc-avatar-icon{font-size:.85rem!important}body.layout-admin .asta-row-puja .cc-avatar-initial{font-size:.72rem!important}body.layout-admin .asta-row-puja .cc-avatar-svg{width:72%!important;height:72%!important}
  body.layout-admin .asta-row-puja .cc-meta{font-size:.62rem!important}
  body.layout-admin .asta-row-puja .cc-offerente{font-size:.78rem!important}
  body.layout-admin .asta-row-puja .cc-offerta{font-size:1.9rem!important}
  body.layout-admin .asta-row-puja .cc-offerta-label{font-size:.62rem!important}
  body.layout-admin .asta-row-puja .timer-ring-container{flex:1 1 56px!important;min-width:56px}
  body.layout-admin .asta-row-puja .timer-ring{width:56px!important;height:56px!important}
  body.layout-admin .asta-row-puja .timer-number{font-size:1.05rem!important}
  body.layout-admin .asta-row-puja .timer-label-text{font-size:.5rem!important}
  body.layout-admin .asta-row-puja .rilancio-box{flex:0 0 180px!important}
  body.layout-admin .asta-row-puja .btn-rilancia{font-size:.85rem!important;padding:6px 4px!important}
  body.layout-admin .asta-row-puja .inp-rilancio{width:48px!important;font-size:16px!important}
  body.layout-admin .asta-row-puja .btn-manuale{font-size:.66rem!important;padding:5px 6px!important}
}
@media (max-width:400px){
  body.layout-admin .asta-row-puja{gap:4px!important;padding:4px 6px!important}
  body.layout-admin .asta-row-puja .chiamata-card{flex:0 1 78px!important;max-width:78px!important;min-width:64px!important;padding:3px 5px 3px 46px!important}
  body.layout-admin .asta-row-puja .cc-nome{font-size:.68rem!important}
  body.layout-admin .asta-row-puja .cc-header{gap:3px!important}
  body.layout-admin .asta-row-puja .badge-ruolo{min-width:14px!important;height:13px!important;font-size:.48rem!important;padding:0 3px!important}
  body.layout-admin .asta-row-puja .cc-avatar{width:30px!important;height:30px!important}
  body.layout-admin .asta-row-puja .cc-avatar-icon{font-size:.65rem!important}body.layout-admin .asta-row-puja .cc-avatar-initial{font-size:.55rem!important}body.layout-admin .asta-row-puja .cc-avatar-svg{width:72%!important;height:72%!important}
  body.layout-admin .asta-row-puja .cc-meta{font-size:.75rem!important}
  body.layout-admin .asta-row-puja .cc-offerente{font-size:.68rem!important}
  body.layout-admin .asta-row-puja .cc-offerta{font-size:1.5rem!important}
  body.layout-admin .asta-row-puja .cc-offerta-label{font-size:.5rem!important}
  body.layout-admin .asta-row-puja .timer-ring-container{flex:0 0 46px!important;min-width:46px!important}
  body.layout-admin .asta-row-puja .timer-ring{width:46px!important;height:46px!important}
  body.layout-admin .asta-row-puja .timer-number{font-size:.85rem!important}
  body.layout-admin .asta-row-puja .timer-label-text{font-size:.42rem!important}
  body.layout-admin .asta-row-puja .rilancio-box{flex:0 0 140px!important;padding:4px 6px!important;gap:3px 5px!important}
  body.layout-admin .asta-row-puja .btn-rilancia{font-size:.75rem!important;padding:4px 3px!important}
  body.layout-admin .asta-row-puja .inp-rilancio{width:42px!important;font-size:16px!important}
  body.layout-admin .asta-row-puja .btn-manuale{font-size:.55rem!important;padding:3px 4px!important}
}
@media (max-width:1200px){
  .puja-panel-slot{flex-wrap:nowrap!important;padding:10px 12px!important;gap:8px!important}
  .puja-panel-slot .card-timer-group{flex:1 1 100%!important;border-right:none!important;padding-right:0!important;min-width:0!important}
  .puja-panel-slot .chiamata-card{flex:0 1 220px!important;max-width:220px!important}
  .puja-panel-slot .chiamata-card{padding-left:54px!important;min-height:54px!important}
  .puja-panel-slot .cc-avatar{width:38px!important;height:38px!important;left:8px!important;border-radius:12px!important}
  .puja-panel-slot .cc-avatar-icon{font-size:.85rem!important}
  .puja-panel-slot .cc-avatar-initial{font-size:.72rem!important}
  .puja-panel-slot .timer-ring{width:60px!important;height:60px!important}
  .puja-panel-slot .timer-number{font-size:1.15rem!important}
  .puja-panel-slot .timer-label-text{font-size:.58rem!important}
  .puja-panel-slot .cc-offerta{font-size:1.7rem!important}
  .puja-panel-slot .cc-offerta-label{font-size:.68rem!important}
  .puja-panel-slot .rilancio-box{flex:1 1 100%!important;padding-left:0!important;padding-top:8px!important;border-top:1px solid var(--border-light);position:static!important;bottom:auto!important;left:auto!important;right:auto!important;z-index:auto!important;border-radius:12px!important}
  .puja-panel-slot .cc-meta small.text-muted{display:none!important}
  .puja-panel-slot .cc-strategia-info{display:block!important;margin-top:3px!important;padding-left:6px!important;font-size:.85rem!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important}
  .puja-panel-slot .cc-manuale-badge{font-size:.55rem!important;padding:2px 6px!important;margin:0 0 2px!important;line-height:1.2!important}
  .puja-panel-slot .cc-attesa-badge{font-size:.55rem!important;padding:2px 6px!important;margin:2px 0!important;line-height:1.2!important}
  .puja-panel-slot .cc-header{margin-bottom:2px!important}
  .puja-panel-slot .cc-nome{font-size:.85rem!important}
  .puja-panel-slot .cc-meta{font-size:.62rem!important}
  .puja-panel-slot .cc-body{margin-bottom:0!important}
  .puja-panel-slot .cc-offerta-box{padding:3px 12px 6px!important;margin-bottom:2px!important}
  .puja-panel-slot .cc-offerente{font-size:.85rem!important}
}
@media (max-width:400px){
  .puja-panel-slot{padding:8px 10px!important;gap:6px!important}
  .puja-panel-slot .chiamata-card{flex:0 1 165px!important;max-width:165px!important}
  .puja-panel-slot .chiamata-card{padding-left:46px!important;min-height:46px!important}
  .puja-panel-slot .cc-avatar{width:30px!important;height:30px!important;left:8px!important;border-radius:10px!important}
  .puja-panel-slot .cc-avatar-icon{font-size:.65rem!important}
  .puja-panel-slot .cc-avatar-initial{font-size:.55rem!important}
  .puja-panel-slot .cc-nome{font-size:.8rem!important}
  .puja-panel-slot .cc-meta{font-size:.85rem!important}
  .puja-panel-slot .cc-offerente{font-size:.78rem!important}
  .puja-panel-slot .cc-offerta{font-size:1.4rem!important}
  .puja-panel-slot .cc-offerta-label{font-size:.58rem!important}
  .puja-panel-slot .timer-ring{width:48px!important;height:48px!important}
  .puja-panel-slot .timer-number{font-size:.9rem!important}
  .puja-panel-slot .timer-label-text{font-size:.48rem!important}
  .puja-panel-slot .btn-rilancia{font-size:.65rem!important;padding:6px 8px!important}
  .puja-panel-slot .inp-rilancio{width:56px!important;font-size:16px!important}
  .puja-panel-slot .cc-manuale-badge,.puja-panel-slot .cc-attesa-badge{font-size:.5rem!important;padding:1px 5px!important;margin:0 0 1px!important}
  .puja-panel-slot .cc-header{margin-bottom:1px!important}
  .puja-panel-slot .cc-offerta-box{padding:2px 10px 5px!important;margin-bottom:1px!important}
  .puja-panel-slot .cc-offerente{font-size:.75rem!important}
  .puja-panel-slot .cc-strategia-info{display:block!important;margin-top:2px!important;padding-left:5px!important;font-size:.75rem!important;line-height:1.1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important}
}
/* ══ Colori ufficiali ruoli — applicato su Chiamata/Liberi/Rose/Annulla ══ */
/* Base badge per .storico-ruolo (oggi senza stile, solo testo semplice) */
.storico-ruolo{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:22px;padding:0 6px;border-radius:6px;
  font-size:.65rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;flex-shrink:0;
}
/* Por → giallo */
.badge-ruolo.r-Por,.badge-ruolo.r-P,
.ruolo-rose-por,.rose-badge.ruolo-rose-p,
.storico-ruolo.ruolo-Por,.storico-ruolo.ruolo-P{
  background:linear-gradient(135deg,#ffd93b,#f2b400);color:#000;
}
/* Dd,Ds,Dc,D,B → verde */
.badge-ruolo.r-Dd,.badge-ruolo.r-Ds,.badge-ruolo.r-Dc,.badge-ruolo.r-D,.badge-ruolo.r-B,
.ruolo-rose-dd,.ruolo-rose-ds,.ruolo-rose-dc,.ruolo-rose-d,.ruolo-rose-b,
.storico-ruolo.ruolo-Dd,.storico-ruolo.ruolo-Ds,.storico-ruolo.ruolo-Dc,.storico-ruolo.ruolo-D,.storico-ruolo.ruolo-B{
  background:linear-gradient(135deg,#2ecc71,#229954);color:#fff;
}
/* M,C,E → azzurro */
.badge-ruolo.r-M,.badge-ruolo.r-C,.badge-ruolo.r-E,
.ruolo-rose-m,.ruolo-rose-c,.ruolo-rose-e,
.storico-ruolo.ruolo-M,.storico-ruolo.ruolo-C,.storico-ruolo.ruolo-E{
  background:linear-gradient(135deg,#4b7bec,#3867d6);color:#fff;
}
/* T,W → viola */
.badge-ruolo.r-T,.badge-ruolo.r-W,
.ruolo-rose-t,.ruolo-rose-w,
.storico-ruolo.ruolo-T,.storico-ruolo.ruolo-W{
  background:linear-gradient(135deg,#a55eea,#8854d0);color:#fff;
}
/* A,Pc → rosso */
.badge-ruolo.r-A,.badge-ruolo.r-Pc,
.ruolo-rose-a,.ruolo-rose-pc,
.storico-ruolo.ruolo-A,.storico-ruolo.ruolo-Pc{
  background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;
}
/* ══ Rebalance panel participante: laterales más anchos, medio menos dominante ══ */
body.layout-partecipante .asta-row-panels>.panel-budget{flex:1!important}
body.layout-partecipante .asta-row-panels>#puja-panel-slot{flex:2.8!important}
body.layout-partecipante .asta-row-panels>#mio-panel{flex:1!important}
/* ══ Rebalance panel admin: card/timer/rilancio más homogéneos ══ */
body.layout-admin .asta-row-puja .chiamata-card{
  flex:1.4 1 0%!important;max-width:420px!important;min-width:200px!important;
}
body.layout-admin .asta-row-puja .timer-ring-container{
  flex:0.8 1 auto!important;
}
body.layout-admin .asta-row-puja .rilancio-box{
  flex:0 0 270px!important;max-width:270px!important;width:270px!important;
}
/* ══ Ajuste móvil: preservar wrap de los 3 paneles participante bajo 768px ══ */
@media (max-width:768px){
  body.layout-partecipante .asta-row-panels>.panel-budget{flex:1 1 200px!important}
  body.layout-partecipante .asta-row-panels>#puja-panel-slot{flex:1 1 280px!important}
  body.layout-partecipante .asta-row-panels>#mio-panel{flex:1 1 200px!important}
}
/* ══ FASE 2 — STRATEGIE ══════════════════════════════════ */
.btn-logout-link{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text-secondary);font-size:.85rem;font-weight:600;cursor:pointer;padding:6px 10px}
.btn-logout-link:hover{color:var(--text-primary)}
.home-header{position:relative}
.strategia-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:var(--bg-main);border-radius:10px;margin-bottom:8px}
.strategia-row-nome{font-weight:700;font-size:.92rem;color:var(--text-primary)}
.strategia-row-meta{font-size:.75rem;color:var(--text-muted);margin-top:2px}
/* Checkbox multi-tipo nel form di creazione strategia (una strategia puo' valere per piu' aste) */
.strategia-tipi-check{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.strategia-tipo-check{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-primary);cursor:pointer}
/* Badge tipo asta: uno o piu' per strategia, riusato in lista/editor/modal strategia */
.strategia-tipo-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.strategia-tipo-badge{display:inline-block;font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--primary-subtle);color:var(--primary-bright);border:1px solid var(--primary)}
.fascia-section{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:14px;margin-top:14px}
.fascia-header{display:flex;align-items:center;gap:8px;padding:0 0 10px 10px;flex-wrap:wrap}
.fascia-nome-input{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);border-radius:7px;padding:5px 8px;font-size:16px;font-weight:600;width:140px}
.fascia-colore-input{width:32px;height:32px;border:none;border-radius:7px;padding:0;background:none;cursor:pointer}
.fascia-up-btn,.fascia-down-btn,.fascia-del-btn{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-secondary);border-radius:7px;padding:4px 9px;cursor:pointer;font-size:.8rem}
.fascia-del-btn{color:var(--danger)}
.fascia-count{margin-left:auto;font-size:.75rem;color:var(--text-muted);background:var(--bg-elevated);border-radius:8px;padding:3px 9px}
.fascia-nome-fissa{font-weight:700;font-size:.9rem;color:var(--text-secondary)}
.fascia-players{display:flex;flex-direction:column;gap:6px}
/* Riga giocatore su UNA sola linea, mai a capo (flex-wrap:nowrap): nome e squadra
   si troncano con ellipsis se non ci stanno (il testo completo resta leggibile
   passandoci sopra grazie al "title"), prezzo/percentuale sono input piccoli. Se
   anche cosi' non basta (schermi molto stretti) la riga scorre in orizzontale
   invece di spezzarsi su piu' righe — a differenza del vecchio flex-wrap:wrap qui
   NON si perde/sovrappone nulla, si scorre per vedere il resto. */
.editor-player-row{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--bg-main);border-radius:8px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;flex-shrink:0;font-size:.76rem}
.editor-player-avatar{width:26px;height:26px;min-width:26px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--bg-elevated)}
/* min-width esplicito necessario: un elemento flex con overflow:hidden ha
   automaticamente min-width:0 (invece del min-content), quindi senza questo
   collasserebbe a larghezza 0 (testo del tutto invisibile) su schermi stretti
   invece di limitarsi a troncare con ellipsis. */
.editor-player-nome{font-weight:600;color:var(--text-primary);min-width:46px;max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:1}
.editor-player-squadra{color:var(--text-muted);min-width:34px;max-width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:1}
.editor-player-quot,.editor-player-fvm{color:var(--text-secondary);white-space:nowrap;text-align:left;flex-shrink:0}
.editor-preferito-btn{background:none;border:none;font-size:1rem;cursor:pointer;color:var(--text-muted);padding:0 2px;flex-shrink:0}
.editor-preferito-btn.active{color:var(--gold)}
.editor-titolarita-btn{background:none;border:none;font-size:.78rem;font-weight:700;cursor:pointer;color:var(--text-muted);padding:0 3px;flex-shrink:0;white-space:nowrap}
.editor-titolarita-btn.active{color:var(--gold)}
.editor-commento-btn{background:none;border:none;font-size:.9rem;cursor:pointer;color:var(--text-muted);opacity:.45;padding:0 2px;flex-shrink:0}
.editor-commento-btn.active{opacity:1;color:var(--primary)}
.titolarita-stars{display:flex;justify-content:center;gap:8px;margin:16px 0}
.titolarita-star-btn{background:none;border:none;font-size:2rem;line-height:1;cursor:pointer;color:var(--text-muted);padding:0}
.titolarita-star-btn.active{color:var(--gold)}
.mc-textarea{width:100%;background:var(--bg-main);border:1px solid var(--border);border-radius:10px;color:var(--text-primary);font-family:var(--font-main);font-size:15px;padding:10px 14px;resize:vertical;min-height:90px}
.editor-fascia-select{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);border-radius:6px;padding:3px 4px;font-size:.7rem;max-width:90px;flex-shrink:0}
input.giocatore-prezzo,input.giocatore-percentuale{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);border-radius:6px;padding:3px 4px;font-size:.72rem;width:46px;flex-shrink:0}
.editor-ordina-row{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.editor-ordina-row .gk-select{flex:0 1 140px;min-width:110px}
.editor-player-check{width:17px;height:17px;flex-shrink:0;cursor:pointer;accent-color:var(--primary)}
.editor-player-row.selezionato{background:var(--primary-subtle);box-shadow:inset 0 0 0 1px var(--primary)}
/* Barra azioni in blocco: sticky in cima cosi' resta raggiungibile selezionando
   giocatori sia dentro le Fasce (sopra) sia nei Non assegnati (sotto), senza dover
   scorrere avanti e indietro fino in fondo alla pagina ogni volta. */
.editor-bulk-bar{border-color:var(--primary)}
.editor-bulk-bar.hidden{display:none}
.editor-bulk-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.editor-bulk-count{font-weight:700;color:var(--primary-bright);white-space:nowrap}
.editor-bulk-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.editor-bulk-chip{display:inline-flex;align-items:center;gap:5px;background:var(--primary-subtle);border:1px solid var(--primary);color:var(--text-primary);border-radius:20px;padding:3px 6px 3px 10px;font-size:.72rem;white-space:nowrap}
.editor-bulk-chip-rm{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.9rem;line-height:1;padding:2px}
.editor-bulk-chip-rm:hover{color:var(--danger)}
.editor-bulk-azione-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.editor-bulk-valore-inp{background:var(--bg-main);border:1px solid var(--border);color:var(--text-primary);border-radius:6px;padding:6px 8px;font-size:.8rem;width:80px}
#editor-bulk-fascia{flex:0 1 170px;min-width:140px}
#editor-bulk-campo{flex:0 1 70px;min-width:60px}
/* == FASE 3 == STRATEGIE NELL'ASTA == */
.liberi-strategia-bar{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;flex-shrink:0;margin-left:10px;padding:0}
.liberi-strategia-btn{white-space:nowrap;padding:4px 8px;font-size:.7rem;flex-shrink:0}
.liberi-strategia-attiva-btn{background:var(--primary-subtle);border-color:var(--primary);color:var(--primary-bright)}
.liberi-icon-toggle{flex-shrink:0;width:30px;height:30px;line-height:1;display:flex;align-items:center;justify-content:center;background:var(--bg-elevated);border:1px solid var(--border);border-radius:7px;font-size:1rem;cursor:pointer;padding:0;overflow:visible;opacity:.55;transition:all .15s}
.liberi-icon-toggle.active{opacity:1;background:var(--primary-subtle);border-color:var(--primary)}
.liberi-cerca-input{flex:0 0 auto;width:150px;max-width:150px;padding:5px 10px;font-size:16px;margin:0;background:var(--gold-subtle);border:1.5px solid var(--gold);color:var(--text-primary)}
.liberi-cerca-input::placeholder{color:var(--gold-bright)}
.liberi-filtri-row{display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:visible;flex-wrap:nowrap;flex-shrink:0;margin-bottom:6px}
.filtro-ruolo-liberi{flex-wrap:nowrap;flex-shrink:0;margin-bottom:0}
.liberi-toggle input{cursor:pointer}
.l-strategia-badge{font-size:.65rem;font-weight:700;border:1px solid;border-radius:6px;padding:1px 6px;flex-shrink:0}
.cc-strategia-info{margin-top:8px;font-size:.8rem;color:var(--text-secondary);border-left:3px solid var(--border);padding-left:8px}
.cc-strategia-vuota{color:var(--text-muted);border-left-color:var(--border)}
.strategia-modal-lista{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow-y:auto;margin-top:10px}
.strategia-modal-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--bg-main);border:1px solid var(--border);border-radius:10px;padding:10px 12px;cursor:pointer;text-align:left;width:100%}
.strategia-modal-item:hover{border-color:var(--primary)}
.strategia-modal-item-nome{font-weight:700;font-size:.88rem;color:var(--text-primary)}
.strategia-modal-item-meta{font-size:.72rem;color:var(--text-muted)}
.strategia-modal-item-rimuovi .strategia-modal-item-nome{color:var(--danger)}

/* ══════════════════════════════════════════════════════════
   GOALKEEPER PLANNER — modulo Planner (primo di una serie)
   Riutilizza le variabili di design del progetto (colori, font,
   card, badge) per garantire una perfetta integrazione visiva.
   ══════════════════════════════════════════════════════════ */
.gk-pro-badge{display:inline-block;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#000;font-size:.6rem;font-weight:800;letter-spacing:.05em;padding:2px 7px;border-radius:20px;margin-left:6px;vertical-align:middle}
.gk-planner-screen{padding:16px;max-width:980px;margin:0 auto}
.gk-header{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.gk-header-title{flex:1}
.gk-header-title h1{font-family:var(--font-display);font-size:1.35rem;font-weight:800;margin:0}
.gk-help-btn{flex-shrink:0}
.gk-header-sub{font-size:.78rem;color:var(--text-muted);margin-top:2px}
.gk-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:14px;border-bottom:1px solid var(--border)}
.gk-tab{flex-shrink:0;background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-secondary);border-radius:10px 10px 0 0;padding:8px 14px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.gk-tab:hover{color:var(--text-primary);border-color:var(--primary)}
.gk-tab.active{background:var(--primary-subtle);border-color:var(--primary);color:var(--primary-bright)}
.gk-view{display:none;animation:card-enter .25s ease-out}
.gk-view.active{display:block}
.gk-view-intro{font-size:.82rem;color:var(--text-secondary);margin-bottom:14px}

/* ── Ranking ── */
.gk-ranking-list{display:flex;flex-direction:column;gap:10px}
.gk-rank-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .15s}
.gk-rank-card:hover{border-color:var(--primary);transform:translateY(-1px)}
.gk-rank-pos{font-family:var(--font-mono);font-size:1.1rem;font-weight:800;color:var(--text-muted);min-width:28px;text-align:center}
.gk-rank-pos.top1{color:var(--gold-bright)}.gk-rank-pos.top2{color:#d0d0d0}.gk-rank-pos.top3{color:#e0a05a}
.gk-rank-teams{flex:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gk-rank-team-badge{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;color:var(--text-primary)}
.gk-rank-team-badge img{width:22px;height:22px;object-fit:contain}
.gk-rank-plus{color:var(--text-muted);font-size:.8rem}
.gk-rank-score{text-align:right;min-width:90px}
.gk-rank-score-num{font-family:var(--font-mono);font-size:1.25rem;font-weight:800}
.gk-rank-score-lvl{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:1px 8px;border-radius:20px;display:inline-block;margin-top:2px}
.gk-lvl-Ottimo{background:rgba(0,224,160,.18);color:var(--success)}
.gk-lvl-Buono{background:rgba(255,176,74,.18);color:var(--primary-bright)}
.gk-lvl-Discreto{background:rgba(255,179,0,.18);color:var(--gold-bright)}
.gk-lvl-Rischioso{background:rgba(255,56,96,.18);color:var(--danger)}
.gk-rank-conf{font-size:.65rem;color:var(--text-muted);margin-top:2px}
.gk-rank-costo{font-size:.68rem;font-weight:700;padding:1px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:3px}
.gk-rank-costo-target{font-weight:500;opacity:.75}
.gk-rank-costo.gk-costo-ok{background:rgba(0,224,160,.14);color:var(--success)}
.gk-rank-costo.gk-costo-over{background:rgba(255,56,96,.14);color:var(--danger)}
.gk-costo-atteso{margin-top:10px;padding:8px 12px;border-radius:10px;background:var(--bg-elevated);border:1px solid var(--border);display:flex;flex-direction:column;gap:2px;font-size:.78rem}
.gk-costo-atteso.gk-costo-ok{border-color:rgba(0,224,160,.35)}
.gk-costo-atteso.gk-costo-over{border-color:rgba(255,56,96,.35)}
.gk-costo-detail{font-size:.68rem;color:var(--text-muted)}
.gk-compare-costo-row{display:flex;justify-content:space-between;gap:10px;margin-top:10px;font-size:.72rem;color:var(--text-muted)}

/* ── Selettori coppia ── */
.gk-pair-picker,.gk-round-picker{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.gk-select{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);border-radius:8px;padding:8px 10px;font-size:.85rem;flex:1;min-width:130px}
.gk-pair-plus{color:var(--text-muted);font-weight:700}

/* ── Team picker "a la FantaLab": card con stemma + select ── */
.gk-pair-picker-fancy{gap:14px}
.gk-team-card{background:linear-gradient(160deg,var(--bg-elevated),var(--bg-card));border-radius:16px;padding:12px 18px;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:104px;border:1px solid var(--border-light)}
.gk-team-card-a{box-shadow:0 0 0 1px var(--primary-glow),0 0 20px var(--primary-glow)}
.gk-team-card-b{box-shadow:0 0 0 1px var(--fire-glow),0 0 20px var(--fire-glow)}
.gk-team-card-badge img{width:44px;height:44px;object-fit:contain}
.gk-select-fancy{background:transparent;border:none;color:var(--text-primary);font-weight:800;font-family:var(--font-display);font-size:.82rem;text-align:center;text-transform:uppercase;letter-spacing:.03em;appearance:none;cursor:pointer;outline:none}
.gk-select-fancy option{background:var(--bg-card);color:var(--text-primary)}
.gk-compare-picker{display:flex;align-items:center;gap:14px}
.gk-compare-col{flex:1;display:flex;flex-direction:column;gap:6px}
.gk-compare-label{font-size:.75rem;color:var(--text-muted);font-weight:700;text-transform:uppercase}
.gk-compare-vs{font-family:var(--font-display);font-weight:800;color:var(--gold-bright);font-size:1.1rem}

/* ── Riepilogo coppia (score + breakdown) ── */
.gk-summary-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:16px}
.gk-summary-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.gk-summary-score{text-align:center}
.gk-summary-score-num{font-family:var(--font-mono);font-size:2.2rem;font-weight:800;line-height:1}
.gk-summary-score-label{font-size:.68rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.gk-summary-explain{font-size:.85rem;color:var(--text-secondary);margin-top:14px;line-height:1.6;border-left:3px solid var(--primary);padding-left:12px}
.gk-breakdown{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:16px}
.gk-breakdown-item{background:var(--bg-elevated);border-radius:10px;padding:10px 12px}
.gk-breakdown-label{font-size:.7rem;color:var(--text-muted);margin-bottom:6px}
.gk-breakdown-bar{height:6px;border-radius:4px;background:var(--bg-main);overflow:hidden}
.gk-breakdown-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--primary),var(--primary-bright));transition:width .5s ease}
.gk-breakdown-val{font-family:var(--font-mono);font-size:.78rem;font-weight:700;margin-top:4px}
.gk-stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-top:14px}
.gk-stat-box{text-align:center;background:var(--bg-elevated);border-radius:10px;padding:10px}
.gk-stat-num{font-family:var(--font-mono);font-size:1.3rem;font-weight:800;color:var(--text-primary)}
.gk-stat-lbl{font-size:.65rem;color:var(--text-muted);margin-top:2px}

/* ── Gauge circolare punteggio (stile FantaLab) ── */
.gk-gauge{position:relative;width:120px;height:120px;flex-shrink:0}
.gk-gauge-svg{width:100%;height:100%;transform:rotate(-90deg)}
.gk-gauge-track{fill:none;stroke:var(--bg-elevated);stroke-width:10}
.gk-gauge-fill{fill:none;stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .6s ease}
.gk-gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gk-gauge-num{font-family:var(--font-mono);font-size:1.9rem;font-weight:800;line-height:1}
.gk-gauge-max{font-size:.65rem;color:var(--text-muted);letter-spacing:.04em}

/* ── Mini stat pills (facili/medie/difficili/casa/fuori) ── */
.gk-mini-stats{display:flex;gap:8px;flex-wrap:wrap;flex:1;justify-content:flex-end}
.gk-mini-stat{background:var(--bg-elevated);border-radius:10px;padding:8px 12px;display:flex;flex-direction:column;align-items:center;min-width:58px}
.gk-mini-stat-num{font-family:var(--font-mono);font-weight:800;font-size:1.1rem;color:var(--text-primary)}
.gk-mini-stat-lbl{font-size:.62rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em}
.gk-mini-stat-facile .gk-mini-stat-num{color:var(--success)}
.gk-mini-stat-media .gk-mini-stat-num{color:var(--gold-bright)}
.gk-mini-stat-difficile .gk-mini-stat-num{color:var(--danger)}
.gk-mini-stat-molto-difficile .gk-mini-stat-num{color:#a3001e}

/* ── Card gauge "a la FantaLab": glow oro + grid statistiche 3+2 ── */
.gk-summary-fancy{display:flex;align-items:center;gap:22px;flex-wrap:wrap;background:linear-gradient(135deg,var(--bg-elevated),var(--bg-card));border:1px solid var(--gold-glow);box-shadow:0 0 0 1px var(--gold-glow),0 0 30px var(--gold-glow),inset 0 0 50px rgba(255,179,0,.04)}
.gk-summary-fancy-gauge{flex-shrink:0}
.gk-summary-fancy .gk-gauge{width:132px;height:132px}
.gk-summary-fancy .gk-gauge-num{font-size:2.1rem}
.gk-mini-stats-grid{display:flex;flex-direction:column;gap:8px;flex:1}
.gk-mini-row{display:flex;gap:8px}
.gk-mini-row .gk-mini-stat{flex:1}
.gk-mini-stat{background:var(--bg-main);border:1px solid var(--border);border-radius:12px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;min-width:64px}

/* ── Heatmap 38 giornate ── */
.gk-heatmap-wrap{overflow-x:auto;margin-top:18px;padding-bottom:8px}
.gk-heatmap{display:grid;grid-auto-rows:auto;gap:3px;min-width:max-content}
.gk-heatmap-row-label{font-size:.7rem;font-weight:700;color:var(--text-secondary);display:flex;align-items:center;gap:6px;padding-right:8px;white-space:nowrap;position:sticky;left:0;background:var(--bg-card);z-index:1;width:70px;height:38px}
.gk-heatmap-row-label img{width:18px;height:18px;object-fit:contain}
.gk-heat-corner{width:70px}
.gk-heat-cell{width:34px;height:38px;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:.52rem;font-weight:700;color:#04120a;cursor:default;transition:transform .1s;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.gk-heat-cell img{width:16px;height:16px;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.gk-heat-cell span{font-size:.5rem;line-height:1;letter-spacing:.02em}
.gk-heat-ballot{font-size:.75rem}
.gk-heat-cell:hover{transform:scale(1.18);z-index:2}
.gk-heat-facile{background:linear-gradient(135deg,#4ee39a,#00c37a);color:#00250f}
.gk-heat-media{background:linear-gradient(135deg,#ffd166,#ffab00);color:#3a2400}
.gk-heat-difficile{background:linear-gradient(135deg,#ff6b6b,#e8283e);color:#3a0008}
.gk-heat-molto_difficile{background:linear-gradient(135deg,#a3001e,#4a0009);color:#fff}
.gk-heat-cell.gk-heat-reco{box-shadow:0 0 0 2px var(--text-primary) inset}
.gk-heat-header-cell{width:34px;text-align:center;font-size:.62rem;color:var(--text-muted);font-family:var(--font-mono);font-weight:700}
.gk-heat-legend{display:flex;gap:14px;margin-top:10px;font-size:.7rem;color:var(--text-muted);flex-wrap:wrap}
.gk-heat-legend span{display:inline-flex;align-items:center;gap:5px}
.gk-heat-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}



/* ── Confronto ── */
.gk-compare-result{margin-top:18px}
.gk-compare-bars{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.gk-compare-bar-row{display:flex;align-items:center;gap:10px;font-size:.78rem}
.gk-compare-bar-label{min-width:130px;color:var(--text-muted)}
.gk-compare-bar-track{flex:1;display:flex;align-items:center;gap:4px}
.gk-compare-bar-fill{height:10px;border-radius:5px}
.gk-compare-bar-fill.side-a{background:linear-gradient(90deg,var(--success),#00c37a)}
.gk-compare-bar-fill.side-b{background:linear-gradient(90deg,var(--primary),var(--primary-bright))}

/* ── Vista giornata ── */
.gk-round-label{font-family:var(--font-mono);font-weight:800;font-size:1.1rem;min-width:110px;text-align:center}
.gk-round-slider{flex:1;min-width:120px}
.gk-round-teams{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.gk-round-team-row{display:flex;align-items:center;gap:10px;background:var(--bg-elevated);border-radius:8px;padding:8px 12px}
.gk-round-team-pos{font-family:var(--font-mono);font-weight:700;color:var(--text-muted);min-width:22px}
.gk-round-team-name{flex:1;font-weight:600;font-size:.85rem}
.gk-round-team-opp{font-size:.72rem;color:var(--text-muted)}
.gk-round-diff-badge{font-family:var(--font-mono);font-weight:700;font-size:.75rem;padding:3px 10px;border-radius:20px;min-width:44px;text-align:center}

/* ── Impostazioni ── */
.gk-config-section{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:14px}
.gk-config-section h3{font-size:.9rem;margin-bottom:12px;color:var(--text-primary)}
.gk-config-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:.8rem}
.gk-config-row label{flex:0 0 150px;color:var(--text-secondary)}
.gk-config-row input[type=range]{flex:1}
.gk-config-row .gk-config-val{font-family:var(--font-mono);min-width:36px;text-align:right;color:var(--text-primary);font-weight:700}
.gk-strength-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.gk-strength-item{display:flex;flex-direction:column;gap:4px;background:var(--bg-elevated);border-radius:8px;padding:8px 10px}
.gk-strength-item label{font-size:.72rem;color:var(--text-secondary);display:flex;justify-content:space-between}
.gk-config-actions{display:flex;gap:10px;flex-wrap:wrap}
.gk-config-actions .btn{flex:1;min-width:160px}
.gk-admin-only{display:none}
body.app-role-admin .gk-admin-only{display:block}
body.app-role-admin .gk-config-actions.gk-admin-only{display:flex}

@media (max-width:600px){
  .gk-heat-cell,.gk-heat-header-cell{width:24px;height:28px}
  .gk-heat-cell img{width:12px;height:12px}
  .gk-heat-cell span{font-size:.42rem}
  .gk-compare-picker{flex-direction:column}
  .gk-compare-vs{align-self:center}
}

.gk-import-hint{font-size:.78rem;color:var(--text-secondary);margin-bottom:12px;line-height:1.5}
.gk-import-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.gk-import-filename{font-size:.78rem;color:var(--text-muted);font-family:var(--font-mono)}
.gk-import-format-hint{font-size:.68rem;color:var(--text-muted);margin-bottom:10px;line-height:1.5}
.gk-import-format-hint code{background:var(--bg-elevated);padding:1px 5px;border-radius:4px;font-family:var(--font-mono)}
.gk-import-actions{display:flex;gap:8px;flex-wrap:wrap}
.gk-import-status{font-size:.75rem;margin-top:8px;font-weight:600}
.gk-import-status.ok{color:var(--success)}
.gk-import-status.err{color:var(--danger)}


/* ── Modal "Come funziona" del GK Planner ── */
.gk-help-modal{max-width:560px}
.gk-help-body{max-height:60vh;overflow-y:auto;font-size:.85rem;line-height:1.6;color:var(--text-secondary)}
.gk-help-body h3{font-family:var(--font-display);font-size:.95rem;color:var(--text-primary);margin:16px 0 6px}
.gk-help-body ul{margin:6px 0 6px 18px;padding:0}
.gk-help-body li{margin-bottom:6px}
.gk-help-tag{display:inline-block;padding:1px 8px;border-radius:20px;font-size:.72rem;font-weight:700}
.gk-help-tag-facile{background:rgba(0,224,160,.18);color:var(--success)}
.gk-help-tag-media{background:rgba(255,171,0,.18);color:var(--gold-bright)}
.gk-help-tag-difficile{background:rgba(255,56,96,.18);color:var(--danger)}
.gk-help-tag-molto-difficile{background:rgba(163,0,30,.28);color:#ff4d6d}

/* ── Toggle Portieri/Attaccanti ── */
.gk-mode-toggle{display:flex;gap:6px;padding:10px 14px 0;justify-content:center}
.gk-mode-toggle-compact{padding:8px 10px 0}
.gk-mode-btn{flex:1;max-width:160px;padding:7px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-secondary);font-weight:600;font-size:.8rem;cursor:pointer;transition:all .18s}
.gk-mode-btn.active{background:linear-gradient(135deg,var(--primary),var(--fire));color:#fff;border-color:transparent;box-shadow:0 3px 12px var(--primary-glow)}

/* ── Sub-tab Ranking (Coppie/Terzetti) ── */
.gk-ranking-subtabs{display:flex;gap:6px;padding:10px 14px 6px}
.gk-subtab{padding:5px 14px;border-radius:8px;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-secondary);font-size:.76rem;font-weight:600;cursor:pointer;transition:all .15s}
/* Il testo della subtab attiva era #fff fisso sopra l'accento del tema: nei due temi
   con accento CHIARO (ambra di "serata", ciano di "lavagna") faceva 1.8:1, illeggibile.
   var(--sc-fondo) e' il colore del fondo di ciascun tema, cioe' per costruzione il suo
   opposto: una riga sola che va bene in tutti e quattro (misurato 7.4-16:1). */
.gk-subtab.active{background:var(--primary);color:var(--sc-fondo);border-color:var(--primary)}

/* ── Sub-tab inline Asta (Ranking/Analisi/Confronto) ── */
.gki-subtabs{display:flex;gap:4px;padding:8px 10px 4px;background:var(--bg-main);border-bottom:1px solid var(--border)}
.gki-subtab{flex:1;padding:5px 8px;border-radius:7px;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-secondary);font-size:.72rem;font-weight:600;cursor:pointer;transition:all .15s;text-align:center}
.gki-subtab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.gki-view{display:none}.gki-view.active{display:flex;flex-direction:column}

/* ── 3a squadra opzionale ── */
.gk-remove3-btn{padding:3px 7px;font-size:.75rem;line-height:1;border-radius:6px}
.gk-add3-btn{font-size:.72rem;padding:4px 9px}
.gk-team-card-c .gk-team-card-badge{background:rgba(0,200,255,.1)}

/* ── Forza squadre dual (Attacco/Difesa) ── */
.gk-strength-item-dual{grid-column:1/-1;display:grid;grid-template-columns:110px 1fr;gap:4px 10px;align-items:start;padding:8px 0;border-bottom:1px solid var(--border)}
.gk-strength-team-label{display:flex;align-items:center;gap:6px;font-weight:700;font-size:.78rem;color:var(--text-primary);grid-row:1/3}
.gk-strength-team-label img{width:20px;height:20px;object-fit:contain}
.gk-strength-dual-row{display:flex;align-items:center;gap:8px}
.gk-strength-dual-tag{font-size:.68rem;font-weight:700;color:var(--text-muted);min-width:80px}
.gk-strength-dual-row input[type=range]{flex:1}

/* ── Utility ── */
.hidden{display:none!important}

/* ══ Ronda estetica: micro-animazioni per la card di chiamata (nessun cambio funzionale) ══ */
@keyframes cc-topbar-pulse{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes cc-avatar-pulse{0%,100%{box-shadow:0 0 0 3px rgba(255,176,74,.2),0 0 18px var(--primary-glow),inset 0 2px 6px rgba(0,0,0,.18)}50%{box-shadow:0 0 0 3px rgba(255,176,74,.38),0 0 30px var(--primary-glow),inset 0 2px 6px rgba(0,0,0,.18)}}
@keyframes cc-offerta-shimmer{0%,55%{left:-60%}100%{left:130%}}

/* ══════════════════════════════════════════════════════════
   FONDO CAMPO DA CALCIO — foto di stadio notturno con riflettori e nebbia,
   fissa dietro a tutta l'app (div .pitch-bg aggiunto in index.html, prima
   di #app; pointer-events:none). Un overlay scuro/chiaro sopra la foto
   garantisce leggibilità del contenuto nelle zone dove trapela.
   ══════════════════════════════════════════════════════════ */
.pitch-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background-color:var(--bg-deep);
  background-image:
    linear-gradient(180deg, rgba(8,4,20,.55) 0%, rgba(8,4,20,.38) 35%, rgba(8,4,20,.55) 75%, rgba(8,4,20,.78) 100%),
    url('/img/backgrounds/fantabar-bg.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition:background .4s;
}
html[data-tema="cuoio"] .pitch-bg{
  background-image:
    linear-gradient(180deg, rgba(233,236,247,.5) 0%, rgba(233,236,247,.36) 35%, rgba(233,236,247,.5) 75%, rgba(233,236,247,.72) 100%),
    url('/img/backgrounds/fantabar-bg.jpg');
  filter:saturate(1) brightness(1.08);
}
html[data-tema="lavagna"] .pitch-bg{
  background-color:#0B0B0F;
  background-image:linear-gradient(180deg, #0F1015 0%, #0B0B0F 55%, #08080B 100%);
  filter:none;
}
body{background:transparent!important}
body::before{display:none}

/* ══════════════════════════════════════════════════════════
   TEMA CHIARO — override delle variabili colore per html[data-tema="cuoio"]
   (attivato via toggle in app.js, persistito in localStorage)
   Palette: bianco, argento e grigio perla. L'unico accento e' l'ottone del
   banco — lo stesso metallo della lampada del tema scuro, solo spento.
   Le materie (fondi a gradiente, vetro della clessidra, insegna) hanno la
   loro versione chiara in tema-serata.css, sezione "MATTINA AL BANCO".
   ══════════════════════════════════════════════════════════ */
/* ══ IL BAR — quinto tema (scuro, ma non nero) ══
   Nasce da una lamentela sui primi: "Serata d'Asta e' troppo scura e troppo
   uniforme, cambia poco il colore e costa capire le cose". Non e' un difetto di
   quel tema: la sua regola e' un accento solo su fondo quasi nero, ed e' scritta
   in DECISIONS.md. Quindi Serata resta com'e' e questo le si mette accanto.

   La differenza sta in due cose, non in cento:
   1. IL FONDO SALE. Serata sta su #0B0908 e spegne la foto del bar a
      brightness(.72): qui il legno resta legno. Un fondo piu' alto permette ai
      pannelli di staccarsi con il TONO e non solo con un filetto, che era il
      motivo vero per cui tutto sembrava lo stesso blocco.
   2. TRE PIANI INVECE DI UNO. fondo / pannello / carta hanno tre valori diversi
      — lo stesso rimedio applicato a "sala-giochi" quando abbagliava, per il
      motivo opposto ma con la stessa causa: se i piani non si distinguono per
      tono, l'occhio non sa dove finisce una cosa e comincia l'altra. */
html[data-tema="bar"]{
  /* Valori CAMPIONATI dal disegno fornito dall'utente (letto come file, non a occhio).
     La struttura vera e' a tre livelli, e non e' quella che avevo indovinato nelle
     prime passate:
       marco/suolo  #180E08  legno molto scuro
       PANNELLO     #422C1E  bruno medio  ← lo "scaffale"
       riquadri     #222222  grigio scuro ← gli "oggetti" appoggiati sopra
     Cioe' il pannello e' PIU' CHIARO del suolo e i riquadri dentro sono piu' scuri
     del pannello. Il salto e' doppio e in due direzioni, ed e' questo che rende ogni
     blocco un oggetto separato invece di una zona. */
  --bg-abyss:#120A05;
  --bg-deep:#180E08;        /* il legno, scuro */
  --panel-glass-1:rgba(66,44,30,.97);
  --panel-glass-2:rgba(60,40,27,.97);
  --panel-glass-3:rgba(52,34,23,.96);
  --bg-main:#422C1E;        /* il pannello bruno */
  --bg-card:#222222;        /* i riquadri dentro */
  --bg-elevated:#2C2C2C;    /* la carta di puja */
  --bg-glass:rgba(66,44,30,.95);
  --primary:#E4961E;
  --primary-bright:#FCD29C;
  --primary-dark:#A66A12;
  --primary-glow:rgba(228,150,30,.34);
  --primary-subtle:rgba(228,150,30,.12);
  --gold:#E4961E;
  --gold-bright:#FCE4A8;
  --gold-deep:#A66A12;
  --gold-glow:rgba(228,150,30,.30);
  --gold-subtle:rgba(228,150,30,.12);
  --fire:#D64A3A;
  --fire-bright:#FF6E55;
  --fire-glow:rgba(214,74,58,.32);
  --success:#2A9C5A;        /* il verde dei badge, campionato */
  --success-glow:rgba(42,156,90,.30);
  --danger:#D64A3A;
  --danger-glow:rgba(214,74,58,.28);
  --text-primary:#FFF7E4;
  --text-secondary:#D8C3A4;
  --text-muted:#A89078;
  /* L'ottone campionato dai bordi: #A6927C. Nei temi scuri il filetto e' un bianco
     al 10% perche' il pannello sta su un fondo altrettanto scuro; qui la cornice e'
     parte del mobile e si vede. */
  --border:rgba(166,146,124,.45);
  --border-light:rgba(166,146,124,.72);
}
html[data-tema="cuoio"]{
  --bg-abyss:#E9DCC0;
  --bg-deep:#F3E7D0;
  --panel-glass-1:rgba(250,242,227,.97);
  --panel-glass-2:rgba(245,235,215,.97);
  --panel-glass-3:rgba(240,227,200,.95);
  --bg-main:#FAF2E3;
  --bg-card:#FAF2E3;
  --bg-elevated:#F3E8D3;
  --bg-glass:rgba(250,242,227,.94);
  --primary:#7A4A22;
  --primary-bright:#8F5A2C;
  --primary-dark:#5C3719;
  --primary-glow:rgba(122,74,34,.22);
  --primary-subtle:rgba(122,74,34,.09);
  --gold:#8F5A2C;
  --gold-bright:#6B4423;
  --gold-deep:#4A2E17;
  --gold-glow:rgba(143,90,44,.20);
  --gold-subtle:rgba(143,90,44,.08);
  --fire:#A83A2A;
  --fire-bright:#8E2019;
  --fire-glow:rgba(168,58,42,.22);
  --success:#2F6B3F;
  --success-glow:rgba(47,107,63,.20);
  --danger:#A83A2A;
  --danger-glow:rgba(168,58,42,.20);
  --text-primary:#2B1B10;
  --text-secondary:#5C4A3A;
  --text-muted:#6B5A48;
  --border:rgba(58,36,20,.14);
  --border-light:rgba(58,36,20,.22);
}
html[data-tema="lavagna"]{
  --bg-abyss:#050508;
  --bg-deep:#0B0B0F;
  --panel-glass-1:rgba(11,11,15,.85);
  --panel-glass-2:rgba(15,16,21,.88);
  --panel-glass-3:rgba(9,9,12,.82);
  --bg-main:#111318;
  --bg-card:#0F1015;
  --bg-elevated:#191C22;
  --bg-glass:rgba(11,11,15,.85);
  --primary:#22D3EE;
  --primary-bright:#7DE8F7;
  --primary-dark:#0EA5C7;
  --primary-glow:rgba(34,211,238,.32);
  --primary-subtle:rgba(34,211,238,.10);
  --gold:#FF3CAC;
  --gold-bright:#FF6FC4;
  --gold-deep:#C4247E;
  --gold-glow:rgba(255,60,172,.30);
  --gold-subtle:rgba(255,60,172,.10);
  --fire:#FF2D2D;
  --fire-bright:#FF6B6B;
  --fire-glow:rgba(255,45,45,.30);
  --success:#39FF88;
  --success-glow:rgba(57,255,136,.25);
  --danger:#FF2D2D;
  --danger-glow:rgba(255,45,45,.28);
  --text-primary:#F0F4F8;
  --text-secondary:#B8C4D0;
  /* Su questa lavagna il grigio neutro di prima (#8A96A3) spariva: il fondo non e' una tinta
     piatta ma una foto di ardesia con striature di gesso chiare, e sopra quelle il testo secondario
     non si leggeva piu' (contrasto nominale 5.7:1 sul colore del pannello, molto peggio sulle
     striature). Qui vale --primary-bright, il ciano che il tema usa gia' per .cc-club: 12.1:1, e
     nessun colore nuovo da giustificare. Il ciano resta l'accento strutturale, il magenta resta
     riservato a brand e denaro (vedi DECISIONS.md). */
  --text-muted:#7DE8F7;
  --border:rgba(240,244,248,.12);
  --border-light:rgba(240,244,248,.20);
}
html[data-tema="cuoio"] .card,
html[data-tema="cuoio"] .chiamata-card,
html[data-tema="cuoio"] .tabs-panel,
html[data-tema="cuoio"] .admin-panel,
html[data-tema="cuoio"] .mio-panel,
html[data-tema="cuoio"] .rilancio-box,
html[data-tema="cuoio"] .panel-budget,
html[data-tema="cuoio"] .modal-content{
  box-shadow:0 10px 24px rgba(58,36,20,.08),0 1px 2px rgba(58,36,20,.06)!important;
}
html[data-tema="cuoio"] .cc-avatar{background:radial-gradient(circle at 35% 28%,#FAF2E3 0%,#F0E3C8 55%,#E4D5B8 100%);border-radius:14px}
/* Testata chiara: cuoio scuro, non bianco. Il resto (bottoni, tab, cornici)
   sta in tema-serata.css, sezione "MATTINA AL BANCO". */
html[data-tema="cuoio"] .asta-header{
  background:linear-gradient(180deg,#6B4423 0%,#4A2E17 100%);
  border-bottom:1px solid rgba(0,0,0,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 18px rgba(58,36,20,.30);
}
html[data-tema="cuoio"] .home-header{color:#F2E4C9}
html[data-tema="cuoio"] .home-logo{filter:none}
/* Il pallone di cuoio del mockup ("PuntBar"): un fregio decorativo in un angolo dello
   sfondo, non dentro le carte funzionali. Foto reale (non piu' un disegno: l'utente ha
   fornito la foto stessa) ritagliata in cerchio via border-radius — il browser ritaglia
   lo sfondo alla forma arrotondata, quindi gli angoli bianchi della foto originale non
   si vedono. */
html[data-tema="cuoio"] .pitch-bg::after{
  content:'';position:absolute;right:-20px;bottom:-14px;width:210px;height:210px;
  border-radius:50%;
  background-image:url("../img/backgrounds/pelota-cuoio.jpeg?v=1");
  background-size:160% 160%;background-position:50% 40%;background-repeat:no-repeat;
  box-shadow:0 20px 30px rgba(58,36,20,.35);
  opacity:.85;
}
/* Qui stavano i tre fregi dentro la carta di chiamata in tema lavagna — cancellino e scintilla
   come layer di sfondo su ::after, e il bicchiere da cocktail su ::before. TOLTI su richiesta
   dell'utente: alle misure a cui uscivano (44x20 il cancellino, 13x13 la scintilla, 22x30 il
   bicchiere) non si capiva cosa fossero. Gli altri tre stavano in tema-serata.css, sullo sfondo
   di pagina e sulla testata: cercare li' la nota corrispondente.

   Togliendo la regola del bicchiere, .chiamata-card::before torna da solo al display:none che
   il foglio gia' gli impone dentro la puja (righe ~715 e ~738, piu' tema-serata.css ~182):
   nessuna riga in piu' da scrivere per spegnerlo, e la linea animata in cima alla carta resta
   nascosta li' dentro come e' sempre stata. */
html[data-tema="cuoio"] #screen-strategie-lista.active,
html[data-tema="cuoio"] #screen-strategia-form.active,
html[data-tema="cuoio"] #screen-strategia-editor.active{
  background:
    linear-gradient(rgba(243,231,208,.92), rgba(243,231,208,.95)),
    repeating-linear-gradient(125deg, rgba(47,107,63,.07) 0px 70px, rgba(58,36,20,.04) 70px 140px),
    var(--bg-deep);
}
html[data-tema="cuoio"] .badge-ruolo.r-XX{background:#F0E3C8;color:var(--text-muted)}

/* ══ LAVAGNA AL NEON — terzo tema (scuro), lavagna nera + cornice ottone + neon ciano/magenta ══ */
html[data-tema="lavagna"] .card,
html[data-tema="lavagna"] .chiamata-card,
html[data-tema="lavagna"] .tabs-panel,
html[data-tema="lavagna"] .admin-panel,
html[data-tema="lavagna"] .mio-panel,
html[data-tema="lavagna"] .rilancio-box,
html[data-tema="lavagna"] .panel-budget,
html[data-tema="lavagna"] .modal-content{
  box-shadow:0 0 0 1px rgba(34,211,238,.25),0 10px 28px rgba(0,0,0,.5)!important;
}
html[data-tema="lavagna"] .cc-avatar{background:radial-gradient(circle at 35% 28%,#191C22 0%,#111318 55%,#0B0B0F 100%);border-radius:14px}
/* Testata: lavagna nera con filo d'ottone, insegna al neon — il resto (bottoni, tab,
   cornici) sta in tema-serata.css, sezione "LAVAGNA AL NEON". */
html[data-tema="lavagna"] .asta-header{
  background:linear-gradient(180deg,#111318 0%,#050508 100%);
  border-bottom:2px solid #C9A227;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 6px 22px rgba(0,0,0,.6);
}
html[data-tema="lavagna"] .home-header{color:#F0F4F8}
html[data-tema="lavagna"] .home-logo{filter:none}
html[data-tema="lavagna"] #screen-strategie-lista.active,
html[data-tema="lavagna"] #screen-strategia-form.active,
html[data-tema="lavagna"] #screen-strategia-editor.active{
  background:
    linear-gradient(rgba(11,11,15,.94), rgba(11,11,15,.97)),
    repeating-linear-gradient(125deg, rgba(34,211,238,.05) 0px 70px, rgba(255,60,172,.04) 70px 140px),
    var(--bg-deep);
}
html[data-tema="lavagna"] .badge-ruolo.r-XX{background:#191C22;color:var(--text-muted)}

/* ══ SALA GIOCHI — quarto tema (chiaro), il cabinato della sala giochi ══
   Chiaro come Cuoio ma dall'altra parte: Cuoio e' caldo e materico (pergamena,
   cuoio, luce di giorno), questo e' freddo e grafico — carta stampata a retino,
   inchiostro spesso al posto delle ombre sfumate, colore piatto.
   Cobalto = accento strutturale (il ruolo che altrove hanno ambra/cuoio/ciano),
   ciliegia = solo allarme e azione di rilancio, oro gettone = solo denaro.
   Le materie (retino, cornici, pixel) stanno in tema-serata.css, sezione
   "SALA GIOCHI". */
html[data-tema="sala-giochi"]{
  /* La carta del tema. Era bianco PURO su tutte le superfici grandi — pannelli,
     carte, testata — e i partecipanti si lamentavano che abbagliava: un'asta si
     gioca di sera, e una parete di #FFFFFF a schermo intero e' un faro. Il tema
     resta identico (inchiostro, cobalto, rosso, bordi duri), scende solo il picco
     di luminanza. Un bianco CALDO e non grigio: raffreddarlo lo farebbe sembrare
     sporco invece che di carta.
     Tutti i fondi bianchi passano da qui, cosi' il tono si regola in un punto
     solo. NON passano di qui i bianchi che devono restare puri: il testo sui
     bottoni pieni (cobalto, rosso) e le righe del campo in Anteprima, che sono
     segnaletica su verde. */
  --sg-carta:#EDF0F5;
  --sg-fondo:#DFE4EC;
  --sg-carta2:#E6EAF1;
  --bg-abyss:#C4C9D3;
  --bg-deep:var(--sg-fondo);
  --panel-glass-1:rgba(237,240,245,.98);
  --panel-glass-2:rgba(223,228,236,.98);
  --panel-glass-3:rgba(215,220,229,.96);
  --bg-main:var(--sg-carta);
  --bg-card:var(--sg-carta);
  --bg-elevated:#E8EBF1;
  --bg-glass:rgba(237,240,245,.95);
  --primary:#425FC4;          /* Softer, washed indigo instead of electric blue */
  --primary-bright:#5875D9;
  --primary-dark:#314B9E;
  --primary-glow:rgba(66,95,196,.22);
  --primary-subtle:rgba(66,95,196,.10);
  --gold:#996D12;             /* Softer text gold */
  --gold-bright:#855C08;
  --gold-deep:#6E4B03;
  --gold-glow:rgba(232,176,56,.30);
  --gold-subtle:rgba(232,176,56,.14);
  --fire:#D14C45;             /* Muted coral-red */
  --fire-bright:#C23D36;
  --fire-glow:rgba(209,76,69,.22);
  --success:#228F66;          /* Muted teal-green */
  --success-glow:rgba(34,143,102,.20);
  --danger:#D14C45;
  --danger-glow:rgba(209,76,69,.20);
  --text-primary:#2C2F40;     /* Muted dark slate instead of harsh black */
  --text-secondary:#52566E;
  --text-muted:#727791;
  --border:rgba(44,47,64,.15);
  --border-light:rgba(44,47,64,.25);
}
/* L'ombra qui non e' luce diffusa ma un blocco d'inchiostro spostato: su fondo
   chiaro le ombre sfumate sporcano (gia' imparato con Cuoio), un rilievo stampato no. */
html[data-tema="sala-giochi"] .card,
html[data-tema="sala-giochi"] .chiamata-card,
html[data-tema="sala-giochi"] .tabs-panel,
html[data-tema="sala-giochi"] .admin-panel,
html[data-tema="sala-giochi"] .mio-panel,
html[data-tema="sala-giochi"] .rilancio-box,
html[data-tema="sala-giochi"] .panel-budget,
html[data-tema="sala-giochi"] .modal-content{
  box-shadow:6px 6px 0 #141024!important;
}
/* Come in Cuoio: sull'avatar si toccano SOLO bordo e raggio, mai le misure
   (c'e' un bug storico legato a .cc-avatar che cambia forma tra contesti). */
html[data-tema="sala-giochi"] .cc-avatar{background:#2440D8;border-radius:0;border:3px solid #141024}
/* La testata NON e' scura come in Cuoio: qui e' la marquee del cabinato, carta
   bianca con il filo d'inchiostro sotto. */
html[data-tema="sala-giochi"] .asta-header{
  background:var(--sg-carta);
  border-bottom:4px solid #141024;
  box-shadow:none;
}
html[data-tema="sala-giochi"] .home-header{color:#141024}
html[data-tema="sala-giochi"] .home-logo{filter:none}
html[data-tema="sala-giochi"] #screen-strategie-lista.active,
html[data-tema="sala-giochi"] #screen-strategia-form.active,
html[data-tema="sala-giochi"] #screen-strategia-editor.active{
  background:
    repeating-conic-gradient(rgba(36,64,216,.05) 0% 25%, transparent 0% 50%),
    var(--bg-deep);
  background-size:8px 8px, auto;
}
html[data-tema="sala-giochi"] .badge-ruolo.r-XX{background:#F4F3EA;color:var(--text-muted)}

/* ══ Selettore multi-tema — pannello a tendina, generico su tutti i temi ══
   Costruito solo su token base (--bg-card, --border-light, --text-primary...) cosi'
   si adatta da solo a qualunque tema presente e futuro, senza regole per-tema qui. */
.tema-picker{position:relative;display:inline-flex}
.tema-picker-trigger{font-size:.85rem!important}
.tema-picker-menu{
  display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:50;
  flex-direction:column;gap:2px;min-width:190px;padding:6px;
  background:var(--bg-card);border:1px solid var(--border-light);border-radius:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.30);
}
.tema-picker.open .tema-picker-menu{display:flex}
.tema-picker-item{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;
  background:none;border:none;color:var(--text-primary);font-family:var(--font-main);
  font-size:.82rem;font-weight:600;cursor:pointer;text-align:left;transition:background .15s;
}
.tema-picker-item:hover{background:var(--bg-elevated)}
.tema-picker-item.active{background:var(--primary-subtle);color:var(--primary-bright)}
.tema-picker-swatch{width:14px;height:14px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,.22) inset}
.tema-picker-nome{flex:1}
.tema-picker-check{font-size:.78rem;opacity:.85}
/* ══ Trigger nelle home-header: stessa posizione/forma del vecchio toggle sole/luna ══ */
.tema-picker.tema-picker-home{position:absolute;top:52px;left:16px;z-index:2}
.tema-picker.tema-picker-home .tema-picker-menu{left:0;right:auto}
.theme-toggle-home{
  width:32px; height:32px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  border:1px solid var(--border-light);
  background:var(--bg-elevated);
  color:var(--text-primary);
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  transition:transform .2s,box-shadow .2s,background .2s;
}
.theme-toggle-home:hover{transform:translateY(-1px) scale(1.06);box-shadow:0 6px 16px rgba(0,0,0,.22),0 0 14px var(--primary-glow)}
.theme-toggle-home:active{transform:translateY(0) scale(.94)}
@media (max-width:640px){
  .tema-picker.tema-picker-home{top:46px;left:12px}
  .theme-toggle-home{width:28px;height:28px;font-size:.9rem}
}

/* ══ Fix: TODA la fila (card + timer + rilancia) con el mismo color uniforme, sin costuras entre secciones ══ */
.puja-panel-slot,
body.layout-admin .asta-row-puja{
  background:linear-gradient(170deg,#1A1512 0%,#0D0B0A 100%)!important;
  border:2px solid rgba(255,176,74,.5)!important;
  box-shadow:0 0 30px rgba(255,176,74,.16),0 8px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.puja-panel-slot .chiamata-card,
body.layout-admin .asta-row-puja .chiamata-card{
  background:none!important;border:none!important;box-shadow:none!important;
}
html[data-tema="cuoio"] .puja-panel-slot,
html[data-tema="cuoio"] body.layout-admin .asta-row-puja{
  background:linear-gradient(170deg,#FAF2E3 0%,#F0E3C8 100%)!important;
  border:2px solid #6B4423!important;
  box-shadow:0 0 0 4px #F6ECD9,0 1px 2px rgba(58,36,20,.06),0 14px 30px rgba(58,36,20,.12)!important;
}
html[data-tema="lavagna"] .puja-panel-slot,
html[data-tema="lavagna"] body.layout-admin .asta-row-puja{
  background:linear-gradient(170deg,#111318 0%,#0B0B0F 100%)!important;
  border:2px solid #22D3EE!important;
  box-shadow:0 0 0 4px #050508,0 0 24px rgba(34,211,238,.20),0 14px 30px rgba(0,0,0,.5)!important;
}

/* ══ Fix: tabs-nav (Storico/Rose/Liberi/Griglia P/A) se cortaba en el borde derecho en movil ══ */
@media (max-width:600px){
  .tabs-nav{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .tab-btn{flex:0 0 auto}
}

/* ══════ Tab Anteprima: campo tattico e assegnazione giocatori ══════ */
.ant-controls{display:flex;gap:8px;padding:8px;flex-wrap:wrap;align-items:center}
.ant-select{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:.85rem;flex:1;min-width:120px}
.ant-zoom-controls{display:flex;align-items:center;gap:4px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;padding:2px 6px}
.ant-zoom-btn{background:transparent;border:none;color:var(--text-primary);font-size:.95rem;line-height:1;padding:4px 8px;cursor:pointer;border-radius:6px;transition:background .15s}
.ant-zoom-btn:hover{background:rgba(255,255,255,.1)}
.ant-zoom-btn:active{transform:scale(.9)}
.ant-zoom-icon{font-size:.8rem;opacity:.7;padding:0 2px}
.ant-pitch{
  position:relative;width:100%;aspect-ratio:5/6;max-width:var(--ant-pitch-size,300px);flex-shrink:0;margin:0 auto;
  border-radius:14px;overflow:hidden;background-color:#040f09;transition:max-width .15s ease;
  /* Container query: le carte in campo (.size-pitch, sotto) si dimensionano in cqw invece di
     px fissi, cosi' restano PROPORZIONALI alla larghezza reale del campo invece che occupare
     una fetta crescente dello spazio tra gli slot quando l'utente riduce lo zoom (misurato:
     con carte a dimensione fissa, sovrapposizioni pesanti gia' sotto i 380px). */
  container-type:inline-size;container-name:ant-pitch;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 2px, transparent 2px 26px),
    linear-gradient(rgba(56,255,196,.65), rgba(56,255,196,.65)),
    linear-gradient(rgba(56,255,196,.65), rgba(56,255,196,.65)),
    linear-gradient(rgba(56,255,196,.65), rgba(56,255,196,.65)),
    linear-gradient(rgba(56,255,196,.65), rgba(56,255,196,.65)),
    linear-gradient(rgba(56,255,196,.65), rgba(56,255,196,.65)),
    linear-gradient(rgba(56,255,196,.65), rgba(56,255,196,.65)),
    radial-gradient(ellipse at 50% -10%, rgba(56,255,196,.14), transparent 55%),
    linear-gradient(180deg,#0e3a22 0%,#0a2a19 45%,#061c11 100%);
  background-repeat:no-repeat;
  background-size:
    100% 100%,
    46% 2px, 2px 12%, 2px 12%,
    46% 2px, 2px 12%, 2px 12%,
    100% 100%, 100% 100%;
  background-position:
    0 0,
    50% 12%, 27% 0%, 73% 0%,
    50% 88%, 27% 100%, 73% 100%,
    0 0, 0 0;
  box-shadow:
    inset 0 0 0 2px rgba(56,255,196,.9),
    inset 0 0 45px rgba(56,255,196,.28),
    0 0 12px rgba(56,255,196,.85),
    0 0 34px rgba(56,255,196,.55),
    0 0 60px rgba(56,255,196,.25);
}
.ant-pitch::before{content:'';position:absolute;left:6%;right:6%;top:50%;height:3px;background:#7dffe0;box-shadow:0 0 8px rgba(56,255,196,1),0 0 20px rgba(56,255,196,.9),0 0 34px rgba(56,255,196,.5);transform:translateY(-50%)}
.ant-pitch::after{content:'';position:absolute;top:50%;left:50%;width:64px;height:64px;border:3px solid #7dffe0;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 8px rgba(56,255,196,1),0 0 20px rgba(56,255,196,.9),inset 0 0 16px rgba(56,255,196,.5)}
.ant-slot{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;width:64px;z-index:2}
.ant-slot-role{font-size:.6rem;font-weight:800;padding:1px 4px;border-radius:4px;background:rgba(2,8,5,.88);color:#dffff2;text-shadow:0 0 4px rgba(56,255,196,.6);border:1px solid rgba(56,255,196,.35)}
.ant-slot-player{font-size:.62rem;font-weight:700;color:#eafff6;background:rgba(2,8,5,.92);border-radius:6px;padding:2px 4px;text-align:center;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid rgba(56,255,196,.3);box-shadow:0 0 6px rgba(56,255,196,.15),0 1px 4px rgba(0,0,0,.6);transition:box-shadow .15s,transform .15s}
.ant-slot.filled .ant-slot-player{background:linear-gradient(135deg,rgba(0,255,196,.42),rgba(0,180,255,.42)),linear-gradient(rgba(2,8,5,.85),rgba(2,8,5,.85));color:#fff;border-color:rgba(56,255,196,.75);box-shadow:0 0 10px rgba(56,255,196,.55),inset 0 0 8px rgba(56,255,196,.25),0 1px 4px rgba(0,0,0,.6)}
.ant-slot:hover .ant-slot-player{box-shadow:0 0 14px rgba(56,255,196,.85),inset 0 0 8px rgba(56,255,196,.3);transform:scale(1.06)}

/* ══ Il campo, per tema — non solo la cornice esterna (gia' fatta sopra), il prato stesso.
   "Cuoio" e' un pallone vintage: niente neon, un campo vecchio con linee dipinte, non
   luminose. "Lavagna" non e' un prato per niente: e' un diagramma tattico col gesso su
   ardesia. Stessa geometria (background-size/position) dell'originale, solo le materie
   cambiano — stesso principio gia' usato ovunque in questo tema. ══ */
html[data-tema="cuoio"] .ant-pitch{
  background-color:#3F4A29 !important;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 26px),
    linear-gradient(rgba(240,228,199,.85), rgba(240,228,199,.85)),
    linear-gradient(rgba(240,228,199,.85), rgba(240,228,199,.85)),
    linear-gradient(rgba(240,228,199,.85), rgba(240,228,199,.85)),
    linear-gradient(rgba(240,228,199,.85), rgba(240,228,199,.85)),
    linear-gradient(rgba(240,228,199,.85), rgba(240,228,199,.85)),
    linear-gradient(rgba(240,228,199,.85), rgba(240,228,199,.85)),
    radial-gradient(ellipse at 50% -10%, rgba(0,0,0,.12), transparent 55%),
    linear-gradient(180deg,#6B7B4A 0%,#566139 45%,#3F4A29 100%) !important;
  background-repeat:no-repeat !important;
  background-size:
    100% 100%,
    46% 2px, 2px 12%, 2px 12%,
    46% 2px, 2px 12%, 2px 12%,
    100% 100%, 100% 100% !important;
  background-position:
    0 0,
    50% 12%, 27% 0%, 73% 0%,
    50% 88%, 27% 100%, 73% 100%,
    0 0, 0 0 !important;
  box-shadow:inset 0 0 0 2px rgba(74,46,23,.55), inset 0 30px 50px rgba(0,0,0,.22) !important;
}
html[data-tema="cuoio"] .ant-pitch::before{background:#F0E4C7 !important;box-shadow:none !important}
html[data-tema="cuoio"] .ant-pitch::after{border-color:#F0E4C7 !important;box-shadow:none !important}
html[data-tema="cuoio"] .ant-slot-role{
  background:#FAF2E3 !important;color:#4A2E17 !important;text-shadow:none !important;
  border-color:rgba(74,46,23,.4) !important;
}
html[data-tema="cuoio"] .ant-slot-player{
  background:#FAF2E3 !important;color:#3A2A1D !important;
  border-color:rgba(74,46,23,.4) !important;box-shadow:0 1px 4px rgba(58,36,20,.3) !important;
}
html[data-tema="cuoio"] .ant-slot.filled .ant-slot-player{
  background:linear-gradient(135deg,rgba(143,90,44,.25),rgba(107,68,35,.18)), #FAF2E3 !important;
  color:#2B1B10 !important;border-color:#8F5A2C !important;box-shadow:0 1px 4px rgba(58,36,20,.35) !important;
}
html[data-tema="cuoio"] .ant-slot:hover .ant-slot-player{box-shadow:0 2px 8px rgba(58,36,20,.4) !important}

html[data-tema="lavagna"] .ant-pitch{
  background-color:#0B0B0F !important;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(240,244,248,.14), transparent 60%),
    radial-gradient(1px 1px at 65% 60%, rgba(240,244,248,.12), transparent 60%),
    radial-gradient(1px 1px at 40% 80%, rgba(240,244,248,.10), transparent 60%),
    linear-gradient(rgba(240,244,248,.78), rgba(240,244,248,.78)),
    linear-gradient(rgba(240,244,248,.78), rgba(240,244,248,.78)),
    linear-gradient(rgba(240,244,248,.78), rgba(240,244,248,.78)),
    linear-gradient(rgba(240,244,248,.78), rgba(240,244,248,.78)),
    linear-gradient(rgba(240,244,248,.78), rgba(240,244,248,.78)),
    linear-gradient(rgba(240,244,248,.78), rgba(240,244,248,.78)),
    radial-gradient(ellipse at 50% -10%, rgba(34,211,238,.16), transparent 55%),
    linear-gradient(180deg,#16181D 0%,#111318 45%,#0B0B0F 100%) !important;
  background-size:
    90px 90px, 110px 110px, 130px 130px,
    46% 2px, 2px 12%, 2px 12%,
    46% 2px, 2px 12%, 2px 12%,
    100% 100%, 100% 100% !important;
  background-position:
    center, center, center,
    50% 12%, 27% 0%, 73% 0%,
    50% 88%, 27% 100%, 73% 100%,
    0 0, 0 0 !important;
  background-repeat:
    repeat, repeat, repeat,
    no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat !important;
  box-shadow:inset 0 0 0 2px rgba(34,211,238,.5), inset 0 0 30px rgba(34,211,238,.12), 0 0 20px rgba(34,211,238,.25) !important;
}
html[data-tema="lavagna"] .ant-pitch::before{background:#F0F4F8 !important;box-shadow:0 0 6px rgba(34,211,238,.7) !important}
html[data-tema="lavagna"] .ant-pitch::after{border-color:#F0F4F8 !important;box-shadow:0 0 6px rgba(34,211,238,.7) !important}
html[data-tema="lavagna"] .ant-slot-role{
  background:rgba(11,11,15,.9) !important;color:#F0F4F8 !important;
  text-shadow:none !important;border-color:rgba(34,211,238,.4) !important;
}
html[data-tema="lavagna"] .ant-slot-player{
  background:rgba(11,11,15,.92) !important;color:#F0F4F8 !important;
  border-color:rgba(34,211,238,.35) !important;box-shadow:0 0 6px rgba(34,211,238,.15) !important;
}
html[data-tema="lavagna"] .ant-slot.filled .ant-slot-player{
  background:linear-gradient(135deg,rgba(34,211,238,.3),rgba(255,60,172,.22)), rgba(11,11,15,.85) !important;
  color:#fff !important;border-color:#22D3EE !important;box-shadow:0 0 10px rgba(34,211,238,.4) !important;
}
html[data-tema="lavagna"] .ant-slot:hover .ant-slot-player{box-shadow:0 0 14px rgba(34,211,238,.6) !important}

/* "Sala Giochi": il campo di un gioco a 16 bit — verde piatto a fasce larghe,
   righe bianche nette, cornice d'inchiostro, nessun bagliore. Stessa geometria
   (background-size/position) degli altri temi: cambiano solo le materie. */
html[data-tema="sala-giochi"] .ant-pitch{
  border-radius:0 !important;
  background-color:#3E9E56 !important;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 22px, transparent 22px 44px),
    linear-gradient(#FFFFFF,#FFFFFF),
    linear-gradient(#FFFFFF,#FFFFFF),
    linear-gradient(#FFFFFF,#FFFFFF),
    linear-gradient(#FFFFFF,#FFFFFF),
    linear-gradient(#FFFFFF,#FFFFFF),
    linear-gradient(#FFFFFF,#FFFFFF),
    radial-gradient(ellipse at 50% -10%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg,#43A85B 0%,#43A85B 100%) !important;
  background-repeat:no-repeat !important;
  background-size:
    100% 100%,
    46% 3px, 3px 12%, 3px 12%,
    46% 3px, 3px 12%, 3px 12%,
    100% 100%, 100% 100% !important;
  background-position:
    0 0,
    50% 12%, 27% 0%, 73% 0%,
    50% 88%, 27% 100%, 73% 100%,
    0 0, 0 0 !important;
  box-shadow:inset 0 0 0 4px #141024, 6px 6px 0 #141024 !important;
}
html[data-tema="sala-giochi"] .ant-pitch:not(.ant-pitch3d)::before{background:#FFFFFF !important;height:4px !important;box-shadow:none !important}
html[data-tema="sala-giochi"] .ant-pitch:not(.ant-pitch3d)::after{border:4px solid #FFFFFF !important;box-shadow:none !important}
html[data-tema="sala-giochi"] .ant-slot-role{
  background:#F5B01A !important;color:#141024 !important;text-shadow:none !important;
  border:2px solid #141024 !important;border-radius:0 !important;
}
html[data-tema="sala-giochi"] .ant-slot-player{
  background:var(--sg-carta) !important;color:#141024 !important;
  border:2px solid #141024 !important;border-radius:0 !important;
  box-shadow:3px 3px 0 #141024 !important;
  font-family:'Silkscreen',Archivo,sans-serif !important;
}
html[data-tema="sala-giochi"] .ant-slot.filled .ant-slot-player{
  background:#2440D8 !important;color:#FFFFFF !important;border-color:#141024 !important;
}
html[data-tema="sala-giochi"] .ant-slot:hover .ant-slot-player{
  box-shadow:1px 1px 0 #141024 !important;transform:translate(2px,2px) !important;
}

/* La vista "campo 3D" e' l'unico punto dell'app che nessun tema toccava: la scena
   restava un fondo quasi nero con bordi al neon viola/ciano (segnalato dall'utente).
   Qui diventa una piastra come le altre, col campo dentro. */
html[data-tema="sala-giochi"] .ant-pitch-stage{
  background:#F4F3EA !important;
  border:4px solid #141024 !important;border-radius:0 !important;
  box-shadow:6px 6px 0 #141024 !important;
}
html[data-tema="sala-giochi"] .ant-pitch.ant-pitch3d{
  background:
    repeating-linear-gradient(0deg, rgba(20,16,36,.05) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(90deg, #3E9E56 0 10%, #48B463 10% 20%) !important;
  border:4px solid #141024 !important;border-radius:0 !important;
  box-shadow:4px 4px 0 rgba(20,16,36,.5) !important;
}
/* le righe del campo: restano bianche, perdono l'alone */
html[data-tema="sala-giochi"] .ant-pitch.ant-pitch3d::before{filter:none !important;opacity:1 !important}
/* Le righe del campo sono un SVG (.ant-field-markings), non una griglia CSS: nel
   tema base sono ciano con l'alone al neon. Qui tornano bianche e nette, come
   quelle dipinte sul prato di un gioco a 16 bit. */
html[data-tema="sala-giochi"] .ant-field-markings rect,
html[data-tema="sala-giochi"] .ant-field-markings path,
html[data-tema="sala-giochi"] .ant-field-markings circle{
  stroke:#FFFFFF !important;stroke-width:.9 !important;filter:none !important;
}
html[data-tema="sala-giochi"] .ant-field-markings .ant-field-dot{fill:#FFFFFF !important;filter:none !important}
html[data-tema="sala-giochi"] .ant-slot3d-empty{
  background:rgba(255,255,255,.18) !important;
  border:3px dashed rgba(255,255,255,.9) !important;border-radius:0 !important;
}
/* L'etichetta sotto ogni slot aveva una pastiglia quasi nera (rgba(6,4,16,.74),
   misurata in browser): sul prato chiaro del cabinato era l'unica macchia scura
   rimasta. Diventa un cartellino bianco col filo d'inchiostro. */
html[data-tema="sala-giochi"] .ant-slot3d-label{
  font-family:'Silkscreen',Archivo,sans-serif !important;color:#141024 !important;
  background:var(--sg-carta) !important;border:2px solid #141024 !important;
  border-radius:0 !important;text-shadow:none !important;padding:2px 3px !important;
}
html[data-tema="sala-giochi"] .ant-card{
  background:linear-gradient(180deg,var(--sg-carta),var(--sg-carta2)) !important;
  border:3px solid #141024 !important;border-radius:0 !important;
  box-shadow:4px 4px 0 #141024 !important;
}
html[data-tema="sala-giochi"] .ant-lista li{
  background:var(--sg-carta) !important;border:2px solid #141024 !important;border-radius:0 !important;
}
#tab-anteprima{position:relative}
.ant-picker{position:absolute;z-index:500;background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.4);padding:8px;max-height:280px;overflow-y:auto;min-width:200px;max-width:calc(100vw - 16px)}
.ant-picker.hidden{display:none}
.ant-picker-item{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:.82rem}
.ant-picker-item:hover{background:rgba(255,255,255,.08)}
.ant-picker-hdr{font-size:.7rem;font-weight:700;color:var(--text-muted);padding:4px 8px;text-transform:uppercase}
.ant-picker-empty{padding:8px;color:var(--text-muted);font-size:.8rem;text-align:center}
.ant-picker-remove{margin-top:4px;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:.8rem;color:#e74c3c;text-align:center;background:rgba(231,76,60,.1)}
.ant-picker-remove:hover{background:rgba(231,76,60,.2)}

/* ══════════════════════════════════════════════════════════
   REDESIGN 3D — ANTEPRIMA (drawer, carta 3D, campo 3D, fx assegnazione)
   Vedi docs/REDESIGN_ASTA_3D.md per le decisioni di design gia' concordate.
   Riusa i token :root esistenti e la palette .badge-ruolo/.rose-riga-*
   gia' esistente — nessuna palette nuova. Non modifica .chiamata-card,
   .ant-slot/.ant-picker (vecchio schema 2D, lasciati intatti per sicurezza),
   ANT_LAYOUT o la logica R.MANTRA: solo markup/CSS aggiuntivi.
   ══════════════════════════════════════════════════════════ */

/* Layout "push": Anteprima non e' piu' un overlay sopra Puja/Rose, e' una colonna che
   convive in un flex row con tutto il resto (.asta-main-col) — quando si apre, il main
   col si restringe (flex:1 lo fa da solo) invece di essere coperto. Vedi index.html:
   #tab-anteprima e' stato spostato fuori da .tabs-panel per essere fratello di
   .asta-main-col dentro .asta-live-layout. */
.asta-live-layout{display:flex;align-items:flex-start;gap:16px;flex:1;min-height:0}
.asta-main-col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;min-height:0;align-self:stretch}

#tab-anteprima.ant-drawer{
  flex:0 0 auto;align-self:stretch;width:0;min-width:0;
  background:linear-gradient(180deg,var(--bg-card),var(--bg-main));
  border:1px solid var(--border-light);border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  opacity:0;overflow:hidden;
  transition:width .35s cubic-bezier(.22,.9,.3,1),opacity .25s ease;
}
#tab-anteprima.ant-drawer.drawer-open{width:min(420px,40vw);opacity:1;overflow-y:auto}
.ant-drawer-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:inherit;z-index:2}
.ant-drawer-title{font-family:var(--font-display);font-weight:800;font-size:.95rem;color:var(--text-primary);white-space:nowrap}
.ant-drawer-close{background:var(--bg-elevated);border:1px solid var(--border-light);color:var(--text-secondary);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:.9rem;line-height:1;flex-shrink:0}
.ant-drawer-close:hover{color:var(--text-primary);background:rgba(255,255,255,.1)}
.ant-drawer-body{padding:14px 16px 24px;width:min(420px,40vw)}

@media (max-width:900px){
  #tab-anteprima.ant-drawer.drawer-open{width:min(380px,50vw)}
  .ant-drawer-body{width:min(380px,50vw)}
}
@media (max-width:760px){
  .asta-live-layout{display:block}
  #tab-anteprima.ant-drawer{width:auto;max-height:0;opacity:0;transition:max-height .35s cubic-bezier(.22,.9,.3,1),opacity .25s ease;margin-top:0}
  #tab-anteprima.ant-drawer.drawer-open{max-height:2000px;opacity:1;margin-top:14px;overflow-y:visible}
  .ant-drawer-body{width:auto}

  /* Richiesta esplicita dell'utente: su mobile Anteprima deve comportarsi come una tab
     normale del pannello (esclusiva con le altre, mai un pannello che si espande sotto tutto
     il resto della pagina) — non piu' un drawer. L'elemento viene spostato DAVVERO dentro
     .tabs-panel da _antSyncDrawerLayout() (app.js), qui bastano le regole di visibilita':
     stessa logica display:none/.active di .tab-content, la vista ordinatore (.drawer-open,
     sopra) resta invariata perche' si applica solo quando l'elemento NON ha questa classe. */
  #tab-anteprima.ant-drawer.ant-drawer-as-tab{
    width:auto;max-width:none;max-height:none;opacity:1;margin-top:0;transition:none;
    display:none;overflow:hidden;box-shadow:none;border:none;background:none;
  }
  #tab-anteprima.ant-drawer.ant-drawer-as-tab.active{
    display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;
  }
  #tab-anteprima.ant-drawer.ant-drawer-as-tab .ant-drawer-hdr{display:none}
  #tab-anteprima.ant-drawer.ant-drawer-as-tab .ant-drawer-body{width:auto;padding:14px}
}

/* Sotto-tab interne Vista campo 3D / Vista lista — meccanismo indipendente dai .tab-btn principali */
.ant-subtabs{display:flex;gap:6px;margin-top:12px}
.ant-subtab{flex:1;font-family:var(--font-main);font-size:.72rem;font-weight:700;color:var(--text-muted);background:var(--bg-elevated);border:1px solid var(--border);border-radius:9px;padding:8px 6px;cursor:pointer;text-align:center;transition:all .2s}
.ant-subtab.active{color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-bright));border-color:transparent}
.ant-subview{display:none;margin-top:12px}
.ant-subview.active{display:block}

/* Campo 3D — STESSE coordinate ANT_LAYOUT (top/left %), solo nuova resa visiva.
   Stadio decorativo (tribune/torri faro) intorno al campo, stile mockup di riferimento. */
.ant-pitch-stage{perspective:1400px;padding:46px 4px 30px;position:relative;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,176,74,.08),transparent 60%),#050208;
  border-radius:14px}
.ant-pitch-stands{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:14px}
/* Gradinate stilizzate: due fasce a bassa opacita' sui lati, solo per suggerire un
   piccolo stadio attorno al campo — restano dietro il campo (z-index di stacking-order,
   nessun preserve-3d qui) e non devono mai competere visivamente con campo/carte. */
.ant-stand{position:absolute;top:8%;bottom:2%;width:13%;
  background:repeating-linear-gradient(180deg,rgba(200,190,230,.10) 0 4px,rgba(10,5,20,.05) 4px 9px);
  -webkit-mask-image:linear-gradient(180deg,transparent,rgba(0,0,0,.8) 30%,rgba(0,0,0,.8) 85%,transparent);
  mask-image:linear-gradient(180deg,transparent,rgba(0,0,0,.8) 30%,rgba(0,0,0,.8) 85%,transparent)}
.ant-stand-l{left:0;border-radius:0 10px 10px 0}
.ant-stand-r{right:0;border-radius:10px 0 0 10px}
.ant-stand-glow{position:absolute;left:8%;right:8%;top:4%;height:40%;
  background:radial-gradient(ellipse at center top,rgba(255,176,74,.16),transparent 72%);filter:blur(2px)}
.ant-pylon{position:absolute;top:6px;width:5px;height:34px;background:linear-gradient(180deg,#3a2d5c,#1a1230)}
.ant-pylon::after{content:'';position:absolute;top:-11px;left:50%;transform:translateX(-50%);width:26px;height:11px;border-radius:3px;
  background:linear-gradient(180deg,#fff6d8,#ffd97a);
  box-shadow:0 0 18px 8px rgba(255,225,150,.5),0 0 50px 18px rgba(255,200,110,.22)}
.ant-pylon-l{left:6%}
.ant-pylon-r{right:6%}
.ant-floodbeam{position:absolute;top:0;width:36%;height:60%;background:radial-gradient(ellipse at center top,rgba(255,238,190,.14),transparent 68%);filter:blur(1px)}
.ant-floodbeam-l{left:-2%}
.ant-floodbeam-r{right:-2%}

/* IMPORTANTE: mai overflow:hidden qui — clippa la resa 3D delle carte (le fa apparire
   "schiacciate" sul campo invece che ritte), anche se il markup resta transform-style:preserve-3d.
   Il border-radius resta comunque rispettato dal background senza bisogno di overflow.
   Estetica "campo tattico digitale": griglia neon viola/ciano sovrapposta al prato scurito
   (richiesta esplicita dell'utente, il campo piatto verde sembrava troppo semplice/generico
   rispetto al resto dell'app) — stessa palette --primary/neon ciano gia' usata altrove
   (vecchio minimap 2D), nessun colore nuovo introdotto. */
.ant-pitch.ant-pitch3d{
  transform:rotateX(50deg);transform-style:preserve-3d;overflow:visible;
  background-image:none;background-color:#061a14;
  background:
    repeating-linear-gradient(90deg,rgba(167,139,250,.22) 0 1.5px,transparent 1.5px 38px),
    repeating-linear-gradient(0deg,rgba(56,255,196,.14) 0 1.5px,transparent 1.5px 34px),
    radial-gradient(ellipse at 50% 42%,rgba(255,176,74,.18),transparent 62%),
    repeating-linear-gradient(0deg,#0c2e24 0 34px,#071c16 34px 68px);
  box-shadow:
    0 0 0 2px rgba(167,139,250,.55),
    0 0 40px rgba(255,176,74,.35),
    0 0 80px rgba(56,255,196,.12),
    inset 0 0 60px rgba(255,176,74,.08),
    0 30px 60px rgba(0,0,0,.6);
}
.ant-pitch.ant-pitch3d::before{content:'';position:absolute;left:0;right:0;top:50%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(167,139,250,.9),rgba(56,255,196,.85),rgba(167,139,250,.9),transparent);
  box-shadow:0 0 14px rgba(255,176,74,.75),0 0 26px rgba(56,255,196,.4);transform:translateY(-1px)}
.ant-pitch.ant-pitch3d::after{content:'';position:absolute;left:50%;top:50%;width:26%;height:26%;
  border:2px solid rgba(167,139,250,.85);border-radius:50%;transform:translate(-50%,-50%);
  box-shadow:0 0 16px rgba(255,176,74,.6),inset 0 0 16px rgba(56,255,196,.22)}
.ant-pitch3d-border{position:absolute;inset:5%;border:1.5px solid rgba(167,139,250,.45);border-radius:8px;
  pointer-events:none;box-shadow:0 0 18px rgba(255,176,74,.25),inset 0 0 18px rgba(56,255,196,.06)}
/* Bracket agli angoli, stile HUD/mirino — solo accenno grafico "tech", non deve competere
   con le carte: dimensione contenuta, opacita' moderata. */
.ant-pitch-corner{position:absolute;width:22px;height:22px;border:2px solid rgba(56,255,196,.75);
  filter:drop-shadow(0 0 4px rgba(56,255,196,.6))}
.ant-pitch-corner-tl{top:-1.5px;left:-1.5px;border-right:none;border-bottom:none;border-radius:8px 0 0 0}
.ant-pitch-corner-tr{top:-1.5px;right:-1.5px;border-left:none;border-bottom:none;border-radius:0 8px 0 0}
.ant-pitch-corner-bl{bottom:-1.5px;left:-1.5px;border-right:none;border-top:none;border-radius:0 0 0 8px}
.ant-pitch-corner-br{bottom:-1.5px;right:-1.5px;border-left:none;border-top:none;border-radius:0 0 8px 0}
@media (prefers-reduced-motion: no-preference) {
  .ant-pitch3d-border{animation:ant-pitch-pulse 3.6s ease-in-out infinite}
}
@keyframes ant-pitch-pulse{
  0%,100%{box-shadow:0 0 18px rgba(255,176,74,.25),inset 0 0 18px rgba(56,255,196,.06)}
  50%{box-shadow:0 0 28px rgba(255,176,74,.4),inset 0 0 26px rgba(56,255,196,.12)}
}

.ant-slot3d{position:absolute;transform:translate(-50%,-50%);transform-style:preserve-3d;z-index:2}
/* Angolo/translateZ INVARIATI (-50deg/34px, gli stessi del design originale gia' verificato):
   un angolo meno frontale o un lift maggiore ingrandiscono la proiezione a schermo della carta
   (misurato via getBoundingClientRect: bounding box piu' grande = piu' sovrapposizioni tra
   carte adiacenti, vedi requisito "nessuna carta deve mai coprirne un'altra" sotto). La
   sensazione di volume (requisito "non deve sembrare uno sticker piatto") arriva invece da
   .ant-card.on-pitch (luce/ombra interna) piu' sotto, senza toccare la proiezione/geometria. */
.ant-slot3d .ant-card{transform:rotateX(-50deg) translateZ(34px);cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}
.ant-slot3d:hover .ant-card{transform:rotateX(-50deg) translateZ(58px) scale(1.12)}
.ant-slot3d-empty{width:12.5cqw;height:17cqw;border-radius:8px;border:2px dashed rgba(255,255,255,.32);display:flex;align-items:center;justify-content:center;font-size:1rem;color:rgba(255,255,255,.5);background:rgba(0,0,0,.28);transform:rotateX(-50deg) translateZ(34px);cursor:pointer;transition:transform .25s ease,border-color .2s}
.ant-slot3d:hover .ant-slot3d-empty{border-color:var(--gold);color:var(--gold);transform:rotateX(-50deg) translateZ(58px) scale(1.12)}
/* Drag & drop (alternativa al click di _antOpenPicker, non lo sostituisce): stato visivo
   durante il trascinamento — carta trascinata semitrasparente, slot/panchina sotto il
   puntatore evidenziati. */
.ant-card[draggable]{cursor:grab}
.ant-card.dragging{opacity:.35;cursor:grabbing}
.ant-slot3d.drag-over .ant-slot3d-empty,
.ant-slot3d.drag-over .ant-card{outline:2px solid var(--gold);outline-offset:2px}
.ant-panchina.drag-over{outline:2px dashed var(--gold);outline-offset:-2px;border-radius:12px}
/* Stesso angolo/piano della carta (translateZ), non piu' il piano del prato: prima il
   nome, senza translateZ, restava sullo stesso Z del campo e finiva coperto dalla carta
   (che invece "galleggia" sopra) — ora condivide il piano della carta, leggermente piu'
   in basso, e resta sempre visibile sotto di essa senza mai coprirne l'avatar. */
/* Richiesta esplicita dell'utente: nome SEMPRE su una riga sola (mai andare a capo), MAI
   tagliato, e MAI sovrapposto al nome dello slot adiacente. Uno spazio fisso (px o cqw) non
   puo' garantirlo per ogni nome/riga: righe diverse di ANT_LAYOUT hanno spazio diverso tra
   slot (una riga da 2 giocatori ha molto piu' margine di una da 5), e la prospettiva 3D del
   campo fa si' che lo stesso gap in percentuale corrisponda a pixel diversi a seconda della
   riga (piu' vicina alla telecamera = piu' pixel). Percio' niente max-width fisso qui: la
   larghezza disponibile viene MISURATA sul DOM reale (getBoundingClientRect degli slot vicini
   sulla stessa riga, dopo il render) e il font-size viene ridotto su misura finche' il nome
   non ci sta in una riga sola — vedi _antFitEtichetteCampo() in app.js, richiamata alla fine
   di renderAnteprimaPitch(). Qui restano solo gli stili base, non le dimensioni.*/
.ant-slot3d-label{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%) rotateX(-50deg) translateZ(30px);font-weight:800;color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,.9);z-index:3;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px;text-align:center;max-width:none}
/* Ruolo su slot vuoto: badge multipli (es. "Dc/B", "T/A/Pc") invece di una riga di testo
   troncata — stesso pattern gia' usato in .ant-card-role, qui ridimensionato per lo slot. */
.ant-slot3d-label .badge-ruolo{height:auto;min-width:0;padding:1px 4px;font-size:.5rem;border-radius:4px;line-height:1.3}
.ant-slot3d-name-txt{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.56rem}
/* Ombra di contatto SUL piano del campo (nessuna contro-rotazione, a differenza della carta):
   e' il segnale che vende la profondita' — la carta "galleggia" sopra la sua ombra invece di
   sembrare adagiata sul prato. Vedi commento in renderAnteprimaPitch() in app.js.
   top:100% (non piu' 50%): l'ombra va sotto la BASE della carta, non al suo centro — prima
   sedeva a meta' altezza e la meta' inferiore della carta sembrava "affondare" nel prato
   invece di poggiarci sopra (segnalato dall'utente). In cqw come .size-pitch, cosi' resta
   proporzionata a qualunque zoom del campo. */
.ant-slot3d-shadow{position:absolute;left:50%;top:100%;transform:translate(-50%,-65%);width:15cqw;height:5.5cqw;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 75%);z-index:1}

/* Panchina */
.ant-panchina{margin-top:14px}
.ant-panchina-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ant-panchina-title{font-family:var(--font-display);font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary)}
.ant-panchina-count{font-family:var(--font-mono);font-size:.68rem;color:var(--text-muted)}
.ant-panchina-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:8px}
.ant-panchina-empty{color:var(--text-muted);font-size:.76rem;padding:10px 0;text-align:center}

/* Lista (sotto-tab alternativa al campo 3D) */
.ant-lista{list-style:none;display:flex;flex-direction:column;gap:4px}
.ant-lista li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:var(--bg-main);font-size:.8rem}
.ant-lista .ant-lista-nome{flex:1;font-weight:600}
.ant-lista .ant-lista-slot{font-size:.68rem;color:var(--text-muted)}

/* Carta 3D — riusa .badge-ruolo (colore/testo per ruolo) e la stessa pipeline foto di .cc-avatar */
.ant-card{position:relative;border-radius:10px;overflow:hidden;background:#0d0720;
  box-shadow:0 14px 22px -8px rgba(0,0,0,.65);border:1px solid var(--card-accent,var(--border-light));
  transform-style:preserve-3d;flex-shrink:0}
.ant-card.size-bench{width:54px;height:74px}
.ant-card.size-pitch{width:12.5cqw;height:17cqw}
html[data-tema="cuoio"] .ant-card{
  background:linear-gradient(180deg,#FAF2E3,#EDDCBC);
  border:2px solid #4A2E17;
  outline:1px dashed rgba(246,236,217,.55);outline-offset:2px;
  box-shadow:0 0 0 2px #F6ECD9,0 0 0 5px #8F5A2C,0 10px 18px -6px rgba(58,36,20,.45);
}
html[data-tema="lavagna"] .ant-card{
  background:linear-gradient(180deg,#191C22,#0B0B0F);
  border:2px solid #22D3EE;
  box-shadow:0 0 0 2px #050508,0 0 14px rgba(34,211,238,.35),0 10px 18px -6px rgba(0,0,0,.6);
}
.ant-card.size-xl{width:110px;height:152px}

.ant-card-photo{position:absolute;inset:0;background-size:100% auto;background-position:center top;background-repeat:no-repeat;background-color:#1e1140}
.ant-card-role{position:absolute;top:4%;left:5%;z-index:3;display:flex;gap:2px;flex-wrap:wrap;max-width:90%}
.ant-card-role .badge-ruolo{height:auto;min-width:0;padding:1px 3px;font-size:.44rem;border-radius:3px;line-height:1.3}
.size-xl .ant-card-role .badge-ruolo{font-size:.58rem;padding:2px 5px;border-radius:5px}
/* Badge U21: stesso pattern posizionale di .ant-card-role (angolo carta) ma speculare a
   destra, colori riusati identici da .tipo-U21 (badge Puja/Svincolati/Fasce). */
.ant-card-u21{position:absolute;top:4%;right:5%;z-index:3;font-size:.44rem;font-weight:800;text-transform:uppercase;padding:1px 3px;border-radius:3px;line-height:1.3;background:rgba(0,224,160,.15);color:var(--success);border:1px solid rgba(0,224,160,.3)}
.size-xl .ant-card-u21{font-size:.58rem;padding:2px 5px;border-radius:5px}

/* Panchina: nome DENTRO la carta, fascia inferiore minima solo dietro al testo. Il nome vive
   in uno <span> interno (.ant-card-name-txt) NON posizionato — necessario perche'
   display:-webkit-box (per il wrap multi-riga su 2+, vedi carta XL sotto) non ha effetto se
   applicato direttamente a un elemento position:absolute come .ant-card-name: sull'elemento
   assoluto il display viene "blockificato" e la modalita' box legacy del line-clamp si perde
   (verificato: senza lo span interno la carta XL tornava a troncare su una riga singola). */
.ant-card.in-bench .ant-card-fade{position:absolute;left:0;right:0;bottom:0;height:36%;background:linear-gradient(to bottom,transparent,rgba(8,4,18,.92))}
.ant-card.in-bench .ant-card-name{position:absolute;left:0;right:0;bottom:2px;text-align:center;padding:0 3px}
.ant-card.in-bench .ant-card-name-txt{display:block;font-size:.5rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Carta XL (animazione di assegnazione): il 36% di fascia nera pensato per le mini-carte
   della panchina, su una carta grande (152px) lasciava troppo spazio vuoto sopra al nome
   (segnalato dall'utente su screenshot reali) — fascia ridotta ulteriormente e resa un vero
   "cartellino" (gradiente che si scurisce prima, non una lenta dissolvenza). Nome su riga
   singola (richiesta esplicita dell'utente, mai andare a capo): il font-size di partenza e'
   generoso, poi _antFitTestoLabel() in app.js lo restringe su misura solo se il nome non ci
   sta nella larghezza della carta — quasi mai per nomi normali, dato lo spazio ampio qui. */
.ant-card.in-bench.size-xl .ant-card-fade{height:16%;
  background:linear-gradient(to bottom,transparent,rgba(8,4,18,.6) 40%,rgba(8,4,18,.96))}
.ant-card.in-bench.size-xl .ant-card-name{bottom:5px;padding:0 6px}
.ant-card.in-bench.size-xl .ant-card-name-txt{font-size:.92rem;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Sul campo: il nome vive FUORI dalla carta (vedi .ant-slot3d-label sopra), richiesta
   esplicita dell'utente per non coprire l'avatar — qui solo un accenno di luce/volume.
   L'ombra direzionale ereditata da .ant-card base (0 14px 22px -8px) viene sovrascritta:
   sotto la doppia rotazione 3D del campo si comprimeva in una riga nera netta invece di
   un'ombra morbida; la vera ombra "di contatto" e' gia' .ant-slot3d-shadow (elemento a
   parte sul piano del prato, non contro-ruotato) — qui basta un rilievo leggero. */
.ant-card.on-pitch{box-shadow:0 0 0 1px var(--card-accent,transparent),0 3px 6px rgba(0,0,0,.3),
  inset 0 1px 0 rgba(255,255,255,.22),inset 0 -10px 14px rgba(0,0,0,.32)}

.ant-card.placeholder{background:var(--bg-elevated);border-style:dashed;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.55rem;text-align:center;padding:2px}

/* Colore carta per ruolo — riusa 1:1 gli stessi 5 gruppi/colori gia' usati per le righe di
   Rose (.rose-riga-*, vedi _roseRowRoleClass() in app.js), nessuna palette nuova. */
.ant-card.rose-riga-por{--card-accent:#f2b400}
.ant-card.rose-riga-verde{--card-accent:#229954}
.ant-card.rose-riga-azzurro{--card-accent:#3867d6}
.ant-card.rose-riga-viola{--card-accent:#8854d0}
.ant-card.rose-riga-rosso{--card-accent:#c0392b}

/* Layer fx assegnazione — fuori da .tabs-panel apposta (backdrop-filter altrimenti rompe i
   fixed, vedi commento su _antOpenPicker() in app.js). pointer-events:none: non deve mai
   intercettare click sopra Puja/Rose durante l'animazione. */
#assegnazione-fx-layer{position:fixed;inset:0;z-index:6000;pointer-events:none}
.assegnazione-fx-card{position:fixed;pointer-events:none;will-change:transform,opacity;z-index:6000}

@media (prefers-reduced-motion:reduce){
  #tab-anteprima.ant-drawer{transition:none}
  .ant-slot3d .ant-card,.ant-slot3d-empty{transition:none}
}

/* ══ Badge email utente loggato — visibile fisso in alto a sinistra, tranne durante l'asta
   (dove viene mostrato inline nell'header per non sovrapporsi a nessun controllo esistente) ══ */
.user-email-badge{
  position:fixed; top:8px; left:8px; z-index:60;
  background:rgba(20,20,30,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12); border-radius:20px;
  padding:4px 12px; font-size:.68rem; font-weight:600; color:var(--text-secondary,#c8cad4);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:46vw;
  pointer-events:none; line-height:1.4; box-shadow:0 2px 10px rgba(0,0,0,.25);
}
@media (max-width:520px){
  .user-email-badge{font-size:.6rem; padding:3px 9px; max-width:52vw; top:6px; left:6px}
}
body:has(#screen-asta.active) .user-email-badge{display:none}
.asta-header-email{font-size:.6rem;font-weight:600;color:var(--text-secondary);margin-left:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px;opacity:.85}
@media (max-width:520px){.asta-header-email{display:none}}

/* ══════════════════════════════════════════════════════════════
   ══ REDESIGN MOBILE screen-asta: card in cima, pannelli a fisarmonica ══
   Tutto racchiuso in media query (max-width:640px) — non tocca il desktop.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  #screen-asta.active{overflow-y:auto!important;height:auto!important;min-height:100vh}

  /* Riordino verticale: card di chiamata sempre in cima, poi pannelli, poi tabs */
  .asta-row-puja{order:1!important;width:100%!important}
  .asta-row-panels{order:2!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:8px!important;padding:0 10px!important;max-height:none!important;align-items:stretch!important}
  .asta-row-tabs{order:3!important}
  .asta-row-panels>*{width:100%!important;max-width:100%!important;flex:0 0 auto!important;max-height:none!important;margin:0!important}
  #puja-panel-slot{order:-1!important}
  #admin-panel{order:1!important}
  .panel-budget{order:2!important}
  #mio-panel{order:3!important}

  /* ══ Accordion: Riepilogo squadre e Mio team collassati di default, si apre toccando l'header ══ */
  .panel-budget-hdr{cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:.82rem!important;padding:11px 12px!important;margin-bottom:0!important;border-radius:10px;transition:background .2s}
  .panel-budget-hdr:active{background:rgba(255,255,255,.06)}
  .panel-budget-hdr::after{content:'▾';font-size:.9em;transition:transform .25s;opacity:.7}
  .panel-budget.acc-open .panel-budget-hdr::after{transform:rotate(180deg)}
  /* html body .panel-budget (non solo #budget-bar): serve piu' specificita' di
     "html body #budget-bar{display:grid !important}" in tema-serata.css (la griglia
     colonne del riepilogo su desktop) — senza, quella vinceva sempre e l'accordion
     mobile non chiudeva mai davvero (segnalato dall'utente: "non mi lascia stringere"). */
  html body .panel-budget #budget-bar{display:none !important;max-height:46vh;overflow-y:auto;padding-top:8px}
  html body .panel-budget.acc-open #budget-bar{display:flex !important}

  .mio-panel-header{cursor:pointer;padding:11px 12px!important;margin-bottom:0!important;border-radius:10px;position:relative;transition:background .2s}
  .mio-panel-header:active{background:rgba(255,255,255,.06)}
  .mio-panel-header::after{content:'▾';font-size:.9em;transition:transform .25s;opacity:.7;margin-left:8px}
  #mio-panel.acc-open .mio-panel-header::after{transform:rotate(180deg)}
  /* html body #mio-panel :not(.acc-open) (non solo #mio-slot-counter): serve piu' specificita'
     di "html body #mio-panel .slot-counter{display:grid !important}" in tema-serata.css
     (layout desktop del contatore) — senza, quella vinceva sempre e "Mio team" non chiudeva
     mai davvero, stesso bug/fix di poco sopra su #budget-bar. */
  .mio-panel-actions{display:none!important}
  html body #mio-panel:not(.acc-open) .slot-counter{display:none!important}
  html body #mio-panel.acc-open #mio-slot-counter{display:block!important;margin-top:6px}
  #mio-panel.acc-open .mio-panel-actions{display:flex!important;margin-top:8px}
  #mio-panel .mio-panel-actions .btn{font-size:.85rem!important;padding:11px 10px!important}
  /* Fix acordeón cerrado: la regla de tablet (max-width:768px, arriba en el
     archivo) fija flex-basis:200px!important con la misma especificidad, y
     al tener menor prioridad de cascada por orden esta regla de aquí gana:
     obliga al panel a encoger a la altura de su contenido real (solo la
     cabecera) cuando está cerrado, en vez de reservar 200px vacíos. */
  body.layout-partecipante .asta-row-panels>.panel-budget{flex:0 0 auto!important}
  body.layout-partecipante .asta-row-panels>#mio-panel{flex:0 0 auto!important}

  /* ══ Card di chiamata: priorità massima, a piena larghezza, testo e pulsanti leggibili ══ */
  .puja-panel-slot,body.layout-admin .asta-row-puja{
    flex-direction:column!important;padding:14px!important;width:100%!important;border-radius:16px!important;
  }
  .puja-panel-slot .card-timer-group,body.layout-admin .asta-row-puja .card-timer-group{
    flex-direction:column!important;width:100%!important;border-right:none!important;padding-right:0!important;
    border-bottom:1px solid var(--border-light)!important;padding-bottom:12px!important;margin-bottom:12px!important;
    align-items:stretch!important;gap:0!important;height:auto!important;min-height:0!important;overflow:visible!important;
  }
  .puja-panel-slot .chiamata-card,body.layout-admin .asta-row-puja .chiamata-card{
    flex:0 0 auto!important;max-width:100%!important;width:100%!important;padding:10px 14px 10px 96px!important;
    min-height:84px!important;height:auto!important;overflow:visible!important;
  }
  .puja-panel-slot .cc-avatar,body.layout-admin .asta-row-puja .cc-avatar{
    width:74px!important;height:74px!important;position:absolute!important;left:10px!important;top:10px!important;bottom:auto!important;border-radius:12px!important;
  }
  .puja-panel-slot .cc-nome,body.layout-admin .asta-row-puja .cc-nome{
    font-size:1.12rem!important;line-height:1.2!important;white-space:normal!important;overflow:visible!important;
  }
  .puja-panel-slot .cc-offerta,body.layout-admin .asta-row-puja .cc-offerta{
    font-size:2.1rem!important;
  }
  .puja-panel-slot .cc-offerente,body.layout-admin .asta-row-puja .cc-offerente{
    font-size:.92rem!important;white-space:normal!important;overflow:visible!important;
  }
  .puja-panel-slot .cc-meta,body.layout-admin .asta-row-puja .cc-meta{
    font-size:.78rem!important;white-space:normal!important;overflow:visible!important;
  }
  .puja-panel-slot .timer-ring-container,body.layout-admin .asta-row-puja .timer-ring-container{
    width:100%!important;height:auto!important;margin-top:10px!important;flex:0 0 auto!important;
  }
  .puja-panel-slot .timer-ring,body.layout-admin .asta-row-puja .timer-ring{
    width:92px!important;height:92px!important;
  }
  .puja-panel-slot .timer-number,body.layout-admin .asta-row-puja .timer-number{
    font-size:1.6rem!important;
  }
  .puja-panel-slot .timer-label-text,body.layout-admin .asta-row-puja .timer-label-text{
    font-size:.68rem!important;
  }

  /* ══ Rilancio box: pulsanti grandi e comodi al tocco ══ */
  .puja-panel-slot .rilancio-box,body.layout-admin .asta-row-puja .rilancio-box{
    display:flex!important;flex-direction:column!important;width:100%!important;padding:0!important;gap:10px!important;
    position:static!important;bottom:auto!important;left:auto!important;right:auto!important;top:auto!important;z-index:auto!important;
  }
  .puja-panel-slot .quick-bids-row,body.layout-admin .asta-row-puja .quick-bids-row{
    display:flex!important;gap:8px!important;margin:0!important;
  }
  .puja-panel-slot .btn-quick,body.layout-admin .asta-row-puja .btn-quick{
    flex:1!important;padding:12px!important;font-size:1rem!important;
  }
  .puja-panel-slot .btn-rilancia,body.layout-admin .asta-row-puja .btn-rilancia{
    width:100%!important;padding:14px!important;font-size:1.05rem!important;grid-column:auto!important;grid-row:auto!important;letter-spacing:.02em!important;
  }
  .puja-panel-slot .manual-bid-row,body.layout-admin .asta-row-puja .manual-bid-row{
    display:flex!important;gap:8px!important;margin:0!important;grid-column:auto!important;grid-row:auto!important;
  }
  .puja-panel-slot .inp-rilancio,body.layout-admin .asta-row-puja .inp-rilancio{
    flex:1!important;width:auto!important;padding:12px!important;font-size:16px!important;
  }
  .puja-panel-slot .btn-manuale,body.layout-admin .asta-row-puja .btn-manuale{
    flex:1!important;padding:12px!important;font-size:.95rem!important;
  }

  /* ══ Tab a tocco più comode ══ */
  .tab-btn{padding:9px 10px!important;min-height:38px!important}
  .tab-label{font-size:.72rem!important}
}

/* ══════ VISTA UTENTE MOBILE: controlli di puja impilati sotto la card ══════
   Il tentativo precedente di far entrare Rilancia/+5/+10/Offri AFFIANCO alla card
   giocatore continuava a tagliarsi sui telefoni stretti, perché flexbox non
   riusciva a comprimerli abbastanza. Soluzione definitiva: SOLO per la vista
   utente (non-admin) su schermi mobile, i controlli di puja vengono impilati
   in verticale, uno sotto l'altro, a piena larghezza — così nulla esce mai
   dallo schermo e tutti i bottoni restano sempre cliccabili. */
@media (max-width:900px){
  body.layout-partecipante .puja-panel-slot{
    display:flex!important;
    flex-direction:column!important;
  }
  body.layout-partecipante .puja-panel-slot .card-timer-group{
    order:1!important;
    flex-direction:row!important;
    width:100%!important;
  }
  body.layout-partecipante .puja-panel-slot .rilancio-box{
    order:2!important;
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    gap:10px!important;
    margin-top:10px!important;
    padding-top:10px!important;
    border-top:1px solid var(--border-light)!important;
  }
  body.layout-partecipante .puja-panel-slot .quick-bids-row{
    display:flex!important;
    flex-direction:row!important;
    width:100%!important;
    gap:8px!important;
    order:2!important;
  }
  body.layout-partecipante .puja-panel-slot .quick-bids-row .btn-quick{
    flex:1 1 0%!important;
    width:auto!important;
  }
  body.layout-partecipante .puja-panel-slot .btn-rilancia{
    order:1!important;
    width:100%!important;
  }
  body.layout-partecipante .puja-panel-slot .manual-bid-row{
    display:flex!important;
    flex-direction:row!important;
    width:100%!important;
    gap:8px!important;
    order:3!important;
  }
  body.layout-partecipante .puja-panel-slot .inp-rilancio{
    flex:1 1 auto!important;
    width:auto!important;
  }
  body.layout-partecipante .puja-panel-slot .manual-bid-row .btn-manuale{
    flex:0 0 auto!important;
  }
}

/* ══════ RETE DI SICUREZZA ANTI-OVERFLOW MOBILE (fix definitivo) ══════
   Diversi breakpoint precedenti (480/400/640/700/768px) potevano entrare in
   conflitto tra loro su larghezze "intermedie" non standard (es. alcuni
   Samsung con impostazioni di scala del display particolari), lasciando la
   card di chiamata nel layout "orizzontale desktop" che non entra nello
   schermo e taglia i bottoni di rilancio a destra. Questo blocco, essendo
   l'ULTIMO nel file con !important, vince sempre su qualsiasi conflitto
   precedente e garantisce l'impilamento verticale su qualunque telefono. */
@media (max-width:1200px){
  html, body { overflow-x:hidden!important; max-width:100vw!important; }
  #screen-asta.active { overflow-x:hidden!important; }
  .asta-row-puja,
  .puja-panel-slot,
  body.layout-partecipante .puja-panel-slot,
  body.layout-admin .asta-row-puja {
    flex-direction:column!important;
    width:100%!important; max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
  }
  .asta-row-puja .card-timer-group,
  .puja-panel-slot .card-timer-group,
  body.layout-partecipante .puja-panel-slot .card-timer-group,
  body.layout-admin .asta-row-puja .card-timer-group {
    flex-direction:column!important;
    width:100%!important; max-width:100%!important;
    min-width:0!important;
    border-right:none!important; padding-right:0!important;
  }
  .asta-row-puja .rilancio-box,
  .puja-panel-slot .rilancio-box,
  body.layout-partecipante .puja-panel-slot .rilancio-box,
  body.layout-admin .asta-row-puja .rilancio-box {
    position:static!important; bottom:auto!important; left:auto!important; right:auto!important; top:auto!important;
    width:100%!important; max-width:100%!important; min-width:0!important;
    flex:1 1 100%!important;
    box-sizing:border-box!important;
    display:flex!important; flex-direction:column!important;
  }
  .puja-panel-slot .chiamata-card,
  body.layout-partecipante .puja-panel-slot .chiamata-card,
  body.layout-admin .asta-row-puja .chiamata-card {
    width:100%!important; max-width:100%!important; min-width:0!important;
    box-sizing:border-box!important;
  }
  .quick-bids-row, .manual-bid-row,
  body.layout-partecipante .puja-panel-slot .quick-bids-row,
  body.layout-partecipante .puja-panel-slot .manual-bid-row {
    flex-wrap:wrap!important; width:100%!important; max-width:100%!important; min-width:0!important;
    box-sizing:border-box!important;
  }
  .btn-quick, .btn-rilancia, .inp-rilancio, .btn-manuale,
  body.layout-partecipante .puja-panel-slot .btn-quick,
  body.layout-partecipante .puja-panel-slot .inp-rilancio {
    max-width:100%!important; box-sizing:border-box!important; min-width:0!important; flex:1 1 auto!important;
  }
}

/* ══════ FIX VISTA UTENTE (desktop/tablet/mobile): fascia strategia sempre visibile ══════
   Questo blocco NON è dentro nessuna @media query, quindi si applica SEMPRE
   (schermi larghi e stretti). Prima era erroneamente dentro un blocco
   @media(max-width:768px), quindi su desktop veniva ignorato. */
body.layout-partecipante .puja-panel-slot{align-self:flex-start!important;height:auto!important;max-height:none!important;overflow:visible!important}
body.layout-partecipante .puja-panel-slot .card-timer-group{height:auto!important;overflow:visible!important;align-items:flex-start!important}
body.layout-partecipante .puja-panel-slot .chiamata-card{height:auto!important;max-height:none!important;overflow:visible!important;flex-wrap:nowrap!important;align-items:flex-start!important;row-gap:4px!important}
body.layout-partecipante .puja-panel-slot .cc-body{overflow:visible!important;white-space:normal!important;flex-wrap:nowrap!important;width:100%!important;max-width:100%!important;flex:1 1 100%!important;row-gap:2px!important;box-sizing:border-box!important}
body.layout-partecipante .puja-panel-slot .cc-strategia-info{white-space:normal!important;overflow:visible!important;text-overflow:unset!important;flex:1 1 100%!important;width:100%!important;max-width:100%!important;margin-top:2px!important;box-sizing:border-box!important;overflow-wrap:anywhere!important}
body.layout-partecipante .puja-panel-slot .cc-offerente{white-space:normal!important;max-width:100%!important;overflow-wrap:anywhere!important}
body.layout-partecipante .puja-panel-slot .cc-attesa-badge{flex:1 1 100%!important;width:100%!important;max-width:100%!important;white-space:normal!important;box-sizing:border-box!important;overflow-wrap:anywhere!important}
body.layout-partecipante .puja-panel-slot .cc-nome{white-space:normal!important;overflow:visible!important;text-overflow:unset!important;max-width:100%!important;overflow-wrap:anywhere!important}
body.layout-partecipante .puja-panel-slot .cc-meta{white-space:normal!important;overflow:visible!important;max-width:100%!important;flex-wrap:wrap!important}
body.layout-partecipante .puja-panel-slot .cc-offerta-box{max-width:100%!important;box-sizing:border-box!important;flex-wrap:nowrap!important;flex-shrink:0!important}
body.layout-partecipante .puja-panel-slot .cc-offerta,
body.layout-partecipante .puja-panel-slot .cc-offerta-label{max-width:100%!important;overflow-wrap:anywhere!important;white-space:normal!important}
body.layout-partecipante .asta-row-panels{overflow:visible!important}

/* ══════ PUJA: contenido íntegro, sin truncar comentario ni retrato ══════ */
.cc-avatar-img{object-fit:contain!important;object-position:center top!important;background:linear-gradient(145deg,#17102e,#34205c)!important}
.cc-strategia-info,
.puja-panel-slot .cc-strategia-info,
body.layout-admin .asta-row-puja .cc-strategia-info,
body.layout-partecipante .puja-panel-slot .cc-strategia-info{
  display:block!important;white-space:normal!important;overflow:visible!important;
  text-overflow:clip!important;overflow-wrap:anywhere!important;word-break:normal!important;
  max-width:100%!important;height:auto!important;min-height:0!important;line-height:1.35!important;
}
.chiamata-card,.chiamata-card .cc-body{min-height:0!important;height:auto!important}

/* ══════ ESTADIO THREE.JS — canvas real detrás de las tarjetas DOM ══════ */
.ant-pitch-stage{position:relative;isolation:isolate;overflow:hidden;padding:0;aspect-ratio:1.16/1;
  min-height:300px;background:#050516;border:1px solid rgba(255,176,74,.35);border-radius:16px;
  box-shadow:0 18px 46px rgba(0,0,0,.5),0 0 42px rgba(100,83,255,.16)}
#tab-anteprima.ant-drawer.drawer-open{width:min(680px,55vw)}
.ant-drawer-body{width:min(680px,55vw)}
.ant-stadio-3d{position:absolute;inset:0;z-index:0;pointer-events:none}
.ant-stadio-3d canvas{display:block;width:100%!important;height:100%!important}
.ant-pitch.ant-pitch3d{position:absolute;z-index:2;inset:13% 16% 11%;width:auto;max-width:none!important;
  margin:0;aspect-ratio:5/6;transform:none;background:transparent!important;box-shadow:none!important;
  border-radius:0;overflow:visible;transition:inset .2s ease}
.ant-pitch.ant-pitch3d::before,.ant-pitch.ant-pitch3d::after,.ant-pitch3d-border{display:none}
.ant-slot3d{z-index:4;filter:drop-shadow(0 7px 5px rgba(0,0,0,.42))}
.ant-slot3d .ant-card{transform:perspective(360px) rotateX(8deg) rotateY(-3deg) translateY(-5px)!important;
  box-shadow:0 9px 18px rgba(0,0,0,.55),0 0 13px color-mix(in srgb,var(--card-accent,#FFC578) 45%,transparent)!important}
.ant-slot3d:hover .ant-card{transform:perspective(360px) rotateX(5deg) rotateY(-3deg) translateY(-11px) scale(1.08)!important}
.ant-slot3d-empty{background:rgba(14,13,38,.48)!important;border-color:rgba(195,183,255,.72)!important;
  box-shadow:0 0 13px rgba(141,112,255,.35),inset 0 0 14px rgba(102,83,255,.15)!important}
.ant-slot3d-label{z-index:5;text-shadow:0 2px 5px #000,0 0 9px rgba(117,218,255,.45)}
.ant-slot3d-shadow{display:none}

/* Carta de confirmación: vertical, pero compacta y con composición premium. */
.ant-card.in-bench.size-xl{border:1px solid rgba(255,205,97,.8);border-radius:14px;
  width:100%;height:100%;
  background:linear-gradient(145deg,rgba(32,20,70,.96),rgba(8,12,39,.98));
  box-shadow:0 18px 38px rgba(0,0,0,.58),0 0 28px rgba(125,93,255,.42),inset 0 1px rgba(255,255,255,.2)}
.ant-card.in-bench.size-xl::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.14),transparent 28%,transparent 68%,rgba(111,81,255,.2));z-index:2}
.ant-card.in-bench.size-xl .ant-card-photo{background-size:cover;background-position:center 14%;filter:saturate(1.12) contrast(1.04)}
.ant-card.in-bench.size-xl .ant-card-fade{height:29%;background:linear-gradient(transparent,rgba(7,8,30,.4) 20%,rgba(8,8,29,.98) 52%)}
.ant-card.in-bench.size-xl .ant-card-name{bottom:8px;padding:0 9px;line-height:1.06}
.ant-card.in-bench.size-xl .ant-card-name-txt{font-size:.76rem;font-weight:900;white-space:normal;overflow:visible;text-overflow:clip;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-shadow:0 2px 5px #000}
.ant-card.in-bench.size-xl .ant-card-role{z-index:4}
.ant-card.in-bench.size-xl .ant-card-u21{z-index:4}
.assegnazione-fx-card{filter:drop-shadow(0 0 18px rgba(125,93,255,.5))}
@media (max-width:900px){
  #tab-anteprima.ant-drawer.drawer-open{width:min(440px,55vw)}
  .ant-drawer-body{width:min(440px,55vw)}
}
@media (max-width:760px){
  #tab-anteprima.ant-drawer.drawer-open,.ant-drawer-body{width:auto}
  .ant-pitch-stage{min-height:270px;aspect-ratio:1/1.08}
  .ant-pitch.ant-pitch3d{inset:15% 15% 12%}
  .ant-card.size-pitch{width:13.5cqw;height:18.3cqw}
}

/* ══════ Ajuste final de composición: anteprima lateral, puja legible ══════ */
/* La escena conserva la relación amplia de la referencia, pero el drawer deja espacio
   útil a la subasta: aproximadamente un tercio de escritorio, nunca media pantalla. */
#tab-anteprima.ant-drawer.drawer-open{width:min(460px,36vw)}
.ant-drawer-body{width:min(460px,36vw);padding:12px 14px 18px}
.asta-live-layout:has(#tab-anteprima.drawer-open) .asta-row-puja .rilancio-box,
.asta-live-layout:has(#tab-anteprima.drawer-open) .puja-panel-slot .rilancio-box{
  flex:0 1 205px;max-width:205px;min-width:148px;
}
.asta-live-layout:has(#tab-anteprima.drawer-open) .btn-rilancia{max-width:205px;margin-inline:auto}

/* La foto es una zona fija y protagonista; no hereda nunca el alto del comentario. */
.cc-avatar-img{object-fit:contain!important;object-position:center top!important}
.cc-commento-preview{
  width:100%;margin-top:4px;padding:5px 7px;border:1px solid rgba(167,139,250,.22);
  border-radius:7px;background:rgba(9,7,24,.25);color:var(--text-secondary);font:inherit;
  font-size:.71rem;line-height:1.3;text-align:left;cursor:pointer;
}
.cc-commento-preview>span{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.cc-commento-preview small{display:block;margin-top:2px;color:var(--primary-bright);font-size:.64rem;font-weight:800;text-align:right}
.cc-commento-preview:hover{border-color:rgba(167,139,250,.65);background:rgba(255,176,74,.1)}
.modal-commento-puja{max-width:520px;padding-right:52px}
.modal-close-x{position:absolute;right:14px;top:14px;width:30px;height:30px;border:1px solid var(--border-light);border-radius:50%;background:var(--bg-elevated);color:var(--text-primary);cursor:pointer}
.modal-commento-puja-testo{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text-secondary);line-height:1.55}

/* Carta de asignación: retrato protagonista (82% de la carta), placa de nombre
   compacta y dorada. No reutiliza la franja alta/negra de las mini-cartas. */
.assegnazione-fx-card{width:142px!important;height:194px!important}
.assegnazione-fx-card .ant-card.in-bench.size-xl{width:142px!important;height:194px!important;
  overflow:hidden;background:linear-gradient(145deg,#39206e,#07122d)!important}
.assegnazione-fx-card .ant-card.in-bench.size-xl .ant-card-photo{
  inset:0 0 18%;background-size:cover!important;background-position:center top!important;
  filter:saturate(1.15) contrast(1.06) brightness(1.06)!important;
}
.assegnazione-fx-card .ant-card.in-bench.size-xl .ant-card-fade{
  height:25%;background:linear-gradient(180deg,transparent 0%,rgba(10,12,36,.18) 18%,rgba(9,11,34,.95) 54%,#090b28 100%)!important;
}
.assegnazione-fx-card .ant-card.in-bench.size-xl .ant-card-name{bottom:7px;padding:0 7px;line-height:1.05}
.assegnazione-fx-card .ant-card.in-bench.size-xl .ant-card-name-txt{
  display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  color:#fff;font-size:.82rem!important;font-weight:900;text-shadow:0 2px 5px #000;
}
.assegnazione-fx-card .ant-card.in-bench.size-xl .ant-card-role{top:7px;left:7px}
.assegnazione-fx-card .ant-card.in-bench.size-xl .ant-card-u21{top:7px;right:7px}

@media (max-width:900px){
  #tab-anteprima.ant-drawer.drawer-open{width:min(390px,42vw)}
  .ant-drawer-body{width:min(390px,42vw)}
}
@media (max-width:760px){
  #tab-anteprima.ant-drawer.drawer-open,.ant-drawer-body{width:auto}
  .asta-live-layout:has(#tab-anteprima.drawer-open) .asta-row-puja .rilancio-box{max-width:none}
}

/* ══════ Composición literal de la referencia de estadio ══════
   Escenario panorámico: el estadio ocupa todo el ancho, con el campo centrado y
   proyectado hacia el fondo. Las cartas DOM quedan verticales sobre esa escena. */
.ant-pitch-stage{
  aspect-ratio:1.62 / 1;min-height:0;
  background:radial-gradient(ellipse at 50% 18%,rgba(91,81,245,.18),transparent 42%),#030510;
  border-color:rgba(133,105,255,.52);
}
.ant-pitch-stage::after{content:'';position:absolute;z-index:1;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(1,3,13,.12) 0%,transparent 27%,transparent 76%,rgba(1,2,10,.42) 100%)}
.ant-pitch.ant-pitch3d{inset:20% 10% 10%;aspect-ratio:auto;container-type:inline-size}
.ant-slot3d{filter:drop-shadow(0 6px 7px rgba(0,0,0,.7))}
.ant-card.size-pitch{width:13cqw;height:17.6cqw;min-width:34px;min-height:46px}
.ant-slot3d-empty{width:13cqw;height:17.6cqw;min-width:34px;min-height:46px;border-width:2px!important;
  background:rgba(7,10,24,.54)!important;border-color:rgba(206,190,255,.74)!important}
.ant-slot3d-label{bottom:-23px;font-size:.62rem}
.ant-slot3d .ant-card{transform:perspective(480px) rotateX(4deg) translateY(-2px)!important}
@media (max-width:760px){
  .ant-pitch-stage{aspect-ratio:1.12 / 1}
  .ant-pitch.ant-pitch3d{inset:19% 9% 10%}
  .ant-card.size-pitch,.ant-slot3d-empty{width:14cqw;height:19cqw}
}

/* Cada etiqueta pertenece físicamente a su slot. La regla 3D anterior mantenía
   rotateX/translateZ también en el texto, alejándolo de la carta casi una fila. */
.ant-slot3d{width:13cqw;height:17.6cqw;min-width:34px;min-height:46px}
.ant-slot3d-label{
  top:calc(100% + 4px);bottom:auto;left:0;
  width:100%;max-width:100%;min-height:0;
  transform:none!important;
  display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  text-align:center;line-height:1.15;
}
.ant-slot3d-label .ant-slot3d-name-txt{width:100%;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ant-slot3d-label:has(.badge-ruolo){overflow:visible;white-space:normal;display:flex;justify-content:center;flex-wrap:wrap;gap:2px}
@media (max-width:760px){
  .ant-slot3d{width:14cqw;height:19cqw}
}

/* ══════ Campo limpio: sin estadio, sin gradas, sin geometría decorativa ══════
   El espacio entero se reserva para el juego y las once cartas. */
.ant-stadio-3d{display:none!important}
.ant-pitch-stage{
  display:flex;align-items:center;justify-content:center;padding:12px;
  aspect-ratio:auto;min-height:0;background:#050a10!important;
  border:1px solid var(--sc-ambra-piena,rgba(115,105,255,.55));
  box-shadow:0 12px 28px rgba(0,0,0,.45),0 0 26px rgba(var(--sc-ambra,115,105,255),.22);
}
.ant-pitch-stage::after{display:none}
.ant-pitch.ant-pitch3d{
  position:relative!important;z-index:2;inset:auto!important;margin:auto!important;
  width:min(100%,var(--ant-pitch-size,300px))!important;max-width:none!important;
  aspect-ratio:5 / 6!important;container-type:inline-size;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 12.5%),
    repeating-linear-gradient(90deg,#0b4b2c 0 10%,#0d5a35 10% 20%)!important;
  border:2px solid rgba(126,230,255,.92);border-radius:9px;overflow:visible!important;
  box-shadow:0 0 0 2px rgba(100,79,255,.34),0 0 14px rgba(80,222,255,.7),0 0 32px rgba(112,84,255,.42),inset 0 0 38px rgba(0,0,0,.28)!important;
  transition:width .18s ease;
}
/* Líneas blancas del campo, con círculo y áreas. */
.ant-pitch.ant-pitch3d::before{display:block!important;content:'';position:absolute;z-index:0;inset:3%;height:auto!important;
  transform:none!important;background:
    linear-gradient(90deg,transparent 49.65%,rgba(244,255,251,.9) 49.7% 50.3%,transparent 50.35%),
    linear-gradient(rgba(244,255,251,.9),rgba(244,255,251,.9)) 50% 0 / 58% 1px no-repeat,
    linear-gradient(rgba(244,255,251,.9),rgba(244,255,251,.9)) 21% 0 / 1px 17% no-repeat,
    linear-gradient(rgba(244,255,251,.9),rgba(244,255,251,.9)) 79% 0 / 1px 17% no-repeat,
    linear-gradient(rgba(244,255,251,.9),rgba(244,255,251,.9)) 50% 100% / 58% 1px no-repeat,
    linear-gradient(rgba(244,255,251,.9),rgba(244,255,251,.9)) 21% 100% / 1px 17% no-repeat,
    linear-gradient(rgba(244,255,251,.9),rgba(244,255,251,.9)) 79% 100% / 1px 17% no-repeat;
  opacity:.94;filter:drop-shadow(0 0 2px rgba(192,255,253,.85));box-shadow:none!important;
}
.ant-pitch.ant-pitch3d::after{display:block!important;content:'';position:absolute;z-index:0;left:50%;top:50%;width:22%;height:18%;
  transform:translate(-50%,-50%)!important;border:1.5px solid rgba(184,255,252,.95);border-radius:50%;box-shadow:0 0 7px rgba(86,238,255,.62),inset 0 0 6px rgba(86,238,255,.25)!important;
}
.ant-pitch.ant-pitch3d::selection{background:transparent}
.ant-slot3d{z-index:2;width:11cqw;height:15cqw;min-width:32px;min-height:44px;filter:drop-shadow(0 4px 5px rgba(0,0,0,.6))}
.ant-card.size-pitch,.ant-slot3d-empty{width:11cqw!important;height:15cqw!important;min-width:32px;min-height:44px}
.ant-slot3d-empty{background:rgba(4,18,13,.48)!important;border-color:rgba(226,244,235,.58)!important;box-shadow:0 0 10px rgba(var(--sc-ambra,104,91,255),.22)!important}
.ant-slot3d-label{z-index:3;top:calc(100% + 3px);font-size:clamp(.48rem,2.4cqw,.68rem);font-weight:800;color:#fff;text-shadow:0 1px 3px #000!important}
@media (max-width:760px){
  .ant-pitch-stage{padding:10px;min-height:420px}
  .ant-slot3d,.ant-card.size-pitch,.ant-slot3d-empty{width:11.5cqw!important;height:15.7cqw!important}
}

/* ══════ Acabado futurista: campo táctico en perspectiva ══════
   Sin tribunas: toda la profundidad viene del trapecio, la cuadrícula y la luz. */
.ant-pitch-stage{
  padding:26px 18px 14px!important;overflow:visible!important;
  background:
    radial-gradient(ellipse at 50% 4%,rgba(151,91,255,.22),transparent 42%),
    linear-gradient(180deg,#130c2a 0%,#070817 65%,#100a24 100%)!important;
}
.ant-pitch.ant-pitch3d{
  width:min(94%,var(--ant-pitch-size,300px))!important;
  aspect-ratio:5 / 5.65!important;
  clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);
  border:none!important;border-radius:0!important;
  background:
    linear-gradient(90deg,rgba(112,84,255,.3) 1px,transparent 1px) 0 0/12.5% 100%,
    linear-gradient(0deg,rgba(67,238,213,.18) 1px,transparent 1px) 0 0/100% 10%,
    repeating-linear-gradient(90deg,#0a392c 0 10%,#0d4c37 10% 20%)!important;
  filter:drop-shadow(0 0 2px rgba(122,231,255,.95)) drop-shadow(0 0 15px rgba(111,76,255,.6));
  box-shadow:inset 0 0 0 2px rgba(85,235,213,.85),inset 0 0 48px rgba(0,0,0,.38)!important;
}
/* Marco interior trapezoidal: el borde neon no depende de gradas o imágenes. */
.ant-pitch.ant-pitch3d::before{inset:1.7%!important;clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);
  border:2px solid rgba(75,239,213,.94);background:
    linear-gradient(90deg,transparent 49.65%,rgba(209,255,252,.92) 49.7% 50.3%,transparent 50.35%)!important;
  filter:drop-shadow(0 0 5px rgba(68,239,211,.68));
}
.ant-pitch.ant-pitch3d::after{width:25%!important;height:19%!important;border-color:rgba(180,126,255,.98)!important;
  box-shadow:0 0 10px rgba(143,95,255,.85),inset 0 0 8px rgba(65,240,214,.22)!important;
}
/* La carta mantiene legibilidad, pero deja de verse como un sticker totalmente plano. */
.ant-slot3d .ant-card{
  transform:perspective(420px) rotateX(8deg) rotateY(-3deg) translateY(-3px)!important;
  box-shadow:0 8px 15px rgba(0,0,0,.62),0 0 10px color-mix(in srgb,var(--card-accent,#8a6cff) 48%,transparent)!important;
}
.ant-slot3d:nth-child(even) .ant-card{transform:perspective(420px) rotateX(8deg) rotateY(3deg) translateY(-3px)!important}
.ant-slot3d:hover .ant-card{transform:perspective(420px) rotateX(5deg) rotateY(0) translateY(-9px) scale(1.06)!important}
@media (max-width:760px){.ant-pitch-stage{padding:22px 12px 12px!important}}

/* ══════ Campo vertical reglamentario y fondo espacial ══════ */
.ant-pitch-stage{
  padding:18px!important;overflow:visible!important;
  background:
    radial-gradient(circle at 13% 18%,rgba(182,225,255,.8) 0 1px,transparent 2px),
    radial-gradient(circle at 82% 11%,rgba(192,156,255,.65) 0 1px,transparent 2px),
    radial-gradient(circle at 70% 67%,rgba(110,238,255,.48) 0 1px,transparent 2px),
    radial-gradient(ellipse at 50% 20%,rgba(100,70,255,.2),transparent 48%),
    linear-gradient(180deg,#08051a,#020711 62%,#0b0620)!important;
}
.ant-pitch.ant-pitch3d{
  width:min(100%,var(--ant-pitch-size,300px))!important;aspect-ratio:5 / 7!important;
  clip-path:none!important;border:2px solid rgba(77,240,218,.9)!important;border-radius:12px!important;
  background:repeating-linear-gradient(90deg,#0a3d2b 0 10%,#0d5136 10% 20%)!important;
  box-shadow:0 0 0 2px rgba(116,83,255,.4),0 0 16px rgba(58,239,217,.6),0 0 38px rgba(111,74,255,.44),inset 0 0 50px rgba(0,0,0,.36)!important;
  filter:none!important;
}
/* Las líneas proceden de SVG, no de una malla CSS. */
.ant-pitch.ant-pitch3d::before,.ant-pitch.ant-pitch3d::after{display:none!important}
.ant-field-markings{position:absolute;z-index:1;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ant-field-markings rect,.ant-field-markings path,.ant-field-markings circle{fill:none;stroke:rgba(196,255,248,.96);stroke-width:.55;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px rgba(55,242,216,.74))}
.ant-field-markings .ant-field-dot{fill:#bffff6;stroke:none;filter:drop-shadow(0 0 3px #48f3d6)}
.ant-slot3d{z-index:2;width:12.5cqw;height:17.2cqw;min-width:37px;min-height:51px}
.ant-card.size-pitch,.ant-slot3d-empty{width:12.5cqw!important;height:17.2cqw!important;min-width:37px;min-height:51px}
/* Nombre completo: dos líneas dentro de la columna de su propio jugador. */
.ant-slot3d-label{top:calc(100% + 4px);font-size:.62rem;line-height:1.05;overflow:visible!important;white-space:normal!important}
.ant-slot3d-label .ant-slot3d-name-txt{display:-webkit-box;width:130%;max-width:130%;margin-left:-15%;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;word-break:break-word}
.ant-slot3d .ant-card{transform:perspective(420px) rotateX(7deg) rotateY(-3deg) translateY(-3px)!important}
.ant-slot3d:nth-child(even) .ant-card{transform:perspective(420px) rotateX(7deg) rotateY(3deg) translateY(-3px)!important}
@media (max-width:760px){
  .ant-pitch-stage{padding:13px!important;min-height:0}
  .ant-slot3d,.ant-card.size-pitch,.ant-slot3d-empty{width:12.7cqw!important;height:17.5cqw!important}
}

/* ══════ FIX: rilancio-box.hidden debe permanecer oculto en mobile ══════
   Los bloques @media(max-width:900px/640px) de más arriba fuerzan
   display:flex!important en .rilancio-box (para mostrarlo bien apilado en
   columna cuando SÍ está visible), pero eso ignora la clase .hidden que JS
   le pone a propósito para congelar la puja (ej. estado "aspettando
   conferma" en llamadas RIC, o antes de la 1ª offerta). Como .hidden por sí
   sola tiene menor especificidad que esos selectores compuestos, pierde el
   empate aunque también tenga !important. Esta regla, más específica y
   colocada al final del archivo (gana también por orden de cascada), la
   anula explícitamente cuando tiene .hidden. Solo vista utente/admin del
   propio rilancio-box, sin afectar ningún otro elemento. */
body.layout-partecipante .puja-panel-slot .rilancio-box.hidden,
.puja-panel-slot .rilancio-box.hidden,
#rilancio-box.hidden {
  display:none!important;
}

/* ══════ Vista 3D: carte in piedi sul campo inclinato (mockup docs/redesign-asta-3d) ══════
   Blocco definitivo: annulla i transform 2D sparsi sopra (perspective() per-carta, rotateY
   alternati, filter:drop-shadow che appiattisce preserve-3d) e ripristina la geometria condivisa:
   prospettiva sullo stage, campo rotateX, carte contrarotate + translateZ sullo stesso piano 3D. */
.ant-pitch-stage{
  perspective:1200px;perspective-origin:50% 38%;
  overflow:visible!important;transform-style:preserve-3d;
}
.ant-pitch.ant-pitch3d{
  transform:rotateX(48deg)!important;
  transform-style:preserve-3d!important;
  transform-origin:center center;
  overflow:visible!important;
}
.ant-slot3d{
  transform:translate(-50%,-50%)!important;
  transform-style:preserve-3d!important;
  filter:none!important;
}
.ant-slot3d-shadow{
  display:block!important;
  position:absolute;left:50%;top:100%;
  transform:translate(-50%,-72%)!important;
  width:14cqw;height:5cqw;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.52) 0%,rgba(0,0,0,.18) 55%,transparent 78%);
  z-index:0;pointer-events:none;
}
/* Glow di contatto sul prato, sotto l'ombra */
.ant-slot3d::before{
  content:'';position:absolute;left:50%;top:100%;
  transform:translate(-50%,-58%);
  width:11cqw;height:3.2cqw;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(56,255,196,.22),transparent 72%);
  z-index:0;pointer-events:none;
}
.ant-slot3d-empty{
  transform:rotateX(-48deg) translateZ(34px)!important;
  transform-style:preserve-3d!important;
}
.ant-slot3d .ant-card{
  transform:rotateX(-48deg) translateZ(34px)!important;
  transform-style:preserve-3d!important;
  backface-visibility:hidden;
  box-shadow:
    0 14px 22px rgba(0,0,0,.62),
    0 0 12px color-mix(in srgb,var(--card-accent,#8a6cff) 48%,transparent),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -11px 14px rgba(0,0,0,.32)!important;
}
.ant-slot3d:hover .ant-card{
  transform:rotateX(-48deg) translateZ(56px) scale(1.1)!important;
}
/* Spessore sottile del bordo destro (profondità percepita) */
.ant-card.on-pitch::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  transform:translateZ(-5px);
  background:linear-gradient(90deg,rgba(0,0,0,.38),rgba(0,0,0,.12));
  pointer-events:none;z-index:0;
}
.ant-card.on-pitch::after{
  content:'';position:absolute;top:0;bottom:0;left:0;width:5px;z-index:4;pointer-events:none;
  transform:translateZ(2px);
  background:linear-gradient(90deg,rgba(0,0,0,.5),transparent);
  border-radius:10px 0 0 10px;
}
@media (max-width:760px){
  .ant-pitch-stage{perspective:920px;perspective-origin:50% 36%}
  .ant-pitch.ant-pitch3d{transform:rotateX(44deg)!important}
  .ant-slot3d .ant-card{transform:rotateX(-44deg) translateZ(26px)!important}
  .ant-slot3d-empty{transform:rotateX(-44deg) translateZ(26px)!important}
  .ant-slot3d:hover .ant-card{transform:rotateX(-44deg) translateZ(44px) scale(1.08)!important}
  .ant-slot3d-shadow{width:15cqw;height:4.5cqw}
}

/* Avatar asta: contain senza crop, massimo riempimento del box foto */
body.layout-admin .asta-row-puja .cc-avatar,
.puja-panel-slot .cc-avatar{
  bottom:auto!important;flex-shrink:0!important;
  display:flex!important;align-items:flex-start!important;justify-content:center!important;
  padding:0!important;
}
body.layout-admin .asta-row-puja .cc-avatar{
  width:92px!important;height:120px!important;
}
.puja-panel-slot .cc-avatar{
  width:70px!important;height:94px!important;
}
body.layout-admin .asta-row-puja .cc-avatar-img,
.puja-panel-slot .cc-avatar-img,
#chiamata-card .cc-avatar-img{
  object-fit:contain!important;
  object-position:center top!important;
  width:auto!important;
  height:100%!important;
  max-width:112%!important;
  max-height:112%!important;
  margin:0 auto!important;
  display:block!important;
  flex-shrink:0!important;
}
@media (max-width:640px){
  .puja-panel-slot .cc-avatar,
  body.layout-admin .asta-row-puja .cc-avatar{
    width:68px!important;height:88px!important;
  }
}

/* Svincolati mobile: il nome resta sempre leggibile anche con badge Strategia attivo */
@media (max-width:640px){
  .liberi-list li{
    flex-wrap:wrap;align-items:center;row-gap:3px;
  }
  .liberi-list li > .badge-ruolo{flex:0 0 auto;order:0}
  .liberi-list .l-nome{
    flex:1 1 calc(100% - 38px)!important;
    min-width:100px!important;max-width:100%!important;
    order:1;font-size:.84rem;font-weight:700;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    color:var(--text-primary)!important;
  }
  .liberi-list .l-strategia-badge{
    flex:1 1 100%!important;order:99;max-width:100%!important;
    margin-top:1px;padding-left:2px;
    white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.25!important;
  }
  .liberi-list .l-tipo-badge,
  .liberi-list .l-orig,
  .liberi-list .l-valore-wrap,
  .liberi-list .l-scartato-tag{order:5;flex-shrink:1}
  .liberi-list .l-costo{order:6;margin-left:auto;flex-shrink:0}
}


/* ── Griglia squadre (matrice compatibilità) ── */
.gk-grid-wrap{overflow:auto;margin-top:18px;max-height:70vh;padding-bottom:8px;border-radius:12px}
.gk-grid{display:grid;gap:3px;min-width:max-content}
.gk-grid-corner{position:sticky;top:0;left:0;z-index:3;background:var(--bg-card);width:84px;height:44px}
.gk-grid-col-header{position:sticky;top:0;z-index:2;background:var(--bg-card);width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.gk-grid-col-header img{width:22px;height:22px;object-fit:contain}
.gk-grid-row-label{position:sticky;left:0;z-index:1;background:var(--bg-card);width:84px;height:44px;display:flex;align-items:center;gap:6px;padding:0 6px;font-size:.7rem;font-weight:700;color:var(--text-secondary);white-space:nowrap}
.gk-grid-row-label img{width:18px;height:18px;object-fit:contain}
.gk-grid-cell{width:44px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;cursor:pointer;transition:transform .12s;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.gk-grid-cell:hover{transform:scale(1.15);z-index:5}
.gk-grid-cell-diag{background:transparent!important;box-shadow:none;cursor:default}
.gk-grid-legend{margin-top:10px;font-size:.75rem;color:var(--text-muted)}
@media (max-width:600px){
  .gk-grid-corner,.gk-grid-row-label{width:60px}
  .gk-grid-col-header,.gk-grid-cell{width:36px;height:36px}
  .gk-grid-corner,.gk-grid-col-header{height:36px}
  .gk-grid-row-label{height:36px;font-size:.6rem}
  .gk-grid-cell{font-size:.62rem}
}

/* ══════════════════════════════════════════════════════════════════════════
   ══ FIX 2026-08-13: foto Puja troppo piccola + effetto "gomma" Anteprima ══
   Blocco intenzionalmente posto in fondo al file: per specificita' pari,
   vince sempre sulle regole sparse sopra (accumulate in sessioni precedenti),
   senza doverle rimuovere una per una e senza rischiare regressioni altrove.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1) Foto giocatore in Puja: ingrandita per davvero, ammin + partecipante,
   con padding-left della card sempre coerente con la nuova larghezza (evita
   che il nome/testo si sovrapponga alla foto). ── */
body.layout-admin .asta-row-puja .chiamata-card{padding-left:126px!important}
body.layout-admin .asta-row-puja .cc-avatar{width:108px!important;height:140px!important;border-radius:14px!important}
.puja-panel-slot .chiamata-card{padding-left:104px!important}
.puja-panel-slot .cc-avatar{width:86px!important;height:112px!important;border-radius:12px!important}

@media (max-width:1200px){
  .puja-panel-slot .chiamata-card{padding-left:96px!important}
  .puja-panel-slot .cc-avatar{width:78px!important;height:102px!important}
}
@media (max-width:700px){
  body.layout-admin .asta-row-puja .chiamata-card{padding-left:78px!important}
  body.layout-admin .asta-row-puja .cc-avatar{width:62px!important;height:82px!important}
}
@media (max-width:640px){
  .puja-panel-slot .chiamata-card{padding-left:78px!important}
  .puja-panel-slot .cc-avatar{width:62px!important;height:82px!important}
}
@media (max-width:400px){
  body.layout-admin .asta-row-puja .chiamata-card{padding-left:60px!important}
  body.layout-admin .asta-row-puja .cc-avatar{width:46px!important;height:60px!important}
  .puja-panel-slot .chiamata-card{padding-left:60px!important}
  .puja-panel-slot .cc-avatar{width:46px!important;height:60px!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   FIX 2026-08-19: nome giocatore e bottoni rilancio troppo piccoli in Puja
   su tablet/desktop (901px+). Stesso pattern del blocco "FIX 2026-08-13"
   qui sopra (avatar Puja): posto in fondo al file per vincere per ordine di
   apparizione a parita' di specificita', senza toccare le regole sparse
   esistenti. Scope limitato a min-width:901px perche' sotto i 900px c'e'
   gia' un trattamento dedicato (stacking dei bottoni sotto i 900px, carta
   grande sotto i 640px) che non va toccato.
   ══════════════════════════════════════════════════════════════════════════ */
/* SFRONDATO 2026-08-26: di questo blocco restano solo le tre regole Admin.
   Tutto cio' che riguardava la vista Partecipante (`.puja-panel-slot`) era ormai
   battuto per specificita' da tema-serata.css e non produceva piu' alcun effetto.
   Verificato togliendolo dal CSSOM a runtime e confrontando font-size/padding/gap
   di nome, btn-quick, quick-bids-row e btn-rilancia nelle DUE viste per tutti e
   QUATTRO i temi: nessuna differenza.
   Le tre righe Admin invece NON sono morte — la nota di debito dava l'intero
   blocco per rimovibile, ed era sbagliata: togliendole cambia davvero il tasto
   RILANCIA dell'Admin (misurato). Restano. */
@media (min-width:901px){
  body.layout-admin .asta-row-puja .cc-nome{
    font-size:1.3rem!important;
  }
  body.layout-admin .asta-row-puja .quick-bids-row{
    gap:10px!important;
  }
  body.layout-admin .asta-row-puja .btn-rilancia{
    padding:9px 8px!important;font-size:.85rem!important;
  }
}

/* ── 2) Campo Anteprima — RISCRITTA DA ZERO (2026-08-13, 2a passata):
   la catena precedente (perspective + rotateX sul campo + rotateX opposto e
   backface-visibility:hidden sulla carta, dentro piu' livelli di
   transform-style:preserve-3d annidati, con perspective molto estrema)
   e' risultata FRAGILE: in alcuni browser il calcolo combinato della
   matrice 3D arrotonda al limite e fa percepire la carta come "di spalle"
   (quindi invisibile per backface-visibility:hidden) finche' l'hover non
   sposta abbastanza i valori da far ricadere il calcolo dalla parte giusta.
   Anche le vecchie regole con selettore :nth-child(even) (rimaste da un
   tentativo precedente) hanno specificita' PIU' ALTA di un semplice
   ".ant-slot3d .ant-card" e vincevano comunque sulle carte pari, aggiungendo
   una rotazione extra non compensata: la causa vera dell'effetto "gomma".
   Soluzione definitiva, robusta per costruzione (nessuna dipendenza da
   compensazioni 3D incrociate, quindi nessun rischio di "carta invisibile"):
   il CAMPO diventa un trapezio in puro 2D (clip-path, nessuna rotazione),
   le CARTE restano sempre piatte e sempre visibili (transform:none), la
   sensazione di profondita' arriva da un leggero rialzo statico (translateY)
   piu' l'ombra di contatto gia' esistente sotto — esattamente come le carte
   di riferimento FIFA: anche quelle non sono davvero ruotate in 3D, sono
   piatte e appoggiate su uno sfondo che simula la profondita'. */
.ant-pitch-stage{perspective:none!important}
.ant-pitch.ant-pitch3d{
  transform:none!important;
  clip-path:polygon(9% 0,91% 0,100% 100%,0 100%)!important;
}
.ant-slot3d,
.ant-slot3d:nth-child(even),
.ant-slot3d:nth-child(odd){
  transform:translate(-50%,-50%)!important;
  transform-style:flat!important;
}
.ant-slot3d .ant-card,
.ant-slot3d:nth-child(even) .ant-card,
.ant-slot3d:nth-child(odd) .ant-card,
.ant-slot3d-empty,
.ant-slot3d:nth-child(even) .ant-slot3d-empty{
  transform:translateY(-4px)!important;
  transform-style:flat!important;
  backface-visibility:visible!important;
  opacity:1!important;
}
.ant-slot3d:hover .ant-card,
.ant-slot3d:hover .ant-slot3d-empty{
  transform:translateY(-9px) scale(1.08)!important;
}
@media (max-width:760px){
  .ant-pitch.ant-pitch3d{clip-path:polygon(11% 0,89% 0,100% 100%,0 100%)!important}
}

/* ── 3) Nome sotto la carta: sempre leggibile per chiunque guardi (non solo
   per chi ha creato la formazione) — sfondo pieno dietro al testo invece di
   solo un'ombra, cosi' resta leggibile anche sopra prato chiaro/carte vicine,
   e z-index piu' alto della carta della riga sopra per non finirci mai sotto. ── */
.ant-slot3d-label{
  background:rgba(6,4,16,.74)!important;border-radius:6px!important;
  padding:1px 5px!important;z-index:5!important;
  box-shadow:0 1px 4px rgba(0,0,0,.5)!important;
}

/* ── 4) Nessuna sovrapposizione tra carte: meno "sbalzo" prospettico (punto 2
   sopra riduce già molto l'altezza proiettata di ogni carta) + margine extra
   tra le carte della stessa riga, cosi' anche i nomi hanno sempre spazio. ── */
.ant-slot3d{margin:0}
.ant-card.size-pitch,.ant-slot3d-empty{transform-origin:center bottom}

/* ══════════════════════════════════════════════════════════════════════════
   ══ FIX 2026-08-14: nomi a 2 righe con zoom, campo "tagliato" a triangolo,
      carte troppo piccole in Anteprima ══
   NON tocca .ant-slot3d .ant-card / .ant-slot3d-empty (visibilita' e transform
   delle carte, confermata funzionante dall'utente) — solo dimensioni carta,
   forma del campo, avvolgimento del nome. Blocco finale, vince per ordine di
   cascata sulle regole sparse sopra senza doverle rimuovere una per una. ══
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1) Nome SEMPRE su una riga sola, mai tagliato, anche quando lo zoom del
   campo riduce lo spazio: una regola precedente ("Campo vertical
   reglamentario") forzava white-space:normal + -webkit-line-clamp:2 +
   word-break:break-word, che spezzava il nome anche a meta' parola (es.
   "Cambia/so"). _antFitTestoLabel() in app.js gia' riduce il font-size finche'
   il nome non entra in una riga sola (misurando lo spazio REALE disponibile) —
   basta ripristinare nowrap perche' quella logica funzioni come deve. ── */
.ant-slot3d-label{
  white-space:nowrap!important;
  overflow:visible!important;
}
/* max-width NON va qui: e' impostato via JS (_antFitTestoLabel, in app.js) in base
   allo spazio REALE misurato tra le carte vicine — un max-width!important in CSS lo
   sovrascriverebbe sempre (le regole inline perdono contro !important in CSS) e la
   riduzione automatica del font non avrebbe piu' alcun effetto visibile. */
.ant-slot3d-label .ant-slot3d-name-txt{
  display:inline-block!important;
  width:auto!important;margin-left:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;text-overflow:ellipsis!important;
  -webkit-line-clamp:1!important;line-clamp:1!important;
}

/* ── 2) La pastiglia dietro al nome deve coprire IL NOME, non la larghezza dello slot.
   `.ant-slot3d-label` era rimasta a `left:0;width:100%` (regola "Cada etiqueta pertenece
   fisicamente a su slot", piu' sopra): larga quanto la carta e SEMPRE identica, qualunque
   fosse il nome. Il testo pero' vive in uno span `width:auto` con l'etichetta a
   `overflow:visible`, quindi i nomi lunghi uscivano dai due lati della pastiglia — misurato
   in browser a 560px: pastiglia sempre 42.3px, CARNISECCHI 62.5px (+20.2), THORSTVEDT +15.3,
   RASPADORI +11.0; e i nomi corti (DODO' 27px) si prendevano una pastiglia molto piu' larga
   del testo. Sul tema "sala-giochi" la pastiglia e' un cartellino BIANCO su prato chiaro e
   il difetto salta all'occhio; negli altri temi e' scura su fondo scuro e si notava meno,
   ma c'era ugualmente.
   Con `width:max-content` l'etichetta si stringe esattamente sul testo e resta centrata
   sullo slot (left:50% + translateX(-50%) al posto di left:0 + width:100%). NON serve
   nessun limite di larghezza qui: e' _antFitTestoLabel() a ridurre il font finche' il nome
   entra nello spazio misurato fra le carte vicine, quindi l'etichetta non puo' comunque
   invadere quella del vicino.
   Solo le etichette col NOME: quelle degli slot vuoti contengono badge di ruolo
   (`:has(.badge-ruolo)`, display:flex + flex-wrap) e con max-content un ruolo multiplo tipo
   "T/A/Pc" smetterebbe di andare a capo, allargandosi oltre lo slot. Restano come sono. ── */
.ant-slot3d-label:has(.ant-slot3d-name-txt){
  left:50%!important;
  width:max-content!important;max-width:none!important;
  transform:translateX(-50%)!important;
}

/* ── 2) Forma del campo SEMPRE intera, mai "tagliata"/triangolare: rimosso
   il clip-path a trapezio (si notava soprattutto riducendo lo zoom) — resta
   un rettangolo pieno con angoli smussati, stessa estetica delle linee bianche
   gia' disegnate dall'SVG interno (che non tocca). ── */
.ant-pitch.ant-pitch3d{
  clip-path:none!important;
  aspect-ratio:5 / 7!important;
}

/* ── 3) Carte piu' grandi sul campo, stessa griglia di posizionamento
   (ANT_LAYOUT/ANT_Y5/ANT_Y4 in app.js non toccati): solo la dimensione della
   carta cresce (+~18%), le distanze relative tra slot restano identiche,
   quindi niente sovrapposizioni — verificato che il gap verticale minimo tra
   righe (~20% dell'altezza campo) resta piu' largo dell'altezza della carta
   anche con questa dimensione maggiore. ── */
.ant-slot3d{width:14.5cqw;height:20cqw}
.ant-card.size-pitch,.ant-slot3d-empty{width:14.5cqw!important;height:20cqw!important}
@media (max-width:760px){
  .ant-slot3d,.ant-card.size-pitch,.ant-slot3d-empty{width:15cqw!important;height:20.7cqw!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   ══ FIX 2026-08-14 (2): Timer di puja "tagliato"/scomposto ══
   Causa reale: #timer-wrap contiene 3 elementi in un flex-column (ring SVG,
   pallina decorativa .timer-ball, numero+etichetta .timer-inner) ma NON
   esisteva in nessun file CSS una sola regola per .timer-ball o .timer-inner:
   di default restavano quindi impilati IN FILA sotto il cerchio invece che
   centrati sopra di esso, e il contenitore aveva overflow:hidden (rimosso
   sopra) che tagliava la parte che non ci stava piu'. Risultato visivo:
   "anello a metà" scollegato dal numero. Soluzione robusta (una sola causa,
   una sola correzione): pallina e numero diventano assoluti, centrati sul
   cerchio, che resta l'unico elemento "in flusso" — il contenitore si
   dimensiona quindi esattamente come il cerchio, senza bisogno di clip. ══
   ══════════════════════════════════════════════════════════════════════════ */
.timer-ring{display:block}
.timer-ball{
  position:absolute!important;top:0;left:50%;
  transform:translate(-50%,-50%)!important;
  width:20%;height:20%;z-index:3;pointer-events:none;
}
.timer-ball-svg{width:100%;height:100%;display:block}
.timer-inner{
  position:absolute!important;top:50%;left:50%;
  transform:translate(-50%,-50%)!important;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;z-index:2;pointer-events:none;width:74%;
}
.timer-number{line-height:1}
.timer-label-text{white-space:normal;word-break:break-word}



/* FIX: In Admin view, always place the timer above the rilancio box using CSS Grid */
body.layout-admin .asta-live-layout:has(#tab-anteprima.drawer-open) .asta-row-puja {
    display: grid !important;
    grid-template-columns: 1fr max-content !important;
    grid-template-areas:
        "card timer"
        "card rilancio" !important;
    gap: 10px !important;
    align-items: center !important;
}
body.layout-admin .asta-live-layout:has(#tab-anteprima.drawer-open) .asta-row-puja .card-timer-group {
    display: contents !important;
}
body.layout-admin .asta-live-layout:has(#tab-anteprima.drawer-open) .asta-row-puja .chiamata-card {
    grid-area: card !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
}
body.layout-admin .asta-live-layout:has(#tab-anteprima.drawer-open) .asta-row-puja .timer-ring-container {
    grid-area: timer !important;
    justify-self: center !important;
    margin-bottom: -5px !important;
}
body.layout-admin .asta-live-layout:has(#tab-anteprima.drawer-open) .asta-row-puja .rilancio-box {
    grid-area: rilancio !important;
    margin: 0 !important;
    max-width: 240px !important;
}
body.layout-admin .asta-live-layout:has(#tab-anteprima.drawer-open) .asta-row-puja .cc-nome {

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
.asta-row-panels {
    z-index: 10 !important;
    position: relative;
}

/* Fix per i bottoni RIAPRI: quando l'Anteprima laterale è aperta lo spazio si restringe, 
   i bottoni si schiacciano, il testo va a capo e l'altezza aumenta (facendoli sbordare).
   Li impiliamo in verticale e li rendiamo più snelli per non aumentare l'altezza totale. */
.asta-live-layout:has(#tab-anteprima.drawer-open) .riapri-row {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 3px;
}
.asta-live-layout:has(#tab-anteprima.drawer-open) .riapri-row .btn {
  min-width: 0;
  width: 100%;
  padding: 4px;
  font-size: 0.68rem;
  line-height: 1;
  white-space: nowrap;
}

/* Ottimizza i bottoni header Admin quando Anteprima stringe il pannello */
.asta-live-layout:has(#tab-anteprima.drawer-open) .admin-header-actions .btn {
  padding: 4px 6px;
  font-size: 0.65rem;
  flex: 1; /* Si allargano per riempire la riga se vanno a capo */
  text-align: center;
}
.asta-live-layout:has(#tab-anteprima.drawer-open) .admin-header-actions {
  width: 100%; /* Forza l'andata a capo sotto al badge */
  justify-content: space-between;
}

/* ═══════════════════════════════════════════════════════════════════
   MIGLIORAMENTI PREMIUM "SERATA D'ASTA" (Richiesta Utente)
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Anteprima Pitch: Da Verde Neon Tron a Verde Smeraldo Scuro Elegante */
html:not([data-tema]) .ant-pitch.ant-pitch3d,
html[data-tema="serata"] .ant-pitch.ant-pitch3d {
  background: linear-gradient(135deg, #091C14 0%, #06120D 100%) !important;
  border-color: rgba(255, 176, 74, 0.15) !important;
  box-shadow: 0 0 30px rgba(0,0,0,0.5), inset 0 0 50px rgba(255,176,74,0.03) !important;
}
html:not([data-tema]) .ant-pitch.ant-pitch3d::before,
html[data-tema="serata"] .ant-pitch.ant-pitch3d::before {
  border-color: rgba(255,176,74,0.1) !important;
  background: rgba(255,176,74,0.02) !important;
}
html:not([data-tema]) .ant-field-markings rect,
html:not([data-tema]) .ant-field-markings path,
html:not([data-tema]) .ant-field-markings circle,
html[data-tema="serata"] .ant-field-markings rect,
html[data-tema="serata"] .ant-field-markings path,
html[data-tema="serata"] .ant-field-markings circle {
  stroke: rgba(255, 176, 74, 0.35) !important;
  filter: drop-shadow(0 0 2px rgba(255,176,74,0.2)) !important;
}
html:not([data-tema]) .ant-slot3d-empty,
html[data-tema="serata"] .ant-slot3d-empty {
  border-color: rgba(255, 176, 74, 0.25) !important;
  background: rgba(10, 20, 15, 0.6) !important;
  box-shadow: inset 0 0 10px rgba(255, 176, 74, 0.05) !important;
}
html:not([data-tema]) .ant-slot3d:hover .ant-slot3d-empty,
html[data-tema="serata"] .ant-slot3d:hover .ant-slot3d-empty {
  border-color: var(--gold) !important;
}

/* 2. Watermark sul pannello vuoto "In attesa..." */
.chiamata-card:has(.chiamata-stato) {
  background-image: 
    radial-gradient(circle at center, rgba(255, 176, 74, 0.03) 0%, transparent 65%),
    repeating-linear-gradient(45deg, transparent, transparent 15px, rgba(255,255,255,0.015) 15px, rgba(255,255,255,0.015) 30px) !important;
}
.chiamata-stato {
  color: var(--text-muted) !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.05em;
}

/* 3. Rimozione effetto zebra: sfondo uniforme per tutte le righe */
.liberi-list li,
.storico-list li {
  background: rgba(0, 0, 0, 0.25) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.liberi-list li:hover,
.storico-list li:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* 4. Ammorbidire le etichette morse (Fasce FantaLab) per non farle "urlare" troppo */
.l-strategia-badge {
  filter: saturate(0.6) brightness(0.85);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* 5. Pulsanti principali più invitanti (Lieve glow dorato/verde) */
.btn-success {
  box-shadow: 0 4px 15px rgba(0, 200, 83, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
#btn-estrai {
  box-shadow: 0 4px 15px rgba(255, 176, 74, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MIGLIORAMENTI UX "SERATA D'ASTA" (Richiesta Utente)
   ═══════════════════════════════════════════════════════════════════ */

/* Tipografia numeri: usare tabular-nums per evitare che i budget ballino, 
   e forzarla su display font forte */
.sq-crediti,
.crediti-badge,
.libero-costo,
.storico-prezzo,
.cc-offerta,
.timer-number {
  font-variant-numeric: tabular-nums !important;
}

/* Indicatore chiaro e pulsante per l'offerente attuale nella lista a sinistra */
@keyframes offerente-pulse {
  0% { box-shadow: inset 20px 0 30px -20px rgba(255,176,74,0), 0 0 0 0 rgba(255,176,74,0.3); border-left-color: rgba(255,176,74,1); }
  50% { box-shadow: inset 40px 0 50px -20px rgba(255,176,74,0.15), 0 0 0 5px rgba(255,176,74,0); border-left-color: rgba(255,200,120,1); }
  100% { box-shadow: inset 20px 0 30px -20px rgba(255,176,74,0), 0 0 0 0 rgba(255,176,74,0); border-left-color: rgba(255,176,74,1); }
}

html:not([data-tema]) .sidebar-squadra.offerente-attuale,
html[data-tema="serata"] .sidebar-squadra.offerente-attuale {
  animation: offerente-pulse 1.8s ease-in-out infinite !important;
  background: linear-gradient(90deg, rgba(255,176,74,0.15), rgba(255,176,74,0.02)) !important;
}

html:not([data-tema]) .sidebar-squadra.offerente-attuale .sq-nome,
html[data-tema="serata"] .sidebar-squadra.offerente-attuale .sq-nome {
  text-shadow: 0 0 8px rgba(255, 176, 74, 0.4) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   MIGLIORAMENTI UX "ON FIRE" E DETTAGLI (Richiesta Utente)
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Latido per Budget Critico (Sirena rossa visiva) */
@keyframes crit-pulse {
  0% { opacity: 1; box-shadow: 0 0 8px var(--danger); }
  50% { opacity: 0.5; box-shadow: 0 0 2px var(--danger); }
  100% { opacity: 1; box-shadow: 0 0 8px var(--danger); }
}
.budget-progress-fill.crit {
  animation: crit-pulse 1.2s ease-in-out infinite !important;
}

/* 2. Scrollbars Premium per Tema Base (Ambra/Slate) */
html:not([data-tema]) ::-webkit-scrollbar,
html[data-tema="serata"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
html:not([data-tema]) ::-webkit-scrollbar-track,
html[data-tema="serata"] ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}
html:not([data-tema]) ::-webkit-scrollbar-thumb,
html[data-tema="serata"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 176, 74, 0.2);
  border-radius: 4px;
}
html:not([data-tema]) ::-webkit-scrollbar-thumb:hover,
html[data-tema="serata"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 176, 74, 0.4);
}

/* 3. Connessione visiva Hover bottone ESTRAI -> Card Vuota */
body:has(#btn-estrai:hover) .chiamata-card:has(.chiamata-stato) {
  background-image: 
    radial-gradient(circle at center, rgba(255, 176, 74, 0.08) 0%, transparent 65%),
    repeating-linear-gradient(45deg, transparent, transparent 15px, rgba(255,255,255,0.015) 15px, rgba(255,255,255,0.015) 30px) !important;
  box-shadow: inset 0 0 20px rgba(255,176,74,0.1), 0 5px 15px rgba(0,0,0,0.3) !important;
  border-color: rgba(255,176,74,0.2) !important;
  transform: scale(1.005);
  transition: all 0.2s ease-out;
}
.chiamata-card:has(.chiamata-stato) {
  transition: all 0.2s ease-out;
}

/* 4. Chiamata-card dentro la puja: COMPLETAMENTE TRASPARENTE per evitare i due toni di blu */
html:not([data-tema]) .puja-panel-slot .chiamata-card,
html[data-tema="serata"] .puja-panel-slot .chiamata-card,
html:not([data-tema]) body.layout-admin .asta-row-puja .chiamata-card,
html[data-tema="serata"] body.layout-admin .asta-row-puja .chiamata-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 5. Migliorare il box del commento per renderlo leggibile */
.cc-commento-preview {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 176, 74, 0.3) !important;
  color: var(--text-secondary) !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
}

@keyframes offerente-pop { 0% { transform: scale(1.03) translateY(2px); opacity: 0.5; filter: brightness(1.2); } 100% { transform: scale(1) translateY(0); opacity: 1; filter: brightness(1); } }

/* ══ BANNER GLOBALE E STATO PAUSA ASTA (SVINCOLO / POST-ASTA) ══ */
.asta-pausa-banner {
  background: linear-gradient(90deg, #991B1B, #DC2626, #B91C1C);
  color: #FFFFFF;
  padding: 10px 18px;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  box-shadow: 0 4px 20px rgba(220, 38, 38, 0.45);
  border-bottom: 2px solid rgba(255, 255, 255, 0.25);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  animation: pulsePausaBanner 2.2s infinite ease-in-out;
}
.asta-pausa-banner.hidden {
  display: none !important;
}
@keyframes pulsePausaBanner {
  0%, 100% { opacity: 0.98; transform: translateY(0); }
  50% { opacity: 0.88; transform: translateY(-1px); }
}

.chiamata-card.in-pausa {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 24px 28px !important;
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.16), rgba(17, 24, 39, 0.85)) !important;
  border: 2px dashed rgba(239, 68, 68, 0.7) !important;
  border-radius: 14px !important;
  min-height: 140px !important;
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.25) !important;
}
.cc-pausa-svincolo {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.cc-pausa-badge {
  background: #DC2626;
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 14px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.5);
}
.cc-pausa-squadra {
  font-size: 1.35rem;
  font-weight: 900;
  color: #FFFFFF;
  margin: 4px 0 0;
}
.cc-pausa-squadra strong {
  color: #FCD34D;
  text-shadow: 0 0 12px rgba(252, 211, 77, 0.4);
}
.cc-pausa-desc {
  font-size: 0.95rem;
  color: #E2E8F0;
  max-width: 600px;
  line-height: 1.35;
  margin: 0;
}
.cc-pausa-desc strong {
  color: #FFFFFF;
}
.cc-pausa-attesa {
  font-size: 0.84rem;
  color: #94A3B8;
  margin-top: 4px;
}

/* Impostazioni Admin → Svincola giocatori */
.ac-svincola{margin-top:8px}
.ac-svincola select{width:100%;margin-bottom:8px}
.ac-sv-lista{max-height:260px;overflow-y:auto}
.ac-sv-riga{display:flex;align-items:center;gap:8px;padding:6px 8px;margin-bottom:4px;border-radius:7px;background:var(--bg-main);cursor:pointer}
.ac-sv-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* .ac-sv-riga davanti: la regola globale input[type=number] (0,1,1) batte una classe sola (0,1,0)
   e allargava il campo a tutta la riga, lasciando il nome del giocatore a 0px. */
.ac-sv-riga .ac-sv-crediti{width:72px;flex-shrink:0;padding:6px 8px}