/* GENERAL DESIGNS */

   /* Proporción base del juego (16:9) */
   :root {
      --aspect-ratio: 16 / 9;
      --game-width: 800px; /* Ancho deseado del juego */
      --game-height: calc(var(--game-width) / (var(--aspect-ratio)));
   }

   body {
      font-family: monospace;
      margin: 0;
      overflow: hidden;
      background-color: #222;
      height: 100vh; /* Ocupa toda la altura de la pantalla */
      display: flex;
      justify-content: center;
      align-items: center;
   }

   #grid-container {
      display: grid;
      grid-template-rows: auto 1fr; /* El contenedor superior ocupa el espacio necesario y el juego el resto */
      grid-template-columns: 1fr; /* Una sola columna */
      width: var(--game-width);
      height: auto; /* Altura automática para ajustarse al contenido */
      max-height: 100vh; /* Limita la altura máxima para evitar que el juego sea demasiado grande */
      box-sizing: border-box;
   }

   #menu-principal, #instrucciones, #ajustes, #menuMuerte, #fondo {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-image: url('../sprites/crimson-burst-background.png');
      border-radius: 0;
      text-align: center;
      z-index: 2;
      padding: 20px;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
      width: var(--game-width);
      height: var(--game-height);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
   }


/* INSTRUCTIONS */

   #instrucciones, #ajustes {
      overflow-y: auto;
      color: #ddd;
      line-height: 1.6;
   }

   #instrucciones h1 {
      font-size: 2.5em;
      margin-bottom: 20px;
      text-align: center;
      text-shadow: 2px 2px 0 #000;
   }

   #instrucciones section {
      margin-bottom: 30px;
      text-align: left;
   }

   #ajustes section {
      margin-bottom: 30px;
   }

   #instrucciones h2 {
      font-size: 1.8em;
      margin-bottom: 15px;
      color: #ddd;
      text-shadow: 2px 2px 0 #000;
   }

   #instrucciones ul {
      list-style-type: square;
      padding-left: 20px;
   }

   #instrucciones li {
      font-size: 1.1em;
      margin-bottom: 8px;
      color: #ccc;
   }

   #instrucciones p {
      font-size: 1.1em;
      color: #ccc;
   }

   /*Para hacer este elemento compatible con otros navegadores, es necesaria utilizar el ::-webkit-scrollbar*/
   #instrucciones::-webkit-scrollbar {
      width: 6px;
   }

   #instrucciones::-webkit-scrollbar-track {
      background: #222;
      border-radius: 3px;
   }

   #instrucciones::-webkit-scrollbar-thumb {
      background: #555;
      border-radius: 3px;
   }

   #instrucciones::-webkit-scrollbar-thumb:hover {
      background: #777;
   }


/* SETTINGS */

   #gamepad-assignment {
      margin-bottom: 20px;
      color: #ddd;
   }

   #gamepad-assignment div {
      margin-bottom: 10px;
   }

   #gamepad-assignment label {
      display: inline-block;
      width: 80px;
      text-align: right;
      margin-right: 10px;
      font-size: 1.1em;
      color: #ccc;
   }

   #gamepad-assignment select {
      padding: 5px;
      border-radius: 5px;
      background-color: #444;
      color: #ddd;
      border: none;
   }

/* GAME TITLE */

   :root {
   --red-glow: #DC143C;
   --blue-glow: #4169E1;
   }

   #titulo-juego,
   #titulo-muerte {
   font-family: 'Bungee Shade', cursive;
   font-size: 4em;
   font-weight: bold;
   margin-bottom: 20px;
   text-align: center;
   position: relative;
   letter-spacing: 2px;
   text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.8);
   }

   .red-part {
   color: var(--red-glow);
   animation: flicker 1.5s infinite alternate;
   }

   .blue-part {
   color: var(--blue-glow);
   animation: flicker 1.5s infinite alternate;
   }

   /* Clase base para la animación de parpadeo */
   @keyframes flicker {

   0%,
   18%,
   22%,
   25%,
   53%,
   57%,
   100% {
      text-shadow:
         0 0 4px #fff,
         0 0 11px #fff,
         0 0 19px #fff,
         0 0 40px currentColor, /* Usa el color del texto actual */
         0 0 80px currentColor,
         0 0 90px currentColor,
         0 0 100px currentColor,
         0 0 150px currentColor;
   }

   20%,
   24%,
   55% {
      text-shadow: none;
   }
   }


/* BUTTONS */

   #menu-principal button, #menuMuerte button, #pausa, #btn-salir, #volver-al-juego, #btn-cambiar-idioma, #salirInstrucciones, #salirAjustes {
      font-family: monospace;
      font-size: 1.2em;
      color: #ddd;
      border: 2px solid #888;
      border-radius: 0;
      padding: 10px 20px;
      margin: 15px auto;
      cursor: pointer;
      background-color: #222;
      text-shadow: 1px 1px 0 #000;
      position: relative;
      overflow: hidden;
      text-transform: uppercase;
      letter-spacing: 1px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
      text-align: center;
   }

   #menuMuerte button, #ajustes button {
      width: 25%;
      display: flex;
      justify-content: center;
   }

   #menu-principal button:hover, #menuMuerte button:hover, #pausa:hover, #btn-salir:hover, #volver-al-juego:hover, #btn-cambiar-idioma:hover, #salirInstrucciones:hover, #salirAjustes:hover {
      background-color: #444;
      border-color: #aaa;
   }

   .botones-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* Dos columnas de igual ancho */
      grid-template-rows: repeat(3, auto); /* Tres filas con altura automática */
      gap: 15px;
      width: 100%;
      max-width: 600px; /* Limita el ancho máximo del contenedor */
      margin: 0 auto;
   }

   /*Estilo opcional para los botones*/
   .botones-container button {
      width: 100%; /* Los botones ocupan todo el ancho de su celda */
      padding: 15px; /* Ajustar el padding para darles tamaño */
      box-sizing: border-box; /* Incluir el padding en el ancho total */
      justify-content: center;
   }


/* SUPERIOR CONTAINER */

   #contenedor-superior {
      position: relative; /* Relativo en lugar de absoluto */
      top: auto;
      left: auto;
      transform: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%; /* Ocupa todo el ancho del grid */
      padding: 10px;
      background-color: rgba(0, 0, 0, 0.5);
      border-bottom: none;
      font-family: monospace;
      box-sizing: border-box;
   }

   .marcador-contenedor {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
   }

   .fila-superior {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
   }

   #puntos, #monedas-recogidas {
      font-size: 1.2rem;
      color: #ddd;
      text-shadow: 1px 1px 0 #000;
      display: flex;
      align-items: center;
      gap: 5px;
   }

   #monedas-recogidas img {
      width: 20px;
      height: auto;
   }

   #vidas-restantes {
      display: flex;
      justify-content: center;
      width: 100%;
   }

   #barra-vida {
      width: 300px;
      height: 15px;
      background-color: #444;
      border-radius: 5px;
      overflow: hidden;
      border: 2px solid black;
   }

   #vida-actual {
      width: 100%;
      height: 100%;
      transition: width 0.3s ease-in-out;
   }

   .vida-jugador {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
      color: #ddd;
  }
  
  .vida-jugador #barra-vida1,
  .vida-jugador #barra-vida2 {
      width: 150px; /* Ajusta el tamaño de la barra de vida */
      height: 10px; /* Ajusta la altura de la barra de vida */
      background-color: #444;
      border-radius: 5px;
      overflow: hidden;
      border: 2px solid black;
  }
  
  .vida-jugador #vida-actual1,
  .vida-jugador #vida-actual2 {
      width: 100%;
      height: 100%;
      transition: width 0.3s ease-in-out;
  }


/* GAME */

   #juego, #juego-plataformas {
      position: relative;
      width: var(--game-width);
      height: var(--game-height);
      background-color: #292929;
      border-radius: 0;
      text-align: center;
      z-index: 2;
      padding: 20px;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
      box-sizing: border-box;
      margin: 0 auto; /* Centrar horizontalmente */
   }

   #personaje1 {
      width: 50px;
      height: 50px;
      background-image: url('../sprites/RedCubeV2.png'); /* Player 1 image */
      background-size: cover;
      position: absolute;
      bottom: 0;
      left: 20px;
      z-index: 10;
   }

   #personaje2 {
      width: 50px;
      height: 50px;
      background-image: url('../sprites/RedBlueCubeV2.png'); /* Player 2 image */
      background-size: cover;
      position: absolute;
      bottom: 0;
      right: 20px; /* Start Player 2 on the right side */
      z-index: 10;
   }

   #personaje1::after, #personaje2::after {
      content: "";
      position: absolute;
      width: 35px;
      height: 8px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      bottom: -5px;
      left: 50%;
      transform: translateX(-50%);
   }

   .rotando {
      transform: rotate(360deg);
   }

   .enemigo {
      width: 50px;
      height: 50px;
      background-image: url('../sprites/BlueCubeV2.png');
      background-size: cover;
      position: absolute;
      bottom: 0;
      z-index: 5;
   }

   .enemigo-arriba {
      width: 50px;
      height: 50px;
      background-image: url('../sprites/OrangeCubeV2.png');
      background-size: cover;
      position: absolute;
      bottom: 0;
      z-index: 5;
   }

   .enemigo-saltarin {
      width: 50px;
      height: 50px;
      background-image: url('../sprites/GreenCubeV2.png'); /* Reemplaza con la imagen de tu enemigo saltarín */
      background-size: cover;
      position: absolute;
      bottom: 0; /* Importante: Asegura que empiece en el suelo */
      z-index: 5;
   }

   .enemigo, .enemigo-arriba, .enemigo-saltarin {
      outline: none;
      border: none;
   }

   .moneda {
      width: 30px;
      height: 30px;
      background-image: url('../sprites/CoinV1.png');
      background-size: cover;
      position: absolute;
      z-index: 5;
   }

   .power-up-vida {
      width: 30px;
      height: 30px;
      background-image: url('../sprites/XtraLife.png');
      background-size: cover;
      position: absolute;
      z-index: 5;
   }

   .rastro-elemento.jugador1 {
      width: 25px;
      height: 25px;
      background-color: rgba(220, 20, 60, 0.5);
      border-radius: 3px;
      position: absolute;
      z-index: 5
   }

   .rastro-elemento.jugador2 {
      width: 25px;
      height: 25px;
      background-color: rgba(65, 105, 225, 0.5);
      border-radius: 3px;
      position: absolute;
      z-index: 5
   }

   /* Dash indicators container */
   .dash-container {
      display: flex;
      flex-direction: row; /* Alineación horizontal */
      justify-content: space-between; /* Espacio entre los indicadores */
      position: absolute; /* Posicionamiento absoluto dentro del juego */
      top: 10px; /* Ajustar la posición vertical */
      left: 10px; /* Ajustar la posición horizontal inicial */
      right: 10px; /* Ajustar la posición horizontal final */
      width: calc(100% - 20px); /* Ajustar el ancho para que no se salga */
      z-index: 12; /* Asegurar que estén por encima de otros elementos */
   }

   /* Individual dash indicator */
   .dash-indicator {
      display: flex;
      flex-direction: column;
      align-items: center; /* Centrar los elementos horizontalmente */
      color: #eee; /* Color del texto */
      font-size: 0.8em; /* Ajustar el tamaño del texto */
      text-shadow: 1px 1px 0 #000; /* Sombra para mejorar la legibilidad */
   }

   /* Dash cooldown style */
   #dash-cooldown, #dash-cooldown2, #dash-cooldown3 {
      width: 40px;
      height: 40px;
      border-radius: 0;
      position: relative;
      overflow: hidden;
      border: 4px solid black;
   }

   #dash-cooldown, #dash-cooldown3 {
      background-color: #DC143C;
   }

   #dash-cooldown2 {
      background-color: #4169E1;
   }

   /* Base cooldown style*/
   #dash-cooldown::after, #dash-cooldown2::after, #dash-cooldown3::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 0%; /* Inicialmente vacío */
      background-color: rgba(0, 0, 0, 0.5);
      transition: height 0.3s linear; /* Animación */
      bottom: 0;
      right: 0;
   }

   /* The specific heights (modified with javascript */
   #dash-cooldown::after{
      height: var(--cooldown-height); /*El valor de este elemento se va a actualizar desde el JS*/
   }

   #dash-cooldown2::after{
      height: var(--cooldown-height2); /*El valor de este elemento se va a actualizar desde el JS*/
   }

   #dash-cooldown3::after{
      height: var(--cooldown-height); /*El valor de este elemento se va a actualizar desde el JS*/
   }


/* TOUCH CONTROLS */

   #controles-tactiles {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: right;
      align-items: center;
      padding: 10px;
      box-sizing: border-box;
      z-index: 20;
      display: none;
   }

   #boton-salto, #boton-dash {
      color: white;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   #boton-salto svg, #boton-dash svg {
      display: block;
   }

   #joystick-container {
      position: absolute;
      bottom: 50px;
      left: 50px;
      width: 100px; /* Reducimos el tamaño */
      height: 100px; /* Reducimos el tamaño */
      border-radius: 20%; /* Forma ligeramente cuadrada con esquinas redondeadas */
      background-color: rgba(51, 51, 51, 0.5); /* Gris oscuro - 50% transparente */
      display: flex;
      justify-content: center;
      align-items: center;
      user-select: none;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sombra sutil */
      border: 2px solid rgba(68, 68, 68, 0.5); /* Borde un poco más claro - 50% transparente */
   }

   #joystick-base {
      width: 60%; /* Base más pequeña */
      height: 60%; /* Base más pequeña */
      border-radius: 20%; /* Misma forma que el contenedor */
      background-color: rgba(85, 85, 85, 0.5); /* Gris intermedio - 50% transparente */
      pointer-events: none;
   }

   #joystick-thumb {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 30px; /* "Pulgar" más pequeño */
      height: 30px; /* "Pulgar" más pequeño */
      border-radius: 20%; /* Misma forma que el contenedor y la base */
      background-color: rgba(119, 119, 119, 0.5); /* Gris claro - 50% transparente */
      cursor: grab;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Sombra un poco más fuerte */
      border: 2px solid rgba(136, 136, 136, 0.5); /* Borde un poco más claro - 50% transparente */
   }

   #botones-accion {
      display: flex;
      justify-content: right;
      align-items: center;
      gap: 5px;
   }

   #botones-accion button {
      padding: 8px 16px; /* Reducimos el padding */
      font-size: 0.9em; /* Reducimos el tamaño de la fuente */
      border: none;
      background-color: rgba(51, 51, 51, 0.5); /* Gris oscuro - 50% transparente */
      color: #eee; /* Gris muy claro */
      border-radius: 5px; /* Bordes menos redondeados */
      cursor: pointer;
      text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); /* Reducimos la intensidad de la sombra */
      position: relative;
      overflow: hidden;
      text-transform: uppercase;
      letter-spacing: 1px; /* Reducimos el espaciado entre letras */
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Reducimos la intensidad de la sombra */
      border: 2px solid #555; /* Borde más definido */
   }

   /* SPLASH SCREEN */

   .splash {
      position: fixed;
      width: 100%;
      height: 100vh;
      background: linear-gradient(to bottom, #000, #222); /* Degradado inicial */
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2em;
      z-index: 1000;
      transition: opacity 1s ease-in-out; /*Transición para el splash*/
      animation: fadeIn 1.5s ease-in-out;
   }

   .splash::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="10"%3E%3Ccircle cx="5" cy="5" r="1" fill="%23ffffff" opacity="0.1"/%3E%3C/svg%3E');
      /* Pequeñas partículas blancas */
      animation: moveParticles 20s linear infinite;
      opacity: 0.5; /* Ajusta la opacidad */
   }

   #titulo-juego-splash {
      font-family: 'Bungee Shade', cursive;
      font-size: 4em;
      font-weight: bold;
      text-align: center;
      position: relative;
      letter-spacing: 2px;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* Brillo blanco */
      animation: fadeIn 1.5s ease-in-out, scaleUp 2s forwards; /* Agregamos scaleUp */
   }

   #menu-principal {
      transition: opacity 1s ease-in-out; /* Transición suave */
      opacity: 0; /* Inicialmente oculto */
      display: flex;
      justify-content: center;
      align-items: center;
   }

   /* Animaciones */
   @keyframes fadeIn {
      from {
         opacity: 0;
      }

      to {
         opacity: 1;
      }
   }

   @keyframes scaleUp {
      0% {
         transform: scale(0.8);
      }

      /* Empieza pequeño */
      100% {
         transform: scale(1);
      }

      /* Termina en tamaño normal */
   }

   @keyframes moveParticles {
      from {
         background-position: 0 0;
      }

      to {
         background-position: 100px 100px;
      }

      /* Mueve las partículas */
   }

   @keyframes colorChange {
      0% {
         background: linear-gradient(to bottom, #000, #222);
      }

      100% {
         background: linear-gradient(to bottom, #222, #444);
      }
   }

   /* PLATFORMS */

   #personaje-plataformas {
      width: 50px;
      height: 50px;
      background-image: url('../sprites/RedCubeV2.png'); /* Player 1 image */
      background-size: cover;
      position: absolute;
      left: 50%; /* Centrar horizontalmente */
      transform: translateX(-50%); /* Ajuste fino para centrar */
      bottom: 50px; /* Posición inicial */
      z-index: 10;
   }

   #contenedor-plataformas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 5;
   }

   /* Estilo base de la plataforma terminal */
   .plataforma {
      width: 100px; /* Ajusta si necesitas más espacio para texto */
      height: 20px;
      position: absolute;
      background-color: #000; /* Fondo negro terminal */
      border: 1px solid #fff; /* Borde gris oscuro */
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6); /* Sombra interior */
      overflow: hidden; /* Para cortar texto largo y contener cursor */
      display: flex; /* CLAVE: Para alinear texto y cursor */
      align-items: center; /* Centrar verticalmente */
      padding: 0 5px; /* Espacio interior */
      cursor: default; /* Cursor normal al pasar por encima */
   }
 
   /* Estilo para el texto dentro de la plataforma */
   .platform-text {
      font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', monospace;
      font-size: 10px; /* Tamaño adecuado para la altura */
      line-height: 1; /* Ajustar si es necesario */
      color: #fff; /* Escarlata brillante */
      text-shadow: 0 0 4px rgba(255, 23, 68, 0.7); /* Brillo neón */
      white-space: nowrap; /* Evitar que el texto salte de línea */
      overflow: hidden; /* Ocultar texto que no cabe */
      text-overflow: ellipsis; /* Poner '...' si el texto es muy largo */
      flex-grow: 1; /* Ocupa el espacio disponible */
   }
 
   /* Cursor parpadeante (ahora como pseudo-elemento de la plataforma) */
   /* Se posicionará después del span gracias a flexbox */
   .plataforma::after {
      content: '_'; /* El cursor */
      font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', monospace;
      font-size: 14px;
      color: #fff;
      text-shadow: 0 0 5px rgba(255, 23, 68, 0.8);
      margin-left: 4px; /* Espacio después del texto */
      flex-shrink: 0; /* No permitir que el cursor se encoja */
      /* Animación de parpadeo */
      animation: blink 1s infinite;
   }
 
   @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
   }


/* RESPONSIVE */

   @media (max-width: 1000px) {
      #menu-principal, #menuMuerte, #fondo, #juego, #instrucciones {
         width: 90vw; /* Ancho del 90% del viewport */
         height: 35vw; /* Ajusta la altura automáticamente */
         padding: 10px; /* Reduce el padding */
      }

      #titulo-juego, #titulo-muerte {
         font-size: 4em;
         margin-bottom: 10px;
      }

      #menu-principal button, #menuMuerte button, #pausa, #btn-salir, #volver-al-juego, #btn-cambiar-idioma, #reiniciar, #menuPrincipal {
         display: flex;
         align-items: center;
      }

      #contenedor-superior {
         display: none !important;
      }

      #dash-cooldown {
         width: 30px;
         height: 30px;
         margin-left: 10px;
      }

      #controles-tactiles {
         display: block;
      }

      #btn-empezar-multijugador, #btn-instrucciones, #btn-ajustes, .enemigo-arriba {
         display: none !important;
      }

      #titulo-juego-splash {
         font-size: 2em;
      }
   }