* {
   font-family: "ArcadeClassic";
}

@font-face {
   font-family: "ArcadeClassic";
   src: url("assets/ARCADE_N.TTF");
}

body {
   margin: 0;
   background: #050505;
   color: white;
   font-family: sans-serif;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   overflow: hidden;
   background-image: url(https://taglermaq.cl/wp-content/uploads/2025/05/fondo-maquito.jpg);
   backdrop-filter: blur(3px);
   background-repeat: no-repeat;
   background-size: cover;
}

body:before {
   content: "";
   width: 100%;
   height: 200px;
   position: absolute;
   bottom: 0;
   background: linear-gradient(
      to bottom,
      rgba(80, 47, 123, 0.1) 50%,
      #0d0f19 100%
   );
}

.wrapper-visitante {
   position: absolute;
   bottom: 0;
   display: flex;
   align-items: center;
   gap: 10px;
   text-shadow: 0 0 35px #0d1725;
}

.wrapper-visitante:after {
   font-family: "ArcadeClassic";
   content: "";
   width: 30px;
   height: 2px;
   background-color: #ffffff;
   position: absolute;
   left: -50px;
}

.wrapper-visitante:before {
   font-family: "ArcadeClassic";
   content: "";
   width: 30px;
   height: 2px;
   background-color: #ffffff;
   position: absolute;
   right: -50px;
}

@media (max-width: 600px) {
   .wrapper-visitante {
      display: none;
   }
}

.numero {
   font-size: 1.2em;
   transform: translateY(-1px);
   color: #89ff00;
}

/* Menu */
#start-menu {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 5;
   cursor: pointer;
}

.blink-h1 {
   position: absolute;
   bottom: 120px;
   left: 315px;
   font-size: 1em;
   text-shadow: 3px 3px #555555;
   animation: arcadeBlink 0.5s steps(1) infinite;
}

@keyframes arcadeBlink {
   0% {
      opacity: 1;
   }
   50% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}

#game-container {
   position: relative;
   width: 800px;
   height: 600px;
}

#ui {
   position: absolute;
   top: 10px;
   left: 10px;
   font-size: 20px;
   pointer-events: none; /* Para que no interfiera con los clics */
}

canvas {
   border-radius: 20px;
   background: radial-gradient(circle, #1f2a67 0%, #090a0f 100%);
   box-shadow: 0 0 100px #00ccff;
   display: block;

   /* MOBILE */
   /* Evita gestos nativos de iOS como "atrás" o scroll */
   touch-action: none;
   /* Deshabilita la selección de texto/elementos */
   -webkit-user-select: none;
   user-select: none;
   /* Elimina el recuadro gris al tocar en iPhone */
   -webkit-tap-highlight-color: transparent;
}

.portada {
   border-radius: 20px;
}

#hud {
   position: absolute;
   top: 10px;
   left: 10px;
   width: 220px;
   pointer-events: none; /* Para que los clicks pasen al canvas */
   font-family: "Arial", sans-serif;
   color: white;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.paused {
   display: none;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: white;
   font-family: Arial;
   font-size: 40px;
   text-shadow: 2px 2px 10px orange;
   z-index: 100;
}

.stat-box {
   background: rgba(0, 0, 0, 0.4);
   padding: 5px 10px;
   border-radius: 5px;
   margin-bottom: 5px;
   border-left: 4px solid #f1c40f;
}

.energy-container {
   width: 200px;
   height: 15px;
   background: #333;
   border: 2px solid white;
   border-radius: 10px;
   overflow: hidden;
   margin-top: 10px;
}

#energy-bar {
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, #2ecc71, #27ae60);
   transition: width 0.3s ease;
}

/* Animación de brillo para las monedas */
.glow-effect {
   animation: pulse-yellow 0.5s ease-out;
}

@keyframes pulse-yellow {
   0% {
      transform: scale(1);
      color: #fff;
   }
   50% {
      transform: scale(1.2);
      color: #f1c40f;
      text-shadow: 0 0 15px #f1c40f;
   }
   100% {
      transform: scale(1);
      color: #fff;
   }
}

/* Fuego */
#ship-fire {
   position: absolute;
   width: 45px;
   height: 18px;
   /* Degradado de fuego: blanco -> amarillo -> naranja -> transparente */
   background: linear-gradient(
      to left,
      rgba(255, 255, 255, 0.9),
      #f1c40f,
      #e67e22,
      transparent
   );
   filter: blur(2px);
   border-radius: 50% 0 0 50%;
   pointer-events: none; /* Importante: para que no interfiera con clicks */
   z-index: 1; /* Para que aparezca justo detrás o sobre la nave según prefieras */
   box-shadow: -5px 0 15px #e67e22;
   animation: engineShake 0.05s infinite alternate;
   display: block;
}

@keyframes engineShake {
   from {
      transform: scaleY(1);
      opacity: 0.8;
   }
   to {
      transform: scaleY(1.3);
      opacity: 1;
   }
}

/* Pantalla de Game Over */
#game-over-screen {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: none; /* Se activa por JS */
   flex-direction: column;
   justify-content: center;
   align-items: center;
   z-index: 20;
}

.screen-game-over {
   position: absolute;
   /* filter: grayscale(1); */
}

/* #game-over-title {
   font-size: 3em;
   color: #e74c3c;
   text-shadow: 4px 4px #000;
   margin-bottom: 20px;
} */

.wrapper-results-box {
   top: 300px;
   position: absolute;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.results-box {
   padding: 10px 40px;
   border: 2px solid #67c400;
   border-radius: 10px;
   text-align: left;
   margin-bottom: 10px;
}

.results-box p {
   margin: 10px 0;
   font-size: 1.5em;
}

.wrapper-restart-button {
   display: flex;
   justify-content: center;
}

#menu-button,
#restart-button {
   font-size: 1.1em;
   color: white;
   border: 0;
   cursor: pointer;
}

#menu-button {
   padding: 0.5em 1em;
   background-color: #514fdb;
   margin: 0 1em 0 0;
}

#restart-button {
   padding: 0.5em 3em;
   background-color: #67c400;
}

/* ----------------------------------------- */
/* DISEÑO DEL CONTENEDOR DEL TECLADO VIRTUAL */
/* ----------------------------------------- */
#keyboard-container {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: #2e275f;
   padding: 20px;
   border-radius: 12px;
   z-index: 2000;
   text-align: center;
   width: 700px;
}

#display-name {
   font-size: 16px;
   margin-bottom: 10px;
   border-bottom: 2px solid #82f800;
   min-height: 40px;
   color: #82f800;
   word-break: break-all;
   background: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 10px;
}

.keyboard {
   display: grid;
   grid-template-columns: repeat(10, 1fr) !important;
   gap: 6px;
   margin: 15px 0;
}

.keyboard button {
   padding: 10px 2px;
   font-size: 15px;
   font-weight: bold;
   cursor: pointer;
   border: 1px solid rgba(255, 255, 255, 0.1);
   background-color: #0e0a23;
   border-radius: 4px;
   color: white;
   transition:
      transform 0.1s,
      background-color 0.1s;
}

.keyboard button.selected {
   background-color: #67c400 !important;
   color: #000 !important;
   transform: scale(1.1);
   box-shadow: 0 0 15px #82f800;
   outline: none;
   z-index: 10;
}

/* Estilo para la tecla espacio */
.space-key {
   grid-column: span 4; /* Que ocupe el espacio de 4 teclas normales */
   background-color: #444 !important;
   color: white;
   font-weight: bold;
   letter-spacing: 2px;
}

.space-key:active {
   background-color: #666 !important;
   transform: scale(0.95);
}

/* ----------------------------------------- */
/* --- ESTILOS DE TABLA ARCADE --- */
/* ----------------------------------------- */

.ranking-title {
   font-family: "ArcadeClassic", sans-serif;
   color: #00ff00;
   text-shadow: 2px 2px #000;
   font-size: 28px;
   margin-bottom: 20px;
}

.score-table {
   width: 100%;
   border-collapse: collapse;
   font-family: "ArcadeClassic", sans-serif;
   background-color: transparent;
   table-layout: auto; /* CAMBIADO A AUTO PARA QUE NO SE CORTE EL EMAIL */
}

.score-table th {
   color: #cac2ff !important;
   padding: 10px;
   font-size: 16px;
   border-bottom: 2px solid #333;
   text-align: left;
}

/* Ajuste específico para la celda del EMAIL */
.score-table td {
   padding: 8px 5px;
   font-size: 0.9em; /* Tamaño para POS y SCORE */
   border-bottom: 1px solid #3e3e54;
   text-align: left;
}

/* MOBILE - Mejora el diseño del ranking en pantallas pequeñas (según tu captura) */
@media (max-width: 600px) {
   .score-table th,
   .score-table td {
      font-size: 12px;
      padding: 5px 2px;
   }
   .ranking-title {
      font-size: 18px;
   }
}

/* Damos espacio al EMAIL y bajamos un poco su tamaño para que quepa todo */
.email-cell {
   width: 65%;
   text-align: left;
   padding-left: 15px !important;
   text-transform: lowercase;
   font-size: 13px !important; /* Fuente reducida para emails largos */
   white-space: nowrap;
   overflow: visible;
}

td.email-cell {
   white-space: normal;
}

/* ----------------------------------------- */
/* --- ANIMACIONES DE SECUENCIA --- */
/* ----------------------------------------- */

@keyframes arcadeAppear {
   from {
      opacity: 0;
      transform: translateX(-10px);
   }
   to {
      opacity: 1;
      transform: translateX(0);
   }
}

.row-fade-in {
   opacity: 0;
   animation: arcadeAppear 0.5s forwards;
}

.current-player-row {
   background-color: rgba(255, 255, 255, 0.15) !important;
   animation: arcadeBlink 0.4s steps(2) infinite !important;
}

.champion-blink td {
   animation: arcadeBlink 0.4s steps(2) infinite !important;
}

@keyframes arcadeBlink {
   0% {
      opacity: 1;
   }
   50% {
      opacity: 0.1;
   } /* Parpadeo más marcado */
   100% {
      opacity: 1;
   }
}

/* ----------------------------------------- */
/* --- COLORES DE RANKING --- */
/* ----------------------------------------- */

.color-1 td {
   color: #ffff00 !important;
   background-color: #0b0a1d;
}
.color-2 td {
   color: #00ffff !important;
}
.color-3 td {
   color: #ff00ff !important;
}
.color-4 td {
   color: #00ff00 !important;
}
.color-5 td {
   color: #ff4500 !important;
}
.color-6 td {
   color: #00bfff !important;
}
.color-7 td {
   color: #adff2f !important;
}
.color-8 td {
   color: #ff1493 !important;
}
.color-9 td {
   color: #ff8a2f !important;
}
.color-10 td {
   color: #ff0000 !important;
}

.btn-retry-all {
   margin-top: 20px;
   background: #5e37b2;
   color: #fff;
   border: 2px solid #fff;
   padding: 12px 25px;
   cursor: pointer;
   font-family: "ArcadeClassic", sans-serif;
   font-size: 0.8em;
   transition: background 0.2s;
}

/* ----------------------------------------- */
/* --- ANIMACIÓN DE RESULTADOS GAME OVER --- */
/* ----------------------------------------- */
.wrapper-results-box p {
   opacity: 0;
   transform: translateY(20px);
   transition: all 0.5s ease;
}

.wrapper-results-box p.show {
   opacity: 1;
   transform: translateY(0);
}

/* --- ESTILO DE MEDALLAS EN EL RANKING --- */
.medal {
   font-size: 1.2em;
   margin-right: 5px;
}