:root {
  --text: #f4f4f4;
  --sung: #ff8a1f;
  --muted: rgba(255, 255, 255, 0.6);
  --intro-bg: #0b0b10;
  /* One background per block (section), cycled by block index. */
  --bg-0: #1d2b64;
  --bg-1: #5b1a5e;
  --bg-2: #8a1f2d;
  --bg-3: #0f5c4a;
  --bg-4: #6a3b0c;
  --bg-5: #233f8c;
  --bg-6: #4b1d7a;
  --bg-7: #7a1452;
  --bg-8: #105a6b;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--intro-bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
  transition: background-color 600ms ease;
}

body[data-block-index="0"], body[data-block-index="9"]  { background: var(--bg-0); }
body[data-block-index="1"], body[data-block-index="10"] { background: var(--bg-1); }
body[data-block-index="2"], body[data-block-index="11"] { background: var(--bg-2); }
body[data-block-index="3"], body[data-block-index="12"] { background: var(--bg-3); }
body[data-block-index="4"], body[data-block-index="13"] { background: var(--bg-4); }
body[data-block-index="5"], body[data-block-index="14"] { background: var(--bg-5); }
body[data-block-index="6"], body[data-block-index="15"] { background: var(--bg-6); }
body[data-block-index="7"], body[data-block-index="16"] { background: var(--bg-7); }
body[data-block-index="8"], body[data-block-index="17"] { background: var(--bg-8); }

#visual { position: fixed; inset: 0; pointer-events: none; }

#intro {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px; text-align: center;
  transition: opacity 600ms ease;
}
#intro h1 { margin: 0; font-size: clamp(2rem, 7vw, 5rem); }
#intro p { color: var(--muted); font-size: clamp(1rem, 2.5vw, 1.5rem); }
body.in-song #intro { opacity: 0; }

#block-name {
  position: fixed; top: 16px; left: 16px;
  color: var(--muted); font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase;
}

#stage {
  position: fixed; left: 0; right: 0; bottom: 96px;
  display: flex; justify-content: center; padding: 0 16px;
}

#line {
  margin: 0; max-width: 32ch; text-wrap: balance;
  font-size: clamp(1.6rem, 5vw, 4rem); font-weight: 600; line-height: 1.2; text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  opacity: 0; transform: translateY(12px);
  transition: opacity 250ms ease, transform 250ms ease;
}
#line.visible { opacity: 1; transform: none; }
#line .sung { color: var(--sung); }

/* ?at= still-frame previews: show the end state, not a transition. */
body.still, body.still * { transition: none !important; }

#controls {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
  font-size: 0.9rem; color: var(--muted);
}
#controls button {
  background: rgba(255, 255, 255, 0.12); color: var(--text);
  border: 0; border-radius: 6px; width: 40px; height: 36px; font-size: 1rem; cursor: pointer;
}
#controls button:hover { background: rgba(255, 255, 255, 0.22); }
#seek { flex: 1; min-width: 0; accent-color: var(--sung); }
#offset { min-width: 6em; text-align: right; }

#error {
  position: fixed; top: 16px; left: 16px; right: 16px;
  padding: 12px 16px; border-radius: 8px;
  background: #5c1111; color: #fff;
}

#debug { display: none; }
body.debug #debug {
  display: block; position: fixed; top: 16px; right: 16px;
  font: 0.85rem ui-monospace, monospace; color: #fff;
  background: rgba(0, 0, 0, 0.5); padding: 4px 8px; border-radius: 4px;
}

@media (max-width: 600px) {
  #time, #offset { display: none; }
  #stage { bottom: 72px; }
}