/* ==========================================
   DEAD REALITY
   Prototype 0.0
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
    touch-action:none;
    user-select:none;
}

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

body{
    position:relative;
}

/* ======================
   CAMERA
====================== */

#camera{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    background:#000;
    z-index:1;
}

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

#gameCanvas{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:2;
    pointer-events:none;
}

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

#hud{
    position:fixed;
    top:20px;
    left:20px;
    right:20px;

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

    z-index:30;
}

/* ======================
   HEALTH
====================== */

#healthContainer{

    width:230px;
    height:28px;

    border-radius:20px;

    overflow:hidden;

    position:relative;

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

    border:2px solid
        rgba(0,255,255,.45);

    backdrop-filter:blur(8px);

    box-shadow:
        0 0 20px rgba(0,255,255,.3);
}

#healthFill{

    position:absolute;

    inset:0;

    width:100%;

    background:
        linear-gradient(
            90deg,
            #00ff6a,
            #56ff98
        );

    transition:
        width .25s ease;
}

#healthText{

    position:absolute;

    inset:0;

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

    font-weight:bold;

    color:white;

    text-shadow:
        0 0 5px black;

    z-index:2;
}

/* ======================
   AMMO
====================== */

#ammo{

    color:white;

    font-size:28px;

    font-weight:bold;

    letter-spacing:2px;

    text-shadow:

        0 0 15px
        rgba(0,255,255,.8);

}

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

#crosshair{

    position:fixed;

    left:50%;
    top:50%;

    width:42px;
    height:42px;

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

    pointer-events:none;

    z-index:25;
}

#crosshair .h{

    position:absolute;

    left:0;
    right:0;

    top:50%;

    height:3px;

    transform:
        translateY(-50%);

    background:#00ffff;

    box-shadow:

        0 0 10px cyan,

        0 0 20px cyan;
}

#crosshair .v{

    position:absolute;

    top:0;
    bottom:0;

    left:50%;

    width:3px;

    transform:
        translateX(-50%);

    background:#00ffff;

    box-shadow:

        0 0 10px cyan,

        0 0 20px cyan;
}

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

#controls{

    position:fixed;

    left:0;
    right:0;
    bottom:25px;

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    padding:25px;

    z-index:50;
}

/* ======================
   BUTTONS
====================== */

button{

    border:none;

    outline:none;

    color:white;

    font-weight:bold;

    cursor:pointer;

    border-radius:100px;

    backdrop-filter:blur(12px);

    transition:.15s;

    box-shadow:

        0 0 18px
        rgba(0,255,255,.4);
}

button:active{

    transform:
        scale(.94);

}

#reloadBtn{

    width:130px;

    height:60px;

    font-size:18px;

    background:

        rgba(30,30,30,.65);

    border:

        2px solid
        rgba(255,255,255,.2);

}

#fireBtn{

    width:135px;

    height:135px;

    border-radius:50%;

    font-size:26px;

    background:

        radial-gradient(

            circle,

            #ff4343,

            #910000

        );

    border:

        3px solid

        rgba(255,255,255,.35);

    box-shadow:

        0 0 25px red,

        inset 0 0 20px rgba(255,255,255,.15);

}

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

#message{

    position:fixed;

    top:50%;

    left:50%;

    transform:

        translate(-50%,-50%);

    color:white;

    font-size:42px;

    font-weight:bold;

    text-align:center;

    z-index:100;

    text-shadow:

        0 0 25px cyan;

    pointer-events:none;

}

/* ======================
   VIGNETTE
====================== */

body::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:10;

    background:

        radial-gradient(

            circle,

            transparent 55%,

            rgba(0,0,0,.45) 100%

        );

}