/* Rebobina (juegos/rebobina/tv.js). Fondo estático; solo giran el disco y el ecualizador
   (transform). El contenido cambia al pasar algo, nunca en cada fotograma. 1rem = 32 px a 1080p. */
.rebobina {
  background: radial-gradient(circle at 15% 20%, #5A2A7A 0%, rgba(43,22,64,0) 45%),
              radial-gradient(circle at 90% 85%, #8A2D5C 0%, rgba(43,22,64,0) 50%), #2B1640;
  color: #fff;
}
.rebobina p { margin: 0; }

/* Disco (gira mientras suena la canción) */
.rb-disco-caja { position: absolute; left: 3rem; top: 2rem; width: 12rem; height: 12rem; }
.rb-disco {
  width: 100%; height: 100%; border-radius: 50%;
  background: repeating-radial-gradient(circle, #141414 0, #141414 .3rem, #262626 .32rem, #141414 .45rem);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.rb-disco__surco { position: absolute; inset: 1.25rem; border-radius: 50%; border: .125rem solid rgba(255,255,255,.08); }
.rb-disco__etiqueta {
  width: 5rem; height: 5rem; border-radius: 50%; position: relative;
  background: conic-gradient(var(--tg-rebobina) 0 25%, #FFC83D 0 50%, var(--tg-rebobina) 0 75%, #FFC83D 0);
}
.rb-disco__etiqueta::after { content: ''; position: absolute; left: 50%; top: 50%; width: .75rem; height: .75rem; margin: -.375rem; border-radius: 50%; background: #2B1640; }
.rb-disco.gira { animation: rb-gira 1.8s linear infinite; }
@keyframes rb-gira { to { transform: rotate(360deg); } }

/* Tarjeta: la pregunta y, al revelar, año + título + artista */
.rb-tarjeta {
  position: absolute; left: 18rem; right: 3rem; top: 2rem; min-height: 12rem; box-sizing: border-box;
  padding: 1.25rem 9rem 1.25rem 2rem; border-radius: 1.5rem; background: #fff; color: var(--tg-ink);
  display: flex; flex-direction: column; justify-content: center; gap: .375rem;
}
.rb-tarjeta__ante { font-size: 1.125rem; color: var(--tg-muted); }
.rb-tarjeta__titulo { font-size: 2.75rem; font-weight: var(--tg-w-medium); letter-spacing: -.03em; line-height: 1.05; }
.rb-tarjeta__pregunta { color: var(--tg-primary-dark); }
.rb-tarjeta__sub { font-size: 1.125rem; color: var(--tg-muted); }
.rb-tarjeta__anio { font-size: 4rem; font-weight: var(--tg-w-strong); letter-spacing: -.04em; line-height: 1; color: var(--tg-rebobina); }
.rb-tarjeta__cancion { font-size: 2rem; font-weight: var(--tg-w-medium); letter-spacing: -.02em; line-height: 1.1;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rb-tarjeta__artista { font-size: 1.25rem; color: var(--tg-muted); }

/* Ecualizador (5 barras con scaleY) */
.rb-ecualizador { position: absolute; right: 2.5rem; top: 50%; height: 4rem; margin-top: -2rem; display: flex; align-items: flex-end; gap: .375rem; }
.rb-ecualizador span { width: .75rem; height: 4rem; border-radius: .375rem; background: var(--tg-rebobina); transform-origin: 50% 100%; animation: rb-eq .9s ease-in-out infinite alternate; }
.rb-ecualizador span:nth-child(2) { animation-delay: -.3s; background: #FFC83D; }
.rb-ecualizador span:nth-child(3) { animation-delay: -.6s; }
.rb-ecualizador span:nth-child(4) { animation-delay: -.15s; background: #FFC83D; }
.rb-ecualizador span:nth-child(5) { animation-delay: -.45s; }
@keyframes rb-eq { from { transform: scaleY(.2); } to { transform: scaleY(1); } }

/* Quién ha elegido ya / quién ha acertado */
.rb-elegidos { position: absolute; left: 18rem; right: 3rem; top: 15.25rem; height: 3.5rem; display: flex; align-items: center; gap: 1rem; }
.rb-elegidos__txt { font-size: 1.5rem; font-weight: var(--tg-w-medium); margin-right: .5rem; }
.rb-elegido, .rb-acierto { position: relative; width: 3.5rem; height: 3.5rem; }
.rb-elegido { opacity: .35; }
.rb-elegido.ok { opacity: 1; }
.rb-avatar { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rb-avatar .tg-personaje { width: 2.75rem; height: 2.75rem; }
img.rb-avatar { object-fit: cover; }
.rb-elegido__check, .rb-acierto__mas {
  position: absolute; right: -.375rem; bottom: -.25rem; min-width: 1.5rem; height: 1.5rem; padding: 0 .25rem; box-sizing: border-box;
  border-radius: var(--tg-r-pill); background: var(--tg-online); color: #fff; font-size: 1rem; font-weight: var(--tg-w-strong);
  display: flex; align-items: center; justify-content: center;
}
.rb-acierto__mas { background: var(--tg-primary); }

/* Línea del tiempo (como mucho 9 cartas) */
.rb-eje { position: absolute; left: 3rem; right: 3rem; bottom: 6.5rem; display: flex; justify-content: space-between; font-size: 1rem; color: rgba(255,255,255,.7); }
.rb-linea { position: absolute; left: 2rem; right: 2rem; bottom: 1.5rem; height: 4.25rem; display: flex; justify-content: center; gap: .5rem; }
.rb-carta {
  width: 5.5rem; height: 4.25rem; border-radius: 1rem; background: rgba(255,255,255,.14); border: .125rem solid rgba(255,255,255,.3);
  box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; font-weight: var(--tg-w-strong); letter-spacing: -.02em;
}
.rb-carta--nueva { background: #FFC83D; border-color: #FFC83D; color: var(--tg-ink); }

/* Revelación: frase grande y caras sobre el hueco que eligió cada uno */
.rb-aviso { height: 3.5rem; padding: 0 1.5rem; font-size: 1.75rem; }
.rb-revela .rb-eje { opacity: 0; }
.rb-carta { position: relative; }
.rb-hueco { position: relative; width: 0; }
.rb-votos { position: absolute; left: 50%; bottom: calc(100% + .5rem); transform: translateX(-50%); display: flex; gap: .25rem; }
.rb-revela .rb-linea { gap: 0; }
.rb-revela .rb-carta { margin: 0 .25rem; }
.rb-voto { position: relative; width: 2.75rem; height: 2.75rem; }
.rb-voto .rb-avatar { width: 2.75rem; height: 2.75rem; }
.rb-voto .rb-avatar .tg-personaje { width: 2.125rem; height: 2.125rem; }
.rb-voto:not(.bien) { opacity: .75; }
.rb-voto__marca {
  position: absolute; right: -.375rem; bottom: -.25rem; min-width: 1.375rem; height: 1.375rem; padding: 0 .2rem; box-sizing: border-box;
  border-radius: var(--tg-r-pill); background: var(--tg-error); color: #fff; font-size: 1rem; font-weight: var(--tg-w-strong);
  display: flex; align-items: center; justify-content: center;
}
.rb-voto.bien .rb-voto__marca { background: var(--tg-primary); }

/* Modalidad por películas (peliculas.js): 4 opciones con emoji abajo, sin línea del tiempo */
.rb-opciones { position: absolute; left: 2rem; right: 2rem; top: 21rem; bottom: 2rem; display: flex; gap: .75rem; }
.rb-opcion {
  flex: 1; position: relative; border-radius: 1.5rem; background: rgba(255,255,255,.14); border: .1875rem solid rgba(255,255,255,.3);
  box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: .5rem;
}
/* Con portada: imagen cuadrada a la izquierda y nombre a la derecha (el hueco es bajo y ancho) */
.rb-opcion { flex-direction: row; justify-content: flex-start; padding: .5rem 1rem .5rem .5rem; gap: .75rem; }
.rb-opcion .rb-opcion__nombre { flex: 1; min-width: 0; text-align: left; font-size: 1.375rem; }
/* Portada: imagen cuadrada encima de su emoji (el emoji se ve solo si la imagen falla) */
.rb-portada { position: relative; display: block; flex: none; border-radius: 1rem; overflow: hidden; background: rgba(0,0,0,.25); }
.rb-portada__emoji { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 4rem; line-height: 1; }
.rb-portada__img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.rb-opcion__portada { width: 6rem; height: 6rem; border-radius: .75rem; }
.rb-tarjeta__portada { width: 5.5rem; height: 5.5rem; border-radius: .75rem; }
.rb-tarjeta__portada .rb-portada__emoji { font-size: 3.5rem; }
.rb-opcion__nombre { font-size: 1.5rem; font-weight: var(--tg-w-medium); text-align: center; line-height: 1.1; }
.rb-opcion--bien { background: #FFC83D; border-color: #FFC83D; color: var(--tg-ink); }
.rb-opcion--mal { opacity: .45; }
.rb-opcion .rb-votos { bottom: auto; top: -1.5rem; }
.rb-tarjeta__peli { font-size: 3rem; font-weight: var(--tg-w-strong); letter-spacing: -.03em; line-height: 1.05; color: var(--tg-rebobina); display: flex; align-items: center; gap: .75rem; }