/* Čítanie piesne a pódiový režim */

#reader {
  margin: 0; inset: 0;
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  background: var(--bg);
}
#reader[open] { display: flex; flex-direction: column; }
.r-head {
  display: flex; align-items: center; gap: 4px;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.r-title { flex: 1; min-width: 0; }
.r-title h2 { margin: 0; overflow: hidden; font-size: 1.1rem; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.r-title small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--muted); font-size: .8rem; line-height: 1.3; }
.r-head .icon-btn { flex: none; width: 44px; height: 44px; border-radius: 12px; }
.r-head .icon-btn .a-sm { font-size: .85rem; font-weight: 700; }
.r-head .icon-btn .a-lg { font-size: 1.25rem; font-weight: 700; }
.r-head [data-theme-toggle] span { display: none; }
.r-tools {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  padding: 8px max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.r-tools::-webkit-scrollbar { display: none; }
.r-tools .grp { display: flex; align-items: center; gap: 8px; flex: none; }
.r-tools .grp:empty { display: none; }
.r-body { flex: 1; overflow-y: auto; padding: 28px max(20px, env(safe-area-inset-right)) 48px max(20px, env(safe-area-inset-left)); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.r-body:focus { outline: none; }
.r-lyrics {
  max-width: 46rem; margin: 0 auto; text-align: center;
  font-family: var(--serif);
  font-size: calc(clamp(1.5rem, 1.05rem + 1.9vw, 2.5rem) * var(--rscale));
  line-height: 1.45;
}
.r-lyrics p { margin: 0 0 1.1em; }
.r-lyrics.chords { text-align: left; line-height: 1.3; }
.r-lyrics.cols { max-width: none; columns: 2 22em; column-gap: 3.2rem; text-align: left; }
.r-lyrics.cols .cb, .r-lyrics.cols > p { break-inside: avoid; }
.r-lyrics.cols .song-note { column-span: all; max-width: none; }
.r-lyrics .song-note { font-size: 1rem; }
.r-tools .lbl { color: var(--muted); font-size: .78rem; font-weight: 650; white-space: nowrap; }
.r-tools + .r-tools { border-top: 0; }
#reader.min .r-tools { display: none; }
.r-secs .pill { height: 34px; font-size: .8rem; }
.beats { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; }
.beats i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--line); transition: background .05s; }
.beats i.strong { width: 13px; height: 13px; }
.beats i.on { background: var(--chord); }
.beats i.strong.on { background: var(--accent); }
.pill.silent { opacity: .6; }
.r-top { display: contents; }
.r-strip { display: none; }
.r-set { gap: 6px; }
.r-set .pill { height: 36px; max-width: 16rem; font-size: .82rem; }
.r-set .pill span.t { overflow: hidden; text-overflow: ellipsis; }
.r-set .pill .n { color: var(--muted); font-weight: 700; }
.r-set .pill[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.r-set .pill[aria-current="true"] .n { color: inherit; }

/* Pódiový režim (iPad na pódiu): text na celú obrazovku, lišty sa objavia ťuknutím do stredu */
#reader { touch-action: manipulation; }
#reader.stage {
  --bg: #ffffff; --surface: #ffffff; --ink: #000000; --muted: #4a4a4a; --line: #d6d6d6; --chord: #b03000; --accent: #1f4f8a; --accent-soft: #e6eef8;
}
:root[data-theme="dark"] #reader.stage {
  --bg: #000000; --surface: #101012; --ink: #ffffff; --muted: #a9a9ae; --line: #2c2c2f; --chord: #ffb15c; --accent: #8fc1ff; --accent-soft: #1b2733;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #reader.stage {
    --bg: #000000; --surface: #101012; --ink: #ffffff; --muted: #a9a9ae; --line: #2c2c2f; --chord: #ffb15c; --accent: #8fc1ff; --accent-soft: #1b2733;
  }
}
#reader.stage .r-top, #reader.stage .r-foot {
  position: absolute; left: 0; right: 0; z-index: 6;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s, visibility .18s;
}
#reader.stage .r-top { top: 0; display: block; max-height: 78vh; max-height: 78dvh; overflow-y: auto; box-shadow: 0 12px 36px rgba(0, 0, 0, .4); }
#reader.stage .r-foot { bottom: 0; box-shadow: 0 -12px 36px rgba(0, 0, 0, .4); }
#reader.stage.chrome .r-top, #reader.stage.chrome .r-foot { opacity: 1; visibility: visible; pointer-events: auto; }
#reader.stage .r-body {
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 84px max(24px, env(safe-area-inset-left));
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: pan-y;
}
#reader.stage .r-lyrics.chords .cl .ch { font-size: .92em; font-weight: 800; }
#reader.stage .r-lyrics { font-weight: 500; }
#reader.stage .pill { height: 44px; }
#reader.stage .r-set .pill { height: 40px; }
#reader.stage .r-head .icon-btn { width: 48px; height: 48px; }
#reader.stage #r-min { display: none; }
#reader.stage .r-strip {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none;
  padding: 30px max(24px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background: linear-gradient(to bottom, transparent, var(--bg) 55%);
  color: var(--muted); font: 600 .92rem/1.3 var(--sans);
  transition: opacity .18s;
}
#reader.stage .r-strip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#reader.stage .r-strip b { color: var(--ink); font-weight: 700; }
#reader.stage.chrome .r-strip { opacity: 0; }
.r-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 10px max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  border-top: 1px solid var(--line); background: var(--surface);
}
.r-foot .btn { min-height: 52px; min-width: 52px; }
.r-next { flex: 1; min-width: 0; text-align: center; color: var(--muted); font-size: .85rem; line-height: 1.3; }
.r-next b { display: block; overflow: hidden; color: var(--ink); font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .r-foot .btn .lbl { display: none; } }