@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');


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


body{

    font-family:'Space Grotesk',sans-serif;

    background:
    radial-gradient(
        circle at top,
        #252542 0%,
        #0b0b12 45%
    );

    color:#fff;

    min-height:100vh;

}


a{
    text-decoration:none;
    color:inherit;
}


img{
    max-width:100%;
}


/* ======================
GLOBAL LAYOUT
====================== */


.dashboard{

    display:flex;

    min-height:100vh;

}


/* ======================
SIDEBAR
====================== */


.sidebar{

    width:260px;

    background:
    rgba(21,21,29,.95);

    border-right:1px solid rgba(255,255,255,.08);

    padding:25px;

    position:fixed;

    height:100vh;

    left:0;

    top:0;

    z-index:10;

}


.logo{

    font-size:28px;

    font-weight:700;

    margin-bottom:35px;

    color:#a855f7;

}


.logo span{

    color:#fff;

}



.menu{

    display:flex;

    flex-direction:column;

    gap:10px;

}


.menu a{

    padding:14px 16px;

    border-radius:14px;

    color:#aaa;

    transition:.3s;

    display:flex;

    align-items:center;

    gap:12px;

}



.menu a:hover,
.menu a.active{


    background:
    linear-gradient(
        90deg,
        #8b5cf6,
        #3b82f6
    );


    color:white;

}



/* ======================
MAIN CONTENT
====================== */


.main{

    margin-left:260px;

    width:calc(100% - 260px);

    padding:25px;

}



/* ======================
TOP NAV
====================== */


.top-nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#15151d;

    border-radius:18px;

    padding:18px 22px;

    margin-bottom:25px;

}



.search-box input{


    background:#0d0d14;

    border:none;

    padding:13px 18px;

    border-radius:12px;

    color:white;

    outline:none;

}



.player-profile{

    display:flex;

    align-items:center;

    gap:12px;

}


.avatar{

    width:45px;

    height:45px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #a855f7,
        #2563eb
    );

}



/* ======================
CARD SYSTEM
====================== */


.card{


    background:

    linear-gradient(
        145deg,
        #181824,
        #101018
    );


    border:

    1px solid rgba(255,255,255,.08);


    border-radius:22px;


    padding:22px;


    transition:.3s;


}



.card:hover{


    transform:translateY(-5px);


    border-color:#8b5cf6;


}



/* TITLE */


.section-title{


    font-size:26px;

    margin-bottom:20px;


}



.section-title span{

    color:#a855f7;

}



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


.game-grid{


    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));

    gap:20px;


}


.game-card img{


    width:100%;

    height:160px;

    object-fit:cover;

    border-radius:16px;


}



.game-info{

    padding-top:15px;

}


.game-info h3{

    font-size:18px;

}



.game-info p{

    color:#999;

    margin-top:5px;

}



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


.btn{


    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:12px 22px;


    border-radius:12px;


    background:

    linear-gradient(
        90deg,
        #9333ea,
        #2563eb
    );


    color:white;

    font-weight:600;


    transition:.3s;


}



.btn:hover{


    opacity:.85;


}



/* ======================
STAT CARD
====================== */


.stats{


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(180px,1fr));


    gap:20px;


}



.stat-card h2{


    font-size:32px;


    color:#a855f7;


}



.stat-card p{


    color:#aaa;


}



/* ======================
TABLE
====================== */


.table-box{


    overflow:auto;


}



table{


    width:100%;

    border-collapse:collapse;


}


th,
td{


    padding:15px;

    text-align:left;

    border-bottom:

    1px solid rgba(255,255,255,.08);


}



th{


    color:#a855f7;


}



/* ======================
FOOTER
====================== */


.footer{


    margin-top:40px;

    padding:25px;

    text-align:center;

    color:#888;


}



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


@media(max-width:900px){


.sidebar{


    position:relative;

    width:100%;

    height:auto;


}



.dashboard{

    display:block;

}



.main{


    margin-left:0;

    width:100%;


}



.menu{


    flex-direction:row;

    overflow:auto;


}



.menu a{

    min-width:max-content;

}



.top-nav{


    flex-direction:column;

    gap:15px;


}



.game-grid{


    grid-template-columns:

    repeat(2,1fr);


}



}



@media(max-width:500px){


.game-grid{

    grid-template-columns:1fr;

}


.section-title{

    font-size:22px;

}


}