/* VŠEOBECNÉ: Home Page + Sport-neaktivny + spoločné prvky */
@import url("../sgcr-page-transitions.css");
@import url("../sgcr-page-loader.css");

/* ANIMACIE — spring cez --sgcr-spring (overshoot škáluje s distance) */
@keyframes spin {
	0% { --angle: 0deg; }
	100% { --angle: 360deg; }
}

@keyframes prichodTlacidiel {
	0% { left: 50px; opacity: 0; }
	100% { left: 0px; opacity: 1; }
}

@keyframes prichodNadpisuSportov {
	0% { left: 50px; opacity: 0; }
	100% { left: 0px; opacity: 0.5; }
}

@keyframes prichodNadpisuKP {
	0% { right: 100px; opacity: 0; }
	100% { right: 0px; opacity: 1; }
}

@keyframes prichodSportoveTurnaje {
	0% { left: 100px; opacity: 0; }
	100% { left: 0px; opacity: 1; }
}

@keyframes prichodKontajneru {
	0% { transform: translateY(42px) scale(0.97); opacity: 0; }
	100% { transform: translateY(0px) scale(1); opacity: 1; }
}

/* Posun cez margin (nie transform) — aby :hover mohol škálovať celé tlačidlo bez konfliktu s animáciou */
@keyframes prichodTlacidlaSpat {
	0% { margin-left: -50px; opacity: 0; }
	100% { margin-left: 0; opacity: 1; }
}


/* GLOBÁLNE NASTAVENIA */
html { overflow-x: clip; }

:root {
	--sgcr-bg-base: rgb(10, 10, 10);
	--sgcr-spring: linear(
		0,
		0.004 0.8%,
		0.02 1.8%,
		0.1 5%,
		0.26 10%,
		0.52 18%,
		0.78 28%,
		0.94 38%,
		1.055 52%,
		1.07 58%,
		1.02 68%,
		0.988 78%,
		1.004 88%,
		1
	);
	--sgcr-spring-soft: linear(
		0,
		0.06 7%,
		0.3 18%,
		0.68 36%,
		0.94 50%,
		1.04 62%,
		0.992 78%,
		1.002 90%,
		1
	);
	--sgcr-accent: rgb(0, 248, 83);
	--sgcr-accent-alt: rgb(0, 255, 128);
	--sgcr-accent-muted: rgb(0, 255, 123);
	--sgcr-accent-shimmer: rgb(180, 255, 210);
	--sgcr-accent-rgb: 0, 248, 83;
	--sgcr-accent-alt-rgb: 0, 255, 128;
	--sgcr-accent-muted-rgb: 0, 255, 123;
	--sgcr-accent-glow-rgb: 0, 160, 52;
	--sgcr-accent-shimmer-rgb: 180, 255, 210;
	--sgcr-bg-top-glow: radial-gradient(
		ellipse 120vw 90vh at 50% 0%,
		rgba(var(--sgcr-accent-glow-rgb), 0.14),
		rgba(var(--sgcr-accent-glow-rgb), 0.05) 42%,
		transparent 78%
	);
}

html[data-sgcr-theme="gold"] {
	--sgcr-accent: rgb(255, 179, 48);
	--sgcr-accent-alt: rgb(255, 200, 90);
	--sgcr-accent-muted: rgb(255, 179, 48);
	--sgcr-accent-shimmer: rgb(255, 209, 138);
	--sgcr-accent-rgb: 255, 179, 48;
	--sgcr-accent-alt-rgb: 255, 200, 90;
	--sgcr-accent-muted-rgb: 255, 179, 48;
	--sgcr-accent-glow-rgb: 255, 140, 20;
	--sgcr-accent-shimmer-rgb: 255, 241, 207;
	--sgcr-bg-top-glow: radial-gradient(
		ellipse 115% 100% at 50% 0%,
		rgba(255, 179, 48, 0.11),
		rgba(255, 179, 48, 0.045) 42%,
		transparent 90%
	);
	color-scheme: dark;
}

body {
	margin: 0;
	padding: 0;
	min-height: 100dvh;
	background: var(--sgcr-bg-top-glow), var(--sgcr-bg-base);
	background-repeat: no-repeat;
	background-attachment: fixed;
	flex-wrap: wrap;
	overflow-x: clip;
	transition: background 0.65s ease;
}

* {
	font-family: "Commissioner", sans-serif;
	box-sizing: border-box;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; }

.hlavny-kontajner {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 95dvh;
	margin: auto;
}

.nadpis-KP {
	color: transparent;
	background: linear-gradient(to right, var(--sgcr-accent-alt), var(--sgcr-accent));
	-webkit-background-clip: text;
	text-shadow: 0px 0px 50px rgba(var(--sgcr-accent-alt-rgb), 0.2);
	position: relative;
	font-size: 5.5rem;
	font-weight: bold;
	top: 5px;
	animation: 1.05s prichodNadpisuKP var(--sgcr-spring) var(--delay) both;
	transition: 0.5s ease;
	white-space: nowrap;
}

.nadpis-KP:hover { transform: scale(1.02); cursor: default; }

.nadpis-sportove-turnaje {
	font-size: 0.85rem;
	position: relative;
	top: 80px;
	color: var(--sgcr-accent);
	background: rgba(var(--sgcr-accent-muted-rgb), 0.12);
	border: 1px solid rgba(var(--sgcr-accent-rgb), 0.3);
	text-shadow: 0px 0px 5px black;
	box-shadow: 0px 0px 50px rgba(var(--sgcr-accent-alt-rgb), 0.1);
	width: 11rem;
	height: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 100px;
	letter-spacing: 1px;
	animation: 1.05s prichodSportoveTurnaje var(--sgcr-spring) var(--delay) both;
	transition: 0.5s ease;
}

.nadpis-sportove-turnaje:hover { transform: scale(1.02); cursor: default; }

.kontajner-sportov {
	height: 390px;
	width: 500px;
	background-color: rgb(16, 16, 16);
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	position: relative;
	border-radius: 10px;
	flex-direction: column;
	row-gap: 12px;
	animation: 0.55s prichodKontajneru var(--delay) var(--sgcr-spring-soft) both;
	border: 1px solid rgba(var(--sgcr-accent-rgb), 0.16);
	box-shadow: 0 0 12px rgba(var(--sgcr-accent-rgb), 0.07);
	overflow: hidden;
	isolation: isolate;
	bottom: 50px;
}

/* Horný glow kruh + inner glow (ako .rozpis-zapasov) */
.kontajner-sportov::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 0;
	box-shadow: inset 0 0 22px rgba(var(--sgcr-accent-rgb), 0.05);
	background: radial-gradient(
		ellipse 100% 58% at 50% 0%,
		rgba(var(--sgcr-accent-rgb), 0.07),
		rgba(var(--sgcr-accent-rgb), 0.02) 42%,
		transparent 68%
	);
}

.kontajner-sportov > * {
	position: relative;
	z-index: 1;
}

.nadpis-kontajneru-sportov {
	font-size: 0.85rem;
	letter-spacing: 2px;
	position: relative;
	bottom: 5px;
	animation: 0.72s prichodNadpisuSportov var(--sgcr-spring) var(--delay) both;
}

.sportove-tlacidlo {
	font-weight: 450;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 0.55rem;
	padding-left: 20px;
	width: 80%;
	height: 15%;
	position: relative;
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.94);
	border: 1px solid rgba(245, 245, 245, 0.11);
	background: linear-gradient(
		180deg,
		rgba(20, 22, 20, 0.98) 0%,
		rgba(15, 16, 15, 0.99) 100%
	);
	border-radius: 8px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	animation: 0.72s prichodTlacidiel var(--sgcr-spring) var(--delay) both;
	overflow: hidden;
	isolation: isolate;
	transition:
		border-color 0.28s ease,
		box-shadow 0.28s ease,
		background 0.28s ease,
		transform 0.28s ease,
		color 0.28s ease;
}

.sportove-tlacidlo::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 0;
	opacity: 0;
	transition: opacity 0.45s ease;
	box-shadow: inset 0 0 20px rgba(var(--sgcr-accent-rgb), 0.05);
	background: radial-gradient(
		ellipse 100% 58% at 50% 0%,
		rgba(var(--sgcr-accent-rgb), 0.07),
		rgba(var(--sgcr-accent-rgb), 0.02) 42%,
		transparent 68%
	);
}

.sportove-tlacidlo > * {
	position: relative;
	z-index: 1;
}

/* Aktívny šport na Home — jemne odlišný, bez zmeny veľkosti */
.sportove-tlacidlo--aktivny {
	border-color: rgba(var(--sgcr-accent-rgb), 0.3);
	box-shadow:
		inset 0 1px 0 rgba(var(--sgcr-accent-rgb), 0.1),
		0 0 14px rgba(var(--sgcr-accent-rgb), 0.1),
		inset 0 0 20px rgba(var(--sgcr-accent-rgb), 0.05);
}

.sportove-tlacidlo--aktivny::before {
	opacity: 1;
}

.sportove-tlacidlo--aktivny:hover {
	border-color: rgba(var(--sgcr-accent-rgb), 0.4);
	box-shadow:
		inset 0 1px 0 rgba(var(--sgcr-accent-rgb), 0.12),
		0 0 16px rgba(var(--sgcr-accent-rgb), 0.14),
		inset 0 0 22px rgba(var(--sgcr-accent-rgb), 0.07);
}

/* gap ≈ medzera za emoji (ostatné tlačidlá majú ikonu + medzeru v jednom texte) */
.sportove-tlacidlo--florbal {
	gap: 0.12em;
	overflow: visible;
	align-items: center;
}

.sportove-tlacidlo--florbal > span {
	line-height: 1;
	display: inline-flex;
	align-items: center;
}

.sport-ikona-florbal {
	width: 1.45em;
	height: 1.45em;
	flex-shrink: 0;
	display: block;
	object-fit: contain;
	/* optické vertikálne zarovnanie s textom */
	translate: 0 0.02em;
	filter:
		drop-shadow(0 0 4px rgba(255, 255, 255, 0.18))
		drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.sportove-tlacidlo:hover {
	border-color: rgba(var(--sgcr-accent-rgb), 0.32);
	transform: scale(1.02);
	cursor: pointer;
	color: #fff;
	background: linear-gradient(
		180deg,
		rgba(22, 24, 22, 0.98) 0%,
		rgba(16, 17, 16, 0.99) 100%
	);
	box-shadow:
		inset 0 1px 0 rgba(var(--sgcr-accent-rgb), 0.1),
		0 0 12px rgba(var(--sgcr-accent-rgb), 0.08),
		inset 0 0 20px rgba(var(--sgcr-accent-rgb), 0.05);
}

.sportove-tlacidlo:hover::before {
	opacity: 1;
}

.nadpis-kontajneru-sportov:hover { transform: scale(1.02); cursor: default; }
.sportove-tlacidlo:active { transform: scale(0.97); }

/* Šport zatiaľ neaktívny */
.sport-neaktivny-page {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.sport-neaktivny-header {
	width: 100%;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
	position: relative;
}

.sport-neaktivny-main {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 1.25rem 2.5rem;
	box-sizing: border-box;
}

.sport-neaktivny-karta {
	max-width: 26rem;
	width: 100%;
	padding: 1.5rem 1.35rem;
	background: rgb(16, 16, 16);
	border: 1px solid rgba(var(--sgcr-accent-rgb), 0.16);
	border-radius: 12px;
	text-align: center;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	box-shadow: 0 0 12px rgba(var(--sgcr-accent-rgb), 0.07);
}

/* Horný glow kruh + inner glow (ako .kontajner-sportov) */
.sport-neaktivny-karta::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 0;
	box-shadow: inset 0 0 22px rgba(var(--sgcr-accent-rgb), 0.05);
	background: radial-gradient(
		ellipse 100% 58% at 50% 0%,
		rgba(var(--sgcr-accent-rgb), 0.07),
		rgba(var(--sgcr-accent-rgb), 0.02) 42%,
		transparent 68%
	);
}

.sport-neaktivny-karta > * {
	position: relative;
	z-index: 1;
}

.sport-neaktivny-ikona {
	margin: 0 0 0.75rem;
	font-size: 1.75rem;
	color: rgba(var(--sgcr-accent-rgb), 0.55);
}

.sport-neaktivny-nadpis {
	margin: 0 0 0.65rem;
	font-size: 1.15rem;
	font-weight: 600;
	color: rgba(245, 246, 250, 0.96);
	line-height: 1.35;
	letter-spacing: 0.02em;
}

.sport-neaktivny-podnadpis {
	margin: 0 0 0.5rem;
	font-size: 0.82rem;
	color: rgba(var(--sgcr-accent-rgb), 0.65);
	letter-spacing: 0.04em;
}

.sport-neaktivny-text {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: rgba(165, 170, 186, 0.95);
}

.sport-neaktivny-text strong {
	color: rgba(var(--sgcr-accent-rgb), 0.85);
	font-weight: 600;
}

.sport-neaktivny-aktivny-odkaz {
	color: rgba(var(--sgcr-accent-rgb), 0.85);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(var(--sgcr-accent-rgb), 0.45);
	text-underline-offset: 0.15em;
	cursor: pointer;
}

.sport-neaktivny-aktivny-odkaz:hover {
	color: rgba(var(--sgcr-accent-rgb), 1);
	text-decoration-color: rgba(var(--sgcr-accent-rgb), 0.75);
}

.sport-neaktivny-aktivny-odkaz strong {
	font-weight: 600;
}

/* Spoločné tlačidlo Späť (používa Home/Sport-neaktivny aj športové stránky) */
.tlacidlo-spat {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	height: 2.05rem;
	left: 2rem;
	top: 2rem;
	width: auto;
	min-width: 5rem;
	padding: 0 0.85rem;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 0.78rem;
	font-weight: 550;
	letter-spacing: 0.04em;
	background: linear-gradient(
		180deg,
		rgba(255, 72, 72, 0.16) 0%,
		rgba(255, 48, 48, 0.1) 100%
	);
	border: 1px solid rgba(255, 82, 82, 0.32);
	border-radius: 9px;
	color: rgba(255, 112, 112, 0.95);
	text-shadow: none;
	box-shadow:
		inset 0 1px 0 rgba(255, 120, 120, 0.12),
		0 0 14px rgba(255, 60, 60, 0.06);
	animation: prichodTlacidlaSpat 0.72s var(--sgcr-spring) both;
	will-change: margin-left, opacity;
	transition:
		transform 0.2s ease,
		border-color 0.2s ease,
		background 0.2s ease,
		box-shadow 0.2s ease,
		color 0.2s ease,
		width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		min-width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		padding 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		gap 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		font-size 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	transform-origin: center center;
}

.tlacidlo-spat-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	transition: gap 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.tlacidlo-spat-inner p { margin: 0; }

.tlacidlo-spat .sipka {
	font-size: 0.85rem;
	line-height: 1;
	opacity: 0.9;
	transform: translateY(-0.5px);
	flex-shrink: 0;
}

.tlacidlo-spat .text {
	line-height: 1;
	max-width: 4.5rem;
	overflow: hidden;
	white-space: nowrap;
	opacity: 1;
	transition:
		max-width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.3s ease,
		margin 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.tlacidlo-spat:hover {
	cursor: pointer;
	transform: scale(1.03);
	border-color: rgba(255, 100, 100, 0.45);
	color: rgb(255, 140, 140);
	background: linear-gradient(
		180deg,
		rgba(255, 72, 72, 0.22) 0%,
		rgba(255, 48, 48, 0.14) 100%
	);
	box-shadow:
		inset 0 1px 0 rgba(255, 140, 140, 0.16),
		0 0 18px rgba(255, 60, 60, 0.12);
}

.tlacidlo-spat:active {
	transform: scale(0.98);
}

/* Neaktívny šport: tlačidlo Späť je v headeri, nie absolutne */
.sport-neaktivny-header .tlacidlo-spat {
	position: relative;
	left: auto;
	top: auto;
}

/* ——— Home Page: voliteľné efekty (panel + triedy hp-fx-*) ——— */

.home-podnadpis-kp,
.home-podtext-sporty {
	display: none;
	margin: 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	color: #5f6773;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.72rem;
}

.home-podnadpis-kp {
	margin-top: -0.35rem;
	margin-bottom: 0.25rem;
}

.home-podtext-sporty {
	font-size: 0.65rem;
	letter-spacing: 0.08em;
	text-transform: none;
	margin-top: -0.35rem;
	margin-bottom: 0.15rem;
}

body.hp-fx-podnadpis .home-podnadpis-kp {
	display: block;
}

body.hp-fx-podtext-sporty .home-podtext-sporty {
	display: block;
}

@keyframes hp-glow-breath {
	0%, 100% { opacity: 0.75; transform: scaleY(1); }
	50% { opacity: 1; transform: scaleY(1.06); }
}

@keyframes hp-kontajner-glow-breath {
	0%, 100% { opacity: 0.85; }
	50% { opacity: 1; }
}

@keyframes hp-kp-shimmer {
	0% { background-position: 180% 0; }
	55%, 100% { background-position: -80% 0; }
}

@keyframes hp-pill-pulse {
	0%, 100% {
		border-color: rgba(var(--sgcr-accent-rgb), 0.22);
		box-shadow: 0 0 10px rgba(var(--sgcr-accent-rgb), 0.06);
	}
	50% {
		border-color: rgba(var(--sgcr-accent-rgb), 0.38);
		box-shadow: 0 0 18px rgba(var(--sgcr-accent-rgb), 0.12);
	}
}

@keyframes hp-tlacidlo-breath {
	0%, 100% {
		border-color: rgba(245, 245, 245, 0.1);
		box-shadow: none;
	}
	50% {
		border-color: rgba(var(--sgcr-accent-rgb), 0.14);
		box-shadow: 0 0 10px rgba(var(--sgcr-accent-rgb), 0.05);
	}
}

body.hp-fx-glow-body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background: radial-gradient(
		ellipse 120vw 90vh at 50% 0%,
		rgba(var(--sgcr-accent-glow-rgb), 0.14),
		rgba(var(--sgcr-accent-glow-rgb), 0.05) 42%,
		transparent 78%
	);
	transform-origin: 50% 0%;
	animation: hp-glow-breath 7s ease-in-out infinite;
}

body.hp-fx-glow-body .hlavny-kontajner {
	position: relative;
	z-index: 2;
}

body.hp-fx-glow-kontajner .kontajner-sportov::before {
	animation: hp-kontajner-glow-breath 5.5s ease-in-out infinite;
}

body.hp-fx-shimmer-kp .nadpis-KP {
	background: linear-gradient(
		100deg,
		var(--sgcr-accent-alt) 0%,
		var(--sgcr-accent) 38%,
		var(--sgcr-accent-shimmer) 47%,
		var(--sgcr-accent) 53%,
		var(--sgcr-accent-alt) 62%,
		var(--sgcr-accent) 100%
	);
	background-size: 220% 100%;
	background-position: 180% 0;
	-webkit-background-clip: text;
	background-clip: text;
	animation:
		1.05s prichodNadpisuKP var(--sgcr-spring) var(--delay) both,
		hp-kp-shimmer 7s ease-in-out 1.6s infinite;
}

body.hp-fx-pill-pulse .nadpis-sportove-turnaje {
	animation:
		1.05s prichodSportoveTurnaje var(--sgcr-spring) var(--delay) both,
		hp-pill-pulse 4.5s ease-in-out 1.5s infinite;
}

body.hp-fx-tlacidla-wave .kontajner-sportov .sportove-tlacidlo {
	animation:
		0.72s prichodTlacidiel var(--sgcr-spring) var(--delay) both,
		hp-tlacidlo-breath 4.2s ease-in-out infinite;
}

body.hp-fx-tlacidla-wave .kontajner-sportov .sportove-tlacidlo:nth-child(3) { animation-delay: calc(var(--delay) + 0s), 0s; }
body.hp-fx-tlacidla-wave .kontajner-sportov .sportove-tlacidlo:nth-child(4) { animation-delay: calc(var(--delay) + 0s), 0.504s; }
body.hp-fx-tlacidla-wave .kontajner-sportov .sportove-tlacidlo:nth-child(5) { animation-delay: calc(var(--delay) + 0s), 1.01s; }
body.hp-fx-tlacidla-wave .kontajner-sportov .sportove-tlacidlo:nth-child(6) { animation-delay: calc(var(--delay) + 0s), 1.51s; }
body.hp-fx-tlacidla-wave .kontajner-sportov .sportove-tlacidlo:nth-child(7) { animation-delay: calc(var(--delay) + 0s), 2.02s; }

.hp-fx-castice {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}

.hp-fx-castica {
	position: absolute;
	bottom: -12px;
	border-radius: 1px;
	background: rgba(var(--sgcr-accent-rgb), 0.28);
	box-shadow: 0 0 5px rgba(var(--sgcr-accent-rgb), 0.15);
	opacity: 0;
	animation: hp-castica-stup linear infinite;
}

@keyframes hp-castica-stup {
	0% {
		transform: translateY(0) translateX(0) rotate(0deg);
		opacity: 0;
	}
	12% { opacity: 0.45; }
	85% { opacity: 0.45; }
	100% {
		transform: translateY(-105vh) translateX(var(--drift, 0px)) rotate(var(--rot, 40deg));
		opacity: 0;
	}
}

.nadpis-KP,
.nadpis-sportove-turnaje,
.nadpis-kontajneru-sportov,
.kontajner-sportov,
.sportove-tlacidlo {
	transition:
		color 0.5s ease,
		background 0.5s ease,
		background-color 0.5s ease,
		border-color 0.5s ease,
		box-shadow 0.5s ease,
		text-shadow 0.5s ease,
		transform 0.5s ease,
		filter 0.5s ease,
		opacity 0.5s ease;
}

/* Home — zlatá téma vo finálovom štýle */
@keyframes hp-finale-glow-breath {
	0%, 100% {
		opacity: 0.62;
		transform: scaleY(1);
	}
	50% {
		opacity: 0.82;
		transform: scaleY(1.03);
	}
}

@keyframes hp-finale-text-shimmer {
	0% { background-position: 180% 0; }
	55%, 100% { background-position: -80% 0; }
}

@keyframes hp-finale-kontajner-glow {
	0%, 100% {
		border-color: rgba(255, 179, 48, 0.24);
		box-shadow:
			0 0 22px rgba(255, 179, 48, 0.12),
			0 10px 32px rgba(0, 0, 0, 0.42),
			inset 0 1px 0 rgba(255, 179, 48, 0.16),
			inset 0 0 32px rgba(255, 179, 48, 0.06);
	}
	50% {
		border-color: rgba(255, 179, 48, 0.38);
		box-shadow:
			0 0 34px rgba(255, 179, 48, 0.22),
			0 12px 36px rgba(0, 0, 0, 0.44),
			inset 0 1px 0 rgba(255, 179, 48, 0.24),
			inset 0 0 40px rgba(255, 179, 48, 0.11);
	}
}

html[data-sgcr-theme="gold"]::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background: radial-gradient(
		ellipse 115% 100% at 50% 0%,
		rgba(255, 179, 48, 0.11),
		rgba(255, 179, 48, 0.045) 42%,
		transparent 90%
	);
	transform-origin: 50% 0%;
	animation: hp-finale-glow-breath 7s ease-in-out infinite;
}

html[data-sgcr-theme="gold"] .hlavny-kontajner {
	position: relative;
	z-index: 1;
}

html[data-sgcr-theme="gold"] .sport-neaktivny-page {
	position: relative;
	z-index: 1;
}

html[data-sgcr-theme="gold"] .sport-neaktivny-karta {
	font-family: "Space Grotesk", system-ui, sans-serif;
	background:
		radial-gradient(ellipse 85% 65% at 50% 0%, rgba(255, 179, 48, 0.14), transparent 58%),
		linear-gradient(
			165deg,
			rgb(28, 18, 11) 0%,
			rgb(22, 14, 8) 38%,
			rgb(16, 11, 7) 72%,
			rgb(12, 8, 5) 100%
		);
	border: 1px solid rgba(255, 179, 48, 0.28);
	box-shadow:
		0 0 28px rgba(255, 179, 48, 0.16),
		0 10px 32px rgba(0, 0, 0, 0.42),
		inset 0 1px 0 rgba(255, 179, 48, 0.2),
		inset 0 0 36px rgba(255, 179, 48, 0.07);
}

html[data-sgcr-theme="gold"] .sport-neaktivny-karta::before {
	box-shadow: inset 0 0 0 1px rgba(255, 179, 48, 0.08);
	background:
		radial-gradient(ellipse 75% 50% at 50% -8%, rgba(255, 179, 48, 0.22), transparent 62%),
		radial-gradient(circle at 18% 100%, rgba(255, 140, 20, 0.08), transparent 42%),
		radial-gradient(circle at 82% 100%, rgba(255, 140, 20, 0.06), transparent 38%);
	opacity: 0.85;
}

html[data-sgcr-theme="gold"] .sport-neaktivny-nadpis {
	font-family: "Space Grotesk", system-ui, sans-serif;
	font-weight: 600;
	color: rgba(255, 241, 220, 0.96);
}

html[data-sgcr-theme="gold"] .sport-neaktivny-text {
	color: rgba(210, 195, 175, 0.92);
}

html[data-sgcr-theme="gold"] .tlacidlo-spat {
	background: linear-gradient(
		180deg,
		rgba(255, 179, 48, 0.18) 0%,
		rgba(255, 179, 48, 0.1) 100%
	);
	border: 1px solid rgba(255, 179, 48, 0.34);
	color: rgba(255, 209, 138, 0.96);
	text-shadow: none;
	box-shadow:
		inset 0 1px 0 rgba(255, 179, 48, 0.14),
		0 0 14px rgba(255, 179, 48, 0.1);
}

html[data-sgcr-theme="gold"] .tlacidlo-spat:hover {
	border-color: rgba(255, 179, 48, 0.5);
	background: linear-gradient(
		180deg,
		rgba(255, 179, 48, 0.24) 0%,
		rgba(255, 179, 48, 0.14) 100%
	);
	color: rgba(255, 220, 160, 1);
	box-shadow:
		inset 0 1px 0 rgba(255, 179, 48, 0.18),
		0 0 18px rgba(255, 179, 48, 0.18);
}

html[data-sgcr-theme="gold"] .nadpis-KP {
	position: relative;
	isolation: isolate;
	z-index: 1;
	font-family: "Space Grotesk", system-ui, sans-serif;
	font-weight: 700;
	color: transparent;
	-webkit-text-fill-color: transparent;
	text-shadow: none;
	filter: none;
	background: linear-gradient(
		100deg,
		#ffffff 0%,
		#ffffff 40%,
		#fff1cf 47%,
		#ffd98a 50%,
		#fff1cf 53%,
		#ffffff 60%,
		#ffffff 100%
	);
	background-size: 220% 100%;
	background-position: 180% 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-font-smoothing: antialiased;
	transform: translateZ(0);
	backface-visibility: hidden;
	animation:
		1.05s prichodNadpisuKP var(--sgcr-spring) var(--delay) both,
		hp-finale-text-shimmer 6.5s ease-in-out 1.6s infinite;
}

html[data-sgcr-theme="gold"] .nadpis-KP::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 52%;
	z-index: -1;
	width: 108%;
	height: 78%;
	translate: -50% -50%;
	pointer-events: none;
	border-radius: 999px;
	background: radial-gradient(
		ellipse 72% 68% at 50% 50%,
		rgba(255, 179, 48, 0.26) 0%,
		rgba(255, 179, 48, 0.1) 42%,
		transparent 72%
	);
	filter: blur(14px);
	opacity: 0.72;
}

html[data-sgcr-theme="gold"] .nadpis-sportove-turnaje {
	font-family: "Space Grotesk", system-ui, sans-serif;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: rgb(255, 179, 48);
	background: rgba(255, 179, 48, 0.1);
	border: 1px solid rgba(255, 179, 48, 0.32);
	box-shadow:
		0 0 22px rgba(255, 179, 48, 0.14),
		inset 0 1px 0 rgba(255, 179, 48, 0.14);
	text-shadow:
		0 0 14px rgba(255, 179, 48, 0.32),
		0 0 28px rgba(255, 179, 48, 0.12);
}

html[data-sgcr-theme="gold"] .nadpis-kontajneru-sportov {
	font-family: "Space Grotesk", system-ui, sans-serif;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: rgba(255, 235, 210, 0.88);
}

html[data-sgcr-theme="gold"] .kontajner-sportov {
	background:
		radial-gradient(ellipse 85% 65% at 50% 0%, rgba(255, 179, 48, 0.14), transparent 58%),
		linear-gradient(
			165deg,
			rgb(28, 18, 11) 0%,
			rgb(22, 14, 8) 38%,
			rgb(16, 11, 7) 72%,
			rgb(12, 8, 5) 100%
		);
	border: 1px solid rgba(255, 179, 48, 0.28);
	box-shadow:
		0 0 28px rgba(255, 179, 48, 0.16),
		0 10px 32px rgba(0, 0, 0, 0.42),
		inset 0 1px 0 rgba(255, 179, 48, 0.2),
		inset 0 0 36px rgba(255, 179, 48, 0.07);
	animation:
		0.55s prichodKontajneru var(--delay) var(--sgcr-spring-soft) both,
		hp-finale-kontajner-glow 5.5s ease-in-out 1.15s infinite;
}

html[data-sgcr-theme="gold"] .kontajner-sportov::before {
	box-shadow: inset 0 0 0 1px rgba(255, 179, 48, 0.08);
	background:
		radial-gradient(ellipse 75% 50% at 50% -8%, rgba(255, 179, 48, 0.22), transparent 62%),
		radial-gradient(circle at 18% 100%, rgba(255, 140, 20, 0.08), transparent 42%),
		radial-gradient(circle at 82% 100%, rgba(255, 140, 20, 0.06), transparent 38%);
	opacity: 0.85;
}

html[data-sgcr-theme="gold"] .kontajner-sportov::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
	box-shadow:
		inset 0 0 0 1px rgba(255, 179, 48, 0.1),
		inset 0 0 24px rgba(255, 179, 48, 0.05);
}

html[data-sgcr-theme="gold"] .sportove-tlacidlo {
	font-family: "Space Grotesk", system-ui, sans-serif;
	font-weight: 500;
	border: 1px solid rgba(255, 179, 48, 0.14);
	background:
		linear-gradient(
			165deg,
			rgba(32, 22, 14, 0.96) 0%,
			rgba(20, 14, 9, 0.98) 100%
		);
	box-shadow:
		0 4px 14px rgba(0, 0, 0, 0.28),
		inset 0 1px 0 rgba(255, 179, 48, 0.08);
}

html[data-sgcr-theme="gold"] .sportove-tlacidlo::before {
	opacity: 0;
	transition: opacity 0.5s ease;
	background: radial-gradient(
		ellipse 100% 58% at 50% 0%,
		rgba(255, 179, 48, 0.1),
		rgba(255, 179, 48, 0.03) 42%,
		transparent 68%
	);
	box-shadow: inset 0 0 22px rgba(255, 179, 48, 0.06);
}

html[data-sgcr-theme="gold"] .sportove-tlacidlo:hover::before {
	opacity: 1;
}

html[data-sgcr-theme="gold"] .sportove-tlacidlo:hover {
	border-color: rgba(255, 179, 48, 0.32);
	background:
		linear-gradient(
			165deg,
			rgba(36, 24, 15, 0.98) 0%,
			rgba(22, 15, 9, 0.99) 100%
		);
	box-shadow:
		0 6px 18px rgba(0, 0, 0, 0.32),
		0 0 16px rgba(255, 179, 48, 0.1),
		inset 0 1px 0 rgba(255, 179, 48, 0.14);
}

html[data-sgcr-theme="gold"] .sportove-tlacidlo--aktivny {
	border-color: rgba(255, 179, 48, 0.34);
	box-shadow:
		0 0 16px rgba(255, 179, 48, 0.12),
		inset 0 1px 0 rgba(255, 179, 48, 0.12),
		inset 0 0 22px rgba(255, 179, 48, 0.06);
}

html[data-sgcr-theme="gold"] .sportove-tlacidlo--aktivny::before {
	opacity: 1;
}

html[data-sgcr-theme="gold"] .sportove-tlacidlo--aktivny:hover {
	border-color: rgba(255, 179, 48, 0.42);
	box-shadow:
		0 0 20px rgba(255, 179, 48, 0.16),
		inset 0 1px 0 rgba(255, 179, 48, 0.16),
		inset 0 0 26px rgba(255, 179, 48, 0.08);
}

/* Finálové lietajúce častice (home, zlatá téma) */
.hp-finale-castice {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.hp-finale-castica {
	position: absolute;
	bottom: -12px;
	border-radius: 1px;
	background: rgba(255, 179, 48, 0.35);
	box-shadow:
		0 0 6px rgba(255, 179, 48, 0.45),
		0 0 12px rgba(255, 179, 48, 0.2);
	opacity: 0;
	will-change: transform, opacity;
	animation-name: hp-finale-castica-stup;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes hp-finale-castica-stup {
	0% {
		transform: translateY(0) translateX(0) rotate(0deg);
		opacity: 0;
	}
	12% {
		opacity: 0.55;
	}
	85% {
		opacity: 0.55;
	}
	100% {
		transform: translateY(calc(-1 * var(--vzdialenost, 105vh))) translateX(var(--drift, 0px)) rotate(var(--rot, 90deg));
		opacity: 0;
	}
}

@media (max-width: 720px) {
	.tlacidlo-spat {
		min-width: 3.7rem;
		padding: 0 0.55rem;
		font-size: 0.72rem;
	}

	.tlacidlo-spat-inner {
		gap: 0.28rem;
	}

	/* ——— Home Page: mobil = rovnaká kompozícia ako desktop, len zmestí šírku ——— */
	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	body.home-page {
		width: 100%;
		max-width: 100%;
		background-attachment: scroll;
		overflow-x: clip;
	}

	body.home-page .hlavny-kontajner {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 100%;
		height: auto;
		min-height: 100svh;
		margin: 0;
		padding:
			max(1.5rem, env(safe-area-inset-top, 0px))
			1.25rem
			max(1.75rem, env(safe-area-inset-bottom, 0px));
		gap: 0;
		box-sizing: border-box;
	}

	/* Vypni posuny z animácií + samotné príchodové/loop animácie (na mobile škaredé) */
	body.home-page .nadpis-sportove-turnaje,
	body.home-page .nadpis-KP,
	body.home-page .kontajner-sportov,
	body.home-page .nadpis-kontajneru-sportov,
	body.home-page .sportove-tlacidlo,
	body.home-page.hp-fx-shimmer-kp .nadpis-KP,
	body.home-page.hp-fx-pill-pulse .nadpis-sportove-turnaje,
	body.home-page.hp-fx-tlacidla-wave .kontajner-sportov .sportove-tlacidlo,
	body.home-page.hp-fx-glow-kontajner .kontajner-sportov::before,
	html[data-sgcr-theme="gold"] body.home-page .nadpis-KP,
	html[data-sgcr-theme="gold"] body.home-page .kontajner-sportov {
		animation: none !important;
		top: auto !important;
		bottom: auto !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
	}

	body.home-page .nadpis-sportove-turnaje,
	body.home-page .nadpis-KP,
	body.home-page .kontajner-sportov,
	body.home-page .sportove-tlacidlo {
		opacity: 1;
	}

	body.home-page .nadpis-kontajneru-sportov {
		opacity: 0.5;
	}

	body.home-page .hp-finale-castice,
	body.home-page .hp-fx-castice,
	body.home-page.hp-fx-glow-body::after {
		display: none !important;
	}

	body.home-page .nadpis-sportove-turnaje {
		width: max-content;
		max-width: 100%;
		height: 1.9rem;
		padding: 0 1rem;
		font-size: 0.78rem;
		letter-spacing: 0.06em;
		margin: 0 0 0.45rem;
	}

	body.home-page .nadpis-sportove-turnaje:hover {
		transform: none;
	}

	body.home-page .nadpis-KP {
		margin: 0;
		/* max ~64px na 390px — čo najväčší hero bez orezania */
		font-size: clamp(3.6rem, 16.5vw, 5.5rem);
		line-height: 1.02;
		white-space: nowrap;
		text-align: center;
		max-width: 100%;
		letter-spacing: -0.02em;
	}

	body.home-page .nadpis-KP:hover {
		transform: none;
	}

	body.home-page .home-podnadpis-kp {
		text-align: center;
		margin: 0.2rem 0 0;
		font-size: 0.65rem;
	}

	body.home-page .kontajner-sportov {
		width: min(22.5rem, calc(100vw - 2.5rem));
		max-width: 100%;
		height: auto;
		margin: 1.35rem 0 0;
		padding: 1.15rem 0 1.25rem;
		row-gap: 0.55rem;
		border-radius: 12px;
		box-sizing: border-box;
	}

	body.home-page .nadpis-kontajneru-sportov {
		margin: 0.15rem 0 0.35rem;
		padding: 0.35rem 0.5rem;
		min-height: 2.1rem;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 0.95rem;
		letter-spacing: 0.14em;
		line-height: 1.2;
	}

	body.home-page .home-podtext-sporty {
		text-align: center;
		margin: 0 0 0.25rem;
		font-size: 0.62rem;
		line-height: 1.35;
		max-width: 90%;
	}

	/* Ako desktop: tlačidlá ~80 % šírky karty, nie natiahnuté na okraj */
	body.home-page .sportove-tlacidlo {
		width: 80%;
		height: 3.05rem;
		min-height: 3.05rem;
		font-size: 1rem;
		padding-left: 1.1rem;
		border-radius: 8px;
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
	}

	body.home-page .sportove-tlacidlo:hover {
		transform: none;
	}

	body.home-page .sportove-tlacidlo:active {
		transform: scale(0.985);
	}
}

@media (max-width: 600px) {
	.tlacidlo-spat {
		width: 2rem;
		min-width: 2rem;
		padding: 0;
	}

	.tlacidlo-spat-inner {
		gap: 0;
	}

	.tlacidlo-spat .text {
		max-width: 0;
		opacity: 0;
		margin: 0;
	}
}

@media (max-width: 380px) {
	body.home-page .hlavny-kontajner {
		padding-left: 0.85rem;
		padding-right: 0.85rem;
	}

	body.home-page .nadpis-KP {
		font-size: clamp(3.2rem, 17.5vw, 4.4rem);
	}

	body.home-page .kontajner-sportov {
		width: min(22.5rem, calc(100vw - 1.7rem));
		margin-top: 1.1rem;
		padding: 1rem 0 1.1rem;
		row-gap: 0.5rem;
	}

	body.home-page .sportove-tlacidlo {
		height: 2.9rem;
		min-height: 2.9rem;
		font-size: 0.96rem;
		padding-left: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.hp-fx-glow-body::after,
	body.hp-fx-glow-kontajner .kontajner-sportov::before,
	body.hp-fx-shimmer-kp .nadpis-KP,
	body.hp-fx-pill-pulse .nadpis-sportove-turnaje,
	body.hp-fx-tlacidla-wave .kontajner-sportov .sportove-tlacidlo,
	html[data-sgcr-theme="gold"]::after,
	html[data-sgcr-theme="gold"] .nadpis-KP,
	html[data-sgcr-theme="gold"] .kontajner-sportov {
		animation: none !important;
	}
	.hp-finale-castice {
		display: none !important;
	}
	.hp-fx-castice {
		display: none !important;
	}
}