*{
    box-sizing:border-box
}

html,
body{
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#020507;
    color:#fff;
    font-family:Inter,Arial,sans-serif;
    touch-action:none;
    user-select:none
}

canvas{
    position:fixed;
    inset:0;
    z-index:0;
    display:block
}

.hidden{
    display:none!important
}

.screen{
    position:fixed;
    inset:0;
    z-index:20;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:radial-gradient(circle at 50% 40%,#10243199,#000 80%)
}

#boot{
    z-index:100;
    background:#020507
}

.loader{
    font-weight:900;
    letter-spacing:3px;
    color:#dbe8ef
}

.loader span{
    display:block;
    width:160px;
    height:3px;
    background:linear-gradient(
        90deg,
        transparent,
        #e62a32,
        transparent
    );
    margin:18px auto;
    animation:load 1s infinite
}

@keyframes load{
    0%{
        transform:scaleX(.2);
        opacity:.3
    }

    50%{
        transform:scaleX(1);
        opacity:1
    }

    100%{
        transform:scaleX(.2);
        opacity:.3
    }
}

.logo{
    display:flex;
    align-items:center;
    gap:14px;
    font-weight:1000;
    font-size:clamp(36px,8vw,82px);
    letter-spacing:-4px;
    text-shadow:0 8px 35px #000
}

.logo img{
    width:clamp(58px,9vw,92px);
    filter:drop-shadow(0 8px 20px #000)
}

.logo b{
    color:#ed3037
}

.logo small{
    display:block;
    font-size:.35em;
    letter-spacing:7px;
    color:#9caeb8;
    text-align:right;
    margin-right:5px
}

.tag{
    margin:12px 0 28px;
    color:#9fb0ba;
    letter-spacing:4px;
    font-size:12px
}

.screen button{
    width:min(330px,82vw);
    padding:15px;
    margin:6px;
    border:1px solid #354a58;
    border-radius:9px;
    background:#101d26;
    color:#fff;
    font-size:15px;
    font-weight:900
}

.screen button.primary{
    background:linear-gradient(
        100deg,
        #ef2028,
        #a8080d
    );
    border-color:#ff5b60;
    box-shadow:0 10px 40px #000
}

.hud{
    position:fixed;
    z-index:5;
    left:0;
    right:0;
    top:0;
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px;
    pointer-events:none;
    background:linear-gradient(#000c,transparent)
}

.hudbox,
.wave{
    background:#061018dd;
    border:1px solid #29404e;
    border-radius:9px;
    padding:8px 11px;
    backdrop-filter:blur(8px);
    font-weight:900
}

.wave{
    text-align:center;
    min-width:130px;
    margin:auto
}

.wave b{
    color:#ff4d53
}

.wave small{
    display:block;
    color:#93a5af;
    font-size:9px;
    letter-spacing:1px;
    margin-top:2px
}

.wave small span{
    color:#ff4d53
}

.hp b{
    color:#68e58a
}

.ammo b{
    color:#ffd15a
}

#pauseBtn{
    pointer-events:auto;
    width:auto;
    margin:0;
    padding:6px 11px
}

.crosshair{
    position:fixed;
    z-index:4;
    left:50%;
    top:50%;
    width:34px;
    height:34px;
    transform:translate(-50%,-50%);
    pointer-events:none
}

.crosshair i{
    position:absolute;
    background:#fff;
    box-shadow:0 0 6px #000
}

.crosshair i:nth-child(1){
    width:11px;
    height:2px;
    left:0;
    top:16px
}

.crosshair i:nth-child(2){
    width:11px;
    height:2px;
    right:0;
    top:16px
}

.crosshair i:nth-child(3){
    height:11px;
    width:2px;
    left:16px;
    top:0
}

.crosshair i:nth-child(4){
    height:11px;
    width:2px;
    left:16px;
    bottom:0
}

.crosshair b{
    position:absolute;
    left:14px;
    top:11px;
    font-size:9px
}

.modal{
    position:fixed;
    inset:0;
    z-index:30;
    display:grid;
    place-items:center;
    background:#000c
}

.panel{
    position:relative;
    width:min(520px,90vw);
    padding:25px;
    background:#0a151e;
    border:1px solid #355262;
    border-radius:15px;
    box-shadow:0 25px 100px #000
}

.panel h2{
    margin-top:0
}

.panel label{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:18px 0
}

.panel select{
    background:#132633;
    color:#fff;
    border:1px solid #405766;
    padding:8px;
    border-radius:6px
}

.x{
    position:absolute;
    right:8px;
    top:8px;
    width:38px!important;
    padding:5px!important;
    margin:0!important
}

.round{
    position:absolute;
    z-index:7;
    border-radius:50%;
    color:#fff;
    font-weight:1000;
    border:2px solid #fff
}

.fire{
    right:22px;
    bottom:38px;
    width:92px;
    height:92px;
    background:#b70d14c9
}

.reload{
    right:124px;
    bottom:30px;
    width:58px;
    height:58px;
    background:#132c3ccc;
    font-size:25px
}

.stick{
    position:absolute;
    z-index:7;
    left:20px;
    bottom:25px;
    width:128px;
    height:128px;
    border:2px solid #ffffff3d;
    border-radius:50%;
    background:#ffffff0c
}

.stick #knob{
    position:absolute;
    left:39px;
    top:39px;
    width:46px;
    height:46px;
    border-radius:50%;
    background:#ffffff42
}

.lookZone{
    position:absolute;
    z-index:6;
    right:0;
    top:0;
    width:64%;
    height:100%;
    touch-action:none
}

#damageFlash{
    position:fixed;
    inset:0;
    z-index:6;
    background:radial-gradient(
        circle,
        transparent 40%,
        #ff000080
    );
    pointer-events:none
}

#toast{
    position:fixed;
    z-index:8;
    left:50%;
    top:17%;
    transform:translateX(-50%);
    padding:9px 15px;
    border:1px solid #ffffff33;
    border-radius:8px;
    background:#050b10dd;
    font-weight:900;
    letter-spacing:2px
}

.screen h1{
    font-size:clamp(46px,10vw,84px);
    margin:0 0 10px
}

.screen p{
    color:#d0d9de
}

@media(max-width:700px){

    .hud{
        padding:7px;
        gap:4px
    }

    .hudbox,
    .wave{
        font-size:11px;
        padding:6px 7px
    }

    .wave{
        min-width:92px
    }

    .tag{
        font-size:9px;
        letter-spacing:2px
    }

    .logo{
        font-size:47px
    }

    .logo img{
        width:58px
    }
}