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

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

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #02020d;
}


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

#game {

    position: relative;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 10% 20%,
            white 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 25% 80%,
            white 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 40% 15%,
            white 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 60% 30%,
            white 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 75% 80%,
            white 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 90% 25%,
            white 1px,
            transparent 2px
        ),

        linear-gradient(
            #08082b,
            #02020d
        );
}


/* =========================================
   LEVEL TEXT
========================================= */

#levelDisplay {

    position: absolute;

    top: 20px;
    left: 25px;

    color: white;

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

    z-index: 50;

    text-shadow:
        0 0 5px white,
        0 0 15px #4cc9f0;
}


#instructions {

    position: absolute;

    top: 55px;
    left: 25px;

    color: #cccccc;

    font-size: 14px;

    z-index: 50;
}


/* =========================================
   LARGE PLANET
========================================= */

#planet {
    width: 100vh;
    height: 100vh;

    min-width: 700px;
    min-height: 700px;

    left: 50%;
    top: 62%;

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

    border-radius: 50%;

    background: #3498db;

    z-index: 1;

    overflow: hidden;

    transition:
        background 0.8s,
        box-shadow 0.8s;
}


/* Planet lighting */

#planet::before {

    content: "";

    position: absolute;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    background:

        radial-gradient(
            circle at 30% 25%,
            rgba(255,255,255,0.35),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            transparent 40%,
            rgba(0,0,0,0.4)
        );
}


/* =========================================
   PLANET CRATERS
========================================= */

.planet-crater {

    position: absolute;

    border-radius: 50%;

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

    box-shadow:
        inset 5px 5px 10px
        rgba(0,0,0,0.2);
}


.crater1 {

    width: 100px;
    height: 60px;

    top: 25%;
    left: 20%;
}


.crater2 {

    width: 75px;
    height: 45px;

    top: 55%;
    left: 60%;
}


.crater3 {

    width: 120px;
    height: 65px;

    top: 65%;
    left: 20%;
}


.crater4 {

    width: 65px;
    height: 40px;

    top: 35%;
    left: 65%;
}


/* =========================================
   PORTAL
========================================= */

#portal {

    position: absolute;

    width: 125px;
    height: 125px;

    z-index: 8;
}


.portal-center {

    position: absolute;

    width: 90px;
    height: 90px;

    left: 17px;
    top: 17px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            #ffffff 0%,
            #b700ff 18%,
            #5e00ff 45%,
            #180052 75%,
            #000000 100%
        );

    display: flex;

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

    box-shadow:

        0 0 10px #c000ff,
        0 0 25px #a000ff,
        0 0 50px #7000ff,
        0 0 80px #5000ff;

    animation:
        portalPulse 2s infinite alternate;
}


.portal-text {

    color: white;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 2px;

    text-shadow:
        0 0 5px white,
        0 0 10px #ff00ff;
}


.portal-ring {

    position: absolute;

    border-radius: 50%;

    border: 3px solid #bd00ff;

    left: 50%;
    top: 50%;

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

    box-shadow:
        0 0 10px #bd00ff,
        0 0 20px #7b00ff;
}


.ring1 {

    width: 105px;
    height: 105px;

    animation:
        portalRotate 5s linear infinite;
}


.ring2 {

    width: 118px;
    height: 118px;

    border-color: #00eaff;

    animation:
        portalRotateReverse 7s linear infinite;
}


.ring3 {

    width: 125px;
    height: 125px;

    border-color: #ff00d4;

    animation:
        portalRotate 9s linear infinite;
}


@keyframes portalPulse {

    from {
        transform: scale(0.92);
    }

    to {
        transform: scale(1.08);
    }

}


@keyframes portalRotate {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}


@keyframes portalRotateReverse {

    from {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

}


/* =========================================
   ALIEN
========================================= */

#alien {

    position: absolute;

    width: 70px;
    height: 105px;

    z-index: 15;

    pointer-events: none;
}


.alien-body {

    position: absolute;

    width: 60px;
    height: 65px;

    left: 5px;
    top: 20px;

    border-radius:
        48%
        48%
        42%
        42%;

    background: #70e000;

    box-shadow:

        inset -8px -10px 10px
        rgba(0,0,0,0.2),

        0 0 12px
        rgba(100,255,0,0.35);
}


.alien-eye {

    position: absolute;

    width: 13px;
    height: 18px;

    top: 17px;

    background: #111;

    border-radius: 50%;
}


.left-eye {
    left: 14px;
}


.right-eye {
    right: 14px;
}


.alien-mouth {

    position: absolute;

    width: 20px;
    height: 7px;

    bottom: 13px;
    left: 20px;

    border-bottom:
        3px solid #111;

    border-radius: 50%;
}


.alien-arm {

    position: absolute;

    width: 10px;
    height: 35px;

    top: 30px;

    background: #70e000;

    border-radius: 10px;
}


.alien-left-arm {

    left: -7px;

    transform: rotate(25deg);
}


.alien-right-arm {

    right: -7px;

    transform: rotate(-25deg);
}


.alien-leg {

    position: absolute;

    width: 12px;
    height: 28px;

    bottom: -20px;

    background: #70e000;

    border-radius: 10px;
}


.alien-left-leg {
    left: 13px;
}


.alien-right-leg {
    right: 13px;
}


/* =========================================
   ASTRONAUT
========================================= */

#astronaut {

    position: absolute;

    width: 70px;
    height: 110px;

    z-index: 14;

    pointer-events: none;
}


.backpack {

    position: absolute;

    width: 16px;
    height: 55px;

    left: -8px;
    top: 38px;

    background: #bfc5cc;

    border-radius: 5px;
}


.astronaut-body {

    position: absolute;

    width: 55px;
    height: 75px;

    left: 8px;
    top: 25px;

    background: #e9edf2;

    border-radius:
        22px
        22px
        15px
        15px;

    box-shadow:
        inset -8px -8px 12px
        rgba(0,0,0,0.15);
}


.helmet {

    position: absolute;

    width: 53px;
    height: 53px;

    left: 1px;
    top: -35px;

    border-radius: 50%;

    background: #e9edf2;

    border: 3px solid #c8cdd2;
}


.helmet-glass {

    position: absolute;

    width: 38px;
    height: 29px;

    left: 5px;
    top: 8px;

    background: #26364a;

    border-radius: 50%;

    border:
        3px solid #111d2c;
}


.astronaut-chest {

    position: absolute;

    width: 28px;
    height: 30px;

    left: 13px;
    top: 20px;

    background: #cdd2d7;

    border-radius: 4px;
}


.chest-button {

    position: absolute;

    width: 6px;
    height: 6px;

    top: 4px;

    border-radius: 50%;
}


.chest-button.red {

    left: 5px;
    background: red;
}


.chest-button.blue {

    right: 5px;
    background: blue;
}


.chest-panel {

    position: absolute;

    width: 18px;
    height: 8px;

    left: 5px;
    bottom: 5px;

    background: #555;

    border-radius: 2px;
}


.astronaut-arm {

    position: absolute;

    width: 11px;
    height: 40px;

    top: 20px;

    background: #e9edf2;

    border-radius: 10px;
}


.astronaut-left-arm {

    left: -8px;

    transform: rotate(15deg);
}


.astronaut-right-arm {

    right: -8px;

    transform: rotate(-15deg);
}


.astronaut-leg {

    position: absolute;

    width: 14px;
    height: 30px;

    bottom: -23px;

    background: #e9edf2;

    border-radius: 8px;
}


.astronaut-left-leg {
    left: 9px;
}


.astronaut-right-leg {
    right: 9px;
}


/* =========================================
   COLORFUL SHOOTING STARS
========================================= */

.shooting-star {

    position: absolute;

    width: 140px;
    height: 4px;

    border-radius: 50%;

    transform:
        rotate(-25deg);

    z-index: 6;

    pointer-events: none;

    animation:
        shootingStar 1.7s linear forwards;
}


/*
   The glowing head of the star
*/

.shooting-star::after {

    content: "";

    position: absolute;

    right: 0;
    top: -4px;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: white;

    box-shadow:
        0 0 8px currentColor,
        0 0 18px currentColor,
        0 0 30px currentColor;
}


/*
   Colorful shooting-star variants
*/

.shooting-star.pink {

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff00cc,
            #ff66e8
        );

    color: #ff00cc;

    box-shadow:
        0 0 10px #ff00cc,
        0 0 20px #ff00cc;
}


.shooting-star.blue {

    background:
        linear-gradient(
            90deg,
            transparent,
            #00c8ff,
            #66e5ff
        );

    color: #00c8ff;

    box-shadow:
        0 0 10px #00c8ff,
        0 0 20px #00c8ff;
}


.shooting-star.yellow {

    background:
        linear-gradient(
            90deg,
            transparent,
            #ffe600,
            #fff27a
        );

    color: #ffe600;

    box-shadow:
        0 0 10px #ffe600,
        0 0 20px #ffe600;
}


.shooting-star.green {

    background:
        linear-gradient(
            90deg,
            transparent,
            #00ff88,
            #80ffc4
        );

    color: #00ff88;

    box-shadow:
        0 0 10px #00ff88,
        0 0 20px #00ff88;
}


.shooting-star.purple {

    background:
        linear-gradient(
            90deg,
            transparent,
            #9b00ff,
            #d066ff
        );

    color: #9b00ff;

    box-shadow:
        0 0 10px #9b00ff,
        0 0 20px #9b00ff;
}


@keyframes shootingStar {

    0% {

        transform:
            translate(0, 0)
            rotate(-25deg);

        opacity: 0;

    }

    10% {

        opacity: 1;

    }

    85% {

        opacity: 1;

    }

    100% {

        transform:
            translate(-750px, 430px)
            rotate(-25deg);

        opacity: 0;

    }

}


/* =========================================
   POPUPS
========================================= */

#levelComplete,
#gameOver,
#gameWon {

    position: absolute;

    width: 100%;
    height: 100%;

    left: 0;
    top: 0;

    z-index: 100;

    display: none;

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

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

    text-align: center;
}


.popup,
.game-over-popup,
.win-popup {

    padding: 45px;

    border-radius: 15px;

    background:
        rgba(15,15,40,0.97);

    color: white;
}


.popup {

    border:
        2px solid #9b4dff;

    box-shadow:
        0 0 20px #9b4dff,
        0 0 50px rgba(155,77,255,0.4);
}


.popup h1 {

    font-size: 42px;

    margin-bottom: 15px;

    text-shadow:
        0 0 10px white,
        0 0 25px #a855f7;
}


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

.game-over-popup {

    border:
        3px solid #ff2222;

    box-shadow:
        0 0 20px #ff0000,
        0 0 60px rgba(255,0,0,0.6);
}


.game-over-popup h1 {

    color: #ff2222;

    font-size: 55px;

    margin-bottom: 15px;

    text-shadow:
        0 0 10px red,
        0 0 30px red;
}


/* =========================================
   WIN
========================================= */

.win-popup {

    border:
        3px solid #00ff88;

    box-shadow:
        0 0 20px #00ff88,
        0 0 60px rgba(0,255,136,0.5);
}


.win-popup h1 {

    color: #00ff88;

    font-size: 48px;

    margin-bottom: 15px;

    text-shadow:
        0 0 10px #00ff88,
        0 0 30px #00ff88;
}


/* =========================================
   POPUP TEXT
========================================= */

.popup p,
.game-over-popup p,
.win-popup p {

    color: #cccccc;

    font-size: 18px;

    margin-bottom: 25px;
}


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

button {

    border: none;

    padding:
        13px
        28px;

    font-size: 17px;

    font-weight: bold;

    color: white;

    background:
        linear-gradient(
            135deg,
            #7b2ff7,
            #4c00ff
        );

    border-radius: 8px;

    cursor: pointer;

    box-shadow:
        0 0 15px
        rgba(123,47,247,0.7);

    transition:
        transform 0.2s,
        box-shadow 0.2s;
}


button:hover {

    transform: scale(1.08);

    box-shadow:
        0 0 30px
        rgba(123,47,247,1);
}


/* =========================================
   SMALL SCREENS
========================================= */

@media (max-width: 600px) {

    #planet {

        width: 130vw;
        height: 130vw;

        min-width: 500px;
        min-height: 500px;

    }


    .popup h1,
    .win-popup h1 {

        font-size: 30px;

    }


    .game-over-popup h1 {

        font-size: 38px;

    }


    .popup,
    .game-over-popup,
    .win-popup {

        width: 90%;

        padding: 30px 15px;

    }

}

/* =========================================
   LEVEL 4 ALIEN WORLD
========================================= */

#level4Landscape {

    position: absolute;

    width: 100%;
    height: 100%;

    left: 0;
    top: 0;

    z-index: 3;

    display: none;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 20% 20%,
            rgba(130, 0, 255, 0.25),
            transparent 25%
        ),

        radial-gradient(
            circle at 80% 30%,
            rgba(0, 255, 200, 0.15),
            transparent 25%
        ),

        linear-gradient(
            #080018,
            #020008
        );
}


/* =========================================
   LEVEL 4 GROUND
========================================= */

#level4Landscape::after {

    content: "";

    position: absolute;

    width: 120%;
    height: 35%;

    left: -10%;
    bottom: -10%;

    background:

        radial-gradient(
            ellipse at center,
            #24134a,
            #090014
        );

    border-radius: 50%;

    box-shadow:
        0 -20px 60px
        rgba(180, 0, 255, 0.25);

}


/* =========================================
   SPACE TREES
========================================= */

.space-tree {

    position: absolute;

    width: 130px;
    height: 240px;

    z-index: 4;

}


/* Tree trunk */

.tree-trunk {

    position: absolute;

    width: 25px;
    height: 150px;

    left: 52px;
    bottom: 0;

    background:

        linear-gradient(
            90deg,
            #29133d,
            #6e3a7e,
            #24102f
        );

    border-radius:
        15px
        15px
        5px
        5px;

    box-shadow:
        0 0 15px
        rgba(190, 80, 255, 0.5);
}


/* Tree top */

.tree-top {

    position: absolute;

    width: 115px;
    height: 130px;

    left: 8px;
    top: 0;

    border-radius:
        50%
        50%
        45%
        45%;

    background:

        radial-gradient(
            circle at 35% 30%,
            #8affea,
            #00bfa5 30%,
            #063e43 70%
        );

    box-shadow:

        0 0 15px #00ffd5,
        0 0 35px rgba(0,255,220,0.6);

    animation:
        treePulse 3s ease-in-out infinite alternate;
}


/* Tree glow */

.tree-glow {

    position: absolute;

    width: 160px;
    height: 160px;

    left: -15px;
    top: -15px;

    border-radius: 50%;

    background:
        rgba(0,255,210,0.08);

    filter: blur(15px);
}


.tree1 {
    left: 4%;
    bottom: 8%;
    transform: scale(0.85);
}


.tree2 {
    left: 22%;
    bottom: 12%;
    transform: scale(1.15);
}


.tree3 {
    right: 5%;
    bottom: 7%;
    transform: scale(0.95);
}


.tree4 {
    right: 25%;
    bottom: 14%;
    transform: scale(1.2);
}


.tree5 {
    left: 47%;
    bottom: 3%;
    transform: scale(0.7);
}


@keyframes treePulse {

    from {

        filter:
            brightness(0.85);

    }

    to {

        filter:
            brightness(1.25);

    }

}


/* =========================================
   GLOWING ALIEN PLANTS
========================================= */

.alien-plant {

    position: absolute;

    width: 70px;
    height: 100px;

    z-index: 6;

}


.plant-stem {

    position: absolute;

    width: 7px;
    height: 75px;

    left: 32px;
    bottom: 0;

    background:
        linear-gradient(
            #7bff00,
            #16a000
        );

    border-radius: 10px;

    box-shadow:
        0 0 10px #62ff00;
}


.plant-glow {

    position: absolute;

    width: 55px;
    height: 55px;

    left: 7px;
    top: 0;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            #ffffff 0%,
            #a8ff00 15%,
            #00ff88 45%,
            transparent 70%
        );

    box-shadow:

        0 0 15px #00ff88,
        0 0 30px #00ff88,
        0 0 50px rgba(0,255,150,0.5);

    animation:
        plantPulse 1.8s
        ease-in-out
        infinite
        alternate;
}


@keyframes plantPulse {

    from {

        transform: scale(0.8);

        opacity: 0.7;

    }

    to {

        transform: scale(1.15);

        opacity: 1;

    }

}


.plant1 {
    left: 12%;
    bottom: 20%;
}


.plant2 {
    left: 34%;
    bottom: 18%;
}


.plant3 {
    left: 58%;
    bottom: 25%;
}


.plant4 {
    left: 75%;
    bottom: 18%;
}


.plant5 {
    right: 10%;
    bottom: 30%;
}


.plant6 {
    left: 45%;
    bottom: 35%;
}


/* =========================================
   OTHER ALIENS
========================================= */

.other-alien {

    position: absolute;

    width: 70px;
    height: 105px;

    z-index: 10;

    transform-origin: center bottom;

}


/* Alien body */

.other-alien .alien-body {

    position: absolute;

    width: 60px;
    height: 65px;

    left: 5px;
    top: 20px;

    border-radius:
        48%
        48%
        42%
        42%;

    box-shadow:

        inset -8px -10px 10px
        rgba(0,0,0,0.2),

        0 0 15px
        currentColor;

}


/* Alien eyes */

.other-alien .alien-eye {

    position: absolute;

    width: 13px;
    height: 18px;

    top: 17px;

    background: #111;

    border-radius: 50%;
}


.other-alien .left-eye {
    left: 14px;
}


.other-alien .right-eye {
    right: 14px;
}


/* Alien mouth */

.other-alien .alien-mouth {

    position: absolute;

    width: 20px;
    height: 7px;

    bottom: 13px;
    left: 20px;

    border-bottom:
        3px solid #111;

    border-radius: 50%;
}


/* Arms */

.other-alien .alien-arm {

    position: absolute;

    width: 10px;
    height: 35px;

    top: 30px;

    border-radius: 10px;
}


.other-alien .alien-left-arm {

    left: -7px;

    transform:
        rotate(25deg);
}


.other-alien .alien-right-arm {

    right: -7px;

    transform:
        rotate(-25deg);
}


/* Legs */

.other-alien .alien-leg {

    position: absolute;

    width: 12px;
    height: 28px;

    bottom: -20px;

    border-radius: 10px;
}


.other-alien .alien-left-leg {
    left: 13px;
}


.other-alien .alien-right-leg {
    right: 13px;
}


/* =========================================
   SMALL ALIEN CROWN
========================================= */

.alien-crown {

    position: absolute;

    width: 42px;
    height: 25px;

    left: 14px;
    top: 0;

    z-index: 20;

    display: flex;

    justify-content:
        space-between;

    align-items: flex-end;

}


/* Crown base */

.alien-crown::after {

    content: "";

    position: absolute;

    width: 42px;
    height: 8px;

    left: 0;
    bottom: 0;

    background:
        linear-gradient(
            #ffe600,
            #ff9900
        );

    border-radius:
        3px
        3px
        6px
        6px;

    box-shadow:

        0 0 6px #ffd000,
        0 0 12px rgba(255,200,0,0.8);

}


/* Crown points */

.alien-crown span {

    position: relative;

    width: 0;
    height: 0;

    border-left:
        7px solid transparent;

    border-right:
        7px solid transparent;

    border-bottom:
        18px solid #ffd900;

    filter:
        drop-shadow(
            0 0 4px #ffd000
        );

}


/* =========================================
   LEVEL 4 PLAYER CROWN
========================================= */

#alien .alien-crown {

    position: absolute;

    width: 42px;
    height: 25px;

    left: 14px;
    top: 0;

    z-index: 20;

}


#alien .alien-crown span {

    position: relative;

    width: 0;
    height: 0;

    border-left:
        7px solid transparent;

    border-right:
        7px solid transparent;

    border-bottom:
        18px solid #ffd900;

}


/* =========================================
   LEVEL 4 BACKGROUND STARS
========================================= */

#level4Landscape::before {

    content: "";

    position: absolute;

    width: 100%;
    height: 100%;

    background:

        radial-gradient(
            circle at 10% 15%,
            #ffffff 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 30% 30%,
            #00ffff 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 50% 10%,
            #ffffff 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 70% 25%,
            #ff66ff 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 90% 15%,
            #ffffff 1px,
            transparent 2px
        );

    opacity: 0.8;

}


/* =========================================
   LEVEL 4 PORTAL
========================================= */

#level4Landscape ~ #portal {

    z-index: 30;

}


/* =========================================
   LEVEL 4 PLAYER
========================================= */

#level4Landscape.active ~ #alien {

    z-index: 40;

}


/* =========================================
   HIDE ASTRONAUT ON LEVEL 4
========================================= */

body.level-four #astronaut {

    display: none;

}


/* =========================================
   LEVEL 4 INSTRUCTIONS
========================================= */

body.level-four #instructions {

    color: #7dffe8;

    text-shadow:
        0 0 8px #00ffd5;

}


/* =========================================
   LEVEL 4 MOBILE
========================================= */

@media (max-width: 600px) {

    .space-tree {

        transform:
            scale(0.7);

    }


    .other-alien {

        transform:
            scale(0.75);

    }

}
/* =========================================
   LEVEL TITLE
========================================= */

#levelDisplay {

    position: relative;

    z-index: 100;

    font-size: 52px;

    font-weight: 900;

    letter-spacing: 8px;

    color: #ffffff;

    text-align: center;

    margin-top: 18px;

    text-transform: uppercase;

    text-shadow:
        0 0 5px #ffffff,
        0 0 10px #00eaff,
        0 0 20px #00eaff,
        0 0 40px #008cff,
        0 0 70px #0066ff;

    animation:
        levelGlow 2s ease-in-out infinite alternate;

}


/* Story text */

#instructions {

    position: relative;

    z-index: 100;

    width: 90%;

    max-width: 900px;

    margin: 8px auto 0;

    text-align: center;

}


.story-text {

    font-size: 17px;

    line-height: 1.6;

    color: #ffffff;

    text-shadow:
        0 0 5px rgba(255,255,255,0.7),
        0 0 12px rgba(0,200,255,0.5);

}


@keyframes levelGlow {

    from {

        transform: scale(1);

        text-shadow:
            0 0 5px #ffffff,
            0 0 10px #00eaff,
            0 0 20px #00eaff,
            0 0 35px #008cff;

    }

    to {

        transform: scale(1.04);

        text-shadow:
            0 0 8px #ffffff,
            0 0 15px #00ffff,
            0 0 30px #00eaff,
            0 0 55px #008cff,
            0 0 90px #0066ff;

    }

}


/* Smaller screens */

@media (max-width: 600px) {

    #levelDisplay {

        font-size: 34px;

        letter-spacing: 4px;

    }


    .story-text {

        font-size: 13px;

        line-height: 1.45;

    }

}
/* =========================================
   HAPPY ALIEN FRIENDS
========================================= */

.other-alien {
    animation:
        happyBounce 1.4s ease-in-out infinite;
}


/* Make each alien bounce at a different time */

.other-alien:nth-child(1) {
    animation-delay: 0s;
}

.other-alien:nth-child(2) {
    animation-delay: 0.15s;
}

.other-alien:nth-child(3) {
    animation-delay: 0.3s;
}

.other-alien:nth-child(4) {
    animation-delay: 0.45s;
}

.other-alien:nth-child(5) {
    animation-delay: 0.6s;
}

.other-alien:nth-child(6) {
    animation-delay: 0.75s;
}

.other-alien:nth-child(7) {
    animation-delay: 0.9s;
}

.other-alien:nth-child(8) {
    animation-delay: 1.05s;
}

.other-alien:nth-child(9) {
    animation-delay: 1.2s;
}

.other-alien:nth-child(10) {
    animation-delay: 1.35s;
}


@keyframes happyBounce {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);

    }

    25% {

        transform:
            translateY(-14px)
            rotate(-2deg);

    }

    50% {

        transform:
            translateY(0)
            rotate(0deg);

    }

    75% {

        transform:
            translateY(-9px)
            rotate(2deg);

    }

}
/* =========================================
   FINAL HOME WORLD WIN DISPLAY
========================================= */

body.level-four #gameWon {

    display: none;

    position: absolute;

    left: 50%;

    top: 105px;

    transform:
        translateX(-50%);

    width: 80%;

    max-width: 850px;

    z-index: 200;

    pointer-events: none;

}


/* The actual win popup */

body.level-four #gameWon .win-popup {

    padding: 25px 40px;

    border-radius: 25px;

    text-align: center;

    background:

        linear-gradient(
            135deg,
            rgba(20, 0, 50, 0.92),
            rgba(0, 40, 55, 0.92)
        );

    border:
        2px solid #00ffe1;

    box-shadow:

        0 0 15px #00ffe1,

        0 0 35px #00d9ff,

        0 0 70px
        rgba(0,255,220,0.6);

    animation:
        winGlow 2s ease-in-out infinite alternate;

}


/* Big YOU WIN text */

body.level-four #gameWon h1 {

    margin: 0;

    font-size: 64px;

    letter-spacing: 8px;

    color: #ffffff;

    text-shadow:

        0 0 5px #ffffff,

        0 0 15px #00ffff,

        0 0 30px #00ffff,

        0 0 60px #008cff;

}


/* Message */

body.level-four #gameWon p {

    margin-top: 8px;

    margin-bottom: 0;

    font-size: 20px;

    color: #8ffff0;

    text-shadow:
        0 0 10px #00ffd5;

}


/* Glowing animation */

@keyframes winGlow {

    from {

        transform:
            scale(1);

        box-shadow:

            0 0 15px #00ffe1,

            0 0 35px #00d9ff,

            0 0 60px
            rgba(0,255,220,0.5);

    }

    to {

        transform:
            scale(1.03);

        box-shadow:

            0 0 20px #ffffff,

            0 0 45px #00ffe1,

            0 0 90px
            rgba(0,255,220,0.8);

    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    body.level-four #gameWon {

        top: 95px;

        width: 92%;

    }


    body.level-four #gameWon .win-popup {

        padding:
            18px
            15px;

    }


    body.level-four #gameWon h1 {

        font-size: 32px;

        letter-spacing: 3px;

    }


    body.level-four #gameWon p {

        font-size: 14px;

    }

}
/* =========================================
   CHARACTER VISIBILITY FIX
========================================= */

#alien {
    position: absolute;
    z-index: 50;
    display: block;
}

#astronaut {
    position: absolute;
    z-index: 50;
    display: block;
}

/* Keep the Level 4 landscape behind Floob */
#level4Landscape {
    z-index: 3;
}

/* Keep the normal planet behind the characters */
#planet {
    z-index: 1;
}

/* Portal should be visible above the planet */
#portal {
    z-index: 40;
}