/* Dark, high contrast, big type, no idle animation — this runs for an hour on
   somebody's phone battery in a field. */

:root {
  --bg: #0b0b0c;
  --fg: #ffffff;
  --dim: rgba(255, 255, 255, 0.26);
  --mid: rgba(255, 255, 255, 0.55);
  --accent: #ff3b6b;
  /* The poster's own red is #b5250a; this is the same hue lifted enough to read
     over the dimmed photograph. */
  --poster-red: #ff4a1a;
  --bar-h: 3rem;
  --lyric: clamp(1.75rem, 7.2vw, 3.25rem);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- top bar ---------- */

#bar {
  flex: 0 0 auto;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

#bar-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#bar-status {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
}

#bar-status.live { color: var(--accent); }

body.view-idle #bar { border-bottom-color: transparent; }

/* ---------- stage ---------- */

#stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

#scroller {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

#lines {
  padding: 0 1.15rem;
  will-change: transform;
}

.line {
  font-size: var(--lyric);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  padding: 0.34em 0;
  color: var(--dim);
  transition: color 220ms ease, opacity 220ms ease;
}

.line.next { color: var(--mid); }

.line.active { color: var(--fg); }

/* A timed line with no text = instrumental gap; keep the rhythm, drop the bulk. */
.line.gap { padding: 0.2em 0; }
.line.gap::before {
  content: "•••";
  font-size: 0.42em;
  letter-spacing: 0.35em;
}

.intro-card { padding: 0.5em 0 1.2em; }

.intro-card h1 {
  margin: 0;
  font-size: var(--lyric);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.intro-card p {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Browse view (stopped / lost uplink): the full text, scrolled by hand. */
body.view-browse #scroller {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4rem;
}

body.view-browse #lines { transform: none !important; }

body.view-browse .line { color: rgba(255, 255, 255, 0.78); }

body.view-browse .line.active,
body.view-browse .line.next { color: rgba(255, 255, 255, 0.78); }

/* ---------- idle screen ---------- */

/* The tour poster, whole. It is artwork on a black field, so letterboxing it
   against the page background reads as intentional — and "cover" would crop the
   vertical VOICE TOUR lettering and the dates clean off a phone-shaped screen. */
#idle-screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
}

body.view-idle #idle-screen { display: flex; }
body.view-idle #scroller { display: none; }

#poster {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: filter 300ms ease;
}

/* With a message up, the poster steps back and the words take the middle of the
   screen. The overlay is positioned, not stacked, so nothing can push it past
   the bottom edge the way a column of siblings could. */
#idle-screen.has-notice #poster { filter: brightness(0.3) saturate(0.85); }

#notice-box {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 2rem 1.25rem;
  text-align: center;
  overflow-y: auto;
}

/* Operator's message: "Wkrótce start", "Dziś gramy w: Ińsko • 20:00". Idle screen
   only — during a song the lyrics are the only thing competing for eyes. */
#notice {
  margin: 0;
  font-size: clamp(2rem, 9vw, 3.75rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--poster-red);
  text-wrap: balance;
}

#notice-link {
  flex: 0 0 auto;
  padding: 0.7em 1.3em;
  border: 2px solid var(--poster-red);
  border-radius: 2em;
  font-size: clamp(1rem, 4.4vw, 1.3rem);
  font-weight: 700;
  color: var(--poster-red);
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(255, 74, 26, 0.25);
}

#notice-link:active { background: rgba(255, 74, 26, 0.18); }

/* ---------- debug overlay ---------- */

#debug {
  position: fixed;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 10;
  padding: 0.5rem 0.65rem;
  border-radius: 0.4rem;
  background: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font: 400 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #9fe8b4;
  white-space: pre;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .line { transition: none; }
}