:root {
  --blue: #1a1aff;
  --orange: #ff6b1a;
  --ink: #06061a;
  --ink-2: #0d0d2b;
  --text: #f3f3fb;
  --muted: #9a9ac0;
  --banner-h: 12vh;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: #000; color: var(--text); overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
body.idle-cursor { cursor: none; }
.hidden { display: none !important; }

#app { display: grid; grid-template-rows: minmax(0, 1fr) var(--banner-h); height: 100vh; height: 100dvh; }
#app.no-banner { grid-template-rows: minmax(0, 1fr) 0; }

/* ---------- Escenario ---------- */
#stage { position: relative; overflow: hidden;
  background: radial-gradient(90% 120% at 15% 0%, #1b1b8a 0%, transparent 55%),
              radial-gradient(70% 90% at 100% 100%, rgba(255,107,26,.28) 0%, transparent 60%),
              var(--ink); }
#yt-wrap { position: absolute; inset: 0; background: #000; pointer-events: none; visibility: hidden; }
#yt-wrap.on { visibility: visible; }
#yt-wrap iframe, #yt-wrap #yt { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.wordmark { font-weight: 800; letter-spacing: -.03em; font-size: clamp(28px, 5vw, 64px); line-height: 1; }
.wordmark span { color: var(--orange); }

/* Vista de audio (mp3) */
#audio-view, #idle-view { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 6vw; gap: 1.2vh; }
#av-kind { color: var(--orange); font-weight: 700; letter-spacing: .28em; text-transform: uppercase; font-size: clamp(12px, 1.4vw, 20px); }
#av-title { margin: 0; font-weight: 800; letter-spacing: -.02em; font-size: clamp(30px, 5.4vw, 88px);
  line-height: 1.05; max-width: 20ch; text-wrap: balance; }
#av-name { color: var(--muted); font-size: clamp(14px, 1.6vw, 24px); }
#idle-msg { color: var(--muted); font-size: clamp(14px, 1.8vw, 26px); margin: 0; }

.eq { display: flex; align-items: flex-end; gap: .9vw; height: 12vh; margin-bottom: 3vh; }
.eq i { display: block; width: 1.1vw; min-width: 8px; border-radius: 99px; background: linear-gradient(var(--orange), #ffb27a);
  height: 20%; animation: eq 1.1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.7s; }
.eq i:nth-child(4) { animation-delay: -.15s; } .eq i:nth-child(5) { animation-delay: -.55s; }
.eq i:nth-child(6) { animation-delay: -.9s; } .eq i:nth-child(7) { animation-delay: -.4s; }
.paused .eq i { animation-play-state: paused; }
@keyframes eq { 0%,100% { height: 18%; } 50% { height: 100%; } }

/* Etiqueta "ahora suena" sobre el video */
.chip { position: absolute; left: 2vw; bottom: 2.4vh; display: flex; align-items: center; gap: .7em;
  max-width: 70%; padding: .7em 1.1em; border-radius: 99px; font-weight: 600; font-size: clamp(12px, 1.2vw, 18px);
  background: rgba(6,6,26,.72); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.12);
  opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; pointer-events: none; }
.chip.show { opacity: 1; transform: none; }
.chip .dot { width: .6em; height: .6em; border-radius: 50%; background: var(--orange); flex: none; }
.chip span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Controles (aparecen al mover el mouse) */
#controls { position: absolute; top: 2vh; right: 2vw; display: flex; gap: 6px; padding: 6px; border-radius: 14px;
  background: rgba(6,6,26,.78); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.12);
  opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 5; }
body.show-controls #controls { opacity: 1; pointer-events: auto; }
#controls button { width: 42px; height: 42px; border: 0; border-radius: 10px; background: transparent; color: var(--text);
  font-size: 18px; cursor: pointer; transition: background .15s; }
#controls button:hover { background: rgba(255,255,255,.14); }

/* Pantalla de inicio */
#start { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  background: rgba(6,6,26,.86); backdrop-filter: blur(14px); }
.start-card { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; padding: 24px; }
#start-name { color: var(--muted); font-size: clamp(14px, 1.6vw, 22px); margin-top: -8px; }
#start-btn { font: inherit; font-weight: 700; font-size: clamp(16px, 1.8vw, 24px); color: #fff; cursor: pointer;
  padding: .9em 2.2em; border: 0; border-radius: 99px; background: var(--blue);
  box-shadow: 0 10px 40px rgba(26,26,255,.5); transition: transform .15s, background .15s; }
#start-btn:hover { transform: translateY(-2px); background: #3a3aff; }
.start-card small { color: var(--muted); }

/* ---------- Banner de publicidad ---------- */
#banner { position: relative; overflow: hidden; background: var(--ink-2); border-top: 3px solid var(--orange); }
#app.no-banner #banner { display: none; }
#slides { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 0 4vw; opacity: 0; transition: opacity .9s ease; }
.slide.on { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: contain; }
.slide .t { font-weight: 800; letter-spacing: -.02em; font-size: calc(var(--banner-h) * .36); line-height: 1.1; }
.slide .s { color: #c7c7e6; font-weight: 500; font-size: calc(var(--banner-h) * .2); margin-top: .25em; }
.slide.text { background: linear-gradient(100deg, #0d0d3f, var(--blue) 140%); }

/* Estado de la copia local / conexión */
#status { position: absolute; left: 2vw; top: 2vh; z-index: 4; padding: .5em 1em; border-radius: 99px; font-size: clamp(11px, 1vw, 15px); font-weight: 600;
  background: rgba(6,6,26,.72); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.12); color: var(--muted);
  opacity: 0; transition: opacity .3s; pointer-events: none; }
#status:empty { display: none; }
body.show-controls #status, #status.alert { opacity: 1; }
#status.alert { color: #ffb27a; border-color: rgba(255,107,26,.5); }
#start-sync { color: var(--orange); font-weight: 600; min-height: 1.2em; }

/* Vinculación */
#pair { position: absolute; inset: 0; z-index: 12; display: flex; align-items: center; justify-content: center; background: rgba(6,6,26,.9); backdrop-filter: blur(14px); }
.pair-title { margin: 6px 0 0; font-size: clamp(28px, 4vw, 56px); font-weight: 800; letter-spacing: -.02em; }
.pair-sub { margin: 0; color: var(--muted); font-size: clamp(14px, 1.7vw, 24px); line-height: 1.5; max-width: 32em; }
.pair-sub b { color: var(--text); }
.code { display: flex; gap: clamp(8px, 1.2vw, 18px); margin: 10px 0 4px; }
.code i { display: grid; place-items: center; font-style: normal; font-weight: 800; letter-spacing: 0;
  width: clamp(54px, 8vw, 120px); height: clamp(70px, 10.5vw, 150px); font-size: clamp(36px, 6vw, 92px);
  border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: var(--orange); }