@font-face {
    font-family: "Press Start 2P";
    src: url("../assets/fonts/PressStart2P-Regular.ttf") format("truetype");
}

* {
    -webkit-tap-highlight-color: transparent;
}

*:focus {
    outline: none;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden;
    background: #050505;
    font-family: "Press Start 2P", monospace;
}

.start-screen {
    width: 100%;
    height: 100dvh;

    display: flex;
    justify-content: center;
    align-items: center;

    background:
        radial-gradient(
            circle at center,
            #ffffff 0%,
            #66b3ff 40%,
            #0066cc 100%
        );
}

.start-content {
    width: min(86%, 420px);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 28px;
}

/* LOGO */

.logo {
    width: min(85%, 360px);
    height: auto;

    image-rendering: pixelated;

    animation: logoAppear 0.8s ease-out both;
}

/* LOADING */

.loading-container {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 8px;
}

.loading-text {
    color: rgb(192, 58, 58);

    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;

    animation: blink 1s steps(2) infinite;
}

.loading-bar {
    width: 100%;
    height: 22px;

    padding: 3px;

    border: 3px solid white;

    background: #111;

    image-rendering: pixelated;
}

.loading-progress {
    width: 0%;
    height: 100%;

    background: white;

    transition: width 0.05s linear;
}

.loading-percent {
    color: white;

    font-size: 12px;
    font-weight: bold;
}

/* BOTÓN */

.start-button {
    opacity: 0;
    pointer-events: none;

    padding: 15px 30px;

    border: 3px solid white;
    border-radius: 50%;

    background: #fa3535;
    color: white;

    font-family: "Press Start 2P", monospace;
    font-size: 12px;
    font-weight: bold;

    cursor: pointer;

    image-rendering: pixelated;

    transition:
        transform 0.15s,
        background 0.15s,
        opacity 0.4s;
    
    width: 95px;
    height: 95px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.start-button.visible {
    opacity: 1;
    pointer-events: auto;

    animation: buttonAppear 0.4s steps(4);
}

.start-button:hover {
    background: rgb(248, 188, 23);
    color: rgb(236, 49, 24);

    transform: scale(1.04);
}

.start-button:active {
    transform: scale(0.96);
}

/* ANIMACIONES */

@keyframes logoAppear {

    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes buttonAppear {

    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

@keyframes blink {

    50% {
        opacity: 0.4;
    }
}

/* ============================================================
   PANTALLA 2 — INTRO
   ============================================================ */

/*
    La pantalla ocupa todo el celular.
*/

.intro-screen {

    width: 100%;
    height: 100dvh;

    /*
        La pantalla comienza oculta.

        JavaScript la mostrará cuando
        presionemos "EMPECEMOS".
    */

    display: none;

    /*
        Acá usamos el mismo fondo de la pantalla 1.

        Si ya tenés otro gradiente, reemplazá estos colores
        por los tuyos.
    */

    background:
        linear-gradient(
            180deg,
            #1280cf 0%,
            #52b2f1 55%,
            #8db9fa 100%
        );

    /*
        Importante:

        Sonic y Eggman empiezan fuera de la pantalla.
        No queremos que aparezca una barra de desplazamiento.
    */

    overflow: hidden;

}


/* ============================================================
   CONTENEDOR DE LA ESCENA
   ============================================================ */

.intro-content {

    /*
        Necesitamos que este contenedor ocupe
        toda la pantalla.
    */

    width: 100%;
    height: 100%;

    /*
        "relative" permite que después podamos
        posicionar Sonic, Eggman y los diálogos
        tomando este contenedor como referencia.
    */

    position: relative;

}


/* ============================================================
   PERSONAJES
   ============================================================ */

.character {

    /*
        Los personajes estarán posicionados
        independientemente del resto de elementos.
    */

    position: absolute;

    /*
        Evita que el navegador suavice demasiado
        los bordes de nuestros PNG pixel art.
    */

    image-rendering: pixelated;

    /*
        El ancho lo vamos a definir individualmente
        para Sonic y Eggman.
    */

    height: auto;

}


/* ============================================================
   EGGMAN
   ============================================================ */

.eggman {

    /*
        Tamaño de Eggman.

        Esto es un punto de partida.
        Después lo ajustamos viendo tu PNG real.
    */

    width: 40%;

    /*
        Posición FINAL de Eggman.

        Arriba y hacia la derecha.
    */

    top: 20%;
    right: 8%;

    /*
        POSICIÓN INICIAL

        Lo colocamos fuera de la pantalla,
        hacia la derecha.

        120% = completamente fuera.
    */

    transform: translateX(120%);

    /*
        Cuando cambie la posición,
        queremos que se deslice suavemente.
    */

    transition:
        transform 0.8s ease-out;

}


/*
    Cuando JavaScript agregue la clase "show",
    Eggman volverá a su posición normal.
*/

.eggman.show {

    transform: translateX(0);

}


/* ============================================================
   SONIC
   ============================================================ */

.sonic {

    /*
        Tamaño de Sonic.
    */

    width: 30%;

    /*
        Posición FINAL.

        Sonic estará abajo y a la izquierda.
    */

    left: 8%;
    bottom: 15%;

    /*
        POSICIÓN INICIAL

        Sonic comienza fuera de la pantalla,
        por el lado izquierdo.
    */

    transform: translateX(-120%);

    /*
        Duración de la entrada.
    */

    transition:
        transform 0.8s ease-out;

}


/*
    Estado visible de Sonic.
*/

.sonic.show {

    transform: translateX(0);

}

/* ============================================================
   DIÁLOGOS
   ============================================================ */

/* ============================================================
   BURBUJAS DE DIÁLOGO — ESTILO 8 BIT
   ============================================================ */

/* ============================================================
   BURBUJAS DE DIÁLOGO — ESTILO 8 BIT
   ============================================================ */

.dialogue {

    position: absolute;

    /* --------------------------------------------------------
       APARIENCIA
       -------------------------------------------------------- */

    background: #ffffff;

    color: #111111;

    /*
        Borde grueso para darle aspecto de videojuego.
    */

    border: 4px solid #111111;

    /*
        No usamos border-radius.
        Queremos que se vea pixelado.
    */

    border-radius: 0;

    /*
        Espacio interno.
    */

    padding: 12px 16px;

    /*
        Tamaño máximo de la burbuja.
    */

    max-width: 230px;

    /*
        Tipografía.
    */

    font-family: "Press Start 2P", monospace;

    font-size: 9px;

    line-height: 1.7;

    text-align: center;

    /*
        Evitamos que una palabra demasiado larga
        rompa la burbuja.
    */

    overflow-wrap: break-word;


    /* --------------------------------------------------------
       SOMBRA PIXEL
       -------------------------------------------------------- */

    box-shadow:
        5px 5px 0 #111111;


    /* --------------------------------------------------------
       ANIMACIÓN
       -------------------------------------------------------- */

    opacity: 0;

    visibility: hidden;

    transform: scale(0.8);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;

    /*
        Las burbujas estarán por encima
        de los personajes.
    */

    z-index: 10;
}


/* ============================================================
   BURBUJA VISIBLE
   ============================================================ */

.dialogue.show {

    opacity: 1;

    visibility: visible;

    transform: scale(1);
}


/*
    Cuando aparece.
*/

.dialogue.show {

    opacity: 1;

    visibility: visible;

    transform: scale(1);

}

/* ============================================================
   ESQUINAS PIXELADAS
   ============================================================ */

.dialogue::before,
.dialogue::after {

    content: "";

    position: absolute;

    width: 6px;
    height: 6px;

    background: #111111;
}


/*
    Esquina superior izquierda
*/

.dialogue::before {

    top: -4px;
    left: -4px;
}


/*
    Esquina inferior derecha
*/

.dialogue::after {

    bottom: -4px;
    right: -4px;
}


/*
    Cuando JavaScript agrega la clase "show",
    el diálogo se vuelve visible.
*/

.dialogue.show {

    opacity: 1;

    visibility: visible;

}

/* ============================================================
   BOTÓN ¡VAMOS!
   ============================================================ */

.play-button {

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.3s ease;

}


.play-button.show {

    opacity: 1;

    visibility: visible;

}

/* ============================================================
   DIÁLOGOS DE EGGMAN
   ============================================================ */

.eggman-dialogue {

    /*
        Eggman está arriba a la derecha,
        así que colocamos la burbuja debajo de él.
    */

    top: 29%;

    right: 45%;

}


/*
    Segundo diálogo de Eggman
    utiliza exactamente la misma posición.
*/

.eggman-dialogue-2 {

    top: 32%;

    right: 45%;

}

/* ============================================================
   DIÁLOGO DE SONIC
   ============================================================ */

.sonic-dialogue {

    left: 35%;

    bottom: 22%;

}

/* ============================================================
   BOTÓN ¡VAMOS!
   ============================================================ */

.play-button {

    /*
        Lo posicionamos dentro de la escena.
    */

    position: absolute;

    /*
        Lo colocamos en la parte inferior,
        centrado horizontalmente.
    */

    bottom: 5%;
    left: 50%;

    /*
        Como left: 50% coloca el borde izquierdo
        en el centro, usamos translateX para
        centrar realmente el botón.
    */

    transform: translateX(-50%);

    /*
        Tamaño del botón.
    */

    padding: 14px 24px;

    /*
        Estilo visual.
    */

    background: #e52521;

    color: white;

    border: 2px solid #ffde21;
    
    /* Sombra del botón */
    box-shadow: 0 8px 16px rgba(0,0,0,0.35), inset 0 -2px 0 rgba(0,0,0,0.12);
    filter: drop-shadow(0 6px 8px rgba(0,0,0,0.25));

    /* Botón redondo */
    border-radius: 9999px;

    font-family: "Press Start 2P", monospace;

    font-size: 11px;

    cursor: pointer;

    /*
        Lo mantenemos por encima de los personajes
        y diálogos.
    */

    z-index: 20;

}

/* ============================================================
   COLA DE EGGMAN
   ============================================================ */

.eggman-dialogue::after {

    content: "";

    position: absolute;

    width: 12px;
    height: 12px;

    background: #ffffff;

    border-right: 4px solid #111111;
    border-bottom: 4px solid #111111;

    /*
        La cola apunta hacia abajo.
    */

    bottom: -10px;
    left: 10px;

    transform: rotate(45deg);
}

.eggman-dialogue-2::after {

    content: "";

    position: absolute;

    width: 12px;
    height: 12px;

    background: #ffffff;

    border-right: 4px solid #111111;
    border-bottom: 4px solid #111111;

    /*
        La cola apunta hacia abajo.
    */

    bottom: -10px;
    left: 10px;

    transform: rotate(45deg);
}

/* ============================================================
   COLA DE SONIC
   ============================================================ */

.sonic-dialogue::after {

    content: "";

    position: absolute;

    width: 12px;
    height: 12px;

    background: #ffffff;

    border-right: 4px solid #111111;
    border-bottom: 4px solid #111111;

    bottom: -10px;
    left: 10px;

    transform: rotate(45deg);
}

/* ============================================================
   PANTALLA 3 — JUEGO
   ============================================================ */

.game-screen {

    width: 100%;
    height: 100dvh;

    /*
        Comienza oculta.
    */

    display: none;

    /*
        No queremos scroll.
    */

    overflow: hidden;

    /*
        Green Hill será nuestra escena.
    */

    position: relative;

}


/* ============================================================
   CONTENEDOR DEL JUEGO
   ============================================================ */

.game-content {

    width: 100%;
    height: 100%;

    position: relative;

    overflow: hidden;
    z-index: 0;

}


/* ============================================================
   FONDO GREEN HILL
   ============================================================ */

.game-background {

    width: 100%;
    height: 100%;

    /*
        La imagen llena toda la pantalla.
    */

    object-fit: cover;

    /*
        Evitamos que el navegador
        suavice el pixel art.
    */

    image-rendering: pixelated;

    /*
        La imagen queda detrás
        de todos los objetos.
    */

    position: absolute;

    inset: 0;
    z-index: 1;

}

/* ============================================================
   HUD DEL JUEGO
   ============================================================ */

.game-hud {

    /*
        El HUD queda por encima del fondo.
    */

    position: absolute;

    top: 18px;
    left: 18px;
    right: 18px;

    /*
        Lo colocamos por encima de todos
        los elementos del juego.
    */

    z-index: 50;

    /*
        Distribuye el contador a la izquierda
        y la lámpara a la derecha.
    */

    display: flex;

    justify-content: space-between;

    align-items: center;
}


/* ============================================================
   CONTADOR DE GEMAS
   ============================================================ */

.gem-counter {

    display: flex;

    align-items: center;

    gap: 8px;

    /*
        Fondo blanco tipo interfaz retro.
    */

    background: white;

    /*
        Borde pixelado.
    */

    border: 4px solid #111;

    /*
        Sombra dura.
    */

    box-shadow: 5px 5px 0 #111;

    padding: 8px 12px;

    /*
        Tipografía pixel.
    */

    font-family: "Press Start 2P", monospace;

    font-size: 10px;

    color: #111;

}


/* ============================================================
   ICONO DE GEMA
   ============================================================ */

.gem-icon {

    font-size: 18px;

    /*
        Evitamos que el emoji se comporte
        como un texto normal.
    */

    line-height: 1;

}


/* ============================================================
   BOTÓN DE PISTA
   ============================================================ */

.hint-button {

    width: 48px;
    height: 48px;

    /*
        Botón cuadrado para mantener
        la estética 8-bit.
    */

    background: white;

    border: 4px solid #111;

    box-shadow: 5px 5px 0 #111;

    /*
        El emoji funciona como icono
        mientras estamos prototipando.
    */

    font-size: 22px;

    cursor: pointer;

    /*
        Evita que aparezca el borde azul
        predeterminado al tocarlo.
    */

    outline: none;

}


/* ============================================================
   EFECTO AL TOCAR LA LÁMPARA
   ============================================================ */

.hint-button:active {

    /*
        Simulamos que el botón se hunde.
    */

    transform: translate(4px, 4px);

    box-shadow: 1px 1px 0 #111;

}

/* ============================================================
   ESCONDITE DE GEMA
   ============================================================ */

.gem-spot {

    position: absolute;

    /*
        Posición provisional.
        Después la vamos a ajustar mirando
        tu escena.
    */

    left: 55%;
    bottom: 3%;

    /*
        El contenedor ocupa solamente
        el espacio necesario.
    */

    width: 100px;
    height: 100px;

    z-index: 10;


}

#bush1 {
    width: 75px;
    height: auto;
}


/* ============================================================
   OBJETO DEL ESCENARIO
   ============================================================ */

.game-object {

    width: 100px;
    height: auto;

    display: block;

    cursor: pointer;

    /*
        Evita que el navegador arrastre
        la imagen al tocarla.
    */

    -webkit-user-select: none;
    user-select: none;

}


/* ============================================================
   GEMA OCULTA
   ============================================================ */

.hidden-gem {

    position: absolute;

    /*
        La gema empieza detrás del arbusto.
    */

    z-index: 1;

    width: 35px;
    height: auto;

    left: 32px;
    top: 20px;

    opacity: 0;

    visibility: hidden;

    transform: scale(0.5);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


/*
    Cuando encontramos la gema.
*/

/* ============================================================
   APARICIÓN DE LA GEMA
   ============================================================ */

@keyframes gemAppear {

    0% {

        opacity: 0;

        transform:
            translateY(15px)
            scale(0);

    }

    50% {

        opacity: 1;

        transform:
            translateY(-8px)
            scale(1.2);

    }

    75% {

        transform:
            translateY(0)
            scale(0.9);

    }

    100% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/*
    Estado final de la gema encontrada.
*/

.hidden-gem.found {

    visibility: visible;

    z-index: 20;

    animation: gemAppear 0.45s ease-out forwards;
}

/* ============================================================
   VIBRACIÓN DEL ARBUSTO
   ============================================================ */

@keyframes bushShake {

    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-4px);
    }

    40% {
        transform: translateX(4px);
    }

    60% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(3px);
    }

    100% {
        transform: translateX(0);
    }

}


/*
    Esta clase se agrega desde JavaScript
    cuando el jugador toca el arbusto.
*/

.game-object.shake {

    animation: bushShake 0.35s ease;
}

/* ============================================================
   POSICIÓN ROCA
   ============================================================ */

#gemSpot2{

    left: 71%;
    top: 71%;
}

/* ============================================================
   POSICIÓN TERCER ESCONDITE
   ============================================================ */

#gemSpot3 {

    left: 2%;
    top: 56%;
}

#plant1 {
    width: 60px;
    height: auto;
}

/* ============================================================
   CUARTO ESCONDITE — CAJA
   ============================================================ */

#gemSpot4 {

    left: -2%;
    top: 84%;
}

#box1 {
    width: 95px;
    height: auto;
}

/* ============================================================
   QUINTO ESCONDITE — NUBE
   ============================================================ */

#gemSpot5 {

    left: 7%;
    top: 20%;
}

#cloud1 {
    width: 90px;
    height: auto;
}

/* ============================================================
   SEXTO ESCONDITE — PALMERA
   ============================================================ */

#gemSpot6 {

    left: 60%;
    top: 34%;
}

#Palm1 {
    width: 90px;
    height: auto;
    filter: saturate(0.95) brightness(1) contrast(0.9);
}

/* ============================================================
   SEPTIMO ESCONDITE — HIERVA
   ============================================================ */

#gemSpot7 {

    left: 14%;
    top: 49%;
}

#hier1 {
    width: 90px;
    height: auto;
    /* filter: saturate(0.95) brightness(1) contrast(0.9); */
}

/* ============================================================
   ESCENA FINAL
   ============================================================ */

.final-screen {

    /*
        La pantalla ocupa todo el celular.
    */

    width: 100%;
    height: 100dvh;

    /*
        Comienza oculta.

        Después JavaScript la mostrará
        cuando encontremos las 7 gemas.
    */

    display: none;

    /*
        Necesitamos position relative porque
        todos los elementos de esta escena
        se posicionarán dentro de ella.
    */

    position: relative;

    /*
        Evitamos que aparezca scroll.
    */

    overflow: hidden;

}


/* ============================================================
   FONDO
   ============================================================ */

.final-background {

    /*
        El fondo ocupa toda la pantalla.
    */

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    /*
        La imagen mantiene su proporción
        llenando toda la pantalla.
    */

    object-fit: cover;

    /*
        Queda detrás de todo.
    */

    z-index: 0;

}


/* ============================================================
   OSCURECER GREEN HILL
   ============================================================ */

.final-screen::after {

    content: "";

    /*
        La capa cubre toda la escena.
    */

    position: absolute;

    inset: 0;

    /*
        Negro semitransparente.

        Si queda demasiado oscuro podemos
        bajar 0.35 a 0.25.
    */

    background: rgba(0, 0, 0, 0.35);

    /*
        Encima del fondo,
        pero debajo de los elementos.
    */

    z-index: 1;

}


/* ============================================================
   CONTENEDOR DE ANILLOS
   ============================================================ */

.ring-container {

    /*
        Ocupa toda la pantalla.
    */

    position: absolute;

    inset: 0;

    /*
        Los anillos estarán por encima
        del fondo oscuro.
    */

    z-index: 2;

    /*
        No queremos que interfieran
        con los botones o diálogos.
    */

    pointer-events: none;

}


/* ============================================================
   ANILLOS
   ============================================================ */

/* ============================================================
   ANILLOS
   ============================================================ */

.falling-ring {

    position: absolute;

    width: 40px;
    height: auto;

    top: -70px;

    z-index: 20;

    pointer-events: none;

    animation-name: fallingRing;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

}


/* ============================================================
   ANILLO 1
   ============================================================ */

.ring-1 {

    left: 8%;

    width: 32px;

    animation-duration: 4.5s;
    animation-delay: 0s;

}


/* ============================================================
   ANILLO 2
   ============================================================ */

.ring-2 {

    left: 27%;

    width: 45px;

    animation-duration: 6s;
    animation-delay: -2s;

}


/* ============================================================
   ANILLO 3
   ============================================================ */

.ring-3 {

    left: 48%;

    width: 30px;

    animation-duration: 5s;
    animation-delay: -4s;

}


/* ============================================================
   ANILLO 4
   ============================================================ */

.ring-4 {

    left: 68%;

    width: 50px;

    animation-duration: 6.5s;
    animation-delay: -1s;

}


/* ============================================================
   ANILLO 5
   ============================================================ */

.ring-5 {

    left: 88%;

    width: 35px;

    animation-duration: 4.8s;
    animation-delay: -3s;

}


/* ============================================================
   CAÍDA DE LOS ANILLOS
   ============================================================ */

@keyframes fallingRing {

    0% {

        transform:
            translateY(-80px)
            rotate(0deg);

    }

    100% {

        transform:
            translateY(115vh)
            rotate(360deg);

    }

}




/* ============================================================
   POSICIONES DE LOS ANILLOS
   ============================================================ */

.ring-1 {
    left: 10%;
}

.ring-2 {
    left: 30%;
}

.ring-3 {
    left: 52%;
}

.ring-4 {
    left: 72%;
}

.ring-5 {
    left: 90%;
}


/* ============================================================
   VALENTÍN
   ============================================================ */

.final-valentin {

    position: absolute;

    /*
        Parte inferior izquierda.
    */

    left: 5%;
    bottom: 3%;

    /*
        Tamaño inicial.

        Después lo ajustamos mirando
        tu personaje.
    */

    width: 180px;
    height: auto;

    z-index: 3;

}


/* ============================================================
   CARTEL DE DIÁLOGO
   ============================================================ */

.final-dialogue {

    position: absolute;

    /*
        Lo centramos horizontalmente.
    */

    left: 50%;

    transform: translateX(-50%);

    /*
        Posición vertical.
    */

    top: 15%;

    /*
        Ancho adaptado al celular.
    */

    width: 82%;

    max-width: 500px;

    /*
        Fondo blanco.
    */

    background: white;

    /*
        Borde estilo 8-bit.
    */

    border: 5px solid #111;

    /*
        Sombra dura.
    */

    box-shadow: 8px 8px 0 #111;

    /*
        Espaciado interno.
    */

    padding: 24px;

    /*
        Para que quede por encima
        de Valentín y los anillos.
    */

    z-index: 4;

    /*
        Box sizing evita que el padding
        aumente el ancho total.
    */

    box-sizing: border-box;

    opacity: 1;
    transition: opacity 0.4s ease,
                transform 0.4s ease;

}

.final-dialogue.hide {

    opacity: 0;

    transform: translateY(10px) translateX(-50%);

}


/* ============================================================
   MENSAJE
   ============================================================ */

.final-message {

    margin: 0;

    /*
        Nuestra tipografía pixel.
    */

    font-family: "Press Start 2P", monospace;

    font-size: 12px;

    line-height: 1.8;

    color: #111;

    text-align: center;

}


/* ============================================================
   BOTONES / ACCIONES
   ============================================================ */

.final-actions {

    margin-top: 20px;

    display: flex;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;

}

/* ============================================================
   BOTONES DEL DIÁLOGO FINAL
   ============================================================ */

.final-button {

    font-family: "Press Start 2P", monospace;

    font-size: 9px;

    padding: 12px 14px;

    background: white;

    color: #111;

    border: 4px solid #111;

    box-shadow: 5px 5px 0 #111;

    cursor: pointer;

    transition:
        transform 0.1s ease,
        box-shadow 0.1s ease;
}


.final-button:active {

    transform: translate(4px, 4px);

    box-shadow: 1px 1px 0 #111;

}

/* ============================================================
   CAMPO DE NOMBRE
   ============================================================ */

.final-input {

    width: 100%;

    box-sizing: border-box;

    padding: 12px;

    margin-top: 18px;

    font-family: "Press Start 2P", monospace;

    font-size: 10px;

    text-align: center;

    color: #111;

    background: white;

    border: 4px solid #111;

    outline: none;

}


.final-input:focus {

    box-shadow: 5px 5px 0 #111;

}