/*
 * Rybárske revíry – portál: outdoorový vzhľad (verzia 1.6).
 *
 * Načíta sa po rybar.css a prekrýva ho: tokeny, hlavička so scénou, sklenené panely, rebríček podmienok, karty, pohyb.
 * Hlavná farba zostáva vodná modrá. Maskáč sa používa len ako akcent (pozadie rebríčka podmienok, miniatúry revírov bez snímky,
 * pás nad pätičkou témy). Všetok pohyb je vypnutý pri prefers-reduced-motion.
 */

/* ------------------------------------------------------------------ tokeny */

.ryb {
	--ryb-forest: #1c2618;
	--ryb-forest-2: #2e3b25;
	--ryb-moss: #55663a;
	--ryb-sand: #d6c993;
	--ryb-night: #04182a;
	--ryb-glass: rgba(255, 255, 255, .1);
	--ryb-glass-hi: rgba(255, 255, 255, .22);
	--ryb-glass-line: rgba(255, 255, 255, .28);
	--ryb-glass-fx: blur(16px) saturate(1.5);
	--ryb-out: cubic-bezier(.23, 1, .32, 1);
	--ryb-inout: cubic-bezier(.77, 0, .175, 1);
	--ryb-camo: url('../img/camo-forest.svg');
	--ryb-camo-water: url('../img/camo-water.svg');
	--ryb-condensed: 80%;
}

/* Variabilné písmo má os šírky: úzke ťažké rezy dávajú nadpisom terénny „poľný“ charakter bez ďalšieho písma. */
.ryb .ryb-home__title,
.ryb .ryb-sec__title,
.ryb .ryb-cond__title {
	font-stretch: var(--ryb-condensed);
	font-weight: 780;
	text-wrap: balance;
}
.ryb :is(p, li, dd, .ryb-sec__sub, .ryb-cond__sub) {
	text-wrap: pretty;
}

/* ---------------------------------------------------------------- tlačidlá */

.ryb .ryb-btn {
	transition-property: background-color, border-color, color, box-shadow, transform;
	transition-duration: .16s;
	transition-timing-function: ease;
}
.ryb .ryb-btn:active,
.ryb .ryb-fchip:active,
.ryb .ryb-cond__tab:active {
	transform: scale(.97);
}
.ryb .ryb-btn--primary {
	background-image: linear-gradient(180deg, #ff7a3d, #ff5a1f 55%, #f04a10);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 18px -8px rgba(240, 74, 16, .7);
}

/* ------------------------------------------------------------------ scéna */

.ryb .ryb-scene {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: clamp(22px, 3.4cqi, 40px);
	min-height: clamp(480px, 46cqi, 600px);
	margin: 0 0 clamp(18px, 2.4cqi, 30px);
	padding: clamp(24px, 4cqi, 54px) clamp(18px, 3.4cqi, 48px) clamp(16px, 2.2cqi, 26px);
	border-radius: 24px;
	overflow: hidden;
	background: var(--ryb-night);
	color: #fff;
	box-shadow: 0 34px 60px -34px rgba(4, 24, 42, .8), 0 0 0 1px rgba(4, 24, 42, .4);
}
.ryb .ryb-scene__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}
.ryb .ryb-scene__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(95deg, rgba(4, 24, 42, .62) 0%, rgba(4, 24, 42, .28) 45%, rgba(4, 24, 42, 0) 70%);
	pointer-events: none;
}
.ryb .ryb-scene__art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.ryb .ryb-scene__mist {
	position: absolute;
	left: -10%;
	width: 80%;
	height: 110px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(220, 245, 250, .34), rgba(220, 245, 250, 0));
	filter: blur(10px);
	pointer-events: none;
}
.ryb .ryb-scene__mist--a {
	top: 44%;
}
.ryb .ryb-scene__mist--b {
	top: 52%;
	left: 34%;
	width: 70%;
	height: 90px;
	opacity: .75;
}

.ryb .ryb-scene__copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	max-width: min(640px, 100%);
}
.ryb .ryb-scene .ryb-home__title {
	margin: 0;
	font-size: clamp(2.7rem, 1.6rem + 5.4cqi, 5.6rem);
	line-height: .94;
	letter-spacing: -.012em;
	color: #fff;
	text-shadow: 0 2px 24px rgba(4, 24, 42, .55);
}
.ryb .ryb-scene .ryb-home__sub {
	margin: 0;
	max-width: 46ch;
	font-size: clamp(1rem, .95rem + .3cqi, 1.18rem);
	line-height: 1.45;
	color: rgba(236, 248, 250, .92);
	text-shadow: 0 1px 12px rgba(4, 24, 42, .6);
}
.ryb .ryb-scene .ryb-hsearch {
	width: 100%;
	max-width: 560px;
	margin-top: 6px;
}
.ryb .ryb-scene .ryb-hsearch__field {
	background: rgba(255, 255, 255, .95);
	border-radius: 18px;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(10, 47, 69, .06);
	transition: box-shadow .2s ease, transform .2s var(--ryb-out);
}
.ryb .ryb-scene .ryb-hsearch__field:focus-within {
	box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .7), 0 0 0 3px #7fe0ef;
}
.ryb .ryb-scene .ryb-home__quick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ryb .ryb-scene .ryb-fchip--hero {
	min-height: 42px;
	background: var(--ryb-glass);
	border: 1px solid var(--ryb-glass-line);
	color: #fff;
	-webkit-backdrop-filter: var(--ryb-glass-fx);
	backdrop-filter: var(--ryb-glass-fx);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
	transition-property: background-color, border-color, transform;
	transition-duration: .16s;
}
@media (hover: hover) and (pointer: fine) {
	.ryb .ryb-scene .ryb-fchip--hero:hover {
		background: var(--ryb-glass-hi);
		border-color: rgba(255, 255, 255, .5);
	}
}

/* sklenené štatistiky nad vodou */
.ryb .ryb-scene .ryb-hstats {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}
.ryb .ryb-scene .ryb-hstats > div {
	display: flex;
	flex-direction: column-reverse;
	gap: 2px;
	padding: 14px 18px 12px;
	border-radius: 16px;
	background: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06));
	border: 1px solid var(--ryb-glass-line);
	-webkit-backdrop-filter: var(--ryb-glass-fx);
	backdrop-filter: var(--ryb-glass-fx);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 16px 30px -18px rgba(0, 0, 0, .6);
}
.ryb .ryb-scene .ryb-hstats dd {
	margin: 0;
	font-size: clamp(1.7rem, .9rem + 2.6cqi, 2.7rem);
	font-weight: 780;
	font-stretch: var(--ryb-condensed);
	line-height: 1;
	color: #fff;
}
.ryb .ryb-scene .ryb-hstats dt {
	margin: 0;
	font-size: .82rem;
	font-weight: 520;
	line-height: 1.25;
	color: rgba(240, 250, 252, .86);
}

@container ryb (max-width: 760px) {
	/* na mobile je scéna samostatný pás medzi hľadaním a štatistikami, aby ju štatistiky neprekrývali */
	.ryb .ryb-scene {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 260px auto;
		gap: 0;
		min-height: 0;
		padding-bottom: 14px;
		background: linear-gradient(180deg, var(--ryb-night) 0, var(--ryb-night) calc(100% - 340px), #073047 100%);
	}
	.ryb .ryb-scene__bg {
		grid-row: 2;
		position: relative;
		inset: auto;
		margin-inline: calc(-1 * clamp(18px, 3.4cqi, 48px));
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
		mask-image: linear-gradient(180deg, transparent 0, #000 22%);
	}
	.ryb .ryb-scene__bg::after {
		display: none;
	}
	.ryb .ryb-scene__copy {
		grid-row: 1;
		padding-bottom: 14px;
	}
	.ryb .ryb-scene .ryb-hstats {
		grid-row: 3;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		margin-top: -52px;
	}
	.ryb .ryb-scene .ryb-hstats > div {
		padding: 10px 14px 9px;
	}
}

/* pohyb scény: hádzanie, splávok, vlny, trstina, hmla */
@media (prefers-reduced-motion: no-preference) {
	.ryb .ryb-scene__copy > * {
		animation: ryb-rise .7s var(--ryb-out) backwards;
	}
	.ryb .ryb-scene__copy > :nth-child(1) { animation-delay: .05s; }
	.ryb .ryb-scene__copy > :nth-child(2) { animation-delay: .14s; }
	.ryb .ryb-scene__copy > :nth-child(3) { animation-delay: .23s; }
	.ryb .ryb-scene__copy > :nth-child(4) { animation-delay: .32s; }
	.ryb .ryb-scene .ryb-hstats > div {
		animation: ryb-rise .7s var(--ryb-out) backwards;
	}
	.ryb .ryb-scene .ryb-hstats > :nth-child(1) { animation-delay: .4s; }
	.ryb .ryb-scene .ryb-hstats > :nth-child(2) { animation-delay: .47s; }
	.ryb .ryb-scene .ryb-hstats > :nth-child(3) { animation-delay: .54s; }
	.ryb .ryb-scene .ryb-hstats > :nth-child(4) { animation-delay: .61s; }

	.ryb .ryb-scene__line {
		stroke-dasharray: 1;
		stroke-dashoffset: 0;
		animation: ryb-cast 1.1s var(--ryb-out) .55s backwards;
	}
	.ryb .ryb-scene__bob {
		animation: ryb-drop .75s var(--ryb-out) 1.4s backwards, ryb-bob 3.8s ease-in-out 2.2s infinite alternate;
	}
	.ryb .ryb-scene__ripple {
		transform-box: fill-box;
		transform-origin: center;
		animation: ryb-ripple 3.8s ease-out 2s infinite backwards;
	}
	.ryb .ryb-scene__ripple--2 {
		animation-delay: 3.9s;
	}
	.ryb .ryb-scene__reed {
		transform-box: fill-box;
		transform-origin: 50% 100%;
		animation: ryb-sway 6.5s ease-in-out var(--d, 0s) infinite alternate;
	}
	.ryb .ryb-scene__wave {
		will-change: transform;
	}
	.ryb .ryb-scene__wave--1 { animation: ryb-drift-a 12s linear infinite; }
	.ryb .ryb-scene__wave--2 { animation: ryb-drift-b 18s linear infinite; }
	.ryb .ryb-scene__wave--3 { animation: ryb-drift-c 26s linear infinite; }
	.ryb .ryb-scene__glint {
		animation: ryb-glint 5s ease-in-out infinite alternate;
	}
	.ryb .ryb-scene__mist--a {
		animation: ryb-mist 46s ease-in-out infinite alternate;
	}
	.ryb .ryb-scene__mist--b {
		animation: ryb-mist 62s ease-in-out -20s infinite alternate-reverse;
	}
	/* mimo obrazovky sa nekonečné slučky zastavia (šetrí batériu) */
	.ryb .ryb-scene.is-off :is(.ryb-scene__bob, .ryb-scene__ripple, .ryb-scene__reed, .ryb-scene__wave, .ryb-scene__glint, .ryb-scene__mist) {
		animation-play-state: paused;
	}
}
@keyframes ryb-rise {
	from { opacity: 0; transform: translateY(10px); }
}
@keyframes ryb-cast {
	from { stroke-dashoffset: 1; }
}
@keyframes ryb-drop {
	from { opacity: 0; transform: translateY(-80px); }
	55% { opacity: 1; }
	78% { transform: translateY(4px); }
}
@keyframes ryb-bob {
	to { transform: translateY(3px); }
}
@keyframes ryb-ripple {
	0% { opacity: .9; transform: scale(.4); }
	100% { opacity: 0; transform: scale(4.2); }
}
@keyframes ryb-sway {
	from { transform: rotate(-1.6deg); }
	to { transform: rotate(2deg); }
}
@keyframes ryb-drift-a {
	to { transform: translateX(-240px); }
}
@keyframes ryb-drift-b {
	to { transform: translateX(-330px); }
}
@keyframes ryb-drift-c {
	from { transform: translateX(-420px); }
	to { transform: translateX(0); }
}
@keyframes ryb-glint {
	from { opacity: .45; }
	to { opacity: 1; }
}
@keyframes ryb-mist {
	from { transform: translateX(-7%); }
	to { transform: translateX(9%); }
}

/* ----------------------------------------------------------- nadpisy sekcií */

.ryb .ryb-sec__ico {
	background: linear-gradient(145deg, #1b94a6, #0a5a6a);
	color: #fff;
	border-radius: 14px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 18px -10px rgba(10, 90, 106, .8);
}
.ryb .ryb-sec__title {
	font-size: clamp(1.55rem, 1.15rem + 1.2cqi, 2.2rem);
	line-height: 1.05;
	letter-spacing: -.005em;
}

/* ------------------------------------------------- rebríček podmienok na love */

.ryb .ryb-cond {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin: 0 0 clamp(20px, 3cqi, 36px);
	padding: clamp(20px, 3cqi, 40px);
	border-radius: 24px;
	background: var(--ryb-forest);
	color: #eef7f4;
	box-shadow: 0 30px 56px -34px rgba(8, 20, 12, .8);
}
.ryb .ryb-cond__camo {
	position: absolute;
	inset: 0;
	z-index: -3;
	background: var(--ryb-camo) 0 0 / 340px 340px;
}
.ryb .ryb-cond::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(10, 60, 87, .5), rgba(10, 60, 87, 0) 60%),
		linear-gradient(180deg, rgba(5, 20, 16, .5), rgba(5, 20, 16, .12) 42%, rgba(5, 20, 16, .5));
	pointer-events: none;
}
.ryb .ryb-cond::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(105deg, transparent 38%, rgba(126, 224, 255, .12) 50%, transparent 62%);
	background-size: 260% 100%;
	background-position: 120% 0;
	pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
	.ryb .ryb-cond::after {
		animation: ryb-sheen 14s ease-in-out infinite;
	}
	.ryb .ryb-cond.is-off::after {
		animation-play-state: paused;
	}
}
@keyframes ryb-sheen {
	from { background-position: 130% 0; }
	to { background-position: -30% 0; }
}

.ryb .ryb-cond__fx {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}
.ryb .ryb-cond__sil {
	position: absolute;
	height: auto;
	fill: currentColor;
}
.ryb .ryb-cond__sil--angler {
	top: 14px;
	right: clamp(10px, 3cqi, 44px);
	width: clamp(110px, 15cqi, 200px);
	aspect-ratio: 150 / 124;
	color: rgba(255, 255, 255, .17);
}
.ryb .ryb-cond__sil--float {
	top: 20px;
	right: clamp(4px, 1cqi, 14px);
	width: 16px;
	aspect-ratio: 40 / 96;
	color: rgba(255, 255, 255, .3);
	--sil-accent: #ff5a1f;
}
.ryb .ryb-cond__sil--carp {
	bottom: 22px;
	left: 0;
	width: 104px;
	aspect-ratio: 120 / 58;
	color: rgba(150, 230, 255, .16);
}
.ryb .ryb-cond__sil--trout {
	bottom: 70px;
	left: 0;
	width: 84px;
	aspect-ratio: 120 / 48;
	color: rgba(150, 230, 255, .12);
	transform: scaleX(-1);
}
@media (prefers-reduced-motion: no-preference) {
	.ryb .ryb-cond__sil--carp {
		animation: ryb-swim 52s linear infinite;
	}
	.ryb .ryb-cond__sil--trout {
		animation: ryb-swim-back 38s linear -14s infinite;
	}
	.ryb .ryb-cond__sil--float {
		animation: ryb-bob 3.4s ease-in-out infinite alternate;
	}
	.ryb .ryb-cond.is-off :is(.ryb-cond__sil--carp, .ryb-cond__sil--trout, .ryb-cond__sil--float) {
		animation-play-state: paused;
	}
}
@keyframes ryb-swim {
	from { transform: translateX(-120px); }
	to { transform: translateX(calc(100cqi + 40px)); }
}
@keyframes ryb-swim-back {
	from { transform: scaleX(-1) translateX(120px); }
	to { transform: scaleX(-1) translateX(calc(-100cqi - 40px)); }
}

.ryb .ryb-cond__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px 24px;
	margin-bottom: clamp(16px, 2cqi, 24px);
}
.ryb .ryb-cond__title {
	margin: 0;
	font-size: clamp(1.9rem, 1.2rem + 2.6cqi, 3.2rem);
	line-height: 1;
	letter-spacing: -.01em;
	color: #fff;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .4);
}
.ryb .ryb-cond__sub {
	margin: 8px 0 0;
	max-width: 58ch;
	font-size: .98rem;
	color: rgba(236, 247, 244, .86);
}
.ryb .ryb-cond__tabs {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 4px;
	border-radius: 999px;
	background: rgba(4, 24, 42, .5);
	border: 1px solid var(--ryb-glass-line);
	-webkit-backdrop-filter: var(--ryb-glass-fx);
	backdrop-filter: var(--ryb-glass-fx);
}
.ryb .ryb-cond__tab {
	min-height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: rgba(240, 250, 252, .9);
	font: inherit;
	font-weight: 600;
	font-size: .92rem;
	cursor: pointer;
	transition-property: background-color, color, transform;
	transition-duration: .16s;
}
@media (hover: hover) and (pointer: fine) {
	.ryb .ryb-cond__tab:not(.is-on):hover {
		background: rgba(255, 255, 255, .14);
	}
}
.ryb .ryb-cond__tab.is-on {
	background: #fff;
	color: #0a2f45;
}
.ryb .ryb-cond__tab:focus-visible {
	outline: 3px solid #7fe0ef;
	outline-offset: 2px;
}
@container ryb (max-width: 560px) {
	.ryb .ryb-cond__tabs {
		display: flex;
		flex-wrap: nowrap;
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.ryb .ryb-cond__tabs::-webkit-scrollbar {
		display: none;
	}
	.ryb .ryb-cond__tab {
		flex: 1 0 auto;
		padding: 0 12px;
		font-size: .88rem;
	}
	.ryb .ryb-cond__tab:focus-visible {
		outline-offset: -3px;
	}
}

.ryb .ryb-cond__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
	grid-template-columns: minmax(0, 1fr);
}
.ryb .ryb-cond__list[hidden] {
	display: none;
}
/* mobil: karty sa listujú do strany, aby rebríček nezabral päť obrazoviek */
@container ryb (max-width: 559.98px) {
	.ryb .ryb-cond__list {
		display: flex;
		gap: 10px;
		margin-inline: calc(-1 * clamp(20px, 3cqi, 40px));
		padding: 4px clamp(20px, 3cqi, 40px) 14px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: clamp(20px, 3cqi, 40px);
		scrollbar-width: none;
	}
	.ryb .ryb-cond__list::-webkit-scrollbar {
		display: none;
	}
	.ryb .ryb-cond__list[hidden] {
		display: none;
	}
	.ryb .ryb-cond__list > .ryb-cc {
		flex: 0 0 min(84%, 320px);
		scroll-snap-align: start;
	}
}
/* prvá karta zaberá dva stĺpce a 11 kariet vyplní mriežku bez medzier pri 2, 3 aj 4 stĺpcoch */
@container ryb (min-width: 560px) {
	.ryb .ryb-cond__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ryb .ryb-cc--first {
		grid-column: span 2;
	}
}
@container ryb (min-width: 880px) {
	.ryb .ryb-cond__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@container ryb (min-width: 1180px) {
	.ryb .ryb-cond__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ryb .ryb-cc {
	--ring: #8bd2ff;
	margin: 0;
	min-width: 0;
}
.ryb .ryb-cc--top { --ring: #5df2c3; }
.ryb .ryb-cc--high { --ring: #8bd2ff; }
.ryb .ryb-cc--mid { --ring: #ffd36b; }
.ryb .ryb-cc--low { --ring: #ff9d80; }

.ryb .ryb-cc__link {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas: 'ring body' 'ring tags' 'spark spark' 'meta meta' 'best best';
	column-gap: 14px;
	row-gap: 4px;
	height: 100%;
	padding: 18px 16px 14px 18px;
	border-radius: 18px;
	background: linear-gradient(160deg, rgba(14, 52, 66, .66), rgba(5, 22, 30, .74));
	border: 1px solid rgba(255, 255, 255, .2);
	-webkit-backdrop-filter: var(--ryb-glass-fx);
	backdrop-filter: var(--ryb-glass-fx);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 20px 34px -22px rgba(0, 0, 0, .75);
	color: #fff;
	text-decoration: none;
	transition-property: transform, border-color, box-shadow;
	transition-duration: .28s, .2s, .28s;
	transition-timing-function: var(--ryb-out), ease, var(--ryb-out);
}
@media (hover: hover) and (pointer: fine) {
	.ryb .ryb-cc__link:hover {
		transform: translateY(-3px);
		border-color: rgba(255, 255, 255, .45);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 26px 40px -20px rgba(0, 0, 0, .8);
	}
}
.ryb .ryb-cc__link:active {
	transform: scale(.985);
}
.ryb .ryb-cc__link:focus-visible {
	outline: 3px solid #7fe0ef;
	outline-offset: 3px;
}
.ryb .ryb-cc__rank {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	display: grid;
	place-items: center;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: 999px;
	background: #fff;
	color: #0a2f45;
	font-size: .78rem;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
	pointer-events: none;
}
.ryb .ryb-cc--first .ryb-cc__rank {
	top: 10px;
	left: 10px;
	min-width: 28px;
	height: 28px;
	background: linear-gradient(145deg, #ffe08a, #f2b632);
	font-size: .9rem;
}

.ryb .ryb-ring {
	grid-area: ring;
	position: relative;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	align-self: start;
}
.ryb .ryb-cc--first .ryb-ring {
	width: 84px;
	height: 84px;
}
.ryb .ryb-ring svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	overflow: visible;
}
.ryb .ryb-ring circle {
	fill: none;
	stroke-width: 6;
}
.ryb .ryb-ring__track {
	stroke: rgba(255, 255, 255, .16);
}
.ryb .ryb-ring__arc {
	stroke: var(--ring);
	stroke-linecap: round;
	stroke-dasharray: var(--s) 100;
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ring) 55%, transparent));
	transition: stroke-dasharray 1.1s var(--ryb-out) calc(var(--i) * 70ms + 120ms);
}
.ryb .ryb-cond.is-armed:not(.is-in) .ryb-ring__arc {
	stroke-dasharray: 0 100;
}
.ryb .ryb-ring b {
	position: relative;
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: #fff;
}
.ryb .ryb-cc--first .ryb-ring b {
	font-size: 1.9rem;
}

.ryb .ryb-cc__body {
	grid-area: body;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	padding-right: 4px;
}
.ryb .ryb-cc__name {
	font-size: 1.12rem;
	font-weight: 720;
	line-height: 1.15;
	overflow-wrap: anywhere;
}
.ryb .ryb-cc--first .ryb-cc__name {
	font-size: 1.5rem;
	font-stretch: 88%;
}
.ryb .ryb-cc__where {
	font-size: .84rem;
	color: rgba(236, 247, 244, .74);
}
.ryb .ryb-cc__tags {
	grid-area: tags;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-self: end;
	margin-top: 4px;
}
.ryb .ryb-cc__type,
.ryb .ryb-cc__ap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 24px;
	padding: 0 10px 0 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	font-size: .76rem;
	font-weight: 600;
}
.ryb .ryb-cc__type .ryb-dot {
	background: var(--t);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);
}
.ryb .ryb-cc__ap {
	padding-left: 10px;
	color: rgba(255, 236, 190, .95);
	background: rgba(255, 211, 107, .14);
}

.ryb .ryb-cc__spark {
	grid-area: spark;
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 38px;
	margin-top: 12px;
}
.ryb .ryb-cc__spark i {
	flex: 1;
	height: max(4px, calc(var(--v) * 1%));
	border-radius: 3px 3px 1px 1px;
	background: rgba(255, 255, 255, .26);
	transform-origin: 50% 100%;
	transition: transform .7s var(--ryb-out) calc(var(--k) * 16ms + var(--i) * 70ms + 200ms);
}
.ryb .ryb-cc__spark i.is-best {
	background: var(--ring);
}
.ryb .ryb-cc__spark i:first-child {
	background: #fff;
}
.ryb .ryb-cond.is-armed:not(.is-in) .ryb-cc__spark i {
	transform: scaleY(0);
}
.ryb .ryb-cc__meta {
	grid-area: meta;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	height: 1.35em;
	overflow: hidden; /* položka, ktorá sa nezmestí (tlak), sa celá schová, aby karty mali rovnakú výšku */
	margin-top: 10px;
	font-size: .82rem;
	color: rgba(236, 247, 244, .82);
}
.ryb .ryb-cc__meta > span,
.ryb .ryb-cc__best {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.ryb .ryb-cc__meta .ryb-i,
.ryb .ryb-cc__best .ryb-i {
	width: 15px;
	height: 15px;
	opacity: .85;
}
.ryb .ryb-cc__best {
	grid-area: best;
	justify-self: start;
	margin-top: 10px;
	padding: 5px 11px 5px 9px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ring) 22%, transparent);
	border: 1px solid color-mix(in srgb, var(--ring) 50%, transparent);
	font-size: .84rem;
	font-weight: 620;
}
.ryb .ryb-cond__note {
	margin: 16px 0 0;
	max-width: 80ch;
	font-size: .8rem;
	line-height: 1.5;
	color: rgba(236, 247, 244, .68);
}
.ryb .ryb-cond--empty {
	padding-block: 24px;
}

/* ------------------------------------------------- zoznam revírov: karty */

/* celá karta je odkaz (názov), ostáva len malé tlačidlo „Na mape“ */
.ryb .ryb-nm__item {
	position: relative;
	border-radius: 18px;
	transition-property: transform, box-shadow, border-color;
	transition-duration: .24s;
	transition-timing-function: var(--ryb-out);
}
.ryb .ryb-nm__item .ryb-nm__name::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.ryb .ryb-nm__item .ryb-nm__act {
	position: relative;
	z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
	.ryb .ryb-nm__item:hover {
		transform: translateY(-2px);
	}
}
.ryb .ryb-nm__item .ryb-nm__name:focus-visible {
	outline: none;
}
.ryb .ryb-nm__item:has(.ryb-nm__name:focus-visible) {
	outline: 3px solid var(--ryb-river);
	outline-offset: 2px;
}
.ryb .ryb-nm__item .ryb-btn--sm {
	min-width: 40px;
	min-height: 40px;
}
.ryb .ryb-nm__thumb--sil {
	display: grid;
	place-items: center;
	background-color: var(--ryb-forest-2);
	background-image: var(--ryb-camo);
	background-size: 150px;
	color: rgba(255, 255, 255, .9);
	overflow: hidden;
}
.ryb .ryb-t-trout .ryb-nm__thumb--sil,
.ryb .ryb-t-grayling .ryb-nm__thumb--sil {
	background-color: #0b3e57;
	background-image: var(--ryb-camo-water);
}
.ryb .ryb-nm__thumb--sil .ryb-sil {
	width: 74%;
	height: auto;
	aspect-ratio: 120 / 52;
	fill: currentColor;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

/* ------------------------------------------------ drobnosti na celej stránke */

@media (hover: hover) and (pointer: fine) {
	.ryb .ryb-tile,
	.ryb .ryb-type,
	.ryb .ryb-mo,
	.ryb .ryb-gauge {
		transition-property: transform, box-shadow, border-color;
		transition-duration: .24s;
		transition-timing-function: var(--ryb-out);
	}
	.ryb .ryb-tile:hover,
	.ryb .ryb-type:hover,
	.ryb .ryb-mo:hover,
	.ryb .ryb-gauge:hover {
		transform: translateY(-2px);
	}
}
.ryb img {
	outline: 1px solid rgba(10, 47, 69, .08);
	outline-offset: -1px;
}

/* ------------------------------------------------------------- hlavičky detailov */

.ryb .ryb-hero {
	position: relative;
	isolation: isolate;
}
.ryb .ryb-hero__sil {
	position: absolute;
	right: clamp(14px, 3cqi, 44px);
	bottom: clamp(10px, 2cqi, 26px);
	width: clamp(90px, 12cqi, 170px);
	height: auto;
	color: rgba(255, 255, 255, .13);
	fill: currentColor;
	pointer-events: none;
	z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
	.ryb .ryb-hero__sil {
		animation: ryb-bob 5s ease-in-out infinite alternate;
	}
}
@container ryb (max-width: 819.98px) {
	.ryb .ryb-hero__sil {
		display: none;
	}
}
/* pri satelitnom snímku vpravo siluetu nedávame, aby sa neprekrývali */
.ryb .ryb-hero.has-media .ryb-hero__sil {
	display: none;
}

/* ------------------------------------------------------------------ úlohy */

@media (prefers-reduced-motion: reduce) {
	.ryb .ryb-cond__sil,
	.ryb .ryb-hero__sil {
		animation: none;
	}
}