/**
 * Video Game Rankings Page Styles
 *
 * Extracted from page-templates/completevidgamerankings.php on 2026-04-23
 * (Phase 4A of the VG rankings refactor). The original file had a
 * 1487-line `<style>` heredoc block emitted via wp_head by
 * video_games_archive_styles(). Moving to a proper enqueued stylesheet
 * so the page template file shrinks from 2701 to ~1150 lines, and
 * browsers can cache the CSS separately.
 *
 * Enqueued on is_page_template('page-templates/completevidgamerankings.php').
 */

        /* Widen the Genesis .site-inner so the article can take the room.
           Scoped to this page template only. (2026-05-24) */
        body.page-template-completevidgamerankings .site-inner {
            max-width: 1340px;
        }

        .video-games-master-list {
            max-width: 1340px; /* was 1200 — widened 2026-05-24 */
            margin: 0 auto;
            padding: 60px 60px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
            background: #1a1a1a;
            color: #e0e0e0;
            position: relative;
            /* Wavy borders — same polygon as .board-games-master-list in
               ranking-pages-shared.css for visual parity (2026-05-24). */
            clip-path: polygon(0% 0.5%, 20% 0%, 40% 0.5%, 60% 0%, 80% 0.5%, 100% 0%, 98% 5%, 99% 10%, 97% 15%, 100% 20%, 98% 25%, 99% 30%, 97% 35%, 100% 40%, 98% 45%, 99% 50%, 97% 55%, 100% 60%, 98% 65%, 99% 70%, 97% 75%, 100% 80%, 98% 85%, 99% 90%, 97% 95%, 100% 99.5%, 80% 100%, 60% 99.5%, 40% 100%, 20% 99.5%, 0% 100%, 2% 95%, 1% 90%, 3% 85%, 0% 80%, 2% 75%, 1% 70%, 3% 65%, 0% 60%, 2% 55%, 1% 50%, 3% 45%, 0% 40%, 2% 35%, 1% 30%, 3% 25%, 0% 20%, 2% 15%, 1% 10%, 3% 5%);
        }
        
        /* Top torn edge - green accent like header */
        .video-games-master-list::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 20px;
            background: #4da44b;
            clip-path: polygon(0% 0%, 10% 80%, 20% 60%, 30% 90%, 40% 50%, 50% 85%, 60% 40%, 70% 75%, 80% 55%, 90% 80%, 100% 0%, 100% 0%, 0% 0%);
            z-index: 1;
        }
        
        /* Bottom torn edge - green accent like header */
        .video-games-master-list::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 20px;
            background: #4da44b;
            clip-path: polygon(0% 100%, 10% 20%, 20% 40%, 30% 10%, 40% 50%, 50% 15%, 60% 60%, 70% 25%, 80% 45%, 90% 20%, 100% 100%, 100% 100%, 0% 100%);
            z-index: 1;
        }
        
        .page-header {
            text-align: center;
            margin-bottom: 50px;
            padding: 30px 0;
            background: linear-gradient(135deg, #2d2d2d 0%, #1f1f1f 100%);
            border-radius: 12px;
            border: 1px solid #404040;
            position: relative;
        }
        
        .page-header::after {
            content: "";
            position: absolute;
            bottom: -1px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg, #4da44b 0%, #059669 100%);
            border-radius: 2px;
        }
        
        .page-title {
            color: #ffffff;
            margin-bottom: 10px;
            font-size: 2.5rem;
            font-weight: 700;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }
        
        .page-description {
            color: #b0b0b0;
            font-size: 1.1rem;
            font-weight: 400;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .games-count {
            margin-bottom: 25px;
            text-align: right;
            color: #b0b0b0;
            font-weight: 500;
            padding: 12px 20px;
            background: #2d2d2d;
            border-radius: 8px;
            border: 1px solid #404040;
        }
        
        .video-games-list {
            display: grid;
            gap: 16px;
        }
        
        .game-entry {
            display: flex;
            align-items: center;
            background: #2d2d2d;
            border: 1px solid #404040;
            border-radius: 12px;
            padding: 20px 24px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            position: relative;
        }
        
        .game-entry.has-banner::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: var(--banner-url);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0.15;
            border-radius: 12px;
            z-index: 1;
            pointer-events: none;
        }
        
        .game-entry > * {
            position: relative;
            z-index: 2;
        }
        
        .game-entry:hover {
            background: #333333;
            border-color: #4da44b;
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(77, 164, 75, 0.25);
        }
        
        .game-rank-link {
            text-decoration: none;
            display: block;
        }

        .game-rank-link:hover .game-rank {
            transform: scale(1.05);
            border-color: #6fd46d;
            box-shadow: 0 0 12px rgba(77, 164, 75, 0.5);
        }

        .game-rank {
            font-size: 28px;
            font-weight: 800;
            color: #4da44b;
            margin-right: 24px;
            min-width: 70px;
            text-align: center;
            background: linear-gradient(135deg, #1f4a1f 0%, #0d2e0d 100%);
            border-radius: 12px;
            padding: 12px 8px;
            border: 2px solid #4da44b;
            transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .game-rank.unranked {
            color: #999;
            background: linear-gradient(135deg, #444 0%, #222 100%);
            border-color: #666;
            font-size: 18px;
            font-style: italic;
            opacity: 0.8;
        }
        
        .game-thumbnail {
            margin-right: 20px;
            flex-shrink: 0;
        }
        
        /* Badges + Video container - vertical badges touching video */
        .game-ratings {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            margin-left: auto;
            gap: 10px;
        }

        .badges-row {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin: 0;
            padding: 0;
            align-self: stretch; /* Stretch to match video height */
        }

        /* More rectangular badges with slight rounding */
        .tier-badge,
        .score-badge,
        .achievement-badge {
            border-radius: 3px !important;
            padding: 4px 12px !important;
            font-size: 11px !important;
            width: 130px;
            text-align: center;
            margin: 0 !important;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            border: none !important;
        }

        /* Pooter badge styling for rankings page - normalized widths */
        .badges-row .wakasm-badge-image {
            min-width: 95px !important;
            justify-content: flex-start !important;
            margin: 0 !important;
        }

        .badges-row .wakasm-badge-image .badge-text {
            min-width: 55px;
            text-align: center;
        }

        /* Ensure score badges have consistent width */
        .badges-row .wakasm-score-badge-image {
            min-width: 95px !important;
        }

        .badges-row .wakasm-score-badge-image .badge-text {
            min-width: 55px;
        }

        /* Dark text for yellow RetroAchievements badges */
        .achievement-badge.retro {
            color: #333 !important;
        }

        

        

        /* Video on RIGHT side - touching badges */
        .game-video-right {
            flex-shrink: 0;
            display: flex;
            align-items: stretch;
        }

        /* Hide Videos toggle */
        .hide-videos .game-video-right {
            display: none !important;
        }

        .right-video {
            height: 80px;
            width: auto;
            max-width: 160px;
            object-fit: cover;
            border-radius: 4px;
            border: 2px solid #404040;
            transition: height 0.4s ease 1s,
                        max-width 0.4s ease 1s,
                        border-color 0.3s ease,
                        box-shadow 0.4s ease 1s;
        }

        /* Video and container expand on hover after 1 second delay */
        .game-entry {
            min-height: 100px; /* Initial value required for transition to work */
            transition: min-height 0.4s ease 1s, padding 0.3s ease;
        }

        .game-entry:hover {
            min-height: 220px;
        }

        .game-entry:hover .right-video {
            height: 200px;
            max-width: 400px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
            border-color: #4da44b;
        }
        
        /* Hide mastered text */
        .mastered-text {
            display: none;
        }
        
        .box-art-link {
            display: block;
            text-decoration: none;
        }

        .box-art-thumb {
            width: 60px;
            height: 80px;
            object-fit: cover;
            border-radius: 8px;
            border: 2px solid #404040;
            transition: border-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }

        .box-art-link:hover .box-art-thumb,
        .game-entry:hover .box-art-thumb {
            border-color: #4da44b;
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(77, 164, 75, 0.4);
        }
        
        .box-art-placeholder {
            width: 60px;
            height: 80px;
            background: #404040;
            border: 2px solid #555555;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: #888888;
            text-align: center;
        }
        
        .game-info {
            flex: 1;
            min-width: 0;
        }
        
        .game-title {
            margin: 0 0 8px 0;
            font-size: 1.25rem;
            font-weight: 600;
            line-height: 1.3;
        }
        
        .game-title a {
            color: #ffffff;
            text-decoration: none;
            transition: color 0.2s ease;
        }
        
        .game-title a:hover {
            color: #4da44b;
        }
        
        .game-platforms {
            margin-top: 4px;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        
        .platform-box {
            color: #b0b0b0;
            font-size: 0.75rem;
            font-weight: 500;
            background: #1a1a1a;
            padding: 3px 6px;
            border-radius: 3px;
            display: inline-block;
            border: 1px solid #333;
        }
        
        .game-ratings {
            display: flex;
            flex-direction: row;
            gap: 10px;
            align-items: stretch;
            margin-left: auto;
        }

        .badges-row {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin: 0;
            padding: 0;
            align-self: stretch; /* Stretch to match video height */
        }

        .tier-badge,
        .score-badge,
        .achievement-badge {
            border-radius: 3px !important;
            padding: 4px 12px !important;
            font-size: 11px !important;
            width: 130px;
            text-align: center;
            margin: 0 !important;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            border: none !important;
        }

        /* Dark text for yellow RetroAchievements badges */
        .achievement-badge.retro {
            color: #333 !important;
        }
        
        .achievement-badge.retro {
            background: #FFCC01 !important;
        }
        
        .tier-placeholder, .score-placeholder {
            background: #555555 !important;
            opacity: 0.7;
            color: #cccccc;
        }
        
        .achievement-badge {
            font-size: 0.7rem;
            padding: 5px 8px;
            min-width: 65px;
        }
        
        .achievement-badge.placeholder {
            background: #444444 !important;
            color: #888888 !important;
            opacity: 0.8;
            font-size: 0.65rem;
            text-shadow: none;
        }
        
        .mastered-text {
            color: #FFD700;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-shadow: 0 1px 2px rgba(0,0,0,0.8);
        }
        
        /* Responsive design */
        @media (max-width: 768px) {
            .video-games-master-list {
                padding: 20px 15px;
            }
            
            .page-title {
                font-size: 2rem;
            }
            
            .game-entry {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            
            .game-rank {
                margin: 0;
                font-size: 24px;
                padding: 8px 12px;
                min-width: 60px;
            }
            
            .game-thumbnail {
                margin: 0;
            }
            
            .game-ratings {
                margin-left: 0;
                width: 100%;
                justify-content: flex-start;
            }
        }
        
        /* Ranking controls */
        .ranking-controls {
            margin: 20px 0;
            text-align: center;
        }
        
        .view-options {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }
        
        /* Compact Filter Controls */
        .filter-controls-compact {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 40px;
            flex-wrap: wrap;
            background: #2d2d2d;
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 20px;
        }
        
        .toggle-switches {
            display: flex;
            gap: 30px;
            align-items: center;
        }
        
        .toggle-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .toggle-label {
            color: #e0e0e0;
            font-size: 0.9rem;
            font-weight: 500;
            white-space: nowrap;
        }
        
        /* Toggle Switch Styles */
        .switch {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 22px;
        }
        
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .slider {
            position: absolute;
            cursor: pointer;
            inset: 0;
            background: #1a1a1a;
            border: 2px solid #404040;
            border-radius: 50px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 2px;
            bottom: 1px;
            background-color: #808080;
            border-radius: 50%;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
        }
        
        .switch input:checked + .slider {
            background: rgba(77, 164, 75, 0.2);
            border: 2px solid #4da44b;
            box-shadow: 0 0 15px rgba(77, 164, 75, 0.4);
        }
        
        .switch input:checked + .slider:before {
            transform: translateX(17px);
            background-color: #4da44b;
        }
        
        /* Filter Dropdowns */
        .filter-dropdowns {
            display: flex;
            gap: 20px;
            align-items: center;
        }
        
        .dropdown-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .dropdown-label {
            color: #a0a0a0;
            font-size: 0.85rem;
            font-weight: 500;
            color: #fff !important;
        }
        
        /* Active state for toggle filter buttons */
        .toggle-link.active {
            background: #ff6b35;
            border-color: #ff6b35;
            color: #fff !important;
        }
        
        .toggle-link.active:hover {
            background: #ff7b45;
            border-color: #ff7b45;
            color: #fff !important;
        }
        
        /* Specific hover for inactive toggle buttons */
        .toggle-link:not(.active):hover {
            background: #333;
            border-color: #ff6b35;
        }
        
        .active-filters {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 10px;
            padding: 8px 15px;
            background: rgba(255, 107, 53, 0.1);
            border-radius: 6px;
            border: 1px solid rgba(255, 107, 53, 0.3);
        }
        
        .filter-label {
            color: #ccc;
            font-size: 12px;
            font-weight: 600;
        }
        
        .filter-badge {
            background: #ff6b35;
            color: #fff;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
        }
        
        @media (max-width: 768px) {
            .filter-controls-compact {
                flex-direction: column;
                gap: 20px;
                padding: 15px;
            }
            
            .toggle-switches {
                flex-direction: column;
                gap: 15px;
                width: 100%;
            }
            
            .toggle-item {
                width: 100%;
                justify-content: space-between;
            }
            
            .filter-dropdowns {
                flex-direction: column;
                gap: 15px;
                width: 100%;
            }
            
            .dropdown-item {
                width: 100%;
                justify-content: space-between;
            }
            
            .dropdown-item select {
                flex: 1;
                max-width: 200px;
            }
            
            .active-filters {
                flex-direction: column;
                text-align: center;
                gap: 5px;
            }
        }
        
        /* Sub-rankings styles */
        .sub-rankings-container {
            margin: 0px 0 20px 0;
            padding: 15px;
            background: transparent;
            border-radius: 0;
            border: none;
            border-left: 3px solid #4da44b;
            padding-left: 25px;
        }
        
        .sub-rankings-header {
            margin-bottom: 20px;
        }
        
        .sub-rankings-title {
            color: #ffffff;
            font-size: 16px;
            margin: 0 0 15px 0;
            padding: 0;
            border-bottom: 1px solid #4da44b;
            text-align: left;
            font-weight: 600;
            opacity: 0.9;
        }
        
        /* Sub-rankings: Horizontal layout like main game entries */
        .sub-rankings-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 15px;
        }

        .sub-game-entry {
            display: flex;
            align-items: center;
            background: #252525;
            border: 1px solid #3a3a3a;
            border-left: 4px solid #4da44b;  /* Green indent line */
            border-radius: 8px;
            padding: 12px 16px;
            gap: 16px;
            transition: all 0.3s ease;
            margin-left: 20px;  /* Indent from parent game */
        }

        .sub-game-entry:hover {
            background: #2a2a2a;
            border-color: #4da44b;
            border-left-color: #6fd46d;
            box-shadow: 0 2px 8px rgba(77, 164, 75, 0.15);
        }

        .sub-game-entry.unranked-item {
            opacity: 0.6;
            border-left-color: #666;
        }

        /* Sub-ranking number - purple to differentiate from main green rankings */
        .sub-game-rank {
            background: linear-gradient(135deg, #4a148c 0%, #311b60 100%);
            color: #ce93d8;
            border: 2px solid #7b1fa2;
            border-radius: 8px;
            min-width: 45px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 16px;
            flex-shrink: 0;
        }

        .sub-game-rank.unranked {
            background: linear-gradient(135deg, #444 0%, #222 100%);
            color: #888;
            border-color: #555;
            font-size: 14px;
        }

        /* Box art container on LEFT (like main games) */
        .sub-game-boxart {
            width: 60px;
            height: 60px;
            flex-shrink: 0;
            border-radius: 4px;
            overflow: hidden;
            background: #1a1a1a;
            border: 1px solid #3a3a3a;
        }

        .sub-boxart-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Video showcase container on RIGHT (like main games) */
        .sub-game-showcase {
            width: 120px;
            height: 68px;
            flex-shrink: 0;
            border-radius: 6px;
            overflow: hidden;
            background: #1a1a1a;
            border: 1px solid #3a3a3a;
            margin-left: auto;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Match main game video size on hover (400x200) */
        .sub-game-entry.has-video:hover .sub-game-showcase {
            width: 400px;
            height: 200px;
            z-index: 10;
            border-color: #4da44b;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
        }

        .sub-showcase-video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .sub-game-info {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .sub-game-title {
            color: #e0e0e0;
            font-size: 15px;
            margin: 0;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sub-game-entry:hover .sub-game-title {
            color: #ffffff;
        }

        /* Badges container - now below title */
        .sub-game-badges {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .sub-unranked-label {
            font-size: 11px;
            color: #666;
            font-style: italic;
        }
        
        @media (max-width: 1200px) {
            .sub-rankings-list {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }
        }
        
        @media (max-width: 768px) {
            .sub-rankings-container {
                margin: 10px 0 20px 0;
                padding: 12px;
            }

            .sub-rankings-list {
                grid-template-columns: 1fr;
                gap: 8px;
            }

            .sub-game-entry {
                padding: 10px;
                min-height: auto;
                gap: 8px;
                margin-left: 0;
            }

            .sub-game-rank {
                min-width: 32px;
                width: 32px;
                height: 32px;
                font-size: 12px;
            }

            .sub-game-boxart {
                width: 55px;
                height: 55px;
            }

            /* Videos in boxart: show larger */
            .sub-game-boxart:has(video) {
                width: 100%;
                height: auto;
                order: 10;
            }

            .sub-game-boxart video {
                width: 100%;
                height: auto;
                max-height: 180px;
                object-fit: contain;
            }

            .sub-game-title {
                font-size: 13px;
            }

            .sub-game-badges {
                flex-wrap: wrap;
                gap: 4px;
            }
        }

        @media (max-width: 480px) {
            .sub-game-entry {
                padding: 8px;
                gap: 6px;
            }

            .sub-game-rank {
                min-width: 28px;
                width: 28px;
                height: 28px;
                font-size: 11px;
            }

            .sub-game-boxart {
                width: 45px;
                height: 45px;
            }

            .sub-game-title {
                font-size: 12px;
            }
        }
        
        /* Infinite Scroll Controls */
        .infinite-scroll-controls {
            margin-top: 30px;
            padding: 20px;
            background: #1a1a1a;
            border-radius: 8px;
            text-align: center;
        }
        
        .loading-indicator {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 15px;
        }
        
        .loading-spinner {
            width: 24px;
            height: 24px;
            border: 3px solid #333333;
            border-top: 3px solid #4da44b;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .loading-text {
            color: #4da44b;
            font-size: 1rem;
            font-weight: 500;
        }
        
        .load-progress {
            color: #b0b0b0;
            font-size: 0.9rem;
            margin-bottom: 10px;
        }
        
        .all-loaded-message {
            color: #4da44b;
            font-size: 1.1rem;
            font-weight: 600;
            padding: 15px;
            background: rgba(77, 164, 75, 0.1);
            border-radius: 6px;
            border: 1px solid rgba(77, 164, 75, 0.3);
        }
        
        /* New Game Entry Animation */
        .new-game-entry {
            transition: opacity 0.5s ease-in-out;
        }
        
        .new-game-entry.fade-in {
            opacity: 1 !important;
        }
        
        @media (max-width: 600px) {
            .loading-indicator {
                gap: 8px;
            }
            
            .loading-spinner {
                width: 20px;
                height: 20px;
            }
            
            .loading-text {
                font-size: 0.9rem;
            }
        }
        
        /* Alphabet Filter */
        .alphabet-filter {
            margin: 20px 0;
            padding: 20px;
            background: #1a1a1a;
            border-radius: 8px;
        }
        
        .filter-section-title {
            color: #ffffff;
            font-size: 1rem;
            font-weight: 600;
            margin: 0 0 15px 0;
        }
        
        /* Alphabet Filter Dropdown Styles */
        .alphabet-dropdown-container {
            margin-top: 10px;
        }
        
        .alphabet-dropdown {
            width: 100%;
            max-width: 300px;
            padding: 10px 15px;
            background: #2a2a2a;
            color: #e0e0e0;
            border: 2px solid #404040;
            border-radius: 6px;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: linear-gradient(45deg, transparent 50%, #e0e0e0 50%), linear-gradient(135deg, #e0e0e0 50%, transparent 50%);
            background-position: calc(100% - 15px) calc(1em - 2px), calc(100% - 10px) calc(1em - 2px);
            background-size: 5px 5px, 5px 5px;
            background-repeat: no-repeat;
            padding-right: 40px;
        }
        
        .alphabet-dropdown:hover {
            border-color: #4da44b;
            background: #333333;
        }
        
        .alphabet-dropdown:focus {
            outline: none;
            border-color: #4da44b;
            box-shadow: 0 0 0 3px rgba(77, 164, 75, 0.2);
        }
        
        .alphabet-dropdown option {
            background: #2a2a2a;
            color: #e0e0e0;
            padding: 8px;
        }
        
        @media (max-width: 768px) {
            .alphabet-dropdown {
                max-width: 100%;
                font-size: 0.85rem;
                padding: 8px 12px;
                padding-right: 35px;
                background-size: 10px;
                background-position: right 10px center;
            }
        }
        
        /* Platform Filter Dropdown Styles */
        .platform-filter {
            margin-top: 20px;
        }
        
        .platform-dropdown-container {
            margin-top: 10px;
        }
        
        .platform-dropdown {
            width: 100%;
            max-width: 400px;
            padding: 10px 15px;
            background: #2a2a2a;
            color: #e0e0e0;
            border: 2px solid #404040;
            border-radius: 6px;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: linear-gradient(45deg, transparent 50%, #e0e0e0 50%), linear-gradient(135deg, #e0e0e0 50%, transparent 50%);
            background-position: calc(100% - 15px) calc(1em - 2px), calc(100% - 10px) calc(1em - 2px);
            background-size: 5px 5px, 5px 5px;
            background-repeat: no-repeat;
            padding-right: 40px;
        }
        
        .platform-dropdown:hover {
            border-color: #4da44b;
            background: #333333;
        }
        
        .platform-dropdown:focus {
            outline: none;
            border-color: #4da44b;
            box-shadow: 0 0 0 3px rgba(77, 164, 75, 0.2);
        }
        
        .platform-dropdown option {
            background: #2a2a2a;
            color: #e0e0e0;
            padding: 8px;
        }
        
        @media (max-width: 768px) {
            .platform-dropdown {
                max-width: 100%;
                font-size: 0.85rem;
                padding: 8px 12px;
                padding-right: 35px;
                background-size: 10px;
                background-position: right 10px center;
            }
        }
        
        /* Simplified Game Mode */
        .game-title.simplified-game {
            color: #888888;
            opacity: 0.8;
        }
        
        .simplified-badge {
            display: inline-block;
            background: #444444;
            color: #cccccc;
            font-size: 0.7rem;
            font-weight: 500;
            padding: 2px 6px;
            border-radius: 3px;
            margin-left: 8px;
            vertical-align: middle;
        }
        
        /* SECRET ADMIN: Inline Admin Controls */
        .admin-toggle-btn-inline {
            background: #ff4444;
            color: white;
            border: none;
            padding: 10px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        
        .admin-toggle-btn-inline:hover {
            background: #ff6666;
        }
        
        .admin-save-btn-inline {
            background: #4da44b;
            color: white;
            border: none;
            padding: 10px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        
        .admin-save-btn-inline:hover {
            background: #59b95f;
        }
        
        /* Individual Game Admin Controls */
        .game-admin-controls {
            position: absolute;
            top: 5px;
            right: 5px;
            background: rgba(26, 26, 26, 0.95);
            padding: 5px;
            border-radius: 4px;
            border: 1px solid #4da44b;
            z-index: 10;
            display: flex;
            gap: 5px;
            align-items: center;
            flex-wrap: wrap;
            pointer-events: auto;
        }
        
        .game-admin-controls * {
            pointer-events: auto !important;
        }
        
        .admin-game-btn {
            background: #4da44b;
            color: white;
            border: none;
            padding: 4px 8px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 11px;
            font-weight: bold;
        }
        
        .admin-game-btn:hover {
            background: #59b95f;
        }
        
        .admin-game-btn.unrank-btn {
            background: #ff6b35;
        }
        
        .admin-game-btn.unrank-btn:hover {
            background: #ff7849;
        }
        
        .admin-game-btn.get-ranked-btn {
            background: #4da44b;
        }
        
        .admin-rank-input {
            background: #333 !important;
            color: #e0e0e0 !important;
            border: 1px solid #555 !important;
            padding: 3px 6px !important;
            border-radius: 3px !important;
            width: 50px !important;
            font-size: 11px !important;
            -moz-appearance: textfield !important; /* Firefox */
            pointer-events: auto !important;
            cursor: text !important;
        }
        
        .admin-rank-input:focus {
            outline: 2px solid #4da44b !important;
            border-color: #4da44b !important;
        }
        
        /* Remove spinner arrows from number inputs */
        .admin-rank-input::-webkit-outer-spin-button,
        .admin-rank-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        
        /* Save button styles */
        .admin-save-btn {
            background: #4da44b;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 25px;
            cursor: pointer;
            font-weight: bold;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            transition: all 0.3s ease;
        }
        
        .admin-save-btn:hover {
            background: #59b95f;
            transform: scale(1.05);
        }
        
        .admin-save-btn.has-changes {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 4px 12px rgba(77, 164, 75, 0.3); }
            50% { box-shadow: 0 4px 20px rgba(77, 164, 75, 0.8); }
            100% { box-shadow: 0 4px 12px rgba(77, 164, 75, 0.3); }
        }
        
        /* Admin mode styles */
        .admin-mode-active .game-entry {
            position: relative;
        }
        
        .admin-mode-active .game-entry[data-current-rank]:not([data-current-rank="0"]) {
            cursor: grab;
            transition: all 0.3s ease;
        }
        
        .admin-mode-active .game-entry[data-current-rank]:not([data-current-rank="0"]):hover {
            transform: scale(1.01);
            box-shadow: 0 4px 12px rgba(77, 164, 75, 0.3);
        }
        
        .admin-mode-active .game-admin-controls {
            display: flex !important;
        }
        
        .game-entry.dragging {
            opacity: 0.7;
            transform: rotate(1deg) scale(1.02);
            cursor: grabbing;
            z-index: 1000;
        }
        
        .drag-placeholder {
            height: 80px;
            background: rgba(77, 164, 75, 0.1);
            border: 2px dashed #4da44b;
            border-radius: 8px;
            margin: 10px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4da44b;
            font-weight: bold;
        }
        
        /* Layout Toggle Styles */
        .layout-toggle-btn:hover {
            background: #3d8b40 !important;
        }
        
        /* 2-Column Grid Layout */
        .video-games-list.grid-layout {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        
        .video-games-list.grid-layout .game-entry {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            min-height: 400px;
            position: relative;
            padding: 25px 20px;
        }
        
        .video-games-list.grid-layout .game-rank {
            position: absolute;
            top: 15px;
            left: 15px;
            margin: 0;
            width: 60px;
            height: 60px;
            font-size: 18px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .video-games-list.grid-layout .game-thumbnail {
            margin: 20px 0 15px 0;
        }
        
        .video-games-list.grid-layout .box-art-thumb {
            width: 150px;
            height: 200px;
        }
        
        .video-games-list.grid-layout .box-art-placeholder {
            width: 150px;
            height: 200px;
            font-size: 12px;
        }
        
        .video-games-list.grid-layout .game-info {
            margin-bottom: 15px;
        }
        
        .video-games-list.grid-layout .game-platforms {
            justify-content: center;
            margin-bottom: 15px;
        }
        
        .video-games-list.grid-layout .game-ratings {
            margin: 0;
            align-items: center;
        }
        
        .video-games-list.grid-layout .badges-row {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin: 0;
            padding: 0;
            height: 80px;
        }
        
        /* Sub-rankings in Grid Layout */
        .video-games-list.grid-layout .sub-rankings-container {
            grid-column: 1 / -1; /* Span both columns */
            margin: 20px 0;
            padding: 20px;
            background: rgba(77, 164, 75, 0.05);
            border: 1px solid rgba(77, 164, 75, 0.2);
            border-radius: 12px;
            position: relative;
        }
        
        .video-games-list.grid-layout .sub-rankings-container::before {
            content: '';
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 10px;
            background: #4da44b;
        }
        
        .video-games-list.grid-layout .sub-rankings-list {
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
        }
        
        .video-games-list.grid-layout .sub-rankings-title {
            text-align: center;
            color: #4da44b;
            margin-bottom: 20px;
            font-size: 16px;
            font-weight: 600;
        }
        
        @media (max-width: 1200px) {
            .video-games-list.grid-layout {
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
            }
            
            .video-games-list.grid-layout .game-entry {
                min-height: 350px;
                padding: 20px 15px;
            }
            
            .video-games-list.grid-layout .box-art-thumb {
                width: 120px;
                height: 160px;
            }
            
            .video-games-list.grid-layout .box-art-placeholder {
                width: 120px;
                height: 160px;
            }
            
            .video-games-list.grid-layout .sub-rankings-list {
                grid-template-columns: repeat(3, 1fr);
                gap: 12px;
            }
        }
        
        @media (max-width: 768px) {
            .video-games-list.grid-layout {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
            .video-games-list.grid-layout .game-entry {
                min-height: 300px;
                padding: 20px 15px;
            }
            
            .video-games-list.grid-layout .game-rank {
                width: 50px;
                height: 50px;
                font-size: 16px;
                top: 12px;
                left: 12px;
            }
            
            .video-games-list.grid-layout .box-art-thumb {
                width: 100px;
                height: 133px;
            }
            
            .video-games-list.grid-layout .box-art-placeholder {
                width: 100px;
                height: 133px;
            }
            
            .layout-toggle-container {
                float: none !important;
                margin-right: 0 !important;
                margin-top: 10px;
                margin-bottom: 10px;
            }
            
            .video-games-list.grid-layout .sub-rankings-list {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }
            
            .video-games-list.grid-layout .sub-rankings-container {
                padding: 15px;
                margin: 15px 0;
            }
        }