/* =============================
   HEADER Y MENÚ PRINCIPAL
   ============================= */
.header {
  background: linear-gradient(90deg, #0f0f0f 60%, #1a0033 100%);
  padding: 2rem 0 1rem 0;
  text-align: center;
  position: relative;
  z-index: 10;
  animation: header-fade-in 1.2s cubic-bezier(.77, 0, .18, 1) 0.2s both;
}

@keyframes header-fade-in {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.header__title {
  font-size: 3rem;
  letter-spacing: 0.15em;
  color: var(--color-fucsia);
  text-shadow: var(--glow-fucsia), 0 0 32px #fff2;
  font-family: 'Orbitron', 'Audiowide', Arial, sans-serif;
  margin: 0 0 0.5rem 0;
  transition: text-shadow 0.3s;
  cursor: pointer;
  user-select: none;
  animation: neon-glow 2.5s infinite alternate;
}

.header__title:hover {
  text-shadow: 0 0 24px #ff00c8, 0 0 48px #ff00c8, 0 0 64px #fff;
}

@keyframes neon-glow {
  0% {
    text-shadow: var(--glow-fucsia);
  }

  100% {
    text-shadow: 0 0 32px #ff00c8, 0 0 64px #fff;
  }
}

.menu {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 0.5rem;
  font-size: 1.1rem;
  background: none;
  padding: 0;
  list-style: none;
  animation: menu-slide-in 1.2s cubic-bezier(.77, 0, .18, 1) 0.6s both;
}

@keyframes menu-slide-in {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menu__item {
  position: relative;
  color: var(--color-cyan);
  text-shadow: var(--glow-cyan);
  cursor: pointer;
  padding: 0.3em 1em;
  border-radius: 2em;
  transition: background 0.2s, color 0.2s, text-shadow 0.2s;
  font-family: 'Audiowide', 'Orbitron', Arial, sans-serif;
  z-index: 1;
}

.menu__item:hover,
.menu__item:focus {
  background: linear-gradient(90deg, #00fff7 0%, #ff00c8 100%);
  color: var(--color-bg);
  text-shadow: 0 0 16px #fff, 0 0 32px #00fff7;
  box-shadow: 0 0 16px #00fff7, 0 0 32px #ff00c8;
}

/* ====== MENÚ DINÁMICO POR TEMA ====== */
body.theme--cyberpunk .menu__item {
  color: #00fff7;
  text-shadow: 0 0 8px #00fff7, 0 0 16px #ff00c8;
}

body.theme--cyberpunk .menu__item:hover,
body.theme--cyberpunk .menu__item:focus,
body.theme--cyberpunk .menu__item.menu__item--active {
  background: linear-gradient(90deg, #00fff7 0%, #ff00c8 100%);
  color: #0f0f0f;
  text-shadow: 0 0 16px #fff, 0 0 32px #00fff7;
  box-shadow: 0 0 16px #00fff7, 0 0 32px #ff00c8;
}

body.theme--steampunk .menu__item {
  color: #b08d57;
  text-shadow: 0 0 8px #b08d57, 0 0 16px #fff8e1;
}

body.theme--steampunk .menu__item:hover,
body.theme--steampunk .menu__item:focus,
body.theme--steampunk .menu__item.menu__item--active {
  background: linear-gradient(90deg, #b08d57 0%, #3e2c1c 100%);
  color: #fff8e1;
  text-shadow: 0 0 16px #fff8e1, 0 0 32px #b08d57;
  box-shadow: 0 0 16px #b08d57, 0 0 32px #3e2c1c;
}

body.theme--fantasy .menu__item {
  color: #39ff14;
  text-shadow: 0 0 8px #39ff14, 0 0 16px #e6d8a7;
}

body.theme--fantasy .menu__item:hover,
body.theme--fantasy .menu__item:focus,
body.theme--fantasy .menu__item.menu__item--active {
  background: linear-gradient(90deg, #e6d8a7 0%, #39ff14 100%);
  color: #0f0f0f;
  text-shadow: 0 0 16px #fff, 0 0 32px #39ff14;
  box-shadow: 0 0 16px #39ff14, 0 0 32px #e6d8a7;
}

body.theme--gothic .menu__item {
  color: #6d2177;
  text-shadow: 0 0 8px #6d2177, 0 0 16px #fff;
}

body.theme--gothic .menu__item:hover,
body.theme--gothic .menu__item:focus,
body.theme--gothic .menu__item.menu__item--active {
  background: linear-gradient(90deg, #6d2177 0%, #000 100%);
  color: #fff;
  text-shadow: 0 0 16px #fff, 0 0 32px #6d2177;
  box-shadow: 0 0 16px #6d2177, 0 0 32px #000;
}

body.theme--urban-magic .menu__item {
  color: #7f5cff;
  text-shadow: 0 0 8px #7f5cff, 0 0 16px #00fff7;
}

body.theme--urban-magic .menu__item:hover,
body.theme--urban-magic .menu__item:focus,
body.theme--urban-magic .menu__item.menu__item--active {
  background: linear-gradient(90deg, #7f5cff 0%, #00fff7 100%);
  color: #0f0f0f;
  text-shadow: 0 0 16px #fff, 0 0 32px #7f5cff;
  box-shadow: 0 0 16px #7f5cff, 0 0 32px #00fff7;
}

/* ====== TÍTULO DINÁMICO POR TEMA ====== */
body.theme--cyberpunk .header__title {
  color: #ff00c8;
  text-shadow: 0 0 24px #ff00c8, 0 0 48px #00fff7, 0 0 64px #fff;
  animation: neon-glow-cyberpunk 2.5s infinite alternate;
}

@keyframes neon-glow-cyberpunk {
  0% {
    text-shadow: 0 0 24px #ff00c8, 0 0 48px #00fff7;
  }

  100% {
    text-shadow: 0 0 32px #ff00c8, 0 0 64px #fff;
  }
}

body.theme--steampunk .header__title {
  color: #b08d57;
  text-shadow: 0 0 24px #b08d57, 0 0 48px #fff8e1, 0 0 64px #3e2c1c;
  animation: neon-glow-steampunk 2.5s infinite alternate;
}

@keyframes neon-glow-steampunk {
  0% {
    text-shadow: 0 0 24px #b08d57, 0 0 48px #fff8e1;
  }

  100% {
    text-shadow: 0 0 32px #b08d57, 0 0 64px #fff8e1;
  }
}

body.theme--fantasy .header__title {
  color: #39ff14;
  text-shadow: 0 0 24px #39ff14, 0 0 48px #e6d8a7, 0 0 64px #fff;
  animation: neon-glow-fantasy 2.5s infinite alternate;
}

@keyframes neon-glow-fantasy {
  0% {
    text-shadow: 0 0 24px #39ff14, 0 0 48px #e6d8a7;
  }

  100% {
    text-shadow: 0 0 32px #39ff14, 0 0 64px #fff;
  }
}

body.theme--gothic .header__title {
  color: #6d2177;
  text-shadow: 0 0 24px #6d2177, 0 0 48px #fff, 0 0 64px #000;
  animation: neon-glow-gothic 2.5s infinite alternate;
}

@keyframes neon-glow-gothic {
  0% {
    text-shadow: 0 0 24px #6d2177, 0 0 48px #fff;
  }

  100% {
    text-shadow: 0 0 32px #6d2177, 0 0 64px #fff;
  }
}

body.theme--urban-magic .header__title {
  color: #7f5cff;
  text-shadow: 0 0 24px #7f5cff, 0 0 48px #00fff7, 0 0 64px #fff;
  animation: neon-glow-urban 2.5s infinite alternate;
}

@keyframes neon-glow-urban {
  0% {
    text-shadow: 0 0 24px #7f5cff, 0 0 48px #00fff7;
  }

  100% {
    text-shadow: 0 0 32px #7f5cff, 0 0 64px #fff;
  }
}

body.theme--steampunk .header {
  background: transparent !important;
}

body.theme--steampunk .header__title {
  background: transparent !important;
}

body.theme--steampunk .menu {
  background: transparent !important;
}

body.theme--fantasy .header {
  background: transparent !important;
}

body.theme--fantasy .header__title {
  background: transparent !important;
}

body.theme--fantasy .menu {
  background: transparent !important;
}

body.theme--gothic .header {
  background: transparent !important;
}

body.theme--gothic .header__title {
  background: transparent !important;
}

body.theme--gothic .menu {
  background: transparent !important;
}

body.theme--urban-magic .header {
  background: transparent !important;
}

body.theme--urban-magic .header__title {
  background: transparent !important;
}

body.theme--urban-magic .menu {
  background: transparent !important;
}