body {
  font-family: Arial, sans-serif;
  text-align: center;
  background: none; /* Asegura que el video de fondo sea visible */
  color: #00bfff;
  /* overflow: hidden; */ /* Descomentado para permitir scroll en los historiales si exceden la altura */
  margin: 0;
  padding: 0;
}
input {
  margin: 5px;
  padding: 8px;
}
/* Eliminar el estilo por defecto de button para que .action-button lo tome */
button {
  /* Resetting default browser button styles */
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

/* Añadimos z-index a los elementos de la UI para que estén por encima de la carta */
#game-container h3,
#game-container p,
#game-container button:not(.music-button) { /* Excluye el botón de música que ya tiene su z-index */
    position: relative; /* Necesario para que z-index funcione */
    z-index: 50; /* Un valor alto para que esté por encima de la carta */
}

/* ESTILO PARA EL BIENVENIDO Y EL CORREO: */
#game-container h3 {
    margin-top: 60px; /* Aumentado para moverlo más abajo */
    margin-bottom: 30px; /* Mantener la separación con los recuadros de sobres */
    font-size: 1.8em; /* Un poco más grande */
    color: #ffd700; /* Color dorado para el "Bienvenido," */
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6); /* Un ligero resplandor */
}

#user-email {
    font-weight: bold; /* Hacer el correo más negrita */
    color: #ffffff; /* Color blanco para el correo */
    text-decoration: underline; /* Subrayado sutil */
}

/* Este margin afecta SÓLO a los botones de "Abrir Sobre Normal/Raro" */
.pack-button { /* Se mantiene esta clase si la usas para algo más, pero no afectará el diseño de la fila */
  margin: 10px 0;
  padding: 10px 20px;
}

#video-background {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  background-size: cover;
}

#myVideo {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover; /* Asegura que el video cubra todo el área */
}

.content {
  position: relative;
  z-index: 1;
  padding: 20px;
}

.auth-container, .game-container {
  background-color: rgba(0, 0, 0, 0.7);
  padding: 20px;
  border-radius: 8px;
  max-width: 400px;
  /* Ajusta el margin-top de .game-container para mover TODO el bloque (email, sobres, historial) */
  margin: 50px auto; /* Mantener el ajuste global si ya funcionaba bien */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Ajuste para el contenedor principal del juego */
.game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px; /* Ajusta este valor para mover todo el contenido hacia abajo */
}

.action-button {
  background-color: #4CAF50; /* Green */
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  border: none; /* Asegura que no tenga borde si button ya lo reseteó */
}

/* Iniciar Sesión: Verde */
.login-button {
  background-color: #247868;
}

.login-button:hover {
  background-color: #218838;
}

/* Registrarse: Azul */
.register-button {
  background-color: #17a2b8;
}

.register-button:hover {
  background-color: #138496;
}

.logout-button {
  background-color: #f44336;
}

.logout-button:hover {
  background-color: #da190b;
}

.link-button {
  color: #00BFFF; /* Un azul más brillante */
  text-decoration: underline;
  cursor: pointer;
  display: block; /* Para que ocupe su propia línea si es necesario */
  margin-top: 10px;
}

.link-button:hover {
  color: #0080FF;
}

.google-button {
  background-color: #39466f;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  display: flex; /* Para alinear el icono y el texto */
  align-items: center;
  justify-content: center;
  margin: 10px auto; /* Centrar el botón */
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.25);
  transition: background-color 0.3s ease;
}

.google-button:hover {
  background-color: #357ae8;
}

.google-icon {
  margin-right: 10px;
  width: 20px;
  height: 20px;
}

.resend-email-text {
  font-size: 0.9em;
  color: #bbb;
  margin-top: 15px;
}

.resend-email-text a {
  color: #00BFFF;
  text-decoration: underline;
}

.resend-email-text a:hover {
  color: #0080FF;
}

/* Estilos de la carta */
.card-display-area {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 250px; /* Asegura espacio para la carta */
  perspective: 1000px; /* Para el efecto 3D */
  /* Este margin afecta el espacio entre los botones de abrir sobre y la carta/historial */
  margin: 30px 0; /* Ajusta estos valores para mover el área de la carta */
  position: relative; /* Para posicionar la carta dentro */
  z-index: 10; /* Asegura que la carta esté por encima de otros elementos */
}

.card {
  width: 150px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 3s ease-out; /* Duración y tipo de animación */
  cursor: pointer;
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}

.card-back {
  background: linear-gradient(135deg, #4b0082, #8a2be2); /* Violeta oscuro a azul violeta */
  color: white;
  font-size: 1.5em;
  font-weight: bold;
  transform: rotateY(0deg);
  border: 4px solid gold; /* Borde dorado */
  background-image: url('../images/card-back.png'); /* Ruta a la imagen de la parte trasera */
  background-size: cover;
  background-position: center;
}

.card-front {
  background-color: #f0f0f0; /* Fondo claro para las imágenes */
  color: #333;
  transform: rotateY(180deg); /* Oculto por defecto */
}

.card-front img {
  max-width: 100%;
  max-height: 80%; /* Deja espacio para el texto */
  border-radius: 8px;
  object-fit: contain; /* Asegura que la imagen se ajuste sin distorsionarse */
}

.card-front .rarity-text {
  font-size: 0.8em;
  margin-top: 5px;
  font-weight: bold;
}

/* Animación de giro */
.card.spinning {
  transform: rotateY(180deg);
}

/* Estilos de rareza */
.rarity-common { border: 3px solid grey; }
.rarity-uncommon { border: 3px solid green; }
.rarity-rare { border: 3px solid blue; }
.rarity-epic { border: 3px solid purple; }
.rarity-legendary { border: 3px solid orange; }
.rarity-ultralegendary { border: 3px solid red; } /* Nuevo estilo para ultralegendaria */

/* Historial de Cartas */
 /* Styles for Card History (General) */
    #card-history-container, #all-students-history-container, #student-cards-view-container {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.9);
      z-index: 1001;
      overflow-y: auto;
      padding: 20px;
      box-sizing: border-box;
      backdrop-filter: blur(5px);
    }
    #card-history-container h2, #all-students-history-container h2, #student-cards-view-container h2 {
        color: #fff;
        margin-top: 0;
    }
    #card-history-grid, #student-cards-grid { /* Reutilizamos la misma clase para las grillas de cartas */
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 15px;
      padding: 10px;
      max-width: 1200px;
      margin: 20px auto;
    }
    .history-card {
      background: #333;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 10px;
    }
    .history-card img {
      width: 100%;
      height: auto;
      max-height: 200px;
      object-fit: contain;
      border-bottom: 1px solid #555;
    }
    .history-card p {
      margin: 8px 0 0;
      font-size: 0.9em;
      color: #ccc;
    }
    .history-card .rarity-label {
        font-weight: bold;
        text-transform: capitalize;
        padding: 2px 5px;
        border-radius: 3px;
        margin-top: 5px;
    }
    .rarity-common { background-color: #777; color: #eee; }
    .rarity-uncommon { background-color: #28a745; color: #fff; }
    .rarity-rare { background-color: #007bff; color: #fff; }
    .rarity-epic { background-color: #6f42c1; color: #fff; }
    .rarity-legendary { background-color: #ffc107; color: #333; }

    #close-history-button, #close-all-students-history-button, #close-student-cards-view-button {
      position: absolute;
      top: 15px;
      right: 15px;
      background: #dc3545;
      color: white;
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      font-size: 1.5em;
      cursor: pointer;
      z-index: 1002;
    }
    #close-history-button:hover, #close-all-students-history-button:hover, #close-student-cards-view-button:hover {
        background: #c82333;
    }

    /* Styles for All Students History (New) */
    #students-list-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
        padding: 20px;
        max-width: 1000px;
        margin: 20px auto;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 10px;
    }
    .student-item {
        background: #222;
        padding: 15px;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.2s ease;
        text-align: left;
    }
    .student-item:hover {
        background-color: #444;
    }
    .student-item p {
        margin: 5px 0;
        color: #ddd;
    }
    .student-item .student-email {
        font-weight: bold;
        color: #fff;
        word-break: break-all; /* Para correos largos */
    }
    .student-item .pack-counts {
        font-size: 0.9em;
        color: #aaa;
    }

/* Estilo para el botón de música */
.music-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  z-index: 100; /* Para que esté por encima de todo */
  transition: background-color 0.3s ease;
}

.music-button:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
.card {
  width: 180px;
  height: 250px;
  background: #444;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: none;
  z-index: 10;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.card .question-mark-img {
  z-index: 2;
  transition: opacity 0.3s ease-out;
}

.card .character-img {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

@keyframes spin {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(1080deg); }
}

.card.spinning {
  animation: spin 3s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

@keyframes card-grow {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

.card.revealed-and-grow {
  animation: card-grow 0.5s ease-out forwards;
  transform-origin: center;
  transform: rotateY(0deg);
}
/* --- ADAPTACIÓN RESPONSIVA PARA MÓVILES Y TABLETS --- */
@media (max-width: 768px) {
  h2, h3 {
    font-size: 1.2em;
  }

  input {
    width: 90%;
    max-width: 300px;
    font-size: 16px;
  }

  /* Los botones individuales se ajustarán al ancho completo y tendrán margen vertical */
  .action-button {
    width: 90%; /* Ancho casi completo en móviles */
    max-width: 300px; /* Límite de ancho */
    margin: 5px auto; /* Centrar y añadir margen vertical */
    font-size: 16px;
    padding: 10px 15px;
  }

  .pack-button { /* Si lo sigues usando, ajústalo aquí */
    margin: 20px auto;
  }

  .google-button {
    width: 90%;
    max-width: 300px;
    font-size: 14px;
    padding: 8px 12px;
    margin: 10px auto;
  }

  .google-button .material-symbols-outlined {
    font-size: 20px;
  }

  .card-display-area {
    margin-top: 0;
    height: 300px;
    padding: 10px;
  }

  .card {
    width: 198px;
    height: 275px;
  }

  .music-button {
    width: 35px;
    height: 35px;
    bottom: 10px;
    left: 10px;
    font-size: 10px;
  }

  .history-grid,
  .students-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
  }

  .history-card img {
    max-height: 150px;
  }

  .student-item {
    padding: 10px;
  }

  #login-container input {
    width: 80%;
  }
}

@media (max-width: 480px) {
  .card {
    width: 165px;
    height: 242px;
  }

  .pack-button, .action-button {
    font-size: 14px;
    padding: 8px 16px;
  }

  .google-button .material-symbols-outlined {
    font-size: 18px;
  }

  .welcome-row {
    flex-direction: column; /* Apilar elementos verticalmente */
    align-items: center; /* Centrar elementos */
    gap: 10px; /* Espacio entre elementos */
  }

  .coin-display {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100; /* Asegura que esté por encima de otros elementos */
  }
}
#bg-video, #bg-image {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

#bg-image {
  display: none;
}

@media (max-width: 767px) {
  #bg-video {
    display: none;
  }
  #bg-image {
    display: block;
  }
}
.auth-buttons {
  text-align: center;
  margin-top: 10px;
}

.auth-buttons .action-button {
  display: inline-block;
  margin: 0 10px;
}
/* Estilos para abrir sobres */
.open-normal-pack-button {
  background-color: #4CAF50; /* Verde */
}

.open-normal-pack-button:hover {
  background-color: #45a049;
}

.open-rare-pack-button {
  background-color: #008CBA; /* Azul */
}

.open-rare-pack-button:hover {
  background-color: #007bb5;
}

/* Estilos específicos para "Ver mi Historial de Cartas" */
.view-my-history-button {
  background-color: #555555; /* Gris oscuro */
}

.view-my-history-button:hover {
  background-color: #333333;
}

/* Estilos específicos para "Ver Historial de Alumnos" */
.view-all-students-history-button {
  background-color: #800080; /* Morado */
}

.view-all-students-history-button:hover {
  background-color: #660066;
}

/* Opcional: diseño adaptado a móviles */
@media (max-width: 480px) {
  .auth-buttons .action-button {
    display: block;
    width: 90%;
    max-width: 300px;
    margin: 10px auto;
  }
}

/* Restablece los márgenes de los botones individuales a 0, serán controlados por el gap del Flexbox */
.view-my-history-button,
.view-all-students-history-button,
.open-normal-pack-button,
.open-rare-pack-button,
.logout-button {
    margin: 0;
}

.welcome-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px; /* Espacio entre los elementos */
  flex-wrap: wrap; /* Permite que los elementos salten de línea en pantallas pequeñas */
}

.large-button {
  font-size: 1.1em;
  padding: 10px 20px;
}

@media (max-width: 768px) {
  .welcome-row {
    flex-direction: column; /* Ensure elements stack vertically on smaller screens */
    align-items: center; /* Center items when stacked */
    gap: 10px; /* Space between stacked items */
  }
}

/* NUEVOS ESTILOS PARA LOS RECUADROS DE SOBRES */
.pack-info-box {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 15px;
  border-radius: 8px;
  margin: 8px auto;
  width: fit-content;
  min-width: 150px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.25),
    inset 0 1px 2px rgba(255, 255, 255, 0.15);
  text-align: center;
  color: #f8f8f8;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pack-info-box:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 10px rgba(255, 255, 255, 0.2),
    inset 0 2px 3px rgba(255, 255, 255, 0.2);
}

/* Color del número: blanco con brillo suave */
#normal-packs-count,
#rare-packs-count {
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
  font-weight: 700;
}

/* Texto dentro */
.pack-info-box p {
  margin: 0;
  line-height: 1.2;
}




/* ESTILO SIMPLIFICADO PARA LA FILA DE BOTONES DE JUEGO */
.game-buttons-row {
  display: flex; /* Habilita Flexbox */
  justify-content: center; /* Centra los botones horizontalmente */
  flex-wrap: wrap; /* Permite que los botones salten de línea en pantallas pequeñas */
  gap: 15px; /* Espacio entre los botones */
  margin-top: 20px; /* Margen superior para separarlo de los contadores de sobres */
  margin-bottom: 20px; /* Margen inferior para separarlo de la carta */
}

/* Media query para móviles en la fila de botones de juego */
@media (max-width: 768px) {
  .game-buttons-row {
    flex-direction: column; /* Apilar los botones en pantallas pequeñas */
    align-items: center; /* Centrar los botones apilados */
    gap: 10px; /* Reducir el espacio entre ellos si están apilados */
  }

  .game-buttons-row .action-button {
    width: 90%; /* Que ocupen casi todo el ancho disponible */
    max-width: 300px;
    margin: 0 auto; /* Eliminar margen vertical si ya lo controla el gap */
  }
}
.full-screen-flash {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255, 255, 0, 0.6);
  z-index: 9999;
  animation: flash-background 0.5s forwards;
  pointer-events: none;
}
@keyframes flash-background {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}
.ultralegendary-flash {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255, 0, 255, 0.7);
  z-index: 9999;
  animation: flash-ultralegendary 1.5s forwards;
  pointer-events: none;
}
@keyframes flash-ultralegendary {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

.legendary-highlight {
  background: yellow;
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  opacity: 1;
  z-index: 1;
  animation: highlight-fade 0.5s forwards;
}
@keyframes highlight-fade {
  0% { opacity: 0.8; }
  100% { opacity: 0; }
}

.coin-display {
  display: flex;
  align-items: center;
  background-color: rgba(255, 223, 0, 0.2); /* Fondo dorado claro */
  padding: 5px 10px;
  border-radius: 8px;
  color: #ffd700; /* Color dorado para el texto */
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra sutil */
}

.coin-display i {
  margin-right: 5px; /* Espacio entre el icono y el texto */
  color: #ffd700; /* Color dorado para el icono */
}

/* Estilos para hacer destacar el botón del mercado usando ID */
#market-button {
  background: linear-gradient(145deg, #4CAF50, #2E7D32) !important; /* Gradiente verde más atractivo */
  color: white !important;
  border: 2px solid #8BC34A !important; /* Borde verde claro */
  box-shadow: 0 0 15px rgba(139, 195, 74, 0.7) !important; /* Brillo verde más intenso */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; /* Sombra sutil en el texto */
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  font-weight: bold !important;
  letter-spacing: 0.5px !important;
  animation: pulse 2s infinite !important; /* Animación de pulsación */
  z-index: 51 !important; /* Asegurarse que está por encima de otros elementos */
}

#market-button:hover {
  background: linear-gradient(145deg, #5CBA60, #3E8E41) !important;
  box-shadow: 0 0 20px rgba(139, 195, 74, 0.9) !important; /* Brillo más intenso al pasar el mouse */
  transform: translateY(-3px) !important; /* Mayor efecto de elevación */
  color: #FFFFFF !important; /* Texto más brillante al pasar el mouse */
}

#market-button:active {
  transform: translateY(1px) !important; /* Efecto de presión */
  box-shadow: 0 0 10px rgba(139, 195, 74, 0.5) !important; /* Sombra reducida al presionar */
}

#market-button:before {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: rgba(255, 255, 255, 0.2) !important; /* Brillo más visible */
  transform: rotate(30deg) !important;
  animation: shine 3s infinite linear !important;
  pointer-events: none !important;
}

/* Ajuste para mover el icono de monedas un poco más abajo solo en ordenadores */
@media (min-width: 769px) {
  #market-button {
    margin-top: 50px !important; /* Añade espacio arriba del botón solo en pantallas grandes */
    display: block !important; /* Asegura que ocupe su propia línea */
  }
  
  .coin-display {
    margin-top: 50px !important; /* Añade espacio arriba del icono de monedas en pantallas grandes */
  }
}

/* Añadimos la animación shine que faltaba */
@keyframes shine {
  0% { transform: translateX(-100%) rotate(30deg); }
  100% { transform: translateX(100%) rotate(30deg); }
}

/* Añadimos la animación pulse que faltaba */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Estilos para la sección de actualizaciones */
.updates-section {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  margin: 20px 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  color: #333;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.updates-section h3 {
  color: #333;
  margin-top: 0;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  text-align: center;
  font-size: 1.5em;
}

.update-item {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #ddd;
}

.update-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.update-version {
  font-weight: bold;
  color: #007bff;
  font-size: 1.1em;
}

.update-date {
  font-size: 0.85em;
  color: #6c757d;
  margin-bottom: 5px;
}

.update-description {
  margin-top: 5px;
  line-height: 1.4;
}

.update-features {
  margin-top: 8px;
  padding-left: 20px;
}

.update-features li {
  margin-bottom: 3px;
  line-height: 1.3;
}

/* Estilos responsivos para la sección de actualizaciones */
@media (max-width: 768px) {
  .updates-section {
    padding: 10px;
    margin: 15px 10px;
  }
  
  .updates-section h3 {
    font-size: 1.3em;
  }
  
  .update-version {
    font-size: 1em;
  }
  
  .update-features {
    padding-left: 15px;
  }
}

/* Estilo visual para el botón de Novedades (ya posicionado correctamente) */
#updates-button {
  background-color: #ff9800; /* Color naranja característico */
  color: white;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* Nota: El padding, el borde redondeado y las transiciones 
    ya las hereda de la clase .nav-button.
  */
}

#updates-button:hover {
  background-color: #e68a00; /* Naranja más oscuro al pasar el ratón */
  transform: scale(1.05); /* Un efecto de zoom ligeramente más pronunciado */
}

/* Ajuste responsivo para el botón de novedades */
@media (max-width: 768px) {
  #updates-button {
    position: fixed !important; /* Forzar posición fija en móviles */
    top: auto !important; /* Anular posición top */
    bottom: 20px !important; /* Colocarlo en la parte inferior */
    right: 20px !important;
    font-size: 0.9em;
    padding: 8px 12px;
    border-radius: 50%; /* Hacerlo circular como una campanita */
    width: 40px;
    height: 40px;
  }
  
  #updates-button i {
    margin-right: 0; /* Quitar margen del icono en móviles */
    font-size: 1.2em; /* Hacer el icono un poco más grande */
  }
  
  #updates-button span {
    display: none; /* Ocultar el texto "Novedades" en móviles */
  }
}

/* Estilos para el modal de actualizaciones */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7);
  animation: fadeIn 0.3s;
}

.modal-content {
  background-color: #1e1e24; /* Fondo oscuro */
  color: #e0e0e0; /* Texto principal claro */
  border: 1px solid #444;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  max-width: 850px;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  animation: slideDown 0.4s;
  
  /* --- ✨ INICIO DE LA CORRECCIÓN DE CENTRADO --- */
  
  /* 1. Quitamos el margen que lo empujaba hacia abajo */
  margin: 0; /* Antes era '10% auto' */
  
  /* 2. Lo posicionamos de forma absoluta dentro del modal padre */
  position: absolute;
  
  /* 3. Lo movemos al centro exacto del viewport */
  top: 50%;
  left: 50%;
  
  /* 4. Usamos 'transform' para centrarlo por su propio eje (el truco) */
  transform: translate(-50%, -50%);
  
  /* 5. Le damos más altura y el 'overflow-y' se encargará del scroll */
  max-height: 80vh; /* Antes era '80vh' */
  
  /* --- FIN DE LA CORRECCIÓN --- */
  
  overflow-y: auto; /* Esto ya lo tenías y es crucial */
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.modal-header h3 {
  margin: 0;
  color: #333;
}

.close-modal {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s;
}

.close-modal:hover {
  color: #333;
}

.update-item {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #ddd;
}

.update-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.update-version {
  font-weight: bold;
  color: #007bff;
  font-size: 1.1em;
}

.update-date {
  font-size: 0.85em;
  color: #6c757d;
  margin-bottom: 5px;
}

.update-description {
  margin-top: 5px;
  line-height: 1.4;
  color: #333;
}

.update-features {
  margin-top: 8px;
  padding-left: 20px;
  color: #333;
}

.update-features li {
  margin-bottom: 3px;
  line-height: 1.3;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes slideDown {
  from {transform: translateY(-50px); opacity: 0;}
  to {transform: translateY(0); opacity: 1;}
}

/* Estilos responsivos para el modal */
@media (max-width: 768px) {
  .modal-content {
    width: 90%;
    padding: 15px;
  }
}

/* Estilos para el botón flotante de novedades */
.floating-button {
  transition: all 0.3s ease;
  transform: scale(1);
}

.floating-button:hover {
  transform: scale(1.05);
}

/* Asegúrate de que el botón sea visible en dispositivos móviles */
@media (max-width: 768px) {
  .floating-button {
    top: auto !important;
    bottom: 20px !important;
    right: 20px !important;
    font-size: 0.9em;
    padding: 8px 12px;
  }
}
/* Botón de Clasificación */
#ranking-button {
  background: linear-gradient(135deg, #ff6f61, #ff3d7f); /* Gradiente rojo-rosa */
  color: #fff;
  font-weight: bold;
  font-size: 1.1em;
  padding: 10 px 25px;
  border: 2px solid #ff99aa;
  border-radius: 50px; /* Botón más redondeado */
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 52;
  box-shadow: 0 0 15px rgba(255, 61, 127, 0.7);
  transition: all 0.3s ease;
  animation: pulseRanking 2s infinite;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Efecto de brillo que cruza el botón */
#ranking-button::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(25deg);
  animation: shineRanking 3s infinite linear;
  pointer-events: none;
}

/* Hover más intenso */
#ranking-button:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 0 25px rgba(255, 61, 127, 1);
}

/* Active (cuando se pulsa) */
#ranking-button:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 0 10px rgba(255, 61, 127, 0.5);
}

/* Animaciones */
@keyframes shineRanking {
  0% { transform: translateX(-100%) rotate(25deg); }
  100% { transform: translateX(100%) rotate(25deg); }
}

@keyframes pulseRanking {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* --- INICIO DE LA SOLUCIÓN --- */

/* --- CSS Botón ARENA (Sin Partículas, Con Brillo Animado) --- */

#combat-button {
  position: relative;
  overflow: hidden; /* Lo volvemos a poner, ya no hay partículas */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 3rem;
  font-weight: bold;
  letter-spacing: 0.8px;
  color: #fff;
  border: 2px solid #ff6f61;
  border-radius: 12px;
  cursor: pointer;
  background: linear-gradient(145deg, #e53935, #b71c1c);
  
  /* Brillo (box-shadow) original */
  box-shadow: 0 0 20px rgba(244, 67, 54, 0.8), 0 0 40px rgba(255, 111, 97, 0.6);
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  transition: all 0.3s ease;

  /* NUEVO: Animación de brillo (glow) */
  animation: glowing-arena 2.5s infinite ease-in-out;
}

/* NUEVO: Keyframes para la animación de brillo */
@keyframes glowing-arena {
  0% {
    box-shadow: 0 0 20px rgba(244, 67, 54, 0.8), 0 0 40px rgba(255, 111, 97, 0.6);
  }
  50% {
    /* Hacemos el brillo un poco más intenso en la mitad de la animación */
    box-shadow: 0 0 30px rgba(244, 67, 54, 0.9), 0 0 60px rgba(255, 111, 97, 0.7);
  }
  100% {
    box-shadow: 0 0 20px rgba(244, 67, 54, 0.8), 0 0 40px rgba(255, 111, 97, 0.6);
  }
}

/* Texto central (sin cambios) */
#combat-button > span {
  position: relative;
  z-index: 3;
}

/* Espadas (Forzadas a ser visibles)
  Esto anulará cualquier CSS que las oculte. 
*/
#combat-button i.fa-sword {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  color: #fff;
  z-index: 2; /* Detrás del texto */
}

/* Posición de las espadas (sin cambios) */
.sword-left { left: 8px; }
.sword-right { right: 8px; }


/* Efectos Hover/Active (Modificados para la animación) */
#combat-button:hover {
  transform: scale(1.05);
  animation: none; /* Pausamos la animación al pasar el ratón */
  box-shadow: 0 0 25px rgba(244, 67, 54, 0.9), 0 0 50px rgba(255, 111, 97, 0.7);
}

#combat-button:active {
  transform: scale(0.95);
  box-shadow: 0 0 10px rgba(244, 67, 54, 0.5) inset;
}

/* --- FIN DEL CSS --- */







/* --- FIX FINAL: Alinear market/combat/ranking y mantener updates fijo --- */

/* Fila de botones */
.welcome-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
}

/* Botones alineados horizontalmente */
.welcome-row .nav-button,
.welcome-row .action-button {
  display: inline-flex 
  align-items: center !important;
  margin-top: 0 !important;
  vertical-align: middle !important;
  align-self: center !important;
}

/* Asegurar que estos tres botones están en línea */
#market-button,
#combat-button,
#ranking-button {
  margin-top: 0 !important;
  display: inline-flex;
}

/* Ajustes del título para no empujar los botones */
#game-container h3 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Aplicar también en pantallas grandes */
@media (min-width: 769px) {
#market-button,
#ranking-button,
#achievements-button {
  margin-top: 0 !important;
  display: inline-flex;
}

/* Combat y Achievements controlados por JS */
#combat-button,
#achievements-button {
  margin-top: 0 !important;
  display: inline-flex; 
}


  #updates-button {
    top: 90px !important; /* mismo valor */
    right: 35px !important;
  }
}

/* --- FIX: Recolocar coin-display debajo de la línea de bienvenida --- */

/* Contenedor de monedas */
/* 🎮 Estilo mejorado del contador de monedas sin alterar posición */
.coin-display {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 20px !important; /* Mantiene tu separación original */
  margin-bottom: 30px !important;
  z-index: 5 !important; /* Conserva tu jerarquía */
  gap: 4px;
  padding: 5px 10px;

  /* 💎 Apariencia moderna */
  border-radius: 25px;
  background: linear-gradient(145deg, #3a2f0b, #1f1a05);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.5),
    inset 0 2px 3px rgba(255, 255, 255, 0.2),
    0 0 15px rgba(255, 215, 0, 0.3);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff8dc;
  letter-spacing: 1px;
  animation: pulseGlow 2.5s infinite ease-in-out;
  cursor: default;
}

/* Ajuste en pantallas grandes */
@media (min-width: 769px) {
  .coin-display {
    margin-top: 30px !important;
    margin-bottom: 40px !important;
  }
}

/* 💰 Icono de la moneda */
.coin-display i {
  font-size: 1.8rem;
  color: #ffd700;
  text-shadow:
    0 0 10px #ffd700,
    0 0 20px #ffea00,
    0 0 40px rgba(255, 255, 0, 0.4);
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
  animation: coinSpin 3s linear infinite;
}

/* Texto del balance */
.coin-display #coin-balance {
  color: #fff8dc;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
  transition: transform 0.3s ease, color 0.3s ease;
}

/* Efecto de incremento */
.coin-balance-animate {
  transform: scale(1.3);
  color: #ffffff;
}

/* ✨ Animación de resplandor */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow:
      0 4px 10px rgba(0, 0, 0, 0.5),
      inset 0 2px 3px rgba(255, 255, 255, 0.2),
      0 0 10px rgba(255, 215, 0, 0.2);
  }
  50% {
    box-shadow:
      0 4px 10px rgba(0, 0, 0, 0.5),
      inset 0 2px 3px rgba(255, 255, 255, 0.25),
      0 0 20px rgba(255, 215, 0, 0.6);
  }
}

/* 🔄 Rotación del icono */
@keyframes coinSpin {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}



/* Opcional: Aseguramos que el título y botones no se vean tapados */
#game-container h3,
.welcome-row {
  position: relative;
  z-index: 10;
}


/* --- BOTÓN DE LOGROS (ACHIEVEMENTS) --- */
#achievements-button {
  background: linear-gradient(135deg, #00bcd4, #008ba3); /* Gradiente turquesa-azul */
  color: #fff;
  font-weight: bold;
  font-size: 1.1em;
  padding: 4px 20px;
  border: 2px solid #4dd0e1; /* Borde azul claro */
  border-radius: 50px; /* Estilo redondeado como ranking */
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 52;
  box-shadow: 0 0 15px rgba(0, 188, 212, 0.7);
  transition: all 0.3s ease;
  animation: pulseAchievements 2s infinite;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* Espacio entre icono y texto */
}

/* Icono de trofeo */
#achievements-button::after {
  content: "🏆"; /* Puedes cambiar por 🎖️ o 🥇 */
  font-size: 1.3em;
  transform: translateY(1px);
  transition: transform 0.3s ease;
}

/* Efecto de brillo que cruza el botón */
#achievements-button::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(25deg);
  animation: shineAchievements 3s infinite linear;
  pointer-events: none;
}

/* Hover más intenso */
#achievements-button:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 0 25px rgba(0, 188, 212, 1);
}

/* Animación del icono */
#achievements-button:hover::after {
  transform: translateY(-2px) rotate(10deg) scale(1.1);
}

/* Active (cuando se pulsa) */
#achievements-button:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 0 10px rgba(0, 188, 212, 0.5);
}

/* Animaciones */
@keyframes shineAchievements {
  0% { transform: translateX(-100%) rotate(25deg); }
  100% { transform: translateX(100%) rotate(25deg); }
}

@keyframes pulseAchievements {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* 🌍 Footer del sitio */
/* Estructura general de la página */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1; /* ocupa el espacio restante */
}

/* Footer minimalista y anclado al fondo */
/* Footer minimalista y anclado al fondo */
.site-footer {
  /* CAMBIO 1: Gris más claro (rgba(50, 50, 50, 0.7) en lugar de rgba(0, 0, 0, 0.7)) */
  background-color: rgba(50, 50, 50, 0.7); 
  color: #ccc;
  text-align: center;
  /* CAMBIO 2: Reducir el padding vertical a 3px para hacerlo aún más fino */
  padding: 3px 10px; 
  font-size: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05); 
  position: fixed; 
  bottom: 0; 
  width: 100%; 
  z-index: 1000; 
}

/* Pseudo-elemento opcional de “resplandor” muy sutil */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px; 
  background: rgba(255, 255, 255, 0.03); 
}

/* Enlaces del footer y Separadores se mantienen iguales */
.site-footer a {
  color: #ccc;
  text-decoration: none;
  margin: 0 5px;
  transition: color 0.3s ease;
}

.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer .separator {
  margin: 0 5px;
}
.instagram-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}

.instagram-link i {
  font-size: 1.1rem;
  color: #E4405F;
  transition: transform 0.3s ease, color 0.3s ease;
}

.instagram-link:hover i {
  transform: rotate(10deg) scale(1.2);
  color: #ff7e94;
}

@media (max-width: 768px) {
  .site-footer {
    /* Reducir aún más el padding horizontal en móviles */
    padding: 3px 5px; 
    /* Reducir el tamaño de la fuente para que el texto quepa mejor */
    font-size: 0.75rem; /* Un poco más pequeña que 0.9rem */
  }

  .site-footer a,
  .site-footer .separator {
    /* Reducir el espacio entre los elementos */
    margin: 0 3px;
  }
}

/* --- ESTILOS MODO MANTENIMIENTO --- */
#maintenance-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 25, 47, 0.95); /* Un fondo oscuro y profesional */
  color: white;
  display: flex; /* Usamos flex para centrar fácilmente */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 9999; /* El z-index más alto para que esté por encima de todo */
  font-family: Arial, sans-serif;
  backdrop-filter: blur(5px); /* Efecto de desenfoque para el fondo */
}

#maintenance-container h1 {
  font-size: 3em;
  margin-bottom: 20px;
  color: #ffd700; /* Color dorado */
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

#maintenance-container p {
  font-size: 1.2em;
  max-width: 80%;
  line-height: 1.5;
}

/* === EFECTO DE HALLOWEEN PARA CARTAS MÍTICAS === */
.halloween-flash {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle, rgba(255, 140, 0, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%);
  z-index: 9999;
  pointer-events: none;
  animation: halloween-flash-anim 1.2s ease-out forwards;
}

/* Animación parpadeante y con degradado anaranjado */
@keyframes halloween-flash-anim {
  0% { opacity: 0; }
  10% { opacity: 1; background: radial-gradient(circle, rgba(255, 165, 0, 0.9) 0%, rgba(0, 0, 0, 0.8) 100%); }
  25% { opacity: 0.5; background: radial-gradient(circle, rgba(255, 69, 0, 0.7) 0%, rgba(0, 0, 0, 0.9) 100%); }
  40% { opacity: 1; background: radial-gradient(circle, rgba(255, 120, 0, 0.85) 0%, rgba(0, 0, 0, 0.95) 100%); }
  70% { opacity: 0.3; }
  100% { opacity: 0; }
}

/* Bordes y color para rareza mítica */
.rarity-mythical {
  border: 3px solid #ff7518; /* Naranja calabaza */
  box-shadow: 0 0 12px rgba(255, 140, 0, 0.7);
}

/* === EFECTO HALLOWEEN COMPLEMENTARIO === */
.halloween-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 10000;
  overflow: hidden;
}

.halloween-item {
  position: absolute;
  bottom: -50px;
  font-size: 3rem;
  opacity: 0;
  animation: floatHalloween 1.8s ease-out forwards;
}

@keyframes floatHalloween {
  0% {
    transform: translateY(0) scale(0.8);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  70% {
    transform: translateY(-200px) rotate(10deg) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translateY(-350px) rotate(-10deg) scale(1.3);
    opacity: 0;
  }
}

/* === Ajuste visual para cartas míticas (mantiene proporción y tamaño estándar) === */
.card.mythical-card {
  width: 180px;           /* igual que las demás */
  height: 250px;          /* igual que las demás */
  background: #000;
  border: 3px solid #ff7518; /* borde calabaza */
  box-shadow: 0 0 15px rgba(255, 120, 0, 0.7);
  overflow: hidden;       /* recorta bordes si sobresale */
  position: relative;
}

/* Imagen de carta mítica: ajusta proporción sin recortar */
.card.mythical-card img.character-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

/* Efecto sutil de zoom al revelarse */
.card.mythical-card.revealed-and-grow img.character-img {
  transform: translate(-50%, -50%) scale(1.05);
}


/* === ESTILOS NAVIDAD (EVENTO ESPECIAL) === */

/* 1. Flash de fondo: Degradado festivo (Rojo, Verde, Dorado) */
.christmas-flash {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  /* Degradado radial festivo */
  background: radial-gradient(circle, rgba(255, 0, 0, 0.6) 0%, rgba(0, 128, 0, 0.6) 50%, rgba(255, 215, 0, 0.4) 100%);
  z-index: 9999;
  pointer-events: none;
  animation: christmas-flash-anim 1.5s ease-out forwards;
}

@keyframes christmas-flash-anim {
  0% { opacity: 0; }
  10% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; }
  100% { opacity: 0; transform: scale(1.1); }
}

/* 2. Overlay contenedor */
.christmas-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 10000;
  overflow: hidden;
}

/* 3. Items flotantes (Papá Noel, Árboles, etc.) */
.christmas-item {
  position: absolute;
  bottom: -50px;
  font-size: 3.5rem;
  opacity: 0;
  /* Usamos una animación que flota hacia arriba con un poco de balanceo */
  animation: floatChristmas 2.2s ease-out forwards;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* Brillo de nieve */
}

@keyframes floatChristmas {
  0% {
    transform: translateY(0) rotate(0deg) scale(0.5);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  80% {
    transform: translateY(-400px) rotate(20deg) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translateY(-600px) rotate(-20deg) scale(1.5);
    opacity: 0;
  }
}

/* 4. MODIFICACIÓN DEL BORDE DE LA CARTA MÍTICA */
/* Sobrescribimos o cambiamos la clase .rarity-mythical y .mythical-card existentes */
/* Si prefieres no borrar lo de Halloween, simplemente añade estas reglas al final del CSS, 
   ya que CSS aplica lo último que lee */

.rarity-mythical {
  border: 3px solid #d40000; /* Rojo Navidad */
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), inset 0 0 10px rgba(0, 128, 0, 0.5); /* Resplandor dorado y verde */
}

.card.mythical-card {
  border: 3px solid #d40000; /* Rojo Navidad */
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.6), 0 0 10px rgba(255, 215, 0, 0.8); /* Doble brillo */
  background: linear-gradient(135deg, #002200, #330000); /* Fondo oscuro verde/rojo sutil */
}

#updates-content a,
#updates-content .auto-link {
  color: #E4405F;
  text-decoration: none;
  font-weight: bold;
}

#updates-content a:hover,
#updates-content .auto-link:hover {
  text-decoration: underline;
}


/* --- INICIO: REDISEÑO MODAL DE NOVEDADES --- */

/* Fondo del Modal (Tema Oscuro) */
.modal-content {
  background-color: #1e1e24; /* Fondo oscuro */
  color: #e0e0e0; /* Texto principal claro */
  border: 1px solid #444;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  max-width: 850px; /* Un poco más ancho */
}

/* Encabezado del Modal */
.modal-header {
  border-bottom: 1px solid #ffd700; /* Línea dorada */
  color: #ffffff;
}

.modal-header h3 {
  color: #ffffff;
  font-size: 1.8em;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); /* Resplandor dorado */
}

.close-modal:hover {
  color: #ffd700; /* Hover dorado */
}

/* Contenido de las actualizaciones */
.updates-content {
  padding-right: 10px; /* Espacio para el scrollbar */
}

/* Tarjeta para cada actualización */
.update-item {
  background-color: #2b2b33; /* Fondo de tarjeta más claro */
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  border: 1px solid #404040;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden; /* Para contener los elementos */
}

.update-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(255, 215, 0, 0.1); /* Sombra dorada sutil */
}

/* Encabezado dentro de la tarjeta (Título, Fecha, Versión) */
/* El div que contiene el título, fecha y versión */
.update-item > div:first-child { 
  display: flex;
  flex-wrap: wrap; /* Para que se reordene en pantallas pequeñas */
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 1px solid #444;
  padding-bottom: 10px;
}

/* Título de la actualización (el <strong>) */
.update-item strong {
  font-size: 1.6em;
  color: #ffd700; /* Título en dorado */
  line-height: 1.2;
  order: 1; /* El título primero */
  flex-basis: 100%; /* Ocupa toda la línea */
}

/* Fecha de la actualización */
.update-date {
  font-size: 0.85em;
  color: #999;
  order: 2; /* La fecha después */
  margin-top: 5px;
}

/* Etiqueta de la Versión */
.update-version {
  font-size: 0.8em;
  font-weight: bold;
  color: #fff;
  background-color: #4CAF50; /* Verde principal del juego */
  padding: 4px 10px;
  border-radius: 12px;
  order: 3; /* La versión a la derecha */
}

/* Descripción de la actualización */
.update-description {
  color: #c0c0c0;
  font-size: 1em;
  line-height: 1.5;
  margin-top: 10px;
  margin-bottom: 15px;
  border-left: 3px solid #4CAF50; /* Barra lateral verde */
  padding-left: 10px;
}

/* Lista de características (ul) */
.update-features {
  margin-top: 15px;
  padding-left: 0; /* Quitamos padding por defecto */
  list-style: none; /* Quitamos bullets por defecto */
  color: #e0e0e0;
}

/* Cada característica (li) */
.update-features li {
  position: relative; /* Necesario para el pseudo-elemento ::before */
  padding-left: 28px; /* Espacio para el icono */
  margin-bottom: 10px;
  line-height: 1.5;
}

/* Icono personalizado para cada característica */
.update-features li::before {
  content: '✨'; /* Icono de estrella/novedad */
  position: absolute;
  left: 0;
  top: 0px;
  font-size: 1.2em;
  color: #ffd700; /* Icono dorado */
}

/* Enlaces dentro de las características (como el de Instagram) */
.update-features li a,
.update-features li .auto-link {
  color: #E4405F; /* Mantenemos tu color rosa de Instagram */
  font-weight: bold;
  text-decoration: none;
  transition: all 0.2s ease;
}

.update-features li a:hover,
.update-features li .auto-link:hover {
  text-decoration: underline;
  text-shadow: 0 0 5px rgba(228, 64, 95, 0.5); /* Resplandor rosa */
}

/* Pie de página del modal (botón) */
.modal-footer {
  margin-top: 20px;
  text-align: right;
  border-top: 1px solid #444;
  padding-top: 15px;
}

/* Botón "Entendido" */
#understood-button {
  background-color: #ffd700; /* Botón dorado */
  color: #1a1a1a; /* Texto oscuro */
  font-weight: bold;
  font-size: 1em;
  padding: 10px 25px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

#understood-button:hover {
  background-color: #ffffff; /* Hover blanco */
  transform: scale(1.03);
}

/* Scrollbar personalizado para el modal */
.modal-content::-webkit-scrollbar {
  width: 10px;
}
.modal-content::-webkit-scrollbar-track {
  background: #2b2b33;
  border-radius: 4px;
}
.modal-content::-webkit-scrollbar-thumb {
  background-color: #4CAF50; /* Scroll verde */
  border-radius: 4px;
}
.modal-content::-webkit-scrollbar-thumb:hover {
  background-color: #5cb85c;
}

/* === 💎 BARRA SUPERIOR MEJORADA (ESCRITORIO) FINAL === */

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: space-between; 
  padding: 0 15px; /* Reducido para más espacio */
  background: rgba(15, 15, 25, 0.25);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  z-index: 999;
  gap: 10px; /* Espacio entre los 3 grupos principales */
}

#game-container {
  margin-top: 90px !important; 
}

/* --- 1. GRUPO IZQUIERDA (PERFIL + MONEDAS + SOBRES) --- */
.top-bar-left-group {
  display: flex;
  align-items: center;
  gap: 15px; 
  flex-shrink: 0; 
  min-width: 0;
}

/* Perfil de usuario */
.top-bar .user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  white-space: nowrap;
}
.top-bar .user-info i {
  font-size: 1.8rem;
  color: #ffd700;
  filter: drop-shadow(0 0 3px rgba(255,215,0,0.6));
}

/* Contador de monedas */
.top-bar .coin-display {
  display: flex;
  align-items: center;
  background: rgba(255,215,0,0.15);
  border-radius: 30px;
  padding: 6px 12px;
  color: #ffd700;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  font-size: 0.95rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  white-space: nowrap;
}
.top-bar .coin-display i {
  margin-right: 6px;
  font-size: 1.1rem;
}

/* Contadores de sobres (Escritorio) */
.top-bar-pack-counters {
  display: flex;
  align-items: stretch; 
  gap: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 5px; 
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  height: 48px; 
}
.pack-counter {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  padding: 0 10px;
  transition: all 0.2s ease;
  border-radius: 6px;
}
.pack-counter:hover {
    background-color: rgba(255,255,255,0.1);
}
.pack-counter i {
  color: #ffd700;
  font-size: 1.5rem; 
  filter: drop-shadow(0 0 4px rgba(255,215,0,0.5)); 
}
.pack-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  white-space: nowrap;
}
.pack-label {
  font-size: 0.8rem;
  color: #ccc; 
}
.pack-amount {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}


/* --- 2. GRUPO CENTRAL (BOTONES NAVEGACIÓN) --- */
.top-bar .main-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1; /* Ocupa el espacio central */
  gap: 12px;
  min-width: 0; 
  white-space: nowrap; 
}

/* Estilo de botones (se aplica a todos los .nav-button, incluyendo Novedades) */
.top-bar .nav-button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 20px;
  border-radius: 50px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.25s ease;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
  /* ⭐ Resetear position si estaba absoluto/fijo */
  position: static !important; 
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: auto !important;
}
.top-bar .nav-button:hover {
  background: rgba(255,255,255,0.15);
  transform: scale(1.05);
  box-shadow: 0 3px 8px rgba(255,255,255,0.2);
}

/* Iconos de botones */
.top-bar .nav-button i,
.top-bar .nav-button .icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: all 0.25s ease;
}
.top-bar .nav-button:hover i,
.top-bar .nav-button:hover .icon {
  background: rgba(255,255,255,0.15);
  transform: scale(1.1);
}

/* Animación de pulso para ARENA y MARKET */
@keyframes pulseSoft {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
#market-button,
#combat-button {
  animation: pulseSoft 3s infinite ease-in-out;
}

/* Colores de identidad (suaves) */
#market-button {
  border-color: rgba(139,195,74,0.4);
  box-shadow: 0 0 10px rgba(139,195,74,0.25);
}
#combat-button {
  border-color: rgba(244,67,54,0.4);
  box-shadow: 0 0 10px rgba(244,67,54,0.25);
}
#ranking-button {
  border-color: rgba(255,99,132,0.4);
  box-shadow: 0 0 10px rgba(255,99,132,0.25);
}
#achievements-button {
  border-color: rgba(0,188,212,0.4);
  box-shadow: 0 0 10px rgba(0,188,212,0.25);
}


/* --- 3. GRUPO DERECHA (NOVEDADES + LOGOUT) --- */
.top-bar-right-group {
  display: flex;
  align-items: center;
  gap: 12px; /* Espacio entre Novedades y Logout */
  flex-shrink: 0; 
}

/* Botón de Logout (Escritorio) */
.top-bar-logout-button {
  background: rgba(220, 53, 69, 0.5); 
  color: #fff;
  border: 1px solid rgba(255, 100, 100, 0.3);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; 
  margin-right: 15px; /* ⭐ AÑADIDO: Margen para que no se corte */
}
.top-bar-logout-button:hover {
  background: #dc3545; 
  border-color: #ff6b7b;
  box-shadow: 0 0 15px rgba(220, 53, 69, 0.7);
  transform: scale(1.1);
}

/* --- 4. RESPONSIVE (MÓVIL) --- */
@media (max-width: 768px) {
  /* Oculta los nuevos elementos de escritorio en móvil */
  .top-bar-pack-counters,
  .top-bar-right-group {
    display: none !important;
  }
}
/* === 2. EFECTO ÉPICO PARA BOTÓN DE ARENA (SIN CAMBIAR SU TAMAÑO) === */

#combat-button {
  position: relative;
  background: linear-gradient(45deg, #ff3c00, #ff9100);
  border: 1px solid rgba(255, 140, 0, 0.6);
  box-shadow: 0 0 15px rgba(255, 80, 0, 0.35);
  overflow: hidden;
}

/* Brillo dinámico tipo fuego */
#combat-button::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 50% 50%, rgba(255,200,100,0.4), transparent 70%);
  animation: firePulse 3s infinite ease-in-out;
  z-index: 0;
  pointer-events: none;
}

@keyframes firePulse {
  0% { transform: rotate(0deg) scale(1); opacity: 0.3; }
  50% { transform: rotate(180deg) scale(1.1); opacity: 0.6; }
  100% { transform: rotate(360deg) scale(1); opacity: 0.3; }
}

/* Brillo interior como calor */
#combat-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at top center, rgba(255,255,255,0.25), transparent 60%);
  opacity: 0.25;
  animation: flickerGlow 1.8s infinite ease-in-out alternate;
  pointer-events: none;
}

@keyframes flickerGlow {
  0% { opacity: 0.25; box-shadow: 0 0 8px rgba(255,120,0,0.3); }
  50% { opacity: 0.45; box-shadow: 0 0 15px rgba(255,80,0,0.5); }
  100% { opacity: 0.25; box-shadow: 0 0 8px rgba(255,120,0,0.3); }
}

/* Asegura que el contenido del botón quede sobre el efecto */
#combat-button span,
#combat-button .icon {
  position: relative;
  z-index: 1;
}

/* Pequeño realce al pasar el ratón */
#combat-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(255,100,0,0.5);
}

/* === 1️⃣ BOTÓN DE ARENA MÁS ROJIZO Y ÉPICO === */

#combat-button {
  position: relative;
  background: linear-gradient(45deg, #b80000, #ff3c00);
  border: 1px solid rgba(255, 70, 0, 0.6);
  box-shadow: 0 0 15px rgba(255, 40, 0, 0.35);
  overflow: hidden;
}

#combat-button::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 50% 50%, rgba(255,100,0,0.35), transparent 70%);
  animation: firePulse 3s infinite ease-in-out;
  z-index: 0;
  pointer-events: none;
}

@keyframes firePulse {
  0% { transform: rotate(0deg) scale(1); opacity: 0.3; }
  50% { transform: rotate(180deg) scale(1.1); opacity: 0.6; }
  100% { transform: rotate(360deg) scale(1); opacity: 0.3; }
}

#combat-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at top center, rgba(255,255,255,0.2), transparent 65%);
  opacity: 0.2;
  animation: flickerGlow 1.6s infinite ease-in-out alternate;
  pointer-events: none;
}

@keyframes flickerGlow {
  0% { opacity: 0.25; box-shadow: 0 0 8px rgba(255,50,0,0.3); }
  50% { opacity: 0.45; box-shadow: 0 0 15px rgba(255,0,0,0.45); }
  100% { opacity: 0.25; box-shadow: 0 0 8px rgba(255,50,0,0.3); }
}

#combat-button span,
#combat-button .icon {
  position: relative;
  z-index: 1;
}

#combat-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(255,40,0,0.5);
}

/*
========================================
--- 💎 REMODELACIÓN BOTONES DE JUEGO ---
========================================
*/

/* 1. Contenedor de los botones */
.game-buttons-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px; /* Aumentamos el espacio entre botones */
  margin-top: 30px; /* Más separación de la barra superior */
  flex-wrap: wrap; /* Para que se ajusten en pantallas pequeñas */
}

/* 2. Estilo base común para los 3 botones */
.game-buttons-row .action-button {
  padding: 18px 35px; /* ¡Más grandes! */
  font-size: 1.3rem; /* Texto más grande */
  font-weight: bold;
  font-family: 'Arial', sans-serif; /* Una fuente nítida */
  color: white;
  border-radius: 12px; /* Bordes más redondeados */
  border: none; /* Quitamos el borde por defecto */
  cursor: pointer;
  position: relative; /* Clave para efectos avanzados */
  overflow: hidden; /* Clave para el efecto de brillo */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  
  /* Sombra 3D que da profundidad */
  box-shadow: 0 6px 0 #222, /* Sombra inferior "gruesa" */
              0 10px 15px rgba(0, 0, 0, 0.4); /* Sombra difuminada */
  
  /* Sombra en el texto para que resalte */
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}

/* 3. Efecto "Chulo" al pasar el ratón (común) */
.game-buttons-row .action-button:hover {
  /* El botón "sube" y la sombra se reduce, dando efecto de pulsar */
  transform: translateY(-4px);
  box-shadow: 0 10px 0 #222, /* Sombra inferior se mueve con el botón */
              0 14px 20px rgba(0, 0, 0, 0.35); /* Sombra difuminada más grande */
}

/* Efecto al hacer clic (presionar) */
.game-buttons-row .action-button:active {
  transform: translateY(1px); /* El botón "baja" */
  box-shadow: 0 2px 0 #222, /* Sombra inferior casi desaparece */
              0 5px 10px rgba(0, 0, 0, 0.4); /* Sombra difuminada se reduce */
}

/* 4. Estilo individual: Historial */
.view-my-history-button {
  background: linear-gradient(145deg, #a9a9a9, #6c757d); /* Gradiente "metálico" */
  box-shadow: 0 6px 0 #4a4e52, 0 10px 15px rgba(0, 0, 0, 0.4);
}

.view-my-history-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 0 #4a4e52, 0 14px 20px rgba(0, 0, 0, 0.35);
}

.view-my-history-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 #4a4e52, 0 5px 10px rgba(0, 0, 0, 0.4);
}


/* 5. Estilo individual: Sobre Normal */
.open-normal-pack-button {
  background: linear-gradient(145deg, #3a7bd5, #00d2ff); /* Gradiente azul "común" */
  box-shadow: 0 6px 0 #1e4c8f, 0 10px 15px rgba(0, 0, 0, 0.4);
}

.open-normal-pack-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 0 #1e4c8f, 0 14px 20px rgba(0, 0, 0, 0.35);
}

.open-normal-pack-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 #1e4c8f, 0 5px 10px rgba(0, 0, 0, 0.4);
}


/* 6. Estilo individual: Sobre Raro (¡El más impactante!) */

/* Animación de "brillo pulsante" */
@keyframes rare-pulse {
  0% {
    box-shadow: 0 6px 0 #581b85, 0 10px 15px rgba(0, 0, 0, 0.4), 0 0 15px #f0c;
  }
  50% {
    box-shadow: 0 6px 0 #581b85, 0 10px 15px rgba(0, 0, 0, 0.4), 0 0 30px #f0c, 0 0 10px #fff;
  }
  100% {
    box-shadow: 0 6px 0 #581b85, 0 10px 15px rgba(0, 0, 0, 0.4), 0 0 15px #f0c;
  }
}

.open-rare-pack-button {
  background: linear-gradient(145deg, #8a2387, #e94057, #f27121); /* Gradiente "épico" */
  
  /* Aplicamos la sombra 3D base de este color */
  box-shadow: 0 6px 0 #581b85, 0 10px 15px rgba(0, 0, 0, 0.4); 
  
  /* Aplicamos la animación de brillo */
  animation: rare-pulse 2s infinite ease-in-out;
}

/* Efecto de brillo que cruza el botón al pasar el ratón */
.open-rare-pack-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%; /* Empieza fuera, a la izquierda */
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-30deg); /* Angulamos el brillo */
  transition: left 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.open-rare-pack-button:hover::before {
  left: 150%; /* Lo movemos al otro lado */
}

/* Sobrescribimos el :hover para que también crezca un poco */
.open-rare-pack-button:hover {
  transform: translateY(-4px) scale(1.05); /* Sube Y crece */
  box-shadow: 0 10px 0 #581b85, 0 14px 25px rgba(0, 0, 0, 0.3);
  animation-play-state: paused; /* Pausamos el pulso para que el brillo sea el protagonista */
}

.open-rare-pack-button:active {
  transform: translateY(1px) scale(1.02); /* Efecto de presión */
  box-shadow: 0 2px 0 #581b85, 0 5px 10px rgba(0, 0, 0, 0.4);
  animation-play-state: running; /* Reactivamos la animación */
}

/* 7. Iconos dentro de los botones */
.game-buttons-row .action-button i {
  margin-right: 12px; /* Espacio entre icono y texto */
  vertical-align: -2px; /* Alineación fina del icono */
}

/* Ajuste de margen para botones de Novedades y Logout */
.top-bar-right-group {
  margin-right: 30px; /* Aumenta el espacio con el borde derecho. Prueba 25px o 40px si no te convence. */
}

/* === MENÚ SUPERIOR PARA MÓVIL (FUNCIONAL Y SOLO TRAS LOGIN) === */

/* 1. Oculta el menú móvil por defecto en TODAS las vistas */
.mobile-menu {
  display: none;
}

/* 2. Reglas que se aplican SÓLO en vista móvil */
@media (max-width: 768px) {

  /* 3. Oculta la barra de ESCRITORIO en móvil */
  .top-bar {
    display: none !important;
  }
  
  /* ⭐ NUEVO: Oculta el botón de novedades anclado original */
  #updates-button {
    display: none !important;
  }

body.logged-in .mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto; /* Altura automática para dos filas */
  background: linear-gradient(to right, rgba(40, 40, 55, 0.88), rgba(25, 25, 40, 0.12));
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  animation: slideDown 0.3s ease-out;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  display: flex !important;
  flex-direction: column; 
  padding: 0; 
  z-index: 999;
  box-sizing: border-box;
  transition: background 0.3s ease;
}

/* === INICIO: ESTILOS PARA LAS FILAS === */

/* 4. Estilo para la Fila 1 (la que ya existía) */
.mobile-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 62px;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 5. Estilo para la Fila 2 (la nueva) */
.mobile-second-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  padding: 0 20px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 6. Estilos para los contadores de sobres en Fila 2 */
.mobile-pack-info {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #eee;
  font-size: 0.9rem;
  white-space: nowrap;
}
.mobile-pack-info i {
  color: #ffd700;
  font-size: 1.1rem;
  margin-right: 4px;
}
.mobile-pack-info strong {
  color: #fff;
  font-weight: 700;
}
.mobile-pack-info .separator {
  color: #666;
}

/* 7. Contenedor para los botones de la derecha en la segunda fila */
.mobile-right-buttons-second-row {
  display: flex;
  align-items: center;
  gap: 10px; /* Espacio entre el historial y novedades */
}

/* 8. Estilo MEJORADO para el botón de historial */
.mobile-history-button {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(145deg, #2a2a2e, #3a3a40);
  color: #e0e0e0;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}
.mobile-history-button i {
  font-size: 1rem;
  color: #a0a0a0;
  transition: color 0.2s ease;
}
.mobile-history-button:hover {
  background: linear-gradient(145deg, #3a3a40, #4a4a50);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transform: translateY(-1px);
}
.mobile-history-button:hover i {
  color: #fff;
}


/* 9. ⭐ NUEVO: Estilo para el botón de Novedades (campana) */
.mobile-updates-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; 
  height: 32px;
  /* Color naranja, como el de escritorio */
  background: linear-gradient(145deg, #ff9800, #e68a00); 
  color: #fff;
  border: none;
  border-radius: 50%; /* Circular */
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.mobile-updates-button:hover {
  background: linear-gradient(145deg, #e68a00, #c47700);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transform: translateY(-1px) scale(1.05);
}
.mobile-updates-button i {
  color: #fff;
}

/* === FIN: ESTILOS PARA LAS FILAS === */


  /* 10. El resto de tus estilos para los hijos (ahora en Fila 1) */

  /* Animación de entrada */
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-15px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Perfil + monedas */
  .mobile-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .mobile-left i { font-size: 1.5rem; color: #ffd700; }
  .mobile-left .coins {
    display: flex;
    align-items: center;
    background: rgba(255, 215, 0, 0.15);
    border-radius: 20px;
    padding: 3px 8px;
    color: #ffd700;
    font-weight: 600;
    font-size: 0.85rem;
  }
  .mobile-left .coins i { font-size: 1rem; margin-right: 4px; }

  /* Botones centrados */
  .mobile-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
  }
  .mobile-buttons a {
    background: none;
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", sans-serif;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
    font-size: 1.6rem;
    text-decoration: none;
  }
  .mobile-buttons a span { display: none; }
  .mobile-buttons a:hover { color: #ffd700; transform: scale(1.1); } 

  /* Colores y efectos individuales */
  .mobile-buttons a.arena { color: #ff3c00; text-shadow: 0 0 15px rgba(255,70,0,0.7); }
  .mobile-buttons a.arena:hover { color: #ff6600; text-shadow: 0 0 20px rgba(255,100,0,0.9); }
  .mobile-buttons a[href="market.html"] { color: #28a745; text-shadow: 0 0 10px rgba(40,167,69,0.5); }
  .mobile-buttons a[href="market.html"]:hover { color: #2dc44d; text-shadow: 0 0 15px rgba(45,196,77,0.7); }
  .mobile-buttons a#ranking-button-mobile { color: #e83e8c; text-shadow: 0 0 10px rgba(232,62,140,0.5); }
  .mobile-buttons a#ranking-button-mobile:hover { color: #f05e9e; text-shadow: 0 0 15px rgba(240,94,158,0.7); }
  .mobile-buttons a[href="achievements/achievements.html"] { color: #007bff; text-shadow: 0 0 10px rgba(0,123,255,0.5); }
  .mobile-buttons a[href="achievements/achievements.html"]:hover { color: #008eff; text-shadow: 0 0 15px rgba(0,142,255,0.7); }

  /* Contenedor derecho logout */
  .mobile-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .mobile-right a#logout-button-mobile {
    font-size: 1.5rem;
    color: #dc3545;
    text-decoration: none;
    transition: transform 0.2s ease, color 0.2s ease, filter 0.2s ease;
    filter: drop-shadow(0 0 3px rgba(220,53,69,0.6));
  }
  .mobile-right a#logout-button-mobile:hover {
    color: #ff4d60;
    filter: drop-shadow(0 0 5px rgba(255,77,96,0.8));
    transform: scale(1.1); 
  }

  /* Oculta el botón de texto original */
  .game-buttons-row .logout-button { display: none; }
  
  /* === INICIO: CAMBIOS DE VISIBILIDAD Y MARGEN === */

  /* 11. Oculta los elementos ORIGINALES en el contenido principal */
  #game-container .pack-info-box,
  .game-buttons-row .view-my-history-button {
    display: none;
  }

  /* 12. Empuja contenido debajo de la NUEVA barra (62px + 40px + 10px margen) */
  #game-container { 
    margin-top: 112px !important; 
  }
  /* === FIN: CAMBIOS DE VISIBILIDAD Y MARGEN === */

/* === 🎨 ESTILOS DEFINITIVOS BOTONES DE SOBRE (Escritorio + Móvil) === */

/* --- 1. Animaciones Globales (Keyframes) --- */
/* (Asegúrate de que esto esté al final de tu CSS, en el ámbito global) */

@keyframes pulse-normal {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 
                0 0 10px rgba(76, 175, 80, 0.3), 
                inset 0 1px 2px rgba(255, 255, 255, 0.15);
  }
  50% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 
                0 0 20px rgba(76, 175, 80, 0.6), 
                inset 0 1px 2px rgba(255, 255, 255, 0.15);
  }
}

@keyframes pulse-rare {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 
                0 0 15px rgba(0, 140, 186, 0.5), 
                inset 0 1px 2px rgba(255, 255, 255, 0.15);
  }
  50% {
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4), 
                0 0 30px rgba(0, 140, 186, 0.9), 
                inset 0 1px 2px rgba(255, 255, 255, 0.15);
  }
}

@keyframes shine-wipe {
  0% { transform: translateX(-150%) skewX(-25deg); }
  40% { transform: translateX(150%) skewX(-25deg); }
  100% { transform: translateX(150%) skewX(-25deg); }
}

/* --- 2. Estilo Base de los Botones (Común a ambos) --- */
.open-normal-pack-button,
.open-rare-pack-button {
    /* Layout y Tamaño de ESCRITORIO */
    width: 240px;
    padding: 16px 20px;
    font-size: 1.3rem;
    
    /* Estilos Comunes */
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    transition: all 0.2s ease-out;
    position: relative;
    overflow: hidden;
    margin: 0; /* Anula cualquier margen previo */
}

.open-normal-pack-button i,
.open-rare-pack-button i {
    font-size: 1.4rem;
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.3));
}

/* --- 3. Botón Sobre Normal (Verde) --- */
.open-normal-pack-button {
  background: linear-gradient(145deg, #4CAF50, #388E3C);
  border-bottom: 4px solid #2a6a2d;
  animation: pulse-normal 2.5s infinite ease-in-out;
}
.open-normal-pack-button:hover {
  background: linear-gradient(145deg, #5cb85c, #45a049);
  transform: translateY(-3px) scale(1.03);
  animation: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 
              0 0 25px rgba(76, 175, 80, 0.7);
}
.open-normal-pack-button:active {
    transform: translateY(1px) scale(0.98);
    animation: none;
}


/* --- 4. Botón Sobre Raro (Azul Épico) --- */
.open-rare-pack-button {
  background: linear-gradient(145deg, #008CBA, #0077B6);
  border-bottom: 4px solid #005682;
  animation: pulse-rare 2s infinite ease-in-out;
}
.open-rare-pack-button::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 50%; height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
  animation: shine-wipe 4s infinite linear;
  animation-delay: 1.5s;
  opacity: 0.8;
  filter: blur(2px);
}
.open-rare-pack-button:hover {
  background: linear-gradient(145deg, #009ad9, #0083c9);
  transform: translateY(-3px) scale(1.03);
  animation: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 
              0 0 30px rgba(0, 140, 186, 1);
}
.open-rare-pack-button:active {
    transform: translateY(1px) scale(0.98);
    animation: none;
}

/* --- 5. Estilos Móviles --- */
@media (max-width: 768px) {
  
  /* Ajustamos la fila de botones principal */
  .game-buttons-row {
      /* Tus reglas existentes (flex-direction: column y align-items: center) ya están aquí */
      /* Añadimos el GAP que pediste */
      gap: 20px !important; 
  }
  
  /* Redefinimos los botones de sobre para MÓVIL */
  .open-normal-pack-button,
  .open-rare-pack-button {
      width: fit-content; /* ⭐ Ancho ajustado al contenido */
      max-width: 90%;   /* Límite para que no se salga */
      padding: 14px 30px; /* ⭐ Padding ajustado al nuevo ancho */
      font-size: 1.1rem; 
      border-bottom-width: 3px;
      /* Las animaciones de pulso y brillo se heredan */
  }

  /* Anulamos el hover de escritorio en móvil (para táctil) */
  .open-normal-pack-button:hover,
  .open-rare-pack-button:hover {
      transform: none; 
      /* Dejamos el box-shadow por si es tablet */
  }
  
  /* Definimos el :active para móvil */
  .open-normal-pack-button:active,
  .open-rare-pack-button:active {
      transform: translateY(2px) scale(0.98); 
      border-bottom-width: 2px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      animation: none; /* Detener pulso al pulsar */
  }
  
  /* Ajustamos el brillo para móvil */
  .open-rare-pack-button::after {
      animation-duration: 3.5s;
      animation-delay: 1s;
  }
}
/* Ajustes pantallas muy pequeñas */
@media (max-width: 480px) {
  .mobile-buttons a { font-size: 1.4rem; }
  .mobile-right a#logout-button-mobile { font-size: 1.4rem; }
  
  /* Ajuste para Fila 2 en pantallas muy pequeñas */
  .mobile-pack-info { font-size: 0.75rem; gap: 3px; }
  .mobile-pack-info i { font-size: 1rem; margin-right: 2px; }
  .mobile-pack-info strong { font-size: 0.8rem; }

  .mobile-history-button { font-size: 0.75rem; padding: 5px 10px; gap: 4px; }
  .mobile-history-button i { font-size: 0.9rem; }
  
  .mobile-updates-button { width: 30px; height: 30px; font-size: 1rem; }
  .mobile-right-buttons-second-row { gap: 8px; }
}