/* ═══════════════════════════════════════════════════
   AthlonClub — Server Statistics
   ═══════════════════════════════════════════════════ */

.ul-wrap {
    background: #0d0f14;
    min-height: 80vh;
    padding: 40px 0 80px;
    color: #e0e0e0;
}
.ul-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ── PAGE TITLE ─────────────────────────────── */
.ul-page-title {
    text-align: center; font-size: 2.4rem; font-weight: 700;
    letter-spacing: 4px; color: #fff; margin: 0 0 8px; text-transform: uppercase;
}
.ul-page-title::after {
    content:''; display:block; width:60px; height:3px;
    background:#c0212b; margin:14px auto 0;
}
.ul-page-sub { text-align:center; color:#888; font-size:1rem; margin:0 0 48px; }

/* ── SERVER CARDS ───────────────────────────── */
.ul-server-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; }

.ul-server-card {
    background:#161a22; border:1px solid #252a34; border-radius:8px;
    overflow:hidden; transition:transform .2s, border-color .2s;
}
.ul-server-card:hover { transform:translateY(-4px); border-color:#c0212b; }
.ul-card-disabled { opacity:.5; pointer-events:none; }

.ul-card-banner { height:170px; background-size:cover; background-position:center; position:relative; }
.ul-badge-soon {
    position:absolute; top:12px; right:12px; background:rgba(192,33,43,.85);
    color:#fff; font-size:.72rem; font-weight:700; letter-spacing:2px; padding:4px 10px; border-radius:4px;
}
.ul-card-body { padding:20px 22px 24px; }
.ul-card-title { color:#fff; font-size:1.2rem; font-weight:700; margin:0 0 4px; }
.ul-card-sub { color:#888; font-size:.85rem; margin:0 0 18px; }
.ul-btn-view {
    display:inline-block; background:#c0212b; color:#fff !important; font-weight:700;
    font-size:.9rem; letter-spacing:1px; padding:10px 22px; border-radius:4px;
    text-decoration:none !important; transition:background .2s;
}
.ul-btn-view:hover { background:#e0252f; }
.ul-btn-disabled { display:inline-block; background:#252a34; color:#555; font-size:.9rem; padding:10px 22px; border-radius:4px; }

/* ── LEADERBOARD HERO ───────────────────────── */
.ul-back-link { display:inline-block; color:#888 !important; font-size:.9rem; text-decoration:none !important; margin-bottom:20px; transition:color .2s; }
.ul-back-link:hover { color:#c0212b !important; }

.ul-hero {
    height:220px; background-size:cover; background-position:center;
    border-radius:8px; position:relative; margin-bottom:32px; overflow:hidden;
}
.ul-hero-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top,rgba(13,15,20,.95) 0%,rgba(13,15,20,.2) 100%);
    display:flex; flex-direction:column; justify-content:flex-end; padding:28px 32px;
}
.ul-hero-title { color:#fff; font-size:2rem; font-weight:700; letter-spacing:2px; margin:0 0 4px; }
.ul-hero-sub { color:#aaa; font-size:.95rem; margin:0; }

/* ── CONTROLS ───────────────────────────────── */
.ul-controls { display:flex; align-items:center; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.ul-search {
    flex:1; min-width:200px; background:#161a22; border:1px solid #252a34; border-radius:6px;
    color:#e0e0e0; padding:10px 16px; font-size:.95rem; outline:none; transition:border-color .2s;
}
.ul-search:focus { border-color:#c0212b; }
.ul-search::placeholder { color:#555; }
.ul-meta { display:flex; align-items:center; gap:12px; }
.ul-count { color:#666; font-size:.85rem; white-space:nowrap; }
.ul-cache-info { color:#444; font-size:.78rem; white-space:nowrap; }
.ul-cache-info::before { content:'🕐 '; }

/* ── TABLE ──────────────────────────────────── */
.ul-table-wrap { overflow-x:auto; border-radius:8px; border:1px solid #252a34; }
.ul-table { width:100%; border-collapse:collapse; font-size:.92rem; }

.ul-table thead tr { background:#161a22; border-bottom:2px solid #c0212b; }
.ul-table th {
    color:#aaa; font-size:.72rem; font-weight:700; letter-spacing:1.5px;
    text-transform:uppercase; padding:11px 14px; text-align:left; white-space:nowrap;
}
.ul-table th.sortable { cursor:pointer; user-select:none; }
.ul-table th.sortable:hover { color:#fff; }
.ul-table th.ul-sort-asc::after { content:' ↑'; color:#c0212b; }
.ul-table th.ul-sort-desc::after { content:' ↓'; color:#c0212b; }
.ul-col-icon { width:14px; height:14px; vertical-align:middle; margin-right:5px; opacity:.75; }

.ul-th-rank  { width:52px; text-align:center; }
.ul-th-num   { text-align:right; }

.ul-table tbody tr { border-bottom:1px solid #1c2028; transition:background .12s; cursor:pointer; }
.ul-table tbody tr:last-child { border-bottom:none; }
.ul-table tbody tr:hover { background:#1a1f2b; }

.ul-table td { padding:10px 14px; }
.ul-td-rank { text-align:center; font-weight:700; color:#666; }
.ul-gold   { color:#f0b429 !important; }
.ul-silver { color:#b0b8c8 !important; }
.ul-bronze { color:#cd7f32 !important; }
.ul-rank-icon { width:26px; height:26px; vertical-align:middle; }
.ul-rank-icon.rank-1 { filter:sepia(1) saturate(4) hue-rotate(5deg) brightness(1.1); }
.ul-rank-icon.rank-2 { filter:sepia(1) saturate(0) brightness(1.4); }
.ul-rank-icon.rank-3 { filter:sepia(1) saturate(2) hue-rotate(340deg) brightness(.9); }

.ul-td-player { display:flex; align-items:center; gap:10px; }
.ul-avatar { width:32px; height:32px; border-radius:4px; object-fit:cover; background:#252a34; flex-shrink:0; }
.ul-nick { color:#e0e0e0; font-weight:600; }
.ul-profile-btn {
    margin-left:auto; font-size:.72rem; color:#5088c0; opacity:0;
    transition:opacity .15s; white-space:nowrap; padding:3px 8px;
    border:1px solid #5088c030; border-radius:3px;
}
tr:hover .ul-profile-btn { opacity:1; }

.ul-td-num { text-align:right; font-variant-numeric:tabular-nums; color:#ccc; }
.ul-td-time { color:#888; }
.ul-kd-g { color:#4caf50; font-weight:700; }
.ul-kd-r { color:#ef5350; }

/* ── MESSAGES ───────────────────────────────── */
.ul-msg { text-align:center; color:#888; padding:60px 20px; font-size:1rem; }
.ul-msg-error { color:#ef5350; }

/* ── PAGINATION ─────────────────────────────── */
.ul-pagination { display:flex; justify-content:center; gap:6px; margin-top:28px; flex-wrap:wrap; }
.ul-page-btn {
    background:#161a22; border:1px solid #252a34; color:#aaa; font-size:.88rem;
    padding:7px 13px; border-radius:4px; cursor:pointer; transition:all .15s;
}
.ul-page-btn:hover { background:#1e2430; border-color:#c0212b; color:#fff; }
.ul-page-active { background:#c0212b !important; border-color:#c0212b !important; color:#fff !important; }
.ul-page-dots { color:#555; padding:7px 6px; font-size:.88rem; }

/* ═══════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════ */
.ul-modal-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:9999;
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .22s;
    backdrop-filter:blur(4px); padding:20px;
}
.ul-modal-backdrop.ul-modal-open { opacity:1; pointer-events:all; }

.ul-modal {
    background:#13161e; border:1px solid #252a34; border-radius:12px;
    width:100%; max-width:640px; max-height:88vh; overflow-y:auto;
    position:relative; transform:translateY(20px); transition:transform .25s;
    scrollbar-width:thin; scrollbar-color:#252a34 transparent;
}
.ul-modal-backdrop.ul-modal-open .ul-modal { transform:translateY(0); }

.ul-modal-close {
    position:absolute; top:14px; right:16px; background:none; border:none;
    color:#666; font-size:1.2rem; cursor:pointer; z-index:1; line-height:1;
    padding:4px 8px; border-radius:4px; transition:color .15s,background .15s;
}
.ul-modal-close:hover { color:#fff; background:#c0212b30; }

/* modal body */
.ul-modal-body { padding:24px; }
.ul-modal-loading { display:flex; flex-direction:column; align-items:center; gap:16px; padding:48px 0; color:#888; }
.ul-modal-err { color:#ef5350; text-align:center; padding:40px 0; }

/* spinner */
.ul-spinner {
    width:36px; height:36px; border:3px solid #252a34; border-top-color:#c0212b;
    border-radius:50%; animation:ul-spin .8s linear infinite;
}
@keyframes ul-spin { to { transform:rotate(360deg); } }

/* modal header */
.ul-modal-header { display:flex; gap:20px; align-items:center; margin-bottom:24px; }
.ul-modal-avatar { width:80px; height:80px; border-radius:8px; object-fit:cover; border:2px solid #c0212b; flex-shrink:0; }
.ul-modal-name { color:#fff; font-size:1.4rem; font-weight:700; margin-bottom:4px; }
.ul-modal-pts { color:#f0b429; font-size:.9rem; margin-bottom:8px; }
.ul-steam-link { font-size:.8rem; color:#5088c0 !important; text-decoration:none !important; }
.ul-steam-link:hover { color:#70a8e0 !important; text-decoration:underline !important; }

/* modal stats grid */
.ul-modal-stats {
    display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:24px;
}
.ul-stat-box {
    background:#1c2028; border:1px solid #252a34; border-radius:8px;
    padding:14px 12px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
}
.ul-stat-box img { width:24px; height:24px; opacity:.8; }
.ul-stat-val { font-size:1.25rem; font-weight:700; color:#fff; line-height:1; }
.ul-stat-lbl { font-size:.72rem; color:#888; letter-spacing:.5px; text-transform:uppercase; }

/* modal sections */
.ul-modal-details { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:500px) { .ul-modal-details { grid-template-columns:1fr; } }

.ul-modal-section { background:#1c2028; border:1px solid #252a34; border-radius:8px; padding:14px 16px; }
.ul-modal-section-title { color:#c0212b; font-size:.72rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin:0 0 12px; }

/* hit zones */
.ul-hz-list { display:flex; flex-direction:column; gap:7px; }
.ul-hz-row { display:flex; align-items:center; gap:8px; font-size:.82rem; }
.ul-hz-label { color:#aaa; width:54px; flex-shrink:0; }
.ul-hz-bar-wrap { flex:1; background:#252a34; border-radius:3px; height:7px; overflow:hidden; }
.ul-hz-bar { height:100%; border-radius:3px; transition:width .5s; }
.ul-hz-pct { color:#ccc; width:36px; text-align:right; flex-shrink:0; }

/* event/weapon lists */
.ul-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ul-list li { display:flex; align-items:center; gap:8px; font-size:.82rem; border-bottom:1px solid #252a3460; padding-bottom:6px; }
.ul-list li:last-child { border-bottom:none; padding-bottom:0; }
.ul-list-name { color:#ccc; flex:1; }
.ul-list-val { color:#5088c0; font-weight:700; flex-shrink:0; }
.ul-ev-icon { width:20px; height:20px; object-fit:contain; flex-shrink:0; }

/* ── RESPONSIVE ─────────────────────────────── */
@media (max-width:640px) {
    .ul-page-title { font-size:1.6rem; }
    .ul-hero-title { font-size:1.4rem; }
    .ul-hero { height:160px; }
    .ul-table th, .ul-table td { padding:8px 8px; }
    .ul-td-time, th:last-child { display:none; }
    .ul-modal-stats { grid-template-columns:repeat(2,1fr); }
}

/* ── TOP 10 ─────────────────────────────────────────── */
.ul-top10 {
    background:#161a22; border:1px solid #252a34; border-radius:8px;
    margin-bottom:24px; overflow:hidden;
}
.ul-top10-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; border-bottom:1px solid #252a34; gap:12px; flex-wrap:wrap;
}
.ul-top10-title {
    color:#fff; font-size:.95rem; font-weight:700; letter-spacing:1px;
}
.ul-top10-tabs { display:flex; gap:6px; }
.ul-top10-tab {
    background:transparent; border:1px solid #252a34; color:#888;
    font-size:.78rem; font-weight:600; letter-spacing:1px; text-transform:uppercase;
    padding:5px 14px; border-radius:4px; cursor:pointer; transition:all .15s;
}
.ul-top10-tab:hover { border-color:#c0212b; color:#fff; }
.ul-top10-tab.active { background:#c0212b; border-color:#c0212b; color:#fff; }

.ul-top10-list { display:flex; flex-direction:column; }
.ul-top10-item {
    display:flex; align-items:center; gap:12px; padding:10px 18px;
    border-bottom:1px solid #1c2028; cursor:pointer; transition:background .12s;
}
.ul-top10-item:last-child { border-bottom:none; }
.ul-top10-item:hover { background:#1a1f2b; }
.ul-top10-rank { width:32px; text-align:center; flex-shrink:0; }
.ul-top10-rank-icon { width:26px; height:26px; vertical-align:middle; }
.ul-top10-rank-icon.rank-1 { filter:sepia(1) saturate(4) hue-rotate(5deg) brightness(1.1); }
.ul-top10-rank-icon.rank-2 { filter:sepia(1) saturate(0) brightness(1.4); }
.ul-top10-rank-icon.rank-3 { filter:sepia(1) saturate(2) hue-rotate(340deg) brightness(.9); }
.ul-top10-rank-num { font-size:.85rem; font-weight:700; color:#555; }
.ul-top10-avatar { width:30px; height:30px; border-radius:4px; object-fit:cover; flex-shrink:0; }
.ul-top10-nick { color:#e0e0e0; font-weight:600; font-size:.9rem; flex:1; }
.ul-top10-val { color:#c0212b; font-weight:700; font-size:.9rem; flex-shrink:0; font-variant-numeric:tabular-nums; }

/* ── EVENT TILES ─────────────────────────────────────── */
.ul-modal-section-full { grid-column:1/-1; }
.ul-ev-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:8px;
}
.ul-ev-tile {
    background:#13161e; border:1px solid #252a34; border-radius:6px;
    padding:10px 6px 8px; display:flex; flex-direction:column; align-items:center;
    gap:5px; text-align:center; transition:border-color .15s;
}
.ul-ev-tile:hover { border-color:#c0212b40; }
.ul-ev-tile-icon { width:36px; height:36px; object-fit:contain; }
.ul-ev-tile-count { color:#c0212b; font-size:1rem; font-weight:700; line-height:1; }
.ul-ev-tile-name { color:#888; font-size:.65rem; letter-spacing:.3px; line-height:1.2; }

/* ── FAVOURITE EVENT ─────────────────────────────────── */
.ul-modal-fav { font-size:.78rem; color:#aaa; margin:2px 0 6px; }
.ul-modal-fav strong { color:#f0b429; }