body { margin: 0; overflow: hidden; background-color: #000; color: #fff; font-family: monospace }
canvas { display: block; width: 100vw; height: 100vh }
#startButton { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px 40px; font-size: 24px; font-family: monospace; background-color: #333; color: #0f0; border: 2px solid #0f0; cursor: pointer; z-index: 100; box-shadow: 0 0 15px #0f0; transition: opacity .5s ease-out }
#startButton:hover { background-color: #444; box-shadow: 0 0 25px #0f0, 0 0 10px #fff inset }
#volumeControls { position: fixed; top: 65%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 15px; z-index: 100; background: rgba(0, 20, 0, 0.8); padding: 10px 20px; border-radius: 4px; border: 1px solid #0f0; transition: opacity 0.5s ease-out; }
#muteButton { background: transparent; border: 1px solid #0f0; color: #0f0; cursor: pointer; padding: 5px 10px; font-family: monospace; font-size: 14px; text-transform: uppercase; }
#muteButton:hover { background: rgba(0, 255, 0, 0.2); }
#volumeSlider { -webkit-appearance: none; width: 150px; height: 5px; background: #333; outline: none; border-radius: 5px; border: 1px solid #0f0; }
#volumeSlider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; background: #0f0; cursor: pointer; border-radius: 50%; }
#volumeSlider::-moz-range-thumb { width: 15px; height: 15px; background: #0f0; cursor: pointer; border-radius: 50%; border: none; }