/* CSS Styling inspired by your game cards */
        :root {
            --primary-color: #00ffff; /* Neon Blue para sa text highlights at buttons */
            --secondary-color: #00ff90; /* Retained orange/yellow for contrast */
            --background-color: #3e3e3e; /* Dark Gray na main background */
            --text-color: #ffffff; /* White text para madaling basahin */
            --card-bg: #3e3e3e; /* Slightly lighter gray para umangat ang cards sa background */
            --border-color: #00ffff; /* Neon Blue para sa lahat ng lines at borders */
            --header-bg: #3e3e3e; /* Dark header background */
            --header-border: #000000; /* Neon Blue na line sa header */
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--background-color);
            color: var(--text-color);
            margin: 0;
            padding: 0;
            line-height: 1.6;
            scroll-behavior: smooth;
            padding-bottom: 60px; /* Add padding to prevent content from being hidden by the fixed panel */
        }

        header {
            background-color: var(--header-bg);
            padding: 2rem;
            color: var(--text-color);
            text-align: center;
            border-bottom: 2px solid var(--primary-color);
            position: relative;
        }
        
        header h1 {
            font-size: 2.5rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin: 0;
            text-shadow: 0 0 10px rgba(0, 230, 118, 0.5);
        }

        nav {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            background-color: var(--header-bg);
            padding: 0.5rem;
            border-bottom: 2px solid var(--secondary-color);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        nav a {
            color: var(--text-color);
            text-decoration: none;
            padding: 0.75rem 1.5rem;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: background-color 0.3s ease, color 0.3s ease;
            border-radius: 4px;
            cursor: pointer;
        }

        nav a:hover {
            background-color: var(--primary-color);
            color: var(--background-color);
        }

        /* Specific style for the logged-in player link to make it stand out slightly */
        #nav-player-link i, #nav-admin-link i {
            margin-right: 0.5rem;
        }
        
        #nav-admin-link {
            color: var(--secondary-color);
            display: none; /* Hidden by default */
        }

        main {
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        section {
            background-color: var(--card-bg);
            padding: 2rem;
            border-radius: 8px;
            margin-bottom: 2rem;
            border: 1px solid var(--border-color);
        }
        
        h2 {
            color: var(--primary-color);
            text-align: center;
            border-bottom: 2px solid var(--secondary-color);
            padding-bottom: 0.5rem;
            margin-top: 0;
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }
        
        h3 {
            color: var(--secondary-color);
            margin-top: 0;
            text-align: left;
        }
        
        ul {
            list-style: none;
            padding-left: 0;
        }

        .card-container {
            display: grid;
            gap: 1.5rem;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }
        
        .card-item {
            background-color: var(--background-color);
            padding: 1rem;
            border-radius: 6px;
            border: 1px solid var(--border-color);
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
            text-align: center;
            cursor: pointer; /* Makes cards clickable */
            position: relative;
        }
        
        .card-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
        }
        
        .card-item img {
            max-width: 100%;
            height: auto;
            border-radius: 4px;
            border: 2px solid var(--primary-color);
            max-height: 250px;
            object-fit: contain;
            background-color: #000;
        }
        
        .card-details {
            text-align: left;
            margin-top: 1rem;
            font-size: 0.9rem;
        }

        .news-date {
            font-size: 0.8rem;
            color: #aaa;
            margin-bottom: 1rem;
            display: block;
        }

        /* --- Updated Leaderboard Styling --- */
        .ranking-table-container {
            width: 100%;
            overflow-x: hidden; /* Pinatay ang horizontal scroll */
            margin-top: 1.5rem;
            border-radius: 8px;
            background-color: var(--background-color);
            border: 1px solid var(--border-color);
        }

        .leaderboard {
            width: 100%;
            border-collapse: collapse;
            /* Tinanggal ang min-width para sumakto sa screen */
        }

        .leaderboard th, .leaderboard td {
            padding: 0.5rem; 
            border-bottom: 1px solid var(--border-color);
            text-align: center;
            word-wrap: break-word; 
            font-size: 0.85rem; 
        }

        .leaderboard th {
            background-color: var(--primary-color);
            color: var(--background-color);
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: bold;
            position: sticky;
            top: 0;
        }

        .leaderboard tr:nth-child(even) { background-color: #1a1a1a; }
        .leaderboard tr:hover { background-color: #2a2a2a; }
        .leaderboard td:first-child { font-weight: bold; color: var(--secondary-color); }
        .leaderboard th:nth-child(1), .leaderboard td:nth-child(1),
        .leaderboard th:nth-child(2), .leaderboard td:nth-child(2) {
            width: 10%; /* Liliitan ang Rank columns */
            white-space: nowrap; /* Pipigilan bumaba ang number rank */
        }

        .leaderboard th:nth-child(4), .leaderboard td:nth-child(4) {
            width: 20%; /* Lalaparan ang Player Name column */
        }
        

        .video-responsive {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            height: 0;
            overflow: hidden;
            max-width: 100%;
            background: var(--background-color);
            margin: 1rem auto;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
        }

        .video-responsive iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        .market-item .buy-button {
            background-color: var(--primary-color);
            color: var(--background-color);
            padding: 0.75rem 1.5rem;
            border-radius: 4px;
            text-decoration: none;
            font-weight: bold;
            text-transform: uppercase;
            display: block;
            margin-top: 1rem;
            transition: background-color 0.3s ease;
        }

        .market-item .buy-button:hover { background-color: #00c853; }

        /* Lock-in social media panel */
        .social-panel {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: var(--header-bg);
            border-top: 2px solid var(--primary-color);
            display: flex;
            justify-content: center;
            padding: 1rem 0;
            z-index: 1000;
            box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.5);
        }

        .social-panel a {
            color: var(--text-color);
            font-size: 1.5rem;
            margin: 0 1rem;
            transition: color 0.3s ease, transform 0.3s ease;
        }

        .social-panel a:hover {
            color: var(--primary-color);
            transform: scale(1.2);
        }

        footer {
            text-align: center;
            padding: 1rem;
            background-color: var(--header-bg);
            color: var(--text-color);
            margin-top: 2rem;
            border-top: 2px solid var(--primary-color);
        }
        
        .card-section-group {
            border-top: 2px solid var(--border-color);
            margin-top: 2rem;
            padding-top: 2rem;
        }
        
        /* New styles for the picture buttons */
        .featured-buttons {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-top: 2rem;
        }
        
        .featured-buttons a {
            display: block;
            text-decoration: none;
            color: var(--text-color);
            text-align: center;
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .featured-buttons a:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7);
        }
        
        .featured-buttons img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 8px;
            border: 2px solid var(--primary-color);
        }
        
        .featured-buttons .button-label {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 0.5rem;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .news-details { text-align: left; }
        .news-details h3 { border-bottom: 2px solid var(--secondary-color); padding-bottom: 0.5rem; }

        .back-button {
            display: inline-block;
            background-color: var(--secondary-color);
            color: var(--background-color);
            padding: 0.75rem 1.5rem;
            border-radius: 4px;
            text-decoration: none;
            font-weight: bold;
            text-transform: uppercase;
            margin-top: 1rem;
            transition: background-color 0.3s ease;
        }

        .back-button:hover { background-color: #ffb300; }

        .latest-news-card {
            background-color: var(--background-color);
            border: 2px solid var(--primary-color);
        }

        .latest-news-card .read-more {
            display: block;
            margin-top: 1rem;
            color: var(--primary-color);
            font-weight: bold;
            text-decoration: none;
            text-align: center;
        }
        
        .ranking-tabs {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 2rem;
        }

        .ranking-tabs button {
            background-color: #2c2c2c;
            color: var(--text-color);
            border: none;
            padding: 0.75rem 1.5rem;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            transition: color 0.3s ease, background-color 0.3s ease;
            border-radius: 9999px;
        }

        .ranking-tabs button.active {
            background-color: var(--primary-color);
            color: var(--background-color);
        }

        .ranking-tabs button:not(.active):hover { background-color: #4a4a4a; }

        /* Folder Style Tabs for Card Database */
        .folder-tabs {
            display: flex;
            align-items: flex-end;
            border-bottom: 2px solid var(--primary-color);
            margin-bottom: 1rem;
            gap: 2px;
            flex-wrap: nowrap;
        }

        .folder-tabs button { flex: 1 1 0; min-width: 0;
            background-color: #2c2c2c;	
            color: var(--text-color);
            border: 1px solid var(--border-color);
            border-bottom: none;
            padding: 0.6rem 0.4rem;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            cursor: pointer;
            border-radius: 8px 8px 0 0;
            transition: background-color 0.2s, color 0.2s, padding 0.2s;
            white-space: nowrap;
        }

        .folder-tabs button.active { 
            background-color: var(--primary-color);
            color: var(--background-color);
            border-color: var(--primary-color);
            padding-top: 1rem;
            padding-bottom: 0.5rem;
            margin-bottom: -1px;
        }

        .folder-tabs button:not(.active):hover {
            background-color: #4a4a4a;
        }

        .ranking-content { display: none; }
        .ranking-content.active { display: block; }
        
        .player-name-link {
            text-decoration: underline;
            color: var(--secondary-color);
            cursor: pointer;
        }
        
        .modal {
            display: none;
            position: fixed;
            z-index: 1001;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.8);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background-color: var(--card-bg);
            padding: 2rem;
            border-radius: 8px;
            width: 90%;
            max-width: 400px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
            position: relative;
            max-height: 90vh;
            overflow-y: auto;
        }
        .modal-close {
            position: absolute;
            top: 10px;
            right: 20px;
            color: var(--text-color);
            font-size: 2rem;
            font-weight: bold;
            cursor: pointer;
            z-index: 10;
        }
        
        .step-by-step-container {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }
        .gameplay-step {
            background-color: var(--background-color);
            padding: 1.5rem;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
            text-align: left;
        }
        .gameplay-step h3 {
            color: var(--secondary-color);
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 0.5rem;
            margin-top: 0;
        }
        .gameplay-step h4 {
            color: var(--primary-color);
            margin-bottom: 0.5rem;
            margin-top: 1.5rem;
        }
        .gameplay-step ul {
            list-style: disc;
            padding-left: 1.5rem;
            margin-top: 0.5rem;
        }
        .gameplay-step li { margin-bottom: 0.5rem; }
        .gameplay-step strong { color: var(--primary-color); }
        .gameplay-content p { margin-bottom: 1rem; }

        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            color: var(--text-color);
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0.5rem;
        }

        .login-form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-top: 1rem;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .form-group label {
            font-weight: bold;
            font-size: 0.9rem;
            color: var(--secondary-color);
        }

        .form-group input, .form-group textarea, .form-group select {
            padding: 0.75rem;
            border-radius: 4px;
            border: 1px solid var(--border-color);
            background-color: var(--background-color);
            color: var(--text-color);
            font-family: inherit;
        }
        
        .form-group textarea {
            resize: vertical;
            min-height: 100px;
        }

        .login-button {
            background-color: var(--primary-color);
            color: var(--background-color);
            border: none;
            padding: 0.75rem;
            border-radius: 4px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease;
            width: 100%;
            margin-top: 1rem;
        }

        .login-button:hover { background-color: #00c853; }
       
        .logout-button, .delete-btn {
            background-color: #ff4444;
            color: white;
            border: none;
            padding: 0.75rem;
            border-radius: 4px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .logout-button { width: 100%; margin-top: 1rem; }
        .logout-button:hover, .delete-btn:hover { background-color: #cc0000; }
        .edit-btn {
            background-color: #2196F3;
            color: white;
            border: none;
            padding: 0.4rem 0.8rem;
            border-radius: 4px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease;
            font-size: 0.8rem;
        }
        .edit-btn:hover { background-color: #0b7dda; }
        
        .delete-btn {
            padding: 0.4rem 0.8rem;
            font-size: 0.8rem;
            position: absolute;
            top: 10px;
            right: 10px;
        }

        /* Rulebook Format Buttons */
        .format-btn {
            background-color: #333;
            border: 1px solid var(--border-color);
            color: white;
            padding: 4px 8px;
            cursor: pointer;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: bold;
            transition: background-color 0.2s;
        }
        .format-btn:hover { background-color: #555; }

        .register-link {
            text-align: center;
            margin-top: 1rem;
            font-size: 0.9rem;
        }

        .register-link a { color: var(--primary-color); text-decoration: none; }
        .register-link a:hover { text-decoration: underline; }

        .player-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 1rem;
        }

        .stat-card {
            background-color: var(--background-color);
            padding: 1rem;
            border-radius: 8px;
            flex: 1;
            min-width: 150px;
            text-align: center;
            border: 1px solid var(--border-color);
        }

        .stat-value {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }
        .stat-label { font-size: 0.9rem; color: #aaa; }

        /* Card List UI */
        .card-list-item {
            padding: 0.75rem 1rem;
            font-size: 0.8rem;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            transition: background-color 0.2s;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .card-list-item:hover { background-color: #333; }
        .card-list-item:last-child { border-bottom: none; }
        .card-list-number {
            color: var(--secondary-color);
            font-weight: bold;
            margin-right: 0.5rem;
            min-width: 45px;
        }
        .selected-card-item {
            background-color: var(--primary-color);
            color: var(--background-color);
        }
        .selected-card-item .card-list-number { color: var(--background-color); }
        
        /* New Cards Database Layout Redesign */
        .cards-database-layout {
            display: flex;
            gap: 2rem;
            align-items: stretch;
        }
        .cards-detail-section {
            flex: 2;
            min-width: 0; 
            display: flex;
            flex-direction: column;
        }
        .cards-list-section {
            flex: 1;
            min-width: 300px;
            max-width: 350px;
            display: flex;
            flex-direction: column;
        }

        /* Updated to handle pagination (removed fixed height & scrollbar) */
        #card-list-container {
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background-color: var(--background-color);
            display: flex;
            flex-direction: column;
        }

        /* Pagination Buttons */
        .pagination-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            flex-wrap: wrap;
        }
        .pagination-controls button {
            background-color: var(--card-bg);
            color: var(--text-color);
            border: 1px solid var(--border-color);
            padding: 0.5rem 1rem;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            transition: background-color 0.2s;
        }
        .pagination-controls button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background-color: var(--background-color);
        }
        .pagination-controls button:hover:not(:disabled) {
            background-color: var(--primary-color);
            color: var(--background-color);
        }
        .page-indicator {
            font-size: 0.9rem;
            font-weight: bold;
            color: var(--secondary-color);
        }

        .filter-select {
            flex: 1;
            padding: 0.75rem;
            border-radius: 4px;
            border: 1px solid var(--border-color);
            background-color: var(--background-color);
            color: var(--text-color);
            font-family: inherit;
        }

        #card-details-container {
            height: 100%; 
            overflow: hidden;
            display: flex;
            gap: 2rem;
            box-sizing: border-box;
        }
        .card-detail-media {
            flex: 1;
            max-width: 320px;
            display: flex;
            flex-direction: column;
        }
        .card-detail-image {
            width: 100%;
            border-radius: 8px;
            border: 2px solid var(--primary-color);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
            background-color: #000;
            object-fit: contain;
            max-height: calc(75vh - 220px); /* Leave room for video */
        }
        .card-detail-text {
            flex: 1.5;
            overflow-y: auto;
            padding-right: 1rem;
            text-align: left;
        }
        
        /* Custom scrollbar for text area */
        .card-detail-text::-webkit-scrollbar { width: 8px; }
        .card-detail-text::-webkit-scrollbar-track { background: var(--background-color); border-radius: 4px; }
        .card-detail-text::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
        .card-detail-text::-webkit-scrollbar-thumb:hover { background: var(--primary-color); }

        /* Deck Builder Layout */
        .deck-builder-layout {
            display: flex;
            gap: 1rem;
            align-items: stretch;
            height: auto; /* Changed from 75vh */
            min-height: 75vh;
        }
        .db-section {
            background-color: var(--card-bg);
            border-radius: 8px;
            border: 1px solid var(--border-color);
            padding: 1rem;
            display: flex;
            flex-direction: column;
        }
        .deck-pool-section {
            flex: 1;
            min-width: 0;
        }
        .deck-preview-section {
            flex: 1;
            min-width: 0;
            align-items: center;
            overflow-y: auto;
            text-align: center;
        }
        .deck-current-section {
            flex: 1;
            min-width: 0;
            background-color: #111;
            border-color: var(--primary-color);
        }
        .deck-list {
            flex: 1;
            overflow-y: auto;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            background: var(--background-color);
            margin-top: 1rem;
        }
        .deck-list-item {
            padding: 0.5rem 0.8rem;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.8rem;
            cursor: pointer;
        }
        .deck-list-item:hover { background-color: #333; }
        .add-card-btn {
            background-color: var(--primary-color);
            color: var(--background-color);
            border: none;
            border-radius: 4px;
            padding: 0.25rem 0.5rem;
            cursor: pointer;
            font-weight: bold;
        }
        .remove-card-btn {
            background-color: #ff4444;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 0.25rem 0.5rem;
            cursor: pointer;
        }
        .deck-controls {
            display: flex;
            gap: 0.5rem;
            margin-top: 1rem;
        }

        .profile-header {
            text-align: center;
            margin-bottom: 2rem;
            padding-bottom: 2rem;
            border-bottom: 2px solid var(--border-color);
        }
        .profile-avatar-large {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 3px solid var(--primary-color);
            margin-bottom: 1rem;
        }

        /* Master Admin Forms */
        .admin-form-container {
            background-color: var(--background-color);
            padding: 1.5rem;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            margin-bottom: 2rem;
        }

        .admin-list-container {
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background-color: #1a1a1a;
        }
        
        .admin-list-item {
            padding: 1rem;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* PDF Small Bar Style */
        .pdf-small-bar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: #e53935; /* Professional PDF red */
            color: #ffffff;
            padding: 0.4rem 0.8rem;
            border-radius: 4px;
            text-decoration: none;
            font-weight: bold;
            margin-top: 0.5rem;
            transition: background-color 0.3s ease, transform 0.2s ease;
            font-size: 0.8rem;
        }
        .pdf-small-bar:hover {
            background-color: #d32f2f;
            color: #ffffff;
            transform: translateY(-2px);
        }
        .pdf-small-bar i {
            margin-right: 0.5rem;
            font-size: 1rem;
        }

        @media (max-width: 768px) {
            .stat-card { min-width: 120px; }
            .cards-database-layout { flex-direction: column-reverse; }
            .cards-list-section { max-width: 100%; }
            #card-list-container { max-height: none; }
            #card-details-container { height: auto; flex-direction: column; overflow: visible; }
            .card-detail-media { max-width: 100%; }
            .card-detail-image { max-height: 400px; }
            .card-detail-text { overflow-y: visible; max-height: none; padding-right: 0; }
            .deck-builder-layout { flex-direction: column; height: auto; }
            .db-section { height: auto; min-height: 300px; }
            nav { flex-direction: column; display: none; }
            nav.active { display: flex; }
            .mobile-menu-btn { display: block; position: absolute; left: 1rem; top: 2.5rem; z-index: 10; }
            .header-logo-box { padding-left: 3.5rem !important; }
            .header-logo-box img { max-height: 45px !important; }
            header h1 { font-size: 1.4rem !important; }
        }
        
        /* --- MAIN RANKINGS PAGE SPECIFIC STYLING --- */
        .main-rankings-table {
            table-layout: fixed; 
            width: 100%;
            min-width: 0; 
        }
        
        .main-rankings-table th, .main-rankings-table td {
            padding: 0.6rem 0.4rem;
            font-size: 0.8rem; 
            white-space: normal; 
            word-wrap: break-word;
            text-align: center; 
        }

        /* Adjusted Column Widths (6 Columns) */
        .main-rankings-table th:nth-child(1), .main-rankings-table td:nth-child(1) { width: 12%; } /* Global */
        .main-rankings-table th:nth-child(2), .main-rankings-table td:nth-child(2) { width: 38%; text-align: left; } /* Player Name */
        .main-rankings-table th:nth-child(3), .main-rankings-table td:nth-child(3) { width: 20%; } /* Continent-[Rank] */
        .main-rankings-table th:nth-child(4), .main-rankings-table td:nth-child(4) { width: 10%; } /* W */
        .main-rankings-table th:nth-child(5), .main-rankings-table td:nth-child(5) { width: 10%; } /* L */
        .main-rankings-table th:nth-child(6), .main-rankings-table td:nth-child(6) { width: 10%; } /* Points */

        .clickable-player {
            cursor: pointer;
            color: white;
            font-weight: bold;
            text-decoration: underline;
            transition: color 0.2s;
        }
        .clickable-player:hover {
            color: var(--primary-color);
        }