/* =====================================================================
   PlayServerList - authoritative server-card styles (rebuild 2026).
   External + cache-busted so it updates even when page HTML is cached.
   Selectors are prefixed with `body ` for higher specificity, so this
   sheet wins over any inline <style> baked into stale cached HTML.
   github.com/Yamiru
   ===================================================================== */

body .unified-server-card {
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid rgba(108, 92, 231, 0.14) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(26, 26, 46, 0.06) !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
body .unified-server-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px rgba(108, 92, 231, 0.18) !important;
    border-color: rgba(108, 92, 231, 0.40) !important;
}
body .unified-server-card.featured {
    border-color: rgba(245, 158, 11, 0.55) !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.16) !important;
}

body .unified-server-card .card-body {
    padding: 46px 16px 16px !important;
    background: transparent !important;
}

body .unified-server-card .featured-badge {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    background: linear-gradient(135deg, #F9A825, #FDCB6E) !important;
    color: #3a2c00 !important;
    padding: 4px 11px !important;
    border-radius: 999px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    z-index: 3 !important;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3) !important;
}

/* Status pill - top-left band, never overlaps the name */
body .unified-server-card .server-status {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 11px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    border: 1px solid transparent !important;
    margin: 0 !important;
    width: auto !important;
    z-index: 3 !important;
}
body .unified-server-card .server-status.online {
    background: rgba(34, 197, 94, 0.12) !important;
    color: #16a34a !important;
    border-color: rgba(34, 197, 94, 0.25) !important;
}
body .unified-server-card .server-status.offline {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #dc2626 !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
}
body .unified-server-card .server-status .status-dot {
    width: 8px !important; height: 8px !important;
    border-radius: 50% !important; display: inline-block !important;
}
body .unified-server-card .server-status.online .status-dot { background: #22c55e !important; }
body .unified-server-card .server-status.offline .status-dot { background: #ef4444 !important; }

/* Main row: icon + info + stats. Wraps so it can never clip/overflow. */
body .unified-server-card .server-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    row-gap: 12px !important;
    margin: 0 !important;
    text-align: left !important;
}
body .unified-server-card .server-icon-placeholder {
    flex: 0 0 auto !important;
    width: 46px !important; height: 46px !important;
    border-radius: 10px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    color: #fff !important;
    background: linear-gradient(135deg, #6C5CE7, #A29BFE) !important;
    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.25) !important;
}
body .unified-server-card[data-server-type="discord"] .server-icon-placeholder {
    background: linear-gradient(135deg, #5865f2, #4752c4) !important;
}
body .unified-server-card .server-icon-placeholder i { color: #fff !important; font-size: 20px !important; }
body .unified-server-card .server-icon {
    flex: 0 0 auto !important;
    width: 46px !important; height: 46px !important;
    border-radius: 10px !important; overflow: hidden !important;
    background: #EDE9E3 !important;
    border: 1px solid rgba(108, 92, 231, 0.18) !important;
}

body .unified-server-card .server-info { flex: 1 1 190px !important; min-width: 0 !important; }
body .unified-server-card .server-title {
    margin: 0 0 6px 0 !important;
    font-size: 1.02rem !important; font-weight: 700 !important; line-height: 1.25 !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
body .unified-server-card .server-title a { color: #1A1A2E !important; text-decoration: none !important; }
body .unified-server-card .server-title a:hover { color: #6C5CE7 !important; }
body .unified-server-card .server-type-badge {
    display: inline-block !important;
    background: rgba(108, 92, 231, 0.10) !important;
    color: #4834D4 !important;
    border: 1px solid rgba(108, 92, 231, 0.22) !important;
    padding: 3px 10px !important; border-radius: 999px !important;
    font-size: 0.68rem !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 0.03em !important;
}

/* Connection (IP / discord) */
body .unified-server-card .connection-info { margin-top: 8px !important; }
body .unified-server-card .discord-connection,
body .unified-server-card .game-connection {
    display: flex !important; align-items: center !important; gap: 8px !important;
    max-width: 100% !important;
    padding: 7px 12px !important; border-radius: 9px !important;
    font-family: ui-monospace, 'Courier New', monospace !important;
    font-size: 0.82rem !important; font-weight: 600 !important;
}
body .unified-server-card .game-connection {
    background: #EDE9E3 !important;
    border: 1px solid rgba(108, 92, 231, 0.18) !important;
    color: #4834D4 !important;
}
body .unified-server-card .discord-connection {
    background: rgba(88, 101, 242, 0.12) !important;
    border: 1px solid rgba(88, 101, 242, 0.30) !important;
    color: #4752c4 !important;
}
body .unified-server-card .game-connection i,
body .unified-server-card .discord-connection i { flex: 0 0 auto !important; }
body .unified-server-card .game-connection span,
body .unified-server-card .discord-connection a {
    flex: 1 1 auto !important; min-width: 0 !important;
    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
body .unified-server-card .discord-connection a { color: #4752c4 !important; text-decoration: none !important; }
body .unified-server-card .copy-btn {
    flex: 0 0 auto !important;
    background: rgba(108, 92, 231, 0.10) !important;
    border: 1px solid rgba(108, 92, 231, 0.20) !important;
    color: #6C5CE7 !important;
    cursor: pointer !important; padding: 4px 9px !important; border-radius: 7px !important;
    transition: background .2s ease !important;
}
body .unified-server-card .copy-btn:hover { background: rgba(108, 92, 231, 0.20) !important; }
body .unified-server-card .copy-btn.copied {
    background: rgba(34, 197, 94, 0.18) !important;
    border-color: rgba(34, 197, 94, 0.40) !important; color: #16a34a !important;
}

/* Stats + vote (right side on wide, wraps below on narrow) */
body .unified-server-card .server-stats {
    display: flex !important; align-items: center !important;
    gap: 10px !important; flex-wrap: wrap !important;
    margin: 0 0 0 auto !important;
}
body .unified-server-card .player-count,
body .unified-server-card .stat {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    font-size: 0.9rem !important; font-weight: 600 !important;
    color: #1A1A2E !important;
    background: rgba(108, 92, 231, 0.06) !important;
    border: 1px solid rgba(108, 92, 231, 0.12) !important;
    padding: 5px 10px !important; border-radius: 8px !important;
}
body .unified-server-card .player-count i,
body .unified-server-card .stat i { color: #6C5CE7 !important; }
body .unified-server-card .server-actions { display: inline-flex !important; margin: 0 !important; }
body .unified-server-card .server-actions .btn {
    white-space: nowrap !important;
    padding: 7px 16px !important; font-size: 0.82rem !important; font-weight: 600 !important;
    border-radius: 9px !important;
}
body .unified-server-card .server-actions .btn-success {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    border: none !important; color: #fff !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important;
}
body .unified-server-card .server-actions .btn-success:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4) !important;
}

/* Banner */
body .unified-server-card .card-body img { max-height: 28px !important; border-radius: 4px !important; }

/* Player bar */
body .unified-server-card .player-bar {
    margin-top: 12px !important; padding-top: 12px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}
body .unified-server-card .player-bar .progress {
    height: 6px !important; border-radius: 6px !important;
    background: rgba(108, 92, 231, 0.12) !important; overflow: hidden !important;
}
body .unified-server-card .player-bar .progress-bar { height: 100% !important; }

/* Mobile: icon + name on top row, stats + vote on their own row */
@media (max-width: 575px) {
    body .unified-server-card .card-body { padding: 42px 14px 14px !important; }
    body .unified-server-card .server-header { align-items: center !important; }
    body .unified-server-card .server-stats {
        flex: 1 1 100% !important;
        margin: 8px 0 0 0 !important;
        justify-content: flex-start !important;
    }
    body .unified-server-card .server-actions { margin-left: auto !important; }
}