/*
|--------------------------------------------------------------------------
| Devilish Services Nova Lobby - Shared UI
|--------------------------------------------------------------------------
| One central layout for BHD, DFX and DFX2.
| Change structure/spacing here once and every lobby follows it.
| Each lobby selects its color set with:
|
|   <body data-lobby-theme="bhd">
|   <body data-lobby-theme="dfx">
|   <body data-lobby-theme="dfx2">
|--------------------------------------------------------------------------
*/

:root{
    --bg:#06111c;
    --bg-top:#173f68;
    --bg-mid:#091724;
    --bg-bottom:#04090e;

    --panel:#0d1d2c;
    --panel-2:#11283c;
    --panel-3:#15364f;

    --line:#254b68;
    --line-soft:rgba(69,119,154,.42);

    --accent:#2e8fd1;
    --accent-strong:#2077b2;
    --accent-soft:#62cbff;
    --accent-rgb:46,143,209;

    --nav-text:#c5ebff;
    --muted:#7895aa;
    --steel:#9ab5c8;
    --text:#edf8ff;

    --hero-a:#123651;
    --hero-b:#0c1c2a;
    --summary-a:rgba(18,48,72,.96);
    --summary-b:rgba(9,25,38,.96);
    --filter-bg:rgba(12,29,44,.96);
    --table-bg:rgba(7,17,27,.96);
    --row-bg:#091723;
    --input-bg:#07131f;

    --thumb-border:#3b759c;
    --view-border:#3f95c8;
    --view-bg:#0d2940;
    --view-hover:#123956;
    --view-text:#8fdcff;

    --green:#22dc79;
    --red:#df5353;
    --yellow:#ffd15c;
}

/* Delta Force: Black Hawk Down */
body[data-lobby-theme="bhd"]{
    --bg-top:#2c4828;
    --bg-mid:#101a13;
    --bg-bottom:#050906;

    --panel:#142018;
    --panel-2:#1b2d20;
    --panel-3:#24402a;

    --line:#385c40;
    --line-soft:rgba(71,111,77,.46);

    --accent:#78bd69;
    --accent-strong:#4f8e49;
    --accent-soft:#a8df9b;
    --accent-rgb:120,189,105;

    --nav-text:#d4ebcf;
    --muted:#8fa494;
    --steel:#adbfaf;

    --hero-a:#1d4028;
    --hero-b:#0d1d13;
    --summary-a:rgba(26,61,35,.96);
    --summary-b:rgba(10,28,18,.96);
    --filter-bg:rgba(15,34,22,.97);
    --table-bg:rgba(8,20,13,.97);
    --row-bg:#0b1b11;
    --input-bg:#08140c;

    --thumb-border:#527d58;
    --view-border:#609a65;
    --view-bg:#16331c;
    --view-hover:#204b29;
    --view-text:#b7e4b3;
}

/* Delta Force Xtreme */
body[data-lobby-theme="dfx"]{
    --bg-top:#173f68;
    --bg-mid:#091724;
    --bg-bottom:#04090e;

    --panel:#0d1d2c;
    --panel-2:#11283c;
    --panel-3:#15364f;

    --line:#254b68;
    --line-soft:rgba(69,119,154,.42);

    --accent:#2e8fd1;
    --accent-strong:#2077b2;
    --accent-soft:#62cbff;
    --accent-rgb:46,143,209;

    --nav-text:#c5ebff;
    --muted:#7895aa;
    --steel:#9ab5c8;

    --hero-a:#123651;
    --hero-b:#0c1c2a;
    --summary-a:rgba(18,48,72,.96);
    --summary-b:rgba(9,25,38,.96);
    --filter-bg:rgba(12,29,44,.96);
    --table-bg:rgba(7,17,27,.96);
    --row-bg:#091723;
    --input-bg:#07131f;

    --thumb-border:#3b759c;
    --view-border:#3f95c8;
    --view-bg:#0d2940;
    --view-hover:#123956;
    --view-text:#8fdcff;
}

/* Delta Force Xtreme 2 */
body[data-lobby-theme="dfx2"]{
    --bg-top:#4a2a17;
    --bg-mid:#1c120c;
    --bg-bottom:#080503;

    --panel:#1d1510;
    --panel-2:#2b1e15;
    --panel-3:#3b2718;

    --line:#664329;
    --line-soft:rgba(124,82,46,.48);

    --accent:#df7e32;
    --accent-strong:#b85e1f;
    --accent-soft:#f2a35f;
    --accent-rgb:223,126,50;

    --nav-text:#ffd3ae;
    --muted:#a88e7b;
    --steel:#c2ad9c;
    --text:#fff5ec;

    --hero-a:#3b2415;
    --hero-b:#1a110b;
    --summary-a:rgba(55,34,20,.97);
    --summary-b:rgba(26,17,11,.97);
    --filter-bg:rgba(29,21,16,.97);
    --table-bg:rgba(18,11,6,.97);
    --row-bg:#140c07;
    --input-bg:#100a06;

    --thumb-border:#87542e;
    --view-border:#a16535;
    --view-bg:#321d10;
    --view-hover:#472716;
    --view-text:#ffc18b;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100%;
}

body{
    min-height:100vh;
    background:
        radial-gradient(
            circle at top,
            var(--bg-top) 0,
            var(--bg-mid) 42%,
            var(--bg-bottom) 100%
        );
    background-attachment:fixed;
    color:var(--text);
    font:14px Arial,Helvetica,sans-serif;
}

.wrap{
    width:min(1500px,calc(100% - 28px));
    margin:auto;
    padding:26px 0 50px;
}

.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
}

.brand h1{
    margin:0;
    font-size:31px;
    letter-spacing:.01em;
}

.brand p{
    margin:5px 0 0;
    color:var(--muted);
}

.nav{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.nav a,
.button{
    color:var(--nav-text);
    text-decoration:none;
    background:color-mix(in srgb,var(--panel-2) 82%,black);
    border:1px solid var(--line);
    padding:9px 12px;
    border-radius:8px;
}

.nav a:hover,
.nav a.active,
.button:hover{
    border-color:var(--accent-soft);
    background:var(--panel-3);
}

.hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    padding:18px 20px;
    background:
        linear-gradient(
            135deg,
            var(--hero-a),
            var(--hero-b)
        );
    border:1px solid var(--line);
    border-radius:13px;
}

.hero-brand{
    display:flex;
    align-items:center;
    gap:15px;
}

.hero-logo{
    width:76px;
    height:52px;
    object-fit:cover;
    border-radius:9px;
    border:1px solid var(--thumb-border);
    box-shadow:0 8px 22px rgba(0,0,0,.25);
}

.hero-title{
    font-size:22px;
    font-weight:800;
}

.hero-sub{
    margin-top:5px;
    color:var(--steel);
}

.refresh-top{
    padding:10px 15px;
    border-radius:8px;
    color:#fff;
    background:var(--accent-strong);
    border:1px solid var(--accent-soft);
    text-decoration:none;
    font-weight:700;
}

.refresh-top:hover{
    background:var(--accent);
}

.summary-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin:14px 0;
}

.summary-card{
    min-height:92px;
    padding:17px 18px;
    border:1px solid var(--line);
    border-radius:11px;
    background:
        linear-gradient(
            145deg,
            var(--summary-a),
            var(--summary-b)
        );
    box-shadow:0 10px 28px rgba(0,0,0,.18);
}

.summary-number{
    color:var(--accent-soft);
    font-size:29px;
    line-height:1;
    font-weight:800;
}

.summary-label{
    margin-top:9px;
    color:color-mix(in srgb,var(--text) 72%,var(--muted));
    font-size:12px;
    font-weight:700;
}

.filters{
    display:grid;
    grid-template-columns:
        minmax(230px,2fr)
        repeat(4,minmax(135px,1fr))
        auto;
    gap:10px;
    align-items:end;
    margin-bottom:14px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:11px;
    background:var(--filter-bg);
}

.filter-field{
    min-width:0;
}

.filter-field label{
    display:block;
    margin:0 0 6px;
    color:color-mix(in srgb,var(--steel) 90%,white);
    font-size:11px;
    font-weight:700;
}

.filter-field input,
.filter-field select{
    width:100%;
    height:40px;
    padding:0 11px;
    border:1px solid var(--line);
    border-radius:7px;
    outline:none;
    background:var(--input-bg);
    color:var(--text);
}

.filter-field input:focus,
.filter-field select:focus{
    border-color:var(--accent-soft);
    box-shadow:
        0 0 0 2px
        rgba(var(--accent-rgb),.09);
}

.filter-actions{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:40px;
}

.apply{
    height:40px;
    padding:0 17px;
    border:1px solid var(--accent-soft);
    border-radius:7px;
    background:var(--accent-strong);
    color:#fff;
    cursor:pointer;
    font-weight:800;
}

.apply:hover{
    background:var(--accent);
}

.reset{
    color:color-mix(in srgb,var(--steel) 92%,white);
    text-decoration:none;
    font-weight:700;
    padding:11px 4px;
}

.reset:hover{
    color:#fff;
}

.list-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:12px 14px;
    border:1px solid var(--line);
    border-bottom:0;
    border-radius:11px 11px 0 0;
    background:var(--panel-2);
}

.list-heading strong{
    font-size:14px;
}

.list-heading span{
    margin-left:7px;
    color:var(--muted);
    font-size:11px;
}

.legend{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.legend span{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin:0;
}

.legend-dot{
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
}

.tablebox,
.card{
    border:1px solid var(--line);
    border-radius:0 0 12px 12px;
    overflow:visible;
    background:var(--table-bg);
}

table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}

col.col-game{width:68px}
col.col-status{width:34px}
col.col-cn{width:58px}
col.col-name{width:22%}
col.col-private{width:74px}
col.col-type{width:15%}
col.col-mission{width:24%}
col.col-time{width:90px}
col.col-players{width:90px}
col.col-info{width:76px}

th{
    padding:12px 10px;
    text-align:left;
    background:var(--panel-2);
    color:color-mix(in srgb,var(--text) 72%,var(--muted));
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.06em;
    border-bottom:1px solid var(--line);
}

td{
    padding:11px 10px;
    border-bottom:1px solid var(--line-soft);
    vertical-align:middle;
    overflow-wrap:anywhere;
}

tbody tr:last-child td{
    border-bottom:0;
}

tbody tr:hover{
    background:
        rgba(var(--accent-rgb),.08);
}

.game-cell{
    text-align:center;
}

.game-thumb{
    display:block;
    width:46px;
    height:32px;
    margin:auto;
    object-fit:cover;
    border-radius:7px;
    border:1px solid var(--thumb-border);
    box-shadow:0 5px 13px rgba(0,0,0,.25);
}

.status-head{
    width:34px;
    padding-left:4px;
    padding-right:4px;
}

.status-cell{
    width:34px;
    padding-left:4px;
    padding-right:4px;
    text-align:center;
}

.status-cell .dot{
    margin:0 auto;
}

.country{
    color:color-mix(in srgb,var(--text) 76%,var(--muted));
    font-weight:700;
}

.country-flag-wrap{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:30px;
    min-height:20px;
}

.country-flag{
    display:block;
    width:28px;
    height:18px;
    object-fit:cover;
    border-radius:3px;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 2px 6px rgba(0,0,0,.22);
}

.country-code-fallback{
    display:none;
}

.country-code{
    color:color-mix(in srgb,var(--text) 76%,var(--muted));
    font-weight:700;
    font-size:11px;
    letter-spacing:.04em;
}

.country-code-missing{
    display:inline;
}

.name{
    font-weight:700;
}

.server-name{
    line-height:1.25;
}

.server-name.with-status{
    display:flex;
    align-items:center;
    gap:8px;
}

.server-name.with-status .dot{
    flex:0 0 9px;
}

.server-name-text{
    min-width:0;
}

.private.yes{
    color:var(--yellow);
    font-weight:700;
}

.players{
    font-weight:800;
    white-space:nowrap;
}

.time-left{
    color:var(--steel);
    white-space:nowrap;
}

.statusline{
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:5px;
    color:var(--muted);
    font-size:10px;
    font-weight:400;
}

.status-large{
    font-size:12px;
}

.dot{
    width:9px;
    height:9px;
    flex:0 0 9px;
    border-radius:50%;
    display:inline-block;
}

.playing{
    background:var(--green);
    box-shadow:
        0 0 9px
        rgba(34,220,121,.65);
}

.idle{
    background:var(--green);
    animation:
        lobby-pulse
        2.6s
        ease-in-out
        infinite;
}

.offline{
    background:var(--red);
}

@keyframes lobby-pulse{
    0%,100%{
        opacity:1;
        box-shadow:
            0 0 9px
            rgba(34,220,121,.65);
    }

    50%{
        opacity:.22;
        box-shadow:none;
    }
}

.view{
    display:inline-block;
    padding:7px 11px;
    border-radius:7px;
    border:1px solid var(--view-border);
    background:var(--view-bg);
    color:var(--view-text);
    text-decoration:none;
    font-weight:700;
}

.view:hover{
    background:var(--view-hover);
}

.message{
    padding:38px;
    text-align:center;
    color:var(--steel);
}

.message-actions{
    margin-top:15px;
}

.footer{
    text-align:center;
    color:var(--muted);
    font-size:12px;
    padding:22px 0;
}

/*
|--------------------------------------------------------------------------
| Server / About pages
|--------------------------------------------------------------------------
*/

.detail-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1px;
    background:var(--line);
}

.detail{
    padding:18px;
    background:var(--panel);
}

.label{
    color:var(--muted);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:6px;
}

.value{
    font-weight:700;
    font-size:15px;
}

.section{
    padding:22px;
}

.section h2{
    margin:0 0 14px;
}

.page-actions{
    margin:18px 0 0;
}

.card{
    border-radius:12px;
    overflow:hidden;
}

.card .hero{
    border:0;
    border-bottom:1px solid var(--line);
    border-radius:0;
}

.about{
    padding:24px;
    line-height:1.7;
    color:color-mix(in srgb,var(--text) 80%,var(--muted));
}

.about h2{
    color:var(--accent-soft);
}

.about pre{
    overflow:auto;
    padding:12px;
    border:1px solid var(--line);
    border-radius:7px;
    background:var(--input-bg);
    color:var(--view-text);
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media(max-width:1200px){
    .filters{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .filter-search{
        grid-column:span 2;
    }

    .filter-actions{
        justify-content:flex-end;
    }

    col.col-name{width:21%}
    col.col-type{width:14%}
    col.col-mission{width:21%}
}

@media(max-width:900px){
    .topbar,
    .hero,
    .list-heading,
    body[data-lobby-theme="bhd"] .devilish-bhd-topbar{
        align-items:flex-start;
        flex-direction:column;
    }

    .summary-grid,
    body[data-lobby-theme="bhd"] .stats-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .filters{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .filter-search{
        grid-column:1/-1;
    }

    .filter-actions{
        justify-content:flex-start;
    }

    .tablebox{
        border-radius:0 0 12px 12px;
    }

    table,
    tbody,
    tr,
    td{
        display:block;
        width:100%;
    }

    colgroup,
    thead{
        display:none;
    }

    tbody{
        padding:8px;
    }

    tr.server-row{
        display:grid;
        grid-template-columns:
            72px
            38px
            1fr
            1fr;
        gap:0;
        margin:8px 0;
        border:1px solid var(--line);
        border-radius:10px;
        overflow:hidden;
        background:var(--row-bg);
    }

    tr.server-row td{
        position:relative;
        min-height:49px;
        padding:23px 10px 9px;
        border-right:1px solid var(--line-soft);
        border-bottom:1px solid var(--line-soft);
    }

    tr.server-row td::before{
        content:attr(data-label);
        position:absolute;
        top:7px;
        left:10px;
        color:var(--muted);
        font-size:9px;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.05em;
    }

    tr.server-row td.game-cell{
        grid-row:span 2;
        display:grid;
        place-items:center;
        padding:12px;
    }

    tr.server-row td.game-cell::before{
        display:none;
    }

    tr.server-row td.status-cell{
        grid-row:span 2;
        display:grid;
        place-items:center;
        padding:12px 6px;
    }

    tr.server-row td.status-cell::before{
        display:none;
    }

    tr.server-row td.name{
        grid-column:span 2;
    }

    tr.server-row td.info-cell{
        display:flex;
        align-items:center;
        justify-content:flex-start;
    }

    .game-thumb{
        width:50px;
        height:36px;
    }

    .detail-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

    body[data-lobby-theme="bhd"] .system-modern-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:600px){
    .wrap{
        width:min(100% - 18px,1500px);
        padding-top:14px;
    }

    .summary-grid,
    body[data-lobby-theme="bhd"] .stats-grid{
        grid-template-columns:
            1fr 1fr;
        gap:8px;
    }

    .summary-card{
        min-height:80px;
        padding:14px;
    }

    .summary-number{
        font-size:25px;
    }

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

    .filter-search,
    .filter-actions{
        grid-column:auto;
    }

    tr.server-row{
        grid-template-columns:
            64px
            34px
            1fr;
    }

    tr.server-row td.name{
        grid-column:auto;
    }

    tr.server-row td.status-cell{
        grid-column:2;
    }

    tr.server-row td:not(.game-cell):not(.status-cell){
        grid-column:3;
    }

    .hero-brand{
        align-items:flex-start;
    }

    .hero-logo{
        width:66px;
        height:46px;
    }

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

    body[data-lobby-theme="bhd"] .devilish-bhd-topbar,
    body[data-lobby-theme="bhd"] .stats-grid,
    body[data-lobby-theme="bhd"] .filters,
    body[data-lobby-theme="bhd"] .filter-bar,
    body[data-lobby-theme="bhd"] .filter-panel,
    body[data-lobby-theme="bhd"] .server-filters,
    body[data-lobby-theme="bhd"] .search-panel{
        width:min(100% - 18px,1500px);
    }
}