/* ============================================================================
 * LUMA — style.css   (minimal, immersive, mobile-first)
 * Almost no chrome: the visualizer is the page. Two tiny auto-hiding icons.
 * ========================================================================== */
:root {
  --bg: #05060a;
  --fg: #eef1ff;
  --muted: rgba(238, 241, 255, 0.5);
  --glass: rgba(255, 255, 255, 0.055);
  --glass-strong: rgba(255, 255, 255, 0.11);
  --stroke: rgba(255, 255, 255, 0.13);
  --accent1: #6ad7ff;
  --accent2: #c08bff;
  --accent3: #ff7ad9;
  --shadow: 0 8px 36px rgba(0, 0, 0, 0.5);
  --pad: max(16px, env(safe-area-inset-bottom));
  font-synthesis: none;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
}
#app { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* overlay: transparent to touch except the actual buttons */
#ui { position: absolute; inset: 0; pointer-events: none; z-index: 5; transition: opacity 0.6s ease; }
#ui.hide-ui { opacity: 0 !important; }
#ui.idle #controls { opacity: 0; transform: translateY(10px); pointer-events: none; }
#ui.idle { cursor: none; }

/* the only persistent controls */
#controls {
  position: absolute; left: 0; right: 0; bottom: var(--pad);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.round {
  pointer-events: auto;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--stroke);
  background: var(--glass);
  color: var(--fg); cursor: pointer;
  opacity: 0.7;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, background 0.25s ease, box-shadow 0.25s ease, color 0.25s, opacity 0.25s;
}
.round:hover { opacity: 1; background: var(--glass-strong); transform: translateY(-1px); }
.round:active { transform: scale(0.93); }
.round.on {
  opacity: 1; color: #06121a; border-color: transparent;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  box-shadow: 0 4px 20px rgba(140, 160, 255, 0.45);
}
#play.playing { color: #06121a; background: linear-gradient(135deg, var(--accent1), var(--accent3)); opacity: 1; border-color: transparent; }

/* one-time fading hint */
.hint {
  position: absolute; left: 50%; bottom: calc(var(--pad) + 64px);
  transform: translateX(-50%) translateY(8px);
  padding: 8px 16px; border-radius: 999px;
  font-size: 12.5px; letter-spacing: 0.04em; color: var(--muted);
  background: rgba(10, 12, 20, 0.4);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none; white-space: nowrap;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.hint.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* transient messages (errors only) */
.toast {
  position: absolute; left: 50%; top: 8%;
  transform: translateX(-50%) translateY(-10px);
  padding: 9px 20px; border-radius: 999px;
  font-size: 13.5px; letter-spacing: 0.04em; color: var(--fg);
  background: rgba(10, 12, 20, 0.5); border: 1px solid var(--stroke);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; pointer-events: none; z-index: 7;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.stats {
  position: absolute; top: env(safe-area-inset-top); left: 50%; transform: translateX(-50%);
  margin-top: 6px; font: 11px/1.4 ui-monospace, monospace; color: var(--muted);
  pointer-events: none; text-align: center;
}

/* fatal error overlay */
.error { position: absolute; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; background: rgba(3, 4, 8, 0.92); padding: 24px; }
.error-box { max-width: 440px; text-align: center; background: rgba(18, 12, 18, 0.7); border: 1px solid rgba(255, 120, 120, 0.3); border-radius: 18px; padding: 28px 26px; }
.error-box h2 { font-size: 20px; margin-bottom: 12px; color: #ffb4b4; }
.error-msg { font: 12.5px/1.6 ui-monospace, monospace; color: #ffd9d9; word-break: break-word; margin-bottom: 12px; }
.error-sub { font-size: 13px; color: var(--muted); line-height: 1.5; }

@media (max-width: 560px) { .hint { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .round, .hint, .toast { transition-duration: 0.2s; } }