/* --- 1. RESET Y BASE PANTALLA COMPLETA --- */
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

body,
html {
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   background-color: #050508;
   font-family: 'Jersey 10', sans-serif;
   padding: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
   animation: fadeIn ease-in 0.2s forwards;
}

@keyframes fadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

/* --- 2. CONTENEDOR PRINCIPAL 4:3 --- */
.viewport-4x3 {
   aspect-ratio: 4 / 3;
   height: 96vh;
   max-width: 96vw;
   width: auto;
   position: relative;
   border: 3px solid #334466;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 0 35px rgba(0, 0, 0, 0.9);
   background-image: url('../img/Fondo_1.webp');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   transition: background 1s linear;
}

.game-overlay {
   width: 100%;
   height: 100%;
   background: rgba(10, 15, 30, 0.35);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 20px 40px;
}

/* --- 3. CABECERA Y PIE --- */
.header-bar {
   width: 100%;
   text-align: right;
   color: rgba(255, 255, 255, 0.8);
   font-size: 1.8rem;
}

.key-hint {
   background-color: #0d6efd;
   color: white;
   padding: 2px 10px;
   border-radius: 4px;
   font-size: 1.5rem;
}

.footer-bar {
   width: 100%;
   text-align: center;
   color: rgba(255, 255, 255, 0.4);
   font-size: 1.2rem;
}

/* --- 4. ESTRUCTURA DE DOS COLUMNAS --- */
.menu-columns {
   display: grid;
   grid-template-columns: 1fr 1fr;
   width: 100%;
   height: 80%;
}

div#main-menu-column {
   width: 460px;
}

.column {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 25px;
}

/* --- 5. BOTONES RETRO MENU PRINCIPAL --- */
.btn-retro {
   position: relative;
   width: 100%;
   max-width: 360px;
   height: 195px;
   border: none;
   outline: none;
   background-color: transparent;
   background-image: url('../img/btn-normal.webp');
   background-size: 100% 100%;
   background-repeat: no-repeat;
   color: #ffffff;
   font-size: 4rem;
   font-family: 'Jersey 10', sans-serif;
   letter-spacing: 1px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   user-select: none;
}

.btn-retro.active {
   background-image: url('../img/btn-selected.webp');
   color: #00aaff;
}

/* --- 6. SUBMENÚ 1: SELECCIÓN DE PERSONAJES (RACE) --- */
.character-selection-container {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 35px;
}

.section-title {
   color: #ffffff;
   font-size: 3.8rem;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
   text-align: center;
}

.portraits-row {
   display: flex;
   gap: 90px;
   justify-content: center;
}

.char-card {
   position: relative;
   width: 280px;
   height: 250px;
   border-radius: 8px;
   background-image: url('../img/btn-normal.webp');
   background-size: 100% 100%;
   background-repeat: no-repeat;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
}

.char-card img {
   width: 290px;
   height: 270px;
   object-fit: contain;
   bottom: -40px;
   padding-left: 26px;
}

.char-card.active {
   background-image: url('../img/btn-selected.webp');
}

.stats-box {
   width: 200px;
   height: 215px;
   background-color: #050508be;
   color: white;
   font-size: 1.3rem;
   display: flex;
   flex-direction: column;
   gap: 2px;
   padding: 20px;
   border: solid 5px #00aaff;
   border-radius: 12px;
}

.stats-title {
   color: #00aaff;
   font-size: 2.5rem;
   font-weight: bold;
   text-transform: uppercase;
   margin-bottom: 4px;
}

.stat-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.stat-icons {
   color: #00aaff;
   letter-spacing: 5px;
}

/* --- 7. SUBMENÚ 2: DIFICULTAD HORIZONTAL --- */
.difficulty-container {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   gap: 30px;
}

.difficulty-row {
   display: flex;
   flex-direction: row;
   align-items: left;
   gap: 84px;
   width: 100%;
}

.btn-diff {
   width: 160px;
   height: 160px;
   font-size: 2.5rem;
}

.btn-diff.active::before {
   left: -45px;
   width: 50px;
   height: 50px;
}

/* --- 8. SUBMENÚ 3: RANKING (EXACTO A LA IMAGEN) --- */
.ranking-panel {
   width: 100%;
   height: 96%;
   border: 4px solid #00aaff;
   border-radius: 18px;
   background: rgba(10, 15, 30, 0.55);
   padding: 20px 25px;
   display: flex;
   flex-direction: column;
   box-shadow: 0 0 15px rgba(0, 170, 255, 0.2);
}

.ranking-header {
   font-size: 2.8rem;
   color: #ffffff;
   margin-bottom: 6px;
}

.ranking-divider {
   width: 100%;
   height: 2px;
   background-color: #ffffff;
   margin-bottom: 12px;
}

.ranking-list {
   display: flex;
   flex-direction: column;
   gap: 6px;
   overflow-y: auto;
   padding-right: 5px;
}

.ranking-list::-webkit-scrollbar {
   width: 4px;
}

.ranking-list::-webkit-scrollbar-thumb {
   background: #00aaff;
   border-radius: 2px;
}

.ranking-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 2.3rem;
   line-height: 1.1;
}

.ranking-item .rank-name-group {
   display: flex;
   align-items: center;
   gap: 12px;
}

.ranking-item .rank-num {
   color: #00aaff;
   min-width: 32px;
   text-align: left;
}

.ranking-item .rank-player {
   color: #ffffff;
}

.ranking-item .rank-score {
   color: #ffffff;
   text-align: right;
}

/* --- 9. MANO INDICADORA UNIVERSAL --- */
.btn-retro.active::before,
.char-card.active::before {
   content: '';
   position: absolute;
   left: -95px;
   top: 50%;
   transform: translateY(-50%);
   width: 150px;
   height: 150px;
   background-image: url('../img/mano-cursor.webp');
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   animation: apuntar 0.6s infinite alternate ease-in-out;
   z-index: 10;
}

@keyframes apuntar {
   0% {
      transform: translateY(-50%) translateX(0);
   }

   100% {
      transform: translateY(-50%) translateX(-8px);
   }
}

/* Contenedor principal para mantener todo en su sitio */
.crt-wrapper {
   position: relative;
   display: inline-block;
   overflow: hidden;
   /* Opcional: Curvatura de los bordes para simular un monitor viejo */
   border-radius: 15px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.8) inset;
   aspect-ratio: 4 / 3;
}

/* La capa mágica del filtro */
.crt-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 10;
   pointer-events: none;
   /* ¡Crucial para poder jugar! */
   aspect-ratio: 4 / 3;
   /* Efecto de Scanlines (líneas horizontales) */
   background: linear-gradient(to bottom,
         rgba(7, 7, 7, 0.308),
         rgba(255, 255, 255, 0) 50%,
         rgba(0, 0, 0, 0.25) 50%,
         rgba(0, 0, 0, 0.25));
   background-size: 100% 4px;
   /* Ajusta el 4px para cambiar el grosor de las líneas */
   /* Sombra interior para oscurecer los bordes (Vignette) */
   box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6);
   /* Animación de parpadeo */
   animation: flicker 0.15s infinite;
}

/* Animación sutil de parpadeo de pantalla */
@keyframes flicker {
   0% {
      opacity: 0.94;
   }
   100% {
      opacity: 1;
   }
}