html {
    font-size: 14px;
}

.raw-sash {
    position: absolute;
    top: 4px;
    left: -24px;
    width: 72px;
    background: #1a1a1a;
    color: #fff;
    font-size: 0.6em;
    font-weight: bold;
    text-align: center;
    padding: 1px 0;
    transform: rotate(-45deg);
    z-index: 0;
    letter-spacing: 1px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
    pointer-events: none;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

hr {
    margin: 0;
    height: 4px !important;
}

.container {
    max-width: 9999px;
}

/* ========================================= */
/* LAYERING FIX (The Sandwich)               */
/* ========================================= */
/* Lift the text so it sits on top of the Pulse and the Background */
.musician b, 
.musician i,
.musician font {
    position: relative;
    z-index: 2; 
}

/* ========================================= */
/* STANDARD ANIMATION (Small Breath)         */
/* ========================================= */
/* Used for Strangers and Hotties */
@keyframes gpuPulse {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05); /* 5% Growth */
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* ========================================= */
/* TIGHT BOLD SWELL (Friends)                */
/* ========================================= */
/* Fast, Intense, but controlled size */
@keyframes friendSwell {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        /* Medium expansion (15%) - tighter than before */
        transform: scale(1.15); 
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* ========================================= */
/* 1. STRANGERS (New Arrivals) - Electric Blue */
/* ========================================= */
.just-arrived {
    position: relative;
    z-index: 1; 
    font-weight: 500;
}

    .just-arrived::after {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        border-radius: 1rem;
        pointer-events: none;
        
        background-color: rgba(0, 191, 255, 0.15);
        box-shadow: 0 0 15px #00BFFF;
        
        z-index: -1; 
        
        opacity: 0;
        /* SLOW BREATH: 7s */
        animation: gpuPulse 7s infinite ease-in-out;
        will-change: opacity, transform;
    }

/* ========================================= */
/* 2. FRIENDS - Chartreuse (INTENSE/TIGHT)   */
/* ========================================= */
.friend-arrived {
    font-weight: bold !important;
    position: relative; 
    z-index: 1;
}

    .friend-arrived::after {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        border-radius: 1rem;
        pointer-events: none;

        /* ELECTRIC CHARTREUSE (More Yellow, Less Green) */
        /* High Opacity (0.45) for Intensity */
        background-color: rgba(223, 255, 0, 0.45) !important;
        
        /* TIGHTER SHADOW (25px) */
        box-shadow: 0 0 25px 5px #DFFF00 !important; 
        
        z-index: 0 !important; 

        opacity: 0;
        /* FAST: 6s */
        animation: friendSwell 6s infinite ease-in-out !important;
        will-change: opacity, transform;
    }


/* ========================================= */
/* 3. HOTTIES (Auto-Rec) - Green             */
/* ========================================= */
.hottie-arrived {
    font-weight: bold !important;
    border: 1px solid #2ecc71 !important; /* Emerald Green Border */
    position: relative;
    z-index: 1;
}

    .hottie-arrived::after {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        border-radius: 1rem;
        pointer-events: none;

        background-color: rgba(46, 204, 113, 0.15); /* Soft green fill */
        box-shadow: 0 0 10px #2ecc71; /* Green aura/glow */
        
        z-index: 0 !important; 

        opacity: 0;
        /* MEDIUM BREATH: 8s */
        animation: gpuPulse 8s infinite ease-in-out;
        will-change: opacity, transform;
    }

/* ========================================= */
/* DARK MODE OVERRIDES                       */
/* ========================================= */
body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}

body.dark-mode #nearbySection {
    background-color: #121212;
    border-top-color: #444;
}

body.dark-mode .grid > div {
    color: #e0e0e0;
}

body.dark-mode .grid > div.zone-E       { background: #1d3a26 !important; } /* Europe — dark forest green */
body.dark-mode .grid > div.zone-N       { background: #1a2d3d !important; } /* North America — dark slate blue */
body.dark-mode .grid > div.zone-A       { background: #3a3015 !important; } /* Asia — dark amber */
body.dark-mode .grid > div.zone-S       { background: #2d1f3d !important; } /* South America — dark plum */
body.dark-mode .grid > div.zone-default { background: #1a3035 !important; } /* Other — dark teal */

body.dark-mode .server-header {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

body.dark-mode .collapsible {
    background-color: #333;
    color: #ddd;
}

body.dark-mode .active, body.dark-mode .collapsible:hover {
    background-color: #444;
}

body.dark-mode .content {
    background-color: #1e1e1e;
    color: #ddd;
}

body.dark-mode .split-tab-container {
    background-color: #333;
}

body.dark-mode #btn-servers, body.dark-mode #btn-info {
    color: #ddd;
    border-right-color: #555;
}

body.dark-mode table th {
    background-color: #333;
    color: #ddd;
    border-color: #555;
}

body.dark-mode table td {
    color: #bbb;
    border-color: #555;
}

body.dark-mode a {
    color: #66b3ff;
}

/* ========================================= */
/* NEARBY ONLY LOGIC                         */
/* ========================================= */
#client-grid.nearby-only-active .distant-server:not(.my-active-server):not(.nearest-fallback) {
    display: none !important;
}
/* ========================================= */
/* ACTIVE ONLY LOGIC                         */
/* ========================================= */
#client-grid.active-only-active .quiet-server:not(.my-active-server) {
    display: none !important;
}
/* ========================================= */
/* VIDEO LINK                                */
/* ========================================= */
.video-link {
    cursor: default;
    text-decoration: none;
    color: inherit;
}
.my-active-server .video-link {
    cursor: pointer;
    text-decoration: underline;
    color: #0d6efd;
}