body {
    background-color: #FFF;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overscroll-behavior: none;
}

/* Stile per il contenitore SVG */
#svg-container {
    width: 100vmin;
    height: 100vmin;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Stile per lo sfondo nero fisso */
#svg-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #000000;
}

/* Stile per il contenuto SVG */
#svg-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    z-index: 5;
}

/* Transizioni delle grafiche */
#svg-content svg g {
    opacity: 0.95;
    transition: transform 0.16s ease-in-out;
    will-change: transform;
}

/* Stile per l'overlay trasparente */
#click-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    cursor: pointer;
    background-color: transparent;
}

/* Stile per i simboli di scorrimento */
.scroll-symbol {
    position: absolute;
    bottom: 9vmin;
    right: 2.4vmin;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 3vmin;
    color: #FFFFFF;
    cursor: e-resize;
    z-index: 7;
    opacity: 0.9;
    display: none;
    padding: 2vmin;
    box-sizing: border-box;
}

/* Stile per il testo della data */
#date-text {
    position: absolute;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 3vmin;
    z-index: 7;
    opacity: 0.9;
    transform-origin: left bottom;
    display: none;
    white-space: nowrap;
    color: #FFFFFF;
    transition: opacity 0.2s ease;
    cursor: pointer;
}

/* Stile per il testo dell'anno */
#year-text {
    position: absolute;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 3vmin;
    opacity: 0.9;
    z-index: 7;
    transform-origin: left bottom;
    display: none;
    white-space: nowrap;
    color: #FFFFFF;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

/* Aggiungi questo per lo stato "active" durante il click */
#year-text:active {
    cursor: grabbing;
}

/* Stile per il testo "Kamasutra" */
#kamasutra-text {
    position: absolute;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 3vmin;
    z-index: 7;
    opacity: 0.9;
    transform-origin: left bottom;
    display: none;
    white-space: nowrap;
    color: #FFFFFF;
}

/* Stile per il simbolo di pausa/play */
#pause-play-symbol {
    position: absolute;
    bottom: 2vmin;
    right: 2vmin;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 3vmin;
    color: #FFFFFF;
    cursor: pointer;
    z-index: 8;
    opacity: 0.9;
    padding: 2vmin;
    box-sizing: border-box;
}

/* Versione specifica per pausa */
#pause-play-symbol.pause {
    font-size: 3vmin;
    right: 2vmin;
}

/* Stato play - AGGIUNGI !important per forzare l'override */
#pause-play-symbol.play {
    font-size: 1vmin !important;
    padding: 2.2vmin; /* Compensazione per mantenere l'allineamento */
    right: 2vmin !important;
}