html, body {
    max-width: 100%;
    overflow-x: hidden; /* Instantly kills any accidental horizontal scrolling */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #2d2d2e;
    color: #334155;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
	background-image: url('https://cdn.steamstatic.com/apps/dota2/images/dota_react//largo/largo_comic_cover.png'); 
    background-size: cover; 
    background-position: center;  
    background-repeat: no-repeat; 
    background-attachment: fixed;
}

header {
    background-color: #0f172a;
    color: white;
    text-align: center;
    padding: 1.5rem 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	position: relative;
}

main {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem;
}

.hero {
    text-align: center;
    padding: 2rem;
    background-color: #111e30;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    max-width: 650px;
    width: 100%;
}


.rotating-logo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
    
    animation: spin 6s linear infinite; 
}

/* The animation instructions */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

h2 {
    margin-bottom: 1.5rem;
    color: #d4d5d6;
}

/* Styles for your new image */
.hero-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
}

footer {
    text-align: center;
    padding: 1rem;
    background-color: #111e30;
    font-size: 0.875rem;
}

/* --- Modern Glassmorphism Stats Button --- */
.modern-stats-btn {
    position: absolute;
    left: 2rem; /* Keeps it perfectly spaced from the left edge */
    top: 50%;
    transform: translateY(-50%); /* Centers it perfectly vertically in the header */
    padding: 10px 24px;
    background: rgba(255, 255, 255, 0.05); /* Semi-transparent background */
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    border-radius: 30px; /* Modern pill shape */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle glowing border */
    backdrop-filter: blur(10px); /* The frosted glass effect */
    transition: all 0.3s ease;
}

.modern-stats-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* The transform below keeps it centered while making it pop slightly */
    transform: translateY(-50%) scale(1.05); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* --- Modern Glassmorphism Back Button --- */
.modern-back-btn {
    position: absolute;
    left: 2rem; /* Places it on the left side of the header */
    top: 50%;
    transform: translateY(-50%);
    padding: 10px 24px;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.modern-back-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.05); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* --- MULTI-COLUMN STEAM LIST LAYOUT --- */
#player-list {
    display: grid;
    /* Default to 1 column for mobile phones */
    grid-template-columns: 1fr; 
    gap: 5px;
    width: 100%;
}

/* Once the screen is wider than 600px (Tablets & Desktops), force exactly 2 columns */
@media (min-width: 600px) {
    #player-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.player-card {
    width: 100%;
    box-sizing: border-box;
    /* Your existing card styling */
    display: flex;
    align-items: center;
    background-color: #1a202f;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    position: relative;
}

.player-card img {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    margin-right: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.player-info h3 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
}

.player-info p {
    margin: 2px 0;
    font-size: 0.9rem;
}

.last-seen {
    color: #94a3b8;
    font-size: 0.8rem !important;
}

/* --- Floating Audio Button --- */
.audio-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    z-index: 1000; /* Keeps it on top of everything */
    transition: all 0.3s ease;
    pointer-events: auto !important; /* Ensures it's always clickable, even if it overlaps other elements */
}

.audio-button:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* --- THE LAYOUT WRAPPER --- */
.stats-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.steam-container {
    width: 100%;
    max-width: 650px; 
}

/* --- THE TEAMSPEAK WIDGET --- */
.ts-widget {
    background-color: #2b2d31; 
    border-radius: 12px;
    width: 340px;
    color: #dbdee1;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.ts-header {
    background-color: #1e1f22;
    padding: 16px;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 15px;
    border-bottom: 1px solid #111214;
    cursor: help;
    border-radius: 12px 12px 0 0;
}

.ts-header svg {
    margin-right: 10px;
    color: #00a8fc;
}

.ts-status {
    margin-left: auto;
    width: 10px;
    height: 10px;
    background-color: #23a559;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(35, 165, 89, 0.6);
}

.ts-content {
    padding: 12px;
}

.ts-loading {
    text-align: center;
    padding: 20px;
    color: #80848e;
}

.ts-channel-group {
    background-color: #1e1f22;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.02);
}

.ts-channel-title {
    padding: 10px 12px;
    font-weight: 600;
    font-size: 14px;
    color: #f2f3f5;
    display: flex;
    align-items: center;
    background-color: #1e1f22;
    border-radius: 8px 8px 0 0;
}

.ts-channel-icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    opacity: 0.7;
}

/* Adjusted to slide the name to the left since the avatar is gone */
.ts-user {
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px 12px 8px 16px; 
    transition: background 0.2s;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

/* Keeps the bottom of the channel boxes perfectly rounded */
.ts-user:last-child {
    border-radius: 0 0 8px 8px;
}

.ts-user:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Forces your uploaded channel icons to perfectly match TS sizes */
.ts-custom-channel-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border-radius: 2px;
    object-fit: contain;
}

.ts-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #4f545c;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    color: white;
}

.ts-username {
    font-size: 14px;
    color: #00a8fc; 
    font-weight: 500;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .stats-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
}

/* Server Stats Next to Green Dot */
.ts-status-container {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    cursor: help; /* Indicates there's more info on hover */
}

.ts-server-stats {
    font-size: 12px;
    color: #80848e;
    font-weight: 500;
}

/* User Badges (Mic Muted, Deafened, AFK) */
.ts-badges {
    margin-left: auto; /* Pushes the icons all the way to the right */
    display: flex;
    align-items: center;
    gap: 8px;
}

.ts-icon-muted {
    width: 16px;
    height: 16px;
    color: #da373c; /* Discord/TS Red for Muted */
}

.ts-afk-tag {
    background-color: rgba(255, 255, 255, 0.1);
    color: #dbdee1;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Fade out users who are AFK, but DO NOT fade the hover tooltip! */
.ts-user-afk > *:not(.ts-tooltip) {
    opacity: 0.5;
}

/* --- MODERN HOVER TOOLTIP (UNIFIED) --- */
.ts-tooltip, .ts-server-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%; /* Forces ALL tooltips to drop downwards */
    right: 15px; /* Aligns them all perfectly to the right side */
    left: auto; /* Clears the old left-alignments */
    margin-top: 5px; /* Adds a clean gap below the hovered card */
    background: rgba(20, 21, 24, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #dbdee1;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    z-index: 1000; /* Ensures tooltips never get hidden behind other cards */
    text-align: right; /* Aligns the text cleanly to the right */
    transform: translateY(-8px); /* Starts slightly higher for the drop animation */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}

/* Trigger the animation for ALL elements (TeamSpeak Users, Steam Cards, and the Server Header) */
.ts-user:hover .ts-tooltip,
.player-card:hover .ts-tooltip,
.ts-header:hover .ts-server-tooltip,
.ts-header:hover .ts-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateY(0px);
}

/* --- DOTA VOTE BUTTONS --- */
.vote-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s ease;
    filter: grayscale(100%); /* Makes unselected emojis look dull */
    opacity: 0.6;
}

.vote-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    opacity: 1;
}

/* This triggers when the button is clicked! */
.active-vote {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.2);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

/* --- DOTA CHART CONTAINER --- */
.chart-container {
    position: relative;
    height: 400px; /* Forces a good height so it doesn't get squished */
    width: 100%;
    margin-top: 20px;
}

/* --- LOCK IN VOTES BUTTON --- */
.lock-votes-btn {
    width: 100%;
    margin-top: 20px;
    padding: 12px;
    background: linear-gradient(135deg, #2563eb, #1e40af); /* Vibrant blue gradient */
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.lock-votes-btn:hover {
    background: linear-gradient(135deg, #3b82f6, #2563eb); /* Lighter blue on hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(37, 99, 235, 0.4); /* Blue glowing shadow */
}

.lock-votes-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* --- RESPONSIVE DOTA STATS --- */
.desktop-extra-stats {
    display: flex;
    gap: 12px;
    margin-left: 12px;
}

/* If the screen is smaller than 600px (Mobile Phones) */
@media (max-width: 600px) {
    .desktop-extra-stats {
        display: none !important; /* Hides inline stats to save space */
    }
}

/* --- ADVANCED DOTA TOOLTIP (Works on PC & Mobile) --- */
.player-row-hover {
    position: relative;
    cursor: help;
}

.advanced-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    left: 0; 
    margin-bottom: 8px;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.8);
    z-index: 1000;
    pointer-events: none;
    transition: all 0.2s ease;
    min-width: 260px;
    transform: translateY(10px);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.85rem;
}

.player-row-hover:hover .advanced-tooltip,
.player-row-hover:active .advanced-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* Force tooltip to center itself perfectly on tiny mobile screens */
@media (max-width: 600px) {
    .advanced-tooltip {
        left: 50%;
        transform: translate(-50%, 10px);
        width: 85vw;
        min-width: auto;
    }
    .player-row-hover:hover .advanced-tooltip,
    .player-row-hover:active .advanced-tooltip {
        transform: translate(-50%, 0);
    }
}

/* --- PERCENTAGE INFO TOOLTIP --- */
.info-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help; /* Turns the mouse into a question mark! */
    margin-left: 6px;
}

.info-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 5px);
    margin-bottom: 8px;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #f8fafc;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    transition: all 0.2s ease;
    z-index: 100;
    pointer-events: none;
    font-weight: normal;
    text-align: center;
    line-height: 1.4;
}

/* Triggers on mouse hover (Desktop) and tap (Mobile) */
.info-icon-wrapper:hover .info-tooltip,
.info-icon-wrapper:active .info-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
}

/* --- RESPONSIVE IMAGE FEED GRID (Desktops vs Mobile) --- */
#image-feed {
    display: grid !important; /* Force grid layout */
    gap: 20px;
    grid-template-columns: 1fr; /* Default: 1 column for mobile */
    flex-direction: unset !important; /* Kill the old flex layout */
}

/* For screens larger than tablets (Desktop) */
@media (min-width: 768px) {
    #image-feed {
        /* Put up to 3 smaller images side-by-side in each row */
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    }
}

/* The card that holds the image and its comment */
.feed-card {
    position: relative;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    overflow: hidden;
    cursor: pointer; /* Shows you can click it to enlarge */
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 12px 10px 12px; /* Extra top padding for a smooth fade */
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-sizing: border-box;
    pointer-events: none; /* Lets you click the image behind the gradient */
}

/* Re-enable clicking for just the text and buttons */
.card-overlay > * { pointer-events: auto; }

/* --- NEW: Floating Time Badge --- */
.card-time {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.65);
    color: #e2e8f0;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: bold;
    backdrop-filter: blur(4px);
    pointer-events: none; /* So it doesn't block clicks */
    z-index: 10;
}

.feed-card:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(37, 99, 235, 0.5); /* Blue glow on hover */
}

.feed-card img {
    width: 100%;
    aspect-ratio: 3 / 4; /* NEW: Forces a vertical, portrait shape! */
    object-fit: cover; /* Crops the image perfectly to fit the square */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.feed-card video {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    background: #000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- THE IMAGE MODAL (Full Screen Viewing) --- */
.image-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 99999; /* Higher than audio button! */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9); /* Pure black background overlay */
    backdrop-filter: blur(5px); /* Modern blur effect */
    cursor: pointer; /* Click anywhere on the overlay to close it */
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Perfectly centered */
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

/* --- NEW: Wraps the image so buttons can float on it --- */
.image-wrapper {
    position: relative;
    width: 100%;
    line-height: 0; /* Prevents a tiny gap between the image and the text box */
}

/* --- UPDATED: Hovers directly over the bottom of the photo --- */
.reactions-wrapper {
    position: absolute;
    bottom: 8px; 
    left: 8px;
    right: 8px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between; /* Pushes the + and Trash apart */
    padding: 0; 
    background: transparent;
    /* backdrop-filter: blur(4px); */
    border: none;
    pointer-events: none; /* Lets you click the image in the empty space */
    z-index: 10;
}

.reactions-wrapper > * {
    pointer-events: auto; /* Re-enables clicking for the actual buttons */
}

/* Groups the emojis and the + button on the left */
.reactions-left {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* NEW: The Emoji+ Button */
.add-reaction-btn {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 14px;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.add-reaction-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    color: white;
}

.delete-btn {
    margin-left: auto; /* Pushes the trash can to the far right edge! */
    background: rgba(0, 0, 0, 0);
    color: rgba(255, 255, 255, 0.6);
    border: none;
    border-radius: 4px;
    padding: 4px 7px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.delete-btn:hover {
    background: rgba(220, 38, 38, 0.8);
    color: white;
}


.card-comment {
    padding: 12px;
    color: #f8fafc;
    font-size: 14px;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8); /* Ensures text is readable anywhere */
    text-align: center;
    background: rgba(17, 30, 48, 0.6); /* Creates a clean dark box below the photo */
}


.reactions-container {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.reaction-btn {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
/*    background: rgba(255, 255, 255, 0.05); */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px; /* Slightly squarer like Discord */
    padding: 4px 6px;
    font-size: 14px;
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.reaction-btn:hover { background: rgba(255, 255, 255, 0.15); }
.reaction-btn.reacted {
    background: rgba(59, 130, 246, 0.3);
    border-color: #3b82f6;
    color: white;
}

/* NEW: Hide the pill if nobody has clicked it yet! */
.reaction-btn.hidden { display: none; }

/* NEW: The Popup Menu */
.reaction-picker {
    position: absolute;
    bottom: 35px; /* Pops up right above the bar */
    left: 0;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px;
    display: none; /* Hidden by default */
    gap: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    z-index: 20;
}

.reaction-picker.show { display: flex; }

.picker-emoji {
    cursor: pointer;
    font-size: 16px;
    padding: 2px 4px;
    border-radius: 4px;
    transition: transform 0.1s, background 0.2s;
}

.picker-emoji:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

/* --- MODERN FLOATING NAVBAR --- */
.modern-navbar {
    display: flex;
    justify-content: center;
    gap: 5px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 8px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.nav-link {
    color: #94a3b8;
    text-decoration: none;
    padding: 8px 24px;
    border-radius: 40px;
    font-weight: bold;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.nav-link.active {
    color: #ffffff;
    background: #2563eb;
    box-shadow: 0 0 15px rgba(37, 99, 235, 0.4);
}

/* Hide basic stats inside the tooltip on Desktop */
.mobile-basic-stats {
    display: none;
}

/* Force tooltip to anchor cleanly on tiny mobile screens */
@media (max-width: 600px) {
    .mobile-basic-stats {
        display: block; /* Reveal the KDA/GPM row on Mobile! */
    }
    
    .advanced-tooltip {
        left: 0; /* Anchors firmly to the left edge of the name */
        transform: translateY(10px); /* Removes the horizontal shift that broke the screen */
        width: max-content; 
        max-width: calc(100vw - 40px); /* Prevents it from bleeding off the right side */
        min-width: auto;
    }
    
    .player-row-hover:hover .advanced-tooltip,
    .player-row-hover:active .advanced-tooltip {
        transform: translateY(0); /* Clean vertical slide up */
    }
}

.join-ts-btn {
    background-color: rgba(59, 130, 246, 0.2); /* Transparent blue */
    color: #60a5fa; /* Light blue text */
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 3px 10px;
    border: 1px solid rgba(59, 130, 246, 0.5);
    border-radius: 12px; /* Pill shape */
    transition: all 0.2s ease;
}

.join-ts-btn:hover {
    background-color: #3b82f6; /* Solid blue on hover */
    color: white;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); /* Nice subtle glow */
}

/* --- CAROUSEL WIDGET STYLES --- */
.carousel-container {
    position: relative;
    width: 100%;
    min-height: 180px; 
    overflow: visible; /* Changed from hidden so tooltips can escape! */
    border-radius: 8px;
}

.carousel-slide {
    display: none;
    animation: fadeIn 0.4s ease-in-out;
}

.carousel-slide.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.carousel-arrow {
    position: absolute;
    top: 40%; /* Slightly above center to make room for dots */
    transform: translateY(-50%);
    background: rgba(15, 23, 42, 0.8);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
    opacity: 0; /* Hidden until hover */
    z-index: 10;
}

/* Show arrows when hovering over the widget */
.carousel-container:hover .carousel-arrow { opacity: 1; }
.carousel-arrow:hover { background: #2563eb; transform: translateY(-50%) scale(1.1); }
.carousel-arrow.left { left: 5px; }
.carousel-arrow.right { right: 5px; }

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 15px;
}

.dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active { background: #3b82f6; box-shadow: 0 0 8px rgba(59, 130, 246, 0.8); transform: scale(1.2); }
.dot:hover:not(.active) { background: rgba(255, 255, 255, 0.5); }

/* --- CLICKABLE PLAYER PROFILES --- */
.clickable-profile-name:hover {
    color: #60a5fa !important;
    text-decoration-color: #60a5fa !important;
}

/* --- PROFILE MODAL CLOSE BUTTON --- */
.close-profile-btn {
    position: absolute;
    top: 12px;
    right: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    font-size: 26px;
    line-height: 1;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 100;
}

.close-profile-btn:hover, .close-profile-btn:active {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border-color: #ef4444;
}

@media (max-width: 768px) {
    .desktop-hero-icon {
        display: none !important;
    }
}

/* Show inline stats and hide hover tooltip on Desktop */
@media (min-width: 769px) {
    .desktop-inline-stats { 
        display: flex !important; 
    }
    .mobile-match-tooltip { 
        display: none !important; 
    }
}

/* Keep the original hover tooltip on Mobile */
@media (max-width: 768px) {
    .desktop-inline-stats { 
        display: none !important; 
    }
    .mobile-match-tooltip { 
        display: block; 
    }
}
/* Monthly battle reports */
.battle-report-launcher{position:relative;display:grid;grid-template-columns:minmax(240px,1fr) minmax(320px,1.4fr);gap:24px;padding:26px!important;overflow:hidden;background:linear-gradient(120deg,#302719,#0f172a 55%,#152231)!important;border:1px solid rgba(210,175,85,.45)!important}.battle-report-launcher:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 0,rgba(210,175,85,.14),transparent 38%);pointer-events:none}.battle-report-launcher>*{position:relative}.battle-report-eyebrow,.br-kicker{color:#cfb562;text-transform:uppercase;letter-spacing:.18em;font-weight:800;font-size:.74rem}.battle-report-launcher h2{margin:6px 0;color:#f4f1e9;font:700 2rem Georgia,serif}.battle-report-launcher p{color:#aeb5bc;margin:0;line-height:1.55}.battle-report-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:center}.battle-report-picker label{color:#aeb5bc;font-size:.73rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700}.battle-report-picker select{width:100%;margin-top:6px;padding:11px;color:#f4f1e9;background:#161d25;border:1px solid #47515c;border-radius:4px}.battle-report-picker button{grid-column:1/-1;padding:12px;color:#17150d;background:linear-gradient(#d8c158,#a88728);border:1px solid #decf80;font-weight:900;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.battle-report-picker button:disabled{opacity:.45;cursor:wait}.battle-report-availability{grid-column:1/-1;font-size:.8rem}.battle-report-launch-button{padding:7px 10px;border:1px solid rgba(210,175,85,.65);border-radius:6px;background:linear-gradient(145deg,#665522,#332c1b);color:#f7e8ad;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;white-space:nowrap}.battle-report-launch-button:hover:not(:disabled){border-color:#e0c968;background:linear-gradient(145deg,#7a6728,#403720)}.battle-report-launch-button:disabled{opacity:.5;cursor:wait}.battle-report-topbar-picker{display:grid;grid-template-columns:1fr;gap:4px;min-width:180px}.battle-report-topbar-picker select{min-width:0;padding:5px 7px;border:1px solid #655a3d;border-radius:3px;background:#171b1e;color:#e8e4d8;font-size:.72rem}body.battle-report-open{overflow:hidden}.battle-report-modal[hidden]{display:none}.battle-report-modal{position:fixed;inset:0;z-index:100000;background:#10161c;color:#e7e9ec}.battle-report-app{height:100%;display:grid;grid-template-rows:auto 1fr auto;background:radial-gradient(circle at 50% -20%,#473b22,transparent 42%),linear-gradient(#181b1d,#10171e)}.battle-report-topbar{display:grid;grid-template-columns:190px 1fr 150px;align-items:center;gap:16px;min-height:70px;padding:0 4vw;background:rgba(42,36,25,.95);border-top:2px solid #ad8b2a;border-bottom:1px solid rgba(210,175,85,.2)}.battle-report-close,.battle-report-topbar nav button,.battle-report-footer button,.br-segmented button{border:0;background:transparent;color:#aeb2b5;cursor:pointer;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.battle-report-close{text-align:left}.battle-report-topbar nav{display:flex;justify-content:center;align-self:stretch;overflow-x:auto}.battle-report-topbar nav button{padding:0 16px;white-space:nowrap;border-bottom:2px solid transparent}.battle-report-topbar nav button.active{color:#fff;border-color:#c9a83c}#battle-report-period{text-align:right;color:#c6ad61;font-weight:700}.battle-report-content{overflow:auto;padding:40px 5vw;outline:none}.br-page{width:min(1180px,100%);margin:auto;animation:brReveal .35s ease-out}.br-page>h1{margin:8px 0 4px;color:#e9ecf4;font:700 clamp(2.2rem,5vw,4rem) Georgia,serif;text-align:center;text-transform:uppercase}.br-page>.br-kicker,.br-page>.br-lead{display:block;text-align:center}.br-lead{margin:0 auto 32px;color:#9ca49d;font-size:1.05rem}.br-scoreboard{display:grid;grid-template-columns:repeat(4,1fr);margin:34px auto;background:rgba(19,24,29,.85);border:1px solid #4a4435}.br-scoreboard>div{display:flex;justify-content:center;align-items:baseline;gap:7px;padding:20px;border-right:1px solid #3c3c38}.br-scoreboard>div:last-child{border:0}.br-scoreboard span,.br-metric span,.br-highlight span,.br-summary-grid span{color:#a69e82;text-transform:uppercase;letter-spacing:.09em;font-size:.72rem;font-weight:800}.br-scoreboard strong{font:700 2rem Georgia,serif}.br-scoreboard i{font-style:normal;color:#687078}.positive{color:#72c681!important}.negative{color:#ed6a61!important}.br-overview-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:18px}.br-feature-visual{min-height:330px;display:flex;align-items:flex-end;padding:30px;background-image:linear-gradient(90deg,rgba(8,13,17,.15),rgba(8,13,17,.95)),var(--hero-image);background-size:cover;background-position:center;border-top:2px solid #c8aa4a;box-sizing:border-box}.br-feature-visual span,.br-role-teaser>span{color:#c8aa4a;text-transform:uppercase;letter-spacing:.12em;font-weight:800}.br-feature-visual h2,.br-role-teaser h2{margin:5px 0;color:#f3f1ec;font:700 clamp(2rem,4vw,3.4rem) Georgia,serif;text-transform:uppercase}.br-role-teaser{padding:30px;text-align:center;background:linear-gradient(145deg,#272820,#111820);border-top:2px solid #c8aa4a}.br-ring{--pct:50;width:130px;aspect-ratio:1;margin:24px auto;border-radius:50%;display:grid;place-content:center;background:radial-gradient(circle closest-side,#171c20 78%,transparent 80%),conic-gradient(#d0af48 calc(var(--pct)*1%),#34383b 0)}.br-ring strong{font-size:2.2rem}.br-ring small{color:#969c9d}.br-analysis-cards,.br-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.br-rank-card{display:flex;align-items:center;gap:12px;background:#1b2023;border:1px solid #3b3c37;padding:12px}.br-rank-card>span{color:#c8aa4a;font-weight:900}.br-rank-card img{width:72px;height:42px;object-fit:cover}.br-rank-card div{display:grid}.br-rank-card small{color:#9ca4aa}.br-role-layout{display:grid;grid-template-columns:280px 1fr;gap:30px;margin-top:45px;align-items:center}.br-role-emblem{width:220px;aspect-ratio:1;display:grid;place-content:center;margin:auto;border-radius:50%;color:#f6e9b5;font:700 7rem Georgia,serif;background:radial-gradient(circle,#795e21,#211d15 68%);border:4px double #caa83d}.br-stat-grid article{display:grid;gap:5px;padding:20px;background:#1b2023;border-top:2px solid #8c7b49}.br-stat-grid span{color:#a69e82;text-transform:uppercase}.br-stat-grid strong{font-size:2rem}.br-stat-grid small{color:#aeb4b8}.br-metric-grid,.br-highlight-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}.br-metric,.br-highlight{min-height:120px;display:grid;align-content:center;gap:8px;padding:22px;background:linear-gradient(145deg,#24251f,#141a20);border-top:2px solid #b79b42}.br-metric strong,.br-highlight strong{font:700 2rem Georgia,serif}.br-metric small,.br-highlight small{color:#92999e}.br-trends{margin:30px 0;padding:22px;background:#171d22;border:1px solid #3b403e}.br-trends h2{margin:0 0 20px;color:#d7c37a}.br-chart{height:180px;display:flex;align-items:flex-end;gap:8px;border-bottom:1px solid #555}.br-chart-column{flex:1;min-width:20px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px}.br-chart-bar{width:100%;max-width:48px;min-height:3px;background:linear-gradient(#d5b950,#79601e)}.br-chart-column small{font-size:.65rem;color:#8f979c}.br-chart-column span{font-size:.7rem;color:#d8dadd}.br-side-card{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;text-align:center;margin:30px 0 18px;padding:22px;border:1px solid #494635;background:#1a1f21}.br-side-card div:not(.br-versus){display:grid}.br-side-card span{color:#c9ad55;text-transform:uppercase}.br-side-card strong{font:700 2.8rem Georgia,serif}.br-side-card small{color:#939b9f}.br-versus{color:#73797d;font-weight:900}.br-segmented{width:min(500px,100%);margin:24px auto;display:grid;grid-template-columns:repeat(3,1fr);background:#151a1f;border-radius:30px;padding:4px}.br-segmented button{padding:10px;border-radius:24px}.br-segmented button.active{color:#f5edca;background:#5a4b28}.br-filter{display:flex;justify-content:flex-end;margin:0 0 12px}.br-filter input{width:min(300px,100%);padding:10px;color:#eee;background:#141a1f;border:1px solid #4b5257;border-radius:4px}.br-table-wrap{overflow:auto;max-height:55vh;border:1px solid #3a3e3f}.br-table-wrap table{width:100%;min-width:780px;border-collapse:collapse;background:rgba(22,27,31,.95)}.br-table-wrap th{position:sticky;top:0;background:#4a3c22;text-align:left}.br-table-wrap th button{width:100%;padding:13px;border:0;background:none;color:#d8d6ce;text-align:left;text-transform:uppercase;font-size:.72rem;font-weight:900;cursor:pointer}.br-table-wrap td{padding:12px 13px;border-bottom:1px solid #303437;color:#bdc3c7}.br-table-wrap tr:hover td{background:#24292b}.br-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:45px}.br-summary-grid article{min-height:220px;display:grid;place-items:center;align-content:center;gap:8px;text-align:center;background:linear-gradient(#292921,#151b21);border-top:2px solid #a98b36}.br-summary-grid img{width:130px;height:74px;object-fit:cover}.br-summary-grid strong{font:700 1.45rem Georgia,serif;text-transform:uppercase}.br-summary-grid small{color:#9ba1a3}.br-summary-role,.br-summary-mark{width:80px;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;color:#f6e9b5;font:700 2.5rem Georgia,serif;background:#5b4920;border:2px solid #c4a33e}.br-vote-summary{display:flex;justify-content:center;gap:16px;align-items:baseline;margin-top:32px;color:#e1d5a9}.br-vote-summary span{text-transform:uppercase;letter-spacing:.12em}.br-vote-summary i{color:#666}.battle-report-footer{display:grid;grid-template-columns:180px 1fr 180px;gap:20px;align-items:center;padding:14px max(4vw,20px);background:#181d21;border-top:1px solid #2d3337}.battle-report-footer button{padding:12px;border:1px solid #555b5f;color:#eee;background:#282e32}.battle-report-footer button:last-child{background:linear-gradient(#d5bd53,#9b7921);color:#17150d;border-color:#cfb149}.battle-report-footer button:disabled{opacity:.3}.battle-report-footer span{text-align:center;color:#898f93}.battle-report-loading,.battle-report-error,.br-empty{display:grid;place-content:center;min-height:50vh;text-align:center;color:#aeb5ba}.battle-report-error strong{color:#ed6a61;font-size:1.4rem}@keyframes brReveal{from{opacity:0;transform:translateY(10px)}}
@media(max-width:900px){.battle-report-topbar{grid-template-columns:1fr auto;padding:10px 18px}.battle-report-topbar nav{grid-row:2;grid-column:1/-1;justify-content:flex-start}.battle-report-topbar nav button{min-height:42px}.br-metric-grid,.br-highlight-grid{grid-template-columns:repeat(2,1fr)}.br-overview-grid,.br-role-layout{grid-template-columns:1fr}.br-role-emblem{width:150px}.br-analysis-cards,.br-stat-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.battle-report-launcher,.battle-report-picker{grid-template-columns:1fr}.battle-report-picker button{grid-column:auto}.battle-report-topbar{grid-template-columns:1fr}.battle-report-close,#battle-report-period{text-align:center}.battle-report-topbar-picker{width:100%}.battle-report-topbar nav{grid-row:auto;grid-column:auto}.battle-report-content{padding:24px 14px}.br-scoreboard{grid-template-columns:repeat(2,1fr)}.br-scoreboard>div:nth-child(2){border-right:0}.br-metric-grid,.br-highlight-grid,.br-summary-grid,.br-analysis-cards,.br-stat-grid{grid-template-columns:1fr}.br-feature-visual{min-height:260px}.battle-report-footer{grid-template-columns:1fr 50px 1fr;padding:10px}.br-vote-summary{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){.br-page{animation:none}}