/* LA GRAMOLA — teatro público (tareas 9-10, docs/10).
   Gramola de catedral, no de diner: negro profundo, oro viejo #E8CD96,
   Cinzel (variable, OFL, empaquetada local), estrellas en vez de neones.
   Regla de oro: si dudas entre más teatro o más sobriedad → sobriedad. */

/* El atributo `hidden` SIEMPRE oculta: cualquier `display:` de una clase
   (.side-note, .video-frame, .mode-btn…) lo anularía si no forzamos esto, y
   un overlay a pantalla completa se quedaría tapando la sala y capturando los
   clics. Guarda defensiva estándar del HTML. */
[hidden] { display: none !important; }

@font-face {
  font-family: "Cinzel";
  src: url("/static/fonts/cinzel-var-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --g-bg: #0a0d1a;
  --g-panel: #0e1322;
  --g-line: #232c49;
  --g-gold: #e8cd96;
  --g-gold-dim: #a8925f;
  --g-text: #e9e6dd;
  --g-muted: #8b93a8;
  --g-red: #e08a8a;
  --g-swap-ms: 900ms;       /* coreografía de cambio; gramola.js lo baja a 400 */
  --cinzel: "Cinzel", Georgia, serif;
}

/* Fondo de cielo nocturno con estrellas sutiles (solo gradientes, sin assets) */
body {
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.5), transparent 1px),
    radial-gradient(1px 1px at 78% 12%, rgba(255,255,255,.35), transparent 1px),
    radial-gradient(1.5px 1.5px at 55% 68%, rgba(232,205,150,.4), transparent 2px),
    radial-gradient(1px 1px at 32% 84%, rgba(255,255,255,.3), transparent 1px),
    radial-gradient(1px 1px at 90% 55%, rgba(255,255,255,.4), transparent 1px),
    radial-gradient(ellipse at 50% 0%, #101830 0%, var(--g-bg) 60%);
  background-color: var(--g-bg);
}

.display-cinzel {
  font-family: var(--cinzel);
  color: var(--g-gold);
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  margin: 0 0 .35rem;
  font-size: clamp(1.3rem, 4vw, 2.2rem);
}

/* Foco visible: anillo dorado en TODO lo operable (accesibilidad no negociable) */
.gate :focus-visible, .room :focus-visible, .lobby :focus-visible,
.premiere :focus-visible {
  outline: 2px solid var(--g-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================= la puerta */

.gate { width: 100%; display: flex; justify-content: center; }
.gate-frame {
  position: relative;
  width: min(64rem, 100%);
  min-height: 72vh;
  border: 1px solid rgba(232,205,150,.4);
  border-radius: 18px;
  box-shadow: 0 0 40px rgba(232,205,150,.06) inset, 0 0 24px rgba(0,0,0,.5);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 3rem 1.5rem; text-align: center;
}
.gate-stars { position: absolute; inset: 10px; border: 1px solid rgba(232,205,150,.12);
  border-radius: 12px; pointer-events: none; }
.gate-title { font-family: var(--cinzel); color: #eef0f6; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; font-size: clamp(1.6rem, 5vw, 3.2rem);
  margin: 0 0 1rem; text-shadow: 0 0 24px rgba(160,180,255,.25); }
.gate-album { font-family: var(--cinzel); color: var(--g-gold); letter-spacing: .2em;
  text-transform: uppercase; margin: 0 0 1rem; }
.gate-hint { color: var(--g-gold); letter-spacing: .45em; text-transform: uppercase;
  font-size: .85rem; margin: 0 0 1.4rem; font-family: var(--cinzel); }
.gate-form { display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
  width: min(30rem, 100%); }
.gate-slot {
  width: 100%; text-align: center; letter-spacing: .5em; font-size: 1.1rem;
  background: rgba(14,19,34,.9); border: 1px solid var(--g-line);
  border-radius: 10px; color: var(--g-text); padding: .85rem 1rem;
}
.gate-slot:focus { outline: 2px solid var(--g-gold); outline-offset: 1px; }
.gate-button {
  font-family: var(--cinzel); letter-spacing: .25em; text-transform: uppercase;
  background: rgba(232,205,150,.12); color: var(--g-gold);
  border: 1px solid var(--g-gold); border-radius: 999px;
  padding: .7rem 1.8rem; font-size: .9rem; cursor: pointer;
  transition: background .25s, box-shadow .25s;
}
.gate-button:hover { background: rgba(232,205,150,.22);
  box-shadow: 0 0 18px rgba(232,205,150,.25); filter: none; }
.gate-msg { min-height: 1.4em; margin: .4rem 0 0; color: var(--g-muted); }
.gate-msg.is-error { color: var(--g-red); }

/* Fallo de clave: parpadeo rojo sutil + shake (300 ms, luego reposo) */
.gate-error .gate-frame { animation: gate-shake .3s ease 1, gate-red .6s ease 1; }
@keyframes gate-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-6px); } 75% { transform: translateX(6px); }
}
@keyframes gate-red {
  0%,100% { border-color: rgba(232,205,150,.4); }
  40% { border-color: rgba(224,138,138,.8);
        box-shadow: 0 0 30px rgba(224,138,138,.15) inset; }
}

/* ================================================================ portada */

.lobby { width: min(64rem, 100%); }
.lobby-head { margin-bottom: 2rem; text-align: center; }
.lobby-grid { list-style: none; padding: 0; display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.lobby-card { display: flex; flex-direction: column; gap: .4rem; text-decoration: none;
  background: var(--g-panel); border: 1px solid var(--g-line); border-radius: 10px;
  padding: 1rem; transition: border-color .25s, box-shadow .25s; }
.lobby-card:hover, .lobby-card:focus-visible { border-color: var(--g-gold);
  box-shadow: 0 0 16px rgba(232,205,150,.12); }
.lobby-cover { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px;
  background: #131a30; display: block; }

/* ============================================================ fondo vivo */

.bg-live { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
#bg-a, #bg-b {
  position: absolute; inset: -40px;               /* esconde el borde del blur */
  background-size: cover; background-position: center;
  filter: blur(28px) brightness(.55) saturate(.9);
  opacity: 0; transition: opacity 1s ease;        /* crossfade 1 s (docs/10) */
}
#bg-a::after, #bg-b::after { content: ""; position: absolute; inset: 0;
  background: rgba(6, 8, 18, .55); }
.bg-live .is-shown { opacity: 1; }

/* ================================================================ la sala */

.room { width: min(76rem, 100%); }
.room-head { text-align: center; margin-bottom: 1.6rem; }
.room-sub { color: var(--g-muted); text-align: center; letter-spacing: .18em;
  text-transform: uppercase; font-size: .8rem; margin: 0; font-family: var(--cinzel); }
.room-empty { text-align: center; margin: 4rem 0; }

.room-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 2.5rem; align-items: start; }

/* ------------------------------------------------------------- el plato */

.platter-zone { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.platter { position: relative; width: min(26rem, 88vw); aspect-ratio: 1; }

.vinyl-slot { position: absolute; inset: 6%; }
.vinyl {
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(232,205,150,.55), 0 0 34px rgba(0,0,0,.65),
              0 0 22px rgba(232,205,150,.08);
  overflow: hidden; background: #0c0f1c;
  will-change: transform;
}
.vinyl-img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%; user-select: none; -webkit-user-drag: none; }
.vinyl-grooves { position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle at center,
    rgba(0,0,0,.28) 0 2px, rgba(255,255,255,.025) 2px 4px);
  mix-blend-mode: multiply; }
/* El surco recorrido brilla sutilmente: anillo pintado por JS con --played-r */
.vinyl::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at center,
    transparent calc(var(--played-r, 100%) - 1.5%),
    rgba(232,205,150,.10) calc(var(--played-r, 100%) - 1.5%),
    rgba(232,205,150,.10) 100%);
  pointer-events: none; }
.vinyl-label {
  position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #1a1508 0%, #241d0c 70%);
  border: 1px solid var(--g-gold);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .1rem; padding: 8%;
}
.vinyl-num { font-family: var(--cinzel); color: var(--g-gold); font-weight: 700;
  letter-spacing: .18em; font-size: clamp(.9rem, 2.6vw, 1.3rem); }
.vinyl-short { font-family: var(--cinzel); color: var(--g-gold-dim);
  letter-spacing: .14em; text-transform: uppercase; font-size: clamp(.5rem, 1.4vw, .62rem);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Coreografía de cambio: el disco sale y entra (gramola.js orquesta) */
.vinyl-slot { transition: transform calc(var(--g-swap-ms) * .38) ease-in,
              opacity calc(var(--g-swap-ms) * .38) ease-in; }
.vinyl-slot.is-out { transform: translateX(-130%) rotate(-14deg); opacity: 0; }
.vinyl-slot.is-in-from { transition: none; transform: translateX(130%) rotate(14deg); opacity: 0; }

/* La aguja ES la barra de progreso: pivot arriba a la derecha del plato */
.needle { position: absolute; right: 4%; top: 2%; width: 6%; height: 58%;
  transform-origin: 50% 6%; z-index: 3;
  transform: rotate(var(--needle-rot, -26deg));
  transition: transform .4s ease; cursor: grab; pointer-events: auto; }
.needle.is-dragging { transition: none; cursor: grabbing; }
.needle.is-up { translate: 0 -4px; filter: drop-shadow(0 6px 4px rgba(0,0,0,.5)); }
.needle-arm { position: absolute; left: 50%; top: 4%; width: 3px; height: 92%;
  transform: translateX(-50%);
  background: linear-gradient(var(--g-gold) 0%, var(--g-gold-dim) 100%);
  border-radius: 2px; box-shadow: 0 0 6px rgba(232,205,150,.4); }
.needle-head { position: absolute; left: 50%; top: 2%; width: 14px; height: 14px;
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 2px solid var(--g-gold); background: #0c0f1c; }
.needle::after { /* cabeza lectora en la punta */
  content: ""; position: absolute; left: 50%; bottom: 0; width: 9px; height: 9px;
  transform: translateX(-50%); border-radius: 50%;
  background: var(--g-gold); box-shadow: 0 0 8px rgba(232,205,150,.7); }

.now-playing { margin: 0; font-family: var(--cinzel); text-align: center;
  color: var(--g-text); letter-spacing: .12em; min-height: 1.5em; }
.now-playing #np-num { color: var(--g-gold); margin-right: .4em; }

/* Barra táctil fina: la alternativa accesible a la aguja (conviven) */
.seek-row { display: flex; align-items: center; gap: .7rem; width: min(26rem, 88vw); }
.time { color: var(--g-muted); font-size: .8rem; font-variant-numeric: tabular-nums;
  min-width: 2.6rem; text-align: center; }
input[type="range"] { accent-color: var(--g-gold); }
#seek { flex: 1; height: 4px; cursor: pointer; }

.controls { display: flex; align-items: center; gap: 1rem; }
.ctl {
  width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.05rem;
  background: transparent; color: var(--g-gold); border: 1px solid var(--g-gold-dim);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; transition: border-color .2s, box-shadow .2s, background .2s;
}
.ctl:hover { border-color: var(--g-gold); box-shadow: 0 0 12px rgba(232,205,150,.2);
  filter: none; background: rgba(232,205,150,.08); }
.ctl-play { width: 3.6rem; height: 3.6rem; background: rgba(232,205,150,.14);
  border-color: var(--g-gold); }
.vol-wrap { display: flex; align-items: center; }
#vol { width: 6.5rem; height: 4px; }

.mode-row { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }
.mode-btn {
  font-family: var(--cinzel); letter-spacing: .18em; text-transform: uppercase;
  font-size: .74rem; background: transparent; color: var(--g-muted);
  border: 1px solid var(--g-line); border-radius: 999px; padding: .5rem 1.2rem;
  cursor: pointer; transition: color .2s, border-color .2s, background .2s;
}
.mode-btn:hover { color: var(--g-gold); border-color: var(--g-gold-dim); filter: none;
  background: transparent; }
.mode-btn[aria-pressed="true"] { color: var(--g-gold); border-color: var(--g-gold);
  background: rgba(232,205,150,.1); }

/* Modo vídeo: el plato cede el sitio al vídeo en el mismo marco dorado */
.video-frame { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; background: #05070f; border-radius: 12px;
  border: 1px solid var(--g-gold); box-shadow: 0 0 28px rgba(0,0,0,.6); z-index: 4; }
.video-frame video { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }

/* --------------------------------------------- la selección (Wurlitzer) */

.selection { position: relative; border: 1px solid var(--g-line); border-radius: 14px;
  padding: 1.1rem 1.2rem 1.4rem; background: rgba(10,13,26,.55); overflow: hidden; }
.selection-glass { position: absolute; inset: 0 0 auto 0; height: 34%;
  background: linear-gradient(172deg, rgba(255,255,255,.07) 0%,
    rgba(255,255,255,.02) 45%, transparent 70%);
  border-radius: 14px 14px 0 0; pointer-events: none; }
.side-sep { font-family: var(--cinzel); color: var(--g-gold); text-align: center;
  letter-spacing: .3em; text-transform: uppercase; font-size: .8rem;
  margin: 1.2rem 0 .8rem; font-weight: 600; }
.side-sep:first-child { margin-top: .2rem; }

.wgrid { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: .55rem; }
.wcard {
  display: grid; grid-template-columns: 2.8rem auto 1fr auto auto;
  align-items: center; gap: .8rem; width: 100%; text-align: left;
  background: rgba(16,22,43,.85); color: var(--g-text);
  border: 1px solid var(--g-line); border-radius: 10px; padding: .5rem .9rem .5rem .5rem;
  cursor: pointer; font-size: .98rem;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.wcard:hover, .wcard:focus-visible { border-color: var(--g-gold-dim);
  box-shadow: 0 0 14px rgba(232,205,150,.10); filter: none;
  background: rgba(24,30,55,.9); }
.wcard.is-current { border-color: var(--g-gold);
  background: rgba(52,42,18,.55); box-shadow: 0 0 16px rgba(232,205,150,.16); }
.wcard.is-current .wtitle { color: var(--g-gold); font-weight: 600; }
.wcover { width: 2.8rem; height: 2.8rem; border-radius: 6px; object-fit: cover;
  background: #131a30; display: block; }
.wnum { font-family: var(--cinzel); color: var(--g-gold); font-weight: 600;
  letter-spacing: .08em; min-width: 2ch; }
.wtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wdur { color: var(--g-muted); font-size: .85rem; font-variant-numeric: tabular-nums; }

/* Ecualizador discreto de 3 barras: solo en la pista sonando */
.weq { display: none; align-items: flex-end; gap: 2px; height: .95rem; }
.wcard.is-current.is-playing .weq { display: inline-flex; }
.weq i { width: 3px; background: var(--g-gold); border-radius: 1px;
  animation: eq-bar 1s ease-in-out infinite; height: 40%; }
.weq i:nth-child(2) { animation-delay: .25s; height: 90%; }
.weq i:nth-child(3) { animation-delay: .55s; height: 60%; }
@keyframes eq-bar { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* ------------------------------------------------- modo LETRA (tarea 10) */

.lyrics { text-align: center; padding: 1rem 1rem 3rem; }
.lyrics-lines { list-style: none; margin: 0 auto; padding: 0; max-width: 46rem; }
.lyrics-lines li {
  font-family: var(--cinzel); color: rgba(233,230,221,.34);
  font-size: clamp(1.05rem, 2.6vw, 1.5rem); line-height: 1.6; padding: .45rem 0;
  cursor: pointer; transition: color .35s, transform .35s;
}
.lyrics-lines li:hover { color: rgba(233,230,221,.6); }
.lyrics-lines li.is-active { color: var(--g-gold); transform: scale(1.04);
  text-shadow: 0 0 18px rgba(232,205,150,.25); }
.lyrics-close { margin-top: 2rem; }

/* La sala transformada: plato compacto (tarjeta CUADRADA) en la esquina,
   letra centrada. La letra reserva hueco arriba para no quedar tapada. */
.room.mode-letra .selection, .room.mode-letra .finale { display: none; }
.room.mode-letra .room-body { display: block; }
.room.mode-letra .platter-zone {
  position: fixed; top: .8rem; left: .8rem; z-index: 20;
  flex-direction: column; align-items: center; gap: .45rem;  /* columna = cuadrado, no barra */
  width: 8.5rem;                                              /* ancho fijo compacto */
  background: rgba(10,13,26,.82); border: 1px solid var(--g-line);
  border-radius: 14px; padding: .7rem .6rem; backdrop-filter: blur(6px);
}
.room.mode-letra .platter { width: 4.8rem; }
.room.mode-letra .needle, .room.mode-letra .vinyl-label,
.room.mode-letra .mode-row .mode-btn:not(#btn-lyrics),
.room.mode-letra .vol-wrap,
.room.mode-letra .seek-row { display: none; }               /* la barra larga era lo que lo hacía rectangular */
.room.mode-letra .now-playing { font-size: .68rem; margin: 0; text-align: center; line-height: 1.25; }
.room.mode-letra .controls { gap: .4rem; }
.room.mode-letra .ctl { width: 2rem; height: 2rem; font-size: .75rem; }
.room.mode-letra .ctl-play { width: 2.3rem; height: 2.3rem; }
.room.mode-letra .room-head { display: none; }
/* La letra empieza por debajo de la tarjeta flotante (sin solapamiento) */
.room.mode-letra .lyrics { padding-top: 10.5rem; }

/* Rótulo entre caras (modo continuo) */
.side-note { position: fixed; inset: 0; display: flex; align-items: center;
  justify-content: center; z-index: 30; background: rgba(6,8,18,.72);
  font-family: var(--cinzel); color: var(--g-gold); letter-spacing: .3em;
  text-transform: uppercase; font-size: clamp(1rem, 3vw, 1.6rem); text-align: center;
  padding: 1rem; animation: side-note-in .6s ease; }
@keyframes side-note-in { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------------- bloque final */

.finale { margin-top: 3.5rem; display: grid; gap: 2.2rem;
  border-top: 1px solid var(--g-line); padding-top: 2rem; }
.finale-h { font-family: var(--cinzel); color: var(--g-gold); letter-spacing: .2em;
  text-transform: uppercase; font-size: .95rem; margin: 0 0 .8rem; }
.finale-h small { color: var(--g-muted); letter-spacing: .08em; text-transform: none;
  font-family: inherit; }
.credit-line { color: var(--g-muted); font-size: .9rem; margin: .25rem 0; }
.credit-track { color: var(--g-text); }

/* La placa de latón: un único bloque sobrio, parte del mueble */
.brass-plaque {
  border: 1px solid var(--g-gold-dim); border-radius: 10px; padding: 1.1rem 1.4rem;
  background: linear-gradient(160deg, rgba(232,205,150,.10), rgba(232,205,150,.03));
  text-align: center; max-width: 34rem; margin: 0 auto; width: 100%;
}
.brass-plaque p { margin: 0 0 .6rem; color: var(--g-text); }
.brass-plaque img { max-width: 100%; border-radius: 6px; }
.plaque-btn { display: inline-block; font-family: var(--cinzel); letter-spacing: .15em;
  text-transform: uppercase; font-size: .78rem; color: var(--g-gold);
  border: 1px solid var(--g-gold); border-radius: 999px; padding: .45rem 1.2rem;
  text-decoration: none; }
.plaque-btn:hover { background: rgba(232,205,150,.12); }

/* El buzón junto a la gramola (sin avatares, sin likes) */
.mailbox { display: grid; gap: 1.8rem; max-width: 34rem; margin: 0 auto; width: 100%; }
.mailbox-thanks { color: var(--g-gold); text-align: center; margin: 0; }
.mailbox-form { display: grid; gap: .7rem; }
.mailbox-form input, .mailbox-form textarea {
  background: var(--g-panel); border: 1px solid var(--g-line); border-radius: 8px;
  color: var(--g-text); padding: .6rem .8rem; font-size: .95rem;
  font-family: inherit; resize: vertical;
}
.mailbox-form .mode-btn { justify-self: start; }
.guestbook { display: grid; gap: 1rem; }
.guest-line { margin: 0; border-left: 2px solid var(--g-gold-dim); padding: .2rem 0 .2rem 1rem; }
.guest-line p { margin: 0 0 .25rem; color: var(--g-text); white-space: pre-wrap; }
.guest-line cite { color: var(--g-muted); font-style: normal; font-size: .85rem; }

/* ======================================================= página de estreno */

.premiere { width: min(50rem, 100%); text-align: center; display: flex;
  flex-direction: column; align-items: center; gap: 1.8rem; padding-top: 4vh; }
.premiere-cover-wrap { border: 1px solid rgba(232,205,150,.45); padding: 6px;
  border-radius: 4px; }
.premiere-cover { display: block; width: min(20rem, 70vw); aspect-ratio: 1;
  object-fit: cover; filter: blur(14px) brightness(.5); }
.premiere-cover-empty { background: #10162b; }
.premiere-line { font-family: var(--cinzel); color: var(--g-text);
  letter-spacing: .25em; text-transform: uppercase; font-size: clamp(.8rem, 2.4vw, 1.05rem);
  margin: 0; }
.countdown { display: flex; align-items: baseline; gap: .6rem; }
.cd-cell { display: flex; flex-direction: column; gap: .35rem; }
.cd-num { font-family: var(--cinzel); color: var(--g-gold); font-weight: 600;
  font-size: clamp(2.2rem, 8vw, 4.5rem); font-variant-numeric: tabular-nums; }
.cd-sep { font-family: var(--cinzel); color: var(--g-gold-dim);
  font-size: clamp(1.6rem, 6vw, 3rem); }
.cd-lab { color: var(--g-muted); letter-spacing: .35em; text-transform: uppercase;
  font-size: .68rem; }
.premiere-slot { color: var(--g-muted); border: 1px solid var(--g-line);
  border-radius: 999px; padding: .6rem 1.6rem; letter-spacing: .25em;
  text-transform: uppercase; font-size: .72rem; margin-top: .5rem; }

/* ===================================================== encendido (1×/sesión)
   gramola.js pone .power-on (completa) o .power-on-fast (40%) en <main>
   y asigna --i a cada tarjeta para la cascada. */

.power-on .room-head, .power-on-fast .room-head {
  animation: light-up .5s ease both; }
.power-on .platter-zone { animation: light-up .6s ease .15s both; }
.power-on-fast .platter-zone { animation: light-up .25s ease both; }
.power-on .wcard { animation: card-light .4s ease both;
  animation-delay: calc(300ms + var(--i, 0) * 45ms); }
.power-on-fast .wcard { animation: card-light .2s ease both;
  animation-delay: calc(80ms + var(--i, 0) * 18ms); }
@keyframes light-up { from { opacity: 0; filter: brightness(2.2); }
  to { opacity: 1; filter: brightness(1); } }
@keyframes card-light { from { opacity: 0; box-shadow: 0 0 18px rgba(232,205,150,.35); }
  to { opacity: 1; } }

/* ================================================================= móvil */

@media (max-width: 860px) {
  .stage { padding: 1rem .8rem 3rem; }
  .room-body { display: block; }
  .platter-zone {
    position: sticky; top: 0; z-index: 15;
    background: linear-gradient(rgba(10,13,26,.96) 82%, rgba(10,13,26,0));
    padding: .6rem 0 1rem; gap: .6rem; margin-bottom: 1rem;
  }
  .platter { width: min(38vw, 11rem); }
  .needle { display: none; }               /* la barra fina es el seek táctil */
  .seek-row, .controls { width: 100%; justify-content: center; }
  .vol-wrap { display: none; }             /* volumen: botones del dispositivo */
  .room-head { margin-bottom: .8rem; }
  .selection { padding: .8rem .7rem 1rem; }
  .wcard { grid-template-columns: 2.4rem auto 1fr auto auto; gap: .55rem; }
  .room.mode-letra .platter-zone { position: fixed; }
}

/* =================================================== reduced motion: digno
   sin teatro — sin giros, sin coreografías; fades simples. */

@media (prefers-reduced-motion: reduce) {
  .vinyl, .vinyl-slot, .needle { transition: none !important; }
  .vinyl-slot.is-out, .vinyl-slot.is-in-from { transform: none; opacity: 1; }
  .gate-error .gate-frame { animation: none; }
  .weq i { animation: none; transform: scaleY(.7); }
  .power-on .room-head, .power-on-fast .room-head,
  .power-on .platter-zone, .power-on-fast .platter-zone,
  .power-on .wcard, .power-on-fast .wcard {
    animation: simple-fade .3s ease both; animation-delay: 0s; }
  .side-note { animation: none; }
  .lyrics-lines li.is-active { transform: none; }
  #bg-a, #bg-b { transition: opacity .3s ease; }
}
@keyframes simple-fade { from { opacity: 0; } to { opacity: 1; } }