/* Assurez-vous que le conteneur est positionné relativement */
#renderer-container {
    position: relative;
    width: 100%;
    height: 384px; /* Correspond à h-96 en Tailwind (24rem = 384px) */
    overflow: hidden;
}

/* Positionner le panneau de contrôle */
.options-menu {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 5px;
    pointer-events: auto;
}

/* Positionner le bouton de bascule */
.phone-menu-toggler {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.8);
    padding: 5px;
    border-radius: 5px;
    pointer-events: auto;
}

/* Positionner les stats */
.stats-container {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 10;
}

/* Contraindre la taille du canvas enfant */
#renderer-container canvas {
    width: 100%;
    height: 100%;
    display: block; 
}