/* ==========================================================================
   MD Karaoke Fest — Professional TV/Projector Player
   Diseño: fondo negro de escenario, paleta neon magenta-cian, tipografía
   impactante, animación de respiración en línea activa.
   ========================================================================== */

/* ---------- Import fuente display ---------- */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;600;700;900&display=swap');

/* ---------- Design tokens ---------- */
:root {
  --bg:              #080810;
  --bg-stage:        #0a0a16;

  /* Paleta neón: gradiente magenta → cian */
  --neon-a:          #ff2d78;      /* magenta caliente */
  --neon-b:          #00e5ff;      /* cian eléctrico */
  --neon-mid:        #bf5fff;      /* violeta puente */
  --accent:          #ff2d78;

  --text-lyric:      #ffffff;
  --text-future:     rgba(200, 200, 230, 0.92);
  --text-past:       rgba(160, 140, 200, 0.70);

  --font-display:    'Bebas Neue', 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-body:       'Montserrat', 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Tamaños — TV grande / proyector */
  --fs-current:      clamp(3.4rem, 5.5vw, 6rem);
  --fs-d1:           clamp(1.9rem, 3.1vw, 3.2rem);
  --fs-d2:           clamp(1.5rem, 2.4vw, 2.5rem);
  --fs-far:          clamp(1.1rem, 1.8vw, 2rem);
  --lh:              1.55;

  /* Glow neón bicromático para la línea activa */
  --glow:
    0 0 12px  rgba(255, 45, 120, 0.90),
    0 0 32px  rgba(255, 45, 120, 0.55),
    0 0 72px  rgba(191, 95, 255, 0.30),
    0 0 120px rgba(0, 229, 255, 0.15);

  --bar-bg:          rgba(6, 4, 18, 0.95);
  --bar-h:           92px;
  --safe:            48px;

  --focus-outline:   3px solid #00e5ff;
  --focus-bg:        rgba(0, 229, 255, 0.15);
  --focus-shadow:    0 0 0 6px rgba(0, 229, 255, 0.12), 0 0 24px rgba(0, 229, 255, 0.2);

  --btn-size:        72px;
  --btn-size-sm:     60px;
  --btn-playpause:   84px;

  --t-line:          160ms;
  --t-bar:           300ms;
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--text-lyric);
  font-family: var(--font-body);
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  cursor: none;
}

/* ---------- Stage ---------- */
#stage {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  position: relative;
  background: var(--bg-stage);
  overflow: hidden;
}

/* Luz de escenario — aura sutil centrada, fría */
#stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 38%,
      rgba(100, 40, 180, 0.10) 0%,
      rgba(0, 150, 200, 0.04) 45%,
      transparent 72%),
    radial-gradient(ellipse 100% 40% at 50% 100%,
      rgba(255, 45, 120, 0.05) 0%,
      transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Partículas decorativas — puntos de luz superior */
#stage::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 45, 120, 0.0) 10%,
    rgba(191, 95, 255, 0.55) 35%,
    rgba(0, 229, 255, 0.55) 65%,
    rgba(255, 45, 120, 0.0) 90%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ---------- Logo de marca — MD Karaoke Fest ---------- */
#brand-mark {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  padding: 1.1rem 1.8rem 0.9rem 1.4rem;
  display: flex;
  align-items: baseline;
  gap: 0.18em;
  pointer-events: none;
  opacity: 0.60;
  transition: opacity 0.4s ease;
}

#stage:hover #brand-mark { opacity: 0.75; }

.brand-md {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.1rem, 1.6vw, 1.6rem);
  letter-spacing: 0.08em;
  color: #fff;
  -webkit-text-fill-color: #fff;
  filter: drop-shadow(0 0 8px rgba(255, 45, 120, 0.7));
}

.brand-heart {
  color: var(--neon-a);
  -webkit-text-fill-color: var(--neon-a);
  filter: none;
  font-size: 0.85em;
  margin: 0 0.05em;
}

.brand-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.1rem, 1.6vw, 1.6rem);
  letter-spacing: 0.16em;
  background: linear-gradient(135deg, var(--neon-mid), var(--neon-b));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.5));
  margin-left: 0.5em;
}

/* ---------- Zona letras ----------
 * Layout flexbox: la línea actual queda centrada vertical en el ~42% del
 * viewport gracias al align-items + el orden de render (current ± 5 líneas).
 * Sin translateY calculado, sin offsetTop, sin race conditions con fonts.
 */
#lyrics-container {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  /* Anchor en 42% (no 50%) — alinea contra el tope y empuja con padding-top
   * dinámico mediante mask-image. Visualmente la línea actual queda en el
   * tercio superior, estilo Shazam. */
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding:
    var(--safe)
    calc(var(--safe) * 2)
    calc(var(--bar-h) + var(--safe) * 1.5)
    calc(var(--safe) * 2);

  /* Gradiente Shazam: líneas se desvanecen en los bordes.
   * Fade superior reducido a 6% para que la línea previa (dist=1) no quede
   * recortada cuando la línea actual usa --fs-current grande. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,1) 6%,
    rgba(0,0,0,1) 87%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,1) 6%,
    rgba(0,0,0,1) 87%,
    transparent 100%
  );
}

/* ---------- Scroll de letras ----------
 * Ahora es un flexbox column. La ventana deslizante (current ± 5) se renderiza
 * con la línea actual entre las pasadas y las futuras; flexbox las centra
 * automáticamente. El offset al 42% lo logramos con margin-top negativo en el
 * eje vertical mediante translateY -8% (estable a cualquier zoom).
 */
#lyrics-scroll {
  width: 100%;
  max-width: 1800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Empuja el centro de la pila hacia el ~42% del viewport (tercio superior). */
  transform: translateY(-8%);
  will-change: contents;
}

/* ---------- Líneas — base ---------- */
.line {
  color: var(--text-lyric);
  font-family: var(--font-display);
  font-size: var(--fs-far);
  font-weight: 400;
  line-height: var(--lh);
  letter-spacing: 0.04em;
  padding: 0.4em 1.2em;
  opacity: 0.07;
  transform: scale(0.80);
  transform-origin: center;
  text-shadow: none;
  transition:
    opacity        var(--t-line) var(--ease-out),
    font-size      var(--t-line) var(--ease-out),
    font-weight    var(--t-line) var(--ease-out),
    transform      var(--t-line) var(--ease-spring),
    text-shadow    var(--t-line) var(--ease-out),
    letter-spacing var(--t-line) var(--ease-out),
    color          var(--t-line) var(--ease-out);
}

/* ---------- Línea activa — protagonista absoluta ---------- */
.line.current,
.line[data-dist="0"] {
  opacity: 1 !important;
  font-size: var(--fs-current) !important;
  letter-spacing: 0.06em !important;
  transform: scale(1) !important;
  /* Blanco sólido: compatible en todos los contextos (landscape, PC, TV) */
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  animation: lyric-pulse 2.4s ease-in-out infinite !important;
}

@keyframes lyric-pulse {
  0%   { text-shadow:
           0 0 16px #ff2d78,
           0 0 40px rgba(255,45,120,0.60),
           0 0 80px rgba(255,45,120,0.25); }
  50%  { text-shadow:
           0 0 20px #bf5fff,
           0 0 52px rgba(191,95,255,0.60),
           0 0 100px rgba(191,95,255,0.25); }
  100% { text-shadow:
           0 0 16px #00e5ff,
           0 0 40px rgba(0,229,255,0.60),
           0 0 80px rgba(0,229,255,0.25); }
}

/* ---------- Distancia 1 — siguiente / anterior inmediata ---------- */
.line[data-dist="1"] {
  opacity: 0.80;
  font-size: var(--fs-d1);
  transform: scale(0.97);
  color: #fff;
  -webkit-text-fill-color: rgba(255,255,255,0.80);
}

/* ---------- Distancia 2 ---------- */
.line[data-dist="2"] {
  opacity: 0.50;
  font-size: var(--fs-d2);
  transform: scale(0.91);
}

/* ---------- Distancia 3 ---------- */
.line[data-dist="3"] {
  opacity: 0.28;
  font-size: var(--fs-far);
  transform: scale(0.86);
}

/* ---------- Distancia 4 ---------- */
.line[data-dist="4"] {
  opacity: 0.14;
  font-size: var(--fs-far);
  transform: scale(0.83);
}

/* ---------- Distancia 5+ ---------- */
.line[data-dist="5"] {
  opacity: 0.07;
  font-size: var(--fs-far);
  transform: scale(0.80);
}

/* Pasadas — tinte violáceo más apagado */
.line.past  { color: var(--text-past); }
.line.future { color: var(--text-future); }

/* ---------- Sin letra / Intermission ---------- */
.no-lyrics {
  font-size: clamp(1.4rem, 2.8vw, 2.4rem);
  color: rgba(200, 180, 255, 0.22);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.10em;
  text-align: center;
}

.intermission {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.8rem);
  color: rgba(191, 95, 255, 0.18);
  font-weight: 400;
  letter-spacing: 0.7em;
  text-align: center;
  text-transform: uppercase;
  animation: pulse-dim 3s ease-in-out infinite;
}

@keyframes pulse-dim {
  0%, 100% { opacity: 0.25; }
  50%       { opacity: 0.55; }
}

/* ---------- Barra de controles ---------- */
#bottom-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding:
    0.8rem
    calc(var(--safe) * 1.5)
    calc(var(--safe) * 0.7 + env(safe-area-inset-bottom, 0px))
    calc(var(--safe) * 1.5);
  background: var(--bar-bg);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  z-index: 10;

  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity   var(--t-bar) var(--ease-out),
    transform var(--t-bar) var(--ease-out);

  /* Borde superior neón */
  border-top: 1px solid transparent;
  background-clip: padding-box;
}

/* Línea neón superior de la barra */
#bottom-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 45, 120, 0.0)  8%,
    rgba(255, 45, 120, 0.50) 28%,
    rgba(191,  95, 255, 0.60) 50%,
    rgba(0, 229, 255, 0.50)  72%,
    rgba(0, 229, 255, 0.0)   92%,
    transparent 100%
  );
}

#bottom-bar.visible {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}

@media (min-width: 1800px) {
  #bottom-bar:not(.visible) {
    opacity: 0; transform: translateY(10px); pointer-events: none;
  }
}

/* ---------- Título ---------- */
#track-title {
  font-size: clamp(1rem, 1.7vw, 1.5rem);
  font-weight: 600;
  font-family: var(--font-body);
  color: rgba(200, 180, 255, 0.70);
  text-align: center;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Controles ---------- */
#controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  padding: 0.2rem 0 0.3rem;
}

#controls button {
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(191, 95, 255, 0.15);
  color: rgba(200, 180, 255, 0.70);
  font-size: 1.5rem;
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 50%;
  cursor: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background  0.20s ease,
    color       0.20s ease,
    transform   0.14s ease,
    box-shadow  0.20s ease,
    border-color 0.20s ease;
  flex-shrink: 0;
  outline: none;
  position: relative;
  overflow: hidden;
}

/* Resplandor interno al hover */
#controls button::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(191, 95, 255, 0.18) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.20s ease;
}

#controls button:hover::after { opacity: 1; }

#controls button:focus-visible {
  background: var(--focus-bg);
  color: #ffffff;
  outline: var(--focus-outline);
  outline-offset: 4px;
  box-shadow: var(--focus-shadow);
  transform: scale(1.12);
  border-color: rgba(0, 229, 255, 0.5);
}

#controls button:hover {
  background: rgba(191, 95, 255, 0.12);
  color: #fff;
  border-color: rgba(191, 95, 255, 0.35);
  transform: scale(1.06);
  box-shadow: 0 0 16px rgba(191, 95, 255, 0.20);
}

#controls button:active { transform: scale(0.92); }

/* Play/Pause — botón principal, más grande y luminoso */
#playpause {
  width: var(--btn-playpause) !important;
  height: var(--btn-playpause) !important;
  font-size: 1.9rem !important;
  background: rgba(191, 95, 255, 0.10) !important;
  border: 1.5px solid rgba(191, 95, 255, 0.35) !important;
  box-shadow:
    0 0 0 0 rgba(191, 95, 255, 0),
    inset 0 0 20px rgba(191, 95, 255, 0.06) !important;
  transition:
    background  0.20s ease,
    box-shadow  0.20s ease,
    transform   0.14s ease,
    border-color 0.20s ease !important;
}

#playpause:hover {
  background: rgba(191, 95, 255, 0.20) !important;
  border-color: rgba(191, 95, 255, 0.65) !important;
  box-shadow:
    0 0 24px rgba(191, 95, 255, 0.35),
    inset 0 0 20px rgba(191, 95, 255, 0.10) !important;
}

#playpause:focus-visible {
  background: var(--focus-bg) !important;
  border-color: rgba(0, 229, 255, 0.6) !important;
}

/* ---------- Offset display ---------- */
#offset-display {
  color: rgba(191, 95, 255, 0.45);
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  min-width: 5.5rem;
  text-align: center;
  padding: 0 0.4rem;
}

#offset-minus, #offset-plus {
  width: var(--btn-size-sm) !important;
  height: var(--btn-size-sm) !important;
  font-size: 1.3rem !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(191, 95, 255, 0.08) !important;
  color: rgba(191, 95, 255, 0.40) !important;
}
#offset-minus:hover, #offset-plus:hover {
  color: rgba(255, 255, 255, 0.90) !important;
  background: rgba(191, 95, 255, 0.14) !important;
  border-color: rgba(191, 95, 255, 0.35) !important;
}
#offset-minus:focus-visible, #offset-plus:focus-visible {
  color: #fff !important;
  background: var(--focus-bg) !important;
  border-color: rgba(0, 229, 255, 0.5) !important;
}

#fullscreen {
  margin-left: 0.75rem;
  color: rgba(191, 95, 255, 0.35) !important;
  border-color: rgba(191, 95, 255, 0.10) !important;
}
#fullscreen:hover { color: rgba(0, 229, 255, 0.90) !important; }
#fullscreen:focus-visible { color: #fff !important; }

/* ---------- Progress bar ---------- */
#progress {
  width: calc(100% + calc(var(--safe) * 3));
  margin-left: calc(var(--safe) * -1.5);
  height: 2px;
  background: rgba(191, 95, 255, 0.08);
  overflow: hidden;
}

#progress-bar {
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 45, 120, 0.80),
    rgba(191, 95, 255, 0.90),
    rgba(0, 229, 255, 0.80)
  );
  width: 0%;
  transition: width 0.25s linear;
  box-shadow: 0 0 6px rgba(191, 95, 255, 0.50);
}

/* ---------- Móvil (≤768px) — diseño Shazam mobile ---------- */
@media (max-width: 768px) {
  :root {
    --fs-current:    clamp(2.8rem, 8vw, 4.5rem);
    --fs-d1:         1.08rem;
    --fs-d2:         0.90rem;
    --fs-far:        0.76rem;
    --bar-h:         106px;
    --btn-size:      52px;
    --btn-size-sm:   44px;
    --btn-playpause: 62px;
    --safe:          14px;
    --glow:
      0 0 14px rgba(255, 45, 120, 0.80),
      0 0 38px rgba(191, 95, 255, 0.45),
      0 0 70px rgba(0, 229, 255, 0.20);
  }

  body { cursor: auto; }

  #lyrics-container {
    padding:
      calc(var(--safe) * 2)
      calc(var(--safe) * 1.5)
      calc(var(--bar-h) + var(--safe) * 2)
      calc(var(--safe) * 1.5);
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent  0%,
      black       18%,
      black       72%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent  0%,
      black       18%,
      black       72%,
      transparent 100%
    );
  }

  .line { padding: 0.28em 0.7em; line-height: 1.42; }
  .line.current,
  .line[data-dist="0"] { line-height: 1.32 !important; }

  #brand-mark { padding: 0.6rem 1rem 0.5rem 0.8rem; }
  .brand-luma, .brand-star { font-size: 1.0rem; }
  .brand-dot { font-size: 0.7rem; }
  .brand-karaoke { font-size: 0.45rem; }

  #controls { gap: 0.35rem; flex-wrap: nowrap; }
  #track-title { font-size: 0.78rem; }
  #offset-display { font-size: 0.66rem; min-width: 3.8rem; }
  #time-row { font-size: 0.58rem; }
  #debug-overlay { font-size: 0.60rem; max-width: 260px; }
  .dbg-cur { font-size: 0.68rem; }
  .dbg-nxt { font-size: 0.58rem; }
}

/* ---------- Desktop (769–1279px) ---------- */
@media (min-width: 769px) and (max-width: 1279px) {
  :root {
    --safe: 20px; --btn-size: 52px; --btn-size-sm: 44px;
    --btn-playpause: 62px; --bar-h: 82px;
  }
  body { cursor: auto; }
  #controls button { cursor: pointer; }
  #lyrics-container {
    padding:
      var(--safe) calc(var(--safe)*3)
      calc(var(--bar-h)+var(--safe)) calc(var(--safe)*3);
  }
}

/* ---------- Monitor medio (1280–1799px) ---------- */
@media (min-width: 1280px) and (max-width: 1799px) {
  :root { --safe: 32px; --btn-size: 60px; --btn-size-sm: 50px; --btn-playpause: 72px; }
  body { cursor: auto; }
  #controls button { cursor: pointer; }
}

/* ---------- TV / pantalla grande (≥1800px) ---------- */
@media (min-width: 1800px) {
  :root {
    --fs-current:    clamp(5rem, 6.2vw, 8rem);
    --fs-d1:         clamp(2.8rem, 3.4vw, 4.4rem);
    --fs-d2:         clamp(2.2rem, 2.8vw, 3.4rem);
    --fs-far:        clamp(1.7rem, 2.1vw, 2.7rem);
    --btn-size: 80px; --btn-size-sm: 68px; --btn-playpause: 96px; --safe: 64px;
    --glow:
      0 0 18px  rgba(255, 45, 120, 0.85),
      0 0 50px  rgba(255, 45, 120, 0.45),
      0 0 100px rgba(191, 95, 255, 0.30),
      0 0 180px rgba(0, 229, 255, 0.15);
  }
  #controls { gap: 1rem; }
  #track-title { font-size: clamp(1.3rem, 1.6vw, 1.9rem); }
  #offset-display { font-size: 0.92rem; min-width: 6rem; }

  #brand-mark { padding: 1.4rem 2.2rem 1rem 1.6rem; }
  .brand-luma, .brand-star { font-size: clamp(1.3rem, 1.8vw, 1.9rem); }
  .brand-karaoke { font-size: clamp(0.58rem, 0.80vw, 0.82rem); }
}

/* ---------- Fullscreen ---------- */
:fullscreen #stage, :-webkit-full-screen #stage { background: var(--bg-stage); }
:fullscreen #bottom-bar, :-webkit-full-screen #bottom-bar {
  padding-bottom: calc(var(--safe) * 0.7 + env(safe-area-inset-bottom, 0px));
}
:fullscreen #lyrics-container, :-webkit-full-screen #lyrics-container {
  padding-left: calc(var(--safe) * 2);
  padding-right: calc(var(--safe) * 2);
}

/* ---------- Track title — entrada animada al cambiar canción ---------- */
@keyframes title-enter {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#track-title.title-enter {
  animation: title-enter 0.38s var(--ease-out) forwards;
}

/* ---------- Tiempo transcurrido / total ---------- */
#time-row {
  display: flex;
  justify-content: space-between;
  padding: 0 0.25rem;
  font-size: 0.70rem;
  color: rgba(191, 95, 255, 0.30);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  margin-bottom: -1px;
}

/* ---------- Debug overlay ---------- */
#debug-overlay {
  position: absolute;
  top: 0; left: 0;
  z-index: 200;
  background: rgba(4, 2, 16, 0.92);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.73rem;
  font-family: 'Courier New', monospace;
  font-variant-numeric: tabular-nums;
  padding: 0.65rem 0.9rem 0.55rem;
  border-bottom-right-radius: 10px;
  border-right: 1px solid rgba(191, 95, 255, 0.22);
  border-bottom: 1px solid rgba(191, 95, 255, 0.22);
  pointer-events: none;
  line-height: 1.6;
  max-width: 320px;
}

.dbg-cur {
  color: #ffffff;
  font-size: 0.80rem;
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dbg-nxt {
  color: rgba(191, 95, 255, 0.50);
  font-size: 0.68rem;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dbg-row {
  color: rgba(255, 255, 255, 0.60);
  font-size: 0.70rem;
  margin-top: 1px;
}
.dbg-row b {
  color: var(--neon-b);
}

/* ---------- Móvil landscape (altura < 500px) ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --fs-current:    clamp(2rem, 6vh, 3rem);
    --fs-d1:         clamp(1rem, 3vh, 1.4rem);
    --fs-d2:         clamp(0.8rem, 2.5vh, 1.1rem);
    --fs-far:        clamp(0.65rem, 2vh, 0.9rem);
    --bar-h:         72px;
    --btn-size:      44px;
    --btn-size-sm:   38px;
    --btn-playpause: 52px;
    --safe:          8px;
  }
  body { cursor: auto; }
  #lyrics-container {
    padding:
      var(--safe)
      calc(var(--safe) * 2)
      calc(var(--bar-h) + var(--safe))
      calc(var(--safe) * 2);
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent  0%,
      black       20%,
      black       70%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent  0%,
      black       20%,
      black       70%,
      transparent 100%
    );
  }
  .line { padding: 0.15em 0.5em; line-height: 1.35; }
  #brand-mark { display: none; }
  #track-title { font-size: 0.70rem; }
  #offset-display { font-size: 0.60rem; }
  #time-row { font-size: 0.54rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .line { transition: color 80ms linear, opacity 80ms linear; }
  #bottom-bar { transition: opacity 150ms linear; }
  .intermission { animation: none; opacity: 0.40; }
  #lyrics-scroll { transition: transform 150ms linear; }
  .line.current,
  .line[data-dist="0"] { animation: none !important; }
}