/* Apply dark mode BEFORE the body is painted, preventing the light-mode flash. */
html.dark-preload,
html.dark-preload body{
    background:#0b0d10 !important;
    color:#e7e9ed !important;
}
html.dark-preload #top-bar{
    background:rgba(56,112,150,.18) !important;
    border-color:#387096 !important;
}
html.dark-preload button{
    background:#111419 !important;
    color:#c7ccd3 !important;
    border-color:#292f39 !important;
}
html.dark-preload .game-button{
    background:#111419 !important;
    color:#c7ccd3 !important;
}
html.dark-preload .game-button small,
html.dark-preload #status{color:#747b86 !important}
html.dark-preload .game-button.active{
    background:rgba(56,112,150,.18) !important;
    border-color:#387096 !important;
}
html.dark-preload .search-container input{
    background:#111419 !important;
    color:#ddd !important;
    border-color:#292f39 !important;
}
html.dark-preload .game{
    background:#111419 !important;
    border-color:#292f39 !important;
}
html.dark-preload .game-title,
html.dark-preload th,
html.dark-preload .pagination-container,
html.dark-preload .details-row{
    background:#0f1217 !important;
    border-color:#292f39 !important;
}
html.dark-preload td{border-color:#20252d !important}
html.dark-preload .details{border-color:#3c444f !important}
:root{
    --bg:#0b0d10;
    --surface:#111419;
    --surface2:#151922;
    --border:#292f39;
    --text:#e7e9ed;
    --muted:#8c939e;
    --light-bg:#f0f4f8;
    --light-surface:#ffffff;
    --light-surface2:#eef3f7;
    --light-border:#c3d0dc;
    --light-text:#202124;
    --light-muted:#6f747b;
}
*{box-sizing:border-box}
body{
    margin:0;
    padding:20px;
    font-family:'Roboto',Arial,Helvetica,sans-serif;
    background:var(--light-bg);
    color:var(--light-text);
}


/* STATS OVERVIEW — OCULTAR CUADROS DE ESTADÍSTICAS */
.stats-overview{
    display:none !important;
}


/* TOP BAR */
#top-bar{
    position:sticky;
    top:0;
    z-index:10;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:rgba(56,112,150,.12);
    margin:-20px -20px 20px;
    padding:13px 20px;
    border-bottom:1px solid #387096;
    backdrop-filter:blur(10px);
}

.brand-container{display:flex;align-items:center;gap:10px}
.brand-icon{width:28px;height:28px;border-radius:5px}
h1{margin:0;font-size:25px}
#status{margin:3px 0 0;font-size:12px;color:#747b84}
#top-buttons{display:flex;gap:6px;align-items:center}
#top-buttons button{
    width:36px;
    height:36px;
    min-width:36px;
    min-height:36px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    line-height:1;
    flex:0 0 36px;
}
button{
    padding:8px 13px;
    cursor:pointer;
    background:#ffffff;
    color:#333;
    border:1px solid #cbd0d6;
    border-radius:6px;
}
button:hover{background:#eef3f8}

/* GAME BUTTONS */
.game-buttons{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.game-button{padding:7px 11px;font-size:12px;text-align:left}
.game-button strong{display:block}
.game-button small{display:block;color:#777;margin-top:2px}
.game-button.active{background:rgba(56,112,150,.15);border-color:#387096}

/* SEARCH & QUICK FILTERS */
.search-container{display:flex;gap:8px;margin-bottom:12px}
.search-container input{
    flex:1;
    min-width:200px;
    padding:9px 12px;
    border:1px solid #cbd0d6;
    border-radius:6px;
    font-size:14px;
    background:#ffffff;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.search-container input:focus{
    outline:0;
    border-color:#387096;
    box-shadow:0 0 0 3px rgba(56,112,150,.15);
}

.quick-filters{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:20px;
    align-items:center;
}
.filter-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    background:#ffffff;
    border:1px solid #cbd0d6;
    border-radius:20px;
    font-size:12px;
    font-weight:500;
    cursor:pointer;
    user-select:none;
    transition:background .15s ease, border-color .15s ease;
}
.filter-chip:hover{
    background:#eef3f8;
}
.filter-chip input[type="checkbox"]{
    margin:0;
    cursor:pointer;
    accent-color:#387096;
}

/* GAME & TABLES */
.game{
    background:#ffffff;
    border:1px solid #d3d7dc;
    border-radius:7px;
    margin-bottom:22px;
    overflow:hidden;
}
.game-title{
    scroll-margin-top:70px;
    padding:13px 15px;
    margin:0;
    border-bottom:1px solid #d9dde2;
    background:#f4f7fa;
    font-size:18px;
}
.table-container{width:100%;overflow-x:auto}
table{width:100%;min-width:700px;border-collapse:collapse}
th{
    background:#f4f7fa;
    padding:10px 12px;
    text-align:left;
    border-bottom:1px solid #e0e3e7;
    cursor:pointer;
    color:#6d747d;
    font-size:12px;
    user-select:none;
    transition:background .15s ease;
}
th:hover{
    background:#e9edf2;
}
th.sorted{
    color:#387096;
    font-weight:700;
}
.sort-icon{
    display:inline-block;
    margin-left:4px;
    font-size:10px;
    vertical-align:middle;
}
td{
    padding:11px 12px;
    border-bottom:1px solid #eceef1;
    font-size:13px;
    vertical-align:middle;
}
.server-row{cursor:pointer}
.server-row:hover{background:rgba(56,112,150,.12)}
.server-name{font-weight:bold}
.players-count{white-space:nowrap}

/* PLAYERS */
.player-box{
    display:inline-block;
    min-width:72px;
    padding:5px 10px;
    text-align:center;
    border:1px solid;
    border-radius:5px;
    font-weight:bold;
}
.player-empty{color:#777;border-color:#bbb;background:#f5f5f5}
.player-low{color:#a17e16;border-color:#c5a64d;background:#fff9df}
.player-medium{color:#2d9942;border-color:#69b977;background:#effaf1}
.player-full{color:#d34b4b;border-color:#df8585;background:#fff0f0}

/* COUNTRY FLAGS */
.country-flag{
    width:32px;
    height:22px;
    object-fit:cover;
    border-radius:3px;
    vertical-align:middle;
    display:inline-block;
    border:1px solid rgba(0,0,0,.1);
}
.flag-placeholder{
    font-size:18px;
    line-height:1;
    display:inline-block;
    width:32px;
    text-align:center;
}

/* FAVORITE & EXPAND BUTTONS */
.fav-button{
    background:transparent;
    border:0;
    padding:2px 4px;
    font-size:16px;
    cursor:pointer;
    line-height:1;
    color:#8c939e;
    transition:transform .15s ease, color .15s ease;
    vertical-align:middle;
    margin-right:4px;
}
.fav-button:hover{
    background:transparent;
    transform:scale(1.2);
    color:#f59e0b;
}
.fav-button.is-favorite{
    color:#f59e0b;
}

.expand-icon{
    display:inline-flex;
    width:16px;
    height:16px;
    margin-right:5px;
    vertical-align:-3px;
    color:inherit;
}
.expand-icon svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* DETAILS */
.details-row{background:#f4f7fa}
.details{
    padding:12px 16px;
    border-left:3px solid #c7ccd2;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.details p{margin:3px 0;font-size:13px}

/* COPY BUTTON */
.copy-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    padding:0;
    margin-left:5px;
    background:transparent;
    color:inherit;
    border:0;
    border-radius:4px;
    cursor:pointer;
    vertical-align:middle;
    opacity:.65;
    transition:opacity .15s ease,background .15s ease;
}
.copy-button:hover{background:rgba(127,127,127,.12);opacity:1}
.copy-button svg{
    width:15px;
    height:15px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* STATUS BADGES */
.status-badge{
    display:inline-block;
    padding:2px 6px;
    border-radius:4px;
    font-size:11px;
    font-weight:bold;
}
.status-online{background:#d4edda;color:#155724}
.status-offline{background:#f8d7da;color:#721c24}

/* PAGINATION & FEEDBACK */
.pagination-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 15px;
    background:#f4f7fa;
    border-top:1px solid #e0e3e7;
    flex-wrap:wrap;
    gap:10px;
}
.pagination-buttons{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.pagination-button{padding:5px 9px;font-size:12px}
.pagination-button.active{
    background:rgba(127,127,127,.08);
    border-color:rgba(127,127,127,.35);
    font-weight:bold;
}
.pagination-ellipsis{padding:0 4px;color:#8c939e;font-size:12px}
.no-results{padding:20px;color:#777}
.loading{padding:60px;text-align:center;color:#777}

.refresh-button{
    width:36px;
    height:36px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    font-size:20px;
}
.refresh-button.is-refreshing{
    animation:none;
}
.refresh-button .refresh-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    line-height:1;
    text-align:center;
    transform-origin:center;
}
.refresh-button.is-refreshing .refresh-icon{
    animation:refresh-spin .8s linear infinite;
}
@keyframes refresh-spin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

/* TOAST NOTIFICATION */
.toast{
    position:fixed;
    bottom:20px;
    right:20px;
    background:#ffffff;
    color:#333;
    border:1px solid #cbd0d6;
    padding:8px 13px;
    border-radius:6px;
    font-size:13px;
    font-weight:500;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    z-index:1000;
    opacity:0;
    transform:translateY(10px);
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
}
.toast.show{
    opacity:1;
    transform:translateY(0);
}

/* DARK MODE */
body.dark-mode{background:var(--bg);color:var(--text)}
body.dark-mode #top-bar{background:rgba(56, 112, 150,.18);border-color:#387096}
body.dark-mode .stat-card{background:var(--surface);border-color:var(--border)}
body.dark-mode .stat-value{color:#64b5f6}
body.dark-mode .stat-label{color:var(--muted)}
body.dark-mode .filter-chip{background:var(--surface);border-color:var(--border);color:var(--text)}
body.dark-mode .filter-chip:hover{background:var(--surface2)}
body.dark-mode .toast{background:var(--surface);color:#c7ccd3;border-color:var(--border)}
body.dark-mode button{background:var(--surface);color:#c7ccd3;border-color:var(--border)}
body.dark-mode button:hover{background:var(--surface2)}
body.dark-mode .game-button{background:var(--surface);color:#c7ccd3}
body.dark-mode .game-button small{color:#747b86}
body.dark-mode .game-button.active{background:rgba(56, 112, 150,.18);border-color:#387096}
body.dark-mode .search-container input{background:var(--surface);color:#ddd;border-color:var(--border)}
body.dark-mode .game{background:var(--surface);border-color:var(--border)}
body.dark-mode .game-title,
body.dark-mode th,
body.dark-mode .pagination-container{background:#0f1217;border-color:var(--border)}
body.dark-mode td{border-color:#20252d}
body.dark-mode .server-row:hover{background:var(--surface2)}
body.dark-mode .details-row{background:#0f1217}
body.dark-mode .details{border-color:#3c444f}
body.dark-mode .player-empty{color:#858d98;border-color:#555;background:#171a1f}
body.dark-mode .player-low{color:#c8a93c;border-color:#79692f;background:#211f14}
body.dark-mode .player-medium{color:#57c96b;border-color:#3f7849;background:#142118}
body.dark-mode .player-full{color:#f06a6a;border-color:#864747;background:#281717}
body.dark-mode .status-online{background:#142118;color:#57c96b}
body.dark-mode .status-offline{background:#281717;color:#f06a6a}

/* MOBILE */
@media(max-width:600px){
    body{padding:10px}

    /*
       MOBILE TOP BAR
       Fixed at the original large size so refreshing the server list
       can never make the header jump. The status area is allowed to
       wrap onto two lines instead of being hidden.
    */
    #top-bar{
        margin:-10px -10px 15px;
        padding:11px 10px;
        height:72px;
        min-height:72px;
        max-height:72px;
        box-sizing:border-box;
        display:flex;
        align-items:center;
        justify-content:space-between;
        flex-shrink:0;
    }

    .brand-container{
        display:flex;
        align-items:center;
        gap:10px;
        min-width:0;
        flex:1 1 auto;
        height:50px;
    }

    .brand-container > div{
        min-width:0;
        flex:1 1 auto;
    }

    .brand-icon{
        flex:0 0 auto;
    }

    h1{
        font-size:21px;
        line-height:25px;
        margin:0;
    }

    /*
       Reserve the status space. It can wrap to a second line,
       but the header itself never changes height.
    */
    #status{
        margin:2px 0 0;
        line-height:14px;
        min-height:28px;
        max-height:28px;
        overflow:hidden;
        white-space:normal;
        overflow-wrap:anywhere;
    }

    #top-buttons{
        display:flex;
        gap:6px;
        flex:0 0 auto;
        align-items:center;
        margin-left:8px;
    }

    #top-buttons button{
        flex:0 0 auto;
    }

    .search-container{flex-direction:column}
    .search-container input{width:100%}
    .pagination-container{
        flex-direction:column;
        align-items:stretch;
        gap:8px
    }
    .pagination-buttons{justify-content:center}
    .details{flex-direction:column;}
}

.flag-wrap{
    display:inline-flex;
    width:32px;
    height:22px;
    align-items:center;
    justify-content:center;
    vertical-align:middle;
    position:relative;
}
.flag-wrap .country-flag{
    width:32px;
    height:22px;
    display:block;
    object-fit:cover;
    border-radius:3px;
    border:1px solid rgba(0,0,0,.1);
}
.flag-emoji-fallback{
    display:none;
    align-items:center;
    justify-content:center;
    width:32px;
    height:22px;
    font-size:21px;
    line-height:1;
}

@media(min-width:601px){
    table{table-layout:fixed;min-width:700px;}
    th:nth-child(1),td:nth-child(1){width:100px;}
    th:nth-child(2),td:nth-child(2){width:36%;}
    th:nth-child(3),td:nth-child(3){width:92px;}
    th:nth-child(4),td:nth-child(4){width:100px;}
    th:nth-child(5),td:nth-child(5){width:150px;}
    th:nth-child(6),td:nth-child(6){width:120px;}
    .server-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}

/* COD COLOR CODES */
.cod-color-0 { color: #000000; }
.cod-color-1 { color: #ff0000; }
.cod-color-2 { color: #00ff00; }
.cod-color-3 { color: #ffff00; }
.cod-color-4 { color: #0000ff; }
.cod-color-5 { color: #00ffff; }
.cod-color-6 { color: #ff00ff; }
.cod-color-7 { color: #ffffff; }
.cod-color-8 { color: #ff7f00; }
.cod-color-9 { color: #7f7f7f; }

body:not(.dark-mode) .cod-color-7 { color: inherit; }
body:not(.dark-mode) .cod-color-0 { color: #111827; }
</style>