[hidden] { display: none !important; }

:root { --acento: #a78bfa; }

/* Título de la portada: degradado de neón que se desplaza despacio, con brillo */
.titulo-marca {
  display: inline-block; /* el degradado se ajusta al ancho del texto, no de la fila */
  background: linear-gradient(100deg, #c4b5fd 0%, #f0abfc 25%, #67e8f9 50%, #c4b5fd 100%) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  filter: drop-shadow(0 0 22px rgba(167, 139, 250, 0.55)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
  animation: titulo-brillo 12s ease-in-out infinite alternate;
}
@keyframes titulo-brillo { to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .titulo-marca { animation: none; } }

.vignette {
  background:
    radial-gradient(ellipse at center, transparent 45%, rgba(7, 7, 11, 0.8) 100%),
    linear-gradient(to bottom, transparent 65%, #07070b 100%);
}

/* Portada: fondo con parallax suave y zoom lento */
#fondo {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform 0.5s ease-out;
}
.fondo-capa {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.fondo-capa.activa {
  opacity: 1;
  animation: zoom-lento 16s ease-in-out infinite alternate;
}
@keyframes zoom-lento { from { transform: scale(1); } to { transform: scale(1.09); } }

/* Tarjetas de campaña con su arte */
.tarjeta {
  position: relative;
  overflow: hidden;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 3px solid var(--acento);
  background: #0e0e15;
  transition: border-color 0.2s, box-shadow 0.3s, transform 0.3s;
}
.tarjeta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--img) center / cover;
  filter: brightness(0.6) saturate(0.95);
  transition: transform 0.7s ease, filter 0.4s;
}
.tarjeta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 7, 11, 0.95) 5%, rgba(7, 7, 11, 0.15) 70%);
}
.tarjeta > * { position: relative; z-index: 1; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
.tarjeta:hover, .tarjeta:focus-visible {
  border-color: var(--acento);
  box-shadow: 0 10px 40px -12px var(--acento);
  transform: translateY(-3px);
}
.tarjeta:hover::before, .tarjeta:focus-visible::before {
  transform: scale(1.08);
  filter: brightness(0.85) saturate(1.1);
}

.btn-opcion {
  min-height: 44px;
  border: 1px solid #2c2c37;
  background: #0e0e15;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.btn-opcion:hover:not(:disabled), .btn-opcion:focus-visible {
  border-color: var(--acento);
  box-shadow: 0 0 22px -8px var(--acento);
}
.btn-opcion:disabled { opacity: 0.5; }

.btn-acento { background: var(--acento); color: #07070b; }
.btn-acento:hover:not(:disabled) { filter: brightness(1.1); }
.btn-acento:disabled { opacity: 0.5; }

/* Pantalla completa (se marca con la clase en <html>): el juego se ensancha y gana tamaño la escena y el texto */
html.pantalla-completa #pantalla-juego { max-width: 84rem; }
html.pantalla-completa #pantalla-juego .escena { max-height: 56dvh; }
html.pantalla-completa #narracion { font-size: 1.6rem; line-height: 2.3rem; }
html.pantalla-completa #texto { padding-left: 2.5rem; padding-right: 2.5rem; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.cursor::after {
  content: "\2588";
  margin-left: 2px;
  color: var(--acento);
  animation: parpadeo 1s steps(2) infinite;
}
@keyframes parpadeo { 50% { opacity: 0; } }

.pensando { animation: latido 1.6s ease-in-out infinite; }
@keyframes latido { 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}