@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');
			
		

            /* ULTRA-MODERN GAME NIGHT GRID */
            #game-night {
                padding: 3em 1em;
                background-color: #13141a; 
                color: #f0f0f0;
                text-align: center;
                font-family: 'Inter', sans-serif; 
            }

            .animated-title {
                font-size: 3em;
                font-weight: 800;
                margin-bottom: 0.1em;
                text-transform: uppercase;
                letter-spacing: 2px;
                background: linear-gradient(to right, #00d1ff, #ff2a2a, #00d1ff);
                background-size: 200% auto;
                color: transparent;
                -webkit-background-clip: text;
                background-clip: text;
                animation: shine 4s linear infinite;
            }

            @keyframes shine {
                to { background-position: 200% center; }
            }

            #game-night p.subtitle {
                margin-bottom: 2em; 
                font-size: 1.1em;
                color: #8b8d96; 
                letter-spacing: 1px;
            }

            /* =========================================
               KONTROLNA PLOČA (ULTRA MINIMALIST)
               ========================================= */
            .filter-container {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 10px;
                margin-bottom: 3em;
                flex-wrap: wrap; 
            }

            .game-select, .btn-cyber {
                height: 36px;
                background: transparent;
                border: 1px solid rgba(255, 255, 255, 0.15);
                background: rgba(0, 209, 255, 0.12); 
                border: 1px solid #00d1ff; 
                color: #ffffff;
                border-radius: 30px;
                font-family: 'Inter', sans-serif;
                font-size: 0.8rem;
                font-weight: 400;
                text-decoration: none;
                transition: all 0.3s ease;
                cursor: pointer;
                outline: none;
                letter-spacing: 0.5px;
                margin: 0;
            }

            .btn-cyber {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 0 16px;
            }

            .btn-cyber:hover {
                background: rgba(0, 209, 255, 0.3); 
                color: #ffffff;
                border-color: #00d1ff;
                box-shadow: 0 0 20px rgba(0, 209, 255, 0.9), inset 0 0 10px rgba(0, 209, 255, 0.5);
                text-shadow: 0 0 10px #00d1ff, 0 0 20px #00d1ff;
                transform: translateY(-2px); 
            }
 

			/* =========================================
			   GLAVNE TIPKE (GLOBAL DASHBOARD & HALL OF FAME)
			   ========================================= */

			/* GLOBAL DASHBOARD - Svijetlo plavi (Cyan) sjaj */
			#btnGlobalDash {
				background: linear-gradient(135deg, rgba(0, 209, 255, 0.15), rgba(0, 209, 255, 0.35));
				border: 2px solid #00d1ff;
				color: #fff !important;
				padding: 14px 20px; /* Povećano za bolju uočljivost */
				font-size: 1.00em;
				font-weight: 750;
				border-radius: 7px;
				text-transform: uppercase;
				letter-spacing: 1px;
				cursor: pointer;
				transition: all 0.3s ease;
				animation: pulseCyan 3s infinite; /* Lagano pulsiranje */
				display: inline-flex;
				align-items: center;
				justify-content: center;
				gap: 8px;
			}

			#btnGlobalDash:hover {
				background: rgba(0, 209, 255, 0.5);
				box-shadow: 0 0 25px rgba(0, 209, 255, 0.7);
				transform: scale(1.05); /* Efekt iskakanja na prelazak mišem */
			}

			/* Animacija za Global Dashboard */
			@keyframes pulseCyan {
				0% { box-shadow: 0 0 8px rgba(0, 209, 255, 0.4); }
				50% { box-shadow: 0 0 22px rgba(0, 209, 255, 0.8); }
				100% { box-shadow: 0 0 8px rgba(0, 209, 255, 0.4); }
			}


			/* HALL OF FAME - Zlatna boja s jakim treperenjem */
			#btnHallOfFame {
				background: linear-gradient(135deg, #ffd700, #ff8c00);
				border: 2px solid #fff;
				color: #1b1c23; /* Tamna slova za maksimalan kontrast na zlatnoj pozadini */
				padding: 14px 20px;
				font-size: 1.00em;
				font-weight: 800; /* Ekstra podebljano */
				border-radius: 7px;
				text-transform: uppercase;
				letter-spacing: 1px;
				cursor: pointer;
				transition: all 0.3s ease;
				animation: pulseGold 3s infinite; /* Brže treperenje za agresivniji efekt */
				display: inline-flex;
				align-items: center;
				justify-content: center;
				gap: 8px;
			}

			#btnHallOfFame:hover {
				transform: scale(1.05);
				box-shadow: 0 0 30px rgba(255, 215, 0, 1);
				color: #000;
			}

			/* Animacija za Hall of Fame */
			@keyframes pulseGold {
				0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.6); }
				50% { box-shadow: 0 0 30px rgba(255, 215, 0, 1), 0 0 15px rgba(255, 140, 0, 0.9); }
				100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.6); }
			}
 

            #btnPravilnik { color: #fff !important; }
            #btnBackToHof { color: #fff !important; }
			#btnLoadMore { color: #fff !important; }
			
            
            .game-select {
                padding: 0 30px 0 15px;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                text-align: center;
                text-align-last: center;
                background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%20%22%20stroke%3D%22%23a0a2ab%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
                background-repeat: no-repeat;
                background-position: right 10px center;
                background-size: 14px;
            }

            .game-select:focus {
                border-color: #00d1ff;
                color: #fff;
            }

            .game-select option {
                background-color: #13141a;
                color: #fff;
            }

            .sc-arena-btn {
                border-color: rgba(255, 183, 0, 0.2);
                color: rgba(255, 183, 0, 0.7);
            }

            .sc-arena-btn:hover {
                border-color: #ffb700;
                color: #ffb700;
                background: rgba(255, 183, 0, 0.05);
                box-shadow: 0 0 10px rgba(255, 183, 0, 0.1);
            }
			
			
			
			/* OVERVIEW BADGES (GLAVNA STATISTIKA) */
            .overview-badge {
                background: rgba(255, 255, 255, 0.02);
                border: 1px solid rgba(255, 255, 255, 0.08);
                padding: 4px 12px;
                border-radius: 20px;
                font-size: 0.8em;
                color: #8b8d96;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                display: inline-flex;
                align-items: center;
                gap: 6px;
                white-space: nowrap;
            }
            .overview-badge .val {
                color: #00d1ff;
                font-weight: 800;
                font-size: 1.1em;
            }

            /* =========================================
               MODAL PROZORI (GLASSMORPHISM)
               ========================================= */
            .modal-overlay {
                position: fixed;
                top: 0; left: 0; width: 100%; height: 100%;
                background: rgba(10, 10, 12, 0.85);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 9999;
                opacity: 0;
                visibility: hidden;
                transition: all 0.3s ease;
            }

            .modal-overlay.active {
                opacity: 1;
                visibility: visible;
            }

            .modal-box {
                background: #1b1c23;
                border: 2px solid var(--modal-glow, #00d1ff);
                box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 25px var(--modal-glow, rgba(0, 209, 255, 0.3));
                border-radius: 16px;
                width: 90%;
                max-width: 800px;
                margin-top: 80px; 
                max-height: calc(100vh - 100px); 
                overflow-y: auto;
                padding: 30px;
                position: relative;
                transform: translateY(20px);
                transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                text-align: left;
            }

            .modal-overlay.active .modal-box {
                transform: translateY(0);
            }

            .close-modal {
                position: absolute;
                top: 20px; right: 25px;
                font-size: 1.5em;
                color: #8b8d96;
                cursor: pointer;
                transition: color 0.3s;
                font-weight: bold;
            }

            .close-modal:hover { color: #fff; }

            .modal-title {
                font-size: 2em;
                font-weight: 800;
                margin-bottom: 20px;
                color: #fff;
                text-transform: uppercase;
                letter-spacing: 1px;
                border-bottom: 1px solid rgba(255,255,255,0.1);
                padding-bottom: 15px;
            }

            .stats-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 15px;
                margin-bottom: 25px;
            }

            .stat-card {
                background: rgba(255,255,255,0.03);
                border: 1px solid rgba(255,255,255,0.05);
                padding: 15px;
                border-radius: 12px;
                text-align: center;
            }

            .stat-value {
                font-size: 2em;
                font-weight: 800;
                color: var(--modal-glow, #00d1ff);
                margin-bottom: 5px;
            }

            .stat-label {
                font-size: 0.8em;
                color: #8b8d96;
                text-transform: uppercase;
                letter-spacing: 1px;
            }
            
            /* GLOBAL DASHBOARD AWARDS */
            .dashboard-section-title {
                color: #fff;
                font-size: 1.2em;
                font-weight: 600;
                margin: 30px 0 15px 0;
                text-transform: uppercase;
                letter-spacing: 2px;
                border-bottom: 1px solid rgba(255,255,255,0.1);
                padding-bottom: 10px;
            }

            .awards-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 15px;
            }

            .award-card {
                background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(0,0,0,0.2));
                border: 1px solid rgba(255,255,255,0.08);
                border-left: 3px solid #ffb700;
                padding: 15px;
                border-radius: 10px;
                display: flex;
                align-items: center;
                gap: 15px;
            }

            .award-icon {
                font-size: 2.5em;
            }

            .award-info h4 {
                margin: 0 0 5px 0;
                color: #fff;
                font-size: 1.1em;
            }

            .award-info span {
                color: #a0a2ab;
                font-size: 0.85em;
            }
            
            .award-winner {
                color: #00d1ff !important;
                font-weight: 800;
                font-size: 1em !important;
                display: block;
            }            

            /* ========================================= */

            .game-night-grid {
                display: grid;
                grid-template-columns: 1fr;
                gap: 35px;
                padding: 20px;
                max-width: 1400px;
                margin: 0 auto;
            }

            @media (min-width: 800px) {
                .game-night-grid { grid-template-columns: repeat(2, 1fr); }
            }

            .match-card {
                background-color: #1b1c23;
                border-radius: 16px;
                overflow: hidden;
                position: relative;
                display: flex;
                flex-direction: column;
                text-align: left;
                border: 2px solid var(--glow-color);
                box-shadow: 0 8px 15px rgba(0,0,0,0.6), 0 0 20px var(--glow-color); 
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                cursor: pointer;
            }

            .match-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 12px 20px rgba(0,0,0,0.8), 0 0 35px var(--glow-color); 
                border-color: #fff;
                z-index: 10;
            }

            .card-poster {
                position: absolute;
                top: 0; left: 0; width: 100%; height: 280px; 
                background-size: cover; background-position: center; z-index: 1;
            }

            .card-poster::after {
                content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
                background: linear-gradient(to bottom, transparent 0%, rgba(27, 28, 35, 0.7) 50%, #1b1c23 100%);
            }

            .card-content {
                padding: 130px 25px 25px 25px; position: relative; z-index: 2;
                display: flex; flex-direction: column; flex-grow: 1; 
            }

            .card-meta-top {
                display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
            }

            .card-date, .match-subtitle {
                font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
                color: var(--glow-color); background: rgba(19, 20, 26, 0.7); 
                padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.15); 
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
            }

            .card-content h3 {
                margin: 5px 0 0 0; line-height: 1.1; font-size: 1.6em; color: #ffffff; 
                font-weight: 800; text-shadow: 0 2px 4px rgba(0,0,0,0.8);
            }

            .expansion-text {
                font-size: 0.85em; color: #a0a2ab; font-style: italic; margin: 2px 0 12px 0; letter-spacing: 0.5px;
            }

            .card-stats {
                display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
            }

            .players-row {
                font-size: 0.85em; color: #8b8d96; margin-bottom: 15px; padding-bottom: 15px;
                border-bottom: 1px solid rgba(255,255,255,0.05); line-height: 1.5;
            }
            .players-row strong { color: #d1d2d6; }

            .time-badge {
                background: rgba(255, 255, 255, 0.05); padding: 6px 12px; border-radius: 20px;
                font-size: 0.85em; color: #a0a2ab; border: 1px solid rgba(255, 255, 255, 0.1);
            }

            .winner-row {
                font-size: 1.1em; display: flex; align-items: center; gap: 8px;
            }
            .winner-row strong { color: #fff; }

            .card-quote {
                margin-top: auto; font-style: italic; color: #a0a2ab; font-size: 0.95em;
                line-height: 1.4; position: relative; padding-left: 15px; border-left: 3px solid var(--glow-color);
            }

            /* ELO LEADERBOARD PLAYER ROW */
            .elo-player-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: rgba(255, 255, 255, 0.03);
                border: 1px solid rgba(255, 255, 255, 0.05);
                border-left: 4px solid #ffb700;
                padding: 12px 20px;
                border-radius: 8px;
                font-family: 'Inter', sans-serif;
                cursor: pointer;
                transition: transform 0.2s, border-color 0.2s;
            }

            .elo-player-row:hover {
                transform: translateX(5px);
                border-color: #fff;
            }

			/* MOBILE OVERRIDE & FULLSCREEN HACK */
            @media (max-width: 799px) {
                html, body { overflow-x: hidden; }
                #game-night {
                    padding: 2em 0 !important; width: 100vw; position: relative;
                    left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
                }
                .game-night-grid { padding: 0 10px; gap: 15px; }
                .match-card { border-radius: 0; border-left: none; border-right: none; }
                .card-poster { position: relative; height: 200px; }
                .card-poster::after { background: linear-gradient(to bottom, transparent 80%, #1b1c23 100%); }
                .card-content { padding: 20px 15px; min-height: auto; }
                .card-meta-top { flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
                .card-stats { flex-wrap: wrap; gap: 10px; }
                .card-date, .match-subtitle { font-size: 0.7rem; }
				
            
						/* --- OPTIMIZACIJA GORNJEG RAZMAKA ZA MOBITELE --- */

                #wrapper {
                    padding-top: 0 !important;
                }
                
                /* 1. Sivi razmak sveden na mikro-liniju (2 piksela) */
                #main {
                    padding-top: 2px !important;
                    margin-top: 0 !important;
                }
                
                /* 2. Dodatno povećan bijeli prostor unutar kartice */
                .post {
                    margin-top: 0 !important;
                    padding-top: 45px !important; /* Povećano s 35px na 45px */
                }
                
                .post > header {
                    padding-top: 0 !important;
                    padding-bottom: 15px !important;
                }

}  
  
            /* --- PLAYER PROFILE CARDS --- */
            .pc-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; margin-bottom: 20px; }
            .pc-name { font-size: 2.2em; font-weight: 800; color: #fff; margin: 0; text-transform: uppercase; letter-spacing: 1px; }
            .pc-elo { font-size: 2.5em; font-weight: 800; color: #ffb700; text-shadow: 0 0 15px rgba(255,183,0,0.4); line-height: 1; }
            .pc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 25px; }
            .pc-stat-box { 
                background: rgba(255,255,255,0.03); 
                border: 1px solid rgba(255,255,255,0.05); 
                padding: 15px 10px; 
                border-radius: 8px; 
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
            }
            .pc-stat-val { font-size: 1.4em; font-weight: 800; color: #00d1ff; margin-bottom: 4px; width: 100%; text-align: center;}
            .pc-stat-label { font-size: 0.65em; color: #8b8d96; text-transform: uppercase; letter-spacing: 1px; text-align: center; }
            
            .pc-section-title { color: #fff; font-size: 1em; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 5px; }
            .pc-rivals { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
            .pc-rival-box { flex: 1; min-width: 200px; background: linear-gradient(145deg, rgba(255,42,42,0.05), rgba(0,0,0,0.2)); border: 1px solid rgba(255,42,42,0.1); border-left: 3px solid #ff2a2a; padding: 15px; border-radius: 8px; }
            .pc-rival-box.easy { background: linear-gradient(145deg, rgba(0,209,255,0.05), rgba(0,0,0,0.2)); border-color: rgba(0,209,255,0.1); border-left-color: #00d1ff; }
            .pc-rival-title { font-size: 0.75em; color: #8b8d96; text-transform: uppercase; margin-bottom: 8px; font-weight: 600;}
            .pc-rival-name { font-size: 1.2em; font-weight: 800; color: #fff; }
            .pc-rival-score { font-size: 0.85em; color: #a0a2ab; margin-top: 5px;}
			
		/* =========================================
               KOLEKCIJA IGARA (PRAVILA)
               ========================================= */
            .game-rule-btn {
                text-decoration: none; 
                display: flex; 
                flex-direction: column; 
                align-items: center; 
                justify-content: center; 
                gap: 10px; 
                transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                background: rgba(255,255,255,0.03);
                border: 1px solid rgba(255,255,255,0.05);
                padding: 25px 15px;
                border-radius: 12px;
                cursor: pointer;
            }
            .game-rule-btn:hover {
                border-color: var(--hover-glow, #00d1ff);
                box-shadow: 0 8px 20px rgba(0,0,0,0.6), 0 0 25px var(--hover-glow, rgba(0, 209, 255, 0.3));
                transform: translateY(-5px);
                background: rgba(255,255,255,0.05);
            }
            .game-rule-icon { 
                font-size: 3em; 
                margin-bottom: 5px; 
                filter: drop-shadow(0 0 10px rgba(255,255,255,0.2)); 
            }
            .game-rule-title { 
                color: #fff; 
                font-weight: 800; 
                font-size: 1.1em; 
                text-align: center; 
                letter-spacing: 0.5px; 
                line-height: 1.3;
            }	
			
			
			
			/* UNIFICIRANI BEDŽEVI ZA IGRAČE I FRAKCIJE */
            .player-badge {
                display: inline-flex;
                align-items: center;
                background: rgba(255, 255, 255, 0.03);
                border: 1px solid rgba(255, 255, 255, 0.08);
                border-radius: 6px;
                padding: 4px 10px;
                margin: 4px 4px;
                font-size: 0.8em;
                color: #a0a2ab;
                letter-spacing: 0.5px;
                white-space: nowrap;
                vertical-align: middle;
            }
            .player-badge .badge-name {
                color: #fff;
                font-weight: 800;
            }
            .player-badge.has-faction .badge-name {
                margin-right: 8px;
                padding-right: 8px;
                border-right: 1px solid rgba(255, 255, 255, 0.15);
            }
            .player-badge .badge-name.is-starter {
                text-decoration: underline;
                text-decoration-thickness: 2px;
                text-underline-offset: 4px;
                text-decoration-color: var(--glow-color);
            }