:root {
	--accent         : #fff;
	--black          : #000000;
	--surface        : #0a0a0a;
	--border         : #1a1a1a;
	--border-light   : #252525;
	--green          : #22c55e;
	--red            : #ef4444;
	--text-secondary : #AAA;
	--text-muted     : #777;
    --white          : #FFFFFF;
}

*, *::before, *::after {
	box-sizing : border-box;
	margin     : 0;
	padding    : 0;
}


/* GENERAL ===================================================================== */

    html {
        background : #000000;  /* fallback for old browsers */
        background : -webkit-linear-gradient(90deg, #131313, #000000);  /* Chrome 10-25, Safari 5.1-6 */
        background : linear-gradient(90deg, #131313, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        min-height : 100%;
    }

    body {
        background  : transparent;
    	color       : var(--white);
    	font-family :  -apple-system, BlinkMacSystemFont, sans-serif;
    	line-height : 1.5;
    	-webkit-font-smoothing: antialiased;
    }

    .container {
    	max-width : 1200px;
    	margin    : 0 auto;
    	padding   : 40px 28px 60px;
    }

    .d-none { display: none !important; }

    .loader-area {
        height   : 50px;
        padding  : 5px 0;
        position : relative;
    }

    /* Inverted animation */
    .squares-loader.active {
        animation : rolling 1.2s infinite;
        aspect-ratio: 1;
        --g1 : conic-gradient(from  90deg at 3px  3px , var(--white) 90deg, var(--white) 0);
        --g2 : conic-gradient(from -90deg at 10px 10px, var(--white) 90deg, var(--white) 0);
        background        : var(--g1),var(--g1),var(--g1), var(--g2),var(--g2),var(--g2);
        background-size   : 8px 8px;
        background-repeat : no-repeat;
        position          : absolute;
        right             : 15px;
        top               : 11px;
        width             : 18px;
        z-index           : 10;

        transition-timing-function : ease-in;
    }

    .squares-loader.centered {
        right : calc(50% - 9px);
        top   : 30px;
    }

    @keyframes rolling {
        0%   {background-position:0    0   ,0 100%,100% 100% }
        25%  {background-position:100% 0   ,0 100%,100% 100% }
        50%  {background-position:100% 0   ,0 0   ,100% 100% }
        75%  {background-position:100% 0   ,0 0   ,0    100% }
        100% {background-position:100% 100%,0 0   ,0    100% }
    }



/* I - HEADER ================================================================== */

    .header-main {
    	align-items     : baseline;
    	display         : flex;
    	justify-content : space-between;
    	flex-wrap       : wrap;
    	gap             : 24px;
    	margin-bottom   : 24px;
    }

    .wct-title {
    	font-size: 14px;
    	font-weight: 600;
    	letter-spacing: 0.1em;
    	text-transform: uppercase;
    	color: var(--text-secondary);
    	margin-bottom: 12px;
    }

    .main-title {
    	font-size      : clamp(36px, 5vw, 56px);
    	font-weight    : 800;
    	letter-spacing : -0.03em;
    	line-height    : 1.1;
    }


/* II - NAV ==================================================================== */

    .division-nav {
    	display: flex;
    	gap: 32px;
    }

    .division-btn {
    	background  : none;
    	border      : none;
    	font-size   : 15px;
        font-weight : 500;
    	color       : var(--text-muted);
    	cursor      : pointer;
    	padding     : 8px 0;
    	position    : relative;
    	transition  : color 0.2s;
    }

    .division-btn::after {
    	content: '';
    	position: absolute;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	height: 2px;
    	background: var(--white);
    	transform: scaleX(0);
    	transition: transform 0.2s;
    }

    /* Animations */
    .division-btn:hover  { color : var(--text-secondary); }
    .division-btn.active { color : var(--white); }
    .division-btn.active::after { transform : scaleX(1); }


/* III - GLOBAL STATS ========================================================== */

    .global-stats-bar {
    	display : flex;
    	gap     : 24px;
    	padding : 24px 0;
    	border-top    : 1px solid var(--border);
    	border-bottom : 1px solid var(--border);
    }

    .global-stats-bar .stat {
    	display: flex;
    	flex-direction: column;
    	gap: 4px;
    }

    .global-stats-bar .stat .value {
    	font-size: 24px;
    	font-weight: 700;
    	letter-spacing: -0.02em;
    }

    .global-stats-bar .stat .label {
        color          : var(--text-muted);
    	font-size      : 12px;
    	font-weight    : 500;
    	letter-spacing : 0.05em;
    	text-transform : uppercase;
    }




/* IV - LEADERBOARD ========================================================== */

    /* Table Header */
        .table-header {
        	color			      : var(--text-muted);
        	display				  : grid;
        	grid-template-columns : 80px 1fr 200px 100px 140px;
        	padding				  : 12px 0;
        	border-bottom		  : 1px solid var(--border);
        	font-size			  : 11px;
        	font-weight			  : 600;
        	letter-spacing		  : 0.08em;
        	text-transform        : uppercase;
        }

    /* Table Body */
        .table-body {
            min-height : 50px;
        }

    /* Team Row */
        .team-row {
        	align-items : center;
        	display     : grid;
        	padding     : 24px 0;
        	grid-template-columns : 80px 1fr 200px 100px 140px;
        	border-bottom: 1px solid var(--border);
        	cursor: pointer;
        	transition: background 0.15s;
        }

        .team-row:hover {
        	background: var(--surface);
        	margin: 0 -24px;
        	padding-left: 24px;
        	padding-right: 24px;
        }

    /* Rank */
        .rank {
        	font-size: 13px;
        	font-weight: 600;
        	color: var(--text-muted);
        	font-variant-numeric: tabular-nums;
        }

        .team-row:nth-child(-n+4) .rank {
        	color: var(--white);
        }

    /* Team */
        .team {
        	display: flex;
        	align-items: center;
        	gap: 16px;
        }

        .team-flag {
        	text-align : center;
        	width      : 32px;
        }

		.team-flag img {
			max-width : 100%;
		}

        .team-info .team-name {
        	font-size      : 15px;
        	font-weight    : 600;
        	letter-spacing : -0.01em;
        }

        .team-info .country {
        	color      : var(--text-muted);
        	font-size  : 13px;
        	margin-top : 2px;
        }

    /* Status */
        .status {
        	display: flex;
        	align-items: center;
        	gap: 12px;
        }

        .trend {
        	display: inline-flex;
        	align-items: center;
        	gap: 4px;
        	font-size: 12px;
        	font-weight: 600;
        }

        .trend.up {
        	color: var(--green);
        }

        .trend.down {
        	color: var(--red);
        }



	/* Tag ===================================================================== */

        .tag {
        	background	  : var(--surface);
        	border        : 1px solid var(--border-light);
        	border-radius : 4px;
        	color 		  : var(--text-secondary);
        	font-size     : 11px;
        	font-weight   : 600;
        	padding       : 4px 10px;
        }

        .tag.primary {
        	background   : var(--white);
        	border-color : var(--white);
        	color  		 : var(--black);
        }

		.tag.lost { color : var(--red); }
		.tag.win  { color : var(--green); }


    /* Sparkline =============================================================== */

        .sparkline-container {
        	display : flex;
        }

        .sparkline {
        	height : 40px;
        	width  : 100px;
        }

        .sparkline svg {
        	height : 100%;
        	width  : 100%;
        }


/* VI - RESPONSIVE ============================================================= */

    @media (max-width: 900px) {
    	.container { padding: 30px 20px 45px; }
    	.global-stats-bar { gap: 32px; flex-wrap: wrap; }
    	.table-header, .team-row { grid-template-columns: 60px 1fr 180px 100px; }
    	.status { display: none; }
    	.panel-grid { grid-template-columns: 1fr;}
    }

    @media (max-width: 600px) {
    	.container     { padding: 20px 14px 30px; }
    	.main-title    { font-size: 32px; }
    	.division-nav  { gap: 24px; }
    	.global-stats-bar { gap: 24px; }
    	.stat-value       { font-size: 20px; }
    	.table-header, .team-row { grid-template-columns: 48px 1fr 150px 80px; }
    	.team-flag   { display: none; }
    }