/*
 * Hand Music Synth — only what's specific to this tool.
 * Windows, buttons, sliders, readouts, dialog and taskbar come from
 * ../../shared-studio.css. The visuals fill the screen; the panels are
 * small studio windows over it that can be dragged or minimized.
 */

html, body { width: 100%; height: 100%; overflow: hidden; background: var(--s-ink); }

#background-canvas {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 1; pointer-events: none;
}

/* ── Floating windows: starting positions ────────────────── */
.synth-win { min-height: 0; z-index: 1000; }
.synth-win.active { z-index: 1001; }
#music-controls   { top: 12px; left: 12px; width: 270px; }
#video-controller { top: 12px; right: 12px; width: 270px; }
#video-container  { right: 12px; bottom: calc(var(--s-taskbar-h) + 12px); width: 260px; }
#instructions     { left: 12px; bottom: calc(var(--s-taskbar-h) + 12px); width: 360px; height: 340px; }

.control-group { padding-bottom: 6px; }
.control-group > :not(.s-section) { margin-left: 8px; margin-right: 8px; }

.slider-container { margin-top: 6px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; }
.slider-container label { grid-column: 1; }
.slider-container .s-readout { grid-column: 2; grid-row: 1; }
.slider-container .s-slider { grid-column: 1 / -1; }

.button-group { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.button-group .s-btn { flex: 1; min-width: 70px; }

/* ── Camera window ───────────────────────────────────────── */
.camera-well { position: relative; margin: 3px; height: 180px; overflow: hidden; }
#video, #hand-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#video { object-fit: cover; }
#hand-canvas { z-index: 1; }

/* ── Hand controls window ────────────────────────────────── */
#instructions .s-term { flex: 1; margin: 3px; border: 2px solid; border-color: var(--s-sunken); }
.s-term h3::before { content: '## '; }
.hand-control { margin-bottom: 10px; }
.hand-control strong { color: var(--s-phosphor); font-weight: normal; }

/* ── Start dialog ────────────────────────────────────────── */
#audio-start-overlay { z-index: 9999; background: rgba(0, 0, 0, 0.85); }

/* ── Small screens: stack the panels, keep the visuals ───── */
/* Phones: panels open one at a time from the tab bar (shared-studio). */
@media (max-width: 768px) {
    #video-container { display: none !important; }
    .button-group { flex-wrap: wrap; }
    .button-group .s-btn { min-width: 0; flex: 1 1 30%; }
}