/* Reset Básico e Estilo do Corpo */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background-color: #000;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  cursor: none;
  transition: background-color .5s ease;
}

/* Vídeo de fundo */
#background-video{
  position: fixed; top:50%; left:50%;
  min-width:100%; min-height:100%;
  transform: translate(-50%, -50%) scale(1);
  z-index:1; opacity:.6;
  transition: transform .1s ease-in-out;
}
.video-zoomed{ transform: translate(-50%, -50%) scale(1.15); }

/* Canvas */
#visualizer-canvas{
  position: fixed; inset: 0;
  width:100%; height:100%;
  z-index:2;
  transform: scale(1);
  transition: transform .1s ease-in-out;
  pointer-events:none; /* não intercepta cliques do painel */
}

/* Painel */
#controls{
  position: fixed; left:0; right:0; bottom:0;
  background: rgba(0,0,0,.8);
  color: #fff; padding: 10px;
  z-index: 20; /* acima do canvas */
  display:flex; flex-wrap:wrap; gap:15px;
  justify-content:center; align-items:center;
  border-top: 1px solid rgba(255,255,255,.2);
  font-size:13px;
  transition: transform .35s ease-in-out;
}
.controls-hidden{ transform: translateY(100%); }

.control-group{
  display:flex; align-items:center; gap:8px;
  padding:5px 10px;
  background: rgba(255,255,255,.1);
  border-radius:8px;
}

#controls label{ color:#ccc; }
#controls select, #controls button{
  background:#333; color:#fff; border:1px solid #555;
  padding:6px 12px; border-radius:5px;
  cursor:pointer; transition: background .25s, transform .08s;
}
#controls button:hover, #controls select:hover{ background:#555; }
#controls button:active{ transform: scale(.96); }

#clear-btn{ background:#a00; } #clear-btn:hover{ background:#c00; }
#invert-btn{ background:#00688B; } #invert-btn:hover{ background:#009ACD; }

input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100px; height:6px; background:#555; border-radius:5px;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:16px; height:16px;
  background:#00bcd4; border-radius:50%;
}
input[type="range"]::-moz-range-thumb{
  width:16px; height:16px; background:#00bcd4; border-radius:50%;
}

#controls span{
  font-weight:700; color:#00bcd4; min-width:35px; text-align:center;
}

/* Botão do Sampler no painel */
#sampler-launcher{
  padding: 6px 12px; border-radius:8px;
  border:1px solid #2e2e2e; background:#151515; color:#f1f1f1;
  box-shadow:0 8px 26px rgba(0,0,0,.25);
}
#sampler-launcher:hover{ border-color:#00e0ff; }
#sampler-launcher:active{ transform: translateY(1px) scale(.98); }