/* Karaoke Songbook — design tokens (Marquee direction) */
:root {
  --ox:   #2a0a12;
  --ox2:  #3d0f1c;
  --amber:#ffb43a;
  --pink: #ff2e88;
  --cream:#fff3e0;
  --dim:  #c98aa0;
  --panel:#160510;
  --deep: #120409;
  --edge: #6b2a3c;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--ox); overscroll-behavior-y: none; }   /* dark base under overscroll; no bounce */

body {
  background: radial-gradient(130% 80% at 50% -10%, var(--ox2), var(--ox) 68%);
  color: var(--cream);
  font-family: Rockwell, "Rockwell Nova", Georgia, serif;
  /* No viewport-height min-height: the body is exactly as tall as its content, so
     it can never scroll past the end (the mobile 100vh/dvh traps are avoided
     entirely). The dark background fills the screen via html below. */
  padding: 18px;
  overscroll-behavior-y: none;   /* no rubber-band bounce past the top/bottom */
}

/* The app column. Block layout + margin:auto centers it on desktop and, crucially,
   lets it shrink to the viewport on a phone — a flex-centered child would stick at
   its 480px max-width and hang off both edges (clipping the titles on the left). */
#app { width: 100%; max-width: 480px; margin: 0 auto; }

/* High-contrast / forced-colors: keep bulbs and structure legible when the OS
   overrides our palette. */
@media (forced-colors: active) {
  .badge, .title, .add { border: 2px solid CanvasText; }
  .chip.on, .sing, .badge b { forced-color-adjust: none; }
}