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

    body,
    html {
         width: 100vw;
         height: 100vh;
         overflow: hidden;
         background-color: #000000;
         font-family: 'Jersey 10', sans-serif;
         padding: 10px;
         display: flex;
         justify-content: center;
         align-items: center;
         opacity: 0;
         animation: fadeIn ease-in 1s 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;
    }

    .game-overlay {
         width: 100%;
         height: 100%;
         background: rgba(10, 15, 30, 0.4);

         display: flex;
         flex-direction: column;
         justify-content: space-between;
         padding: 25px 45px;
    }

    /* --- 3. CABECERA --- */
    .header-bar {
         width: 100%;
         margin-left: 20px;
    }

    .congrats-title {
         font-size: 3rem;
         color: #ffffff;
         text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
         line-height: 1.1;
    }

    .sub-title {
         font-size: 2.8rem;
         color: #ffffff;
         text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
         margin-bottom: 0px;
    }

    /* --- 4. PANEL DEL TECLADO CON MARCO AZUL --- */
    .keyboard-panel {
         width: 100%;
         max-width: 68%;
         height: 68vh;
         border: 4px solid #00aaff;
         border-radius: 18px;
         background: rgba(10, 15, 30, 0.65);
         padding: 0px;
         margin: 0 auto;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         box-shadow: 0 0 20px rgba(0, 170, 255, 0.25);
         padding-left: 25px;
         padding-right: 50px;
         margin-left: 30%;
    }

    .keyboard-grid {
         display: flex;
         flex-direction: column;
         gap: 2px;
    }

    .keyboard-row {
         display: flex;
         align-items: center;
         width: 100%;
    }

    /* Zona de caracteres principales (10 columnas) */
    .chars-group {
         display: flex;
         flex: 1;
         justify-content: flex-start;
         gap: 2px;
    }

    /* Zona de botones de acción a la derecha */
    .actions-group {
         width: 150px;
         display: flex;
         justify-content: flex-end;
    }

    /* Estilo de los caracteres seleccionables */
    .key-item {
         font-size: 3.8rem;
         color: #ffffff;
         background-color: #0063ff0f !important;
         border: none;
         font-family: 'Jersey 10', sans-serif;
         cursor: pointer;
         user-select: none;
         min-width: 5px;
         text-align: center;
         transition: color 0.1s ease;
         margin-right: -6px;
    }

    /* Foco activo: Letra en color Azul/Cian */
    .key-item.active {
         color: #00aaff;
         text-shadow: 0 0 8px rgba(18, 53, 71, 0.8);
    }

    /* --- 5. CAJA DE TEXTO DEL NOMBRE --- */
    .name-display {
         font-size: 4.2rem;
         color: #bbe8ff;
         letter-spacing: 1.5px;
         display: flex;
         align-items: center;
         margin-top: 0px;
         margin-bottom: 20px;
    }

    .cursor-line {
         display: inline-block;
         width: 12px;
         height: 45px;
         background-color: #ffffff;
         margin-left: 5px;
         animation: blink 0.8s infinite;
    }

    @keyframes blink {

         0%,
         100% {
              opacity: 1;
         }

         50% {
              opacity: 0;
         }
    }

    /* --- 6. PIE --- */
    .footer-bar {
         width: 100%;
         text-align: right;
         color: rgba(255, 255, 255, 0.85);
         font-size: 1.8rem;
    }

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

    /* --- RANKING --- */
    .ranking-panel {
         width: 100%;
         height: 100%;
    }

    .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;
    }

    span.rank-player.actual {
         background-color: #00aaff;
         padding-left: 20px;
         padding-right: 20px;
         border-radius: 6px;
    }

    .qr {
         top: 30%;
         width: 20%;
         position: absolute;


    }

    div.qr>img {

         border-radius: 10px;
         -webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 10px 5px rgba(36, 94, 143, 0.43);
         box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 10px 5px rgba(36, 94, 143, 0.43);
         border: solid 5px #0080c0;
    }

    div.qr>h2 {
         color: white;
         font-size: 2rem;
         line-height: 1;
    }

    /* 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;
         }
    }

    canvas {
         filter: contrast(1.1) brightness(1.08);
    }