/* ============================================================
   LA REGIA DEL MODERATORE
   ============================================================ */
body.regia { min-height: 100vh; background: radial-gradient(60% 50% at 85% 0%, rgba(200,16,46,0.16), transparent 70%), radial-gradient(50% 40% at 0% 0%, rgba(201,162,39,0.12), transparent 70%), #07080B; font-size: 15px; }
.nascosto { display: none !important; }

/* barra in alto */
.barra { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 20px; background: rgba(7,8,11,0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea); }
.barra .marchio { display: flex; align-items: center; gap: 12px; margin-right: 6px; }
.barra .marchio img { width: 40px; height: 40px; object-fit: contain; }
.barra .marchio small { display: block; font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--oro); font-weight: 800; }
.barra .marchio b { display: block; font-family: var(--fut); font-size: 26px; line-height: 1; text-transform: uppercase; padding-top: 2px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.75); white-space: nowrap; }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; }
.chip.ok i { background: var(--verde); box-shadow: 0 0 0 4px rgba(34,197,94,0.2); }
.chip.no i { background: #f59e0b; }
.chip.bottone { cursor: pointer; }
.chip.bottone:hover { background: rgba(255,255,255,0.1); }
.segmenti { display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.segmenti button { padding: 7px 14px; border-radius: 9px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.65); }
.segmenti button:hover:not(:disabled) { color: #fff; }
.segmenti button.on { background: var(--pulsante-oro); color: #1A1407; }
.segmenti button:disabled { opacity: 0.3; cursor: not-allowed; }
.segmenti .etichetta { padding: 7px 8px 7px 10px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oro); font-weight: 800; align-self: center; }
.spazio { flex: 1; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 11px; font-weight: 700; font-size: 14px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); transition: background 0.15s, transform 0.1s, opacity 0.15s; white-space: nowrap; }
.btn:hover:not(:disabled) { background: rgba(255,255,255,0.13); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn.oro { background: var(--pulsante-oro); color: #1A1407; border-color: transparent; box-shadow: 0 8px 24px rgba(201,162,39,0.25); }
.btn.rosso { background: linear-gradient(180deg, #dc2626, #991b1b); border-color: rgba(252,165,165,0.4); }
.btn.piccolo { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
.btn.conferma { background: #b91c1c !important; color: #fff !important; }
.btn svg { width: 16px; height: 16px; }

.avviso-esempio { margin: 14px 20px 0; padding: 12px 16px; border-radius: 12px; background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.4); color: #fde68a; font-size: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* le tre colonne */
.tavolo { display: grid; grid-template-columns: 310px minmax(0, 1fr) 360px; gap: 16px; padding: 16px 20px 40px; align-items: start; }
@media (max-width: 1180px) { .tavolo { grid-template-columns: 290px minmax(0, 1fr); } .col-squadre { grid-column: 1 / -1; } }
@media (max-width: 820px) { .tavolo { grid-template-columns: 1fr; } }
.blocco { border-radius: 18px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); padding: 16px; }
.blocco + .blocco { margin-top: 14px; }
.blocco h3 { display: flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro); font-weight: 800; margin-bottom: 12px; }
.blocco h3 .conta { margin-left: auto; color: rgba(255,255,255,0.5); letter-spacing: 0.04em; font-size: 12px; }

/* urna */
.cats { display: flex; flex-wrap: wrap; gap: 6px; }
.cats button { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 7px; border-radius: 10px; font-size: 13px; font-weight: 700; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.cats button.on { border-color: var(--oro); background: rgba(229,193,88,0.14); box-shadow: 0 0 0 1px var(--oro); }
.cats button:disabled { opacity: 0.35; }
.cats button .n { font-family: var(--fut); font-size: 17px; padding-top: 2px; color: rgba(255,255,255,0.7); }
.gira-box { display: flex; flex-direction: column; align-items: center; padding: 20px 0 6px; }
.gira { position: relative; width: 200px; height: 200px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.gira::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #9c7a16, #FFF1B8, #E5C158, #C8102E, #9c7a16, #FFF1B8, #E5C158, #9c7a16); animation: gira-anello 6s linear infinite; box-shadow: 0 0 40px rgba(229,193,88,0.35); }
.gira::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #3A3220, #0B0A07 70%); box-shadow: inset 0 0 0 2px rgba(229,193,88,0.4); }
.gira span { position: relative; z-index: 1; text-align: center; }
.gira b { display: block; font-family: var(--fut); font-size: 64px; line-height: 0.9; padding-top: 8px; text-transform: uppercase; }
.gira small { display: block; font-size: 11px; letter-spacing: 0.24em; font-weight: 800; color: rgba(229,193,88,0.8); text-transform: uppercase; }
.gira:hover:not(:disabled)::before { animation-duration: 1.6s; }
.gira:active:not(:disabled) { transform: scale(0.96); }
.gira:disabled { cursor: not-allowed; }
.gira:disabled::before { filter: grayscale(1) brightness(0.45); animation: none; box-shadow: none; }
.gira:disabled b { opacity: 0.35; }
.gira.gira-ora::before { animation: gira-anello 0.35s linear infinite; }
.gira.gira-ora b { animation: pulsa-gira 0.5s ease-in-out infinite; }
@keyframes gira-anello { to { transform: rotate(360deg); } }
@keyframes pulsa-gira { 50% { transform: scale(1.08); } }
.gira-nota { margin-top: 12px; font-size: 13px; color: rgba(255,255,255,0.6); text-align: center; min-height: 18px; }
.cerca { width: 100%; padding: 9px 12px; border-radius: 10px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.12); font-size: 14px; outline: none; }
.cerca:focus { border-color: var(--oro); }
.elenco { margin-top: 10px; max-height: 360px; overflow: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 2px; }
.elenco .voce { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; font-size: 14px; }
.elenco .voce:hover { background: rgba(255,255,255,0.05); }
.elenco .voce .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elenco .voce .btn { opacity: 0; }
.elenco .voce:hover .btn, .elenco .voce .btn.conferma { opacity: 1; }
.elenco .vuoto { padding: 14px 6px; color: rgba(255,255,255,0.4); font-size: 13px; text-align: center; }

/* asta in corso */
.palco-asta { min-height: 520px; }
.vuota { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 460px; gap: 14px; color: rgba(255,255,255,0.55); }
.vuota .grande { font-family: var(--fut); font-size: 44px; color: #fff; text-transform: uppercase; line-height: 1; }
.ultima { margin-top: 18px; padding: 14px 18px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; color: #fff; }
.ultima i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.testa-asta { display: flex; gap: 18px; align-items: center; }
.testa-asta .mini { width: 108px; flex-shrink: 0; }
.testa-asta .tit { min-width: 0; flex: 1; }
.testa-asta .tit .pills { display: flex; gap: 8px; flex-wrap: wrap; }
.testa-asta .tit .pills span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); text-transform: uppercase; }
.testa-asta .tit .pills .vivo { background: rgba(239,68,68,0.16); border-color: rgba(239,68,68,0.5); color: #fecaca; }
.testa-asta .tit h2 { margin-top: 8px; font-family: var(--fut); font-size: 52px; line-height: 0.9; text-transform: uppercase; padding-top: 4px; overflow-wrap: anywhere; }
.testa-asta .tit .nota { margin-top: 6px; font-size: 13px; color: #fde68a; }
.quadro { margin-top: 16px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 16px 18px; border-radius: 16px; background: rgba(0,0,0,0.3); border: 1px solid var(--linea); }
.quadro .cifra small { display: block; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); font-weight: 800; }
.quadro .cifra b { display: block; font-family: var(--fut); font-size: 84px; line-height: 0.85; padding-top: 8px; }
.quadro .cifra b.base { color: rgba(255,255,255,0.3); }
.quadro .guida { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; min-height: 76px; }
.quadro .guida.piena { background: linear-gradient(100deg, color-mix(in srgb, var(--maglia) 80%, white) 0%, var(--maglia) 35%, color-mix(in srgb, var(--maglia) 55%, black) 100%); box-shadow: 0 0 0 2px rgba(229,193,88,0.7); color: #fff; }
.quadro .guida.piena[data-chiara] { color: #1A1407; }
.quadro .guida b { font-family: var(--fut); font-size: 38px; line-height: 0.9; text-transform: uppercase; padding-top: 4px; }
.quadro .guida span { display: block; font-size: 13px; opacity: 0.85; font-weight: 700; }
.quadro .guida.attesa { color: rgba(255,255,255,0.45); border: 1px dashed rgba(255,255,255,0.15); }
.quadro .tempo { margin-left: auto; font-family: var(--fut); font-size: 40px; padding-top: 4px; }
.quadro .tempo.finito { color: #f87171; }

.importo { margin-top: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.importo label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro); font-weight: 800; margin-right: 4px; }
.importo input { width: 120px; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,0.4); border: 2px solid rgba(229,193,88,0.5); font-family: var(--fut); font-size: 38px; line-height: 1; text-align: center; outline: none; -moz-appearance: textfield; }
.importo input::-webkit-outer-spin-button, .importo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.importo input:focus { border-color: var(--oro); box-shadow: 0 0 0 4px rgba(229,193,88,0.2); }
.importo .meno, .importo .piu { width: 46px; height: 52px; border-radius: 12px; font-size: 26px; font-weight: 700; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); }
.importo .rapidi { display: flex; gap: 6px; margin-left: 6px; }
.importo .rapidi button { padding: 10px 12px; border-radius: 10px; font-weight: 800; font-size: 14px; background: rgba(229,193,88,0.12); border: 1px solid rgba(229,193,88,0.35); color: var(--oro); }
.importo .rapidi button:hover { background: rgba(229,193,88,0.22); }
.suggerimento { margin-top: 6px; font-size: 12.5px; color: rgba(255,255,255,0.45); }

.offerenti { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.offerente { position: relative; text-align: left; padding: 10px 12px 10px 18px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); overflow: hidden; transition: transform 0.1s, background 0.15s; min-height: 64px; }
.offerente::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--maglia); }
.offerente:hover:not(:disabled) { background: color-mix(in srgb, var(--maglia) 22%, rgba(255,255,255,0.05)); }
.offerente:active:not(:disabled) { transform: scale(0.97); }
.offerente b { display: block; font-family: var(--fut); font-size: 24px; line-height: 1; text-transform: uppercase; padding-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offerente b.lungo { font-size: 19px; padding-top: 5px; }
.offerente span { display: block; margin-top: 4px; font-size: 12px; color: rgba(255,255,255,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offerente span em { font-style: normal; color: var(--oro); font-weight: 800; }
.offerente.troppo span em { color: #f87171; }
.offerente.guida { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro), 0 0 24px rgba(229,193,88,0.25); background: color-mix(in srgb, var(--maglia) 22%, rgba(255,255,255,0.05)); }
.offerente.guida::after { content: '★'; position: absolute; right: 10px; top: 8px; color: var(--oro); }
.offerente:disabled { opacity: 0.35; cursor: not-allowed; }
.offerente:disabled span { color: #fca5a5; }

.azioni { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.azioni .aggiudica { padding: 14px 22px; font-size: 17px; font-weight: 800; border-radius: 14px; }
.azioni .chiama { padding: 14px 18px; font-size: 16px; border-radius: 14px; }
.storico-regia { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.storico-regia span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.05); font-size: 12.5px; color: rgba(255,255,255,0.7); }
.storico-regia span i { width: 9px; height: 9px; border-radius: 50%; }
.storico-regia span b { color: var(--oro); }

/* squadre */
.squadra-r { border-radius: 14px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); overflow: hidden; }
.squadra-r + .squadra-r { margin-top: 8px; }
.squadra-r summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 12px; position: relative; }
.squadra-r summary::-webkit-details-marker { display: none; }
.squadra-r summary::before { content: ''; width: 14px; height: 36px; border-radius: 5px; background: var(--maglia); flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.squadra-r summary .nm { flex: 1; min-width: 0; }
.squadra-r summary .nm b { display: block; font-family: var(--fut); font-size: 22px; line-height: 1; text-transform: uppercase; padding-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.squadra-r summary .nm span { display: block; font-size: 12px; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.squadra-r summary .nr { text-align: right; font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.3; }
.squadra-r summary .nr b { font-family: var(--fut); font-size: 22px; color: #fff; }
.squadra-r .dentro { padding: 2px 12px 12px; }
.squadra-r .gioc { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid rgba(255,255,255,0.05); font-size: 13.5px; }
.squadra-r .gioc .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.squadra-r .gioc input { width: 58px; padding: 3px 6px; border-radius: 7px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.14); font-size: 13px; text-align: right; color: var(--oro); font-weight: 700; }
.squadra-r .gioc select { max-width: 92px; padding: 3px 4px; border-radius: 7px; background: #111; border: 1px solid rgba(255,255,255,0.14); font-size: 12px; }
.squadra-r .gioc .btn { padding: 3px 7px; }
.squadra-r .piede { display: flex; gap: 6px; margin-top: 10px; }
.vendite-log { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; }
.vendite-log div { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.vendite-log div i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.vendite-log div .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vendite-log div b { color: var(--oro); font-family: var(--fut); font-size: 17px; padding-top: 2px; }

/* impostazioni */
.modale { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); overflow: auto; }
.modale .finestra { width: min(980px, 100%); border-radius: 20px; background: #0D0E12; border: 1px solid var(--linea); box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.modale .testa { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.modale .testa h2 { font-family: var(--fut); font-size: 30px; text-transform: uppercase; padding-top: 4px; }
.schede { display: flex; gap: 4px; padding: 10px 16px 0; border-bottom: 1px solid rgba(255,255,255,0.08); flex-wrap: wrap; }
.schede button { padding: 10px 14px; font-weight: 700; font-size: 14px; color: rgba(255,255,255,0.55); border-bottom: 2px solid transparent; }
.schede button.on { color: var(--oro); border-bottom-color: var(--oro); }
.corpo-modale { padding: 20px; }
.campi { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.campo label { display: block; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: rgba(255,255,255,0.6); margin-bottom: 6px; }
.campo input, .campo select, .campo textarea, .tabella input, .tabella select { width: 100%; padding: 9px 11px; border-radius: 10px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.14); font-size: 14px; outline: none; }
.campo input:focus, .campo textarea:focus, .tabella input:focus { border-color: var(--oro); }
.campo .aiuto { margin-top: 5px; font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.4; }
.campo textarea { min-height: 220px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.5; resize: vertical; }
select option { background: #111; }
.tabella { width: 100%; border-collapse: collapse; }
.tabella th { text-align: left; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); padding: 6px 6px; font-weight: 800; }
.tabella td { padding: 4px 6px; vertical-align: middle; }
.elenco-g { max-height: 440px; overflow: auto; margin-top: 10px; }
.elenco-g thead th { position: sticky; top: 0; z-index: 1; background: #17140f; }
.tabella input.corto { width: 76px; text-align: center; font-weight: 700; }
.tabella .colore-campione { width: 26px; height: 26px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); }
.tabella .colore-campione.bloccata { display: grid; place-items: center; color: #E5C158; }
.tabella .colore-campione .lucchetto { width: 16px; height: 16px; }
.riquadro { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
.riquadro h4 { font-size: 13px; margin-bottom: 8px; color: var(--oro); letter-spacing: 0.06em; }
.riquadro p { font-size: 13.5px; color: rgba(255,255,255,0.65); line-height: 1.5; }
.riga-bottoni { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.anteprima { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.5; }
.anteprima .err { color: #fca5a5; }
code, .codice { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 5px; }
textarea.codice { width: 100%; min-height: 160px; padding: 10px; border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; color: #e5e7eb; }

/* messaggi */
.messaggi { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.messaggio { padding: 12px 18px; border-radius: 12px; background: #1f2937; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 12px 30px rgba(0,0,0,0.5); font-size: 14px; font-weight: 600; animation: msg 0.25s ease-out; max-width: 90vw; }
.messaggio.errore { background: #7f1d1d; border-color: #fca5a5; }
.messaggio.ok { background: #14532d; border-color: #86efac; }
@keyframes msg { from { transform: translateY(12px); opacity: 0; } }

/* mentre gira il rullo l'anello resta acceso anche se il pulsante e bloccato */
.gira.gira-ora:disabled::before { filter: none; animation: gira-anello 0.35s linear infinite; box-shadow: 0 0 40px rgba(229,193,88,0.45); }
.gira.gira-ora:disabled b { opacity: 1; }