.dashboard-container { max-width: 1500px; margin: 2rem auto; width: 95%; }

/* La schermata di impostazioni (prima di creare la stanza) contiene solo un
   form centrato largo al massimo 400px: lasciarla espandere fino ai 1500px
   di .dashboard-container (ereditati per via della schermata di gioco vera
   e propria, che invece ha bisogno di tutto quello spazio) la faceva
   sembrare vuota ai lati su schermi larghi. La restringiamo qui, vicino
   alle proporzioni di index.html/tutorial.html, senza toccare #lobby-screen
   (codice stanza + QR + tabella giocatori) né #game-screen (tabellone),
   che restano larghi quanto il contenitore. */
#setup-screen {
    /* Leggermente più largo del vecchio 550px fisso: con l'h1 globale al suo
       font-size massimo (schermi larghi, es. 4K), "IMPOSTAZIONE PARAMETRI" in
       maiuscolo con letter-spacing occupava quasi tutto lo spazio disponibile
       dentro il padding della card, lasciando un margine così risicato che
       bastava l'arrotondamento dei sub-pixel di uno schermo ad alta densità
       per far uscire leggermente il testo dal bordo arrotondato. */
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
#setup-screen h1 {
    /* Stesso motivo: un pelo meno di letter-spacing sul titolo più lungo del
       sito riduce ulteriormente il rischio di quel margine risicato, senza
       cambiare visibilmente lo stile (resta comunque spaziato). */
    letter-spacing: 1px;
}
.room-info-card { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.code-display { font-size: 4rem; font-weight: 900; letter-spacing: 5px; color: var(--accent-color); text-align: center; }
#qrcode { background: white; padding: 1rem; border-radius: 1rem; }
.players-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; }
.player-card { background: var(--bg-color); padding: 1rem; border-radius: 0.75rem; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--card-border); }

.letter-tile {
    /* Dimensioni pilotabili dall'impostazione "Dimensione numero" del Master
       (js/letter-tiles.js): i valori qui sotto sono il fallback storico. */
    width: var(--letter-tile-size, 80px); height: var(--letter-tile-size, 80px);
    background: #fff; color: #000;
    font-size: var(--letter-tile-font-size, 3rem); font-weight: bold;
    display: flex; justify-content: center; align-items: center;
    border-radius: 0.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    text-transform: uppercase; border: 2px solid #cbd5e1;
    position: relative;
    transition: width 0.3s ease, height 0.3s ease, font-size 0.3s ease;
}
.letter-score {
    position: absolute; bottom: 5px; right: 8px;
    font-size: var(--letter-score-font-size, 1rem); font-weight: bold; color: #64748b;
    transition: font-size 0.3s ease;
}
.timer-wrapper { position: relative; width: 150px; height: 150px; margin: 1.5rem auto; display: none; }
.timer-circle { transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s linear, stroke 0.5s; stroke-dasharray: 408; stroke-dashoffset: 0; }
.timer-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3rem; font-weight: 900; }
.shake-animation { animation: shake-it 0.3s infinite; }
@keyframes shake-it {
    0% { transform: translate(2px, 1px) rotate(0deg); }
    25% { transform: translate(-1px, -2px) rotate(-1deg); }
    50% { transform: translate(-3px, 0px) rotate(1deg); }
    75% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(2px, -1px) rotate(1deg); }
}
/* Animazione di comparsa dall'alto */
.slide-in-top {
    animation: slide-down 0.8s ease-out forwards;
    opacity: 0;
}

@keyframes slide-down {
    0% { transform: translateY(-20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Stile elegante per l'area di revisione (Tema Scuro / Glass) */
#review-area {
    background: rgba(30, 41, 59, 0.85); /* Blu scuro elegante e semi-trasparente */
    backdrop-filter: blur(10px);
    border: 1px solid var(--card-border);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    margin-top: 20px;
    color: #f8fafc;
    width: 100%; /* NUOVO: forza l'area a prendere tutto il nuovo spazio */
    box-sizing: border-box; /* NUOVO: assicura che il padding non allarghi troppo il div */
}

/* Adattiamo anche le schede dei giocatori dentro il riquadro */
#review-list-container .player-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #fff;
    transition: all 0.3s ease;
}

.invalid-word {
    text-decoration: line-through;
    color: #ef4444 !important;
    opacity: 0.5;
}

/* ===== Validazione campi numerici (vedi js/host.js, attachNumberInputValidation) =====
   Applicata a tutti gli <input type="number"> del pannello Host: se il Master
   svuota il campo, mette 0 dove non è ammesso, o un valore negativo/fuori dai
   limiti dichiarati (min/max), il campo trema e sotto compare per qualche
   secondo (durata regolabile da config.json -> inputValidation) una notifica
   rossa che spiega cosa è stato corretto. */
.shake-error {
    animation: shake-input 0.4s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake-input {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}
.input-error-msg {
    display: block;
    color: var(--danger, #ef4444);
    font-weight: bold;
    font-size: 0.85rem;
    margin-top: 5px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}
.input-error-msg.visible {
    max-height: 40px;
    opacity: 1;
}

/* Coriandoli: stile in js/confetti.js (condiviso, 30/09/2026). */

/* Stile per il pannello espandibile.
   Il colore del bordo (e del titolo <h3> dentro il pannello, impostato
   inline pannello per pannello) segue --panel-accent, la stessa tinta del
   bottone che apre quel pannello: coerenza grafica bottone/pannello.
   --panel-accent va impostato via style inline sul singolo div
   ".advanced-panel" (es. style="--panel-accent: #f59e0b;"); se un pannello
   non lo definisce, si torna al vecchio arancione di default. */
.advanced-panel {
    max-height: 600px; /* Abbastanza grande per contenere tutto */
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out, opacity 0.5s ease-in-out;
    background: linear-gradient(145deg, #1a1a1a, #111111);
    border: 1px solid var(--panel-accent, var(--warning));
    border-radius: 8px;
    padding: 20px;
    margin-top: 10px;
    opacity: 1;
    max-height: 850px; /* 1. Aumentiamo lo spazio massimo per far respirare i pannelli */
    overflow-y: auto;  /* 2. LA MAGIA: fa apparire la barra di scorrimento verticale se serve */
    overflow-x: hidden; /* Evita fastidiose barre orizzontali */
}

/* Stato chiuso del pannello */
.advanced-panel.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    border-color: transparent;
    opacity: 0;
    max-height: 0;
    overflow: hidden; /* Questo assicura che da chiuso scompaia tutto perfettamente */
}

/* Oscura e blocca i click se lo switch principale è spento */
.disabled-options {
    opacity: 0.3;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Pulsante Impostazioni Avanzate */
.btn-advanced-settings {
    position: relative; /* ancora per .settings-active-indicator, vedi sotto */
    background: linear-gradient(135deg, #6366f1, #4338ca);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.btn-advanced-settings:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
    filter: brightness(1.1);
}

/* 🎯 INDICATORE "IMPOSTAZIONE ATTIVA/MODIFICATA" — stessa emoji su ogni
   pulsante che apre una tendina di impostazioni (vedi initSettingsPanelIndicators
   in host.js), staccata dal bordo destro del pulsante, con un fondo bianco
   circolare così resta ben leggibile su qualunque colore di sfondo dei vari
   pulsanti. Resta visibile anche a tendina chiusa: è pensata apposta per non
   dover riaprire ogni tendina solo per ricordarsi cosa si è cambiato. */
.settings-active-indicator {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    transform: translateY(-50%) scale(0);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.settings-active-indicator.visible {
    transform: translateY(-50%) scale(1);
}

/* Pannelli categorie che appaiono/scompaiono */
.category-sub-panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    margin-top: 10px;
}

.category-sub-panel.visible {
    max-height: 200px;
    opacity: 1;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Switch stilizzato */
.main-switch-box {
    display: flex;
    align-items: center;
    background: rgba(255, 215, 0, 0.05);
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.switch-text {
    margin-left: 15px;
    font-weight: bold;
    color: #fff;
}

/* Stile per le card delle lingue */
.lang-selector-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.lang-card {
    cursor: pointer;
    position: relative;
}

.lang-card input { display: none; }

.lang-content {
    /* 🎯 Prima era hardcoded a #222 (sempre scuro): col tema chiaro, il testo
       ereditava var(--text-color) scuro su questo sfondo scuro — contrasto
       reale misurato 1.09:1 (soglia leggibilità WCAG minima: 4.5:1), quindi
       la card "Inglese" non selezionata risultava praticamente illeggibile.
       Passata alle variabili del tema, come tutte le altre card del sito. */
    background: var(--card-bg);
    color: var(--text-color);
    padding: 10px;
    text-align: center;
    border-radius: 8px;
    border: 2px solid var(--card-border);
    transition: all 0.3s;
}

.lang-card input:checked + .lang-content {
    border-color: var(--warning);
    background: rgba(255, 215, 0, 0.1);
    transform: scale(1.05);
}

.custom-textarea {
    /* 🎯 Prima era hardcoded scuro (#111/#fff) sempre, in ogni tema: con lo
       sfondo generale chiaro diventava un'isola scura isolata nel pannello.
       Passata alle stesse variabili già usate dalla regola globale
       "input, select" in global.css, per restare coerente col resto dei
       campi della pagina in entrambi i temi. */
    width: 100%;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 10px;
    font-family: inherit;
    transition: border 0.3s, background 0.4s ease, color 0.4s ease;
}

.custom-textarea:focus {
    border-color: var(--warning);
    outline: none;
}

/* Griglia delle categorie: le mettiamo su due colonne per ottimizzare lo spazio */
.categories-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 15px;
}

/* Flexbox per allineare perfettamente la checkbox e il testo sulla stessa riga */
.categories-grid label {
    display: flex;
    align-items: center; /* Centra verticalmente */
    gap: 8px; /* Spazio preciso tra la spunta e la parola */
    cursor: pointer;
    font-size: 0.95rem;
    color: #eee;
}

/* Reset per evitare che la checkbox prenda margini strani dal browser */
.categories-grid input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Zona Drag and Drop per le Impostazioni */
.preset-drop-zone {
    margin-top: 30px;
    padding: 20px;
    border: 2px dashed #4b5563; /* Bordo grigio tratteggiato */
    border-radius: 12px;
    background-color: rgba(31, 41, 55, 0.4); /* Sfondo scuro semitrasparente */
    text-align: center;
    transition: all 0.3s ease;
}

/* Stato attivo quando l'utente trascina il file sopra l'area */
.preset-drop-zone.drag-over {
    border-color: #3b82f6; /* Diventa blu elettrico */
    background-color: rgba(59, 130, 246, 0.1);
    transform: scale(1.02);
}

.preset-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #f3f4f6;
    margin-bottom: 5px;
}

.preset-subtitle {
    font-size: 0.85rem;
    color: #9ca3af;
    margin-bottom: 15px;
}

.preset-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    /* I due bottoni "Salva/Carica Impostazioni" insieme sono più larghi della
       card su schermi stretti: senza flex-wrap finiscono per spingersi a
       vicenda invece di scendere ognuno sulla propria riga. */
    flex-wrap: wrap;
}

/* Stile pulsanti preset */
.btn-preset-save, .btn-preset-load {
    padding: 10px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}

.btn-preset-save {
    background-color: #10b981; /* Verde */
    color: white;
}
.btn-preset-save:hover { background-color: #059669; }

.btn-preset-load {
    background-color: #4b5563; /* Grigio scuro neutro */
    color: white;
}
.btn-preset-load:hover { background-color: #374151; }

/* Stile per nascondere il checkbox di default */
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Stile della "pillola" di sfondo */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .3s;
    border-radius: 24px;
}

/* Stile del pallino bianco */
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Quando è attivo (checked), lo sfondo diventa verde e il pallino scorre a destra */
.toggle-switch input:checked + .toggle-slider {
    background-color: #28a745; /* Verde stile success */
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

/* Variante ridotta "in scala" dello stesso toggle, per i checkbox dentro i
   pannelli a tendina (Limite Giocatori, Chat, Lettere, Filtro Vocabolario,
   Autoplay, Jolly, Bonus Velocità, ecc.): stessa interazione e stessi colori
   del toggle principale, solo più compatta per stare meglio nello spazio più
   stretto dei pannelli. Si usa aggiungendo la classe in più, es:
   <label class="toggle-switch toggle-switch-sm">. */
.toggle-switch-sm {
    width: 34px;
    height: 19px;
}
.toggle-switch-sm .toggle-slider {
    border-radius: 19px;
}
.toggle-switch-sm .toggle-slider:before {
    height: 13px;
    width: 13px;
    left: 3px;
    bottom: 3px;
}
.toggle-switch-sm input:checked + .toggle-slider:before {
    transform: translateX(15px);
}

/* ========================================= */
/* STILI JUKEBOX MASTER                      */
/* ========================================= */

.btn-music {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 1.5rem;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
}

.btn-music:hover {
    background: var(--accent-color);
    transform: scale(1.1);
    border-color: var(--accent-color);
}

.btn-music.active {
    background: var(--success);
    border-color: var(--success);
    box-shadow: 0 0 10px var(--success);
}

/* Stile per la tabella della playlist */
.playlist-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.9rem;
}

.playlist-table th {
    padding: 10px;
    border-bottom: 2px solid rgba(255,255,255,0.1);
    color: var(--warning);
    font-weight: bold;
}

.playlist-table td {
    padding: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.playlist-item:hover {
    background: rgba(255,255,255,0.05);
    cursor: pointer;
}

.playlist-item.playing {
    background: rgba(74, 222, 128, 0.1); /* Verde chiaro trasparente */
    border-left: 3px solid var(--success);
}

/* 🎯 EVO-28: righe della coda trascinabili per riordinarle */
.playlist-item {
    cursor: grab;
}
.playlist-item.dragging {
    opacity: 0.4;
    cursor: grabbing;
}
.playlist-drag-handle {
    opacity: 0.5;
    margin-right: 6px;
    user-select: none;
}

/* Pulsantino elimina brano */
.btn-remove-track {
    background: none;
    border: none;
    color: #ef4444;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.2s;
}
.btn-remove-track:hover {
    transform: scale(1.2);
}

/* Feedback quando si trascina un file audio sopra */
.preset-drop-zone.drag-over {
    background: rgba(219, 39, 119, 0.2) !important;
    border-color: #db2777 !important;
    transform: scale(1.02);
    transition: all 0.2s ease;
}

/* Sblocca il fine corsa per lo slider del volume */
#music-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.2); /* Colore della barra di fondo */
    height: 6px;
    border-radius: 3px;
    padding: 0 !important;      /* Rimuove i margini interni che bloccano il cursore */
    margin: 0;
    outline: none;
}

/* Ottimizzazione del Cursore (Thumb) per Chrome, Safari, Edge e Opera */
#music-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--warning, #db2777); /* Prende il colore pink del jukebox o il warning */
    cursor: pointer;
    transition: transform 0.1s ease;
}

#music-volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2); /* Un leggero effetto zoom al passaggio del mouse */
}

/* Ottimizzazione del Cursore (Thumb) per Firefox */
#music-volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: var(--warning, #db2777);
    cursor: pointer;
    transition: transform 0.1s ease;
}

#music-volume-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
}

#host-chat-messages-list::-webkit-scrollbar {
    width: 6px;
}
#host-chat-messages-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
#host-chat-messages-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}
#host-chat-messages-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}
@keyframes masterGlow {
    0% { box-shadow: 0 0 8px rgba(251, 191, 36, 0.4); border-color: #fbbf24; }
    100% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.8); border-color: #fffbeb; }
}

/* Genera il testo "In attesa" SOLO se il contenitore non contiene messaggi */
#host-chat-messages-list:empty::before {
    content: "In attesa di messaggi dai giocatori...";
    display: block;
    text-align: center;
    padding: 20px;
    opacity: 0.3;
    font-style: italic;
    font-size: 0.9rem;
    color: white;
}

/* =========================================================
   CLASSIFICHE (in-game + podio finale) — LIMITE DI ALTEZZA
   ---------------------------------------------------------
   Con partite affollate (es. 100-200+ giocatori) queste liste
   crescevano senza limite, allungando a dismisura la pagina
   dell'Host/Monitor invece di restare un riquadro compatto.
   Stesso identico pattern già usato per .advanced-panel qui
   sopra: altezza massima + scrollbar interna quando serve.
   Questo file (host.css) è caricato sia da host.html che da
   monitor.html (che condividono gli stessi id #leaderboard-list
   / #final-leaderboard-list, ognuno nel proprio DOM) sia da
   player-integrated.html, che però usa un id diverso e non è
   quindi toccato da queste regole. */
#leaderboard-list {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
}

#final-leaderboard-list {
    /* Il podio finale è pensato per essere letto da lontano (TV): un po'
       più alto della classifica in-game prima di far comparire la barra. */
    max-height: 560px;
    overflow-y: auto;
    overflow-x: hidden;
}

#leaderboard-list::-webkit-scrollbar,
#final-leaderboard-list::-webkit-scrollbar {
    width: 6px;
}
#leaderboard-list::-webkit-scrollbar-track,
#final-leaderboard-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
#leaderboard-list::-webkit-scrollbar-thumb,
#final-leaderboard-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}
#leaderboard-list::-webkit-scrollbar-thumb:hover,
#final-leaderboard-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* =================================================================
   EVO-4a (14/09/2026): jukebox YouTube — condiviso da host.html,
   monitor.html, player-integrated.html (stesso identico markup/motore
   in tutte e tre, ognuna con la propria istanza indipendente, come già
   il resto del jukebox — vedi commento in js/jukebox.js). Dietro
   config.json -> jukebox.youtube.enabled: a flag spento
   js/jukebox.js non tocca affatto questi elementi, restano nascosti
   (.hidden) esattamente come se non esistessero.
   ================================================================= */
/* (Stile di .jukebox-youtube-zone e del suo campo di testo: vedi più
   sotto, sezione EVO-4c — un'unica regola aggiornata invece di due
   copie separate, dato che EVO-4c ha dato a questo stesso contenitore
   anche uno sfondo/bordo da vera card.) */

/* Anteprima video piccola (scelta esplicita di Francesco, 14/09/2026:
   preferita al solo testo). Resta un'unica istanza reale del player
   YouTube per pagina (stesso principio già seguito per la tabella
   playlist), ma da Fase 6 (22/09/2026, correzioni finali) quell'unico
   nodo viene spostato via JS (relocateYoutubePreview() in
   js/jukebox.js) tra il pannello di preparazione stanza e il pannello
   "ripetitore" in partita su host.html, così l'anteprima segue quale
   dei due è aperto invece di sparire quando la partita inizia — prima
   viveva fisso dentro #jukebox-panel, dentro #setup-screen: appena
   #setup-screen spariva (display:none) a partita iniziata, spariva con
   lui anche il player, causando sia l'anteprima assente in partita sia
   la musica che si fermava senza più ripartire. */
.jukebox-youtube-preview {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 16 / 9;
    margin: 0 auto 15px auto;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}
.jukebox-youtube-preview iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}

/* EVO-4c (14/09/2026), rifinitura spaziatura (14/09/2026, stesso giorno —
   segnalato da Francesco come "troppo schiacciato/claustrofobico"): causa
   reale trovata, la classe utility "mb-2" usata nell'HTML di
   #youtube-mode-tabs non è mai esistita in global.css (esiste solo
   .mb-4/.mt-4/.mb-8/.mt-8) — le schede non avevano NESSUNO spazio sotto,
   attaccate al campo di ricerca. Risolto qui, nella regola dedicata,
   invece di aggiungere una classe generica: margine e spaziature interne
   aumentate ovunque nel blocco, pillole invece di schede "attaccate" per
   respirare meglio, coerente con gli altri pulsanti arrotondati del sito
   (.btn-music, .btn-preset-load). */
.jukebox-youtube-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.jukebox-youtube-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-color, #fff);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    opacity: 0.75;
    transition: all 0.15s ease;
}
.jukebox-youtube-tab:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.14);
}
.jukebox-youtube-tab.active {
    background: rgba(255, 0, 0, 0.18);
    border-color: #ff0000;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.35);
    opacity: 1;
}

/* Il "corpo" di ciascuna scheda (campo di ricerca+pulsante, o campo
   link+pulsante) ora è una vera cornice/card con aria intorno, invece del
   campo nudo attaccato ai bordi del pannello — stesso principio visivo
   già usato per .jukebox-youtube-preview qui sopra. */
.jukebox-youtube-zone {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px;
}
.jukebox-youtube-zone input[type="text"] {
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-color, #fff);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
}
.jukebox-youtube-zone input[type="text"]:focus {
    outline: 2px solid var(--accent-color);
}

/* EVO-4c: elenco risultati di ricerca — miniatura + titolo, riga cliccabile
   (scelta esplicita di Francesco: con miniatura, non solo testo). Altezza
   massima con scroll interno per non far crescere troppo il pannello. */
.jukebox-youtube-search-results {
    max-height: 220px;
    overflow-y: auto;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.jukebox-youtube-search-result-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.jukebox-youtube-search-result-row:hover {
    background: rgba(255, 0, 0, 0.15);
    border-color: #ff0000;
}
.jukebox-youtube-search-result-row img {
    width: 64px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
.jukebox-youtube-search-result-row span {
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jukebox-youtube-search-status {
    font-size: 0.85rem;
    opacity: 0.7;
    text-align: center;
    padding: 8px;
}