@layer reset, base, layout, components, utilities;

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

	ul,
	ol {
		list-style: none;
	}

	button {
		font: inherit;
		color: inherit;
		background: none;
		border: none;
		cursor: pointer;
	}

	a {
		color: inherit;
		text-decoration: none;
	}

	img,
	svg {
		display: block;
		max-inline-size: 100%;
		block-size: auto;
	}

	details > summary {
		list-style: none;

		&::-webkit-details-marker {
			display: none;
		}
	}
}

@layer base {
	html {
		container-type: inline-size;
		container-name: viewport;

		scrollbar-gutter: stable;
		scrollbar-color: oklch(75% 0.01 250 / 0.5) oklch(95% 0.01 250 / 0.3);
		font-display: swap;
		overflow-x: hidden;
	}

	:root {
		/* Primary Background Colors */
		--clr-bg-primary: oklch(94% 0.02 240);
		--clr-bg-secondary: oklch(99% 0.005 240 / 0.95);
		--clr-bg-tertiary: oklch(97% 0.005 240 / 0.95);

		/* Text Colors */
		--clr-text-primary: oklch(20% 0.03 250);
		--clr-text-secondary: oklch(30% 0.02 250);
		--clr-text-muted: oklch(45% 0.02 250);

		/* Interactive Colors */
		--clr-link: oklch(45% 0.15 250);
		--clr-link-hover: oklch(35% 0.18 250);
		--clr-accent: oklch(70% 0.18 70);
		--clr-accent-secondary: oklch(65% 0.2 60);

		/* Semantic Colors */
		--clr-success: oklch(55% 0.15 145);
		--clr-warning: oklch(75% 0.18 85);
		--clr-danger: oklch(55% 0.2 25);
		--clr-info: oklch(50% 0.15 250);

		/* UI Colors */
		--clr-border: oklch(70% 0.01 250 / 0.3);
		--clr-hover-bg: oklch(98% 0.005 240 / 0.95);
		--clr-glass-bg: oklch(99% 0.005 240 / 0.85);
		--clr-glass-border: oklch(80% 0.01 240 / 0.3);
		--clr-shadow: oklch(20% 0.02 250 / 0.1);

		/* Special Colors */
		--clr-favorite: oklch(87% 0.18 90);
		--clr-favorite-glow: oklch(87% 0.18 90 / 0.6);
		--clr-badge-count: oklch(45% 0.2 25);
		--clr-game-time: oklch(50% 0.18 40);
		--clr-link-badge: oklch(50% 0.15 250);

		/* ==========================================
       FLUID SPACING SYSTEM
       ========================================== */
		--space-3xs: clamp(0.125rem, 0.1rem + 0.1cqi, 0.25rem);
		--space-2xs: clamp(0.1875rem, 0.15rem + 0.15cqi, 0.375rem);
		--space-xs: clamp(0.25rem, 0.2rem + 0.2cqi, 0.5rem);
		--space-sm: clamp(0.375rem, 0.3rem + 0.3cqi, 0.75rem);
		--space-md: clamp(0.5rem, 0.4rem + 0.4cqi, 1rem);
		--space-lg: clamp(0.75rem, 0.6rem + 0.6cqi, 1.5rem);
		--space-xl: clamp(1rem, 0.8rem + 0.8cqi, 2rem);
		--space-2xl: clamp(1.5rem, 1.2rem + 1cqi, 3rem);
		--space-3xl: clamp(2rem, 1.5rem + 1.5cqi, 4rem);

		/* ==========================================
       FLUID TYPOGRAPHY SYSTEM
       ========================================== */
		--text-xs: clamp(0.625rem, 0.55rem + 0.3cqi, 0.75rem);
		--text-sm: clamp(0.75rem, 0.7rem + 0.25cqi, 0.875rem);
		--text-base: clamp(0.875rem, 0.8rem + 0.3cqi, 1rem);
		--text-lg: clamp(1rem, 0.9rem + 0.4cqi, 1.25rem);
		--text-xl: clamp(1.125rem, 1rem + 0.5cqi, 1.5rem);
		--text-2xl: clamp(1.25rem, 1.1rem + 0.6cqi, 1.75rem);
		--text-3xl: clamp(1.5rem, 1.3rem + 0.8cqi, 2.25rem);
		--text-4xl: clamp(1.75rem, 1.5rem + 1cqi, 2.75rem);

		/* Line Heights */
		--leading-tight: 1.25;
		--leading-normal: 1.5;
		--leading-relaxed: 1.75;

		/* ==========================================
       LAYOUT GRID FRACTIONS
       Parent grid controls all column sizes
       ========================================== */
		--grid-sidebar: 0.35fr;
		--grid-main: 1fr;
		--grid-rightbar: 0.5fr;

		/* ==========================================
       HEADER HEIGHT (fluid)
       ========================================== */
		--header-block-size: clamp(60px, 8cqi, 80px);

		/* ==========================================
       BORDER RADIUS (fluid)
       ========================================== */
		--radius-sm: clamp(3px, 0.3cqi, 6px);
		--radius-md: clamp(4px, 0.4cqi, 8px);
		--radius-lg: clamp(6px, 0.6cqi, 12px);
		--radius-xl: clamp(8px, 0.8cqi, 16px);
		--radius-2xl: clamp(12px, 1cqi, 24px);
		--radius-pill: 9999px;
		--radius-full: 50%;

		/* ==========================================
       TRANSITIONS
       ========================================== */
		--transition-fast: 150ms ease;
		--transition-normal: 300ms ease;
		--transition-slow: 500ms ease;

		/* ==========================================
       SHADOWS
       ========================================== */
		--shadow-sm: 0 2px 4px var(--clr-shadow);
		--shadow-md: 0 4px 12px var(--clr-shadow);
		--shadow-lg: 0 8px 32px var(--clr-shadow);

		/* ==========================================
       TOUCH TARGET (WCAG compliance)
       ========================================== */
		--touch-target: 48px;
	}

	/* ==========================================
     DARK MODE COLOR OVERRIDES
     ========================================== */
	body.dark-mode {
		--clr-bg-primary: oklch(12% 0.02 250);
		--clr-bg-secondary: oklch(18% 0.02 250 / 0.95);
		--clr-bg-tertiary: oklch(22% 0.02 250 / 0.95);

		--clr-text-primary: oklch(95% 0.01 250);
		--clr-text-secondary: oklch(85% 0.01 250);
		--clr-text-muted: oklch(65% 0.01 250);

		--clr-link: oklch(65% 0.12 250);
		--clr-link-hover: oklch(75% 0.15 250);

		--clr-border: oklch(40% 0.02 250 / 0.5);
		--clr-hover-bg: oklch(25% 0.02 250 / 0.95);
		--clr-glass-bg: oklch(20% 0.02 250 / 0.85);
		--clr-glass-border: oklch(40% 0.02 250 / 0.3);
		--clr-shadow: oklch(5% 0.02 250 / 0.4);

		--clr-game-time: oklch(70% 0.15 50);
	}

	body.dark-mode html {
		scrollbar-color: oklch(50% 0.01 250 / 0.6) oklch(20% 0.01 250 / 0.3);
	}

	body {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
		background: linear-gradient(135deg, var(--clr-bg-primary) 0%, oklch(88% 0.03 240) 100%);
		color: var(--clr-text-primary);
		line-height: var(--leading-normal);
		min-block-size: 100dvh;
		transition: background var(--transition-normal), color var(--transition-normal);
		isolation: isolate;

		&.dark-mode {
			background: linear-gradient(135deg, oklch(10% 0.02 250) 0%, oklch(15% 0.03 250) 100%);
		}
	}
}

@layer layout {
	body {
		display: grid;
		grid:
			'header' auto
			'main' 1fr
			'right-sidebar' auto
			'footer' auto
			/ 1fr;
		min-block-size: 100dvh;
	}

	.header {
		grid-area: header;
	}

	.main-content {
		grid-area: main;
	}

	.right-sidebar {
		grid-area: right-sidebar;
	}

	.footer {
		grid-area: footer;
	}

	.header {
		position: sticky;
		inset-block-start: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-lg);
		background: var(--clr-glass-bg);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border-block-end: 1px solid var(--clr-glass-border);
		padding: var(--space-md) var(--space-lg);
		box-shadow: var(--shadow-sm);
		container-type: inline-size;
		container-name: header;
	}

	.logo {
		flex-shrink: 0;

		a {
			text-decoration: none;
			color: inherit;
		}
	}

	.logo-title {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		color: var(--clr-text-primary);
		font-weight: 600;
		font-size: var(--text-lg);
	}

	.logo-icon {
		font-size: var(--text-2xl);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.logo-text {
		display: none;
	}

	@container header (min-width: 400px) {
		.logo-text {
			display: block;
		}
	}

	.logo-image {
		inline-size: clamp(36px, 5cqi, 48px);
		block-size: clamp(36px, 5cqi, 48px);
		object-fit: contain;
		border-radius: var(--radius-lg);
	}

	.header-page-title {
		flex: 1;
		text-align: center;
		min-inline-size: 0;

		h1 {
			font-size: var(--text-xl);
			color: var(--clr-text-primary);
			margin: 0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	@container header (min-width: 600px) {
		.header-page-title h1 {
			font-size: var(--text-2xl);
		}
	}

	.header-right {
		display: flex;
		align-items: center;
		gap: var(--space-md);
		flex-shrink: 0;
	}

	.theme-toggle {
		background: var(--clr-glass-bg);
		backdrop-filter: blur(5px);
		border: 2px solid var(--clr-glass-border);
		border-radius: var(--radius-full);
		inline-size: clamp(40px, 5cqi, 48px);
		block-size: clamp(40px, 5cqi, 48px);
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		font-size: var(--text-xl);
		transition: all var(--transition-normal);
		box-shadow: var(--shadow-sm);

		&:hover {
			transform: scale(1.1) rotate(15deg);
			box-shadow: var(--shadow-md);
		}
	}

	.theme-icon {
		transition: transform var(--transition-normal);

		body.dark-mode & {
			transform: rotate(180deg);
		}
	}

	.sidebar {
		background: var(--clr-glass-bg);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border-inline-end: 1px solid var(--clr-glass-border);
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		container-type: inline-size;
		container-name: sidebar;

		&[popover] {
			padding: 0;
			border: none;
			position: fixed;
			inset-block-start: 0;
			inset-inline-start: 0;
			block-size: 100dvh;
			inline-size: min(85%, 300px);
			max-inline-size: none;
			max-block-size: none;
			z-index: 10;
			overflow-y: auto;
			overscroll-behavior: contain;
			opacity: 0;
			transform: translateX(-100%);
			transition: opacity var(--transition-normal), transform var(--transition-normal),
				display var(--transition-normal) allow-discrete;
		}

		&[popover]:popover-open {
			opacity: 1;
			transform: translateX(0);
		}

		@starting-style {
			&[popover]:popover-open {
				opacity: 0;
				transform: translateX(-100%);
			}
		}
	}

	.sidebar[popover]::backdrop {
		background: oklch(0% 0 0 / 0);
		transition: background var(--transition-normal) allow-discrete;
	}

	.sidebar[popover]:popover-open::backdrop {
		background: oklch(0% 0 0 / 0.5);
	}

	@starting-style {
		.sidebar[popover]:popover-open::backdrop {
			background: oklch(0% 0 0 / 0);
		}
	}

	.main-content {
		padding: var(--space-sm);
		min-block-size: 0;
		overflow-x: hidden;

		container-type: inline-size;
		container-name: main-content;
	}

	.right-sidebar {
		background: var(--clr-glass-bg);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border-inline-start: 1px solid var(--clr-glass-border);
		padding: var(--space-md);
		overflow-y: auto;
		container-type: inline-size;
		container-name: rightbar;
	}

	.footer {
		background: var(--clr-glass-bg);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 1px solid var(--clr-glass-border);
		border-radius: var(--radius-xl);
		padding: var(--space-xl);
		margin: var(--space-lg) var(--space-sm) var(--space-sm);
		box-shadow: var(--shadow-lg);

		container-type: inline-size;
		container-name: footer;
	}

	.burger-menu {
		display: flex;

		background: var(--clr-glass-bg);
		backdrop-filter: blur(10px);
		border: 2px solid var(--clr-glass-border);
		border-radius: var(--radius-lg);
		inline-size: 40px;
		block-size: 40px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 4px;
		cursor: pointer;
		box-shadow: var(--shadow-sm);
		flex-shrink: 0;

		span {
			inline-size: 20px;
			block-size: 2px;
			background: var(--clr-text-primary);
			border-radius: 2px;
			transition: all var(--transition-normal) ease;
		}

		&[aria-expanded='true'] {
			span:nth-child(1) {
				transform: rotate(45deg) translate(5px, 5px);
			}
			span:nth-child(2) {
				opacity: 0;
			}
			span:nth-child(3) {
				transform: rotate(-45deg) translate(5px, -5px);
			}
		}
	}

	@container viewport (min-width: 768px) {
		body {
			grid:
				'header header' auto
				'main right-sidebar' 1fr
				'footer footer' auto
				/ var(--grid-main) var(--grid-rightbar);
		}

		body:dir(rtl) {
			grid:
				'header header' auto
				'left-sidebar main' 1fr
				'footer footer' auto
				/ var(--grid-sidebar) var(--grid-main);
		}

		body:dir(rtl) .right-sidebar {
			grid-area: left-sidebar;
		}

		.main-content {
			padding: var(--space-lg);
		}

		.right-sidebar {
			padding: var(--space-lg);
			margin-inline: var(--space-md);
		}

		.footer {
			padding: var(--space-xl) var(--space-2xl);
		}
	}

	@container viewport (min-width: 1024px) {
		body {
			grid:
				'header header header' auto
				'left-sidebar main right-sidebar' 1fr
				'footer footer footer' auto
				/ var(--grid-sidebar) var(--grid-main) var(--grid-rightbar);
		}

		body:dir(rtl) {
			grid:
				'header header header' auto
				'right-sidebar main left-sidebar' 1fr
				'footer footer footer' auto
				/ var(--grid-rightbar) var(--grid-main) var(--grid-sidebar);
		}

		body:dir(rtl) .sidebar,
		body:dir(rtl) .sidebar[popover],
		body:dir(rtl) .sidebar[popover]:not(:popover-open) {
			grid-area: right-sidebar;
		}

		body:dir(rtl) .right-sidebar {
			grid-area: left-sidebar;
		}

		.sidebar {
			grid-area: left-sidebar;
		}

		.sidebar,
		.sidebar[popover],
		.sidebar[popover]:not(:popover-open) {
			position: sticky;
			inset-block-start: calc(var(--header-block-size) + var(--space-md));
			inset-inline-start: unset;
			inset-block-end: unset;
			inline-size: auto;
			max-inline-size: none;
			display: flex;
			opacity: 1;
			transform: none;
			border-radius: var(--radius-xl);
			border: 1px solid var(--clr-glass-border);
			box-shadow: var(--shadow-lg);
			block-size: calc(100dvh - var(--header-block-size) - (var(--space-md) * 3));
			margin-inline: var(--space-md);
		}

		.sidebar[popover]::backdrop {
			display: none;
		}

		.burger-menu {
			display: none;
		}

		.main-content {
			padding: var(--space-lg) var(--space-xl);
		}

		.right-sidebar {
			position: sticky;
			inset-block-start: calc(var(--header-block-size) + var(--space-md));
			padding: var(--space-xl);
			border-radius: var(--radius-xl);
			border: 1px solid var(--clr-glass-border);
			box-shadow: var(--shadow-lg);
			block-size: calc(100dvh - var(--header-block-size) - (var(--space-md) * 3));
			margin-inline: var(--space-md);
		}

		.footer {
			margin: 0 var(--space-md) var(--space-md) var(--space-md);
			border-radius: var(--radius-xl);
		}
	}
}

@layer components {
	.favorites-section {
		padding: var(--space-lg) var(--space-lg) var(--space-xl) var(--space-lg);
		border-block-end: 1px solid var(--clr-glass-border);
		background: oklch(95% 0.03 85 / 0.3);
		backdrop-filter: blur(5px);

		body.dark-mode & {
			background: oklch(30% 0.03 85 / 0.3);
		}
	}

	.favorites-link {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		color: var(--clr-text-primary);
		font-weight: 600;
		padding: var(--space-sm) var(--space-md);
		min-block-size: var(--touch-target);
		border-radius: var(--radius-md);
		transition: all var(--transition-normal);
		background: var(--clr-glass-bg);
		backdrop-filter: blur(5px);
		border: 1px solid var(--clr-glass-border);
		font-size: var(--text-base);

		&:hover {
			background: oklch(95% 0.05 85 / 0.6);
			transform: translateY(-2px);
			box-shadow: var(--shadow-md);

			body.dark-mode & {
				background: oklch(35% 0.05 85 / 0.6);
			}
		}

		&.active {
			background: linear-gradient(135deg, var(--clr-favorite) 0%, oklch(92% 0.15 95) 100%);
			color: oklch(20% 0.03 85);
			box-shadow: 0 4px 12px var(--clr-favorite-glow);
		}
	}

	.favorites-count {
		margin-inline-start: auto;
		background-color: var(--clr-badge-count);
		color: white;
		padding: var(--space-xs) var(--space-sm);
		border-radius: var(--radius-xl);
		font-size: var(--text-xs);
		font-weight: 600;
		transition: all var(--transition-normal);
		box-shadow: 0 2px 4px oklch(45% 0.2 25 / 0.3);
		min-inline-size: 24px;
		text-align: center;
	}

	.section-title {
		padding: var(--space-lg) var(--space-lg) var(--space-sm) var(--space-lg);
		font-size: var(--text-sm);
		color: var(--clr-text-secondary);
		font-weight: 600;
		text-transform: uppercase;
	}

	.sports-menu {
		flex: 1;
		overflow-y: auto;
		padding-block-end: var(--space-lg);
		scrollbar-gutter: stable;

		&::-webkit-scrollbar {
			inline-size: 8px;
		}

		&::-webkit-scrollbar-track {
			background: var(--clr-bg-tertiary);
		}

		&::-webkit-scrollbar-thumb {
			background: oklch(75% 0.01 250 / 0.5);
			border-radius: var(--radius-sm);
		}
	}

	.menu-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--space-md) var(--space-lg);
		min-block-size: var(--touch-target);
		color: var(--clr-text-primary);
		cursor: pointer;
		transition: all var(--transition-normal);
		margin: var(--space-xs) var(--space-sm);
		border-radius: var(--radius-md);
		font-size: var(--text-base);

		&:hover {
			background: var(--clr-glass-bg);
			backdrop-filter: blur(5px);
			transform: translateX(5px);
		}

		&.active {
			background-color: oklch(70% 0.18 70 / 0.2);
			border-inline-start: 3px solid var(--clr-text-primary);
		}
	}

	.menu-item-left {
		display: flex;
		align-items: center;
		gap: var(--space-md);
	}

	.sport-icon {
		inline-size: 24px;
		block-size: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: var(--text-lg);
		flex-shrink: 0;
	}

	.sport-icon-img {
		inline-size: 24px;
		block-size: 24px;
		object-fit: contain;
		display: inline-block;
		vertical-align: middle;
	}

	.sport-name {
		font-size: var(--text-base);
		font-weight: 500;
	}

	.sport-count {
		font-size: var(--text-sm);
		color: var(--clr-text-secondary);
		font-weight: 600;
		background: var(--clr-bg-tertiary);
		padding: var(--space-xs) var(--space-sm);
		border-radius: var(--radius-xl);
	}

	.date-tabs-wrapper {
		background: var(--clr-glass-bg);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 1px solid var(--clr-glass-border);
		padding: var(--space-md);
		border-radius: var(--radius-xl);
		margin-block-end: var(--space-lg);
		box-shadow: var(--shadow-lg);

		container-type: inline-size;
		container-name: tabs-wrapper;
	}

	.date-tabs {
		display: flex;
		gap: var(--space-sm);
		flex-wrap: wrap;
	}

	@container tabs-wrapper (min-width: 400px) {
		.date-tabs {
			gap: var(--space-md);
		}
	}

	.date-tab {
		padding: var(--space-sm) var(--space-lg);
		min-block-size: var(--touch-target);
		min-inline-size: clamp(60px, 20cqi, 100px);
		background: var(--clr-glass-bg);
		backdrop-filter: blur(5px);
		border: 1px solid var(--clr-glass-border);
		border-radius: var(--radius-pill);
		cursor: pointer;
		font-size: var(--text-sm);
		font-weight: 600;
		color: var(--clr-text-primary);
		transition: all var(--transition-normal);
		display: inline-flex;
		align-items: center;
		justify-content: center;

		&:hover {
			transform: translateY(-2px);
			box-shadow: var(--shadow-md);
			background: var(--clr-hover-bg);
		}

		&.active {
			background-color: var(--clr-accent-secondary);
			color: white;
		}
	}

	.content-section {
		background: var(--clr-glass-bg);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 1px solid var(--clr-glass-border);
		padding: var(--space-md);
		border-radius: var(--radius-xl);
		box-shadow: var(--shadow-lg);
		min-block-size: 400px;
		contain: layout;

		container-type: inline-size;
		container-name: content;
	}

	@container main-content (min-width: 500px) {
		.content-section {
			padding: var(--space-lg);
		}
	}

	.sport-category {
		margin-block-end: var(--space-lg);
		content-visibility: auto;
		contain-intrinsic-size: auto 500px;

		container-type: inline-size;
		container-name: sport;

		details {
			border: none;
		}
	}

	.sport-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--space-lg);
		min-block-size: 64px;
		background: var(--clr-glass-bg);
		backdrop-filter: blur(5px);
		border: 1px solid var(--clr-glass-border);
		border-radius: var(--radius-lg);
		margin-block-end: var(--space-sm);
		cursor: pointer;
		user-select: none;
		transition: all var(--transition-normal) ease;
		box-shadow: var(--shadow-md);

		&:hover {
			box-shadow: 0 6px 20px var(--clr-shadow);
			background: var(--clr-hover-bg);
		}

		&::after {
			content: '▼';
			font-size: var(--text-base);
			color: var(--clr-text-muted);
			transition: transform var(--transition-normal) ease;
			margin-inline-start: var(--space-sm);
		}

		details:not([open]) &::after {
			transform: rotate(-90deg);
		}
	}

	.sport-title {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		font-size: var(--text-lg);
		font-weight: 600;
		color: var(--clr-text-primary);
	}

	@container sport (min-width: 400px) {
		.sport-title {
			font-size: var(--text-xl);
		}
	}

	.sport-count-badge {
		background-color: oklch(15% 0.02 250) !important;
		color: white;
		padding: var(--space-xs) var(--space-md);
		border-radius: var(--radius-xl);
		font-size: var(--text-sm);
		font-weight: 600;
		box-shadow: 0 2px 8px oklch(0% 0 0 / 0.3);

		body.dark-mode & {
			background-color: oklch(30% 0.02 250) !important;
		}
	}

	.competition-group {
		margin-block-end: var(--space-sm);
		border-inline-start: 3px solid var(--clr-border);
		padding-inline-start: var(--space-md);
		transition: all var(--transition-normal);

		container-type: inline-size;
		container-name: competition;
	}

	.competition-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: var(--text-sm);
		font-weight: 600;
		margin-block-end: var(--space-sm);
		padding-block: var(--space-sm);
		min-block-size: var(--touch-target);
		gap: var(--space-md);
	}

	.competition-name {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		color: var(--clr-text-primary);
		flex-wrap: wrap;
		font-size: var(--text-sm);
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	.league-favorite {
		color: oklch(60% 0.01 250);
		cursor: pointer;
		font-size: var(--text-2xl);
		padding: var(--space-sm);
		min-inline-size: var(--touch-target);
		min-block-size: var(--touch-target);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all var(--transition-normal) ease;
		flex-shrink: 0;
		margin-inline-start: var(--space-sm);

		&:hover {
			color: var(--clr-favorite);
			transform: scale(1.2);
			filter: drop-shadow(0 0 8px var(--clr-favorite-glow));
		}

		&.favorited {
			color: var(--clr-favorite);
			filter: drop-shadow(0 0 8px var(--clr-favorite-glow));
		}
	}

	.competition-group:has(.league-favorite.favorited) {
		border-inline-start-color: var(--clr-favorite);
		background: oklch(87% 0.18 90 / 0.05);
		border-radius: 0 var(--radius-md) var(--radius-md) 0;
	}

	.game-item-details {
		border-block-end: 1px solid var(--clr-border);

		container-type: inline-size;
		container-name: game;
	}

	.game-item-summary {
		display: flex;
		align-items: center;
		padding-inline-start: var(--space-sm);
		min-block-size: 64px;
		transition: all var(--transition-normal) ease;
		cursor: pointer;
		background: var(--clr-glass-bg);
		backdrop-filter: blur(3px);
		margin-block: var(--space-sm);
		border-radius: var(--radius-md);

		&:hover {
			background: var(--clr-hover-bg);
			box-shadow: var(--shadow-md);
			transform: translateX(3px);
		}
	}

	.game-time {
		font-size: var(--text-base);
		color: var(--clr-game-time);
		font-weight: 700;
		min-inline-size: 50px;
	}

	.game-teams {
		flex: 1;
		margin-inline-start: var(--space-md);
	}

	.team {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		margin-block: var(--space-xs);
		font-size: var(--text-base);
		font-weight: 500;
		color: var(--clr-text-primary);
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	.team-icon {
		inline-size: 24px;
		block-size: 24px;
		background: linear-gradient(135deg, oklch(85% 0.01 250) 0%, oklch(75% 0.01 250) 100%);
		border-radius: var(--radius-full);
		flex-shrink: 0;
	}

	.game-actions {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		margin-inline-start: auto;
		flex-shrink: 0;
	}

	.link-count-badge {
		background: linear-gradient(135deg, var(--clr-link-badge) 0%, oklch(45% 0.18 250) 100%);
		color: white;
		padding: var(--space-sm) var(--space-md);
		border-radius: 14px;
		font-size: var(--text-sm);
		font-weight: 700;
		min-inline-size: 32px;
		min-block-size: 28px;
		text-align: center;
		transition: all var(--transition-normal) ease;
		box-shadow: 0 2px 8px oklch(50% 0.15 250 / 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.favorite-star {
		color: oklch(60% 0.01 250);
		cursor: pointer;
		font-size: var(--text-2xl);
		padding: var(--space-sm);
		min-inline-size: var(--touch-target);
		min-block-size: var(--touch-target);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.4s ease;
		filter: drop-shadow(0 2px 4px oklch(0% 0 0 / 0.2));
		flex-shrink: 0;
		margin-inline-start: var(--space-sm);

		&:hover {
			color: oklch(92% 0.15 95);
			transform: scale(1.2);
			filter: drop-shadow(0 0 8px var(--clr-favorite-glow));
		}

		&.favorited {
			color: var(--clr-favorite);
			filter: drop-shadow(0 0 8px var(--clr-favorite-glow));
			animation: starPulse 2s ease-in-out infinite;
		}
	}

	.game-item-details:has(.favorite-star.favorited) {
		.game-item-summary {
			background: oklch(87% 0.18 90 / 0.08);
			border-inline-start: 3px solid var(--clr-favorite);
		}

		body.dark-mode & .game-item-summary {
			background: oklch(87% 0.18 90 / 0.1);
		}
	}

	@keyframes starPulse {
		0%,
		100% {
			transform: scale(1);
		}
		50% {
			transform: scale(1.1);
		}
	}

	.game-links-container {
		padding: var(--space-md);
		background: var(--clr-bg-tertiary);
		backdrop-filter: blur(5px);
		border-block-start: 1px solid var(--clr-border);

		container-type: inline-size;
		container-name: links;
	}

	.game-links-title {
		font-size: var(--text-sm);
		font-weight: 600;
		color: var(--clr-text-secondary);
		margin-block-end: var(--space-sm);
	}

	.game-links-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-sm);
	}

	@container links (min-width: 300px) {
		.game-links-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@container links (min-width: 500px) {
		.game-links-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	@container links (min-width: 700px) {
		.game-links-grid {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	.link-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-sm);
		padding: var(--space-sm) var(--space-md);
		min-block-size: var(--touch-target);
		background: var(--clr-glass-bg);
		backdrop-filter: blur(5px);
		border-radius: var(--radius-md);
		color: var(--clr-text-primary);
		font-size: var(--text-sm);
		font-weight: 500;
		transition: all var(--transition-normal) ease;
		border: 1px solid var(--clr-glass-border);
		box-shadow: var(--shadow-sm);

		&:hover {
			background: var(--clr-hover-bg);
			transform: translateY(-3px);
			box-shadow: 0 6px 20px var(--clr-shadow);
			color: var(--clr-link-hover);
		}
	}

	.link-item-content {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
	}

	.link-badge {
		background: linear-gradient(135deg, var(--clr-link-badge) 0%, oklch(45% 0.18 250) 100%);
		color: white;
		padding: var(--space-xs) var(--space-sm);
		border-radius: var(--radius-sm);
		font-size: var(--text-xs);
		font-weight: 600;
		box-shadow: 0 2px 4px oklch(50% 0.15 250 / 0.3);
	}

	.external-icon {
		color: var(--clr-text-muted);
		font-size: var(--text-base);
		transition: all var(--transition-normal);

		.link-item:hover & {
			color: var(--clr-link-hover);
			transform: translate(2px, -2px);
		}
	}

	.skeleton-loader {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
		padding-block: var(--space-sm);
	}

	.skeleton-item {
		block-size: var(--touch-target);
		background: linear-gradient(90deg, var(--clr-bg-tertiary) 0%, var(--clr-hover-bg) 50%, var(--clr-bg-tertiary) 100%);
		background-size: 200% 100%;
		border-radius: var(--radius-md);
		animation: skeleton-loading 1.5s infinite;
	}

	@keyframes skeleton-loading {
		0% {
			background-position: 200% 0;
		}
		100% {
			background-position: -200% 0;
		}
	}

	.no-games {
		text-align: center;
		padding: var(--space-2xl);
		color: var(--clr-text-muted);
		font-size: var(--text-base);
	}

	.footer-content {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-xl);
		margin-block-end: var(--space-lg);
	}

	@container footer (min-width: 400px) {
		.footer-content {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@container footer (min-width: 700px) {
		.footer-content {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	@container footer (min-width: 900px) {
		.footer-content {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	.footer-section {
		h2 {
			color: var(--clr-text-primary);
			font-size: var(--text-lg);
			margin-block-end: var(--space-md);
			font-weight: 600;
		}

		ul li a {
			color: var(--clr-text-secondary);
			font-size: var(--text-sm);
			transition: color var(--transition-normal);
			display: inline-block;
			min-block-size: var(--touch-target);
			min-inline-size: var(--touch-target);
			padding: var(--space-md) var(--space-sm);
			line-height: var(--leading-normal);

			&:hover {
				color: var(--clr-link);
			}
		}

		p {
			color: var(--clr-text-secondary);
			font-size: var(--text-sm);
			line-height: var(--leading-relaxed);
		}
	}

	.footer-bottom {
		border-block-start: 1px solid var(--clr-glass-border);
		padding-block-start: var(--space-lg);
		text-align: center;
		color: var(--clr-text-muted);
		font-size: var(--text-sm);
	}

	.sidebar-content {
		h2 {
			margin-block-end: var(--space-lg);
			color: var(--clr-text-primary);
			font-size: var(--text-xl);
		}

		p {
			color: var(--clr-text-secondary);
			line-height: var(--leading-relaxed);
		}
	}

	/* ==========================================
    LANGUAGE SWITCHER - GRID LAYOUT
    ==========================================*/

	.language-switcher {
		position: relative;
	}

	.language-toggle {
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		background: var(--clr-glass-bg);
		backdrop-filter: blur(5px);
		border: 2px solid var(--clr-glass-border);
		border-radius: var(--radius-lg);
		padding: var(--space-sm) var(--space-md);
		cursor: pointer;
		font-size: var(--text-lg);
		transition: all var(--transition-normal);
		box-shadow: var(--shadow-sm);
		min-block-size: 40px;

		&:hover {
			transform: translateY(-2px);
			box-shadow: var(--shadow-md);
			background: var(--clr-hover-bg);
		}

		&[aria-expanded='true'] {
			border-color: var(--clr-link);
		}
	}

	.current-flag {
		width: 24px;
		height: 18px;
		object-fit: cover;
		border-radius: 3px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	}

	.language-arrow {
		font-size: var(--text-xs);
		color: var(--clr-text-muted);
		transition: transform var(--transition-normal);

		.language-toggle[aria-expanded='true'] & {
			transform: rotate(180deg);
		}
	}

	.language-dropdown {
		position: absolute;
		top: calc(100% + var(--space-sm));
		right: 0;
		background: var(--clr-glass-bg);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 1px solid var(--clr-glass-border);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-lg);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: all var(--transition-normal);
		z-index: 100;

		/* Grid layout for flags */
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
		gap: var(--space-xs);
		padding: var(--space-sm);

		/* Responsive sizing - Option B: prevents horizontal overflow */
		min-inline-size: 200px;
		max-inline-size: min(450px, 90vw);
		max-block-size: clamp(280px, 60vh, 420px);
		overflow-y: auto;

		&.open {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}

		/* Custom scrollbar */
		&::-webkit-scrollbar {
			width: 6px;
		}

		&::-webkit-scrollbar-track {
			background: transparent;
		}

		&::-webkit-scrollbar-thumb {
			background: var(--clr-text-muted);
			border-radius: 3px;
		}

		&::-webkit-scrollbar-thumb:hover {
			background: var(--clr-text-secondary);
		}
	}

	/* Compact flag-only option */
	.language-option {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--space-sm);
		border-radius: var(--radius-md);
		transition: all var(--transition-normal);
		text-decoration: none;
		position: relative;
		aspect-ratio: 1;
		min-width: 44px;
		min-height: 44px;

		&:hover {
			background: var(--clr-hover-bg);
			transform: scale(1.1);
		}

		&.active {
			background: oklch(70% 0.18 70 / 0.15);
			box-shadow: 0 0 0 2px var(--clr-link);
		}

		/* Tooltip on hover - shows language name */
		&::after {
			content: attr(data-lang-name);
			position: absolute;
			bottom: 100%;
			left: 50%;
			transform: translateX(-50%);
			background: var(--clr-bg-primary);
			color: var(--clr-text-primary);
			padding: var(--space-xs) var(--space-sm);
			border-radius: var(--radius-sm);
			font-size: var(--text-xs);
			white-space: nowrap;
			opacity: 0;
			visibility: hidden;
			transition: all var(--transition-fast);
			pointer-events: none;
			box-shadow: var(--shadow-md);
			border: 1px solid var(--clr-glass-border);
			z-index: 10;
		}

		&:hover::after {
			opacity: 1;
			visibility: visible;
			bottom: calc(100% + 5px);
		}
	}

	.lang-flag {
		width: 28px;
		height: 21px;
		object-fit: cover;
		border-radius: 3px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
	}

	/* Hide text elements in compact mode */
	.lang-name,
	.lang-check {
		display: none;
	}

	/* ==========================================
   RTL SUPPORT FOR LANGUAGE DROPDOWN
   ========================================== */

	[dir='rtl'] .language-dropdown {
		right: auto;
		left: 0;
	}

	[dir='rtl'] .language-toggle {
		flex-direction: row-reverse;
	}

	[dir='rtl'] .language-option::after {
		left: auto;
		right: 50%;
		transform: translateX(50%);
	}

	[dir='rtl'] .language-option:hover::after {
		transform: translateX(50%);
	}

	@layer utilities {
		.sr-only {
			position: absolute;
			inline-size: 1px;
			block-size: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border-width: 0;
		}

		.desktop-only {
			display: none;
		}

		@container viewport (min-width: 1024px) {
			.desktop-only {
				display: block;
			}
		}

		.mobile-only {
			display: block;
		}

		@container viewport (min-width: 1024px) {
			.mobile-only {
				display: none;
			}
		}
	}
}

/* ==========================================
   RTL (RIGHT-TO-LEFT) SUPPORT
   ========================================== */

/* Base RTL direction */

[dir='rtl'] {
	text-align: right;
}

[dir='rtl'] .header-page-title {
	text-align: center;
}

/* ==========================================
   RTL HEADER - FULL MIRROR
   ========================================== */

[dir='rtl'] .header {
	flex-direction: row-reverse;
}

[dir='rtl'] .logo {
	order: 1;
}

[dir='rtl'] .header-page-title {
	order: 0;
}

[dir='rtl'] .header-right {
	order: -1;
	flex-direction: row-reverse;
}

[dir='rtl'] .burger-menu {
	order: -2;
}

[dir='rtl'] .logo-title {
	flex-direction: row-reverse;
}

/* ==========================================
   RTL LANGUAGE DROPDOWN
   ========================================== */

[dir='rtl'] .language-dropdown {
	right: auto;
	left: 0;
}

[dir='rtl'] .language-toggle {
	flex-direction: row-reverse;
}

[dir='rtl'] .language-option::after {
	left: auto;
	right: 50%;
	transform: translateX(50%);
}

[dir='rtl'] .language-option:hover::after {
	transform: translateX(50%);
}

/* ==========================================
   RTL SIDEBAR & NAVIGATION
   ========================================== */

[dir='rtl'] .sidebar[popover] {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

[dir='rtl'] .menu-item {
	flex-direction: row-reverse;
	text-align: right;
}

[dir='rtl'] .favorites-link {
	flex-direction: row-reverse;
}

[dir='rtl'] .sidebar-content {
	text-align: right;
}

/* ==========================================
   RTL SPORT SECTIONS
   ========================================== */

[dir='rtl'] .sport-header {
	flex-direction: row-reverse;
}

[dir='rtl'] .sport-header::after {
	margin-inline-start: 0;
	margin-inline-end: var(--space-sm);
}

[dir='rtl'] .sport-title {
	flex-direction: row-reverse;
}

[dir='rtl'] .competition-group {
	border-inline-start: none;
	border-inline-end: 3px solid var(--clr-border);
	padding-inline-start: 0;
	padding-inline-end: var(--space-md);
}

[dir='rtl'] .competition-header {
	flex-direction: row-reverse;
}

[dir='rtl'] .competition-name {
	flex-direction: row-reverse;
}

/* ==========================================
   RTL GAME CARDS
   ========================================== */

[dir='rtl'] .game-card {
	flex-direction: row-reverse;
}

[dir='rtl'] .game-teams {
	text-align: right;
}

[dir='rtl'] .game-actions {
	flex-direction: row-reverse;
}

[dir='rtl'] .game-favorite {
	margin-inline-start: 0;
	margin-inline-end: var(--space-sm);
}

/* ==========================================
   RTL LINKS PANEL
   ========================================== */

[dir='rtl'] .link-item {
	flex-direction: row-reverse;
}

[dir='rtl'] .link-arrow {
	transform: rotate(180deg);
}

[dir='rtl'] .link-item:hover .link-arrow {
	transform: rotate(180deg) translate(-2px, -2px);
}

/* ==========================================
   RTL TABS / FILTERS
   ========================================== */

[dir='rtl'] .date-tabs {
	flex-direction: row-reverse;
}

[dir='rtl'] .filter-tabs {
	flex-direction: row-reverse;
}

/* ==========================================
   RTL FOOTER
   ========================================== */

[dir='rtl'] .footer-content {
	direction: rtl;
}

[dir='rtl'] .footer-section {
	text-align: right;
}

[dir='rtl'] .footer-section ul {
	padding-right: 0;
}

/* ==========================================
   RTL ANIMATIONS
   ========================================== */

[dir='rtl'] details:not([open]) .sport-header::after {
	transform: rotate(90deg);
}

/* ==========================================
   RTL FORM ELEMENTS
   ========================================== */

[dir='rtl'] input,
[dir='rtl'] select,
[dir='rtl'] textarea {
	text-align: right;
}

/* ==========================================
   RTL UTILITY - Keep Numbers LTR
   ========================================== */

[dir='rtl'] .game-time,
[dir='rtl'] .sport-count-badge,
[dir='rtl'] time {
	direction: ltr;
	unicode-bidi: isolate;
}

[dir='rtl'] .force-ltr {
	direction: ltr;
	unicode-bidi: isolate;
}

/* ==========================================
   RTL FAVORITES LINK
   ========================================== */

[dir='rtl'] .favorites-link {
	flex-direction: row-reverse;
}

[dir='rtl'] .favorites-count {
	margin-inline-start: 0;
	margin-inline-end: auto;
	order: -1;
}

/* ==========================================
   RTL MENU ITEMS (Sports list)
   ========================================== */

[dir='rtl'] .menu-item {
	flex-direction: row-reverse;
}

[dir='rtl'] .menu-item-left {
	flex-direction: row; /* Keep icon on right of name */
}

[dir='rtl'] .sport-count {
	margin-inline-start: 0;
	margin-inline-end: auto;
}

/* Fix hover transform direction */
[dir='rtl'] .menu-item:hover {
	transform: translateX(-5px);
}

/* ==========================================
   RTL SECTION TITLE
   ========================================== */

[dir='rtl'] .section-title {
	text-align: right;
}