body { margin: 0; font-family: Arial; overflow: hidden; }
html { margin: 0; padding: 0; }

#loading {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; color: #fff;
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}
#loading.hidden { display: none !important; }

#status {
    position: fixed; bottom: 20px; left: 20px;
    background: rgba(0, 0, 0, 0.7); color: #fff;
    padding: 10px; border-radius: 5px;
    z-index: 1000;
}

#enable-sound-btn {
    position: fixed; bottom: 70px; left: 20px;
    z-index: 1001;
    background: #2e7d32; color: #fff;
    border: none; padding: 12px 16px; border-radius: 8px;
    font-size: 15px; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
#enable-sound-btn:active { background: #1b5e20; }
#enable-sound-btn.hidden { display: none !important; }

#debug-toggle {
    position: fixed; top: 10px; right: 10px;
    background: rgba(0, 0, 0, 0.7); color: #0f0;
    border: 1px solid #0f0; padding: 5px 10px; border-radius: 3px;
    cursor: pointer; z-index: 1002;
    font-size: 12px; font-family: monospace;
}

#debug-panel {
    position: fixed; top: 40px; right: 10px;
    width: 300px; max-height: 400px;
    background: rgba(0, 0, 0, 0.8); color: #0f0;
    padding: 10px; border-radius: 5px;
    font-size: 11px; overflow-y: auto; z-index: 1001;
    font-family: monospace;
}
#debug-panel div { margin: 2px 0; word-wrap: break-word; }
#debug-panel.hidden { display: none; }

#ui-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 100;
    display: none !important;
}

a-scene { width: 100vw; height: 100vh; display: block; }
/* MindAR mounts the camera <video> behind the canvas (z-index: -2); the canvas must be transparent. */
a-scene .a-canvas { background: transparent !important; }