/* ========================================
   TAFELPILOOT
   Prototype v0.1.9
======================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #111;
}

body {
    display: flex;

    justify-content: center;
    align-items: center;
}


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

#game {
    position: relative;

    width: 100vw;
    height: 100vh;

    max-width: 900px;

    overflow: hidden;

    background: #222;
}


/* ========================================
   ACHTERGROND
======================================== */

#background {
    position: absolute;

    top: -100%;
    left: 0;

    width: 100%;
    height: 300%;

    background-image:
        url("../assets/worlds/volcano/volcano_background.png");

    background-size: 100% auto;
    background-repeat: repeat-y;

    z-index: 1;
}


/* ========================================
   HUD
======================================== */

#hud {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    padding: 16px 22px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: start;

    z-index: 30;

    color: white;

    font-weight: bold;

    text-shadow:
        0 2px 4px
        rgba(0, 0, 0, 0.85);
}

#lives {
    justify-self: start;

    font-size: 20px;
}

#coins {
    justify-self: end;

    font-size: 20px;
}

#level-info {
    text-align: center;
}

#world-name {
    font-size: 20px;

    font-weight: 900;

    letter-spacing: 1.5px;
}

#level-name {
    margin-top: 2px;

    font-size: 14px;

    letter-spacing: 2px;

    opacity: 0.9;
}


/* ========================================
   MISSIE
======================================== */

#mission-progress {
    position: absolute;

    top: 72px;
    left: 50%;

    transform:
        translateX(-50%);

    z-index: 30;

    padding:
        6px
        15px;

    border:
        2px solid
        rgba(255, 255, 255, 0.75);

    border-radius: 20px;

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

    color: white;

    font-size: 18px;
    font-weight: 900;

    text-shadow:
        0 2px 3px
        rgba(0, 0, 0, 0.9);
}


/* ========================================
   OEFENING
======================================== */

#exercise {
    position: absolute;

    top: 14%;
    left: 50%;

    transform:
        translateX(-50%);

    z-index: 30;

    text-align: center;
}

#question {
    margin-bottom: 10px;

    color: white;

    font-size: 42px;
    font-weight: 900;

    white-space: nowrap;

    text-shadow:
        0 3px 5px
        rgba(0, 0, 0, 0.9);
}


/* ========================================
   ANTWOORD
======================================== */

#answer {
    width: 110px;
    height: 55px;

    border:
        4px solid white;

    border-radius: 14px;

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

    color: white;

    font-size: 32px;
    font-weight: bold;

    text-align: center;

    outline: none;
}

#answer:focus {
    border-color: #ffd54a;
}

#answer:disabled {
    opacity: 0.8;
}

#answer::-webkit-outer-spin-button,
#answer::-webkit-inner-spin-button {
    margin: 0;

    -webkit-appearance: none;
}

#answer[type="number"] {
    -moz-appearance: textfield;
}


/* ========================================
   FEEDBACK
======================================== */

#feedback {
    min-height: 34px;

    margin-top: 8px;

    color: white;

    font-size: 22px;
    font-weight: bold;

    text-shadow:
        0 2px 4px
        rgba(0, 0, 0, 0.9);
}

.feedback-correct {
    color: #8cff66 !important;
}

.feedback-wrong {
    color: #ff6969 !important;
}


/* ========================================
   MONSTER
======================================== */

#monster {
    position: absolute;

    top: 28%;
    left: 50%;

    width: 150px;

    transform:
        translateX(-50%);

    z-index: 10;

    text-align: center;

    animation:
        monsterFloat
        2.2s
        ease-in-out
        infinite;
}

#monster img {
    display: block;

    width: 100%;
    height: auto;

    filter:
        drop-shadow(
            0
            8px
            8px
            rgba(0, 0, 0, 0.4)
        );
}

.monster-health {
    min-height: 25px;

    margin-bottom: 6px;

    color: white;

    font-size: 18px;
    font-weight: bold;

    text-shadow:
        0 2px 4px
        rgba(0, 0, 0, 0.8);
}


/* ========================================
   MONSTER HIT
======================================== */

.monster-hit {
    animation:
        monsterHit
        0.28s
        ease-out !important;
}

@keyframes monsterHit {

    0% {
        transform:
            translateX(-50%)
            scale(1);
    }

    25% {
        transform:
            translateX(-50%)
            translateX(-12px)
            scale(1.08);

        filter:
            brightness(2);
    }

    50% {
        transform:
            translateX(-50%)
            translateX(12px)
            scale(1.05);

        filter:
            brightness(1.6);
    }

    100% {
        transform:
            translateX(-50%)
            scale(1);
    }
}


/* ========================================
   SPELER
======================================== */

#player {
    position: absolute;

    bottom: 7%;
    left: 50%;

    width: 190px;

    transform:
        translateX(-50%);

    z-index: 12;

    animation:
        playerFloat
        2.5s
        ease-in-out
        infinite;
}

#player img {
    display: block;

    width: 100%;
    height: auto;

    filter:
        drop-shadow(
            0
            12px
            10px
            rgba(0, 0, 0, 0.45)
        );
}


/* ========================================
   SCHIETANIMATIE
======================================== */

.player-shoot {
    animation:
        playerShoot
        0.18s
        ease-out !important;
}

@keyframes playerShoot {

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

    50% {
        transform:
            translateX(-50%)
            translateY(10px)
            scale(0.98);
    }

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


/* ========================================
   PROJECTIELEN
======================================== */

#projectile-layer {
    position: absolute;

    inset: 0;

    z-index: 18;

    pointer-events: none;
}

.energy-ball {
    position: absolute;

    width: 45px;

    transform:
        translate(-50%, -50%);

    pointer-events: none;

    filter:
        drop-shadow(
            0
            0
            10px
            rgba(255, 190, 30, 0.9)
        );
}


/* ========================================
   OVERLAYS
======================================== */

.overlay {
    position: absolute;

    inset: 0;

    z-index: 100;

    display: flex;

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

    padding: 25px;

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

    backdrop-filter:
        blur(5px);
}

.hidden {
    display: none !important;
}


/* ========================================
   RESULTAATKAART
======================================== */

.result-card {
    width: min(
        440px,
        94vw
    );

    padding:
        26px
        28px
        30px;

    border:
        4px solid
        rgba(255, 255, 255, 0.85);

    border-radius: 25px;

    background:
        linear-gradient(
            180deg,
            rgba(73, 40, 126, 0.97),
            rgba(31, 20, 74, 0.98)
        );

    color: white;

    text-align: center;

    box-shadow:
        0
        20px
        60px
        rgba(0, 0, 0, 0.55);
}

.result-stars {
    margin-bottom: 5px;

    font-size: 34px;
}

.result-card h1 {
    margin:
        4px
        0
        10px;

    font-size: 34px;
}

.result-card h2 {
    margin: 0;

    font-size: 23px;
}

.result-level {
    margin-top: 4px;

    font-size: 17px;
    font-weight: bold;

    opacity: 0.85;
}

.result-divider {
    height: 2px;

    margin:
        20px
        0;

    background:
        rgba(255, 255, 255, 0.25);
}

.result-row {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin:
        11px
        0;

    font-size: 18px;

    text-align: left;
}

.result-row strong {
    white-space: nowrap;
}

.accuracy-box {
    margin-top: 20px;

    padding:
        13px
        18px;

    display: flex;

    justify-content: space-between;
    align-items: center;

    border-radius: 15px;

    background:
        rgba(255, 255, 255, 0.13);

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

.accuracy-box strong {
    font-size: 27px;
}


/* ========================================
   KNOPPEN
======================================== */

#continue-button,
#retry-button {
    width: 100%;

    margin-top: 22px;

    padding:
        15px
        20px;

    border: 0;

    border-radius: 15px;

    background: #ffd54a;

    color: #231a12;

    font-size: 20px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0
        6px
        0
        #b88616;
}

#continue-button:hover,
#retry-button:hover {
    transform:
        translateY(-1px);
}

#continue-button:active,
#retry-button:active {
    transform:
        translateY(4px);

    box-shadow:
        0
        2px
        0
        #b88616;
}


/* ========================================
   GAME OVER
======================================== */

.game-over-card h1 {
    color: #ff7777;
}

.game-over-icon {
    margin:
        15px
        0;

    font-size: 65px;
}

.game-over-card p {
    font-size: 20px;
}


/* ========================================
   NORMALE ANIMATIES
======================================== */

@keyframes playerFloat {

    0%,
    100% {
        transform:
            translateX(-50%)
            translateY(0);
    }

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

@keyframes monsterFloat {

    0%,
    100% {
        transform:
            translateX(-50%)
            translateY(0)
            rotate(-2deg);
    }

    50% {
        transform:
            translateX(-50%)
            translateY(10px)
            rotate(2deg);
    }
}


/* ========================================
   KLEINERE SCHERMEN
======================================== */

@media (max-width: 600px) {

    #hud {
        padding:
            12px
            13px;
    }

    #lives,
    #coins {
        font-size: 15px;
    }

    #world-name {
        font-size: 15px;
    }

    #level-name {
        font-size: 11px;
    }

    #mission-progress {
        top: 61px;

        font-size: 15px;
    }

    #exercise {
        top: 14%;
    }

    #question {
        font-size: 31px;
    }

    #answer {
        width: 95px;
        height: 48px;

        font-size: 27px;
    }

    #feedback {
        font-size: 17px;
    }

    #monster {
        width: 115px;
    }

    #player {
        width: 145px;
    }

    .energy-ball {
        width: 36px;
    }

    .result-card {
        padding:
            22px
            20px
            25px;
    }

    .result-card h1 {
        font-size: 27px;
    }

    .result-row {
        font-size: 16px;
    }
}