/* =========================================================
   BATTLE MVP — UNIVERSAL LAYOUT SYSTEM
   FLEX PRODUCTION VERSION
========================================================= */

html,
body{
    margin:0;
    padding:0;

    width:100%;
    min-width:0;

    overflow-x:hidden;

    background:#05070b;
    color:#eaf1ff;

    font-family:Inter,system-ui,sans-serif;
}

/* =========================================================
   GLOBAL FIXES
========================================================= */

*{
    box-sizing:border-box;
}

.bmContent,
.bmMain,
.bmPage,
.bm-match,
.bm-row{
    min-width:0;
}

/* =========================================================
   MAIN LAYOUT
========================================================= */

.bmLayout{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:16px;

    width:100%;

    min-width:0;

    padding:12px;
}

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

.bmSidebarLeft,
.lsb{

    position:relative;

    width:220px;
    min-width:220px;
    max-width:220px;

    flex:0 0 220px;

    align-self:flex-start;
}

.lsb-inner{
    width:100%;
}

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

.bmSidebarRight,
.rsb{

    position:relative;

    width:250px;
    min-width:250px;
    max-width:250px;

    flex:0 0 250px;

    align-self:flex-start;
}

.rsb-inner{

    position:sticky;

    top:88px;

    width:100%;
}

/* =========================================================
   CENTER CONTENT
========================================================= */

.bmContent,
.bmMain{

    flex:1 1 auto;

    width:auto;

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:18px;
}

/* =========================================================
   PAGE WRAP
========================================================= */

.bmPage{

    position:relative;

    width:100%;
    min-width:0;

    max-width:none;

    margin:0;
}

/* =========================================================
   MEDIA
========================================================= */

img{

    max-width:100%;

    display:block;
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:1400px){

    .bmSidebarRight,
    .rsb{

        display:none;
    }

    .bmContent,
    .bmMain{

        width:100%;
    }
}

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

@media(max-width:1100px){

    .bmLayout{

        display:block;

        padding:10px;
    }

    .bmSidebarLeft,
    .bmSidebarRight,
    .lsb,
    .rsb{

        display:none;
    }

    .bmContent,
    .bmMain{

        width:100%;
    }
}
body.has-left-sidebar .bmContent{
    max-width:calc(100vw - 260px);
}

body.has-left-sidebar.has-right-sidebar .bmContent{
    max-width:calc(100vw - 530px);
}