#container { position: absolute; display: flex; top: 2%; left: 27%; width: 72%; height: 95%; z-index: 1; }
#container canvas { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
#container.dpad-mode { cursor: default; }
#container.orbit-mode { cursor: grab; }
#container.dragging { cursor: grabbing; }
#controls-panel2 {flex-direction: column; position: absolute; display: flex; top: 2%; left: 1%; z-index: 10; width: 25%; height:100% ; overflow-y: auto; }
#controls-panel2::-webkit-scrollbar { width: 8px; }
#controls-panel2::-webkit-scrollbar-track { background: #2d3748; border-radius: 10px; }
#controls-panel2::-webkit-scrollbar-thumb { background: #4a5568; border-radius: 10px; }
.d-pad-btn { transition: background-color 0.2s; user-select: none; }
.tool-btn.active { background-color: #059669; box-shadow: 0 0 15px rgba(5, 150, 105, 0.7); }
/* Estilo para los select de herramientas */
.tool-select {
    background-color: #4a5568;
    border: 1px solid #6b7280;
    color: white;
}

.material-palette {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 5px;
    padding: 5px;
    background-color: #2a313b;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
}
.material-item {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: border-color 0.2s;
}
.material-item:hover {
    border-color: #4f99ff;
}
.material-preview {
    width: 100%;
    height: 100%;
}
.material-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.material-info-text {
    font-family: monospace;
    color: #a7b3c2;
}