html {
    /* Disattiva il "font boosting" automatico di Chrome Android: senza questa riga,
       il testo in blocchi stretti rispetto allo schermo viene ingrandito oltre le
       dimensioni impostate in CSS. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #00000033;
    touch-action: none;
}

/* Bottone hamburger fisso in alto a sinistra: apre/chiude il menu a scomparsa.
   z-index maggiore del pannello (10) così resta sempre sopra e cliccabile. */
#shapeMenuToggle {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 11;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .25);
    background-color: rgba(0, 0, 0, .55);
    color: #fff;
    font-family: inherit;
    font-size: 20px;
    cursor: pointer;
}

/* Menu a scomparsa a sinistra, centrato verticalmente: pannello scuro semitrasparente
   arrotondato, coerente con lo stile pill già usato nel progetto. Chiuso di default
   (fuori viewport a sinistra); la classe "open" lo riporta in posizione visibile. */
#shapeMenu {
    position: fixed;
    left: 16px;
    top: 50%;
    transform: translate(-120%, -50%);
    transition: transform .25s ease;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 80vh;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .25);
    background-color: rgba(0, 0, 0, .55);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
}

#shapeMenu.open {
    transform: translateY(-50%);
}

/* Bottone play/pausa in cima al pannello: riga intera, icona centrata, separato
   dalla lista sottostante da un bordo inferiore (niente bordo proprio sugli altri
   lati per non duplicare il bordo del pannello). Hover coerente con le voci della lista. */
#shapeAutoToggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 6px 14px 14px;
    margin-bottom: 8px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background-color: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
    transition: background-color .2s ease;
}

#shapeAutoToggle:hover {
    background-color: rgba(255, 255, 255, .15);
}

#shapeMenuList {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    max-height: 60vh;
}

#shapeMenuList li {
    padding: 6px 14px;
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease;
}

#shapeMenuList li:hover {
    background-color: rgba(255, 255, 255, .15);
}

#shapeMenuList li.active {
    background-color: rgba(255, 255, 255, .3);
    font-weight: bold;
}