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

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #020204;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
}

body {
    user-select: none;
}

#game {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background: #050608;
}

/* ================= WORLD ================= */

#gameWorld {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    perspective: 700px;
    background:
        radial-gradient(
            ellipse at center,
            rgba(50, 60, 62, 0.4),
            #080a0b 45%,
            #010101 100%
        );
}

/* Back wall */

.backWall {
    position: absolute;
    width: 100%;
    height: 70%;
    top: 0;
    left: 0;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.025) 0px,
            rgba(255,255,255,.025) 2px,
            transparent 2px,
            transparent 100px
        ),
        linear-gradient(
            #16191b,
            #080a0b
        );

    border-bottom: 5px solid #202426;
}

/* Floor */

.floor {
    position: absolute;
    width: 140%;
    height: 65%;
    left: -20%;
    bottom: -25%;

    transform: rotateX(62deg);

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.035) 0px,
            rgba(255,255,255,.035) 2px,
            transparent 2px,
            transparent 80px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.025) 0px,
            rgba(255,255,255,.025) 2px,
            transparent 2px,
            transparent 80px
        ),
        #111416;

    border-top: 5px solid #25292a;
}

/* Side walls */

.leftWall {
    position: absolute;
    width: 18%;
    height: 70%;
    left: 0;
    top: 0;

    background: linear-gradient(
        90deg,
        #020303,
        #171a1b
    );

    transform: skewY(-8deg);
}

.rightWall {
    position: absolute;
    width: 18%;
    height: 70%;
    right: 0;
    top: 0;

    background: linear-gradient(
        90deg,
        #171a1b,
        #020303
    );

    transform: skewY(8deg);
}

/* ================= FACTORY ================= */

.factoryTitle {
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);

    text-align: center;

    font-size: 34px;
    font-weight: 900;
    letter-spacing: 8px;

    color: #555;

    text-shadow:
        0 0 5px #000,
        0 0 20px #000;
}

.factoryTitle span {
    display: block;
    font-size: 13px;
    letter-spacing: 7px;
    color: #7d2525;
}

/* Pipes */

.pipe {
    position: absolute;
    width: 25px;
    height: 240px;

    background:
        linear-gradient(
            90deg,
            #15191a,
            #505657,
            #171a1b
        );

    border-radius: 10px;

    box-shadow:
        0 0 15px rgba(0,0,0,.8);
}

.pipe1 {
    left: 20%;
    top: 8%;
}

.pipe2 {
    right: 20%;
    top: 10%;
    height: 180px;
}

.pipe3 {
    left: 72%;
    top: 28%;
    height: 140px;
}

/* Boxes */

.box {
    position: absolute;

    width: 95px;
    height: 80px;

    background:
        linear-gradient(
            135deg,
            #4c3520,
            #1c130b
        );

    border: 4px solid #24170c;

    box-shadow:
        inset 0 0 20px #000,
        0 10px 20px rgba(0,0,0,.8);
}

.box1 {
    left: 25%;
    bottom: 27%;
}

.box2 {
    right: 22%;
    bottom: 25%;
    transform: scale(.75);
}

.box3 {
    left: 40%;
    bottom: 20%;
    transform: scale(.55);
}

/* ================= KEY ================= */

#key {
    position: absolute;

    left: 54%;
    bottom: 30%;

    font-size: 42px;

    filter:
        drop-shadow(0 0 8px gold)
        drop-shadow(0 0 20px rgba(255,180,0,.6));

    cursor: pointer;

    animation: keyFloat 1.2s infinite alternate ease-in-out;

    z-index: 5;
}

@keyframes keyFloat {

    from {
        transform: translateY(0) rotate(-10deg);
    }

    to {
        transform: translateY(-12px) rotate(10deg);
    }
}

/* ================= DOOR ================= */

#door {
    position: absolute;

    width: 130px;
    height: 220px;

    left: 50%;
    top: 19%;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            #101313,
            #333838,
            #0b0d0e
        );

    border: 8px solid #080909;

    box-shadow:
        inset 0 0 30px #000,
        0 0 30px rgba(0,0,0,.8);

    z-index: 2;
}

.doorLight {
    position: absolute;

    width: 12px;
    height: 12px;

    right: 12px;
    top: 15px;

    border-radius: 50%;

    background: #c92121;

    box-shadow:
        0 0 8px #f00,
        0 0 20px #f00;

    animation: doorBlink .8s infinite alternate;
}

@keyframes doorBlink {

    from {
        opacity: .4;
    }

    to {
        opacity: 1;
    }
}

.doorText {
    position: absolute;

    width: 100%;
    text-align: center;

    top: 45%;

    color: #888;

    font-size: 24px;
    font-weight: bold;
    letter-spacing: 5px;
}

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

#monster {
    position: absolute;

    width: 180px;
    height: 300px;

    left: 72%;
    bottom: 18%;

    z-index: 8;

    transform-origin: bottom center;

    transition:
        left .15s linear,
        bottom .15s linear;
}

.monsterHead {
    position: absolute;

    width: 145px;
    height: 125px;

    left: 17px;
    top: 0;

    background:
        radial-gradient(
            circle at 50% 20%,
            #657979,
            #243031 65%,
            #0b0e0e
        );

    border-radius:
        45% 45%
        42% 42%;

    border: 4px solid #101515;

    box-shadow:
        inset 0 0 30px #000,
        0 0 20px rgba(0,0,0,.8);
}

.eye {
    position: absolute;

    width: 25px;
    height: 32px;

    top: 30px;

    border-radius: 50%;

    background: #d9faff;

    box-shadow:
        0 0 10px #bfffff;

    animation: eyeBlink 4s infinite;
}

.eye::after {
    content: "";

    position: absolute;

    width: 8px;
    height: 20px;

    left: 9px;
    top: 6px;

    border-radius: 50%;

    background: #050606;
}

.eyeLeft {
    left: 35px;
}

.eyeRight {
    right: 35px;
}

@keyframes eyeBlink {

    0%,
    93%,
    100% {
        transform: scaleY(1);
    }

    95% {
        transform: scaleY(.05);
    }
}

.monsterMouth {
    position: absolute;

    width: 90px;
    height: 40px;

    left: 27px;
    bottom: 18px;

    background: #030404;

    border-radius: 50%;

    border: 3px solid #111;

    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.monsterMouth span {
    width: 8px;
    height: 24px;

    background: #eee;

    clip-path: polygon(
        0 0,
        100% 0,
        50% 100%
    );
}

.monsterBody {
    position: absolute;

    width: 100px;
    height: 145px;

    left: 40px;
    top: 105px;

    border-radius: 45px 45px 15px 15px;

    background:
        linear-gradient(
            90deg,
            #101616,
            #344142,
            #111616
        );

    box-shadow:
        inset 0 0 30px #000;
}

.arm {
    position: absolute;

    width: 30px;
    height: 140px;

    top: 125px;

    background:
        linear-gradient(
            90deg,
            #111,
            #445252,
            #111
        );

    border-radius: 20px;
}

.armLeft {
    left: 13px;
    transform: rotate(14deg);
}

.armRight {
    right: 8px;
    transform: rotate(-18deg);
}

/* ================= PLAYER ================= */

#player {
    position: absolute;

    width: 40px;
    height: 65px;

    left: 50%;
    bottom: 10%;

    transform: translateX(-50%);

    z-index: 10;
}

#player::before {
    content: "";

    position: absolute;

    width: 28px;
    height: 28px;

    left: 6px;

    border-radius: 50%;

    background: #222;

    border: 2px solid #777;
}

#player::after {
    content: "";

    position: absolute;

    width: 40px;
    height: 38px;

    bottom: 0;

    border-radius: 10px 10px 3px 3px;

    background: #1d2425;

    border: 2px solid #555;
}

/* Flashlight */

.playerLight {
    position: absolute;

    width: 600px;
    height: 600px;

    left: 50%;
    bottom: 20px;

    transform: translateX(-50%);

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center bottom,
            rgba(255,255,220,.30) 0%,
            rgba(255,255,220,.12) 18%,
            rgba(0,0,0,.05) 38%,
            rgba(0,0,0,.75) 70%,
            #000 100%
        );

    mix-blend-mode: screen;

    z-index: -1;

    transition: opacity .2s;
}

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

#hud {
    position: absolute;

    top: 15px;
    left: 15px;
    right: 15px;

    display: flex;
    align-items: flex-start;
    gap: 15px;

    z-index: 50;
}

.hudBox {
    width: 150px;

    padding: 10px;

    background: rgba(0,0,0,.65);

    border: 1px solid #333;

    font-size: 13px;
}

.bar {
    width: 100%;
    height: 7px;

    background: #222;

    margin-top: 7px;

    overflow: hidden;
}

#batteryBar {
    width: 100%;
    height: 100%;
    background: #ddd;
}

#healthBar {
    width: 100%;
    height: 100%;
    background: #9b2525;
}

.objective {
    margin-left: auto;

    padding: 12px 18px;

    background: rgba(0,0,0,.7);

    border-left: 3px solid #8e2424;

    color: #ddd;

    font-size: 14px;
}

/* ================= CROSSHAIR ================= */

#crosshair {
    position: absolute;

    left: 50%;
    top: 50%;

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

    font-size: 22px;

    color: rgba(255,255,255,.5);

    z-index: 40;
}

/* ================= MESSAGE ================= */

#message {
    position: absolute;

    left: 50%;
    top: 75%;

    transform: translateX(-50%);

    padding: 10px 20px;

    background: rgba(0,0,0,.8);

    color: white;

    opacity: 0;

    transition: opacity .3s;

    z-index: 100;

    text-align: center;
}

#message.show {
    opacity: 1;
}

/* ================= CONTROLS ================= */

#controls {
    position: absolute;

    bottom: 20px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 60;

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

    gap: 6px;
}

.middleControls {
    display: flex;
    gap: 8px;
}

#controls button {
    width: 58px;
    height: 50px;

    border-radius: 12px;

    border: 1px solid #555;

    background: rgba(10,10,10,.75);

    color: white;

    font-size: 20px;

    cursor: pointer;

    backdrop-filter: blur(5px);
}

#controls button:active {
    transform: scale(.9);
    background: #333;
}

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

#startScreen,
#gameOver,
#winScreen {
    position: absolute;

    inset: 0;

    z-index: 200;

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

    background:
        radial-gradient(
            circle,
            rgba(40,40,40,.35),
            rgba(0,0,0,.96)
        );
}

.startCard,
.overCard,
.winCard {
    width: min(520px, 90%);

    text-align: center;

    padding: 40px 30px;

    background:
        linear-gradient(
            145deg,
            #151819,
            #050606
        );

    border: 1px solid #383d3e;

    box-shadow:
        0 0 60px rgba(0,0,0,.9);
}

.startCard h1,
.overCard h1,
.winCard h1 {
    margin: 15px 0;

    letter-spacing: 4px;
}

.startCard p,
.overCard p,
.winCard p {
    color: #aaa;
    line-height: 1.6;
}

.scaryEmoji {
    font-size: 70px;

    animation: scaryEye 2s infinite;
}

@keyframes scaryEye {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }
}

#startButton,
#restartButton,
#winRestart {
    margin-top: 25px;

    padding: 14px 30px;

    border: none;

    background: #7d2020;

    color: white;

    font-weight: bold;

    letter-spacing: 2px;

    cursor: pointer;

    transition: .2s;
}

#startButton:hover,
#restartButton:hover,
#winRestart:hover {
    background: #a72c2c;
    transform: scale(1.04);
}

.startCard small {
    display: block;

    margin-top: 20px;

    color: #666;

    line-height: 1.7;
}

#gameOver,
#winScreen {
    display: none;
}

#gameOver {
    background:
        radial-gradient(
            circle,
            rgba(100,0,0,.15),
            rgba(0,0,0,.98)
        );
}

#winScreen {
    background:
        radial-gradient(
            circle,
            rgba(30,80,60,.2),
            rgba(0,0,0,.97)
        );
}

/* ================= DAMAGE ================= */

.damage {
    animation: damageFlash .25s;
}

@keyframes damageFlash {

    0% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(3);
    }

    100% {
        filter: brightness(1);
    }
}

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

@media (max-width: 700px) {

    .factoryTitle {
        font-size: 22px;
        letter-spacing: 4px;
    }

    .factoryTitle span {
        font-size: 9px;
    }

    #hud {
        flex-wrap: wrap;
    }

    .hudBox {
        width: 110px;
    }

    .objective {
        width: 100%;
        margin-left: 0;
        font-size: 12px;
    }

    #monster {
        transform: scale(.75);
        transform-origin: bottom center;
    }

    #door {
        transform: translateX(-50%) scale(.8);
    }

    #controls button {
        width: 54px;
        height: 48px;
    }
}