*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Montserrat',sans-serif;
}

body{
    background:#05070d;
    color:#fff;
    overflow-x:hidden;
}

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

.sidebar{
    width:260px;
    height:100vh;

    background:#070b12;

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

    position:fixed;
    left:0;
    top:0;

    overflow-x:hidden;
    overflow-y:auto;

    transition:.35s ease;

    z-index:999;
}

.sidebar.hide{
    width:85px;
}

.logo-area{
    padding:25px 15px;
    text-align:center;
}

.logo-area img{
    width:180px;
    transition:.3s;
}

.sidebar.hide .logo-area img{
    width:50px;
}

.sidebar-menu{
    list-style:none;
    padding:15px;
}

.sidebar-menu li{

    height:56px;

    display:flex;
    align-items:center;
    gap:16px;

    padding:0 18px;

    border-radius:14px;

    margin-bottom:12px;

    cursor:pointer;

    transition:.3s ease;

    overflow:hidden;
    white-space:nowrap;
}

.sidebar-menu li:hover,
.sidebar-menu .active{

    background:
    linear-gradient(to right,#8b0000,#ff0000);
}

.sidebar-menu li i{

    min-width:22px;

    font-size:18px;

    text-align:center;
}

.sidebar.hide li span{
    opacity:0;
    visibility:hidden;
}

/* ========================================
   BONUS CARD
======================================== */

.bonus-card{

    margin:18px;

    padding:22px;

    border-radius:18px;

    text-align:center;

    background:
    linear-gradient(to bottom,#1a0d00,#090d14);

    border:
    1px solid rgba(255,179,0,.15);
}

.bonus-card h3{
    color:#ffb300;
    margin-bottom:12px;
}

.bonus-card h1{
    font-size:58px;
    color:#ff2d2d;
}

.bonus-card p{
    margin:12px 0 20px;
}

.bonus-card button{

    width:100%;
    height:48px;

    border:none;
    border-radius:12px;

    background:#ffb300;
    color:#000;

    font-weight:700;

    cursor:pointer;
}

.sidebar.hide .bonus-card{
    display:none;
}

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

.main-content{

    margin-left:260px;

    width:calc(100% - 260px);

    padding:25px;

    transition:.35s ease;
}

.main-content.expand{

    margin-left:85px;

    width:calc(100% - 85px);
}

/* ========================================
   TOPBAR
======================================== */

.topbar{

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

    margin-bottom:25px;
}

.top-left,
.top-right{

    display:flex;
    align-items:center;
    gap:18px;
}

.menu-btn,
.top-icon{

    width:48px;
    height:48px;

    border:none;
    border-radius:12px;

    background:#0d121c;
    color:#fff;

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

    cursor:pointer;

    transition:.3s;
}

.menu-btn:hover,
.top-icon:hover{
    background:#171d29;
}

.top-icon{
    position:relative;
}

.top-icon span{

    position:absolute;

    top:-5px;
    right:-5px;

    width:20px;
    height:20px;

    border-radius:50%;

    background:red;

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

    font-size:11px;
}

.live-badge{

    background:#0d121c;

    padding:10px 16px;

    border-radius:12px;

    display:flex;
    align-items:center;
    gap:10px;
}

.live-dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:red;

    animation:blink 1s infinite;
}

@keyframes blink{

    0%{opacity:1;}
    50%{opacity:.3;}
    100%{opacity:1;}
}

.profile-box{

    display:flex;
    align-items:center;
    gap:12px;
}

.profile-box img{

    width:50px;
    height:50px;

    border-radius:50%;
}

.profile-box p{
    color:#ffb300;
    font-size:13px;
}

/* ========================================
   DASHBOARD GRID
======================================== */

.dashboard-grid{

    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;

    gap:25px;
}

.left-side,
.right-side{
    min-width:0;
}

.right-side{

    display:flex;
    flex-direction:column;
    gap:20px;
}

/* ========================================
   HERO
======================================== */

.hero-banner{

    position:relative;

    height:300px;

    border-radius:24px;

    overflow:hidden;

    background:
    url('../images/arena-banner.jpg')
    center/cover no-repeat;

    margin-bottom:25px;
}

.hero-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.75),
        rgba(0,0,0,.2)
    );
}

.hero-content{

    position:relative;
    z-index:2;

    padding:45px;

    max-width:650px;
}

.hero-content h1{

    font-size:58px;
    line-height:1.1;

    font-weight:800;
}

.hero-content span{
    color:#ff2d2d;
}

.hero-content p{

    margin-top:18px;

    color:#ddd;
}

.hero-content button{

    margin-top:28px;

    width:220px;
    height:55px;

    border:none;
    border-radius:12px;

    background:
    linear-gradient(to right,#ff0000,#8b0000);

    color:#fff;

    font-weight:700;

    cursor:pointer;
}

/* ========================================
   STATS
======================================== */

.stats-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin-bottom:25px;
}

.stats-card{

    background:#0b1018;

    border-radius:20px;

    padding:22px;

    display:flex;
    align-items:center;
    gap:18px;

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

.stats-card i{
    font-size:30px;
}

.stats-card h4{

    color:#aaa;

    margin-bottom:6px;

    font-size:13px;
}

.stats-card h1{
    font-size:28px;
}

.red i{color:#ff3b3b;}
.blue i{color:#4aa3ff;}
.gold i{color:#ffb300;}
.green i{color:#00c06b;}

/* ========================================
   SECTION
======================================== */

.section-header{

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

    margin-bottom:20px;
}

.section-header span{
    color:#aaa;
    cursor:pointer;
}

/* ========================================
   LIVE ARENAS
======================================== */

.arena-grid{

    display:flex;

    gap:18px;

    overflow-x:auto;

    scrollbar-width:none;

    padding-bottom:10px;
}

.arena-grid::-webkit-scrollbar{
    display:none;
}

.arena-card{

    min-width:32%;
    max-width:32%;

    flex-shrink:0;

    background:#0b1018;

    border-radius:20px;

    overflow:hidden;

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

    transition:.3s ease;
}

.arena-card:hover{

    transform:translateY(-5px);

    border:
    1px solid rgba(255,0,0,.15);
}

.arena-image{

    width:100%;
    height:170px;

    overflow:hidden;
}

.arena-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.4s;
}

.arena-card:hover img{
    transform:scale(1.05);
}

.arena-body{
    padding:18px;
}

.live-tag{

    display:inline-flex;

    padding:6px 12px;

    border-radius:8px;

    background:red;

    color:#fff;

    font-size:12px;
    font-weight:700;

    margin-bottom:15px;
}

.arena-body h3{

    font-size:22px;

    margin-bottom:18px;
}

.fighter-row{

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

    gap:10px;

    margin-bottom:18px;
}

.fighter{

    font-size:14px;
    font-weight:700;
}

.red-fighter{
    color:#ff4b4b;
}

.blue-fighter{
    color:#4aa3ff;
}

.vs{

    color:#ffb300;

    font-size:24px;
    font-weight:800;
}

.arena-progress{

    display:flex;

    height:14px;

    overflow:hidden;

    border-radius:30px;

    background:#161d28;

    margin-bottom:18px;
}

.red-bar{

    width:56%;

    background:#b91515;

    display:flex;
    align-items:center;

    padding-left:10px;

    font-size:11px;
    font-weight:700;
}

.blue-bar{

    width:44%;

    background:#1d4ca8;

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

    padding-right:10px;

    font-size:11px;
    font-weight:700;
}

.betting-pool{

    color:#cfcfcf;

    margin-bottom:18px;

    font-size:14px;
}

.arena-body button{

    width:100%;
    height:48px;

    border:none;
    border-radius:12px;

    background:
    linear-gradient(to right,#ff0000,#8b0000);

    color:#fff;

    font-weight:700;

    cursor:pointer;
}

/* ========================================
   RIGHT SIDE
======================================== */

.wallet-card,
.promo-card,
.winner-card{

    background:#0b1018;

    border-radius:20px;

    padding:25px;

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

.wallet-card h1{

    font-size:34px;

    margin:18px 0;
}

.wallet-buttons{

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:12px;
}

.wallet-buttons button,
.promo-card button{

    height:50px;

    border:none;
    border-radius:12px;

    font-weight:700;

    cursor:pointer;
}

.deposit-btn{

    background:
    linear-gradient(to right,#d31212,#7e0909);

    color:#fff;
}

.withdraw-btn{

    background:#1b2230;
    color:#fff;
}

.promo-card h1{

    font-size:70px;

    color:#ffb300;
}

.promo-card button{

    width:100%;

    margin-top:20px;

    background:#c78316;

    color:#fff;
}

.winner-item{

    display:flex;
    justify-content:space-between;

    padding:16px 0;

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

.winner-item:last-child{
    border-bottom:none;
}

/* ========================================
   MODAL
======================================== */

.modal-overlay{

    position:fixed;
    inset:0;

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

    display:none;

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

    z-index:9999;
}

.modal-overlay.show{
    display:flex;
}

.password-modal{

    width:95%;
    max-width:500px;

    background:#0d121c;

    border-radius:20px;

    padding:30px;
}

.modal-header{

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

    margin-bottom:25px;
}

.modal-header button{

    background:none;
    border:none;

    color:#fff;

    font-size:22px;

    cursor:pointer;
}

.modal-input{
    margin-bottom:20px;
}

.modal-input label{

    display:block;

    margin-bottom:10px;
}

.modal-input input{

    width:100%;
    height:55px;

    background:#141b28;

    border:none;
    border-radius:12px;

    color:#fff;

    padding:0 18px;
}

.save-btn{

    width:100%;
    height:55px;

    border:none;
    border-radius:12px;

    background:
    linear-gradient(to right,#ff0000,#8b0000);

    color:#fff;

    font-weight:700;

    cursor:pointer;
}

/* ========================================
   SUCCESS / ERROR
======================================== */

.password-success,
.password-error{

    margin-top:20px;

    border-radius:18px;

    padding:18px;

    display:flex;
    align-items:center;
    gap:15px;
}

.password-success{

    background:
    rgba(0,200,83,.12);

    border:
    1px solid rgba(0,200,83,.2);
}

.password-error{

    background:
    rgba(255,59,59,.12);

    border:
    1px solid rgba(255,59,59,.2);
}

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

.mobile-overlay{

    position:fixed;
    inset:0;

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

    opacity:0;
    visibility:hidden;

    z-index:998;

    transition:.3s ease;
}

.mobile-overlay.show{

    opacity:1;
    visibility:visible;
}

/* ========================================
   RESPONSIVE
======================================== */

@media(max-width:1400px){

    .arena-card{

        min-width:48%;
        max-width:48%;
    }

}

@media(max-width:1200px){

    .dashboard-grid{
        grid-template-columns:1fr;
    }

    .right-side{

        display:grid;
        grid-template-columns:repeat(3,1fr);

        gap:20px;
    }

}

@media(max-width:991px){

    .sidebar{

        width:260px !important;

        left:-280px !important;
    }

    .sidebar.show{
        left:0 !important;
    }

    .main-content,
    .main-content.expand{

        margin-left:0 !important;

        width:100% !important;

        padding:16px;
    }

    .right-side{

        display:flex;
        flex-direction:column;
    }

    .stats-grid{
        grid-template-columns:1fr;
    }

    .arena-card{

        min-width:85%;
        max-width:85%;
    }

    .hero-content{
        padding:30px;
    }

    .hero-content h1{
        font-size:38px;
    }

    .hero-banner{

        height:auto;
        min-height:260px;
    }

    .topbar{

        flex-wrap:wrap;

        gap:15px;
    }

    .top-right{

        width:100%;

        justify-content:flex-start;
    }

}

@media(max-width:600px){

    .arena-card{

        min-width:92%;
        max-width:92%;
    }

    .arena-image{
        height:160px;
    }

    .wallet-card h1{
        font-size:24px;
    }

    .promo-card h1{
        font-size:52px;
    }

}

/* DRAGGABLE LIVE ARENAS */

.arena-grid{

    cursor:grab;

    user-select:none;
}

.arena-grid.dragging{

    cursor:grabbing;
}

.arena-card{

    user-select:none;

    pointer-events:none;
}