/* =====================================================================
   VIDEO - violinista.it (player del vecchio sito, al posto del Flash)
   29/10: come il vecchio player Flash → sfondo trasparente, il video sta
   DENTRO il "balloon" (ovale img/sfondo_Video_centrale.jpg della pagina),
   angoli arrotondati 14px (config8.xml) e striscia di miniature (carosello)
   ===================================================================== */

html, body {
    margin: 0;
    background: transparent;
    font: italic 12px Verdana, sans-serif;
    color: #000;
    overflow: hidden;
}

/* --- iframe 491×413: centro dell'ovale ≈ (234, 206) → schermo + titolo + miniature centrati lì --- */
#sala {
    position: absolute;
    left: 81px;
    top: 56px;
    width: 306px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- schermo 4:3 con angoli arrotondati; nero mentre carica --- */
#schermo {
    display: block;
    width: 306px;
    height: 230px;
    background: #000;
    border-radius: 14px;
}

#titolo {
    padding: 4px 2px 3px;
    font-weight: bold;
    text-align: center;
}

/* --- miniature in fila (come il carosello Flash): solo immagine, il titolo sta sopra --- */
#elenco {
    display: flex;
    gap: 4px;
    width: 290px;
    list-style: none;
    margin: 0;
    padding: 0 0 4px;
    overflow-x: auto;
    scrollbar-width: thin;
}

#elenco li {
    flex: none;
    font-size: 0;                 /* nasconde il nome accanto alla miniatura */
    padding: 2px;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid transparent;
}

#elenco li:hover,
#elenco li:focus-visible {
    background: rgba(255, 255, 255, .7);
}

#elenco li.on {
    background: #666;
}

#elenco img,
#elenco .vuota {
    display: block;
    width: 50px;
    height: 34px;
    object-fit: cover;
    border-radius: 4px;
    background: #999;
}