:root {
  --fondo: #07060a;
  --panel: rgba(20, 14, 24, .88);
  --borde: #3a2440;
  --texto: #f3eaf5;
  --tenue: #9b8aa3;
  --rosa: #ff2d95;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fondo); color: var(--texto);
  font: 15px/1.3 system-ui, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
canvas { display: block; width: 100vw; height: 100vh; }

#controles { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: center;
  max-width: calc(100vw - 32px); padding: 10px 14px; border: 1px solid var(--borde);
  border-radius: 12px; background: var(--panel); transition: opacity .4s; }
body.quieto #controles { opacity: 0; pointer-events: none; }
body.pantalla #controles { display: none; }
#controles label { display: flex; align-items: center; gap: 6px; color: var(--tenue); }
#controles select, #controles button { font: inherit; color: var(--texto); background: #1c1320;
  border: 1px solid var(--borde); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
#controles button:hover, #controles select:hover { border-color: var(--rosa); }
#controles button.prendido { background: var(--rosa); border-color: var(--rosa); color: #fff; }
#controles input[type=range] { accent-color: var(--rosa); width: 110px; }
#desfase-valor { min-width: 52px; color: var(--texto); }
#aviso { flex-basis: 100%; text-align: center; font-size: 12px; color: var(--tenue); }
/* página del cantante: sólo micrófono, desfase, dificultad y volumen (la canción la maneja el local) */
body.cantante #cancion, body.cantante #tocar, body.cantante #reiniciar, body.cantante #demo { display: none; }
body.cantante #controles { opacity: 1 !important; pointer-events: auto !important; }