/* =========================================================================
   VÉRTIGO BAR — Vista Cliente (Mobile-First)
   ========================================================================= */
/* Fondo neón en perspectiva (CSS puro, ligero para móvil) */
body::after {
  content: ''; position: fixed; left: -50%; right: -50%; bottom: 0; height: 42%;
  z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,106,0,.30) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(75,227,255,.18) 1.5px, transparent 1.5px);
  background-size: 40px 40px;
  transform: perspective(300px) rotateX(60deg); transform-origin: bottom center;
  mask-image: linear-gradient(transparent, #000 70%);
  animation: grid-run-m 3s linear infinite;
}
@keyframes grid-run-m { to { background-position: 0 40px; } }

.screen {
  position: relative; z-index: 1;
  min-height: 100dvh;
  display: none; flex-direction: column;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
}
.screen.active { display: flex; }

/* ---------- Bienvenida ---------- */
.w-top { display: flex; justify-content: space-between; align-items: center; }
.brand { font-size: 1.15rem; }
.brand.small { font-size: .95rem; }
.brand-sub { padding-top: 3px; }

.w-hero { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; }
.w-ring {
  position: absolute; width: 260px; height: 260px; border-radius: 50%;
  border: 2px solid rgba(255,106,0,.35);
  box-shadow: var(--glow-orange), inset 0 0 40px rgba(255,106,0,.15);
  animation: ring-pulse 3.2s ease-in-out infinite;
}
@keyframes ring-pulse {
  0%,100% { transform: translate3d(0,0,0) scale(.92); opacity: .5; }
  50%     { transform: translate3d(0,0,0) scale(1.05); opacity: 1; }
}
.w-hero h1 { font-family: var(--font-mono); font-size: 2.5rem; line-height: 1.05; letter-spacing: 1px; position: relative; }
.w-hero h1 span { color: var(--orange); text-shadow: var(--glow-orange); }
.w-lead { margin-top: 14px; color: var(--text-dim); font-size: 1rem; max-width: 260px; }

.w-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; }
#nameInput {
  font-family: var(--font); font-size: 1.25rem; text-align: center; color: var(--white);
  background: var(--bg-2); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 16px; outline: none; transition: border-color .2s, box-shadow .2s;
}
#nameInput::placeholder { color: var(--text-dim); }
#nameInput:focus { border-color: var(--orange); box-shadow: var(--glow-orange); }
.w-foot { text-align: center; color: var(--text-dim); font-size: .78rem; letter-spacing: 1px; margin-top: 8px; }

/* ---------- Cabecera votación ---------- */
.v-head { display: flex; justify-content: space-between; align-items: center; }
.v-user { font-size: .8rem; color: var(--text-dim); letter-spacing: 1px; }
.v-user b { color: var(--orange); }
.change-name { color: var(--text-dim); text-decoration: underline; font-size: .72rem; margin-left: 4px; }
.v-title { display: flex; align-items: center; justify-content: space-between; margin: 18px 2px 14px; }
.v-title span { font-family: var(--font-mono); font-size: 1.05rem; }
.v-live { display: flex; align-items: center; gap: 6px; font-size: .7rem; color: var(--neon); letter-spacing: 2px; }
.v-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: var(--glow-neon); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ---------- GAMEPAD ---------- */
.pad { flex: 1; display: grid; grid-auto-rows: minmax(64px, 1fr); gap: 14px; align-content: stretch; }
.song-btn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  border: 1.5px solid var(--line); border-radius: var(--radius-lg);
  background: var(--grad-panel);
  padding: 0 18px; cursor: pointer; color: var(--text);
  text-align: left; width: 100%;
  transition: transform .12s ease, border-color .2s, box-shadow .2s, opacity .3s;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.song-btn .num {
  font-family: var(--font-mono); font-size: 1.5rem; font-weight: 800;
  color: var(--orange); width: 34px; text-align: center; flex: 0 0 auto;
  text-shadow: var(--glow-orange);
}
.song-btn .meta { display: flex; flex-direction: column; min-width: 0; }
.song-btn .t { font-size: 1.2rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-btn .a { font-size: .85rem; color: var(--text-dim); }
.song-btn .chevron { margin-left: auto; color: var(--orange); font-size: 1.4rem; opacity: .7; flex: 0 0 auto; }

/* borde superior de color por botón */
.song-btn::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--grad-brand); opacity: .8;
}

/* Estado PRESIONADO (feedback instantáneo) */
.song-btn:active { transform: translate3d(0,0,0) scale(.97); border-color: var(--orange); box-shadow: var(--glow-orange); }
.song-btn.pressed { animation: press-flash .35s ease; }
@keyframes press-flash {
  0% { box-shadow: 0 0 0 rgba(255,106,0,0); }
  30% { box-shadow: var(--glow-orange), inset 0 0 30px rgba(255,106,0,.25); border-color: var(--orange); }
  100% { box-shadow: 0 0 0 rgba(255,106,0,0); }
}
/* onda al presionar */
.song-btn .ripple {
  position: absolute; border-radius: 50%; transform: translate3d(-50%,-50%,0) scale(0);
  background: radial-gradient(circle, rgba(255,255,255,.5), transparent 70%);
  pointer-events: none; animation: ripple .5s ease-out forwards; width: 200px; height: 200px;
}
@keyframes ripple { to { transform: translate3d(-50%,-50%,0) scale(2.4); opacity: 0; } }

/* Estado SELECCIONADO (mi voto) */
.song-btn.picked { border-color: var(--gold); box-shadow: var(--glow-gold); }
.song-btn.picked::before { background: var(--grad-gold); opacity: 1; }
.song-btn.picked .num { color: var(--gold); text-shadow: var(--glow-gold); }

/* Estado BLOQUEADO/DESACTIVADO */
.pad.locked .song-btn:not(.picked) { opacity: .38; filter: grayscale(.5); pointer-events: none; }
.pad.locked .song-btn { cursor: default; }

.v-msg { text-align: center; color: var(--text-dim); font-size: .85rem; min-height: 20px; margin-top: 12px; letter-spacing: .5px; }
.v-msg.err { color: #ff5a5a; }

.pad-empty {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--text-dim); font-size: .95rem; padding: 30px; border: 1.5px dashed var(--line);
  border-radius: var(--radius-lg); line-height: 1.5;
}

/* ---------- Post-voto / cierre ---------- */
#done { justify-content: center; align-items: center; text-align: center; gap: 24px; }
.done-box { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.done-icon {
  width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  font-size: 3rem; color: var(--white);
  background: var(--grad-brand); box-shadow: var(--glow-orange);
  animation: pop .5s cubic-bezier(.2,1.4,.4,1);
}
#done.win .done-icon { background: var(--grad-gold); box-shadow: var(--glow-gold); color: #3a2400; }
@keyframes pop { 0% { transform: scale(0) rotate(-20deg); } 100% { transform: scale(1) rotate(0); } }
.done-box h2 { font-family: var(--font-mono); font-size: 1.9rem; }
#doneText { color: var(--text-dim); max-width: 280px; }
.my-pick {
  margin-top: 6px; padding: 12px 22px; border-radius: var(--radius);
  border: 1.5px solid var(--gold); box-shadow: var(--glow-gold);
  font-weight: 700; font-size: 1.1rem;
}

.cooldown-box {
  margin-top: 20px; padding: 16px 24px; border-radius: var(--radius-lg);
  border: 1.5px solid var(--neon); box-shadow: var(--glow-neon);
  display: none; flex-direction: column; align-items: center; gap: 4px; max-width: 300px;
}
.cooldown-label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: 2px; color: var(--text-dim); }
.cooldown-timer { font-family: var(--font-mono); font-size: 2.6rem; font-weight: 800; color: var(--neon); text-shadow: var(--glow-neon); line-height: 1.1; }
.cooldown-tip { font-size: .82rem; color: var(--text-dim); text-align: center; margin-top: 6px; max-width: 240px; }

/* ---------- Flash global ---------- */
.flash { position: fixed; inset: 0; background: var(--white); opacity: 0; pointer-events: none; z-index: 50; }
.flash.go { animation: flashbang .5s ease; }