/* Add styles here */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'VCR OSD Mono', monospace;
    background: linear-gradient(165deg, #802b00, #560202);
    color: rgb(0, 242, 255);
    overflow: hidden;
}

#container {
    position: relative;
    width: 100vw;
    height: 100vh;
}

#container canvas {
    height: 100vh;
}

#controls {
    position: absolute;
    top: 60px;
    right: 20px;
    background: linear-gradient(135deg, #5606884d, #2e2d2e50);
    padding: 15px;
    border-radius: 10px;
    backdrop-filter: blur(10px 10px 13px rgb(255, 0, 217));
    border: 3px solid rgba(255, 89, 0, 0.479);
    max-height: 50vh;
    overflow-y: auto;
    width: 280px;
    z-index: 1000;
    transition: transform 0.9s ease, opacity 0.3s ease;
}

#controls.hidden {
    transform: translateX(300px);
    opacity: 0;
    pointer-events: none;
}

.control-group {
    margin-bottom: 10px;
    border: 3px solid rgba(235, 5, 170, 0.338);
    border-radius: 8px;
    overflow: hidden;
}

.control-group-header {
    cursor: crosshair;
    padding: 13px;
    background: rgba(3, 194, 237, 0.337);
}

.control-group h3 {
    color: #0deef5 ; /* Example accent color */
    margin-bottom: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block; /* Allow space for icon */
    margin-right: 10px; /* Space between text and icon */
}

.control-group-header span {
    float: right; /* Align icon to the right */
    transition: transform 0.9s ease;
}

.control-group-header.collapsed span {
    transform: rotate(-90deg);
}
.control-item {
    margin-bottom: 5px;
}

label {
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
    color: #652000;
}

.control-group-body {
    padding: 10px;
    transition: max-height 0.9s ease-in-out; /* Smooth collapse animation */
    overflow: hidden;
}

input[type="range"] {
    width: 100%;
    margin-bottom: 5px;
}

input[type="color"] {
    width: 100%;
    height: 30px;
    border: none;
    border-radius: 5px;
    cursor: crosshair;
}

select {
    width: 100%;
    padding: 5px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    color: rgb(0, 255, 251);
    cursor: crosshair;
}

select option {
    background: #ff00cc7b;
    color: rgb(0, 0, 0);
}

button {
    width: 100%;
    padding: 10px;
    background: linear-gradient(45deg, #000000, #006568);
    border: none;
    border-radius: 5合物;
    color: rgb(0, 225, 255);
    cursor: crosshair;
    font-weight: bold;
    transition: transform 0.9s;
}

button:hover {
    transform: translateY(-3px);
}

.value-display {
    font-size: 13px;
    color: #c26f0c;
    text-align: right;
}

#stats {
    bottom: 0px;
    right: 0px;
    background: rgba(0, 0, 0, 0.7);
    padding: 9px;
    border-radius: 5px;
    font-size: 13px;
    color: #00eeff;
}
.hidden {
    display: none
}

.toggle-controls {
    position: fixed;
    top: 20px;
    right: 0;
    background: rgba(0, 229, 255, 0.64);
    border: 1px solid rgba(255, 0, 221, 0.2);
    color: rgb(142, 64, 0);
    padding: 3px 10px;
    cursor: cell;
    border-radius: 9px;
    font-size: 13px;
    transition: all 0.9s ease;
    backdrop-filter: drop-shadow(8px 8px 10px rgb(255, 0, 153));
    z-index: 1000;
}

.toggle-controls:hover {
   filter: invert 100% ;
   background: rgba(0, 255, 247, 0.9);
    transform: scale(1.05)
    
}

@media (max-width: 768px) {
    #controls {
        width: calc(100vw - 40px);
        max-height: 60vh;
        top: auto;
        bottom: 20px;
        right: 20px;
        left: 20px;
    }
    
    #controls.hidden {
        transform: translateY(100%);
    }
    
    .toggle-controls {
        top: auto;
        bottom: calc(60vh + 40px);
    }
}
#control-notification {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: rgb(0, 255, 255);
    padding: 15px;
    border-radius: 10px;
    z-index: 1001;
    opacity: 1;
    transition: opacity 1s ease-in-out;
    pointer-events: none; /* Allow clicks to pass through */
}

/* Style for the start button */
#startButton {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px 30px;
    font-size: 9px;
    z-index: 1002;
    cursor: crosshair;
    background: linear-gradient(45deg, #662c00, #270431);
    color: #00eaff;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    transition: transform 0.3s ease;
}

#startButton:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

#disableAudioButton {
    padding: 15px 30px;
    font-size: 20px;
    z-index: 1002;
    font-weight: bold;

}