/*==================================================
 PixelVerse Live
 File : style.css
 Version : 1.0.0
==================================================*/

/*------------------------------
RESET
------------------------------*/

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

:root{

    --bg:#05070d;

    --panel:rgba(20,24,35,.72);

    --border:rgba(255,255,255,.08);

    --text:#ffffff;

    --muted:#9ea7b8;

    --accent:#42d392;

    --danger:#ff5d73;

    --warning:#ffc857;

    --radius:18px;

    --shadow:
        0 15px 35px rgba(0,0,0,.45);

    --blur:16px;

    --transition:.25s ease;

    --font:
        Inter,
        Segoe UI,
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

}

/*------------------------------
HTML
------------------------------*/

html,
body{

    width:100%;
    height:100%;
    overflow:hidden;

    background:var(--bg);

    color:var(--text);

    font-family:var(--font);

}

/*------------------------------
BODY
------------------------------*/

body{

    display:flex;

    align-items:center;

    justify-content:center;

    user-select:none;

}

/*------------------------------
GAME
------------------------------*/

#game-container{

    position:relative;

    width:100vw;

    height:100vh;

    overflow:hidden;

}

/*------------------------------
CANVAS
------------------------------*/

#gameCanvas{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    display:block;

    background:#081018;

    image-rendering:auto;

}

/*------------------------------
HUD
------------------------------*/

#hud{

    position:absolute;

    inset:0;

    pointer-events:none;

}

/*------------------------------
GLASS PANEL
------------------------------*/

.glass-panel{

    backdrop-filter:blur(var(--blur));

    -webkit-backdrop-filter:blur(var(--blur));

    background:var(--panel);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

/*------------------------------
STATS
------------------------------*/

#stats-panel{

    position:absolute;

    top:20px;

    left:20px;

    width:300px;

    padding:20px;

}

#stats-panel h2{

    margin-bottom:16px;

    font-size:20px;

    font-weight:700;

}

#stats-panel ul{

    list-style:none;

}

#stats-panel li{

    display:flex;

    justify-content:space-between;

    padding:10px 0;

    border-bottom:1px solid rgba(255,255,255,.05);

    color:var(--muted);

}

#stats-panel span{

    color:var(--text);

    font-weight:700;

}

/*------------------------------
STORY
------------------------------*/

#story-panel{

    position:absolute;

    top:20px;

    right:20px;

    width:360px;

    height:420px;

    display:flex;

    flex-direction:column;

}

#story-panel header{

    padding:18px;

    border-bottom:1px solid rgba(255,255,255,.05);

}

#story-feed{

    flex:1;

    overflow:hidden;

    padding:18px;

    font-size:14px;

    color:var(--muted);

    line-height:1.6;

}

/*------------------------------
BOTTOM BAR
------------------------------*/

#bottom-bar{

    position:absolute;

    left:20px;

    right:20px;

    bottom:20px;

    height:70px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 20px;

}

.bottom-left{

    display:flex;

    gap:30px;

    color:var(--muted);

    font-size:15px;

}

.bottom-left strong{

    color:white;

}

.bottom-right{

    display:flex;

    gap:12px;

    pointer-events:auto;

}

/*------------------------------
BUTTONS
------------------------------*/

button{

    border:none;

    outline:none;

    cursor:pointer;

    padding:12px 24px;

    border-radius:12px;

    background:rgba(255,255,255,.08);

    color:white;

    font-weight:600;

    transition:var(--transition);

}

button:hover{

    background:var(--accent);

    color:#000;

    transform:translateY(-2px);

}

/*------------------------------
LOADING
------------------------------*/

#loading-screen{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        180deg,
        #05070d,
        #09121c
    );

    z-index:9999;

}

.loader{

    width:420px;

    text-align:center;

}

.logo{

    font-size:52px;

    font-weight:900;

    letter-spacing:4px;

    margin-bottom:18px;

}

.loader p{

    color:var(--muted);

    margin-bottom:24px;

}

.loading-bar{

    width:100%;

    height:8px;

    background:#151b28;

    border-radius:999px;

    overflow:hidden;

}

.loading-progress{

    width:30%;

    height:100%;

    background:linear-gradient(
        90deg,
        #00d4ff,
        #42d392
    );

    animation:loading 2s linear infinite;

}

@keyframes loading{

    0%{

        transform:translateX(-120%);

    }

    100%{

        transform:translateX(420%);

    }

}

/*------------------------------
SCROLLBAR
------------------------------*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#3b4256;

    border-radius:999px;

}

/*------------------------------
RESPONSIVE
------------------------------*/

@media(max-width:900px){

    #stats-panel{

        width:250px;

    }

    #story-panel{

        display:none;

    }

    #bottom-bar{

        flex-direction:column;

        height:auto;

        gap:12px;

        padding:16px;

    }

    .bottom-left{

        flex-wrap:wrap;

        justify-content:center;

        gap:16px;

    }

}

@media(max-width:600px){

    #stats-panel{

        top:10px;

        left:10px;

        width:220px;

        padding:14px;

    }

    #bottom-bar{

        left:10px;

        right:10px;

        bottom:10px;

    }

    .logo{

        font-size:38px;

    }

}

/*------------------------------
UTILITY
------------------------------*/

.hidden{

    display:none !important;

}

.fade-in{

    animation:fadeIn .4s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:none;

    }

}