/* ==============================
   RESET
============================== */

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


/* ==============================
   BODY
============================== */

body {
    min-height: 100vh;
    min-height: 100dvh;

    margin: 0;

    background-image: url("assets/background.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    overflow: hidden;
}


/* ==============================
   GAME BOY START SCREEN
============================== */

#start-screen {
    position: fixed;
    inset: 0;

    z-index: 3000;

    background: #000000;

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

    cursor: pointer;
}


/* Closed Game Boy */

#gameboy {
    width: min(350px, 60vw);
    max-height: 60vh;

    height: auto;

    display: block;

    object-fit: contain;
}


/* Tap message */

#tap-message {
    margin-top: 25px;

    color: #ffffff;

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

    font-size: clamp(10px, 2.5vw, 16px);

    text-align: center;

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


/* ==============================
   NINTENDO INTRO
============================== */
#intro-screen {
    position: fixed;
    inset: 0;

    z-index: 2000;

    background: #000000;

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

    opacity: 0;

    pointer-events: none;

    transition: none;
}


/* Show Nintendo intro */
#intro-screen.visible {
    opacity: 1;
    pointer-events: auto;
}


/* Video itself */

#intro-video {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;

    transform: scale(1);

    transform-origin: 50% 23%;

    transition: transform 0.5s ease-in;
}


/* Zoom into Game Boy screen */

#intro-screen.zoom-in #intro-video {
    transform: scale(6);
}



/* ==============================
   PAGE TRANSITION
============================== */

#screen-fade {
    position: fixed;
    inset: 0;

    background: #000000;

    opacity: 0;
    pointer-events: none;

    z-index: 99999;

    transition: opacity 0.9s ease;
}

#screen-fade.active {
    opacity: 1;
}
/* ==============================
   PIKACHU
============================== */

.pikachu {
    position: absolute;

    width: min(260px, 50vw);

    height: auto;

    left: 50%;

    bottom: clamp(20px, 8vh, 80px);

    /* Completely outside the left side */
    transform: translateX(calc(-150vw - 50%));

    display: block;

    pointer-events: none;

    z-index: 10;
}

.pikachu.run-in {
    animation: pikachuRunIn 3.5s linear forwards;
}

@keyframes pikachuRunIn {

    from {
        transform: translateX(calc(-150vw - 50%));
    }

    to {
        transform: translateX(-50%);
    }
}


/* ==============================
   TITLE SCREEN
============================== */

.title-screen {
    position: fixed;
    inset: 0;

    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

    padding: 20px;

    padding-bottom: clamp(140px, 20vh, 200px);

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

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

    text-align: center;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.4s ease;
}


/* When intro finishes */

.title-screen.visible {
    opacity: 1;

    pointer-events: auto;
}


/* ==============================
   MUTE BUTTON
============================== */

#mute-button {
    position: absolute;

    top: 25px;
    right: 25px;

    width: 48px;
    height: 48px;

    border: 3px solid #000000;

    border-radius: 6px;

    background: #ffffff;

    font-size: 22px;

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

    cursor: pointer;

    z-index: 100;

    transition:
        transform 0.15s ease,
        background 0.15s ease;
}

#mute-button:hover {
    transform: scale(1.1);
}

#mute-button:active {
    transform: scale(0.9);
}


/* ==============================
   POKÉMON LOGO
============================== */

.pokemon-logo {
    width: min(500px, 80vw);

    height: auto;

    display: block;

    margin-bottom: clamp(15px, 3vh, 25px);
}


/* ==============================
   TITLE / VERSION
============================== */

#version-title {
    min-height: 2em;

    font-size: clamp(16px, 4vw, 25px);

    font-weight: normal;

    color: #000000;

    line-height: 1.6;

    margin-bottom: clamp(20px, 4vh, 35px);
}


/* Typewriter cursor */

#version-title::after {
    content: "_";

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


/* Remove cursor after typing */

#version-title.typed::after {
    content: "";
}


/* ==============================
   START BUTTON
============================== */

.start-button {
    display: block;

    margin-bottom: clamp(20px, 4vh, 30px);

    transition: transform 0.15s ease;
}

.start-button img {
    width: min(150px, 35vw);

    height: auto;

    display: block;
}

.start-button:hover {
    transform: scale(1.1);
}

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


/* ==============================
   BLINK ANIMATION
============================== */

@keyframes blink {

    50% {
        opacity: 0;
    }
}


/* =========================================================
   TABLET / iPAD
   481px – 1024px
   Does NOT affect your current mobile or PC settings.
========================================================= */

@media (min-width: 481px) and (max-width: 1024px) and (min-height: 601px) {

    /* ==============================
       GAME BOY
    ============================== */

    #gameboy {
        width: clamp(350px, 52vw, 500px);

        max-width: 80vw;

        max-height: 62vh;
    }


    #tap-message {
        margin-top: clamp(18px, 2.5vh, 28px);

        font-size: clamp(11px, 1.8vw, 16px);
    }


    /* ==============================
       TITLE SCREEN
    ============================== */

    .title-screen {
        padding-left: 30px;
        padding-right: 30px;

        padding-bottom: clamp(150px, 18vh, 210px);
    }


    /* ==============================
       POKÉMON LOGO
    ============================== */

    .pokemon-logo {
        width: clamp(420px, 65vw, 650px);

        max-width: 85vw;

        margin-bottom: clamp(18px, 2.5vh, 30px);
    }


    /* ==============================
       VERSION TITLE
    ============================== */

    #version-title {
        font-size: clamp(18px, 3vw, 28px);

        line-height: 1.6;

        margin-bottom: clamp(22px, 3vh, 35px);
    }


    /* ==============================
       START BUTTON
    ============================== */

    .start-button {
        margin-bottom: clamp(20px, 3vh, 35px);
    }

    .start-button img {
        width: clamp(130px, 18vw, 180px);

        max-width: 180px;
    }


    /* ==============================
       PIKACHU
    ============================== */

    .pikachu {
        width: clamp(230px, 32vw, 330px);

        max-width: 330px;

        bottom: clamp(25px, 7vh, 75px);
    }

    .pikachu.run-in {
        animation-duration: 3.5s;
    }


    /* ==============================
       MUTE BUTTON
    ============================== */

    #mute-button {
        top: clamp(18px, 3vh, 30px);

        right: clamp(18px, 3vw, 30px);

        width: clamp(44px, 6vw, 52px);

        height: clamp(44px, 6vw, 52px);

        font-size: clamp(19px, 2.5vw, 24px);
    }
}


/* =========================================================
   SMALL TABLETS / LARGE PHONES
   481px – 700px
========================================================= */

@media (min-width: 481px) and (max-width: 700px) and (min-height: 601px) {

    .title-screen {
        padding-bottom: 170px;
    }

    .pokemon-logo {
        width: 78vw;

        max-width: 500px;
    }

    #version-title {
        font-size: clamp(16px, 3.5vw, 23px);
    }

    .start-button img {
        width: 140px;
    }

    .pikachu {
        width: 45vw;

        max-width: 280px;

        bottom: 35px;
    }
}


/* =========================================================
   iPAD / TABLET PORTRAIT
   701px – 1024px
========================================================= */

@media (min-width: 701px) and (max-width: 1024px) and (min-height: 601px) {

    .title-screen {
        padding-bottom: clamp(170px, 20vh, 230px);
    }

    .pokemon-logo {
        width: min(650px, 78vw);
    }

    #version-title {
        font-size: clamp(21px, 2.8vw, 30px);
    }

    .start-button img {
        width: clamp(150px, 17vw, 190px);
    }

    .pikachu {
        width: clamp(280px, 34vw, 360px);

        max-width: 360px;

        bottom: clamp(30px, 7vh, 80px);
    }
}


/* =========================================================
   TABLET LANDSCAPE
   Keeps the title content from becoming too tall.
========================================================= */

@media (min-width: 700px)
       and (max-width: 1200px)
       and (max-height: 700px)
       and (min-height: 601px) {

    .title-screen {
        padding-top: 15px;

        padding-bottom: clamp(100px, 13vh, 140px);
    }

    .pokemon-logo {
        width: min(420px, 48vw);

        margin-bottom: 8px;
    }

    #version-title {
        font-size: clamp(15px, 2.5vw, 22px);

        margin-bottom: 12px;
    }

    .start-button {
        margin-bottom: 8px;
    }

    .start-button img {
        width: clamp(120px, 15vw, 160px);
    }

    .pikachu {
        width: min(220px, 28vw);

        bottom: 20px;
    }

    #mute-button {
        top: 15px;
        right: 15px;

        width: 44px;
        height: 44px;

        font-size: 19px;
    }
}


/* ==============================
   MOBILE
   Your existing settings
============================== */

@media (max-width: 480px) {

    /* Game Boy */

    #gameboy {
        width: 85vw;

        max-height: 65vh;
    }


    /* Tap message */

    #tap-message {
        margin-top: 18px;

        font-size: 10px;
    }


    /* Pokémon logo */

    .pokemon-logo {
        width: 85vw;

        margin-bottom: 12px;
    }


    /* Version title */

    #version-title {
        font-size: clamp(12px, 4vw, 18px);

        line-height: 1.8;

        margin-bottom: 20px;
    }


    /* Start button */

    .start-button {
        margin-bottom: 15px;
    }


    .start-button img {
        width: 32vw;

        max-width: 130px;
    }


    /* Pikachu */

    .pikachu {
        width: 65vw;

        max-width: 320px;
    }
}


/* ==============================
   SMALL HEIGHT DEVICES
   Your existing settings
============================== */

@media (max-height: 600px) {

    #gameboy {
        width: auto;

        height: 65vh;

        max-width: 80vw;
    }


    #tap-message {
        margin-top: 10px;
    }


    .pokemon-logo {
        width: min(400px, 60vw);

        margin-bottom: 8px;
    }


    #version-title {
        font-size: clamp(12px, 3vw, 20px);

        margin-bottom: 12px;
    }


    .start-button {
        margin-bottom: 10px;
    }


    .pikachu {
        width: min(180px, 35vw);
    }


    .pikachu.run-in {
        animation-duration: 3s;
    }


    #mute-button {
        top: 15px;
        right: 15px;

        width: 42px;
        height: 42px;

        font-size: 18px;
    }
}